/* =============================================================================================================
   COMPONENTES · sistema de diseño "Liquid Glass"
   Usa solo variables de tokens.css. Bootstrap aporta la grilla, las utilidades y los nombres de clase de los
   campos de formulario; todo lo demás es propio. Sin estilos inline en las plantillas (compatible con CSP estricta).
   Rendimiento: el desenfoque (backdrop-filter) se aplica a contenedores, nunca a filas de tabla.
   ============================================================================================================= */

/* ---------------------------------------------- Base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--fondo-base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: var(--tam-base);
  line-height: var(--interlineado);
  color: var(--texto);
  background: transparent;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--acento-suave); }
h1, h2, h3, h4 { color: var(--texto); font-weight: var(--peso-fuerte); letter-spacing: -0.012em; line-height: 1.25; margin: 0 0 var(--esp-3); }
h1 { font-size: var(--tam-xl); }
h2 { font-size: var(--tam-l); }
h3 { font-size: var(--tam-m); }
p { margin: 0 0 var(--esp-3); }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--mov-rapido) var(--curva); }
a:hover { color: var(--acento-hover); }
code, .codigo { color: var(--texto); font-family: var(--fuente-mono); font-size: 0.86em; background: var(--neutro-fondo); padding: 0.1em 0.4em; border-radius: 6px; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--linea); margin: var(--esp-4) 0; opacity: 1; }
.num, .imp { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tenue, .text-muted { color: var(--texto-tenue) !important; }
.suave { color: var(--texto-suave); }
.chico { font-size: var(--tam-s); }
.minimo { font-size: var(--tam-xs); }
.fuerte { font-weight: var(--peso-fuerte); }

/* Foco visible y navegación por teclado */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.saltar { position: absolute; left: var(--esp-3); top: -4rem; z-index: var(--z-aviso); padding: var(--esp-2) var(--esp-4); border-radius: var(--radio-pildora); background: var(--acento); color: var(--texto-sobre-acento); font-weight: var(--peso-medio); text-decoration: none; transition: top var(--mov) var(--curva); }
.saltar:focus { top: var(--esp-3); color: var(--texto-sobre-acento); }

/* Fondo con degradados y formas difusas */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58rem 38rem at 6% -8%, var(--mancha-1), transparent 62%),
    radial-gradient(48rem 34rem at 104% 4%, var(--mancha-2), transparent 62%),
    radial-gradient(52rem 40rem at 72% 112%, var(--mancha-3), transparent 62%),
    var(--fondo-base);
}

/* ---------------------------------------------- Vidrio ---------------------------------------------- */
.vidrio, .tarjeta, .dato, .nav-flotante, .menu-panel, .ayuda-pop, .aviso-flotante, .dialogo-caja,
.tabla-panel, .pestanas-panel, .zona-carga, .paleta-caja, .traza-resumen, .paso-caja {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vidrio-brillo) 30%, transparent), transparent 45%), var(--vidrio);
  -webkit-backdrop-filter: blur(var(--desenfoque)) saturate(var(--saturacion));
  backdrop-filter: blur(var(--desenfoque)) saturate(var(--saturacion));
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-m), inset 0 1px 0 var(--vidrio-brillo);
}
.vidrio--fuerte, .nav-flotante, .menu-panel, .ayuda-pop, .dialogo-caja, .paleta-caja, .aviso-flotante {
  background: linear-gradient(180deg, color-mix(in srgb, var(--vidrio-brillo) 24%, transparent), transparent 45%), var(--vidrio-fuerte);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio, .tarjeta, .dato, .nav-flotante, .menu-panel, .ayuda-pop, .aviso-flotante, .dialogo-caja,
  .tabla-panel, .pestanas-panel, .zona-carga, .paleta-caja, .traza-resumen, .paso-caja { background: var(--solido); }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio, .tarjeta, .dato, .nav-flotante, .menu-panel, .ayuda-pop, .aviso-flotante, .dialogo-caja,
  .tabla-panel, .pestanas-panel, .zona-carga, .paleta-caja, .traza-resumen, .paso-caja {
    background: var(--solido); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--linea-fuerte);
  }
  .fondo { background: var(--fondo-base); }
}
@media (forced-colors: active) {
  .vidrio, .tarjeta, .dato, .nav-flotante, .menu-panel, .ayuda-pop, .aviso-flotante, .dialogo-caja,
  .tabla-panel, .pestanas-panel, .zona-carga, .paleta-caja { border: 1px solid CanvasText; background: Canvas; }
}

