/* =============================================================================
   css/index.css — Reset Global, Estilos Base y Animaciones Reutilizables
   BAR ANTIGRAVITY ERP — Versión 1.0

   ARQUITECTURA DE ESTILOS:
   css/theme.css       → Tokens de color y variables de tema (Día / Noche)
   css/index.css       → Reset global, tipografía base y animaciones (ESTE ARCHIVO)
   css/components.css  → Componentes UI reutilizables (botones, modales, toasts)
   css/pages.css       → Layouts de páginas específicas (dashboard, sidebar, auth)
   ============================================================================= */

/* Importar el sistema de tokens de diseño como primera regla obligatoria */
@import url('./theme.css');


/* =============================================================================
   RESET DE MÁRGENES E INICIALIZACIÓN
   ============================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* pan-y: permite scroll vertical pero bloquea el deslizamiento horizontal
       que causaba que la app se corriera lateralmente en Safari/iOS */
    touch-action: pan-y;
}


/* =============================================================================
   ESTILOS BASE DEL DOCUMENTO
   Todos los colores consumen tokens de theme.css, nunca valores fijos.
   ============================================================================= */
html, body {
    /* SIN position:fixed — causaba que el drawer quedara fijo en media pantalla en iOS.
       overscroll-behavior:none es el método correcto y moderno para bloquear el bounce.
       Ref: ARQUITECTURA_MAESTRA — Regla iOS/Safari */
    width:  100%;
    height: 100%;
    overflow: hidden;  /* ← ARQUITECTURA_MAESTRA: scroll global PROHIBIDO */
    overflow-x: hidden;
    /* Bloquea TODO overscroll en ambos ejes — cubre el bounce y giro circular en Safari */
    overscroll-behavior: none;
    /* Bloquea gestos circulares y de rotación en el nivel raíz */
    touch-action: pan-x pan-y;
    /* Fallback sólido del sistema semántico — cubre el instante previo al paint del gradiente */
    background-color: var(--color-bg);
    /* Gradiente radial de bienvenida */
    background: radial-gradient(
        circle at top,
        var(--gradient-accent) 0%,
        var(--color-bg)        100%
    ) no-repeat fixed;
    /* Token semántico de texto — unificado con el sistema de diseño */
    color:       var(--color-text);
    font-family: var(--font-body);
    font-size:   16px;
    line-height: 1.5;
}


/* =============================================================================
   CONTENEDOR BASE DE LA SPA
   ============================================================================= */
#app {
    width:   100%;
    height:  100vh;
    height:  100dvh;    /* dvh: excluye la UI del SO — previene el sangrado de viewport */
    overflow: hidden;   /* el scroll ocurre solo en los hijos con flex:1 + overflow-y:auto */
    overflow-x: hidden; /* bloquea cualquier desbordamiento horizontal */
    /* iOS Safari: anclar el contenedor raíz para eliminar el bounce/baile */
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
}


/* =============================================================================
   LOADER INICIAL DE LA APLICACIÓN
   ============================================================================= */
.initial-loader {
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             20px;
    background-color: hsl(var(--bg-dark));
}

.sticky-toolbar {
    position:   sticky;
    top:        0;
    /* FIX 4: z-index elevado a 100 para garantizar que la toolbar tape
       cualquier contenido de lista que pase por debajo al hacer scroll */
    z-index:    100;
    /* Fondo sólido para tapar el contenido que desplaza por debajo */
    background: hsl(var(--bg-card));
    border-bottom: 1px solid hsl(var(--border));
    /* Micro-sombra para indicar elevación sobre el scroll */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.loader-spinner {
    width:        50px;
    height:       50px;
    border:       3px solid hsla(var(--text-muted), 0.1);
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation:    spin 1s linear infinite;
}

.initial-loader p {
    font-family: var(--font-title);
    color:       hsl(var(--text-muted));
    font-size:   0.95rem;
    letter-spacing: 0.05em;
    animation:   pulse 1.5s ease-in-out infinite;
}


/* =============================================================================
   BARRA DE DESPLAZAMIENTO PERSONALIZADA
   Consume tokens de color para integrarse al tema activo.
   ============================================================================= */
::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--bg-dark));
}

::-webkit-scrollbar-thumb {
    background:    hsl(var(--border));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(var(--primary), 0.4);
}


/* =============================================================================
   ANIMACIONES REUTILIZABLES GLOBALES
   ============================================================================= */

/* Rotación — loader y elementos de carga */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulso de opacidad — textos de espera */
@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

/* Aparición con traslación vertical — tarjetas y listas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Aparición con escala — modales y overlays */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Desaparición — cierre de overlays/modales */
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Entrada con spring — modal cards (logout, confirmaciones) */
@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Entrada desde la izquierda — sidebar móvil */
@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* Pulso de brillo neón — alarmas Kanban */
@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 8px  hsla(var(--primary), 0.4); }
    50%       { box-shadow: 0 0 20px hsla(var(--primary), 0.8); }
}

/* Respeto a preferencias de accesibilidad de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }
}