/* =============================================================================
   CAC TRANSPORTE — TEMA "LIQUID GLASS" PARA FILAMENT v3.2
   -----------------------------------------------------------------------------
   Creditos: CAC Transporte — Tema Glass.
   Hoja de estilos ESTATICA (servida con <link> desde public/css/cac-glass.css).
   Compartida por DOS paneles: /admin (acento ROJO) y /empresa (acento AZUL).
   Estetica macOS Sonoma/Tahoe: superficies de vidrio esmerilado, aurora
   ambiental animada muy lenta, bordes luminosos, sombras multicapa, esquinas
   muy redondeadas y micro-interacciones tipo resorte — siempre legible.

   REVISION DE CALIDAD APLICADA (accesibilidad AA, rendimiento GPU y acento
   por panel). Cambios clave frente a la version previa:
     · El acento por panel ya NO se pisa: se elimino la declaracion incondicional
       de --primary-500 en :root; el literal rojo CAC vive solo como fallback
       INLINE en cada consumidor (Filament gana con su tripleta por panel).
     · Frost (backdrop-filter) reservado a superficies GRANDES y POCAS. Se quito
       de elementos de alta cardinalidad: botones, badges, cabecera de tabla e
       inputs (conservan su relleno legible como fallback).
     · Contrastes AA: helper/hint/descripciones/placeholders suben a un escalon
       legible (--cac-text-hint); iconos de nav e iconos-grafico a --cac-text-muted;
       errores y badges usan el tono -700 en claro; rellenos de vidrio mas opacos.
     · Foco de CTA (primary/danger) con anillo de DOS capas (separacion neutra),
       nunca del mismo color que el relleno del boton.
     · Soporte de forced-colors (Windows High Contrast) para no perder el foco.
     · Sin overflow:hidden en el scrollport de tablas (scroll + sticky intactos).

   CONTRATO TECNICO:
     · CSS PLANO puro: sin at-rules de build (tailwind/apply), sin nesting/SCSS.
     · Selectores PLANOS, SIEMPRE anclados en clases fi-* (nunca div, * ni button).
     · Acento por panel via rgb()/rgba(var(--primary-*, R,G,B)); fallback rojo CAC.
     · backdrop-filter SIEMPRE bajo @supports + con -webkit-backdrop-filter.
     · Modo CLARO (sin .dark) y OSCURO (html.dark) cubiertos.
     · Foco reestilizado con el acento (nunca eliminado) + forced-colors.
     · prefers-reduced-motion neutralizado en el bloque FINAL.
     · Solo se animan propiedades seguras (bg, border, box-shadow, transform,
       opacity, color, backdrop-filter). Jamas "transition: all" sobre layout.

   INTOCABLES (no se estilan aqui): #cac-splash y .sos-alert-active-row.

   INDICE:
     1) Tokens independientes del tema (:root)
     2) Tokens tema CLARO
     3) Tokens tema OSCURO
     4) Lienzo + fondo ambiental (aurora) + keyframes
     5) Primitivas de vidrio (.cac-*)
     6) Sidebar y navegacion
     7) Topbar (breadcrumbs, busqueda, user-menu, theme-switcher)
     8) Paginas, secciones y widgets (tarjetas / stats)
     9) Tablas (.fi-ta*) y paginacion
    10) Formularios (inputs, select, toggle, check/radio, fieldset, wizard, upload)
    11) Botones, enlaces, badges y tabs
    12) Overlays (modal, slide-over, dropdown, toasts, tooltip) + Auth + tenant
    13) Accesibilidad · forced-colors + prefers-reduced-motion (FINAL)
   ========================================================================== */


/* =============================================================================
   1) TOKENS INDEPENDIENTES DEL TEMA  (:root)
      Geometria, blur, movimiento, foco y acento derivado. Iguales en claro/oscuro
      (el acento se re-tiñe solo por panel; el foco es alfa-based sobre --primary-*).

      NOTA: NO se declara --primary-* aqui. Filament inyecta la tripleta por panel
      (rojo /admin, azul /empresa) ANTES de esta hoja; declararla en :root la
      pisaria. El literal rojo CAC (220,38,38) va como fallback INLINE en cada
      consumidor -> solo actua si el panel no definiera la variable.
   ========================================================================== */
:root {
  /* ---- BLUR del frost (vibrancy). Coste real: usar con criterio. --------- */
  --cac-blur-sm: 8px;    /* chips, badges, inputs, tooltips, dropdown items   */
  --cac-blur-md: 18px;   /* DEFECTO: .fi-section, .fi-wi, .fi-card, dropdowns */
  --cac-blur-lg: 24px;   /* .fi-sidebar, .fi-topbar, .fi-modal-window         */
  --cac-blur-xl: 34px;   /* telones / slide-over / overlays a pantalla amplia */
  --cac-saturate: 180%;  /* acompaña SIEMPRE al blur -> "color bleed" Apple   */

  /* Filtros precompuestos (preferir estos antes que reescribir blur/saturate) */
  --cac-glass-filter-sm: blur(var(--cac-blur-sm)) saturate(var(--cac-saturate));
  --cac-glass-filter-md: blur(var(--cac-blur-md)) saturate(var(--cac-saturate));
  --cac-glass-filter-lg: blur(var(--cac-blur-lg)) saturate(var(--cac-saturate));
  --cac-glass-filter-xl: blur(var(--cac-blur-xl)) saturate(var(--cac-saturate));

  /* ---- RADIOS de esquina (generosos, estilo Sonoma/Tahoe) --------------- */
  --cac-radius-xs: 8px;    /* badges, inputs pequeños                         */
  --cac-radius-sm: 10px;   /* .fi-btn chico, .fi-icon-btn, celdas de accion   */
  --cac-radius-md: 14px;   /* .fi-input, .fi-select-input, .fi-btn, dropdowns */
  --cac-radius-lg: 18px;   /* .fi-section, .fi-card, .fi-wi, tarjetas de stat */
  --cac-radius-xl: 22px;   /* .fi-modal-window, .fi-slide-over, contenedores  */
  --cac-radius-2xl: 28px;  /* heros / login / superficies raiz muy grandes    */
  --cac-radius-pill: 999px;/* toggles, tabs pill, avatares, badges redondos   */

  /* ---- ESPACIADO base sugerido (ritmo interno de componentes) ----------- */
  --cac-space-1: 4px;
  --cac-space-2: 8px;
  --cac-space-3: 12px;
  --cac-space-4: 16px;
  --cac-space-5: 24px;
  --cac-space-6: 32px;

  /* ---- MOVIMIENTO: curvas + duraciones ---------------------------------- */
  --cac-ease-spring:   cubic-bezier(.34, 1.56, .64, 1);  /* rebote hover/scale */
  --cac-ease-out:      cubic-bezier(.22, 1, .36, 1);     /* entradas/overlays  */
  --cac-ease-standard: cubic-bezier(.4, 0, .2, 1);       /* color/foco neutro  */
  --cac-dur-fast: 140ms; /* hover de color, foco                              */
  --cac-dur-base: 240ms; /* transform, elevacion, sombras (DEFECTO)           */
  --cac-dur-slow: 420ms; /* aparicion de overlays, expandir/colapsar sidebar  */
  --cac-aurora-dur: 44s; /* deriva del fondo aurora (MUY lenta)               */

  /* Transforms canonicos de interaccion (aplicar en :hover / :active). */
  --cac-lift:    translateY(-2px) scale(1.012); /* elevacion tarjeta/boton     */
  --cac-lift-sm: translateY(-1px) scale(1.006); /* elevacion sutil (filas)     */
  --cac-press:   scale(.985);                   /* feedback al presionar       */

  /* Shorthand SEGURO listo para 'transition:' (solo props no-layout). */
  --cac-transition:
    background-color var(--cac-dur-base) var(--cac-ease-out),
    border-color     var(--cac-dur-base) var(--cac-ease-out),
    box-shadow       var(--cac-dur-base) var(--cac-ease-out),
    transform        var(--cac-dur-base) var(--cac-ease-spring),
    opacity          var(--cac-dur-base) var(--cac-ease-out),
    color            var(--cac-dur-fast) var(--cac-ease-standard),
    -webkit-backdrop-filter var(--cac-dur-base) var(--cac-ease-out),
    backdrop-filter  var(--cac-dur-base) var(--cac-ease-out);
  /* Lista de propiedades SEGURAS (para quien prefiera transition-property). */
  --cac-tx: background-color, border-color, box-shadow, transform, opacity,
            color, -webkit-backdrop-filter, backdrop-filter;

  /* ---- FOCO (reestilizado con el acento; alfa-based -> vale claro/oscuro) -
         Fallback rojo CAC INLINE: Filament pisa con su tripleta por panel.     */
  --cac-ring:        0 0 0 3px rgba(var(--primary-500, 220, 38, 38), .40); /* :focus-visible */
  --cac-ring-strong: 0 0 0 3px rgba(var(--primary-500, 220, 38, 38), .55); /* inputs/CTA     */
  --cac-ring-soft:   0 0 0 2px rgba(var(--primary-500, 220, 38, 38), .28); /* hover/within   */

  /* ---- ACENTO derivado del panel (se re-tiñe solo: rojo /admin, azul /emp)
         Todo con fallback rojo CAC inline por si faltara la tripleta.          */
  --cac-accent:        rgb(var(--primary-500, 220, 38, 38));                          /* solido */
  --cac-accent-strong: rgb(var(--primary-600, var(--primary-500, 220, 38, 38)));      /* hover  */
  --cac-accent-bright: rgb(var(--primary-400, var(--primary-500, 220, 38, 38)));      /* realce */
  --cac-accent-soft:   rgba(var(--primary-500, 220, 38, 38), .12);  /* relleno activo/chip     */
  --cac-accent-softer: rgba(var(--primary-500, 220, 38, 38), .06);  /* hover apenas visible    */
  --cac-accent-line:   rgba(var(--primary-500, 220, 38, 38), .40);  /* bordes/indicadores      */
  --cac-accent-glow:   rgba(var(--primary-500, 220, 38, 38), .30);  /* halo (base del glow)    */
  --cac-shadow-glow:   0 8px 30px -6px var(--cac-accent-glow); /* halo de acento */
}


/* =============================================================================
   2) TOKENS DEL TEMA CLARO (por defecto, sin .dark)  ->  limpio, gris muy claro.
      Se declaran en :root (default) y se re-declaran en html:not(.dark) por
      claridad semantica; ambos deben coincidir.
   ========================================================================== */