/* ---------------------------------------------- Íconos ---------------------------------------------- */
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em; }
.icono--s { width: 1em; height: 1em; }
.icono--l { width: 1.6em; height: 1.6em; }

/* ---------------------------------------------- Maquetación ---------------------------------------------- */
.contenedor { width: min(100% - 2 * var(--margen-pagina), var(--ancho-contenido)); margin-inline: auto; }
.principal { padding-block: var(--esp-5) var(--esp-7); }
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3) var(--esp-5); margin-bottom: var(--esp-5); }
.cabecera h1 { margin: 0; font-size: var(--tam-xl); }
.cabecera .sub { margin: var(--esp-1) 0 0; color: var(--texto-suave); max-width: 62ch; }
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.seccion { margin-top: var(--esp-6); }
.seccion > h2 { font-size: var(--tam-m); display: flex; align-items: center; gap: var(--esp-2); }
.rejilla-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: var(--esp-4); }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--esp-4); }
.apilado > * + * { margin-top: var(--esp-4); }

.migas { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); margin: 0 0 var(--esp-3); padding: 0; font-size: var(--tam-s); color: var(--texto-tenue); }
.migas li + li::before { content: "›"; margin-right: var(--esp-2); color: var(--texto-tenue); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }
.migas [aria-current] { color: var(--texto); font-weight: var(--peso-medio); }

