/**
 * Estilos para Modal Mi Cuenta
 * Usuario perfil y estad�sticas
 * Versi�n: UX MAXIMA - Mobile First
 */

/* =========================================
   1. Avatar y Perfil
   ================================********* */
.mi-cuenta-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid #000000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 50%;
}

/* Desktop: avatar más grande en su propia columna */
@media (min-width: 768px) {
    .mi-cuenta-avatar-desktop {
        width: 100px;
        height: 100px;
        border-width: 4px;
    }
}

/* Columna avatar: sin separadores, padding derecho en desktop */
@media (min-width: 768px) {
    .perfil-avatar-col {
        padding-right: 0.5rem;
    }
}

/* =========================================
   2. Estilos de Contenedores (Cards)
   ================================********* */

/* Estilo com�n para las secciones principales 
   Borde negro s�lido y esquinas redondeadas superiores */
.card-seccion-usuario {
    border: 1px solid #000000 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; /* Sombra suave */
    margin-bottom: 0 !important; /* El margin se controla con las filas */
}

/* Headers de secciones */
.card-seccion-usuario .card-header {
    border-radius: 15px 15px 0 0 !important;
    border-bottom: 1px solid #000000 !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Colores de Fondo de Headers (Gradientes) — Azul Monocromático */
.header-contacto { background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); }
.header-notificaciones { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
.header-estado { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
.header-estadisticas { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); }
.header-estadisticas-general { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%); }

/* Items interiores */
.notif-item { background: #fff; border: 1px solid #dee2e6; }
.estado-item { background: #f8f9fa; border: 1px solid #e9ecef; }
.alert-adopciones { background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%); border: none; }

/* =========================================
   3. Tarjeta Rescatista
   ================================********* */
.card-rescatista {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #166534 !important;
    border-radius: 16px !important;
}

.card-rescatista-titulo { color: #166534; }
.card-rescatista-btn { min-width: 120px; }

/* =========================================
   4. Estad�sticas (KPIs)
   ================================********* */

/* Cards de KPIs individuales */
.stats-card-publicados,
.stats-card-activos,
.stats-card-adopciones,
.stats-card-enviadas,
.stats-card-recibidas {
    background: #ffffff !important;
    border-radius: 12px !important;
    transition: transform 0.2s ease; /* Micro-interacci�n suave */
}

/* Bordes de colores identificativos */
.stats-card-publicados { border: 2px solid #2196F3 !important; }
.stats-card-activos    { border: 2px solid #00BCD4 !important; }
.stats-card-adopciones { border: 2px solid #F44336 !important; }
.stats-card-enviadas   { border: 2px solid #FF9800 !important; }
.stats-card-recibidas  { border: 2px solid #4CAF50 !important; }

.stats-numero { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }

/* Subcabeceras de estad�sticas */
.stats-subheader {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1565C0;
    padding: 8px 12px;
    background: linear-gradient(to right, #E3F2FD, #ffffff);
    border-left: 4px solid #1976D2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.stats-subheader i { font-size: 1.1rem; color: #1976D2; }

/* =========================================
   5. Estad�sticas Detalladas (Barras y Estados)
   ================================********* */
.stats-pendientes { background: #fff3e0; border: 1px solid #ffe0b2; }
.stats-aceptadas  { background: #e8f5e9; border: 1px solid #c8e6c9; }
.stats-rechazadas { background: #ffebee; border: 1px solid #ffcdd2; }

.stats-label-small { font-size: 0.7rem; display: block; margin-top: 2px; }
.progress-thin { height: 6px; border-radius: 3px; background-color: #e9ecef; }

/* =========================================
   6. Adaptaciones Mobile (UX Refinements)
   ================================********* */

/* Ajustes para pantallas muy peque�as */
@media (max-width: 575px) {
    /* Forzar alineaci�n horizontal en listas de contacto para ahorrar espacio vertical */
    .list-group-item.d-flex.flex-column {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .list-group-item .badge {
        margin-left: 10px;
    }

    /* Ajustar tama�o de fuentes en KPIs */
    .stats-card-publicados .fs-4,
    .stats-card-activos .fs-4,
    .stats-card-adopciones .fs-4,
    .stats-card-enviadas .fs-4,
    .stats-card-recibidas .fs-4 {
        font-size: 1.2rem !important; /* M�s peque�o en m�vil */
    }
    
    .mi-cuenta-avatar {
        width: 70px;
        height: 70px;
    }
    
}