/* SmartShaken - Patrones Globales de Diseño
   Belmak Digital - Fujinomiya, Japan 
*/

:root {
    /* --- PALETA DE COLORES (Basada en Logo) --- */
    --ss-verde: #92D0A5;    /* Verde Menta Pastel (Primario) */
    --ss-salmon: #E8867D;   /* Rojo Salmón Pastel (Alerta/Coche) */
    --ss-oscuro: #2C6A45;   /* Verde Bosque (Contraste/Texto) */
    --ss-fondo: #F9FAFB;    /* Gris Neutro ultra-claro para fondos */
    
    /* --- ESTADOS DEL SEMÁFORO (Tonos Pasteles Suaves) --- */
    /* Urgente (Rojo/Salmón) */
    --status-urgente-bg: #FDF2F1;
    --status-urgente-text: #E8867D;
    --status-urgente-border: #F87171;

    /* Atención (Amarillo/Ámbar) */
    --status-atencion-bg: #FEF9EC;
    --status-atencion-text: #B45309;
    --status-atencion-border: #FCD34D;

    /* Finalizado (Verde Menta) */
    --status-finalizado-bg: #F0F9F4;
    --status-finalizado-text: #2C6A45;
    --status-finalizado-border: #92D0A5;
}

/* --- ESTILOS BASE --- */
body {
    background-color: var(--ss-fondo);
    color: #374151; /* Gris oscuro para lectura */
}

/* --- CLASES DE UTILIDAD PARA COLORES --- */
.bg-ss-verde { background-color: var(--ss-verde); }
.text-ss-verde { color: var(--ss-verde); }

.bg-ss-salmon { background-color: var(--ss-salmon); }
.text-ss-salmon { color: var(--ss-salmon); }

.bg-ss-oscuro { background-color: var(--ss-oscuro); }
.text-ss-oscuro { color: var(--ss-oscuro); }

/* --- BOTONES PERSONALIZADOS --- */
.btn-primary {
    background-color: var(--ss-oscuro);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #1e4a30;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 106, 69, 0.2);
}

.btn-secondary {
    background-color: var(--ss-verde);
    color: var(--ss-oscuro);
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background-color: #7bc090;
    opacity: 0.95;
}

/* --- TARJETAS DEL DASHBOARD (EL SEMÁFORO) --- */
.card-shaken {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-shaken:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-shaken-urgente {
    background-color: var(--status-urgente-bg);
    border-left: 5px solid var(--status-urgente-border);
}
.card-shaken-urgente .badge {
    background-color: #FEE2E2;
    color: var(--status-urgente-text);
}

.card-shaken-atencion {
    background-color: var(--status-atencion-bg);
    border-left: 5px solid var(--status-atencion-border);
}
.card-shaken-atencion .badge {
    background-color: #FEF3C7;
    color: var(--status-atencion-text);
}

.card-shaken-finalizado {
    background-color: var(--status-finalizado-bg);
    border-left: 5px solid var(--status-finalizado-border);
}
.card-shaken-finalizado .badge {
    background-color: #D1FAE5;
    color: var(--status-finalizado-text);
}

/* --- ANIMACIONES (SPLASH SCREEN & LOGO) --- */
.pulse-fade {
    animation: pulse 2.5s infinite, fadeOut 1s forwards;
    animation-delay: 0s, 4.5s; /* Se mantiene 4.5s y luego se desvanece */
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.85; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

/* Optimización para móviles */
@media (max-width: 640px) {
    .card-shaken {
        margin-bottom: 1rem;
    }
}