:root,
html:not(.dark) {
  color-scheme: light;

  /* Lienzo base bajo la aurora */
  --cac-canvas:      #eef0f4;
  --cac-canvas-deep: #e2e5ec;
  --cac-elevated:    #ffffff;  /* superficie SOLIDA para menus muy densos     */

  /* Rellenos de vidrio. Mas opacos que antes: acotan el fondo efectivo (la
     aurora colada bajo el cristal) para garantizar contraste AA del texto. */
  --cac-glass-fill:         rgba(255, 255, 255, .70); /* superficie DEFECTO    */
  --cac-glass-fill-strong:  rgba(255, 255, 255, .85); /* sidebar/topbar/modal  */
  --cac-glass-fill-soft:    rgba(255, 255, 255, .40); /* veladura/overlay fila */
  --cac-glass-fill-hover:   rgba(255, 255, 255, .90); /* hover de superficie   */
  --cac-glass-solid:        rgba(250, 251, 253, .94); /* respaldo opaco        */
  --cac-glass-solid-strong: rgba(255, 255, 255, .98); /* respaldo opaco fuerte */

  /* Bordes luminosos + reflejo especular (luz arriba, sombra abajo) */
  --cac-border:        rgba(15, 18, 25, .10); /* hairline 1px por defecto      */
  --cac-border-strong: rgba(15, 18, 25, .16); /* hover/activo/seleccionado     */
  --cac-border-soft:   rgba(15, 18, 25, .06); /* divisores internos (filas)    */
  --cac-highlight:     rgba(255, 255, 255, .90); /* brillo especular puntual   */
  --cac-inset-sheen:   inset 0 1px 0 0 rgba(255, 255, 255, .75); /* grosor luz  */
  --cac-specular: linear-gradient(180deg,
                    rgba(255, 255, 255, .85) 0%,
                    rgba(255, 255, 255, 0) 42%); /* sheen del borde superior    */

  /* Sombras multicapa (contacto + difusa). Combinar con --cac-inset-sheen. */
  --cac-shadow-sm: 0 1px 2px rgba(15, 18, 25, .06),
                   0 2px 8px rgba(15, 18, 25, .05);
  --cac-shadow-md: 0 4px 12px rgba(15, 18, 25, .08),
                   0 12px 32px rgba(15, 18, 25, .08);
  --cac-shadow-lg: 0 8px 24px rgba(15, 18, 25, .10),
                   0 24px 60px rgba(15, 18, 25, .12);
  --cac-shadow-xl: 0 16px 40px rgba(15, 18, 25, .14),
                   0 40px 90px rgba(15, 18, 25, .20);

  /* Texto (contraste AA sobre vidrio claro).
     - text:    primario.
     - muted:   secundario legible AA incluso sobre la aurora mas clara (.70).
     - hint:    escalon informativo (helper/hint/descripciones/placeholders),
                AA garantizado (.66); NO usar 'subtle' para texto que informa.
     - subtle:  SOLO decorativo (separadores, iconos apagados, deshabilitado). */
  --cac-text:           rgba(15, 18, 25, .92);
  --cac-text-muted:     rgba(15, 18, 25, .70);
  --cac-text-hint:      rgba(15, 18, 25, .66);
  --cac-text-subtle:    rgba(15, 18, 25, .55);
  --cac-text-on-accent: #ffffff;
  --cac-accent-text:    rgb(var(--primary-700, var(--primary-600, var(--primary-500, 220, 38, 38)))); /* link/icono AA */

  /* Neutros tintables (via --gray-* de Filament) */
  --cac-neutral-soft: rgba(var(--gray-500), .08); /* zebra/header de seccion   */
  --cac-neutral-line: rgba(var(--gray-500), .16); /* separadores neutros       */

  /* Aurora clara (mas tenue para no lavar el texto). Se tiñe por panel. */
  --cac-aurora-1: rgba(var(--primary-500, 220, 38, 38), .16);                 /* nucleo acento */
  --cac-aurora-2: rgba(var(--primary-400, var(--primary-500, 220, 38, 38)), .12); /* halo acento */
  --cac-aurora-3: rgba(var(--primary-600, var(--primary-500, 220, 38, 38)), .10); /* profundidad tintada por panel */
  --cac-aurora-4: rgba(var(--gray-400), .10); /* neutro tintable (equilibrio)    */
  --cac-aurora-veil: rgba(244, 244, 245, .30);/* velo/vignette para no saturar   */
}


/* =============================================================================
   3) TOKENS DEL TEMA OSCURO (html.dark)  ->  base #09090B.
      Materiales oscuros translucidos (vibrancy dark) que mantienen legibilidad
      sobre la aurora de color; bordes de luz mas sutiles.
   ========================================================================== */
html.dark {
  color-scheme: dark;

  --cac-canvas:      #09090b;  /* marca CAC (coincide con #cac-splash)          */
  --cac-canvas-deep: #050506;
  --cac-elevated:    #101014;

  --cac-glass-fill:         rgba(24, 24, 27, .70);
  --cac-glass-fill-strong:  rgba(24, 24, 27, .85);
  --cac-glass-fill-soft:    rgba(30, 30, 34, .40);
  --cac-glass-fill-hover:   rgba(38, 38, 44, .72);
  --cac-glass-solid:        rgba(18, 18, 22, .92);
  --cac-glass-solid-strong: rgba(24, 24, 30, .96);

  --cac-border:        rgba(255, 255, 255, .10);
  --cac-border-strong: rgba(255, 255, 255, .18);
  --cac-border-soft:   rgba(255, 255, 255, .06);
  --cac-highlight:     rgba(255, 255, 255, .22);
  --cac-inset-sheen:   inset 0 1px 0 0 rgba(255, 255, 255, .12);
  --cac-specular: linear-gradient(180deg,
                    rgba(255, 255, 255, .22) 0%,
                    rgba(255, 255, 255, 0) 40%);

  --cac-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45),
                   0 2px 8px rgba(0, 0, 0, .35);
  --cac-shadow-md: 0 6px 16px rgba(0, 0, 0, .50),
                   0 16px 40px rgba(0, 0, 0, .42);
  --cac-shadow-lg: 0 10px 30px rgba(0, 0, 0, .55),
                   0 30px 70px rgba(0, 0, 0, .60);
  --cac-shadow-xl: 0 16px 40px rgba(0, 0, 0, .60),
                   0 44px 100px rgba(0, 0, 0, .70);

  --cac-text:           rgba(244, 245, 250, .94);
  --cac-text-muted:     rgba(244, 245, 250, .72);
  --cac-text-hint:      rgba(244, 245, 250, .68);
  --cac-text-subtle:    rgba(244, 245, 250, .58);
  --cac-text-on-accent: #ffffff;
  --cac-accent-text:    rgb(var(--primary-400, var(--primary-500, 220, 38, 38)));

  --cac-neutral-soft: rgba(var(--gray-400), .10);
  --cac-neutral-line: rgba(var(--gray-400), .16);

  /* Aurora oscura: mas saturada pero de baja luminancia (no lava el negro). */
  --cac-aurora-1: rgba(var(--primary-500, 220, 38, 38), .22);
  --cac-aurora-2: rgba(var(--primary-600, var(--primary-500, 220, 38, 38)), .16);
  --cac-aurora-3: rgba(var(--primary-600, var(--primary-500, 220, 38, 38)), .14); /* profundidad tintada por panel */
  --cac-aurora-4: rgba(var(--gray-700), .20);
  --cac-aurora-veil: rgba(9, 9, 11, .42);

  /* Halo de acento algo mas intenso sobre fondo oscuro. */
  --cac-accent-glow: rgba(var(--primary-500, 220, 38, 38), .34);
}


/* =============================================================================
   4) LIENZO + FONDO AMBIENTAL (AURORA)
      html pinta el color plano. body.fi-body es transparente. Dos capas fijas
      (::before nucleo, ::after halo) derivan MUY lento con transform+opacity
      (compositing GPU, sin reflow). El contenido de Filament queda por encima.

      NOTA rendimiento: se retiro 'will-change' permanente de ambos pseudos. El
      navegador ya promueve a capa los elementos con animacion continua de
      transform/opacity, sin reservar VRAM de forma perpetua. El coste real del
      frost se acota reservando backdrop-filter a POCAS superficies grandes
      (sidebar, topbar, secciones, modales, dropdowns), no a badges/botones/celdas.
   ========================================================================== */
html {
  background-color: var(--cac-canvas);
  min-height: 100%;
}

body.fi-body {
  position: relative;
  min-height: 100vh;
  background-color: transparent; /* la base la pinta <html>                    */
  color: var(--cac-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--cac-dur-base) var(--cac-ease-out),
              color var(--cac-dur-base) var(--cac-ease-out);
}

/* Capa NUCLEO: blobs de acento + frio + neutro, sobredimensionada para derivar. */
body.fi-body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background-color: var(--cac-canvas);
  background-image:
    radial-gradient(38% 42% at 18% 22%, var(--cac-aurora-1) 0%, transparent 68%),
    radial-gradient(34% 40% at 82% 30%, var(--cac-aurora-2) 0%, transparent 66%),
    radial-gradient(46% 50% at 62% 82%, var(--cac-aurora-3) 0%, transparent 70%),
    radial-gradient(40% 44% at 30% 78%, var(--cac-aurora-4) 0%, transparent 72%);
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  animation: cacAuroraDrift var(--cac-aurora-dur) var(--cac-ease-standard) infinite alternate;
}

/* Capa HALO: contramovimiento + velo/vignette para parallax y profundidad. */
body.fi-body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(30% 34% at 70% 12%, var(--cac-aurora-2) 0%, transparent 64%),
    radial-gradient(36% 40% at 22% 62%, var(--cac-aurora-3) 0%, transparent 68%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, var(--cac-aurora-veil) 100%);
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  animation: cacAuroraDriftAlt calc(var(--cac-aurora-dur) * 1.35) var(--cac-ease-standard) infinite alternate;
}

/* Contenedores de layout transparentes: dejan ver la aurora tras el vidrio.
   (Anclado en fi-*; no se toca display para no romper grid de tablas/forms.) */
.fi-layout,
.fi-main-ctn,
.fi-main {
  background-color: transparent;
}

/* El contenido debe quedar SOBRE la aurora (z-index 0 de los pseudos). */
.fi-layout,
.fi-simple-layout {
  position: relative;
  z-index: 1;
}

/* Deriva de la aurora: solo transform/opacity => GPU-friendly, sin reflow. */
@keyframes cacAuroraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg)    scale(1.05); }
  50%  { transform: translate3d(2%, 2%, 0)   rotate(.6deg)   scale(1.08); }
  100% { transform: translate3d(1%, -2%, 0)  rotate(-.4deg)  scale(1.06); }
}
@keyframes cacAuroraDriftAlt {
  0%   { transform: translate3d(2%, 1%, 0)   scale(1.06); opacity: .90; }
  50%  { transform: translate3d(-2%, -2%, 0) scale(1.10); opacity: 1;   }
  100% { transform: translate3d(-1%, 2%, 0)  scale(1.07); opacity: .85; }
}


/* =============================================================================
   5) PRIMITIVAS DE VIDRIO (contrato de referencia para autores de componentes)
      Patron OBLIGATORIO con fallback: primero el relleno OPACO legible (fuera de
      @supports); luego el vidrio REAL translucido + backdrop-filter (dentro).
      Los bloques fi-* COMPONEN estos tokens, no reinventan valores.
   ========================================================================== */

/* Superficie de vidrio base (blur md). */
.cac-glass {
  position: relative;
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Variantes de intensidad. */
.cac-glass-strong {
  position: relative;
  background-color: var(--cac-glass-solid-strong);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-lg), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}
.cac-glass-soft {
  position: relative;
  background-color: var(--cac-glass-solid);
  border: 1px solid var(--cac-border-soft);
  border-radius: var(--cac-radius-md);
  box-shadow: var(--cac-shadow-sm);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Vidrio REAL solo si el navegador soporta backdrop-filter. Incluye -webkit-. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cac-glass {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
  .cac-glass-strong {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-lg);
    backdrop-filter: var(--cac-glass-filter-lg);
  }
  .cac-glass-soft {
    background-color: var(--cac-glass-fill-soft);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* Reflejo especular del borde superior (el "brillo" liquido). Requiere que el
   contenedor tenga position:relative (ya incluido en las clases .cac-glass*). */
.cac-glass-sheen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  border-radius: inherit;
  background: var(--cac-specular);
  pointer-events: none;
  opacity: .9;
}

/* Micro-interaccion canonica de elevacion (hover eleva, active presiona). */
.cac-interactive:hover {
  transform: var(--cac-lift);
  box-shadow: var(--cac-shadow-lg), var(--cac-shadow-glow);
  border-color: var(--cac-border-strong);
}
.cac-interactive:active {
  transform: var(--cac-press);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}

/* Foco accesible reestilizado con el acento (nunca eliminado). */
.cac-focusable:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}


/* =============================================================================
   6) SIDEBAR Y NAVEGACION
      Selectores PLANOS anclados en fi-*. Claro + oscuro. hover/focus/active.
      Vidrio con fallback @supports.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   6.1) EL PANEL DE LA SIDEBAR  ->  vidrio esmerilado translucido (blur-lg)
        Respaldo OPACO primero (fuera de @supports); vidrio real dentro.
        No se toca position/display: Filament ya la posiciona.
   --------------------------------------------------------------------------- */
.fi-sidebar {
  background-color: var(--cac-glass-solid-strong); /* FALLBACK opaco legible   */
  border-right: 1px solid var(--cac-border);
  box-shadow: var(--cac-shadow-lg);
  transition: var(--cac-transition);
}

/* Vidrio REAL solo con soporte de backdrop-filter (incluye -webkit-). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-sidebar {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-lg);
    backdrop-filter: var(--cac-glass-filter-lg);
  }
}

/* Reflejo especular sutil en el borde superior del panel (sheen liquido). */
.fi-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: var(--cac-specular);
  pointer-events: none;
  opacity: .7;
  z-index: 0;
}

/* -----------------------------------------------------------------------------
   6.2) HEADER / MARCA (logo)
        Cabecera translucida con divisor inferior sutil; queda sobre el sheen.
   --------------------------------------------------------------------------- */
.fi-sidebar-header {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border-bottom: 1px solid var(--cac-border-soft);
  box-shadow: none;
  transition: var(--cac-transition);
}

/* -----------------------------------------------------------------------------
   6.3) CUERPO DE NAVEGACION
   --------------------------------------------------------------------------- */
