/**
 * Demo - Estilos personalizados
 * Estilos globales y utilidades para la aplicación
 */

/* ==========================================
   IDENTIDAD CORPORATIVA — paleta y tipografía
   ========================================== */

:root {
    /* Tipografía base: Inter. Cubre textos, tablas, formularios, botones,
       sidebar... todo salvo los titulares. Es más estrecha que Poppins, así
       que los listados densos y el menú no ganan ancho ni hacen wrap. */
    --marca-font: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Tipografía de titulares: Poppins (manual de marca). Solo h1–h6.
       Al limitarse a textos cortos y grandes, su mayor anchura no molesta
       y aporta la personalidad de marca donde más se ve. */
    --marca-font-heading: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Paleta corporativa (manual de marca) */
    --marca-cyan:  #69F1FF;
    --marca-sky:   #A6D8FD;
    --marca-blue:  #1A2BC3;
    --marca-navy:  #0F1053;
    --marca-paper: #FEFDF9;
    --marca-mist:  #D7EDF9;

    /* Alias semánticos. OJO: --marca-primary-dark es un derivado nuestro
       (azul principal oscurecido), no viene en el manual: pendiente de
       que diseño valide o entregue el tono oficial de hover. */
    --marca-primary:      var(--marca-blue);
    --marca-primary-dark: #141C8A;
    --marca-sidebar-bg:   var(--marca-navy);
    --marca-bg-app:       var(--marca-paper);
}

/* Utilidades de paleta corporativa.
   El proyecto usa Tailwind por CDN sin `tailwind.config`, así que estas
   clases NO son Tailwind: se definen aquí a mano. Consecuencia importante:
   solo existe la variante plana. `hover:bg-marca-blue` o `focus:ring-marca-cyan`
   NO generan nada. Para variantes hay que usar valores arbitrarios de
   Tailwind, que sí compila el CDN: `hover:bg-[#141C8A]`, `focus:ring-[#69F1FF]`. */
.bg-marca-cyan  { background-color: var(--marca-cyan); }
.bg-marca-sky   { background-color: var(--marca-sky); }
.bg-marca-blue  { background-color: var(--marca-blue); }
.bg-marca-navy  { background-color: var(--marca-navy); }
.bg-marca-paper { background-color: var(--marca-paper); }
.bg-marca-mist  { background-color: var(--marca-mist); }

.text-marca-cyan { color: var(--marca-cyan); }
.text-marca-blue { color: var(--marca-blue); }
.text-marca-navy { color: var(--marca-navy); }

.border-marca-cyan { border-color: var(--marca-cyan); }
.border-marca-blue { border-color: var(--marca-blue); }
.border-marca-mist { border-color: var(--marca-mist); }

/* Rótulo de sección del sidebar ("GESTIÓN", "REGISTRO"...).
   Sky corporativo atenuado: se distingue por TONO (azulado) del blanco
   neutro de los enlaces, en vez de por opacidad, que apenas se percibe.
   Sobre --marca-navy da 6,1:1 (AA ✅) y queda por debajo de los enlaces
   (white/80 = 11,2:1), preservando la jerarquía. El sky a plena
   intensidad daría 11,4:1 y la invertiría: no usarlo aquí. */
.text-marca-section { color: rgba(166, 216, 253, 0.7); }

/* ==========================================
   REMAPEO DE LA RAMPA `blue-*` DE TAILWIND
   ==========================================
   Redefine las utilidades blue-* del CDN para que rindan la paleta
   corporativa: ~4.145 usos en 200 archivos migrados sin tocar un solo .php.

   CÓMO FUNCIONA
   - Tailwind (Play CDN) inyecta su <style> en runtime, DESPUÉS de esta hoja,
     así que gana por orden del documento. Para adelantarlo se sube la
     ESPECIFICIDAD con el prefijo `:root ` (+1 clase), NO con `!important`.

     ¡Esto es crítico y no es un capricho de estilo! Con `!important` la regla
     base ganaba también a las variantes de estado de Tailwind: un
     `bg-blue-500 group-hover:bg-white` se quedaba azul en hover, y el icono
     con `group-hover:text-blue-500` encima resultaba INVISIBLE (azul sobre
     azul). Con especificidad se respeta la cascada natural:

       Tailwind .bg-blue-500 .......................... (0,1,0)  pierde
       :root .bg-blue-500  (esta hoja) ................ (0,2,0)  gana al base
       Tailwind .group:hover .group-hover\:bg-white ... (0,3,0)  gana al nuestro ✅

     Regla de oro para mantener este bloque: NO añadir `!important` aquí.
   - Los colores se declaran como TRIPLETES RGB, no como hex, para poder
     mantener el patrón `rgb(... / var(--tw-*-opacity))` de Tailwind. Es
     obligatorio: `bg-opacity-*` se usa 227 veces y con un color plano
     dejaría de funcionar en todas ellas.

   LA RAMPA (no se puede mapear todo a #1A2BC3)
   blue-* son 10 tonos con roles opuestos: los claros (50/100) son fondos de
   chip que llevan texto oscuro encima. Si todos fueran el azul corporativo,
   un text-blue-800 sobre bg-blue-100 quedaría en 1:1, invisible. Por eso se
   construye una rampa completa anclada en los colores del manual.

   PARA REVERTIR: basta con borrar este bloque entero.
   ========================================== */

:root {
    --marca-blue-50:  235 246 252;
    --marca-blue-100: 215 237 249;   /* = --marca-mist  */
    --marca-blue-200: 166 216 253;   /* = --marca-sky   */
    --marca-blue-300: 131 173 239;   /* interpolado    */
    --marca-blue-400:  96 129 224;   /* interpolado    */
    --marca-blue-500:  61  86 210;   /* interpolado    */
    --marca-blue-600:  26  43 195;   /* = --marca-blue  (ancla) */
    --marca-blue-700:  20  28 138;   /* = --marca-primary-dark  */
    --marca-blue-800:  18  22 111;   /* interpolado    */
    --marca-blue-900:  15  16  83;   /* = --marca-navy  */
}

/* ---------- background-color ---------- */
:root .bg-blue-50  { background-color: rgb(var(--marca-blue-50)  / var(--tw-bg-opacity, 1)); }
:root .bg-blue-100 { background-color: rgb(var(--marca-blue-100) / var(--tw-bg-opacity, 1)); }
:root .bg-blue-200 { background-color: rgb(var(--marca-blue-200) / var(--tw-bg-opacity, 1)); }
:root .bg-blue-500 { background-color: rgb(var(--marca-blue-500) / var(--tw-bg-opacity, 1)); }
:root .bg-blue-600 { background-color: rgb(var(--marca-blue-600) / var(--tw-bg-opacity, 1)); }