/* ---------------------------------------------- Navegación flotante ---------------------------------------------- */
.nav-envoltura { position: sticky; top: var(--hueco-nav); z-index: var(--z-nav); padding-top: var(--hueco-nav); }
.nav-flotante { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--alto-nav); padding: 0.375rem 0.5rem 0.375rem 0.75rem; border-radius: var(--radio-xl); }
.nav-marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: var(--peso-fuerte); color: var(--texto); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; padding-right: var(--esp-2); }
.nav-marca:hover { color: var(--texto); }
.nav-logo { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.75rem; background: linear-gradient(145deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #7c4dff)); color: var(--texto-sobre-acento); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 10px -3px color-mix(in srgb, var(--acento) 60%, transparent); }
.nav-marca-texto { display: none; }
.nav-lista { display: none; list-style: none; margin: 0; padding: 0; gap: 2px; flex: 1; min-width: 0; align-items: center; }
.nav-enlace { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border-radius: var(--radio-pildora); color: var(--texto-suave); text-decoration: none; font-size: var(--tam-s); font-weight: var(--peso-medio); white-space: nowrap; transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva); }
.nav-enlace:hover { background: var(--neutro-fondo); color: var(--texto); }
.nav-enlace[aria-current="page"] { background: var(--acento-suave); color: var(--acento-texto); }
.nav-enlace .nav-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-acciones { display: flex; align-items: center; gap: var(--esp-1); margin-left: auto; }
.chip-periodo { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: var(--radio-pildora); background: var(--neutro-fondo); color: var(--texto); font-size: var(--tam-s); font-weight: var(--peso-medio); text-decoration: none; white-space: nowrap; }
.chip-periodo:hover { background: var(--acento-suave); color: var(--acento-texto); }
.nav-toggle { display: inline-grid; }
.menu-movil { display: none; }
.menu-movil.abierto { display: block; margin-top: var(--esp-2); }
.menu-movil .nav-lista { display: grid; gap: 2px; padding: var(--esp-2); }
.menu-movil .nav-enlace { padding: 0.65rem 0.9rem; font-size: var(--tam-base); border-radius: var(--radio-m); }
.menu-movil .nav-enlace .nav-texto { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
@media (min-width: 992px) {
  .nav-lista { display: flex; }
  .nav-toggle, .menu-movil { display: none !important; }
}
@media (min-width: 1200px) {
  .nav-enlace .nav-texto { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .nav-enlace { padding: 0.45rem 0.7rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) { .nav-marca-texto { display: inline; } }
@media (min-width: 1500px) { .nav-marca-texto { display: inline; } }
@media (max-width: 575.98px) { .chip-periodo .texto-chip { display: none; } .nav-flotante { padding-left: 0.5rem; gap: 0; } .nav-marca { padding-right: 0; } }

.menu { position: relative; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: var(--z-menu); min-width: 14rem; padding: var(--esp-2); border-radius: var(--radio-l); }
.menu-panel a, .menu-panel button { display: flex; width: 100%; align-items: center; gap: var(--esp-2); padding: 0.55rem 0.75rem; border: 0; background: none; border-radius: var(--radio-m); color: var(--texto); font: inherit; font-size: var(--tam-s); text-align: left; text-decoration: none; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--neutro-fondo); color: var(--texto); }
.menu-panel .menu-cabecera { padding: 0.4rem 0.75rem 0.6rem; font-size: var(--tam-xs); color: var(--texto-tenue); border-bottom: 1px solid var(--linea); margin-bottom: var(--esp-1); }
.menu-panel form { margin: 0; }

/* ---------------------------------------------- Botones ---------------------------------------------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.5rem 1.1rem; min-height: 2.4rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-pildora); background: var(--vidrio-fuerte); color: var(--texto); font: inherit; font-size: var(--tam-s); font-weight: var(--peso-medio); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--sombra-s), inset 0 1px 0 var(--vidrio-brillo); transition: background var(--mov-rapido) var(--curva), border-color var(--mov-rapido) var(--curva), transform var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva); -webkit-tap-highlight-color: transparent; }
.boton:hover { background: var(--solido-2); color: var(--texto); border-color: var(--linea-fuerte); }
.boton:active { transform: translateY(1px) scale(0.99); }
.boton--primario { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 86%, #fff), var(--acento)); border-color: var(--acento); color: var(--texto-sobre-acento); }
.boton--primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: var(--texto-sobre-acento); }
.boton--peligro { border-color: var(--error); color: var(--error); background: var(--error-fondo); }
.boton--peligro:hover { background: var(--error); color: var(--texto-sobre-acento); border-color: var(--error); }
.boton--aviso { border-color: var(--aviso); color: var(--aviso); background: var(--aviso-fondo); }
.boton--aviso:hover { background: var(--aviso); color: var(--texto-sobre-acento); border-color: var(--aviso); }
.boton--fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-suave); }
.boton--fantasma:hover { background: var(--neutro-fondo); color: var(--texto); border-color: transparent; }
.boton--s { min-height: 2rem; padding: 0.3rem 0.8rem; font-size: var(--tam-xs); }
.boton--icono { width: 2.4rem; padding: 0; }
.boton--icono.boton--s { width: 2rem; }
.boton--bloque { width: 100%; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

/* ---------------------------------------------- Campos ---------------------------------------------- */
.form-label { display: flex; align-items: center; gap: 0.35rem; font-size: var(--tam-s); font-weight: var(--peso-medio); color: var(--texto-suave); margin-bottom: 0.3rem; }
.form-control, .form-select { display: block; width: 100%; min-height: 2.5rem; padding: 0.5rem 0.85rem; font: inherit; font-size: var(--tam-base); color: var(--texto); background-color: var(--solido); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-m); box-shadow: inset 0 1px 2px rgba(20, 40, 80, 0.06); transition: border-color var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva); }
textarea.form-control { min-height: 4.5rem; resize: vertical; }
.form-control::placeholder { color: var(--texto-tenue); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--texto-tenue); }
.form-control:focus, .form-select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); outline: none; background-color: var(--solido); color: var(--texto); }
.form-control:focus-visible, .form-select:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }
.form-select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%), linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.form-control-sm, .form-select-sm { min-height: 2.1rem; padding: 0.3rem 0.7rem; font-size: var(--tam-s); border-radius: var(--radio-s); }
.form-control[type="date"] { font-variant-numeric: tabular-nums; }
.form-control[type="file"] { padding: 0.4rem; }
.form-check-input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--acento); vertical-align: middle; }
.form-check { display: flex; align-items: center; gap: var(--esp-2); }
.form-check-label { font-size: var(--tam-s); color: var(--texto-suave); }
.form-text, .campo-ayuda { font-size: var(--tam-xs); color: var(--texto-tenue); margin-top: 0.3rem; }
.campo-error { font-size: var(--tam-s); color: var(--error); margin-top: 0.3rem; font-weight: var(--peso-medio); }
.campo { margin-bottom: var(--esp-4); }
.campo--check { margin-bottom: var(--esp-3); }
.formulario { max-width: 46rem; padding: var(--esp-5); }
.formulario-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--esp-4); }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); }
.filtros .campo { margin: 0; min-width: 8rem; }
.filtros .campo--ancho { flex: 1 1 14rem; }
.buscador { position: relative; }
.buscador .icono { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); pointer-events: none; }
.buscador .form-control { padding-left: 2.3rem; }