.fi-sidebar-nav {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* Titulos de grupo: discretos pero legibles AA (muted, no subtle). */
.fi-sidebar-group-label,
.fi-sidebar-group > .fi-sidebar-group-button {
  color: var(--cac-text-muted);
  letter-spacing: .04em;
  transition: color var(--cac-dur-fast) var(--cac-ease-standard);
}

/* Boton colapsable de grupo (si el grupo es plegable): realce neutro al hover. */
.fi-sidebar-group-button:hover {
  color: var(--cac-text);
  background-color: var(--cac-accent-softer);
  border-radius: var(--cac-radius-md);
}

/* -----------------------------------------------------------------------------
   6.4) ITEMS DE NAVEGACION  ->  "pill" con micro-interacciones
        El boton es el objetivo clicable; se redondea y se le da la interaccion.
        No se cambia display para no romper el flex interno de Filament.
   --------------------------------------------------------------------------- */
.fi-sidebar-item {
  position: relative;
  z-index: 1;
}

.fi-sidebar-item-button {
  position: relative;
  border-radius: var(--cac-radius-md);
  border: 1px solid transparent;
  color: var(--cac-text-muted);
  transition: var(--cac-transition);
}

/* Iconos en reposo: grafico significativo -> muted (>=3:1), no subtle. */
.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-button .fi-icon {
  color: var(--cac-text-muted);
  transition: color var(--cac-dur-fast) var(--cac-ease-standard),
              transform var(--cac-dur-base) var(--cac-ease-spring);
}

/* HOVER: veladura de vidrio + desliz sutil + realce de texto/icono. */
.fi-sidebar-item-button:hover {
  background-color: var(--cac-glass-fill-soft);
  border-color: var(--cac-border-soft);
  color: var(--cac-text);
  transform: var(--cac-lift-sm);
  box-shadow: var(--cac-shadow-sm);
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-icon {
  color: var(--cac-accent-text);
}

/* Blur ligero en el hover del item (solo con soporte; 1 activo a la vez). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-sidebar-item-button:hover {
    background-color: var(--cac-glass-fill-soft);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* ACTIVE (al presionar): feedback de compresion. */
.fi-sidebar-item-button:active {
  transform: var(--cac-press);
  box-shadow: none;
}

/* FOCO accesible: anillo de acento, nunca se elimina el outline sin reemplazo. */
.fi-sidebar-item-button:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* -----------------------------------------------------------------------------
   6.5) ITEM ACTIVO  ->  pill translucido teñido con el acento del panel + barra
        Rojo en /admin, azul en /empresa: todo via var(--primary-*)/--cac-accent*.
   --------------------------------------------------------------------------- */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item .fi-sidebar-item-button.fi-active {
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  color: var(--cac-accent-text);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}

/* Iconos y texto del item activo: color de acento tematico. */
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-button .fi-icon,
.fi-sidebar-item .fi-sidebar-item-button.fi-active .fi-sidebar-item-icon {
  color: var(--cac-accent-text);
}

/* Barra indicadora izquierda del item activo (::before del boton). */
.fi-sidebar-item.fi-active .fi-sidebar-item-button::before,
.fi-sidebar-item .fi-sidebar-item-button.fi-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: var(--cac-radius-pill);
  background-color: var(--cac-accent);
  box-shadow: var(--cac-shadow-glow);
  pointer-events: none;
}

/* Hover sobre el item ACTIVO: mantiene el tinte, apenas se refuerza. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button:hover,
.fi-sidebar-item .fi-sidebar-item-button.fi-active:hover {
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  color: var(--cac-accent-text);
  box-shadow: var(--cac-shadow-md), var(--cac-shadow-glow);
}

/* -----------------------------------------------------------------------------
   6.6) ESTADO COLAPSADO (desktop)
        Filament oculta los labels; centramos el boton/icono y recolocamos la
        barra indicadora para que el pill siga leyendose. Sin tocar display.
   --------------------------------------------------------------------------- */
.fi-sidebar-collapsed .fi-sidebar-item-button {
  justify-content: center;
  border-radius: var(--cac-radius-md);
}

/* En colapsado, la barra indicadora pasa a subrayado inferior corto centrado. */
.fi-sidebar-collapsed .fi-sidebar-item.fi-active .fi-sidebar-item-button::before,
.fi-sidebar-collapsed .fi-sidebar-item .fi-sidebar-item-button.fi-active::before {
  left: 50%;
  top: auto;
  bottom: 4px;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
}

/* Icono levemente mas presente en colapsado (unica pista visual). */
.fi-sidebar-collapsed .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-collapsed .fi-sidebar-item-button:hover .fi-icon {
  transform: scale(1.06);
}

/* -----------------------------------------------------------------------------
   6.7) DIFERENCIAS CLARO / OSCURO puntuales del panel.
   --------------------------------------------------------------------------- */
html:not(.dark) .fi-sidebar {
  border-right-color: var(--cac-border);
}
html.dark .fi-sidebar {
  border-right-color: var(--cac-border-soft);
}


/* =============================================================================
   7) TOPBAR
      .fi-topbar (barra sticky de vidrio), breadcrumbs, .fi-global-search,
      .fi-user-menu + trigger, botones de icono del topbar y theme-switcher.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   7.1) BARRA SUPERIOR  ·  .fi-topbar (contenedor sticky) + su <nav> (superficie)
   --------------------------------------------------------------------------- */
.fi-topbar {
  z-index: 20; /* la barra vive sobre la aurora */
}

/* Superficie de vidrio del topbar. Fallback OPACO primero (fuera de @supports). */
.fi-topbar nav {
  background-color: var(--cac-glass-solid-strong);
  border: 0;
  box-shadow:
    inset 0 1px 0 0 var(--cac-highlight),
    inset 0 -1px 0 0 var(--cac-border),
    var(--cac-shadow-md);
  transition:
    background-color var(--cac-dur-base) var(--cac-ease-out),
    box-shadow       var(--cac-dur-base) var(--cac-ease-out),
    -webkit-backdrop-filter var(--cac-dur-base) var(--cac-ease-out),
    backdrop-filter  var(--cac-dur-base) var(--cac-ease-out);
}

/* Override del <nav> en OSCURO (los utilities dark:* de Filament pesan mas). */
html.dark .fi-topbar nav {
  background-color: var(--cac-glass-solid-strong);
  box-shadow:
    inset 0 1px 0 0 var(--cac-highlight),
    inset 0 -1px 0 0 var(--cac-border),
    var(--cac-shadow-md);
}

/* Vidrio REAL translucido solo si el navegador soporta backdrop-filter. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-topbar nav,
  html.dark .fi-topbar nav {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-lg);
    backdrop-filter: var(--cac-glass-filter-lg);
  }
}

/* -----------------------------------------------------------------------------
   7.2) BREADCRUMBS  ·  .fi-breadcrumbs
   --------------------------------------------------------------------------- */
.fi-breadcrumbs-item-label {
  transition: color var(--cac-dur-fast) var(--cac-ease-standard);
}

/* Enlaces del rastro (items navegables) */
.fi-breadcrumbs-item a.fi-breadcrumbs-item-label {
  color: var(--cac-text-muted);
  border-radius: var(--cac-radius-xs);
}
.fi-breadcrumbs-item a.fi-breadcrumbs-item-label:hover {
  color: var(--cac-accent-text);
}
.fi-breadcrumbs-item a.fi-breadcrumbs-item-label:focus-visible {
  outline: none;
  color: var(--cac-accent-text);
  box-shadow: var(--cac-ring);
}

/* Ultimo item (pagina actual, es un <span>): texto primario */
.fi-breadcrumbs-item span.fi-breadcrumbs-item-label {
  color: var(--cac-text);
}

/* Chevron separador entre migas (decorativo). */
.fi-breadcrumbs-item-separator {
  color: var(--cac-text-subtle);
}

/* -----------------------------------------------------------------------------
   7.3) BOTONES DE ICONO DEL TOPBAR
   --------------------------------------------------------------------------- */
.fi-topbar .fi-icon-btn {
  border-radius: var(--cac-radius-sm);
  color: var(--cac-text-muted);
  border: 1px solid transparent;
  transition: var(--cac-transition);
}

/* Hover: veladura tintada + realce de icono + leve elevacion */
.fi-topbar .fi-icon-btn:hover,
html.dark .fi-topbar .fi-icon-btn:hover {
  background-color: var(--cac-accent-softer);
  border-color: var(--cac-border-soft);
  color: var(--cac-accent-text);
  transform: var(--cac-lift-sm);
}

/* Active: micro-presion */
.fi-topbar .fi-icon-btn:active {
  transform: var(--cac-press);
  background-color: var(--cac-accent-soft);
}

/* Foco accesible con anillo de acento (reemplaza el ring-2 de Filament) */
.fi-topbar .fi-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* -----------------------------------------------------------------------------
   7.4) BUSQUEDA GLOBAL  ·  .fi-global-search
        El wrapper (.fi-input-wrp) es la pastilla de vidrio; el input transparente.
        Frost conservado SOLO aqui (una unica instancia, baja cardinalidad).
   --------------------------------------------------------------------------- */
.fi-global-search .fi-input-wrp {
  background-color: var(--cac-glass-solid);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-md);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
  transition: var(--cac-transition);
}
html.dark .fi-global-search .fi-input-wrp {
  background-color: var(--cac-glass-solid);
  border: 1px solid var(--cac-border);
}

/* Hover del campo: se aclara y sube el borde */
.fi-global-search .fi-input-wrp:hover {
  background-color: var(--cac-glass-fill-hover);
  border-color: var(--cac-border-strong);
}

/* Foco (dentro del wrapper): anillo de acento marcado */
.fi-global-search .fi-input-wrp:focus-within {
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-ring-strong), var(--cac-inset-sheen);
}

/* El input y su icono/placeholder: transparentes y legibles sobre el vidrio */
.fi-global-search .fi-input {
  background-color: transparent;
  color: var(--cac-text);
}
.fi-global-search .fi-input::placeholder {
  color: var(--cac-text-hint);
  opacity: 1;
}
.fi-global-search .fi-input-wrp-icon {
  color: var(--cac-text-muted);
  transition: color var(--cac-dur-fast) var(--cac-ease-standard);
}
.fi-global-search .fi-input-wrp:focus-within .fi-input-wrp-icon {
  color: var(--cac-accent-text);
}

/* Vidrio REAL del campo de busqueda (blur-sm) si hay soporte */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-global-search .fi-input-wrp,
  html.dark .fi-global-search .fi-input-wrp {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* -----------------------------------------------------------------------------
   7.5) MENU DE USUARIO  ·  .fi-user-menu (dropdown) + su trigger/avatar
   --------------------------------------------------------------------------- */
.fi-user-menu .fi-dropdown-trigger {
  border-radius: var(--cac-radius-pill);
  transition: var(--cac-transition);
}

/* El boton-avatar del trigger */
.fi-user-menu .fi-dropdown-trigger > button {
  border-radius: var(--cac-radius-pill);
  outline: none;
  box-shadow: 0 0 0 1px var(--cac-border);
  transition: var(--cac-transition);
}
.fi-user-menu .fi-dropdown-trigger > button:hover {
  box-shadow: 0 0 0 1px var(--cac-border-strong), var(--cac-shadow-glow);
  transform: var(--cac-lift-sm);
}
.fi-user-menu .fi-dropdown-trigger > button:active {
  transform: var(--cac-press);
}
.fi-user-menu .fi-dropdown-trigger > button:focus-visible {
  box-shadow: var(--cac-ring);
}

/* El avatar hereda la pastilla redonda */
.fi-user-menu .fi-avatar {
  border-radius: var(--cac-radius-pill);
}

/* -----------------------------------------------------------------------------
   7.6) SELECTOR DE TEMA  ·  .fi-theme-switcher (claro/oscuro/sistema)
   --------------------------------------------------------------------------- */
.fi-theme-switcher-btn {
  border-radius: var(--cac-radius-sm);
  color: var(--cac-text-muted);
  border: 1px solid transparent;
  transition: var(--cac-transition);
}
.fi-theme-switcher-btn:hover,
html.dark .fi-theme-switcher-btn:hover {
  background-color: var(--cac-accent-softer);
  border-color: var(--cac-border-soft);
  color: var(--cac-text);
}
.fi-theme-switcher-btn:active {
  transform: var(--cac-press);
}
.fi-theme-switcher-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* Opcion activa: relleno de acento + icono al acento (gana a los utilities FL) */
.fi-theme-switcher-btn.fi-active,
html.dark .fi-theme-switcher-btn.fi-active {
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  color: var(--cac-accent-text);
  box-shadow: var(--cac-inset-sheen);
}


