/**
 * main.css
 * Hoja de estilos principal para el proyecto Elderlylink.
 * Versión: 2.0
 * Fecha de actualización: 2 de Septiembre de 2025
 */

/* ==========================================================================
   1. Variables Globales (Tokens de Diseño)
   ========================================================================== */
:root {
    /* Paleta de Colores Corporativos */
    --erojo: #f8838d;
    --erojo-dark: #e77b84;
    --eazul: #5fb4cc;
    --eazul-dark: #6aa3b3;
    --everde: #9ee4dc;
    --everde-dark: #7cc4ba;
    --eamarillo: #f7e1cd;
    --eamarillo-dark: #e3c4a6;
    --emorado: #c89bc4;
    --emorado-dark: #ae82a9;

    /* Colores en formato RGB para usar con opacidad (ej. rgba) */
    --eazul-rgb: 95, 180, 204;
    --emorado-rgb: 200, 155, 196;
    --erojo-rgb: 248, 131, 141;

    /* Tonos Neutrales para la UI */
    --fondo: #f8f9fa;
    --texto-principal: #212529;
    --texto-secundario: #6c757d;
    --borde-suave: #dee2e6;
    
    /* Sombras para dar Profundidad */
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 8px 15px rgba(0, 0, 0, 0.07);
}


/* ==========================================================================
   2. Estilos Base y Tipografía
   ========================================================================== */
body {
    background-color: var(--fondo);
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    color: var(--texto-principal);
}


/* ==========================================================================
   3. Componentes de UI
   ========================================================================== */

/* --- Botones --- */
.btn-eazul {
    background-color: var(--eazul) !important;
    border-color: var(--eazul) !important;
    color: #fff !important;
}
.btn-eazul:hover,
.btn-eazul:focus {
    background-color: var(--eazul-dark) !important;
    border-color: var(--eazul-dark) !important;
}

.btn-erojo {
    background-color: var(--erojo) !important;
    border-color: var(--erojo) !important;
    color: #fff !important;
}
.btn-erojo:hover,
.btn-erojo:focus {
    background-color: var(--erojo-dark) !important;
    border-color: var(--erojo-dark) !important;
}

.btn-everde {
    background-color: var(--everde) !important;
    border-color: var(--everde) !important;
    color: var(--texto-principal) !important; /* Color de texto oscuro para mejor contraste */
}
.btn-everde:hover,
.btn-everde:focus {
    background-color: var(--everde-dark) !important;
    border-color: var(--everde-dark) !important;
}

/* --- Tarjetas (Cards) --- */
.resident-card {
    background-color: #ffffff;
    border: none;
    border-radius: 1rem;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resident-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-media);
}
.resident-card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--borde-suave);
    padding: 1.5rem;
}
.resident-card-header h5 {
    color: var(--texto-principal);
    font-weight: 600;
}

.metric-card {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
    border: 1px solid var(--borde-suave);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
    transform: scale(1.03);
    box-shadow: var(--sombra-suave);
}
.metric-card .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.metric-card .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--texto-principal);
}
.metric-card .label {
    font-size: 0.8rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
}

/* --- Insignias (Badges) --- */
.status-badge {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    font-weight: 600;
    border-radius: 50rem;
}
.status-badge.normal {
    background-color: var(--everde) !important;
    color: var(--texto-principal) !important;
}
.status-badge.alerta {
    background-color: var(--erojo) !important;
    color: #fff !important;
    animation: softPulse 2s infinite;
}

/* --- Registro de Actividad --- */
.activity-log .list-group-item {
    transition: background-color 0.2s ease;
}
.activity-log .list-group-item-action:hover {
    background-color: #f0f0f0;
}
.activity-log .icon {
    width: 30px;
    text-align: center;
    font-size: 1.2rem;
}

/* --- Contenedor de Gráficos --- */
.chart-container {
    height: 250px;
    width: 100%;
}


/* ==========================================================================
   4. Clases de Utilidad
   ========================================================================== */

/* --- Animaciones --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--erojo-rgb), 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(var(--erojo-rgb), 0);
    }
    100% {
        transform: scale(1);
    }
}

.animate-on-load {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: var(--animation-delay, 0s);
    opacity: 0;
}

/* --- Colores de Iconos --- */
.icon-eazul { color: var(--eazul); }
.icon-emorado { color: var(--emorado); }
.icon-everde { color: var(--everde); }
.icon-eamarillo { color: var(--eamarillo); }
.icon-erojo { color: var(--erojo); }