/* ---------------------------------------------- Etiquetas de estado ---------------------------------------------- */
.etiqueta { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.6rem; border-radius: var(--radio-pildora); background: var(--neutro-fondo); color: var(--texto-suave); font-size: var(--tam-xs); font-weight: var(--peso-fuerte); line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.etiqueta--punto::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.etiqueta--ok { background: var(--ok-fondo); color: var(--ok); }
.etiqueta--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta--prov { background: var(--prov-fondo); color: var(--prov); }
.etiqueta--error { background: var(--error-fondo); color: var(--error); }
.etiqueta--info { background: var(--acento-suave); color: var(--acento-texto); }
.contador { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem; border-radius: var(--radio-pildora); background: var(--neutro-fondo); color: var(--texto-suave); font-size: var(--tam-xs); font-weight: var(--peso-fuerte); }
.contador--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.contador--prov { background: var(--prov-fondo); color: var(--prov); }
.contador--error { background: var(--error-fondo); color: var(--error); }

/* ---------------------------------------------- Alertas ---------------------------------------------- */
.alerta { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); border-radius: var(--radio-m); border: 1px solid transparent; background: var(--acento-suave); color: var(--texto); border-color: color-mix(in srgb, var(--acento) 28%, transparent); font-size: var(--tam-s); }
.alerta .icono { color: var(--acento); margin-top: 0.1rem; }
.alerta > div { flex: 1; min-width: 0; }
.alerta--ok { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alerta--ok .icono { color: var(--ok); }
.alerta--aviso { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 32%, transparent); }
.alerta--aviso .icono { color: var(--aviso); }
.alerta--prov { background: var(--prov-fondo); border-color: color-mix(in srgb, var(--prov) 30%, transparent); }
.alerta--prov .icono { color: var(--prov); }
.alerta--error { background: var(--error-fondo); border-color: color-mix(in srgb, var(--error) 32%, transparent); }
.alerta--error .icono { color: var(--error); }
.alerta--demo { border-style: dashed; margin-bottom: var(--esp-4); }
.alerta-lista { margin: var(--esp-1) 0 0; padding-left: 1.1rem; }