/* =============================================================================
   8) PAGINAS, SECCIONES Y WIDGETS
      .fi-page, .fi-section (+header/content), .fi-wi, .fi-wi-stats-overview-stat.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   8.0) CONTENEDOR DE PAGINA
   --------------------------------------------------------------------------- */
.fi-page {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: var(--cac-text);
}

/* -----------------------------------------------------------------------------
   8.1) .fi-section  ·  TARJETA DE VIDRIO
   --------------------------------------------------------------------------- */
.fi-section {
  position: relative;
  isolation: isolate;                       /* aisla el ::before del contenido */
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Reflejo especular superior (brillo liquido). No captura clics; recortado. */
.fi-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  border-radius: inherit;
  background: var(--cac-specular);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* El contenido de la seccion queda SOBRE el sheen (texto siempre nitido). */
.fi-section-header,
.fi-section-content {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* Cabecera: separador interno sutil (solo cuando hay contenido debajo). */
.fi-section-header {
  color: var(--cac-text);
  border-bottom: 1px solid var(--cac-border-soft);
}
.fi-section-header .fi-section-header-heading {
  color: var(--cac-text);
}
.fi-section-header .fi-section-header-description {
  color: var(--cac-text-muted);
}

.fi-section-content {
  color: var(--cac-text);
}

/* Hover: elevacion sutil + halo de acento + borde reforzado. */
.fi-section:hover {
  transform: var(--cac-lift-sm);
  box-shadow: var(--cac-shadow-lg), var(--cac-shadow-glow), var(--cac-inset-sheen);
  border-color: var(--cac-border-strong);
}

/* Vidrio REAL translucido solo con soporte de backdrop-filter (con -webkit-). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-section {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

/* -----------------------------------------------------------------------------
   8.2) .fi-wi  ·  ENVOLTORIO DE WIDGET (transparente).
   --------------------------------------------------------------------------- */
.fi-wi {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: var(--cac-text);
}

/* -----------------------------------------------------------------------------
   8.3) .fi-wi-stats-overview-stat  ·  TARJETA DE ESTADISTICA
   --------------------------------------------------------------------------- */
.fi-wi-stats-overview-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;                         /* recorta el sheen a las esquinas */
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Reflejo especular superior de la tarjeta de stat. */
.fi-wi-stats-overview-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  border-radius: inherit;
  background: var(--cac-specular);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

/* Jerarquia tipografica interna (todo sobre el sheen, z-index 1). */
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat-description {
  position: relative;
  z-index: 1;
}
.fi-wi-stats-overview-stat-label {
  color: var(--cac-text-muted);
}
.fi-wi-stats-overview-stat-value {
  color: var(--cac-text);
  letter-spacing: -0.01em;
}
.fi-wi-stats-overview-stat-description {
  color: var(--cac-text-hint);
}

/* Hover: elevacion + escala con rebote + halo de acento + borde reforzado. */
.fi-wi-stats-overview-stat:hover {
  transform: var(--cac-lift);
  box-shadow: var(--cac-shadow-lg), var(--cac-shadow-glow), var(--cac-inset-sheen);
  border-color: var(--cac-accent-line);
}
/* Al pasar el raton, el valor toma el color de acento tematico (rojo/azul). */
.fi-wi-stats-overview-stat:hover .fi-wi-stats-overview-stat-value {
  color: var(--cac-accent-text);
}

/* Active: feedback de presion (por si la stat es clicable/enlazada). */
.fi-wi-stats-overview-stat:active {
  transform: var(--cac-press);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}

/* Foco accesible reestilizado con el acento (nunca eliminado). */
.fi-wi-stats-overview-stat:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring), var(--cac-shadow-md), var(--cac-inset-sheen);
  border-color: var(--cac-accent-line);
}

/* Vidrio REAL translucido solo con soporte de backdrop-filter (con -webkit-). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-wi-stats-overview-stat {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}


/* =============================================================================
   9) TABLAS  (.fi-ta*)  +  PAGINACION
   ========================================================================== */

/* -----------------------------------------------------------------------------
   9.1) CONTENEDOR DE VIDRIO  (.fi-ta / .fi-ta-ctn)
        IMPORTANTE: .fi-ta-ctn ES el scrollport (overflow-x-auto) de Filament y
        el contexto de la cabecera/columnas sticky. NO usar overflow:hidden aqui
        (recorta tablas anchas sin scroll y rompe la cabecera sticky). Se usa
        overflow-x:auto -> mantiene el scroll horizontal y, al no ser 'visible',
        sigue recortando a las esquinas redondeadas.
   --------------------------------------------------------------------------- */
.fi-ta {
  position: relative;
  border-radius: var(--cac-radius-lg);
  color: var(--cac-text);
}

.fi-ta-ctn {
  position: relative;
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  overflow-x: auto; /* scrollport de tablas anchas + scope de sticky (no hidden) */
  transition: var(--cac-transition);
}

/* Reflejo especular sutil en el borde superior del contenedor. */
.fi-ta-ctn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  border-radius: inherit;
  background: var(--cac-specular);
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}

/* El contenido de la tabla queda por encima del sheen. */
.fi-ta-table,
.fi-ta-header,
.fi-ta-filters,
.fi-ta-empty-state {
  position: relative;
  z-index: 1;
}

/* Vidrio REAL (blur md) si el navegador lo soporta. -webkit- SIEMPRE. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-ta-ctn {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

/* -----------------------------------------------------------------------------
   9.2) LA TABLA  (.fi-ta-table)  — transparente; separacion con hairlines.
   --------------------------------------------------------------------------- */
.fi-ta-table {
  background-color: transparent;
  color: var(--cac-text);
  border-collapse: separate;
  border-spacing: 0;
}

/* -----------------------------------------------------------------------------
   9.3) CABECERA TRANSLUCIDA  (.fi-ta-header / .fi-ta-header-cell)
        NO se toca 'position' del thead ni de las celdas: Filament aplica
        position:sticky para la cabecera/columnas fijas y hay que respetarlo.
        Para elevar la cabecera sobre las filas al hacer scroll basta z-index en
        las celdas (aplica solo cuando Filament ya las hizo sticky).
        Sin backdrop-filter aqui: evita doble-frost dentro de .fi-ta-ctn (que ya
        es de vidrio) y su coste/artefactos; el relleno opaco es legible.
   --------------------------------------------------------------------------- */
.fi-ta-header {
  background-color: var(--cac-glass-solid-strong); /* opaco legible, sin frost */
  border-bottom: 1px solid var(--cac-border-soft);
}

.fi-ta-header-cell {
  z-index: 1; /* solo surte efecto si Filament la posiciona (sticky) */
  background-color: transparent;
  color: var(--cac-text-muted);
  border-bottom: 1px solid var(--cac-border-soft);
  font-weight: 600;
  letter-spacing: .01em;
  transition: color var(--cac-dur-fast) var(--cac-ease-standard),
              background-color var(--cac-dur-base) var(--cac-ease-out);
}

/* Cabecera de columna ordenable / con hover: apenas tintada de acento. */
.fi-ta-header-cell:hover {
  color: var(--cac-text);
  background-color: var(--cac-accent-softer);
}

/* Columna activa de ordenamiento: texto de acento. */
.fi-ta-header-cell[aria-sort]:not([aria-sort="none"]) {
  color: var(--cac-accent-text);
}

/* Foco accesible en controles interactivos de la cabecera (orden). */
.fi-ta-header-cell button:focus-visible,
.fi-ta-header-cell a:focus-visible {
  outline: none;
  border-radius: var(--cac-radius-xs);
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   9.4) FILAS  (.fi-ta-row)
   --------------------------------------------------------------------------- */
.fi-ta-row {
  background-color: transparent;
  border-bottom: 1px solid var(--cac-border-soft);
  transition: background-color var(--cac-dur-base) var(--cac-ease-out),
              box-shadow var(--cac-dur-base) var(--cac-ease-out),
              transform var(--cac-dur-base) var(--cac-ease-spring);
}

.fi-ta-row:last-child {
  border-bottom: 0;
}

/* Zebra muy sutil con neutro tintable (no compite con el vidrio). */
.fi-ta-table tbody .fi-ta-row:nth-child(even) {
  background-color: var(--cac-neutral-soft);
}

/* Hover de fila: veladura de vidrio + tinte de acento + barra indicadora izq. */
.fi-ta-row:hover {
  background-color: var(--cac-accent-softer);
  box-shadow: inset 0 0 0 1px var(--cac-border-soft),
              inset 3px 0 0 0 var(--cac-accent-line);
}

/* En claro, el hover de fila necesita algo mas de cuerpo. */
html:not(.dark) .fi-ta-row:hover {
  background-color: var(--cac-accent-soft);
}

/* Fila seleccionada (checkbox activo): relleno de acento estable. */
.fi-ta-row:has(.fi-checkbox input:checked),
.fi-ta-row.fi-selected {
  background-color: var(--cac-accent-soft);
  box-shadow: inset 3px 0 0 0 var(--cac-accent-line);
}

/* -----------------------------------------------------------------------------
   9.5) CELDAS  (.fi-ta-cell)
   --------------------------------------------------------------------------- */
.fi-ta-cell {
  background-color: transparent;
  color: var(--cac-text);
  border: 0;
}

/* Enlaces/acciones dentro de celda con foco accesible del acento. */
.fi-ta-cell a:focus-visible,
.fi-ta-cell button:focus-visible {
  outline: none;
  border-radius: var(--cac-radius-xs);
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   9.6) ESTADO VACIO  (.fi-ta-empty-state)
   --------------------------------------------------------------------------- */
.fi-ta-empty-state {
  background-color: transparent;
  color: var(--cac-text-muted);
  border-radius: var(--cac-radius-md);
}

.fi-ta-empty-state .fi-ta-empty-state-icon-ctn {
  background-color: var(--cac-accent-soft);
  color: var(--cac-accent-text);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-pill);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}

/* -----------------------------------------------------------------------------
   9.7) FILTROS  (.fi-ta-filters)  — sub-superficie de vidrio suave.
   --------------------------------------------------------------------------- */