:root .hover\:bg-blue-50:hover  { background-color: rgb(var(--marca-blue-50)  / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-blue-100:hover { background-color: rgb(var(--marca-blue-100) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-blue-200:hover { background-color: rgb(var(--marca-blue-200) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-blue-600:hover { background-color: rgb(var(--marca-blue-600) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-blue-700:hover { background-color: rgb(var(--marca-blue-700) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-blue-800:hover { background-color: rgb(var(--marca-blue-800) / var(--tw-bg-opacity, 1)); }

/* Variante `active:`: es la que se dispara al TOCAR en móvil (donde no hay
   hover). La usa el botón hamburguesa del navbar, que es `md:hidden`. */
:root .active\:bg-blue-100:active { background-color: rgb(var(--marca-blue-100) / var(--tw-bg-opacity, 1)); }

:root .group:hover .group-hover\:bg-blue-100 { background-color: rgb(var(--marca-blue-100) / var(--tw-bg-opacity, 1)); }
:root .group:hover .group-hover\:bg-blue-600 { background-color: rgb(var(--marca-blue-600) / var(--tw-bg-opacity, 1)); }

/* Modificadores de opacidad (bg-blue-50/30). Tailwind los compila como clases
   independientes, así que las reglas de arriba NO les afectan: van aparte. */
:root .bg-blue-50\/30  { background-color: rgb(var(--marca-blue-50)  / 0.3); }
:root .bg-blue-50\/40  { background-color: rgb(var(--marca-blue-50)  / 0.4); }
:root .bg-blue-50\/50  { background-color: rgb(var(--marca-blue-50)  / 0.5); }
:root .bg-blue-100\/50 { background-color: rgb(var(--marca-blue-100) / 0.5); }
:root .bg-blue-300\/30 { background-color: rgb(var(--marca-blue-300) / 0.3); }
:root .bg-blue-400\/30 { background-color: rgb(var(--marca-blue-400) / 0.3); }
:root .hover\:bg-blue-50\/30:hover { background-color: rgb(var(--marca-blue-50) / 0.3); }
:root .hover\:bg-blue-50\/40:hover { background-color: rgb(var(--marca-blue-50) / 0.4); }
:root .hover\:bg-blue-50\/50:hover { background-color: rgb(var(--marca-blue-50) / 0.5); }
:root .hover\:bg-blue-50\/60:hover { background-color: rgb(var(--marca-blue-50) / 0.6); }
:root .hover\:bg-blue-50\/70:hover { background-color: rgb(var(--marca-blue-50) / 0.7); }
:root .group:hover .group-hover\:bg-blue-50\/60 { background-color: rgb(var(--marca-blue-50) / 0.6); }

/* ---------- color ---------- */
:root .text-blue-100 { color: rgb(var(--marca-blue-100) / var(--tw-text-opacity, 1)); }
:root .text-blue-200 { color: rgb(var(--marca-blue-200) / var(--tw-text-opacity, 1)); }
:root .text-blue-300 { color: rgb(var(--marca-blue-300) / var(--tw-text-opacity, 1)); }
:root .text-blue-400 { color: rgb(var(--marca-blue-400) / var(--tw-text-opacity, 1)); }
:root .text-blue-500 { color: rgb(var(--marca-blue-500) / var(--tw-text-opacity, 1)); }
:root .text-blue-600 { color: rgb(var(--marca-blue-600) / var(--tw-text-opacity, 1)); }
:root .text-blue-700 { color: rgb(var(--marca-blue-700) / var(--tw-text-opacity, 1)); }
:root .text-blue-800 { color: rgb(var(--marca-blue-800) / var(--tw-text-opacity, 1)); }
:root .text-blue-900 { color: rgb(var(--marca-blue-900) / var(--tw-text-opacity, 1)); }

:root .hover\:text-blue-100:hover { color: rgb(var(--marca-blue-100) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-200:hover { color: rgb(var(--marca-blue-200) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-300:hover { color: rgb(var(--marca-blue-300) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-500:hover { color: rgb(var(--marca-blue-500) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-600:hover { color: rgb(var(--marca-blue-600) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-700:hover { color: rgb(var(--marca-blue-700) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-800:hover { color: rgb(var(--marca-blue-800) / var(--tw-text-opacity, 1)); }
:root .hover\:text-blue-900:hover { color: rgb(var(--marca-blue-900) / var(--tw-text-opacity, 1)); }

:root .group:hover .group-hover\:text-blue-100 { color: rgb(var(--marca-blue-100) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-blue-400 { color: rgb(var(--marca-blue-400) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-blue-500 { color: rgb(var(--marca-blue-500) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-blue-600 { color: rgb(var(--marca-blue-600) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-blue-700 { color: rgb(var(--marca-blue-700) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-blue-800 { color: rgb(var(--marca-blue-800) / var(--tw-text-opacity, 1)); }

/* ---------- border-color ---------- */
:root .border-blue-100 { border-color: rgb(var(--marca-blue-100) / var(--tw-border-opacity, 1)); }
:root .border-blue-200 { border-color: rgb(var(--marca-blue-200) / var(--tw-border-opacity, 1)); }
:root .border-blue-300 { border-color: rgb(var(--marca-blue-300) / var(--tw-border-opacity, 1)); }
:root .border-blue-400 { border-color: rgb(var(--marca-blue-400) / var(--tw-border-opacity, 1)); }
:root .border-blue-500 { border-color: rgb(var(--marca-blue-500) / var(--tw-border-opacity, 1)); }
:root .border-blue-600 { border-color: rgb(var(--marca-blue-600) / var(--tw-border-opacity, 1)); }
:root .border-blue-700 { border-color: rgb(var(--marca-blue-700) / var(--tw-border-opacity, 1)); }
:root .border-blue-800 { border-color: rgb(var(--marca-blue-800) / var(--tw-border-opacity, 1)); }

:root .hover\:border-blue-300:hover { border-color: rgb(var(--marca-blue-300) / var(--tw-border-opacity, 1)); }
:root .hover\:border-blue-400:hover { border-color: rgb(var(--marca-blue-400) / var(--tw-border-opacity, 1)); }
:root .hover\:border-blue-500:hover { border-color: rgb(var(--marca-blue-500) / var(--tw-border-opacity, 1)); }
:root .hover\:border-blue-600:hover { border-color: rgb(var(--marca-blue-600) / var(--tw-border-opacity, 1)); }
:root .focus\:border-blue-400:focus { border-color: rgb(var(--marca-blue-400) / var(--tw-border-opacity, 1)); }
:root .focus\:border-blue-500:focus { border-color: rgb(var(--marca-blue-500) / var(--tw-border-opacity, 1)); }

/* ---------- ring-color ---------- */
:root .ring-blue-100 { --tw-ring-color: rgb(var(--marca-blue-100) / var(--tw-ring-opacity, 1)); }
:root .ring-blue-200 { --tw-ring-color: rgb(var(--marca-blue-200) / var(--tw-ring-opacity, 1)); }
:root .ring-blue-300 { --tw-ring-color: rgb(var(--marca-blue-300) / var(--tw-ring-opacity, 1)); }
:root .ring-blue-400 { --tw-ring-color: rgb(var(--marca-blue-400) / var(--tw-ring-opacity, 1)); }
:root .ring-blue-500 { --tw-ring-color: rgb(var(--marca-blue-500) / var(--tw-ring-opacity, 1)); }
:root .focus\:ring-blue-400:focus { --tw-ring-color: rgb(var(--marca-blue-400) / var(--tw-ring-opacity, 1)); }
:root .focus\:ring-blue-500:focus { --tw-ring-color: rgb(var(--marca-blue-500) / var(--tw-ring-opacity, 1)); }
:root .hover\:ring-blue-400:hover { --tw-ring-color: rgb(var(--marca-blue-400) / var(--tw-ring-opacity, 1)); }

/* ---------- gradientes ----------
   from-*/to-* no fijan una propiedad, sino variables de Tailwind.
   En `from-*` se sobrescribe SOLO --tw-gradient-from: el --tw-gradient-to
   transparente que Tailwind añade tiene alpha 0, así que su tono da igual.
   Los `to-*` van DESPUÉS de los `from-*` a propósito: comparten
   especificidad, así que en caso de empate decide el orden de aparición. */
:root .from-blue-50  { --tw-gradient-from: rgb(var(--marca-blue-50))  var(--tw-gradient-from-position); }
:root .from-blue-100 { --tw-gradient-from: rgb(var(--marca-blue-100)) var(--tw-gradient-from-position); }
:root .from-blue-400 { --tw-gradient-from: rgb(var(--marca-blue-400)) var(--tw-gradient-from-position); }
:root .from-blue-500 { --tw-gradient-from: rgb(var(--marca-blue-500)) var(--tw-gradient-from-position); }
:root .from-blue-600 { --tw-gradient-from: rgb(var(--marca-blue-600)) var(--tw-gradient-from-position); }
:root .from-blue-700 { --tw-gradient-from: rgb(var(--marca-blue-700)) var(--tw-gradient-from-position); }

:root .hover\:from-blue-50:hover  { --tw-gradient-from: rgb(var(--marca-blue-50))  var(--tw-gradient-from-position); }
:root .hover\:from-blue-100:hover { --tw-gradient-from: rgb(var(--marca-blue-100)) var(--tw-gradient-from-position); }
:root .hover\:from-blue-500:hover { --tw-gradient-from: rgb(var(--marca-blue-500)) var(--tw-gradient-from-position); }
:root .hover\:from-blue-600:hover { --tw-gradient-from: rgb(var(--marca-blue-600)) var(--tw-gradient-from-position); }
:root .hover\:from-blue-700:hover { --tw-gradient-from: rgb(var(--marca-blue-700)) var(--tw-gradient-from-position); }

:root .via-blue-50  { --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--marca-blue-50))  var(--tw-gradient-via-position), var(--tw-gradient-to); }
:root .via-blue-600 { --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--marca-blue-600)) var(--tw-gradient-via-position), var(--tw-gradient-to); }

:root .to-blue-50  { --tw-gradient-to: rgb(var(--marca-blue-50))  var(--tw-gradient-to-position); }
:root .to-blue-100 { --tw-gradient-to: rgb(var(--marca-blue-100)) var(--tw-gradient-to-position); }
:root .to-blue-200 { --tw-gradient-to: rgb(var(--marca-blue-200)) var(--tw-gradient-to-position); }
:root .to-blue-400 { --tw-gradient-to: rgb(var(--marca-blue-400)) var(--tw-gradient-to-position); }
:root .to-blue-500 { --tw-gradient-to: rgb(var(--marca-blue-500)) var(--tw-gradient-to-position); }
:root .to-blue-600 { --tw-gradient-to: rgb(var(--marca-blue-600)) var(--tw-gradient-to-position); }
:root .to-blue-700 { --tw-gradient-to: rgb(var(--marca-blue-700)) var(--tw-gradient-to-position); }

:root .hover\:to-blue-100:hover { --tw-gradient-to: rgb(var(--marca-blue-100)) var(--tw-gradient-to-position); }
:root .hover\:to-blue-200:hover { --tw-gradient-to: rgb(var(--marca-blue-200)) var(--tw-gradient-to-position); }
:root .hover\:to-blue-500:hover { --tw-gradient-to: rgb(var(--marca-blue-500)) var(--tw-gradient-to-position); }
:root .hover\:to-blue-600:hover { --tw-gradient-to: rgb(var(--marca-blue-600)) var(--tw-gradient-to-position); }
:root .hover\:to-blue-700:hover { --tw-gradient-to: rgb(var(--marca-blue-700)) var(--tw-gradient-to-position); }
:root .hover\:to-blue-800:hover { --tw-gradient-to: rgb(var(--marca-blue-800)) var(--tw-gradient-to-position); }

/* ---------- residuales ---------- */
:root .shadow-blue-200 { --tw-shadow-color: rgb(var(--marca-blue-200)); --tw-shadow: var(--tw-shadow-colored); }
:root .group:hover .group-hover\:shadow-blue-300 { --tw-shadow-color: rgb(var(--marca-blue-300)); --tw-shadow: var(--tw-shadow-colored); }
:root .decoration-blue-500 { text-decoration-color: rgb(var(--marca-blue-500)); }
:root .group:hover .group-hover\:decoration-blue-500 { text-decoration-color: rgb(var(--marca-blue-500)); }

/* ==========================================
   REMAPEO DE LA RAMPA `cyan-*` DE TAILWIND
   ==========================================
   545 usos en 68 archivos. Misma técnica que el bloque `blue-*` de arriba
   (prefijo `:root`, tripletes RGB, NUNCA `!important`).

   POR QUÉ ES UNA "RAMPA PARTIDA"
   El cyan corporativo (#69F1FF) es un color CLARO: sobre blanco da 1,34:1.
   Pero el 67% de los usos son tonos 500-900, que llevan texto sobre fondo
   claro (text-cyan-600 son 70 usos, focus:ring-cyan-500 son 63). Mapear todo
   al cyan de marca dejaría ese texto invisible. Y el manual NO define ningún
   cyan oscuro: describe el cyan como "acentos claros, hovers, badges".

   Por eso la rampa se parte:
     50-300  -> tintes del cyan corporativo. Aquí es donde el #69F1FF
                ENTRA POR FIN EN USO: hoy aparece 0 veces en los .php.
     400     -> puente.
     500-900 -> rampa azul corporativa (el manual no tiene cyan oscuro y
                aquí el texto necesita contraste).

   El #69F1FF se ancla en el tono 300 a propósito: el cyan-300 de Tailwind
   (#67e8f9) es casi idéntico, así que el color de marca entra en uso sin
   alterar el peso visual de lo que ya había.

   PARA REVERTIR: borrar este bloque entero.
   ========================================== */

:root {
    --marca-cyan-50:  237 253 255;
    --marca-cyan-100: 208 249 255;
    --marca-cyan-200: 163 244 255;
    --marca-cyan-300: 105 241 255;   /* = --marca-cyan  (#69F1FF, marca) */
    --marca-cyan-400:  79 175 235;   /* puente cyan -> azul */
    --marca-cyan-500:  61  86 210;   /* = --marca-blue-500 */
    --marca-cyan-600:  26  43 195;   /* = --marca-blue     */
    --marca-cyan-700:  20  28 138;   /* = --marca-primary-dark */
    --marca-cyan-800:  18  22 111;
    --marca-cyan-900:  15  16  83;   /* = --marca-navy */
}

/* ---------- background-color ---------- */
:root .bg-cyan-50  { background-color: rgb(var(--marca-cyan-50)  / var(--tw-bg-opacity, 1)); }
:root .bg-cyan-100 { background-color: rgb(var(--marca-cyan-100) / var(--tw-bg-opacity, 1)); }
:root .bg-cyan-500 { background-color: rgb(var(--marca-cyan-500) / var(--tw-bg-opacity, 1)); }
:root .bg-cyan-600 { background-color: rgb(var(--marca-cyan-600) / var(--tw-bg-opacity, 1)); }

:root .hover\:bg-cyan-50:hover  { background-color: rgb(var(--marca-cyan-50)  / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-cyan-100:hover { background-color: rgb(var(--marca-cyan-100) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-cyan-600:hover { background-color: rgb(var(--marca-cyan-600) / var(--tw-bg-opacity, 1)); }
:root .hover\:bg-cyan-700:hover { background-color: rgb(var(--marca-cyan-700) / var(--tw-bg-opacity, 1)); }

:root .bg-cyan-50\/40  { background-color: rgb(var(--marca-cyan-50)  / 0.4); }
:root .bg-cyan-50\/60  { background-color: rgb(var(--marca-cyan-50)  / 0.6); }
:root .bg-cyan-300\/40 { background-color: rgb(var(--marca-cyan-300) / 0.4); }
:root .bg-cyan-400\/40 { background-color: rgb(var(--marca-cyan-400) / 0.4); }

/* ---------- color ---------- */
:root .text-cyan-100 { color: rgb(var(--marca-cyan-100) / var(--tw-text-opacity, 1)); }
:root .text-cyan-300 { color: rgb(var(--marca-cyan-300) / var(--tw-text-opacity, 1)); }
:root .text-cyan-400 { color: rgb(var(--marca-cyan-400) / var(--tw-text-opacity, 1)); }
:root .text-cyan-500 { color: rgb(var(--marca-cyan-500) / var(--tw-text-opacity, 1)); }
:root .text-cyan-600 { color: rgb(var(--marca-cyan-600) / var(--tw-text-opacity, 1)); }
:root .text-cyan-700 { color: rgb(var(--marca-cyan-700) / var(--tw-text-opacity, 1)); }
:root .text-cyan-800 { color: rgb(var(--marca-cyan-800) / var(--tw-text-opacity, 1)); }
:root .text-cyan-900 { color: rgb(var(--marca-cyan-900) / var(--tw-text-opacity, 1)); }

:root .hover\:text-cyan-600:hover { color: rgb(var(--marca-cyan-600) / var(--tw-text-opacity, 1)); }
:root .hover\:text-cyan-700:hover { color: rgb(var(--marca-cyan-700) / var(--tw-text-opacity, 1)); }
:root .hover\:text-cyan-800:hover { color: rgb(var(--marca-cyan-800) / var(--tw-text-opacity, 1)); }
:root .hover\:text-cyan-900:hover { color: rgb(var(--marca-cyan-900) / var(--tw-text-opacity, 1)); }
:root .group:hover .group-hover\:text-cyan-600 { color: rgb(var(--marca-cyan-600) / var(--tw-text-opacity, 1)); }

/* ---------- border-color ---------- */
:root .border-cyan-100 { border-color: rgb(var(--marca-cyan-100) / var(--tw-border-opacity, 1)); }
:root .border-cyan-200 { border-color: rgb(var(--marca-cyan-200) / var(--tw-border-opacity, 1)); }
:root .border-cyan-300 { border-color: rgb(var(--marca-cyan-300) / var(--tw-border-opacity, 1)); }
:root .border-cyan-400 { border-color: rgb(var(--marca-cyan-400) / var(--tw-border-opacity, 1)); }
:root .border-cyan-500 { border-color: rgb(var(--marca-cyan-500) / var(--tw-border-opacity, 1)); }
:root .border-cyan-600 { border-color: rgb(var(--marca-cyan-600) / var(--tw-border-opacity, 1)); }
:root .hover\:border-cyan-300:hover { border-color: rgb(var(--marca-cyan-300) / var(--tw-border-opacity, 1)); }
:root .hover\:border-cyan-400:hover { border-color: rgb(var(--marca-cyan-400) / var(--tw-border-opacity, 1)); }
:root .focus\:border-cyan-500:focus { border-color: rgb(var(--marca-cyan-500) / var(--tw-border-opacity, 1)); }

/* ---------- ring-color ---------- */
:root .ring-cyan-400 { --tw-ring-color: rgb(var(--marca-cyan-400) / var(--tw-ring-opacity, 1)); }
:root .focus\:ring-cyan-500:focus { --tw-ring-color: rgb(var(--marca-cyan-500) / var(--tw-ring-opacity, 1)); }

/* ---------- gradientes (los `to-*` van después de los `from-*`) ---------- */
:root .from-cyan-50  { --tw-gradient-from: rgb(var(--marca-cyan-50))  var(--tw-gradient-from-position); }
:root .from-cyan-400 { --tw-gradient-from: rgb(var(--marca-cyan-400)) var(--tw-gradient-from-position); }
:root .from-cyan-500 { --tw-gradient-from: rgb(var(--marca-cyan-500)) var(--tw-gradient-from-position); }
:root .from-cyan-600 { --tw-gradient-from: rgb(var(--marca-cyan-600)) var(--tw-gradient-from-position); }
:root .hover\:from-cyan-500:hover { --tw-gradient-from: rgb(var(--marca-cyan-500)) var(--tw-gradient-from-position); }
:root .hover\:from-cyan-600:hover { --tw-gradient-from: rgb(var(--marca-cyan-600)) var(--tw-gradient-from-position); }
:root .hover\:from-cyan-700:hover { --tw-gradient-from: rgb(var(--marca-cyan-700)) var(--tw-gradient-from-position); }

:root .to-cyan-50  { --tw-gradient-to: rgb(var(--marca-cyan-50))  var(--tw-gradient-to-position); }
:root .to-cyan-100 { --tw-gradient-to: rgb(var(--marca-cyan-100)) var(--tw-gradient-to-position); }
:root .to-cyan-500 { --tw-gradient-to: rgb(var(--marca-cyan-500)) var(--tw-gradient-to-position); }
:root .to-cyan-600 { --tw-gradient-to: rgb(var(--marca-cyan-600)) var(--tw-gradient-to-position); }
:root .to-cyan-700 { --tw-gradient-to: rgb(var(--marca-cyan-700)) var(--tw-gradient-to-position); }
:root .hover\:to-cyan-700:hover { --tw-gradient-to: rgb(var(--marca-cyan-700)) var(--tw-gradient-to-position); }
:root .hover\:to-cyan-800:hover { --tw-gradient-to: rgb(var(--marca-cyan-800)) var(--tw-gradient-to-position); }

/* ---------- residuales ---------- */
:root .shadow-cyan-200 { --tw-shadow-color: rgb(var(--marca-cyan-200)); --tw-shadow: var(--tw-shadow-colored); }

/* Forzar la familia en toda la app. Usamos `!important` porque Tailwind
   (cargado por CDN, sin build) define `font-family` en body/html con
   selectores de sistema que, sin `!important`, ganan en cascada. */
html, body,
p, span, div, a, button, input, select, textarea, label, table, th, td {
    font-family: var(--marca-font) !important;
}

/* Titulares en Poppins. Regla aparte: los h1–h6 ya NO están en la lista base.
   Se incluyen los <span>/<a>/... internos porque el texto del título suele ir
   envuelto en ellos y esos elementos coinciden con la regla base (que llevaría
   el título a Inter).
   NO usar `h1 *`: el universal alcanzaría a los <i> de Font Awesome y, al
   llevar `!important`, ganaría a `.fas` (que no lo lleva). Los iconos dentro
   de titulares se romperían, mostrando caracteres sueltos en vez del glifo. */
h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 a,    h2 a,    h3 a,    h4 a,    h5 a,    h6 a,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 em,   h2 em,   h3 em,   h4 em,   h5 em,   h6 em {
    font-family: var(--marca-font-heading) !important;
}

/* Utilidad: "texto secundario" en italic */
.text-secondary { font-style: italic; }

/* ==========================================
   TAILWIND OVERRIDES
   ========================================== */

/* Sobrescribir tamaño de fuente text-sm de Tailwind (14px -> 15.5px) */
.text-sm {
    font-size: 0.96875rem !important; /* 15.5px */
}

/* Sobrescribir tamaño de fuente text-xs de Tailwind (12px -> 13px) */
.text-xs {
    font-size: 0.8125rem !important; /* 13px */
}

/* ==========================================
   DATATABLES CUSTOMIZATION (TailAdmin Style)
   ========================================== */

/* Contenedor principal de DataTables */
.dataTables_wrapper {
    padding: 1rem;
}

/* Controles superiores (búsqueda y longitud) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: white;
    font-size: 0.875rem;
    color: #374151;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Tabla */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

table.dataTable thead th {
    background-color: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem !important;
    border-bottom: 2px solid #e5e7eb !important;
}

table.dataTable thead th:first-child {
    border-top-left-radius: 0.75rem;
}

table.dataTable thead th:last-child {
    border-top-right-radius: 0.75rem;
}

table.dataTable tbody td {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151;
    font-size: 0.875rem;
}

table.dataTable tbody tr {
    transition: background-color 0.2s ease;
}

table.dataTable tbody tr:hover {
    background-color: #f9fafb !important;
}

table.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.75rem;
}

table.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem;
}

/* Ordenamiento */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    right: 1rem;
    content: "⇅";
    color: #9ca3af;
}

table.dataTable thead .sorting_asc:before {
    content: "↑";
    color: #3b82f6;
}

table.dataTable thead .sorting_desc:before {
    content: "↓";
    color: #3b82f6;
}

/* Paginación */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 0.125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f3f4f6;
    border-color: #3b82f6;
    color: #3b82f6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #3b82f6;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Info */
.dataTables_wrapper .dataTables_info {
    font-size: 0.875rem;
    color: #6b7280;
    padding-top: 1rem;
}

/* Botones de exportación */
.dt-buttons {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.dt-button {
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.dt-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.dt-button:active {
    transform: translateY(0);
}

/* Processing */
.dataTables_processing {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: #3b82f6;
    border: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: #ef4444;
}

/* ==========================================
   SIDEBAR Y NAVEGACIÓN
   ========================================== */

.sidebar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

.sidebar-collapsed {
    width: 4rem; /* 64px = w-16 */
}

.sidebar-link {
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-link:hover {
    background: rgba(37, 99, 235, 0.1);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.05) 100%);
    font-weight: 600;
    color: #3b82f6;
}

/* Tooltip para sidebar colapsado */
.sidebar-link[title]:not([title=""]):hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #1f2937;
    color: white;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out 0.3s forwards;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes tooltipFadeIn {
    to {
        opacity: 1;
    }
}

/* Prevenir overflow y mejorar transiciones */
nav[class*="fixed"] {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Evitar animación al cargar la página (antes de que Alpine.js inicialice) */
body:not(.alpine-ready) .main-content,
body:not(.alpine-ready) nav[class*="fixed"],
body:not(.alpine-ready) .sidebar {
    transition: none !important;
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */

.dropdown-enter {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-hover {
    transition: all 0.2s ease;
}

.btn-hover:hover {
    transform: scale(1.05);
}

/* ==========================================
   SCROLLBAR PERSONALIZADA
   ========================================== */

/* NOTA: el scroll GLOBAL del área de contenido usa la barra NATIVA del
   sistema a propósito (no hay regla `::-webkit-scrollbar` sin selector).
   Solo se personalizan el sidebar y `.tabla-contenedor`, más abajo. */

/* ==========================================
   UTILIDADES DE LAYOUT
   ========================================== */

.sidebar-transition {
    transition: width 0.3s ease;
}

/* ==========================================
   TABLAS RESPONSIVAS
   ========================================== */

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 100%;
}

/* ==========================================
   BADGES Y ESTADOS
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background-color: #fed7aa;
    color: #92400e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

/* ==========================================
   MODALES
   ========================================== */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================
   ALERTAS
   ========================================== */

.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-success {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.alert-error {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.alert-info {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

/* ==========================================
   FORMULARIOS
   ========================================== */

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-error {
    border-color: #ef4444;
}

.form-error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================
   BOTONES
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

/* Botón primario corporativo. El `!important` es preexistente y necesario:
   Tailwind (CDN) se inyecta después de esta hoja y ganaría en cascada. */
.btn-primary {
    background: var(--marca-blue) !important;
    color: white;
}

.btn-primary:hover {
    background: var(--marca-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(26, 43, 195, 0.3);
}

/* Gris neutro deliberado: es el "Cancelar / Volver" y no debe competir con el
   primario. El manual no define botón secundario, así que se mantiene neutro. */
.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

.btn-success {
    background-color: #10b981;
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* ==========================================
   LOADER SPLASH (pantalla de carga inicial)
   ========================================== */

/* Ocultar contenido mientras se muestra el loader */
body.loader-active {
    overflow: hidden;
}

body.loader-active > *:not(.splash-container) {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================
   LOADING SPINNER
   ========================================== */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   UTILIDADES DE TEXTO
   ========================================== */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-gradient {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    /* Main content sin margen en mobile */
    .main-content {
        margin-left: 0 !important;
    }
    
    /* Sidebar se oculta por defecto en mobile */
    .sidebar {
        transform: translateX(-100%);
    }
    
    /* Nota: aquí había una redefinición de .grid-cols-1 idéntica a la utilidad de
       Tailwind, pero encerrada en este @media (max-width: 768px). Como styles.css
       se carga después del CDN y ambas reglas tienen la misma especificidad,
       competía con sm:grid-cols-N (>=640px) en la franja 640-768px, donde hay 28
       rejillas del proyecto que sí quieren varias columnas. Tailwind ya define
       .grid-cols-1 globalmente, así que la regla sobraba. */

    /* Mensaje y botón Volver en columna vertical en móviles */
    #mensaje {
        font-size: 0.8125rem;
    }
}

/* Tablet y móvil: Apilar mensaje y botón verticalmente */
@media (max-width: 1024px) {
    .flex.items-stretch.gap-3:has(#mensaje) {
        flex-direction: column;
        align-items: stretch;
    }
    
    .flex.items-stretch.gap-3:has(#mensaje) a {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
    
    /* Sidebar siempre visible en desktop */
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* ==========================================
   RESPONSIVE - BOTONES DE HEADER CON ACCIONES
   ========================================== */

/* Contenedor de botones de la cabecera de los listados */
.flex.gap-3:has(button[onclick*="abrirModal"]),
.flex.gap-3:has(button[id*="btn-descargar-pdf"]),
.flex.gap-3:has(a[href*="comisiones"]),
.flex.gap-3:has(a[href*="repartos"]) {
    flex-wrap: wrap;
}

/* En tablets pequeñas: reducir padding de botones */
@media (max-width: 900px) {
    .flex.gap-3:has(button) button,
    .flex.gap-3:has(button) a {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.875rem;
    }
    
    /* Reducir iconos en botones */
    .flex.gap-3:has(button) button i,
    .flex.gap-3:has(button) a i {
        font-size: 0.875rem;
    }
}

/* En móviles: botones de header en columna */
@media (max-width: 640px) {
    /* Contenedor principal de header con título y botones */
    .flex.flex-col.sm\:flex-row.justify-between.items-start.sm\:items-center.mb-6.gap-4 {
        gap: 1rem !important;
    }
    
    /* Contenedor de botones de acción */
    .flex.gap-3:has(button),
    .flex.gap-3:has(a[class*="bg-"]) {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem !important;
    }
    
    /* Botones ocupan todo el ancho */
    .flex.gap-3:has(button) button,
    .flex.gap-3:has(button) a,
    .flex.gap-3:has(a[class*="bg-"]) button,
    .flex.gap-3:has(a[class*="bg-"]) a {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* ==========================================
   RESPONSIVE - BOTONES PEGAR CELDAS Y GUARDAR EN BD
   ========================================== */

/* Contenedor de botones dentro del header de tabla */
.flex.items-center.gap-3:has(#btnPegarCeldas),
.flex.items-center.gap-3:has(#btnPegar),
.flex.items-center.gap-3:has(#btnGuardar) {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Siempre mantener texto visible y botones en línea */
#btnPegarCeldas span,
#btnPegar span,
#btnGuardar span {
    display: inline !important;
}

/* En tablets: reducir padding pero mantener en línea */
@media (max-width: 768px) {
    /* Reducir padding de botones Pegar/Guardar */
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Reducir gap entre botones */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        gap: 0.5rem !important;
    }
}

/* En móviles: mantener en línea pero más compactos */
@media (max-width: 640px) {
    /* Header de tabla con título y botones */
    .flex.items-center.justify-between:has(.flex.items-center.gap-3) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Mantener botones en la misma línea */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        flex-wrap: nowrap;
        gap: 0.5rem !important;
    }
    
    /* Botones más compactos pero con texto visible */
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Título de tabla ocupa el ancho disponible */
    .flex.items-center.justify-between:has(.flex.items-center.gap-3) h2 {
        flex: 1 1 auto;
        margin-right: 0.5rem;
    }
}

/* En móviles muy pequeños: reducir padding pero mantener texto */
@media (max-width: 480px) {
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.5rem !important;
        min-width: auto;
    }
    
    /* Reducir gap al mínimo */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        gap: 0.25rem !important;
    }
}

/* ==========================================
   RESPONSIVE - MEJORAS GENERALES PARA BOTONES
   ========================================== */

/* Asegurar que todos los botones tengan transiciones suaves */
button, a[class*="bg-"] {
    transition: all 0.2s ease;
}

/* Prevenir overflow de texto en botones */
button span, a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Touch targets mínimos para móviles (44x44px) */
@media (max-width: 640px) {
    button,
    a[class*="bg-"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
    }
}

/* ==========================================
   TAILADMIN DASHBOARD ANIMATIONS
   ========================================== */

/* Animación FadeInUp para el saludo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

/* Animación de pulso para indicadores */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}

.animate-pulse {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Animación fadeIn simple */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

/* Animación de celebración para éxito */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideInDown {
    animation: slideInDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scrollbar del sidebar — patrón "revelar al pasar por encima".
   INVISIBLE en reposo (sidebar limpio) y aparece en cyan corporativo solo
   cuando el ratón está sobre el sidebar. El ANCHO se mantiene fijo (6px) con
   el thumb transparente, así al revelarse NO hay salto de layout: solo funde
   el color. La rueda/trackpad funcionan siempre, revelado o no.
   Firefox: scrollbar-color transparente en reposo, cyan al hover. */
.sidebar,
.sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}

.sidebar:hover,
.sidebar:hover nav,
.sidebar nav:hover {
    scrollbar-color: rgba(105, 241, 255, 0.35) transparent;
}

.sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar nav::-webkit-scrollbar-track {
    background: transparent;
}

/* Thumb transparente en reposo; cyan al pasar por el sidebar; más intenso
   cuando el cursor está justo sobre el thumb. */
.sidebar::-webkit-scrollbar-thumb,
.sidebar nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar nav:hover::-webkit-scrollbar-thumb {
    background: rgba(105, 241, 255, 0.35);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: rgba(105, 241, 255, 0.6);
}

/* Gradient Utilities */
.gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Shadow Utilities Mejorados */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 30px -5px rgba(0, 0, 0, 0.04);
}

.shadow-strong {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.25), 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

/* Skeleton Loading Animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Tooltip Styles */
.tooltip {
    position: relative;
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.75rem;
    background: rgba(17, 24, 39, 0.95);
    color: white;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Tooltip mejorado para tablas - aparece a la derecha */
.tooltip-table {
    position: relative;
    display: inline-flex;
}

/* Contenido del tooltip */
.tooltip-table::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: #1f2937;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}

/* Flecha del tooltip */
.tooltip-table::after {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}

.tooltip-table:hover::before,
.tooltip-table:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Variante: tooltip hacia la IZQUIERDA (para columnas pegadas al borde derecho) */
.tooltip-table--left::before {
    left: auto;
    right: calc(100% + 10px);
}
.tooltip-table--left::after {
    left: auto;
    right: calc(100% + 4px);
    border-right-color: transparent;
    border-left-color: #1f2937;
}

/* Variante: texto largo con salto de línea (en vez de una sola línea muy ancha) */
.tooltip-table--wrap::before {
    white-space: normal;
    width: 260px;
    line-height: 1.35;
    text-align: left;
}

/* Tooltip por JS anclado a <body> (position:fixed) — para elementos dentro de
   contenedores con overflow/sticky, donde un tooltip CSS ::before se recortaría.
   Se usa con el atributo [data-tt] más un pequeño helper JS en el módulo. */
.gf-tt {
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}
.gf-tt.gf-tt--show { opacity: 1; transform: translateY(0); }

/* Mensaje largo dentro de una celda: limitado a 2 líneas para que no ensanche
   la tabla ni provoque scroll horizontal. El texto completo queda en el title. */
.gf-wb-msg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Card Hover mejorado para Dashboard */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
}

/* Improved Button Hovers for DataTables */
.dataTables_wrapper .dt-buttons .dt-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.dataTables_wrapper .dt-buttons .dt-button:active {
    transform: translateY(0);
}

/* ==========================================
   NUEVA VENTA UNIFICADA - ESTILOS
   ========================================== */

/* Animación de entrada para secciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

/* Inputs con iconos mejorados */
input:focus, select:focus, textarea:focus {
    transition: all 0.2s ease-in-out;
}

/* Badges de pasos */
.step-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Validación visual */
input.border-red-500 {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* Gradientes de encabezados de sección */
.section-header-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Tooltips personalizados */
.custom-tooltip {
    position: relative;
}

.custom-tooltip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    z-index: 50;
    margin-bottom: 0.5rem;
}

/* Efecto de carga en botón submit */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* Mejoras de accesibilidad */
input:required, select:required {
    border-left: 3px solid var(--marca-blue);
}

input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* Autorrelleno del navegador.
   Sin esta regla, Chrome y Firefox pintan el campo de AMARILLO con su estilo
   por defecto, que choca con toda la paleta. No se puede sobrescribir con
   `background-color` (el navegador lo ignora): el truco estándar es un
   `box-shadow` interior enorme, que sí respeta.
   Se usa un tinte azul corporativo muy suave en vez de blanco para NO perder
   la señal de "esto lo ha rellenado el navegador".
   La transición de 5000s evita el destello amarillo del primer instante. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0 1000px #EBF6FC inset;
            box-shadow: 0 0 0 1000px #EBF6FC inset;
    caret-color: #111827;
    transition: background-color 5000s ease-in-out 0s;
}

/* Firefox usa su propio mecanismo, no `-webkit-autofill`. */
input:autofill,
textarea:autofill,
select:autofill {
    box-shadow: 0 0 0 1000px #EBF6FC inset;
    -webkit-text-fill-color: #111827;
}

/* Hover effects para secciones */
.section-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.section-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Estilos para inputs numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

/* Mensajes de estado (siempre visible) */
#mensaje {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    width: 100%;
}

#mensaje.success { 
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #22c55e;
    color: #166534;
}

#mensaje.warning { 
    background-color: #fefce8;
    border: 1px solid #fef08a;
    border-left: 4px solid #eab308;
    color: #854d0e;
}

#mensaje.error { 
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

#mensaje.info { 
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

#mensaje.loading { 
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    color: #1e3a8a;
}

#mensaje i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

#mensaje.success i {
    color: #22c55e;
}

#mensaje.warning i {
    color: #eab308;
}

#mensaje.error i {
    color: #ef4444;
}

#mensaje.info i,
#mensaje.loading i {
    color: #3b82f6;
}

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

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Ring effect para botones con atajo */
.ring-4 {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease;
}

.ring-blue-300 {
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.5) !important;
}

/* Hover effects para cards de pasos */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Overlay de loading */
#loadingOverlay {
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

/* Kbd styling */
kbd {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* ==========================================
   ALPINE.JS & BANNERS DE MODO
   ========================================== */

/* Ocultar elementos con x-cloak hasta que Alpine.js inicialice */
[x-cloak] { 
    display: none !important; 
}

/* Pila de banners de estado (entorno de pruebas / mantenimiento / impersonación).
   La pinta includes/header.php; cada banner mide exactamente 2rem (h-8) y el body
   recibe la clase banners-1 / banners-2 / banners-3 según cuántos estén activos.
   El padding-top del contenido = 4rem de navbar + 2rem por banner. */
body.banners-1 nav.fixed.top-0   { top: 2rem !important; }
body.banners-1 .sidebar.fixed    { top: 2rem !important; height: calc(100vh - 2rem) !important; }
body.banners-1 .main-content     { padding-top: 6rem !important; }

body.banners-2 nav.fixed.top-0   { top: 4rem !important; }
body.banners-2 .sidebar.fixed    { top: 4rem !important; height: calc(100vh - 4rem) !important; }
body.banners-2 .main-content     { padding-top: 8rem !important; }

body.banners-3 nav.fixed.top-0   { top: 6rem !important; }
body.banners-3 .sidebar.fixed    { top: 6rem !important; height: calc(100vh - 6rem) !important; }
body.banners-3 .main-content     { padding-top: 10rem !important; }

/* ==========================================
   CAMPANA DE NOTIFICACIONES (Top Navbar)
   Componente: includes/campana_notificaciones.php

   Va aquí, en CSS plano, y NO como utilidades de Tailwind. Motivo: el proyecto
   usa el Play CDN (cdn.tailwindcss.com), que no sirve una hoja estática sino un
   compilador que genera el CSS en el navegador escaneando el DOM. Las clases
   arbitrarias (las de corchetes: shadow-[...], text-[12.5px], max-h-[calc(...)])
   obligan a generar reglas a medida en tiempo de ejecución; el componente llegó
   a tener 44 distintas y, al vivir en el navbar de las ~300 páginas, retrasaba
   el pintado del sidebar en cada navegación.

   Las medidas salen de la maqueta docs/notificaciones_ui.html.
   ========================================== */

/* El navbar SOLO se eleva mientras la campana está abierta.
   El navbar es `fixed` con z-30 y eso CREA UN CONTEXTO DE APILADO: el panel de
   la campana, al colgar de él, no puede superar ese 30 por alto que sea su
   propio z-index. En páginas con mapa (Leaflet apila hasta 800; flota_mapa.php
   añade overlays hasta 1100) el desplegable quedaba oculto tras el mapa.
   Elevar el navbar de forma permanente NO vale: hay 123 modales con z-50 en el
   proyecto y el navbar les taparía el fondo oscuro. Por eso la elevación es
   temporal — la clase la pone y la quita el propio componente al abrir/cerrar. */
body.marca-campana-abierta nav.fixed.top-0 { z-index: 1200; }

/* Botón */
.marca-camp-on            { background: #eef2ff; color: #1A2BC3; }
.marca-camp-on:hover      { background: #dbe4ff; }
.marca-camp-off           { color: #9ca3af; }
.marca-camp-off:hover     { color: #4b5563; background: #f3f4f6; }
.marca-camp-badge         { min-width: 17px; height: 17px; font-size: 10px; }

/* Panel. --navbar-alto lo calcula el propio partial según los banners activos.
   z-index alto a propósito: la campana vive en el navbar y debe quedar por
   encima de CUALQUIER contenido de página. El caso que lo obliga son los mapas
   Leaflet. El trabajo pesado lo hace la regla `nav.fixed.top-0 { z-index: 1200 }`
   de arriba, que saca a todo el navbar por encima del mapa; estos valores solo
   ordenan panel y velo DENTRO de ese contexto. En móvil el panel es `fixed`,
   así que necesita superar también al sidebar (z-40) y a su overlay. */
.marca-camp-panel {
    top: var(--navbar-alto, 4rem);
    width: calc(100vw - 1.5rem);
    border-radius: 10px;
    z-index: 60;
    box-shadow: 0 10px 25px -5px rgba(15, 16, 83, .22),
                0 8px 10px -6px rgba(15, 16, 83, .1);
}
.marca-camp-velo  { top: var(--navbar-alto, 4rem); z-index: 59; }
.marca-camp-lista { max-height: calc(100dvh - var(--navbar-alto, 4rem) - 5rem); }

@media (min-width: 768px) {
    .marca-camp-panel { top: 100%; width: 378px; }
    .marca-camp-lista { max-height: 60vh; }
}

/* Cabecera y pie */
.marca-camp-cab        { padding: 12px 14px; }
.marca-camp-tit        { font-size: 14px; font-family: 'Poppins', system-ui, sans-serif; }
.marca-camp-accion     { font-size: 11px; }
.marca-camp-pie        { padding: 10px 14px; background: #fafafa; }
.marca-camp-pie span   { font-size: 10.5px; }

/* Separador de categoría */
.marca-camp-grupo      { padding: 7px 0; font-size: 9.5px; letter-spacing: .07em; background: #fafafa; }

/* Filas */
.marca-camp-fila       { gap: 11px; padding: 13px 14px; }
.marca-camp-fila-tit   { font-size: 12.5px; line-height: 1.35; }
.marca-camp-msj        { font-size: 11.5px; line-height: 1.45; }
.marca-camp-hora       { font-size: 10.5px; }
.marca-camp-chip       { font-size: 10px; padding: 1px 7px; letter-spacing: .02em; }

/* Estado vacío */
.marca-camp-vacio      { padding: 34px 22px; }
.marca-camp-vacio-tit  { font-size: 12.5px; }
.marca-camp-vacio-msj  { font-size: 11.5px; line-height: 1.5; }

/* Severidades: borde izquierdo + fondo (equivale a .noti de la maqueta).
   Mismo criterio de color que getSeveridadColor() de sistema_alertas.php. */
.marca-sev-info        { border-left-color: #1A2BC3; background: #f8faff; }
.marca-sev-aviso       { border-left-color: #f59e0b; background: #fffdf7; }
.marca-sev-exito       { border-left-color: #22c55e; background: #fbfefb; }
.marca-sev-critica     { border-left-color: #ef4444; background: #fffbfb; }
.marca-sev-leida       { border-left-color: #e5e7eb; background: #fff; }
.marca-sev-resuelta    { border-left-color: #d1d5db; background: #fff; opacity: .72; }


/* ==========================================
   LOGIN PAGE STYLES
   ========================================== */

/* Fondo con gradiente suave que integra con el azul del logo */
/* Fondo del login. Mismo degradado que el splash (includes/loader_splash.php)
   para que la transición entre pantalla de carga y login no salte.

   NO DEGRADAR mist -> paper (se ve VERDE). Motivo:
     mist  #D7EDF9 = rgb(215, 237, 249)  -> azul
     paper #FEFDF9 = rgb(254, 253, 249)  -> blanco AMARILLENTO
   Ambos tienen el MISMO canal azul (249), así que al interpolar el azul se
   queda plano mientras rojo y verde suben: el punto medio, rgb(234,245,249),
   tiene el verde por encima del rojo y el azul apenas por encima del verde,
   y se percibe menta. Además azul y amarillo son casi complementarios: la
   mezcla pasa por un verde apagado.
   Solución: degradar del azul al blanco neutro, sin meter el amarillo de paper. */
.gradient-bg {
    background: linear-gradient(135deg, var(--marca-mist) 0%, #ffffff 100%);
    position: relative;
}

/* Efecto para el formulario de login - más definido para contrastar con el fondo */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    /* Borde corporativo (#1A2BC3 al 10%). Antes era rgba(6,182,212,.1),
       el turquesa de Tailwind: un resto de la paleta anterior. */
    border: 1px solid rgba(26, 43, 195, 0.1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 
                0 8px 10px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

/* Animaciones de entrada para el login */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Contenedor del login con animación */
.login-container {
    animation: fadeIn 0.4s ease-out;
}

/* Logo con animación */
.logo-animate {
    animation: fadeInDown 0.5s ease-out;
}

/* Formulario con animación */
.form-animate {
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

/* Footer con animación */
.footer-animate {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

/* Efecto visual mejorado para inputs en focus */
.input-focused {
    transform: scale(1.01);
    transition: transform 0.2s ease;
}

/* Mejorar estilo del botón de toggle password */
#togglePassword {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#togglePassword:active {
    transform: scale(0.95);
}

/* Personalizar checkbox. El #0891b2 anterior era el turquesa de Tailwind,
   no el cyan corporativo (#69F1FF), que además sería ilegible aquí. */
input[type="checkbox"]:checked {
    background-color: var(--marca-blue);
    border-color: var(--marca-blue);
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Mejorar mensajes de alerta */
.glass-effect [role="alert"] {
    animation: fadeInUp 0.4s ease-out;
}

/* Responsividad mejorada */
@media (max-width: 640px) {
    .glass-effect {
        padding: 1.5rem !important;
    }
    
    .logo-animate img {
        width: 12rem !important;
    }
}

/* ==========================================
   TABLA DATOS MENSUALES
   ========================================== */

/* Contenedor principal de la tabla */
.tabla-contenedor {
    overflow: auto;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-radius:8px;
}

.tabla-contenedor table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.tabla-contenedor thead th {
    position: sticky;
    top: 0;
    /* Cabecera corporativa. El degradado anterior (#3b82f6 -> #2563eb) tenía
       un problema de accesibilidad: el texto es blanco de 11px (texto normal
       a efectos de WCAG, exige 4,5:1) y el extremo claro #3b82f6 solo daba
       3,68:1 — la mitad izquierda de la cabecera incumplía AA.
       Con el azul corporativo: 9,65:1 y 13,4:1. Ambos AAA. */
    background: linear-gradient(135deg, var(--marca-blue), var(--marca-primary-dark));
    color: white;
    padding: 12px 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-align: center;
    border-bottom: 3px solid var(--marca-primary-dark);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tabla-contenedor tbody td {
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    max-width: 0;
    overflow: hidden;
}

.tabla-contenedor tbody tr:nth-child(even) td {
    background: #f9fafb;
}

.tabla-contenedor tbody tr:nth-child(odd) td {
    background: white;
}

.tabla-contenedor tbody tr:hover td {
    background: linear-gradient(90deg, var(--marca-mist), var(--marca-sky));
}

.tabla-contenedor td input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 2px solid #d1d5db !important;
    font-size: 12.5px;
    font-weight: 500;
    background: white;
    color: #111827;
    transition: all 0.2s ease;
    font-family: var(--marca-font);
    height: 38px;
    box-sizing: border-box;
}

.tabla-contenedor td input[type="date"] {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    font-size: 11px !important;
    padding: 2px 4px !important;
}

.tabla-contenedor td input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.tabla-contenedor td input:hover {
    border-color: #9ca3af !important;
}

.tabla-contenedor td input:focus {
    outline: none;
    border-color: var(--marca-blue) !important;
    box-shadow: 0 0 0 3px rgba(26, 43, 195, 0.15);
    transform: translateY(-1px);
}

.tabla-contenedor input.moneda {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tabla-contenedor input.centrado {
    text-align: center;
    font-weight: 600;
}

.tabla-contenedor input.calculado {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    color: #059669;
    font-weight: 700;
    pointer-events: none;
    border-color: #10b981 !important;
}

/* Estilos para CHECKBOX PR - Estilo moderno tipo toggle/switch */
.tabla-contenedor input[type="checkbox"].checkbox-pr {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 42px;
    height: 22px;
    background: #d1d5db;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #9ca3af !important;
    padding: 0 !important;
    outline: none;
    margin: 0 auto;
    display: block;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:hover {
    background: #fca5a5;
    border-color: #f87171 !important;
    transform: scale(1.05);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:checked {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626 !important;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:checked:before {
    transform: translateX(20px);
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    border-color: #ef4444 !important;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:active:before {
    width: 18px;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estilos para SELECT dentro de tabla-contenedor (mismo diseño que inputs) */
.tabla-contenedor td select {
    width: 100%;
    padding: 8px 10px;
    padding-right: 28px;
    border-radius: 6px;
    border: 2px solid #d1d5db !important;
    font-size: 12.5px;
    font-weight: 500;
    background: white;
    color: #111827;
    transition: all 0.2s ease;
    font-family: var(--marca-font);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    height: 38px;
    box-sizing: border-box;
}

.tabla-contenedor td select:hover {
    border-color: #9ca3af !important;
}

.tabla-contenedor td select:focus {
    outline: none;
    border-color: var(--marca-blue) !important;
    box-shadow: 0 0 0 3px rgba(26, 43, 195, 0.15);
}

.tabla-contenedor td select.centrado {
    text-align: center;
    text-align-last: center;
}

.tabla-contenedor td select option {
    padding: 8px 12px;
    font-size: 12px;
}

.tabla-contenedor td select optgroup {
    font-weight: 700;
    color: var(--marca-blue);
    background: #f3f4f6;
}

/* Scrollbar de las tablas. El thumb era un degradado #1e40af->#1e3a8a
   (blue-800/900 de Tailwind, resto de la paleta vieja); ahora azul
   corporativo. Afinada a 6px, con soporte de Firefox. */
.tabla-contenedor {
    scrollbar-width: thin;
    scrollbar-color: var(--marca-blue) #f3f4f6;
}

.tabla-contenedor::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.tabla-contenedor::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

.tabla-contenedor::-webkit-scrollbar-thumb {
    background: var(--marca-blue);
    border-radius: 10px;
}

.tabla-contenedor::-webkit-scrollbar-thumb:hover {
    background: var(--marca-primary-dark);
}

/* ==========================================
   RESPONSIVE - AJUSTES ESPECÍFICOS ADICIONALES
   ========================================== */

/* Ajuste para contenedor de título y botones de header */
@media (max-width: 640px) {
    /* Reducir espacio vertical entre título y botones */
    .flex.flex-col.sm\:flex-row.justify-between {
        gap: 0.75rem !important;
    }
    
    /* Asegurar que los títulos no se desborden */
    .flex.flex-col.sm\:flex-row.justify-between h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    .flex.flex-col.sm\:flex-row.justify-between p {
        font-size: 0.875rem;
    }
}

/* Ajustes para el header de tabla con botones Pegar/Guardar */
@media (max-width: 640px) {
    /* Header de tabla (bg-gradient-to-r from-green-50, etc.) */
    .bg-gradient-to-r.from-green-50,
    .bg-gradient-to-r.from-blue-50,
    .bg-gradient-to-r.from-blue-50 {
        padding: 0.75rem !important;
    }
}

/* Ajuste para grids de estadísticas */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2:not(.lg\:grid-cols-3) {
        gap: 0.75rem !important;
    }
    
    /* Reducir padding de las tarjetas de estadísticas */
    .grid.grid-cols-1.md\:grid-cols-2:not(.lg\:grid-cols-3) > div {
        padding: 0.75rem !important;
    }
}

/* Mejorar el rendimiento de transiciones en móviles */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    button, a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Ajuste para tablas dentro de tabla-contenedor */
@media (max-width: 640px) {
    .tabla-contenedor {
        font-size: 12px;
    }
    
    .tabla-contenedor thead th {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }
    
    .tabla-contenedor tbody td {
        padding: 4px 2px !important;
    }
    
    .tabla-contenedor td input,
    .tabla-contenedor td select {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* Ocultar elementos innecesarios en móviles muy pequeños */
@media (max-width: 480px) {
    /* Ocultar descripción debajo del título en móviles pequeños */
    .flex.flex-col.sm\:flex-row.justify-between > div > p {
        display: none;
    }
}

/* Asegurar que los botones disabled mantengan el estilo correcto */
button:disabled,
button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Mejorar la visibilidad de focus para accesibilidad en todos los dispositivos */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==========================================
   RESPONSIVE - GRÁFICO DE VENTAS DASHBOARD
   ========================================== */

/* Contenedor del gráfico de ventas */
#ventasChart {
    max-width: 100%;
    height: auto !important;
}

/* Ajustar altura del contenedor del gráfico según dispositivo */
.flex-1.flex.items-center.justify-center:has(#ventasChart) {
    min-height: 500px;
}

@media (max-width: 1024px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 400px !important;
    }
}

@media (max-width: 768px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 350px !important;
    }
    
    /* Ajustar padding del contenedor del gráfico */
    .lg\:col-span-2:has(#ventasChart) {
        padding: 1rem !important;
    }
}

@media (max-width: 640px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 300px !important;
    }
    
    /* Reducir más el padding en móviles */
    .lg\:col-span-2:has(#ventasChart) {
        padding: 0.75rem !important;
    }
    
    /* Ajustar tamaño del título del gráfico */
    .lg\:col-span-2:has(#ventasChart) h3 {
        font-size: 1.125rem;
    }
    
    .lg\:col-span-2:has(#ventasChart) .text-sm {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 250px !important;
    }
    
    /* En móviles pequeños, ocultar el ícono externo */
    .lg\:col-span-2:has(#ventasChart) .fa-external-link-alt {
        display: none;
    }
}

/* ==========================================
   RESPONSIVE - REJILLAS DE TARJETAS
   ========================================== */

/* Ajustar padding de los botones de enlace rápido */
.grid.grid-cols-2.gap-2 a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
}

/* Reducir tamaño de fuente en los botones con textos largos */
.grid.grid-cols-2.gap-2 a span {
    font-size: 0.75rem;
    line-height: 1.15;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reducir espacio entre filas de botones */
.space-y-2:has(.grid.grid-cols-2.gap-2) {
    gap: 0.5rem !important;
}

/* En tablets pequeñas: ajustar espacio */
@media (max-width: 1024px) {
    /* Rejilla de tarjetas: 2 columnas en tablets */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.75rem;
        min-height: 65px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.6875rem;
        line-height: 1.1;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.875rem;
        margin-bottom: 0.25rem !important;
    }
    
    /* Reducir gap entre botones */
    .grid.grid-cols-2.gap-2 {
        gap: 0.375rem !important;
    }
}

/* En móviles: 1 columna y ajustar botones */
@media (max-width: 640px) {
    /* Rejilla de tarjetas: 1 columna en móviles */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    /* Botones más compactos */
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.75rem;
        min-height: 70px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.9375rem;
        margin-bottom: 0.375rem !important;
    }
    
    /* Header de tarjeta más compacto */
    .bg-gradient-to-r.from-blue-500 h3 {
        font-size: 1.125rem;
    }
    
    /* Reducir padding del header */
    .bg-gradient-to-r.from-blue-500.p-4 {
        padding: 0.75rem !important;
    }
    
    /* Reducir gap entre botones */
    .grid.grid-cols-2.gap-2 {
        gap: 0.375rem !important;
    }
}

/* En móviles muy pequeños: optimizar espacio al máximo */
@media (max-width: 480px) {
    /* Botones muy compactos pero legibles */
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.25rem !important;
        min-height: 68px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.6875rem;
        line-height: 1.15;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.875rem;
        margin-bottom: 0.25rem !important;
    }
    
    /* Reducir gap entre botones al mínimo */
    .grid.grid-cols-2.gap-2 {
        gap: 0.25rem !important;
    }
    
    /* Reducir padding del header */
    .bg-gradient-to-r.from-blue-500.p-4 {
        padding: 0.625rem !important;
    }
    
    /* Header más compacto */
    .bg-gradient-to-r.from-blue-500 h3 {
        font-size: 1rem;
    }
}

/* ==========================================
   TABULAR NUMBERS - ALINEACIÓN DE NÚMEROS
   ========================================== */

/* Aplicar fuente tabular a todas las celdas con números para mejor alineación */
.text-right,
.text-center,
td.text-right,
th.text-right,
td.text-center,
th.text-center,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* Asegurar que los números en tablas siempre usen fuente tabular */
table tbody td,
table tfoot td,
table thead th {
    font-variant-numeric: tabular-nums;
}

/* ======================================================================
   Movimiento reducido
   ----------------------------------------------------------------------
   Quien tiene activada la preferencia del sistema (por vértigo o
   sensibilidad al movimiento) no debe ver animaciones ni desplazamientos.
   Cubre las animaciones de entrada, el splash de acceso, las
   transformaciones al pasar el ratón y el desplazamiento suave.
   Los cambios de color y de sombra se mantienen: no producen movimiento
   y son los que indican que algo es interactivo.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Las tarjetas no se levantan ni crecen al pasar por encima */
    .card-hover:hover,
    .group:hover .group-hover\:scale-110,
    a.group:hover > div,
    .hover\:scale-102:hover {
        transform: none !important;
    }

    /* El icono del engranaje deja de girar */
    .group:hover .group-hover\:rotate-90 {
        transform: none !important;
    }
}