/* ---------------------------------------------- Tarjetas y datos ---------------------------------------------- */
.tarjeta { padding: var(--esp-5); }
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-bottom: var(--esp-3); }
.tarjeta--enlace { display: block; color: inherit; text-decoration: none; transition: transform var(--mov) var(--curva), box-shadow var(--mov) var(--curva); }
.tarjeta--enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-l), inset 0 1px 0 var(--vidrio-brillo); color: inherit; }
.dato { padding: var(--esp-4) var(--esp-5); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.dato-etiqueta { display: flex; align-items: center; gap: 0.4rem; font-size: var(--tam-s); font-weight: var(--peso-medio); color: var(--texto-suave); }
.dato-valor { font-size: var(--tam-xxl); font-weight: var(--peso-fuerte); letter-spacing: -0.02em; line-height: 1.15; }
.dato-valor--m { font-size: var(--tam-xl); }
.dato-pie { font-size: var(--tam-s); color: var(--texto-tenue); }
.dato--ok .dato-valor { color: var(--ok); }
.dato--aviso .dato-valor { color: var(--aviso); }
.dato--prov .dato-valor { color: var(--prov); }
.dato--error .dato-valor { color: var(--error); }
.lista-clave { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem var(--esp-4); margin: 0; font-size: var(--tam-s); }
.lista-clave dt { color: var(--texto-tenue); font-weight: var(--peso-medio); }
.lista-clave dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
progress.barra { width: 100%; height: 0.5rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--radio-pildora); background: var(--neutro-fondo); overflow: hidden; }
progress.barra::-webkit-progress-bar { background: var(--neutro-fondo); }
progress.barra::-webkit-progress-value { background: var(--acento); border-radius: var(--radio-pildora); }
progress.barra::-moz-progress-bar { background: var(--acento); border-radius: var(--radio-pildora); }
progress.barra--prov::-webkit-progress-value { background: var(--prov); }
progress.barra--prov::-moz-progress-bar { background: var(--prov); }
progress.barra--error::-webkit-progress-value { background: var(--error); }
progress.barra--error::-moz-progress-bar { background: var(--error); }

/* ---------------------------------------------- Tablas ---------------------------------------------- */
.tabla-panel { overflow: hidden; padding: 0; }
.tabla-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linea); }
.tabla-barra h2, .tabla-barra h3 { margin: 0; font-size: var(--tam-m); }
.tabla-barra .tabla-herramientas { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.tabla-scroll { overflow: auto; max-height: min(72vh, 52rem); }
.tabla-scroll--libre { max-height: none; }
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--tam-s); font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 0.55rem 0.85rem; vertical-align: middle; border-bottom: 1px solid var(--linea); text-align: left; background: transparent; color: var(--texto); }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla thead th { position: sticky; top: 0; z-index: var(--z-tabla-encabezado); background: var(--solido-2); color: var(--texto-suave); font-size: var(--tam-xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; border-bottom: 1px solid var(--linea-fuerte); }
.tabla tbody tr { transition: background var(--mov-rapido) var(--curva); }
.tabla tbody tr:hover { background: var(--neutro-fondo); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot th, .tabla tfoot td { background: var(--solido-2); font-weight: var(--peso-fuerte); border-top: 1px solid var(--linea-fuerte); border-bottom: 0; }
.tabla .fila-error { background: var(--error-fondo); box-shadow: inset 3px 0 0 var(--error); }
.tabla .fila-aviso { background: var(--aviso-fondo); box-shadow: inset 3px 0 0 var(--aviso); }
.tabla .fila-prov { background: var(--prov-fondo); box-shadow: inset 3px 0 0 var(--prov); }
.tabla .fila-tenue td { color: var(--texto-tenue); }
.tabla .fila-total td, .tabla .fila-total th { font-weight: var(--peso-fuerte); background: var(--solido-2); }
.tabla .fila-actual { box-shadow: inset 3px 0 0 var(--acento); background: var(--acento-suave); }
.tabla .diferencia { font-weight: var(--peso-fuerte); color: var(--error); }
.tabla .diferencia--tolerancia { color: var(--aviso); }
.tabla .celda-acciones { text-align: right; white-space: nowrap; }
.tabla .nota { display: block; font-size: var(--tam-xs); color: var(--texto-tenue); }
.th-orden { cursor: pointer; user-select: none; }
.th-orden::after { content: "↕"; margin-left: 0.35rem; opacity: 0.45; font-size: 0.9em; }
.th-orden[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--acento); }
.th-orden[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--acento); }
.th-orden button { all: unset; cursor: pointer; }
.th-orden button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.tabla-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--linea); font-size: var(--tam-s); color: var(--texto-tenue); }