.fi-ta-filters {
  background-color: var(--cac-glass-solid); /* FALLBACK opaco */
  border: 1px solid var(--cac-border-soft);
  border-radius: var(--cac-radius-md);
  box-shadow: var(--cac-shadow-sm);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-ta-filters {
    background-color: var(--cac-glass-fill-soft);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* Indicador de filtro activo: chip de acento. */
.fi-ta-filters .fi-badge {
  background-color: var(--cac-accent-soft);
  color: var(--cac-accent-text);
  border: 1px solid var(--cac-accent-line);
  border-radius: var(--cac-radius-pill);
}

/* -----------------------------------------------------------------------------
   9.8) BARRA DE ACCIONES / SELECCION MASIVA (bulk)
   --------------------------------------------------------------------------- */
.fi-ta-header-toolbar {
  background-color: transparent;
  color: var(--cac-text);
}

.fi-ta-selection-indicator,
.fi-ta-actions {
  color: var(--cac-text-muted);
}

.fi-ta-actions {
  background-color: transparent;
}

.fi-ta-header-toolbar .fi-ta-actions:has(.fi-btn),
.fi-ta-selection-indicator {
  border-radius: var(--cac-radius-md);
}

/* Recuento de seleccion resaltado con acento. */
.fi-ta-selection-indicator {
  color: var(--cac-accent-text);
  background-color: var(--cac-accent-softer);
  border: 1px solid var(--cac-accent-line);
  border-radius: var(--cac-radius-pill);
  padding: var(--cac-space-1) var(--cac-space-3);
}

/* -----------------------------------------------------------------------------
   9.9) PAGINACION  (.fi-pagination)
   --------------------------------------------------------------------------- */
.fi-pagination {
  background-color: transparent;
  border-top: 1px solid var(--cac-border-soft);
  color: var(--cac-text-muted);
}

/* Cada control de pagina como pastilla de vidrio interactiva. */
.fi-pagination .fi-btn,
.fi-pagination .fi-pagination-item button,
.fi-pagination .fi-pagination-item a {
  background-color: var(--cac-glass-solid); /* FALLBACK opaco */
  color: var(--cac-text);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-sm);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
  transition: var(--cac-transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-pagination .fi-btn,
  .fi-pagination .fi-pagination-item button,
  .fi-pagination .fi-pagination-item a {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* Hover: eleva, brilla con halo de acento y refuerza el borde. */
.fi-pagination .fi-btn:hover,
.fi-pagination .fi-pagination-item button:hover,
.fi-pagination .fi-pagination-item a:hover {
  transform: var(--cac-lift-sm);
  background-color: var(--cac-glass-fill-hover);
  border-color: var(--cac-border-strong);
  box-shadow: var(--cac-shadow-md), var(--cac-shadow-glow);
}

/* Active: feedback de presion. */
.fi-pagination .fi-btn:active,
.fi-pagination .fi-pagination-item button:active,
.fi-pagination .fi-pagination-item a:active {
  transform: var(--cac-press);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}

/* Foco accesible con anillo de acento (nunca eliminado). */
.fi-pagination .fi-btn:focus-visible,
.fi-pagination .fi-pagination-item button:focus-visible,
.fi-pagination .fi-pagination-item a:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* Pagina ACTUAL: relleno solido de acento, texto sobre acento. */
.fi-pagination .fi-pagination-item[aria-current] button,
.fi-pagination .fi-pagination-item[aria-current] a,
.fi-pagination .fi-pagination-item.fi-active button,
.fi-pagination .fi-pagination-item.fi-active a {
  background-color: var(--cac-accent);
  color: var(--cac-text-on-accent);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-sm), var(--cac-shadow-glow);
}

.fi-pagination .fi-pagination-item[aria-current] button:hover,
.fi-pagination .fi-pagination-item.fi-active button:hover {
  background-color: var(--cac-accent-strong);
}

/* Controles deshabilitados: apagados, sin elevacion (exentos de contraste). */
.fi-pagination .fi-btn:disabled,
.fi-pagination .fi-pagination-item button:disabled,
.fi-pagination .fi-pagination-item a[aria-disabled="true"] {
  color: var(--cac-text-subtle);
  box-shadow: none;
  transform: none;
  opacity: .6;
}


/* =============================================================================
   10) FORMULARIOS  (fi-fo-*, fi-input, fi-select, toggle, check/radio, etc.)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   10.1) CONTENEDOR DE CAMPO + LABELS
   --------------------------------------------------------------------------- */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp .fi-fo-field-wrp-label {
  color: var(--cac-text);
}

/* Texto del label y su icono/badge de "requerido" */
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text {
  color: var(--cac-text);
  font-weight: 600;
}

/* Hints, sublabels y mensajes de ayuda: TEXTO informativo -> hint (AA), no subtle. */
.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp .fi-fo-field-wrp-hint {
  color: var(--cac-text-hint);
}

/* Hint accionable / link dentro del wrapper -> acento tematico */
.fi-fo-field-wrp-hint .fi-link {
  color: var(--cac-accent-text);
}

/* Mensaje de error de validacion (contenido critico): desdoblado por tema para
   asegurar AA. En claro, danger-500 sobre vidrio casi blanco no llega a 4.5:1;
   se usa el tono -700. En oscuro, -400 sobre el vidrio oscuro. */
.fi-fo-field-wrp-error-message {
  color: rgb(var(--danger-700, 185, 28, 28));
}
html.dark .fi-fo-field-wrp-error-message {
  color: rgb(var(--danger-400, 248, 113, 113));
}

/* -----------------------------------------------------------------------------
   10.2) SUPERFICIE DEL INPUT  (.fi-input-wrp = envoltura de vidrio)
         Alta cardinalidad en formularios: SIN backdrop-filter (evita frost
         anidado dentro de .fi-section y coste GPU). Relleno opaco legible.
   --------------------------------------------------------------------------- */
.fi-input-wrp {
  position: relative;
  background-color: var(--cac-glass-solid);      /* opaco legible, sin frost    */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-md);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
  color: var(--cac-text);
  overflow: hidden;                              /* recorta affixes al radius    */
  transition: var(--cac-transition);
}

/* Hover de la envoltura: borde mas marcado + halo suave (sin mover el texto). */
.fi-input-wrp:hover {
  border-color: var(--cac-border-strong);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
}

/* Foco (el input real vive dentro): anillo de acento sobre la envoltura. */
.fi-input-wrp:focus-within {
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-ring-strong), var(--cac-shadow-md), var(--cac-inset-sheen);
}

/* El control interno es transparente y hereda el color del texto. */
.fi-input,
.fi-input-wrp .fi-input {
  background-color: transparent;
  border: 0;
  color: var(--cac-text);
  box-shadow: none;
}

/* Anula el foco propio del control: el anillo lo pinta la envoltura. */
.fi-input:focus,
.fi-input-wrp .fi-input:focus {
  outline: none;
  box-shadow: none;
}

/* Placeholders legibles: TEXTO informativo -> hint (AA), no subtle. */
.fi-input::placeholder,
.fi-input-wrp .fi-input::placeholder,
.fi-textarea::placeholder,
textarea.fi-input::placeholder {
  color: var(--cac-text-hint);
  opacity: 1;                                    /* Firefox no baja la opacidad  */
}

/* Textarea: mismo cristal, permitir crecer verticalmente sin romper layout. */
.fi-input-wrp textarea.fi-input,
textarea.fi-input {
  background-color: transparent;
  color: var(--cac-text);
}

/* Iconos/affixes (prefijo/sufijo) dentro de la envoltura -> tono secundario. */
.fi-input-wrp .fi-input-wrp-prefix,
.fi-input-wrp .fi-input-wrp-suffix,
.fi-input-wrp .fi-input-wrp-icon {
  color: var(--cac-text-muted);
}

/* Estado deshabilitado: mas apagado pero aun legible. */
.fi-input-wrp:has(.fi-input:disabled),
.fi-input-wrp:has(.fi-input[readonly]) {
  opacity: .72;
  box-shadow: var(--cac-shadow-sm);
}

/* -----------------------------------------------------------------------------
   10.3) SELECT  (.fi-select -> .fi-input-wrp; select nativo .fi-select-input)
   --------------------------------------------------------------------------- */
.fi-select .fi-input-wrp {
  border-radius: var(--cac-radius-md);
}

/* Select nativo transparente sobre el cristal de la envoltura. */
.fi-select-input,
.fi-select .fi-select-input {
  background-color: transparent;
  border: 0;
  color: var(--cac-text);
  box-shadow: none;
}
.fi-select-input:focus {
  outline: none;
  box-shadow: none;
}

/* Las <option> se pintan por el SO: fondo solido legible en ambos temas. */
.fi-select-input option {
  background-color: var(--cac-elevated);
  color: var(--cac-text);
}

/* -----------------------------------------------------------------------------
   10.4) TOGGLE  (.fi-fo-toggle = switch role=switch; riel + pulgar)
   --------------------------------------------------------------------------- */
.fi-fo-toggle {
  border-radius: var(--cac-radius-pill);
  transition: var(--cac-transition);
}

/* El boton/riel del toggle */
.fi-fo-toggle button,
.fi-fo-toggle [role="switch"] {
  background-color: var(--cac-neutral-soft);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-pill);
  box-shadow: var(--cac-inset-sheen);
  transition: var(--cac-transition);
}

/* Estado ON (aria-checked="true") -> relleno de acento. */
.fi-fo-toggle button[aria-checked="true"],
.fi-fo-toggle [role="switch"][aria-checked="true"] {
  background-color: var(--cac-accent);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-glow), var(--cac-inset-sheen);
}

/* El "pulgar" del toggle: pastilla clara con sombra de contacto. */
.fi-fo-toggle button span,
.fi-fo-toggle [role="switch"] span {
  box-shadow: var(--cac-shadow-sm);
  border-radius: var(--cac-radius-pill);
}

/* Foco accesible del toggle. */
.fi-fo-toggle button:focus-visible,
.fi-fo-toggle [role="switch"]:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   10.5) CHECKBOX + RADIO  (.fi-checkbox-input / .fi-radio-input)
   --------------------------------------------------------------------------- */
.fi-checkbox-input,
.fi-radio-input {
  accent-color: var(--cac-accent);               /* marca/relleno por panel     */
  background-color: var(--cac-glass-solid);
  border: 1px solid var(--cac-border-strong);
  box-shadow: var(--cac-inset-sheen);
  transition: var(--cac-transition);
}

.fi-checkbox-input {
  border-radius: var(--cac-radius-xs);
}
.fi-radio-input {
  border-radius: var(--cac-radius-pill);
}

/* Hover: borde mas presente. */
.fi-checkbox-input:hover,
.fi-radio-input:hover {
  border-color: var(--cac-accent-line);
}

/* Marcado: relleno de acento y borde de acento. */
.fi-checkbox-input:checked,
.fi-radio-input:checked {
  background-color: var(--cac-accent);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-glow);
}

/* Foco accesible con anillo de acento (no eliminar). */
.fi-checkbox-input:focus-visible,
.fi-radio-input:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* Label adyacente al control (checkbox/radio list) legible. */
.fi-fo-checkbox-list-option-label,
.fi-fo-radio-option-label {
  color: var(--cac-text);
}
.fi-fo-checkbox-list-option-description,
.fi-fo-radio-option-description {
  color: var(--cac-text-hint);
}

/* -----------------------------------------------------------------------------
   10.6) FIELDSET  (.fi-fieldset = grupo de campos con borde y leyenda)
   --------------------------------------------------------------------------- */
.fi-fieldset {
  position: relative;
  background-color: var(--cac-glass-solid);      /* FALLBACK opaco              */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Leyenda del fieldset: chip legible que "flota" sobre el borde. */
.fi-fieldset-label,
.fi-fieldset > legend {
  color: var(--cac-text);
  font-weight: 600;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-fieldset {
    background-color: var(--cac-glass-fill-soft);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* -----------------------------------------------------------------------------
   10.7) WIZARD  (.fi-fo-wizard = pasos de formulario)
   --------------------------------------------------------------------------- */
.fi-fo-wizard {
  position: relative;
  background-color: var(--cac-glass-solid);      /* FALLBACK opaco              */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

/* Cabecera de pasos */
.fi-fo-wizard-header {
  border-bottom: 1px solid var(--cac-border-soft);
}

/* Cada paso (boton clicable de la cabecera) */
.fi-fo-wizard-header-step {
  border-radius: var(--cac-radius-md);
  transition: var(--cac-transition);
}
.fi-fo-wizard-header-step:hover {
  background-color: var(--cac-accent-softer);
}

/* Etiquetas del paso: titulo y descripcion. */
.fi-fo-wizard-header-step-label {
  color: var(--cac-text-muted);
}
.fi-fo-wizard-header-step-description {
  color: var(--cac-text-hint);
}

/* Circulo/icono del paso (pendiente) */
.fi-fo-wizard-header-step-icon-ctn {
  background-color: var(--cac-neutral-soft);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-pill);
  color: var(--cac-text-muted);
  box-shadow: var(--cac-inset-sheen);
  transition: var(--cac-transition);
}

/* Paso ACTIVO (aria-current="step" o clase fi-active) -> acento. */
.fi-fo-wizard-header-step[aria-current="step"] .fi-fo-wizard-header-step-icon-ctn,
.fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-icon-ctn {
  background-color: var(--cac-accent);
  border-color: var(--cac-accent-line);
  color: var(--cac-text-on-accent);
  box-shadow: var(--cac-shadow-glow), var(--cac-inset-sheen);
}
.fi-fo-wizard-header-step[aria-current="step"] .fi-fo-wizard-header-step-label,
.fi-fo-wizard-header-step.fi-active .fi-fo-wizard-header-step-label {
  color: var(--cac-text);
  font-weight: 600;
}

/* Paso COMPLETADO -> tinte de acento suave, sin gritar. */
.fi-fo-wizard-header-step.fi-completed .fi-fo-wizard-header-step-icon-ctn {
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  color: var(--cac-accent-text);
}

/* Foco accesible del paso. */
.fi-fo-wizard-header-step:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-fo-wizard {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

/* -----------------------------------------------------------------------------
   10.8) FILE UPLOAD  (.fi-fo-file-upload = dropzone/filepond)
   --------------------------------------------------------------------------- */
.fi-fo-file-upload {
  position: relative;
  color: var(--cac-text);
}

/* El panel de la dropzone (contenedor de filepond) */
.fi-fo-file-upload .filepond--panel-root,
.fi-fo-file-upload .filepond--drop-label {
  background-color: var(--cac-glass-solid);      /* FALLBACK opaco              */
  border: 1px dashed var(--cac-border-strong);
  border-radius: var(--cac-radius-md);
  color: var(--cac-text-muted);
  transition: var(--cac-transition);
}

/* Texto/label de la zona (arrastra o busca) legible. */
.fi-fo-file-upload .filepond--drop-label label,
.fi-fo-file-upload .filepond--label-action {
  color: var(--cac-text-muted);
}
.fi-fo-file-upload .filepond--label-action {
  color: var(--cac-accent-text);
  text-decoration-color: var(--cac-accent-line);
}

/* Hover / arrastre encima -> tinte de acento y borde vivo. */
.fi-fo-file-upload:hover .filepond--panel-root,
.fi-fo-file-upload .filepond--root[data-drag-state="drag-over"] .filepond--panel-root,
.fi-fo-file-upload .filepond--drop-label:hover {
  background-color: var(--cac-accent-softer);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-glow);
}

/* Item de archivo ya cargado (pastilla de cristal). */
.fi-fo-file-upload .filepond--item-panel {
  background-color: var(--cac-accent-soft);
  border-radius: var(--cac-radius-sm);
  box-shadow: var(--cac-inset-sheen);
}

/* Foco accesible del control de subida (input/boton interno). */
.fi-fo-file-upload .filepond--browser:focus-visible,
.fi-fo-file-upload .filepond--credits:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-fo-file-upload .filepond--panel-root,
  .fi-fo-file-upload .filepond--drop-label {
    background-color: var(--cac-glass-fill-soft);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}


/* =============================================================================
   11) BOTONES, ENLACES, BADGES Y TABS
       .fi-btn · .fi-icon-btn · .fi-ac-btn · .fi-link · .fi-badge · .fi-tabs
       NOTA rendimiento: botones y badges son de ALTISIMA cardinalidad en tablas
       de flota/viajes. NO llevan backdrop-filter (crearia decenas/centenas de
       capas frost que re-rasterizan con la aurora). Su relleno translucido/opaco
       ya es legible. El frost queda para superficies grandes y pocas.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   11.1) .fi-btn  ·  BASE (defecto = variante neutra/gray), relleno opaco legible
   --------------------------------------------------------------------------- */
.fi-btn {
  position: relative;
  border-radius: var(--cac-radius-md);
  border: 1px solid var(--cac-border);
  background-color: var(--cac-glass-solid);      /* opaco legible, sin frost    */
  color: var(--cac-text);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
  transition: var(--cac-transition);
  isolation: isolate;
}

/* Reflejo especular superior del cristal (gloss liquido) sobre todo boton. */
.fi-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: var(--cac-specular);
  opacity: .85;
  pointer-events: none;
  z-index: -1;
}

/* Estados comunes de interaccion (elevacion + halo / presion). */
.fi-btn:hover {
  transform: var(--cac-lift);
  border-color: var(--cac-border-strong);
  background-color: var(--cac-glass-fill-hover);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
}
.fi-btn:active {
  transform: var(--cac-press);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}
.fi-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring), var(--cac-shadow-sm);
  border-color: var(--cac-accent-line);
}

