/* ============================================================
   ARCHIVO: animaciones-alerta.css
   SISTEMA: SOMA - Gestión de Montacargas MAC
   DESCRIPCIÓN: Estilos de Identidad Visual y Animaciones
   ============================================================ */

:root {
    --mac-blue-dark: #25458A; /* Azul Institucional */
    --mac-blue-light: #376BA8; /* Azul Gradiente */
    --mac-red: #EF5342; /* Rojo Acento */
    --mac-gray-bg: #F3F6F9;
}

/* --- ESTILOS BASE DE MARCA --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
}

.text-mac-blue {
    color: var(--mac-blue-dark);
}

.text-mac-red {
    color: var(--mac-red);
}

/* --- CONTENEDOR DE GRÁFICOS DINÁMICOS --- */
.custom-graphics-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    height: 85px;
    margin-bottom: 15px;
}

/* Estilo base de los iconos */
.graphic-item {
    font-size: 45px;
    display: inline-block;
    opacity: 0;
    color: var(--mac-blue-dark); /* Azul por defecto */
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15));
    animation: dropAndBounce 0.6s ease-out forwards;
}

    /* Colores alternados para mayor dinamismo visual */
    .graphic-item:nth-child(even) {
        color: var(--mac-red);
    }

/* --- 1. ANIMACIONES DE ENTRADA --- */
@keyframes dropAndBounce {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- 2. ANIMACIONES CONTINUAS (LOGÍSTICA / SOMA) --- */

/* Montacargas / Vehículos (Avanzar y Frenar) */
@keyframes truckDrive {
    0% {
        transform: translateX(-5px) rotate(0deg);
    }

    50% {
        transform: translateX(5px) translateY(-2px) rotate(1deg);
    }

    100% {
        transform: translateX(-5px) rotate(0deg);
    }
}

/* Usuario (👤) - Pulso de escala */
@keyframes userPulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* Sucursal (🏢) - Pop de presencia */
@keyframes buildingPop {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.9;
    }
}

/* Ubicación (📍) - Salto de Pin */
@keyframes pinJump {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Rol/Llave (🔑) - Giro de validación */
@keyframes keyTurn {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(30deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Gráficas (📊) - Crecimiento vertical */
@keyframes barGrow {
    0%, 100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.3);
    }
}

/* Lupa (🔍) - Escaneo circular */
@keyframes scanSearch {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, -8px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* --- 3. ASIGNACIÓN DE ANIMACIONES POR POSICIÓN --- */

/* Asignación genérica para ALERTAS DE PERFIL (User, Sucursal, Loc, Rol) */
.graphic-item:nth-child(1) {
    animation: dropAndBounce 0.6s forwards, userPulse 2s infinite alternate 0.6s;
}

.graphic-item:nth-child(2) {
    animation: dropAndBounce 0.6s forwards, buildingPop 2.5s infinite ease-in-out 0.8s;
}

.graphic-item:nth-child(3) {
    animation: dropAndBounce 0.6s forwards, pinJump 1.2s infinite 1s;
}

.graphic-item:nth-child(4) {
    animation: dropAndBounce 0.6s forwards, keyTurn 2s infinite ease-in-out 1.2s;
}

/* Sobreescritura opcional: Si el proceso es un REPORTE, puedes usar clases específicas o mantener el orden */

/* --- 4. PERSONALIZACIÓN SWEETALERT TIPO MAC --- */
.swal2-popup {
    border-radius: 20px !important;
    padding: 2.5rem !important;
    box-shadow: 0 15px 50px rgba(37, 69, 138, 0.25) !important;
}

.swal2-title {
    color: var(--mac-blue-dark) !important;
    font-weight: 700 !important;
    font-size: 1.7rem !important;
    margin-top: 10px !important;
}

.swal2-html-container {
    font-size: 1.1rem !important;
    color: #5E6278 !important; /* Gris profesional */
}

/* Estilo del Loader circular de Swal */
.swal2-loader {
    border-color: var(--mac-red) transparent var(--mac-red) transparent !important;
}

/* --- 5. COMPONENTES DEL LOGIN --- */
.login-aside {
    background: linear-gradient(135deg, var(--mac-blue-dark) 0%, var(--mac-blue-light) 100%);
}

.escudo-blanco {
    background-color: #ffffff;
    width: 160px;
    height: 160px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.btn-soma-login {
    background-color: var(--mac-red) !important;
    border-color: var(--mac-red) !important;
    color: white !important;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 8px;
}

    .btn-soma-login:hover {
        background-color: #B0342B !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(239, 83, 66, 0.4);
    }

.form-control-solid {
    background-color: var(--mac-gray-bg) !important;
    border: 1px solid #E5EAEE !important;
    transition: border-color 0.3s ease;
}

    .form-control-solid:focus {
        border-color: var(--mac-blue-light) !important;
        background-color: #ffffff !important;
    }

.input-group-text {
    background-color: var(--mac-blue-dark) !important;
    color: white !important;
    border: none;
    border-radius: 8px 0 0 8px !important;
}