/* Pantallas chicas: cada fila es una tarjeta (las celdas llevan data-etiqueta) */
@media (max-width: 767.98px) {
  .tabla-scroll { max-height: none; overflow: visible; }
  table.tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
  .tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla--tarjetas tbody tr { margin: var(--esp-3); width: auto; padding: var(--esp-2) 0; border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--solido); }
  .tabla--tarjetas tbody tr:hover { background: var(--solido); }
  .tabla--tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-4); padding: 0.35rem var(--esp-4); border: 0; text-align: right; }
  .tabla--tarjetas td::before { content: attr(data-etiqueta); flex: none; max-width: 45%; text-align: left; font-size: var(--tam-xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-tenue); }
  .tabla--tarjetas td.celda-acciones { justify-content: flex-end; }
  .tabla--tarjetas td[colspan] { display: block; text-align: left; }
  .tabla--tarjetas td[colspan]::before { content: none; }
  .tabla--tarjetas tfoot, .tabla--tarjetas tfoot tr { display: block; }
}

/* ---------------------------------------------- Pestañas ---------------------------------------------- */
.pestanas-lista { display: flex; gap: var(--esp-1); padding: 0.3rem; margin-bottom: var(--esp-4); overflow-x: auto; scrollbar-width: thin; background: var(--neutro-fondo); border-radius: var(--radio-pildora); width: fit-content; max-width: 100%; }
.pestana { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border-radius: var(--radio-pildora); color: var(--texto-suave); font-size: var(--tam-s); font-weight: var(--peso-medio); text-decoration: none; white-space: nowrap; transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva); }
.pestana:hover { color: var(--texto); background: var(--neutro-fondo); }
.pestana[aria-selected="true"] { background: var(--solido); color: var(--texto); box-shadow: var(--sombra-s), inset 0 1px 0 var(--vidrio-brillo); }
.pestanas-panel { padding: var(--esp-5); }
.pestanas-panel:focus-visible { outline-offset: 4px; border-radius: var(--radio-l); }

/* ---------------------------------------------- Esqueletos y estados vacíos ---------------------------------------------- */
.esqueleto { display: grid; gap: var(--esp-3); }
.esqueleto-linea { height: 0.9rem; border-radius: var(--radio-pildora); background: linear-gradient(90deg, var(--neutro-fondo) 25%, var(--solido-3) 50%, var(--neutro-fondo) 75%); background-size: 200% 100%; animation: brillo-esqueleto 1.4s linear infinite; }
.esqueleto-linea:nth-child(3n) { width: 70%; }
.esqueleto-linea:nth-child(3n+1) { width: 92%; }
@keyframes brillo-esqueleto { to { background-position: -200% 0; } }
.htmx-indicator { opacity: 0; transition: opacity var(--mov) var(--curva); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.cargando { position: relative; opacity: 0.55; pointer-events: none; transition: opacity var(--mov) var(--curva); }
.vacio { display: grid; justify-items: center; gap: var(--esp-2); text-align: center; padding: var(--esp-7) var(--esp-5); color: var(--texto-suave); }
.vacio .icono { width: 2.6rem; height: 2.6rem; color: var(--texto-tenue); stroke-width: 1.4; }
.vacio h3 { margin: 0; font-size: var(--tam-m); color: var(--texto); }
.vacio p { margin: 0; max-width: 44ch; font-size: var(--tam-s); }

/* ---------------------------------------------- Paginación ---------------------------------------------- */
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-1); list-style: none; padding: 0; margin: var(--esp-4) 0 0; }
.paginacion a, .paginacion span { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.7rem; border-radius: var(--radio-pildora); font-size: var(--tam-s); font-weight: var(--peso-medio); color: var(--texto-suave); text-decoration: none; }
.paginacion a:hover { background: var(--neutro-fondo); color: var(--texto); }
.paginacion [aria-current="page"] { background: var(--acento); color: var(--texto-sobre-acento); }
.paginacion .deshabilitado { color: var(--texto-tenue); font-style: italic; cursor: default; }