/* Boton chico -> radio menor (coherencia con tabla/acciones). */
.fi-btn.fi-size-sm,
.fi-btn.fi-size-xs {
  border-radius: var(--cac-radius-sm);
}

/* -----------------------------------------------------------------------------
   11.2) .fi-btn.fi-color-primary  ·  ACENTO CON GLOSS TEÑIDO var(--primary-*)
         Relleno OPACO por panel (fallback rojo CAC inline). Sin backdrop-filter.
   --------------------------------------------------------------------------- */
.fi-btn.fi-color-primary {
  background-color: rgb(var(--primary-500, 220, 38, 38));
  background-image: linear-gradient(180deg,
                     rgba(255, 255, 255, .24) 0%,
                     rgba(255, 255, 255, 0) 48%);
  color: var(--cac-text-on-accent);
  border-color: rgba(var(--primary-500, 220, 38, 38), .55);
  box-shadow: var(--cac-shadow-sm),
              var(--cac-shadow-glow),
              inset 0 1px 0 0 rgba(255, 255, 255, .28);
}
.fi-btn.fi-color-primary::before { opacity: 1; }

.fi-btn.fi-color-primary:hover {
  background-color: var(--cac-accent-strong);
  border-color: rgba(var(--primary-500, 220, 38, 38), .70);
  box-shadow: var(--cac-shadow-md),
              0 10px 34px -6px var(--cac-accent-glow),
              inset 0 1px 0 0 rgba(255, 255, 255, .32);
}
.fi-btn.fi-color-primary:active {
  transform: var(--cac-press);
  background-color: var(--cac-accent-strong);
  box-shadow: var(--cac-shadow-sm),
              inset 0 1px 0 0 rgba(255, 255, 255, .20);
}
/* Foco de CTA: anillo de DOS capas (gap neutro con --cac-canvas + anillo de
   acento a .9). NUNCA el mismo color del relleno como unico anillo. */
.fi-btn.fi-color-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cac-canvas),
              0 0 0 4px rgba(var(--primary-500, 220, 38, 38), .9),
              var(--cac-shadow-glow);
  border-color: rgba(var(--primary-500, 220, 38, 38), .85);
}

/* -----------------------------------------------------------------------------
   11.3) .fi-btn.fi-color-danger  ·  MISMO PATRON con la tripleta --danger-*.
   --------------------------------------------------------------------------- */
.fi-btn.fi-color-danger {
  background-color: rgb(var(--danger-500, 239, 68, 68));
  background-image: linear-gradient(180deg,
                     rgba(255, 255, 255, .24) 0%,
                     rgba(255, 255, 255, 0) 48%);
  color: #ffffff;
  border-color: rgba(var(--danger-500, 239, 68, 68), .55);
  box-shadow: var(--cac-shadow-sm),
              0 8px 30px -6px rgba(var(--danger-500, 239, 68, 68), .30),
              inset 0 1px 0 0 rgba(255, 255, 255, .28);
}
.fi-btn.fi-color-danger::before { opacity: 1; }

.fi-btn.fi-color-danger:hover {
  background-color: rgb(var(--danger-600, 220, 38, 38));
  border-color: rgba(var(--danger-500, 239, 68, 68), .70);
  box-shadow: var(--cac-shadow-md),
              0 10px 34px -6px rgba(var(--danger-500, 239, 68, 68), .38),
              inset 0 1px 0 0 rgba(255, 255, 255, .32);
}
.fi-btn.fi-color-danger:active { transform: var(--cac-press); }
/* Foco de CTA danger: anillo de DOS capas (gap neutro + anillo danger a .9). */
.fi-btn.fi-color-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cac-canvas),
              0 0 0 4px rgba(var(--danger-500, 239, 68, 68), .9),
              var(--cac-shadow-sm);
  border-color: rgba(var(--danger-500, 239, 68, 68), .85);
}

/* -----------------------------------------------------------------------------
   11.4) .fi-btn.fi-color-gray  ·  NEUTRO/OUTLINE de vidrio + variante outlined.
   --------------------------------------------------------------------------- */
.fi-btn.fi-color-gray {
  color: var(--cac-text);
  border-color: var(--cac-border-strong);
}
.fi-btn.fi-color-gray:hover {
  border-color: var(--cac-border-strong);
  color: var(--cac-text);
}

/* Variante explicitamente "outlined" de Filament -> vidrio muy ligero. */
.fi-btn.fi-btn-outlined {
  background-color: transparent;
  border-color: var(--cac-border-strong);
  box-shadow: none;
}
.fi-btn.fi-btn-outlined::before { opacity: 0; }
.fi-btn.fi-btn-outlined:hover {
  background-color: var(--cac-accent-softer);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-sm);
}

/* -----------------------------------------------------------------------------
   11.5) .fi-icon-btn  ·  BOTON DE ICONO (base; el topbar lo especializa en 7.3)
         Frost solo en :hover (1 activo a la vez -> coste despreciable).
   --------------------------------------------------------------------------- */
.fi-icon-btn {
  position: relative;
  border-radius: var(--cac-radius-sm);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--cac-text-muted);
  box-shadow: none;
  transition: var(--cac-transition);
}
.fi-icon-btn:hover {
  transform: var(--cac-lift-sm);
  color: var(--cac-accent-text);
  border-color: var(--cac-border);
  background-color: var(--cac-glass-fill-soft);
  box-shadow: var(--cac-shadow-sm);
}
.fi-icon-btn:active { transform: var(--cac-press); }
.fi-icon-btn:focus-visible {
  outline: none;
  color: var(--cac-accent-text);
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-icon-btn:hover {
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}

/* -----------------------------------------------------------------------------
   11.6) .fi-ac-btn  ·  BOTON DE ACCION (tablas/headers). Hereda estilo de .fi-btn.
   --------------------------------------------------------------------------- */
.fi-ac-btn {
  border-radius: var(--cac-radius-sm);
  transition: var(--cac-transition);
}
.fi-ac-btn:hover { transform: var(--cac-lift-sm); }
.fi-ac-btn:active { transform: var(--cac-press); }
.fi-ac-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* -----------------------------------------------------------------------------
   11.7) .fi-link  ·  ENLACE DE ACENTO (subrayado suave que crece en hover)
   --------------------------------------------------------------------------- */
.fi-link {
  position: relative;
  color: var(--cac-accent-text);
  border-radius: var(--cac-radius-xs);
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--cac-dur-fast) var(--cac-ease-standard),
              text-decoration-color var(--cac-dur-base) var(--cac-ease-out),
              box-shadow var(--cac-dur-base) var(--cac-ease-out);
}
.fi-link:hover {
  color: var(--cac-accent-strong);
  text-decoration-line: underline;
  text-decoration-color: var(--cac-accent-line);
}
html.dark .fi-link:hover {
  color: var(--cac-accent-bright);
}
.fi-link:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   11.8) .fi-badge  ·  PILDORAS TRANSLUCIDAS TEÑIDAS POR COLOR (sin backdrop-filter)
         En claro el texto usa el tono -700 para asegurar AA sobre el relleno
         translucido (.14); en oscuro el tono -400. Alta cardinalidad -> NO frost.
   --------------------------------------------------------------------------- */
.fi-badge {
  border-radius: var(--cac-radius-pill);
  border: 1px solid var(--cac-border);
  background-color: var(--cac-neutral-soft);
  color: var(--cac-text-muted);
  box-shadow: var(--cac-inset-sheen);
  transition: var(--cac-transition);
}

/* --- primary --- (usa --cac-accent-text: -700 en claro, -400 en oscuro) */
.fi-badge.fi-color-primary {
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  color: var(--cac-accent-text);
}
/* --- danger --- */
.fi-badge.fi-color-danger {
  background-color: rgba(var(--danger-500, 239, 68, 68), .14);
  border-color: rgba(var(--danger-500, 239, 68, 68), .38);
  color: rgb(var(--danger-700, 185, 28, 28));
}
html.dark .fi-badge.fi-color-danger { color: rgb(var(--danger-400, 248, 113, 113)); }
/* --- success --- */
.fi-badge.fi-color-success {
  background-color: rgba(var(--success-500, 34, 197, 94), .14);
  border-color: rgba(var(--success-500, 34, 197, 94), .38);
  color: rgb(var(--success-700, 21, 128, 61));
}
html.dark .fi-badge.fi-color-success { color: rgb(var(--success-400, 74, 222, 128)); }
/* --- warning --- */
.fi-badge.fi-color-warning {
  background-color: rgba(var(--warning-500, 245, 158, 11), .14);
  border-color: rgba(var(--warning-500, 245, 158, 11), .38);
  color: rgb(var(--warning-700, 180, 83, 9));
}
html.dark .fi-badge.fi-color-warning { color: rgb(var(--warning-400, 251, 191, 36)); }
/* --- info --- */
.fi-badge.fi-color-info {
  background-color: rgba(var(--info-500, 59, 130, 246), .14);
  border-color: rgba(var(--info-500, 59, 130, 246), .38);
  color: rgb(var(--info-700, 29, 78, 216));
}
html.dark .fi-badge.fi-color-info { color: rgb(var(--info-400, 96, 165, 250)); }
/* --- gray --- */
.fi-badge.fi-color-gray {
  background-color: var(--cac-neutral-soft);
  border-color: var(--cac-neutral-line);
  color: var(--cac-text-muted);
}

/* -----------------------------------------------------------------------------
   11.9) .fi-tabs + .fi-tabs-item  ·  PESTAÑAS PILL DE VIDRIO CON TAB ACTIVO ACENTO
   --------------------------------------------------------------------------- */
.fi-tabs {
  border-radius: var(--cac-radius-pill);
  border: 1px solid var(--cac-border);
  background-color: var(--cac-glass-solid);
  box-shadow: var(--cac-inset-sheen);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-tabs {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

.fi-tabs-item {
  position: relative;
  border-radius: var(--cac-radius-pill);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--cac-text-muted);
  transition: var(--cac-transition);
}
.fi-tabs-item:hover {
  color: var(--cac-text);
  background-color: var(--cac-accent-softer);
}
.fi-tabs-item:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}

/* Tab activo: vidrio teñido de acento + hairline indicador. Cubre .fi-active
   y el estado aria por robustez entre versiones de Filament. */
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
  color: var(--cac-accent-text);
  background-color: var(--cac-accent-soft);
  border-color: var(--cac-accent-line);
  box-shadow: var(--cac-shadow-sm), var(--cac-inset-sheen);
}
.fi-tabs-item.fi-active .fi-tabs-item-icon,
.fi-tabs-item[aria-selected="true"] .fi-tabs-item-icon {
  color: var(--cac-accent-text);
}


/* =============================================================================
   12) OVERLAYS + AUTH
       Modal, slide-over, dropdown, toasts, tooltip; login/registro y tenant.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   12.1) MODAL · BACKDROP (telon oscuro con blur)
   --------------------------------------------------------------------------- */
.fi-modal-close-overlay {
  background-color: rgba(9, 9, 11, .55);
  transition: background-color var(--cac-dur-slow) var(--cac-ease-out),
              -webkit-backdrop-filter var(--cac-dur-slow) var(--cac-ease-out),
              backdrop-filter var(--cac-dur-slow) var(--cac-ease-out);
}
html.dark .fi-modal-close-overlay {
  background-color: rgba(4, 4, 6, .62);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-modal-close-overlay {
    background-color: rgba(9, 9, 11, .38);
    -webkit-backdrop-filter: var(--cac-glass-filter-xl);
    backdrop-filter: var(--cac-glass-filter-xl);
  }
  html.dark .fi-modal-close-overlay {
    background-color: rgba(4, 4, 6, .46);
  }
}

/* -----------------------------------------------------------------------------
   12.2) MODAL · VENTANA (dialogo de vidrio grueso)
   --------------------------------------------------------------------------- */
.fi-modal-window {
  position: relative;
  background-color: var(--cac-glass-solid-strong); /* FALLBACK opaco legible   */
  border: 1px solid var(--cac-border-strong);
  border-radius: var(--cac-radius-xl);
  box-shadow: var(--cac-shadow-xl), var(--cac-inset-sheen);
  color: var(--cac-text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-modal-window {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-lg);
    backdrop-filter: var(--cac-glass-filter-lg);
  }
}

/* Sheen especular del borde superior del dialogo. */
.fi-modal-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  border-radius: var(--cac-radius-xl) var(--cac-radius-xl) 0 0;
  background: var(--cac-specular);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* El contenido del dialogo debe quedar SOBRE el sheen. */
.fi-modal-header,
.fi-modal-content,
.fi-modal-footer {
  position: relative;
  z-index: 1;
}

/* Cabecera: titulo nitido, descripcion atenuada, divisor sutil. */
.fi-modal-header {
  border-bottom: 1px solid var(--cac-border-soft);
}
.fi-modal-heading {
  color: var(--cac-text);
}
.fi-modal-description {
  color: var(--cac-text-muted);
}

/* Pie con acciones: divisor superior a juego. */
.fi-modal-footer {
  border-top: 1px solid var(--cac-border-soft);
}

/* Icono decorativo del modal: halo de acento suave. */
.fi-modal-icon {
  background-color: var(--cac-accent-soft);
  border: 1px solid var(--cac-accent-line);
  border-radius: var(--cac-radius-pill);
  color: var(--cac-accent-text);
}

/* Boton de cerrar: icono grafico legible (muted) que se tiñe al enfocar. */
.fi-modal-close-btn {
  border-radius: var(--cac-radius-sm);
  color: var(--cac-text-muted);
  transition: var(--cac-transition);
}
.fi-modal-close-btn:hover {
  background-color: var(--cac-accent-softer);
  color: var(--cac-accent-text);
}
.fi-modal-close-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   12.3) SLIDE-OVER (panel lateral de vidrio a toda altura)
   --------------------------------------------------------------------------- */
.fi-modal-slide-over-window {
  position: relative;
  background-color: var(--cac-glass-solid-strong); /* FALLBACK opaco legible   */
  border: 1px solid var(--cac-border-strong);
  border-radius: var(--cac-radius-xl) 0 0 var(--cac-radius-xl);
  box-shadow: var(--cac-shadow-xl), var(--cac-inset-sheen);
  color: var(--cac-text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-modal-slide-over-window {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-xl);
    backdrop-filter: var(--cac-glass-filter-xl);
  }
}

/* Sheen superior tambien en el slide-over. */
.fi-modal-slide-over-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  border-radius: var(--cac-radius-xl) 0 0 0;
  background: var(--cac-specular);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------------------------------------------------------
   12.4) DROPDOWN · PANEL + ITEMS (menus de vidrio con hover de acento)
         El panel flota sobre contenido arbitrario -> relleno FUERTE (mas opaco)
         para no competir con lo que hay debajo pese al blur.
   --------------------------------------------------------------------------- */
.fi-dropdown-panel {
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-md);
  box-shadow: var(--cac-shadow-lg), var(--cac-inset-sheen);
  color: var(--cac-text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-dropdown-panel {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

/* Encabezado de grupo dentro del menu. */
.fi-dropdown-header {
  color: var(--cac-text-muted);
  border-bottom: 1px solid var(--cac-border-soft);
}

/* Item de lista: base neutra + micro-interaccion en color/fondo. */
.fi-dropdown-list-item {
  border-radius: var(--cac-radius-sm);
  color: var(--cac-text);
  transition: background-color var(--cac-dur-fast) var(--cac-ease-standard),
              color var(--cac-dur-fast) var(--cac-ease-standard),
              box-shadow var(--cac-dur-base) var(--cac-ease-out);
}
.fi-dropdown-list-item:hover {
  background-color: var(--cac-accent-softer);
  color: var(--cac-accent-text);
}
.fi-dropdown-list-item:focus-visible {
  outline: none;
  background-color: var(--cac-accent-soft);
  color: var(--cac-accent-text);
  box-shadow: var(--cac-ring-soft);
}
.fi-dropdown-list-item:active {
  background-color: var(--cac-accent-soft);
}

/* Icono del item acompaña el tinte de acento al interactuar. */
.fi-dropdown-list-item:hover .fi-dropdown-list-item-icon,
.fi-dropdown-list-item:focus-visible .fi-dropdown-list-item-icon {
  color: var(--cac-accent-text);
}

/* -----------------------------------------------------------------------------
   12.5) NOTIFICACIONES / TOASTS (.fi-no-notification) de vidrio
   --------------------------------------------------------------------------- */
.fi-no-notification {
  position: relative;
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius-lg);
  box-shadow: var(--cac-shadow-lg), var(--cac-inset-sheen);
  color: var(--cac-text);
  transition: var(--cac-transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-no-notification {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-md);
    backdrop-filter: var(--cac-glass-filter-md);
  }
}

/* Ligera elevacion al pasar el cursor sobre el toast. */
.fi-no-notification:hover {
  transform: var(--cac-lift-sm);
  box-shadow: var(--cac-shadow-xl), var(--cac-inset-sheen);
  border-color: var(--cac-border-strong);
}

.fi-no-notification-title {
  color: var(--cac-text);
}
.fi-no-notification-body {
  color: var(--cac-text-muted);
}
.fi-no-notification-date {
  color: var(--cac-text-hint);
}

.fi-no-notification-close-btn {
  border-radius: var(--cac-radius-sm);
  color: var(--cac-text-muted);
  transition: var(--cac-transition);
}
.fi-no-notification-close-btn:hover {
  background-color: var(--cac-accent-softer);
  color: var(--cac-accent-text);
}
.fi-no-notification-close-btn:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
}

/* -----------------------------------------------------------------------------
   12.6) TOOLTIPS (Filament usa tippy.js -> .tippy-box)
         Texto corto e importante que flota sobre contenido impredecible: el
         material debe ser mas OPACO que el resto del vidrio (solid-strong) aun
         con blur, para garantizar AA sea cual sea el fondo.
   --------------------------------------------------------------------------- */