/* ---------------------------------------------- Avisos flotantes (toasts) ---------------------------------------------- */
.avisos-flotantes { position: fixed; right: var(--margen-pagina); bottom: var(--margen-pagina); z-index: var(--z-aviso); display: grid; gap: var(--esp-2); width: min(24rem, 100% - 2 * var(--margen-pagina)); pointer-events: none; }
.aviso-flotante { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-4); border-radius: var(--radio-l); pointer-events: auto; font-size: var(--tam-s); animation: entra-aviso var(--mov-lento) var(--curva); }
.aviso-flotante > div { flex: 1; min-width: 0; }
.aviso-flotante .icono { margin-top: 0.1rem; }
.aviso-flotante--ok .icono { color: var(--ok); }
.aviso-flotante--aviso .icono { color: var(--aviso); }
.aviso-flotante--error .icono { color: var(--error); }
.aviso-flotante--info .icono { color: var(--acento); }
.aviso-flotante.saliendo { opacity: 0; transform: translateY(0.5rem); transition: opacity var(--mov) var(--curva), transform var(--mov) var(--curva); }
@keyframes entra-aviso { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }

/* ---------------------------------------------- Diálogos ---------------------------------------------- */
dialog.dialogo, dialog.paleta { border: 0; padding: 0; background: transparent; color: var(--texto); max-width: min(94vw, 34rem); width: 100%; overflow: visible; }
dialog.dialogo::backdrop, dialog.paleta::backdrop { background: rgba(8, 14, 26, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.dialogo[open], dialog.paleta[open] { animation: entra-dialogo var(--mov-lento) var(--curva); }
.dialogo-caja { padding: var(--esp-5); border-radius: var(--radio-xl); box-shadow: var(--sombra-l), inset 0 1px 0 var(--vidrio-brillo); }
.dialogo-caja h2 { font-size: var(--tam-l); }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-5); flex-wrap: wrap; }
@keyframes entra-dialogo { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }

/* ---------------------------------------------- Ayuda contextual (tooltips y popovers) ---------------------------------------------- */
.ayuda { display: inline-flex; align-items: center; vertical-align: baseline; margin-left: 0.25rem; position: relative; }
.ayuda-boton { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: transparent; color: var(--texto-tenue); font: inherit; font-size: 0.7rem; font-weight: var(--peso-fuerte); font-style: italic; line-height: 1; cursor: help; text-transform: none; letter-spacing: 0; transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva); }
.ayuda-boton:hover, .ayuda-boton[aria-expanded="true"] { background: var(--acento-suave); color: var(--acento-texto); border-color: var(--acento); }
.ayuda-texto { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted var(--texto-tenue); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.ayuda-texto:hover, .ayuda-texto[aria-expanded="true"] { text-decoration-color: var(--acento); color: var(--acento); }
.ayuda-contenido { display: none; }
.ayuda-pop { position: fixed; z-index: var(--z-ayuda); max-width: min(22rem, 100vw - 1.5rem); padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-m); font-size: var(--tam-s); font-weight: var(--peso-normal); font-style: normal; text-transform: none; letter-spacing: 0; text-align: left; color: var(--texto); line-height: 1.45; animation: entra-ayuda var(--mov-rapido) var(--curva); }
.ayuda-pop .ayuda-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); font-weight: var(--peso-fuerte); margin-bottom: 0.25rem; }
.ayuda-pop p { margin: 0 0 0.4rem; }
.ayuda-pop .ayuda-rotulo { font-weight: var(--peso-fuerte); color: var(--texto-suave); }
.ayuda-pop .ayuda-mas { display: inline-block; margin-top: 0.15rem; font-weight: var(--peso-medio); }
@keyframes entra-ayuda { from { opacity: 0; transform: translateY(0.25rem); } }