.tippy-box {
  background-color: var(--cac-glass-solid-strong); /* FALLBACK opaco legible   */
  border: 1px solid var(--cac-border-strong);
  border-radius: var(--cac-radius-sm);
  box-shadow: var(--cac-shadow-md), var(--cac-inset-sheen);
  color: var(--cac-text);
}
.tippy-box .tippy-content {
  color: var(--cac-text);
}
/* Flecha del tooltip a juego con el material. */
.tippy-box .tippy-arrow {
  color: var(--cac-glass-solid-strong);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tippy-box {
    background-color: var(--cac-glass-solid-strong); /* casi opaco + blur -> AA */
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
  .tippy-box .tippy-arrow {
    color: var(--cac-glass-solid-strong);
  }
}

/* -----------------------------------------------------------------------------
   12.7) AUTH · LOGIN / REGISTRO (tarjeta de vidrio centrada sobre la aurora)
   --------------------------------------------------------------------------- */
.fi-simple-main-ctn {
  background-color: transparent; /* deja ver la aurora tras la tarjeta         */
}

/* La TARJETA de login es `.fi-simple-main`, no `.fi-simple-page`.
 *
 * Filament trae el padding, el ancho máximo y el redondeado en `main`
 * (`px-6 py-12 sm:px-12 sm:rounded-xl`); `.fi-simple-page` es un div interior
 * SIN padding propio. Vestir de vidrio al div interior y dejar `main`
 * transparente pintaba dos tarjetas anidadas y dejaba el formulario pegado al
 * borde del vidrio. Se viste `main` y el div interior queda neutro. */
.fi-simple-main {
  position: relative;
  background-color: var(--cac-glass-solid-strong); /* FALLBACK opaco legible   */
  border: 1px solid var(--cac-border-strong);
  border-radius: var(--cac-radius-2xl);
  box-shadow: var(--cac-shadow-xl), var(--cac-inset-sheen);
  color: var(--cac-text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-simple-main {
    background-color: var(--cac-glass-fill-strong);
    -webkit-backdrop-filter: var(--cac-glass-filter-lg);
    backdrop-filter: var(--cac-glass-filter-lg);
  }
}

/* Reflejo especular superior de la tarjeta de login. */
.fi-simple-main::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  border-radius: var(--cac-radius-2xl) var(--cac-radius-2xl) 0 0;
  background: var(--cac-specular);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* Div interior: sin caja propia, solo por encima del reflejo. */
.fi-simple-page {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* -----------------------------------------------------------------------------
   12.7.b) LOGIN · ILUSTRACIÓN LATERAL (mapa con ruta y taxi)
   -----------------------------------------------------------------------------
   La ilustración se inyecta con el render hook SIMPLE_PAGE_START, así que entra
   como PRIMER hijo de .fi-simple-page, hermano del <section> que trae cabecera y
   formulario. Con eso, convertir .fi-simple-page en grilla de dos columnas basta
   para partir la tarjeta.

   Se usa :has() para que TODO esto aplique solo donde hay ilustración y no toque
   las demás pantallas del mismo layout (recuperar contraseña, verificación). Si
   el navegador no soporta :has(), la ilustración simplemente queda encima del
   formulario en una tarjeta angosta: se ve distinto, pero nunca roto.
   --------------------------------------------------------------------------- */

/* Móvil: la ilustración robaría el sitio del formulario. */
.cac-login-art { display: none; }

@media (min-width: 1024px) {
  .fi-simple-main:has(.cac-login-art) { max-width: 62rem; }

  /* Sin `gap` y con las dos columnas colocadas a mano.
   *
   * Filament deja dentro de .fi-simple-page varios <form> vacíos (los de sus
   * acciones Livewire). Con auto-colocación se iban a filas nuevas y cada una
   * sumaba su gap: 96 px de aire muerto bajo la tarjeta. Fijando a los tres
   * hijos en la MISMA celda, los invisibles dejan de ocupar. La separación va
   * por padding, que no se reparte entre hijos fantasma. */
  .fi-simple-page:has(.cac-login-art) {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
  }

  .fi-simple-page:has(.cac-login-art) > .cac-login-art { grid-area: 1 / 1; }
  .fi-simple-page:has(.cac-login-art) > section        { grid-area: 1 / 2; padding-inline-start: 3rem; }
  .fi-simple-page:has(.cac-login-art) > form           { grid-area: 1 / 1; }

  .cac-login-art {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Separador de vidrio entre ilustración y formulario. */
    padding-inline-end: 2.5rem;
    border-inline-end: 1px solid var(--cac-border);
  }

  .cac-login-art svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
}

.cac-login-art-title {
  color: var(--cac-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.cac-login-art-subtitle {
  color: var(--cac-text-muted);
  font-size: .85rem;
  line-height: 1.5;
  margin: .35rem 0 0;
}

/* ── Piezas del mapa ─────────────────────────────────────────────────── */

.cac-art-blocks rect {
  fill: rgb(var(--primary-400));
  opacity: .07;
}

.cac-art-streets path {
  fill: none;
  stroke: var(--cac-border-strong);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .3;
}

.cac-art-route-ghost {
  fill: none;
  stroke: rgb(var(--primary-500));
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .2;
}

/* El trazo se dibuja de la recogida al destino, en bucle. `pathLength` no se
   puede asumir, así que el dash se define largo y se desplaza. */
.cac-art-route {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgb(var(--primary-500) / .55));
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: cacRouteDraw 9s ease-in-out infinite;
}

@keyframes cacRouteDraw {
  0%        { stroke-dashoffset: 460; }
  70%, 82%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: -460; }
}

/* ── Pines ───────────────────────────────────────────────────────────── */

.cac-art-pin-ring {
  fill: var(--cac-glass-solid-strong);
  stroke: rgb(var(--primary-400));
  stroke-width: 2.5;
}

.cac-art-pin-dot,
.cac-art-pin-flag {
  fill: rgb(var(--primary-400));
}

.cac-art-pin-halo {
  animation: cacPinPulse 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.cac-art-pin--end .cac-art-pin-halo { animation-delay: 1.7s; }

@keyframes cacPinPulse {
  0%, 100% { transform: scale(.85); opacity: .55; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ── Taxi ────────────────────────────────────────────────────────────── */

/* El taxi cruza por encima de la ruta, que es del mismo color: sin el borde
   oscuro las dos formas se funden y el carro desaparece justo al pasar. */
.cac-art-car-body {
  fill: rgb(var(--primary-500));
  stroke: rgba(0, 0, 0, .45);
  stroke-width: 1.5;
}
.cac-art-car-glass { fill: rgba(255, 255, 255, .78); }
.cac-art-car-sign  { fill: #fff; }

.cac-art-car {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

/* El recorrido repite la `d` de #cacRoute: SVG no permite referenciar un path
   desde offset-path, así que si se cambia la curva hay que cambiarla en los DOS
   sitios (aquí y en el <defs> de login-art.blade.php).
 *
 * `transform: none` es imprescindible: el <g> trae transform="translate(88 330)"
 * como atributo para que el taxi quede sobre el punto de recogida cuando el
 * navegador NO soporta offset-path. Si soporta, ese desplazamiento se SUMA al
 * de la ruta y el taxi acaba fuera del mapa. */
@supports (offset-path: path("M 0 0 L 1 1")) {
  .cac-art-car {
    transform: none;
    offset-path: path("M 88 330 C 88 262, 150 250, 196 250 C 250 250, 262 196, 262 150 C 262 108, 300 96, 356 96");
    offset-rotate: auto;
    offset-distance: 0%;
    animation: cacCarDrive 9s ease-in-out infinite;
  }
}

@keyframes cacCarDrive {
  0%        { offset-distance: 0%;  opacity: 0; }
  6%        { offset-distance: 0%;  opacity: 1; }
  70%       { offset-distance: 96%; opacity: 1; }
  82%, 100% { offset-distance: 96%; opacity: 0; }
}

/* Accesibilidad: sin movimiento, la escena se queda quieta y completa —ruta
   dibujada y taxi en el destino—, no a medias. */
@media (prefers-reduced-motion: reduce) {
  .cac-art-route  { animation: none; stroke-dashoffset: 0; }
  .cac-art-car    { animation: none; offset-distance: 100%; }
  .cac-art-pin-halo { animation: none; }
}

/* Encabezado y contenido del login por encima del sheen. */
.fi-simple-header {
  position: relative;
  z-index: 1;
}
.fi-simple-page > .fi-form,
.fi-simple-page > form {
  position: relative;
  z-index: 1;
}

.fi-simple-header-heading {
  color: var(--cac-text);
}
.fi-simple-header-subheading {
  color: var(--cac-text-muted);
}

/* -----------------------------------------------------------------------------
   12.8) SWITCHER DE TENANT (empresa) — .fi-tenant-menu-trigger
   --------------------------------------------------------------------------- */
.fi-tenant-menu-trigger {
  border-radius: var(--cac-radius-pill);
  border: 1px solid var(--cac-border);
  background-color: var(--cac-glass-solid); /* FALLBACK opaco legible          */
  color: var(--cac-text);
  box-shadow: var(--cac-shadow-sm);
  transition: var(--cac-transition);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fi-tenant-menu-trigger {
    background-color: var(--cac-glass-fill);
    -webkit-backdrop-filter: var(--cac-glass-filter-sm);
    backdrop-filter: var(--cac-glass-filter-sm);
  }
}
.fi-tenant-menu-trigger:hover {
  background-color: var(--cac-glass-fill-hover);
  border-color: var(--cac-border-strong);
  box-shadow: var(--cac-shadow-md), var(--cac-shadow-glow);
}
.fi-tenant-menu-trigger:focus-visible {
  outline: none;
  box-shadow: var(--cac-ring);
  border-color: var(--cac-accent-line);
}
.fi-tenant-avatar {
  border-radius: var(--cac-radius-pill);
  border: 1px solid var(--cac-border-strong);
}


/* =============================================================================
   13) ACCESIBILIDAD  ·  forced-colors  +  prefers-reduced-motion  (BLOQUE FINAL)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   13.1) FORCED-COLORS (Windows High Contrast / contraste forzado)
         En este modo los box-shadow se DESCARTAN; como el foco se dibuja con
         box-shadow tras 'outline:none', el elemento enfocado quedaria SIN
         indicador. Se restituye un outline solido con el color del sistema
         (Highlight) para NO perder la navegacion por teclado. Mismo/mayor
         especificidad que cada regla base para ganar al 'outline:none'.
   --------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .cac-focusable:focus-visible,
  .fi-sidebar-item-button:focus-visible,
  .fi-topbar .fi-icon-btn:focus-visible,
  .fi-breadcrumbs-item a.fi-breadcrumbs-item-label:focus-visible,
  .fi-global-search .fi-input-wrp:focus-within,
  .fi-user-menu .fi-dropdown-trigger > button:focus-visible,
  .fi-theme-switcher-btn:focus-visible,
  .fi-wi-stats-overview-stat:focus-visible,
  .fi-ta-header-cell button:focus-visible,
  .fi-ta-header-cell a:focus-visible,
  .fi-ta-cell a:focus-visible,
  .fi-ta-cell button:focus-visible,
  .fi-pagination .fi-btn:focus-visible,
  .fi-pagination .fi-pagination-item button:focus-visible,
  .fi-pagination .fi-pagination-item a:focus-visible,
  .fi-input-wrp:focus-within,
  .fi-fo-toggle button:focus-visible,
  .fi-fo-toggle [role="switch"]:focus-visible,
  .fi-checkbox-input:focus-visible,
  .fi-radio-input:focus-visible,
  .fi-fo-wizard-header-step:focus-visible,
  .fi-fo-file-upload .filepond--browser:focus-visible,
  .fi-fo-file-upload .filepond--credits:focus-visible,
  .fi-btn:focus-visible,
  .fi-btn.fi-color-primary:focus-visible,
  .fi-btn.fi-color-danger:focus-visible,
  .fi-icon-btn:focus-visible,
  .fi-ac-btn:focus-visible,
  .fi-link:focus-visible,
  .fi-tabs-item:focus-visible,
  .fi-modal-close-btn:focus-visible,
  .fi-dropdown-list-item:focus-visible,
  .fi-no-notification-close-btn:focus-visible,
  .fi-tenant-menu-trigger:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* -----------------------------------------------------------------------------
   13.2) prefers-reduced-motion
         Congela la aurora y neutraliza TODAS las transiciones y micro-interacciones
         (elevacion/escala/rebote/presion). NO toca contraste ni anillos de foco:
         no dependen del movimiento. Los materiales de vidrio permanecen; solo se
         detiene el movimiento.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  /* Aurora ambiental: detener animacion y fijar posicion. */
  body.fi-body::before,
  body.fi-body::after {
    animation: none;
    transform: none;
  }

  /* Anular TODAS las transiciones declaradas por el tema. */
  body.fi-body,
  .cac-glass,
  .cac-glass-strong,
  .cac-glass-soft,
  .fi-sidebar,
  .fi-sidebar-header,
  .fi-sidebar-item-button,
  .fi-sidebar-item-button .fi-sidebar-item-icon,
  .fi-sidebar-item-button .fi-icon,
  .fi-topbar nav,
  .fi-topbar .fi-icon-btn,
  .fi-global-search .fi-input-wrp,
  .fi-global-search .fi-input-wrp-icon,
  .fi-user-menu .fi-dropdown-trigger,
  .fi-user-menu .fi-dropdown-trigger > button,
  .fi-theme-switcher-btn,
  .fi-breadcrumbs-item-label,
  .fi-page,
  .fi-section,
  .fi-wi,
  .fi-wi-stats-overview-stat,
  .fi-ta-ctn,
  .fi-ta-row,
  .fi-ta-header-cell,
  .fi-ta-filters,
  .fi-pagination .fi-btn,
  .fi-pagination .fi-pagination-item button,
  .fi-pagination .fi-pagination-item a,
  .fi-input-wrp,
  .fi-input,
  .fi-select-input,
  .fi-fo-toggle,
  .fi-fo-toggle button,
  .fi-fo-toggle [role="switch"],
  .fi-checkbox-input,
  .fi-radio-input,
  .fi-fieldset,
  .fi-fo-wizard,
  .fi-fo-wizard-header-step,
  .fi-fo-wizard-header-step-icon-ctn,
  .fi-fo-file-upload .filepond--panel-root,
  .fi-fo-file-upload .filepond--drop-label,
  .fi-btn,
  .fi-icon-btn,
  .fi-ac-btn,
  .fi-link,
  .fi-badge,
  .fi-tabs,
  .fi-tabs-item,
  .fi-modal-close-overlay,
  .fi-modal-close-btn,
  .fi-dropdown-list-item,
  .fi-no-notification,
  .fi-no-notification-close-btn,
  .fi-tenant-menu-trigger {
    transition: none;
  }

  /* Anular TODOS los transforms de hover/active/estado (elevacion, rebote,
     presion y escala de iconos). */
  .cac-interactive:hover,
  .cac-interactive:active,
  .fi-sidebar-item-button:hover,
  .fi-sidebar-item-button:active,
  .fi-sidebar-collapsed .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
  .fi-sidebar-collapsed .fi-sidebar-item-button:hover .fi-icon,
  .fi-topbar .fi-icon-btn:hover,
  .fi-topbar .fi-icon-btn:active,
  .fi-user-menu .fi-dropdown-trigger > button:hover,
  .fi-user-menu .fi-dropdown-trigger > button:active,
  .fi-theme-switcher-btn:active,
  .fi-section:hover,
  .fi-wi-stats-overview-stat:hover,
  .fi-wi-stats-overview-stat:active,
  .fi-ta-row:hover,
  .fi-pagination .fi-btn:hover,
  .fi-pagination .fi-btn:active,
  .fi-pagination .fi-pagination-item button:hover,
  .fi-pagination .fi-pagination-item button:active,
  .fi-pagination .fi-pagination-item a:hover,
  .fi-btn:hover,
  .fi-btn:active,
  .fi-btn.fi-color-primary:active,
  .fi-btn.fi-color-danger:active,
  .fi-icon-btn:hover,
  .fi-icon-btn:active,
  .fi-ac-btn:hover,
  .fi-ac-btn:active,
  .fi-no-notification:hover,
  .fi-tenant-menu-trigger:hover {
    transform: none;
  }
}

/* =============================================================================
   FIN · CAC Transporte — Tema Glass. INTOCABLES: #cac-splash y
   .sos-alert-active-row no se estilan en esta hoja (los gestiona su propio JS/CSS).
   ========================================================================== */