/* ---------------------------------------------- Paleta de búsqueda (Ctrl+K) ---------------------------------------------- */
dialog.paleta { max-width: min(94vw, 38rem); margin-top: 10vh; }
.paleta-caja { border-radius: var(--radio-xl); padding: var(--esp-3); box-shadow: var(--sombra-l), inset 0 1px 0 var(--vidrio-brillo); }
.paleta-caja .buscador .form-control { min-height: 3rem; font-size: var(--tam-m); border-radius: var(--radio-l); }
.paleta-resultados { max-height: 52vh; overflow: auto; margin-top: var(--esp-2); }
.paleta-grupo { margin: var(--esp-3) 0 var(--esp-1) var(--esp-3); font-size: var(--tam-xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-tenue); }
.paleta-resultados ul { list-style: none; margin: 0; padding: 0; }
.paleta-resultados a { display: flex; align-items: center; gap: var(--esp-3); padding: 0.6rem var(--esp-3); border-radius: var(--radio-m); color: var(--texto); text-decoration: none; }
.paleta-resultados a:hover, .paleta-resultados a[aria-selected="true"] { background: var(--acento-suave); color: var(--texto); }
.paleta-resultados .icono { color: var(--texto-tenue); }
.paleta-resultados small { margin-left: auto; color: var(--texto-tenue); }
.paleta-pie { display: flex; gap: var(--esp-4); padding: var(--esp-2) var(--esp-3) 0; font-size: var(--tam-xs); color: var(--texto-tenue); }
kbd { font-family: var(--fuente); font-size: var(--tam-xs); padding: 0.1rem 0.4rem; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 6px; background: var(--solido); color: var(--texto-suave); }

/* ---------------------------------------------- Pie ---------------------------------------------- */
.pie { padding: var(--esp-5) 0 var(--esp-6); font-size: var(--tam-xs); color: var(--texto-tenue); display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); justify-content: space-between; }
.pie a { color: var(--texto-suave); }

/* ---------------------------------------------- Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .esqueleto-linea { animation: none; }
}

/* ---------------------------------------------- Auxiliares ---------------------------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tema-icono { display: none; }
[data-modo-tema="auto"] .tema-auto, [data-modo-tema="light"] .tema-claro, [data-modo-tema="dark"] .tema-oscuro { display: inline-block; }
.solo-js { display: none; }
.con-js .solo-js { display: revert; }
.con-js .solo-sin-js { display: none; }
.nav-contenido { display: contents; }
/* Los menús desplegables viven dentro de la barra (que ya desenfoca): el vidrio anidado no desenfoca, así que son sólidos. */
.menu-panel { background: var(--solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
.htmx-indicator--bloque { display: none; margin-bottom: var(--esp-4); }
.htmx-request.htmx-indicator--bloque, .htmx-request .htmx-indicator--bloque { display: block; }
.sin-quiebre { white-space: nowrap; }
.fecha-vigencia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.fecha-vigencia .form-label { margin: 0; }
.fecha-vigencia .form-control { width: auto; }
.filtros--pestana { padding: 0; margin-bottom: var(--esp-4); background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.campo-etiqueta { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.3rem; }
.campo-etiqueta .form-label { margin: 0; }
.ayuda-defs { display: none; }
.titulo-con-ayuda { display: inline-flex; align-items: center; gap: 0.35rem; }
h1 .ayuda, h2 .ayuda, h3 .ayuda { margin-left: 0.4rem; vertical-align: middle; }
.etiqueta[data-ayuda], .contador[data-ayuda] { cursor: help; }

/* Alto contraste (preferencia del sistema): bordes y texto tenue más marcados. */
@media (prefers-contrast: more) {
  :root:root:root { --texto-tenue: var(--texto-suave); --linea: var(--linea-fuerte); --vidrio-borde: var(--linea-fuerte); }
  .tabla th, .tabla td { border-bottom-color: var(--linea-fuerte); }
}

/* Cartel del servidor de demostración (MODO_DEMO): franja fija arriba de todas las pantallas */
.cartel-demo { position: sticky; top: 0; z-index: 60; padding: 0.35rem var(--esp-4); text-align: center; font-size: var(--tam-chico, 0.85rem);
  background: var(--solido); color: var(--texto); border-bottom: 2px dashed var(--aviso, currentColor); letter-spacing: 0.02em; }