/*
  Estilo del panel.

  Los colores son el CONTRATO VISUAL, no una sugerencia. Son la paleta y la
  tipografía del MANUAL DE MARCA PaiPai (2026): es el único tema del panel.

  REGLA: ningún color se escribe en las reglas de abajo. Todo pasa por una
  variable de `:root`; si mañana hiciera falta otro tema, se hace con esas
  mismas variables y no tocando las reglas.

  SISTEMA DE COMPONENTES (rediseño del 24 sep 2026, «00 Sistema» de Fable,
  ADAPTADO a la marca: los tintes de estado son los que el código ya tenía, no
  los del sistema genérico con el que se dibujó la maqueta). La misma familia
  que la taquilla de Flutter (02, doc 34 §7-8) y el instalador (04, doc 30):
  bosque para la acción única, lateral en bosque oscuro, Fraunces para títulos
  y cifras, Geist para el texto, Geist Mono para folios e importes en tabla,
  foco lima de 3 px. Medidas: control 40 · fila 44 · insignia 22 · franja 44 ·
  tarjeta de cifra 116. Radios: control 10 · tarjeta 12 · panel/modal 14.
*/

/* ── Fuentes de la marca, servidas desde AQUÍ ────────────────────────────────
   Las tres familias del Manual de marca (Geist para el cuerpo, Fraunces para
   títulos y cifras, Geist Mono para folios/UUID), todas bajo licencia OFL
   (documentacion/05). Van en `publico/fuentes/` y no desde Google Fonts: el
   panel vive en la red interna del parque, que puede no tener internet, y una
   petición a un tercero por cada carga le cuenta a ese tercero quién abre el
   panel y cuándo. Subconjunto latino, variable en peso. */
@font-face { font-family: "Geist"; font-weight: 300 800; font-display: swap; src: url("/fuentes/geist-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400 600; font-display: swap; src: url("/fuentes/geist-mono-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/fuentes/fraunces-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("/fuentes/fraunces-italic.woff2") format("woff2"); }

:root {
  /* Tema OFICIAL PaiPai (Manual de marca 2026). Único tema: la paleta y la
     tipografía de la marca, aplicadas aquí directamente. */
  --bosque: #124E29;
  --bosque-oscuro: #0d3a1f;
  --verde: #4E8D40;
  --verde-hover: #3f7433;
  /* «oro» por compatibilidad: en el manual el acento es un CIAN. */
  --oro: #07A6D7;
  --oro-tinta: #06607d;
  --oro-fondo: #e2f5fc;
  --rojo: #C1272D;
  --rojo-hover: #a11f24;
  --marfil: #f4f8f2;
  --tinta: #14251A;
  /* La lima del manual: SOLO el anillo de foco y el acento sobre el lateral. */
  --lima: #CDDC34;

  --tarjeta: #ffffff;
  --borde: #d7e5db;
  --borde-fuerte: #c4d6cb;
  --division: #e3ede7;
  --division-fila: #eef4f0;

  --etiqueta: #4A5E50;
  --tenue: #6A766E;
  --debil: #9aa79f;

  --verde-suave: #eef5ea;
  --chip-pend-fondo: #e2f5fc;
  --chip-pend-tinta: #06607d;
  --chip-ok-fondo: #eaf4e0;
  --chip-ok-tinta: #2f6b28;
  --mal-fondo: #fbeceb;
  --mal-tinta: #8f1c21;
  /* «Aviso» (espera, no urge) es la familia del CIAN, igual que en la taquilla
     (02, franja.dart y chip_estado.dart). Fue ámbar hasta el 25 sep, y el ámbar
     no sale de ningún color del manual: el mismo aviso se veía de un color en
     cada app. Se conservan los nombres para no tocar cada punto de uso. */
  --aviso-fondo: var(--oro-fondo);
  --aviso-tinta: var(--oro-tinta);
  /* Facturación: «falta para el objetivo». Es un tercer tono que no es aviso
     ni error: la lima del manual al 15 % sobre blanco, con la tinta normal. */
  --falta-fondo: #f8fae1;
  /* Riel del avance, interruptor apagado, bordes al pasar el cursor y
     separadores tenues (Facturación, rediseño 22 sep 2026). */
  --riel: #e6efe8;
  --interruptor-apagado: #c5d2c9;
  --borde-hover: #9fb8a7;
  --separador: #b6c3ba;
  --gris-chip: #eef1ef;

  --barra-fondo: #124E29;
  --barra-texto: #f4f8f2;
  --barra-sub: #b9d0be;
  --barra-borde: transparent;
  --lateral-fondo: #0d3a1f;
  --lateral-texto: #9dc0a6;
  --lateral-activo-fondo: #4E8D40;
  --lateral-activo-texto: #ffffff;
  --primario: #124E29;
  --primario-texto: #ffffff;
  --primario-hover: #0d3a1f;
  --foco: #CDDC34;
  --select-fondo: #fff;
  /* Fondo detrás del PDF del CFDI. Era un gris #555 genérico; el tono de marca
     más cercano en luminosidad es el texto secundario. */
  --visor-fondo: var(--etiqueta);

  /* El «papel» de la vista previa del ticket: es papel de verdad (blanco, tinta
     negra), no sigue la paleta del panel a propósito. */
  --papel: #ffffff;
  --papel-tinta: #111111;
  --papel-sombra: rgba(0, 0, 0, .18);

  /* Forma */
  --radio: 12px;
  --radio-panel: 14px;
  --radio-control: 10px;
  --radio-chico: 7px;
  /* Un solo diálogo en todo el panel: el mismo radio, velo y sombra para la
     confirmación, el comprobante (CFDI) y el timbrado de Facturación. */
  --radio-modal: var(--radio-panel);
  --alto-control: 40px;
  --ancho-menu: 208px;
  --sombra-tarjeta: 0 1px 3px rgba(18, 78, 41, .07);
  --sombra-flotante: 0 12px 32px rgba(20, 38, 27, .14);
  --sombra-boton: 0 1px 2px rgba(18, 78, 41, .25);
  --sombra-perilla: 0 1px 2px rgba(0, 0, 0, .2);
  --velo-dialogo: rgba(20, 38, 27, .45);

  /* Letra */
  --fuente: "Geist", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  --fuente-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-mono: "Geist Mono", Consolas, monospace;
  --titulo-estilo: normal;
  --titulo-peso: 500;
  --cifra-peso: 500;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font: 14px/1.5 var(--fuente);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--fuente-titulo); font-style: var(--titulo-estilo); font-weight: var(--titulo-peso); letter-spacing: -.01em; }
code, .mono { font-family: var(--fuente-mono); }
a { color: var(--bosque); }
a:hover { color: var(--bosque-oscuro); }

/* El foco se ve SOLO con teclado, y siempre igual: anillo lima de 3 px. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; }

/* LA LIMA SOLA NO SE VE. Sobre blanco o marfil da ~1,4:1 y WCAG 1.4.11 pide
   3:1: el anillo de un botón secundario desaparecía. Se le suma un filo bosque
   por dentro y por fuera del anillo (1 px entre el elemento y la lima, 1 px
   después), así la lima del manual se queda y el foco se ve sobre cualquier
   fondo. `!important` porque varios botones (fx-boton.solido) ya traen su
   sombra con más especificidad, y el foco tiene que ganar siempre. Las reglas
   de abajo que ponen el anillo por su cuenta (fx-, rp-, campos) lo heredan. */
:focus-visible,
:where(input, select, textarea):focus,
.buscador:focus-within, .fx-caja:focus-within, .fx-monto:focus-within {
  box-shadow: 0 0 0 1px var(--bosque), 0 0 0 5px var(--bosque) !important;
}
/* Facturación y Reportes separan el anillo 2 px (outline-offset 2): el filo
   se corre con él para no dejar hueco. */
.fx-boton:focus-visible, .fx-tab:focus-visible, .fx-flecha-mes:focus-visible, .fx-interruptor:focus-visible,
.rp-item:focus-visible, .rp-periodo:focus-visible, .rp-interruptor:focus-visible,
input.fx-control:focus, select.fx-control:focus, .fx-caja:focus-within, .fx-monto:focus-within {
  box-shadow: 0 0 0 2px var(--bosque), 0 0 0 6px var(--bosque) !important;
}
/* El menú lateral lleva el anillo POR DENTRO (offset −3) sobre el bosque
   oscuro, donde la lima ya contrasta: ahí el filo sobra. */
.menu-item:focus-visible, .menu-plegar:focus-visible, .menu-campo:focus-visible { box-shadow: none !important; }
/* Un campo dentro de una caja que ya se enciende entera (buscador, monto,
   folios) no pinta su propio filo: saldrían dos anillos. */
.buscador input:focus, input.fx-busqueda:focus, input.fx-cifra:focus, .veredicto:focus-visible { box-shadow: none !important; }

.cargando { padding: 40px; color: var(--tenue); }
/* `.pista` va con la letra del texto aunque esté dentro de una celda mono: la
   mono es para folios y códigos, no para «(servidor)» o «ventas». */
.pista { color: var(--tenue); font-size: 13px; font-family: var(--fuente); }
.oculto { display: none !important; }
.empuje { margin-left: auto; }

/* ── El marco: menú lateral + barra + contenido ──────────────────────────── */

.marco { display: grid; grid-template-columns: var(--ancho-menu) minmax(0, 1fr); min-height: 100vh; }
.marco.plegado { grid-template-columns: 64px minmax(0, 1fr); }

.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--lateral-fondo); color: var(--primario-texto);
  display: flex; flex-direction: column; padding: 12px 10px; font-size: 13px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primario-texto) 25%, transparent) transparent;
}
.menu > * { flex-shrink: 0; }
/* EL LOGOTIPO OFICIAL (Manual de marca 2026, pág. 6, variante «sobre verde
   oscuro»). En el menú va directo sobre el lateral; plegado, solo la huella.
   Donde el fondo es claro va en su PLACA verde, que es la caja de esa misma
   variante: suelto sobre marfil no es un uso del manual. Sustituye al «sello»
   «P» provisional. El alto compacto (40) entra en la suma de test/estilo.test.ts. */
.menu-marca {
  display: flex; align-items: center; padding: 4px 10px 12px;
}
.menu-logo { display: block; height: 56px; width: auto; }
.menu-huella { display: none; width: 32px; height: 32px; }
.placa-marca {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lateral-fondo); border-radius: var(--radio);
}
.placa-marca .logotipo { display: block; width: auto; }
.placa-marca.chica { height: 44px; padding: 0 10px; }
.placa-marca.chica .logotipo { height: 38px; }
.placa-marca.grande { padding: 12px 20px; border-radius: var(--radio-panel); }
.placa-marca.grande .logotipo { height: 80px; }
.menu-marca small { display: block; font-family: var(--fuente); font-size: 11px; color: color-mix(in srgb, var(--primario-texto) 60%, transparent); }
.menu-grupo {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--primario-texto) 55%, transparent); padding: 10px 10px 4px;
}
.menu-item {
  width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer;
  background: transparent; color: color-mix(in srgb, var(--primario-texto) 85%, transparent);
  font: inherit; font-size: 13px; text-align: left; text-decoration: none;
}
.menu-item:hover, .menu-item:hover:not(:disabled) { background: color-mix(in srgb, var(--primario-texto) 8%, transparent); color: var(--primario-texto); }
.menu-item.activo { background: color-mix(in srgb, var(--primario-texto) 14%, transparent); color: var(--primario-texto); font-weight: 600; }
.menu-item:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.menu-item svg { width: 16px; height: 16px; flex: none; opacity: .9; }
.menu-item span.nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-alerta {
  margin-left: auto; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rojo); color: var(--primario-texto); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
/* El pie: las dos páginas de campo (taquilla web y puerta) como iconos, y
   Plegar. Fueron un grupo «Campo» del menú y a 1366×768 no cabían: el último
   renglón de Administración y el propio Plegar quedaban bajo el borde. */
.menu-pie {
  margin-top: auto; padding: 10px 0 0; font-size: 11px; line-height: 1.4; color: color-mix(in srgb, var(--primario-texto) 50%, transparent);
  display: flex; gap: 6px; align-items: center;
}
.menu-campo {
  flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  color: color-mix(in srgb, var(--primario-texto) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--primario-texto) 18%, transparent);
}
.menu-campo:hover { background: color-mix(in srgb, var(--primario-texto) 8%, transparent); color: var(--primario-texto); }
.menu-campo:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.menu-campo svg { width: 16px; height: 16px; }
.menu-plegar:hover:not(:disabled) { background: color-mix(in srgb, var(--primario-texto) 8%, transparent); }
.menu-plegar {
  flex: 1; min-width: 0; width: 100%; margin-top: 0; height: 32px; border: 1px solid color-mix(in srgb, var(--primario-texto) 18%, transparent);
  border-radius: 8px; background: transparent; color: color-mix(in srgb, var(--primario-texto) 75%, transparent);
  cursor: pointer; font: inherit; font-size: 12px;
}
.marco.plegado .menu-logo, .marco.plegado .menu-grupo, .marco.plegado .menu-item span.nombre,
.marco.plegado .menu-pie p { display: none; }
.marco.plegado .menu-item { justify-content: center; position: relative; }
.marco.plegado .menu-marca { justify-content: center; padding: 4px 0 10px; }
.marco.plegado .menu-huella { display: block; }
.marco.plegado .menu-alerta { position: absolute; top: 4px; right: 4px; height: 8px; min-width: 8px; padding: 0; font-size: 0; }
.marco.plegado .menu-pie { flex-direction: column; }
.marco.plegado .menu-campo { width: 100%; }

/* PANTALLA BAJA (1366×768 y parecidas): el menú compacto. Administración con
   las tres fases son 16 secciones en 5 grupos, y a 36 px por renglón no caben
   en 768. A 32 sí, con aire (test/estilo.test.ts hace la suma). */
@media (max-height: 800px) {
  .menu { padding: 10px; }
  .menu-marca { padding: 2px 10px 6px; }
  .menu-logo { height: 40px; }
  .menu-grupo { padding: 8px 10px 2px; }
  .menu-item { height: 32px; }
  /* Con TODO encendido (fases 2 y 3, pantalla al visitante y app interna) el
     menú de Administración tiene 18 renglones (con «Reservas», de vuelta el 5
     oct) y a 32 px no cabe en 768; a 30 tampoco (782 px). Solo entonces se
     aprietan a 28: con la Fase 1 el menú es el de siempre. Desde el 7 oct son
     19 con «Acceso remoto» (doc 62) y a 28 medían 774 px: iban a 27. Desde el 9 oct
     son 20 con «Servidor del parque» (doc 64) y a 27 medían 782 px: van a 25. */
  .menu.largo .menu-item { height: 25px; }
}

.principal { min-width: 0; display: flex; flex-direction: column; }

.barra-sup {
  position: sticky; top: 0; z-index: 10;
  height: 56px; flex: none; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 16px; padding: 0 20px; font-size: 13px;
}
.barra-sup .titulo { font-weight: 600; font-size: 15px; white-space: nowrap; }
.conexion { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--etiqueta); white-space: nowrap; }
.conexion .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.conexion.error .punto { background: var(--aviso-tinta); }
.conexion.off .punto { background: var(--rojo); }
.conexion.palpita .punto { animation: palpita .9s ease-out 1; }
@keyframes palpita { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.reloj { display: flex; align-items: center; gap: 6px; color: var(--etiqueta); font-family: var(--fuente-mono); white-space: nowrap; }
.reloj svg { width: 14px; height: 14px; }
.reloj.desfasado { color: var(--aviso-tinta); }
.usuario { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--borde); line-height: 1.2; white-space: nowrap; }
.usuario b { display: block; font-weight: 600; }
.usuario small { color: var(--tenue); font-size: 12px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--chip-ok-fondo); color: var(--bosque);
  display: grid; place-items: center; font-weight: 600; font-size: 12px;
}

.franjas { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 0; }
.franjas:empty { display: none; }
.contenido { flex: 1; padding: 20px; min-width: 0; }

@media (max-width: 1280px) {
  .conexion .largo { display: none; }
}
@media (max-width: 1100px) {
  .marco { grid-template-columns: 64px minmax(0, 1fr); }
  .marco .menu-logo, .marco .menu-grupo, .marco .menu-item span.nombre, .marco .menu-pie p { display: none; }
  .marco .menu-item { justify-content: center; position: relative; }
  .marco .menu-marca { justify-content: center; padding: 4px 0 10px; }
  .marco .menu-huella { display: block; }
  .marco .menu-alerta { position: absolute; top: 4px; right: 4px; height: 8px; min-width: 8px; padding: 0; font-size: 0; }
  .marco .menu-pie { flex-direction: column; }
  .marco .menu-campo { width: 100%; }
  .usuario div { display: none; }
}

/* ── Cabecera de cada sección ─────────────────────────────────────────────── */

.cab-seccion { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; min-height: var(--alto-control); }
.cab-seccion h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.cab-seccion .sub { color: var(--etiqueta); font-size: 13px; }
.cab-seccion .acciones-cab { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Botones · alto 40, radio 10, 14/600 ──────────────────────────────────
   `:where()` deja la especificidad en cero: cualquier clase de las secciones
   aprobadas (fx-, rp-, tk-) gana sin pelear. */

:where(button) {
  height: var(--alto-control); padding: 0 16px; border-radius: var(--radio-control);
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--bosque);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
:where(button):hover:not(:disabled) { background: var(--marfil); }
:where(button):disabled { opacity: .45; cursor: not-allowed; }
:where(button) svg { width: 16px; height: 16px; flex: none; }

button.primario, .boton.primario {
  background: var(--primario); color: var(--primario-texto); border: 0;
  height: var(--alto-control); padding: 0 16px; border-radius: var(--radio-control);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
button.primario:hover:not(:disabled) { background: var(--primario-hover); }
button.primario:active:not(:disabled) { background: var(--bosque-oscuro); }
button.primario:disabled { opacity: .45; cursor: not-allowed; }
button.fantasma { border-color: transparent; background: transparent; padding: 0 10px; }
button.fantasma:hover:not(:disabled) { background: var(--verde-suave); }
button.peligro { border: 1px solid var(--rojo); color: var(--rojo); background: var(--tarjeta); }
button.peligro:hover:not(:disabled) { background: var(--mal-fondo); }
button.peligro-lleno { border: 0; background: var(--rojo); color: var(--primario-texto); }
button.peligro-lleno:hover:not(:disabled) { background: var(--rojo-hover); }
button.icono { width: var(--alto-control); padding: 0; }
button.chico { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
button.enlace { height: auto; padding: 0; border: 0; background: none; color: var(--bosque); font-weight: 600; }
button.enlace:hover:not(:disabled) { background: none; text-decoration: underline; text-underline-offset: 3px; }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* La nota que SUSTITUYE a un botón que este rol no puede usar. Nunca un botón
   apagado y mudo: se dice quién sí puede. */
.solo-lectura {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px;
  border: 1px dashed var(--borde); border-radius: var(--radio-control); background: var(--marfil);
  color: var(--tenue); font-size: 13px; font-weight: 500;
}
.solo-lectura svg { width: 14px; height: 14px; flex: none; }
.solo-lectura.parpadea { animation: parpadea .6s ease-out 1; }
@keyframes parpadea { 50% { background: var(--gris-chip); } }

/* ── Campos · alto 40, radio 10, etiqueta 13/500 arriba ─────────────────── */

:where(input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="number"],
input[type="search"], input:not([type]), input.precio, select, textarea) {
  height: var(--alto-control); border: 1px solid var(--borde); border-radius: var(--radio-control);
  padding: 0 12px; font: inherit; font-size: 14px; background: var(--tarjeta); color: var(--tinta);
}
:where(textarea) { height: auto; padding: 10px 12px; }
:where(input, select, textarea):hover { border-color: var(--borde-hover); }
:where(input, select, textarea):focus { border-color: var(--bosque); outline: 3px solid var(--foco); outline-offset: 1px; }
input.error, input[aria-invalid="true"] { border-color: var(--rojo); }
input.precio { width: 130px; text-align: right; font-family: var(--fuente-mono); }
input.mono { font-family: var(--fuente-mono); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }

label { display: block; font-size: 13px; font-weight: 500; color: var(--tinta); }
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.campo > input, .campo > select, .campo > textarea { margin: 0; width: 100%; }
.campo .ayuda { font-size: 12px; font-weight: 400; color: var(--tenue); }
.campo .error-texto { font-size: 12px; font-weight: 400; color: var(--rojo); }
.campo-lectura {
  height: var(--alto-control); border: 1px solid var(--borde); border-radius: var(--radio-control);
  padding: 0 12px; background: var(--marfil); color: var(--etiqueta);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 400;
}
.campo-lectura svg { width: 14px; height: 14px; color: var(--tenue); }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

/* El motivo de un campo inválido, a la vista y no solo en el tooltip: en una
   pantalla táctil no hay ratón que se pose encima. */
.motivo { color: var(--rojo); font-size: 12px; margin-top: 3px; min-height: 14px; }
td .motivo:empty { min-height: 0; margin: 0; }

/* Interruptor y casilla de la marca */
.interruptor { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.interruptor .riel { position: relative; width: 36px; height: 22px; border-radius: 11px; background: var(--borde); transition: background .15s; flex: none; }
.interruptor .riel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--tarjeta); box-shadow: var(--sombra-perilla); transition: transform .15s; }
.interruptor input:checked + .riel { background: var(--verde); }
.interruptor input:checked + .riel::after { transform: translateX(14px); }
.interruptor input:focus-visible + .riel { outline: 3px solid var(--foco); outline-offset: 1px; }
.interruptor input:disabled + .riel { opacity: .55; cursor: not-allowed; }
input[type="checkbox"] { accent-color: var(--bosque); width: 16px; height: 16px; }

/* ── Fila de filtros · una fila, alto 40, gap 8 ─────────────────────────── */

.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtros .resultado { font-family: var(--fuente-mono); font-size: 13px; color: var(--etiqueta); }
.buscador {
  height: var(--alto-control); min-width: 240px; border: 1px solid var(--borde); border-radius: var(--radio-control);
  background: var(--tarjeta); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--tenue);
}
.buscador:focus-within { border-color: var(--bosque); outline: 3px solid var(--foco); outline-offset: 1px; }
.buscador svg { width: 16px; height: 16px; flex: none; }
.buscador input { border: 0; outline: 0; height: 38px; padding: 0; flex: 1; min-width: 0; background: transparent; font-family: var(--fuente-mono); }
.buscador input:focus { outline: 0; }
.buscador input::placeholder { font-family: var(--fuente); }
.lista-detalle td, .lista-detalle th { padding-left: 9px; padding-right: 9px; }
.segmentado {
  height: var(--alto-control); display: inline-flex; align-items: center; gap: 2px; padding: 0 4px;
  border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--marfil);
}
.segmentado button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--etiqueta); font-size: 13px; font-weight: 500;
}
.segmentado button:hover:not(:disabled) { background: var(--tarjeta); color: var(--bosque); }
.segmentado button.activo { background: var(--bosque); color: var(--primario-texto); }
.dia-nav { display: inline-flex; align-items: center; gap: 4px; }
.dia-nav input[type="date"] { font-weight: 500; }

/* ── Insignias · alto 22, radio 11, 12/600 ──────────────────────────────── */

.insignia, .pildora {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; vertical-align: middle;
  background: var(--gris-chip); color: var(--etiqueta);
}
.insignia .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.insignia.ok, .pildora.viva { background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); }
.insignia.ok .punto { background: var(--verde); }
.insignia.info { background: var(--oro-fondo); color: var(--oro-tinta); }
.insignia.aviso, .pildora.caida { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.insignia.error, .pildora.revocada { background: var(--mal-fondo); color: var(--mal-tinta); }
.insignia.neutro { background: var(--gris-chip); color: var(--etiqueta); }
.insignia.contorno { background: transparent; border: 1px solid var(--borde); color: var(--etiqueta); font-family: var(--fuente-mono); }
/* Texto blanco sobre el cian puro da ~2,8:1: el cian con letra va en su tinta
   (~6,9:1). El cian puro se queda para rellenos sin texto (barras, rieles). */
.insignia.cuenta { background: var(--oro-tinta); color: var(--primario-texto); }
.insignia.vivo .punto { animation: late 2s ease-in-out infinite; }
@keyframes late { 50% { opacity: .35; } }

/* ── Franjas de estado · dentro de la pantalla, alto mín 44, radio 10 ──────
   La receta de la taquilla (02, franja.dart): el borde es del tono, el <b>
   inicial va en la tinta del tono y la explicación en la tinta normal. Error
   y ok llevan su fondo; aviso (cian) e info (neutra) van sobre la tarjeta.
   Desviación a propósito: 44 de alto y radio 10 (en 02: 48 y 8), las medidas
   del control del panel de escritorio. Ver documentacion/45 §5. */

.franja, .aviso:not(.insignia) {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px;
  border-radius: var(--radio-control); font-size: 14px; line-height: 1.4;
  background: var(--mal-fondo); color: var(--tinta);
  border: 1px solid var(--rojo);
  margin-bottom: 12px;
}
.franjas .franja, .franjas .aviso:not(.insignia) { margin-bottom: 0; }
.franja > svg, .aviso > svg { width: 18px; height: 18px; flex: none; }
.franja > svg, .franja b, .aviso:not(.insignia) > svg, .aviso:not(.insignia) b { color: var(--rojo); }
.franja .texto { flex: 1; min-width: 0; }
.franja .accion { margin-left: auto; flex: none; }
.franja .accion button { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--bosque); }
.franja.oscura .accion button { background: transparent; color: var(--primario-texto); border-color: currentColor; }
.franja button.cerrar-franja { height: 32px; border: 0; background: none; color: inherit; font-weight: 600; padding: 0 6px; }
.franja.ok, .aviso.bien { background: var(--verde-suave); border-color: var(--verde); }
.franja.ok > svg, .franja.ok b, .aviso.bien > svg, .aviso.bien b { color: var(--bosque); }
.franja.info { background: var(--tarjeta); border-color: var(--borde); }
.franja.info > svg { color: var(--etiqueta); }
.franja.info b { color: var(--tinta); }
.franja.aviso { background: var(--tarjeta); border-color: var(--oro); }
.franja.aviso > svg, .franja.aviso b { color: var(--oro-tinta); }
.franja.oscura { background: var(--tinta); color: var(--primario-texto); border-color: var(--tinta); }
.franja.oscura > svg, .franja.oscura b { color: inherit; }
.franja.lectura { background: var(--marfil); color: var(--etiqueta); border-color: var(--borde); }
.franja.lectura > svg, .franja.lectura b { color: var(--etiqueta); }
.franja b { font-weight: 600; }
/* Datos que alguien tiene que copiar (UUID, id del PAC): en mono y a la vista. */
.franja .dato-copiable { font-family: var(--fuente-mono); font-size: 13px; overflow-wrap: anywhere; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; margin-bottom: 16px; min-width: 0;
}
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta-cab { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tarjeta-cab h2, .tarjeta-cab h3 { margin: 0; font-family: var(--fuente); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.tarjeta-cab .sub { color: var(--tenue); font-size: 12px; }
.tarjeta.sin-relleno .tarjeta-cab { padding: 14px 18px 0; }
.tarjeta.sin-relleno > .pie-tarjeta, .tarjeta > .pie-tarjeta { padding: 10px 18px; font-size: 12px; color: var(--tenue); }

.etiqueta {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--tenue); text-transform: uppercase; margin: 0 0 12px;
}

/* ── Tarjeta de cifra · padding 16, alto fijo 116 → no salta ─────────────── */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; height: 116px; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
.kpi .rot { font-size: 13px; font-weight: 500; color: var(--etiqueta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .valor {
  font-family: var(--fuente-titulo); font-weight: var(--cifra-peso); font-size: clamp(20px, 1.9vw, 32px); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi .valor small { font-size: 20px; color: var(--tenue); }
.kpi .pie { font-size: 12px; color: var(--tenue); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kpi .pie.mal { color: var(--mal-tinta); font-weight: 600; }
.kpi .pie .sube { color: var(--chip-ok-tinta); font-weight: 600; }
.kpi .pie .baja { color: var(--mal-tinta); font-weight: 600; }
.kpi.sin-dato { background: var(--marfil); }
.kpi.sin-dato .valor { color: var(--tenue); }
.kpis.inicio { grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.inicio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi .riel-canal { height: 5px; flex: none; border-radius: 3px; background: var(--oro); overflow: hidden; }
.kpi .pie { -webkit-line-clamp: 2; }
.kpi .riel-canal span { display: block; height: 100%; background: var(--bosque); }

/* Esqueleto: el mismo tamaño que lo que sustituye, nunca un spinner que colapse. */
.hueso { display: inline-block; border-radius: 6px; background: var(--riel); animation: rp-pulso 1.4s ease-in-out infinite; }
.kpi .hueso.cifra { width: 60%; height: 32px; }
.kpi .hueso.linea { width: 80%; height: 12px; }

/* ── Tabla · encabezado verde 40, filas 44 alternas, números en Geist Mono ── */

.tabla { border: 1px solid var(--borde); border-radius: var(--radio); overflow: auto; background: var(--tarjeta); }
.tarjeta .tabla { margin: 0 -1px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  position: sticky; top: 0; z-index: 1;
  height: 40px; padding: 0 14px; text-align: left; white-space: nowrap;
  background: var(--bosque); color: var(--primario-texto);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
td { height: 44px; padding: 6px 14px; border-bottom: 1px solid var(--division-fila); }
tbody tr:nth-child(even) td { background: var(--marfil); }
tbody tr:hover td { background: var(--verde-suave); }
tbody tr.elegida td { background: var(--verde-suave); }
tbody tr.elegida { outline: 2px solid var(--bosque); outline-offset: -2px; }
tbody tr[data-abre] { cursor: pointer; }
td.num, th.num { text-align: right; }
td.num, td.mono, td .folio { font-family: var(--fuente-mono); font-size: 13px; white-space: nowrap; }
/* La mono es para folios, códigos e importes: la palabra que comparte celda con
   una cifra («— sin ventas», «(taquilla)») va en Geist. */
.mono .pista, td.num .pista, .v.mono .pista { font-family: var(--fuente); }
tfoot td { background: var(--tarjeta); border-top: 1px solid var(--borde); font-weight: 600; }
tr.grupo td { background: var(--marfil) !important; font-size: 13px; }
tr.fila-hueso td .hueso { height: 12px; width: 70%; }
/* La fila de un comprobante abre el comprobante: mano al pasar por encima, y el
   cursor normal si esta inerte (preparada sin PAC). */
tr.fila-cfdi { cursor: pointer; }
tr.fila-cfdi.inerte { cursor: default; }
/* Tiendas (Fase 2): un artículo en su mínimo o en negativo se ve sin buscarlo. */
tr.por-resurtir td { background: var(--aviso-fondo) !important; }
/* La insignia de aviso sobre la fila del mismo tono desaparecía: se le da la
   tarjeta de fondo. */
tr.por-resurtir .insignia.aviso { background: var(--tarjeta); border: 1px solid color-mix(in srgb, var(--aviso-tinta) 30%, transparent); }
.tabla-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13px; color: var(--etiqueta); flex-wrap: wrap; }
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--etiqueta); align-items: center; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda i.l-bosque { background: var(--bosque); }
.leyenda i.l-oro { background: var(--oro); }
.leyenda i.l-verde { background: var(--verde); }
.leyenda i.l-tenue { background: var(--separador); }
.leyenda i.l-rojo { background: var(--rojo); }
.leyenda i.l-ok { background: var(--chip-ok-fondo); border: 1px solid var(--chip-ok-tinta); }
.leyenda i.l-aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-tinta); }
.leyenda i.l-error { background: var(--mal-fondo); border: 1px solid var(--mal-tinta); }
.leyenda i.l-neutro { background: var(--gris-chip); border: 1px solid var(--etiqueta); }

.vacio { color: var(--tenue); padding: 36px 16px; text-align: center; }
.vacio b { display: block; font-family: var(--fuente-titulo); font-weight: 500; font-size: 22px; color: var(--tinta); margin-bottom: 6px; }
.vacio .detalle { color: var(--etiqueta); font-size: 14px; max-width: 52ch; margin: 0 auto; }
.vacio .accion-vacio { margin-top: 14px; }

/* ── Dos columnas: lista + detalle a la derecha ─────────────────────────── */

.lista-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (min-width: 1700px) { .lista-detalle { grid-template-columns: minmax(0, 1fr) 440px; } }
@media (max-width: 1100px) { .lista-detalle { grid-template-columns: 1fr; } }
.detalle { position: sticky; top: 72px; }
.detalle .cab-detalle { padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.detalle .cab-detalle .contexto { font-size: 12px; color: var(--tenue); }
.detalle .cab-detalle .folio-grande { font-family: var(--fuente-mono); font-size: 22px; font-weight: 500; }
.detalle .cuerpo-detalle { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.detalle .pie-detalle { padding: 12px 18px; border-top: 1px solid var(--borde); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.dl dt { color: var(--tenue); }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.renglon { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--marfil); font-size: 13px; }
.renglon + .renglon { margin-top: 6px; }

/* ── Rejillas de la pantalla ────────────────────────────────────────────── */

.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rejilla-inicio { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rejilla-tr { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rejilla-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1500px) { .rejilla-lateral { grid-template-columns: 1fr; } }
.recorte { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1700px) { .rejilla-inicio { grid-template-columns: 460px minmax(0, 1fr); } }
@media (max-width: 1100px) { .rejilla-2, .rejilla-inicio, .rejilla-tr { grid-template-columns: 1fr; } }

/* «Requiere atención»: una fila por pendiente, ordenada por urgencia. */
.atencion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.atencion li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radio-control); background: var(--marfil);
}
.atencion .n { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--primario-texto); background: var(--rojo); }
.atencion .n.info { background: var(--oro-tinta); }
.atencion .n.neutro { background: var(--tenue); }
.atencion .t { font-weight: 600; font-size: 13px; }
.atencion .s { font-size: 12px; color: var(--etiqueta); }
.atencion button { height: 32px; padding: 0 8px; border: 0; background: none; color: var(--bosque); font-size: 13px; }
.punto-rojo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-right: 6px; }

/* Barras horizontales (mezcla por método) */
.barras-h { display: grid; grid-template-columns: max-content minmax(60px, 1fr) max-content; gap: 8px 12px; align-items: center; font-size: 13px; }
.barras-h .riel { height: 12px; border-radius: 4px; background: var(--riel); overflow: hidden; }
.barras-h .riel span { display: block; height: 100%; border-radius: 4px; }
.barras-h .v { font-family: var(--fuente-mono); text-align: right; }
.b-bosque { background: var(--bosque); }
.b-verde { background: var(--verde); }
.b-oro { background: var(--oro); }
.b-tenue { background: var(--separador); }

/* Gráficas SVG en línea, sin librería */
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-rejilla { stroke: var(--division); stroke-width: 1; }
.g-eje { font-size: 11px; fill: var(--tenue); font-family: var(--fuente-mono); }
.g-actual { fill: none; stroke: var(--bosque); stroke-width: 2; stroke-linejoin: round; }
.g-anterior { fill: none; stroke: var(--separador); stroke-width: 2; stroke-linejoin: round; }
.g-proyeccion { fill: none; stroke: var(--bosque); stroke-width: 2; stroke-dasharray: 4 5; }
.g-zona-est { fill: var(--verde-suave); }
.g-nota { font-size: 11px; fill: var(--tenue); }
.g-punto { fill: var(--bosque); stroke: var(--tarjeta); stroke-width: 1.5; }
.g-bosque { fill: var(--bosque); }
.g-oro { fill: var(--oro); }
.g-rojo { fill: var(--rojo); }
.g-tenue { fill: var(--riel); }
.g-anillo-fondo { fill: none; stroke: var(--oro); }
.g-anillo { fill: none; stroke: var(--bosque); }
.g-centro { font-family: var(--fuente-titulo); font-size: 18px; fill: var(--tinta); }
.g-centro-sub { font-size: 10px; fill: var(--tenue); }
.g-tip-caja { fill: var(--tinta); }
.g-tip { font-size: 11px; fill: var(--primario-texto); }
.grafica [data-tip]:hover, .grafica [data-tip]:focus { opacity: .85; }

/* Canal: la barra de proporción ventanilla / en línea */
.proporcion { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--primario-texto); }
.proporcion span { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.proporcion .p-taq { background: var(--bosque); }
/* Sobre el cian, la letra en tinta (~7:1); en blanco no se leía (~2,8:1). */
.proporcion .p-web { background: var(--oro); color: var(--tinta); justify-content: flex-end; }
.proporcion .p-tienda { background: var(--verde); }
.proporcion .p-rest { background: var(--etiqueta); }
.mini-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 12px; }
.mini { background: var(--marfil); border-radius: var(--radio-control); padding: 10px 12px; }
.mini .rot { font-size: 12px; color: var(--etiqueta); }
.mini .valor { font-family: var(--fuente-titulo); font-size: 22px; line-height: 1.2; }
.mini .pie { font-size: 12px; color: var(--tenue); }

/* ── Taquillas · una tarjeta por terminal ───────────────────────────────── */

.terminales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1700px) { .terminales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .terminales { grid-template-columns: 1fr; } }
.terminal {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; min-height: 220px; display: flex; flex-direction: column; gap: 14px;
}
.terminal.sin-senal { border-color: color-mix(in srgb, var(--aviso-tinta) 45%, transparent); }
.terminal.alerta { border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.terminal.revocada { background: var(--marfil); }
.terminal .cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.terminal .cab h3 { margin: 0; font-size: 20px; }
.terminal .cab .sub { color: var(--tenue); font-size: 12px; }
.terminal .cab .insignias { margin-left: auto; display: flex; gap: 6px; }
.terminal .datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.terminal .datos .rot { font-size: 12px; color: var(--etiqueta); }
.terminal .datos .v { font-family: var(--fuente-titulo); font-size: 22px; line-height: 1.2; }
.terminal .datos .v.mono { font-family: var(--fuente-mono); font-size: 16px; font-weight: 600; }
.terminal .datos .n { font-size: 12px; color: var(--tenue); }
.terminal .datos .n.mal { color: var(--mal-tinta); }
.terminal .pie-term { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--division); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tenue); flex-wrap: wrap; }
.terminal .pie-term .acciones-term { margin-left: auto; display: flex; gap: 8px; }

/* ── Pestañas (Cuentas) ──────────────────────────────────────────────────── */

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.pestanas button {
  height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  color: var(--etiqueta); font-weight: 500; padding: 0 14px;
}
.pestanas button:hover:not(:disabled) { background: none; color: var(--bosque); }
.pestanas button.activa { color: var(--bosque); border-bottom-color: var(--bosque); font-weight: 600; }

/* ── Panel lateral de edición · ancho 420 (380 a 1366) ──────────────────── */

.velo { position: fixed; inset: 0; z-index: 40; background: var(--velo-dialogo); }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(420px, 100vw);
  background: var(--tarjeta); border-left: 1px solid var(--borde); border-radius: var(--radio-panel) 0 0 var(--radio-panel);
  display: flex; flex-direction: column; box-shadow: var(--sombra-flotante);
}
@media (max-width: 1400px) {
  .cajon { width: min(380px, 100vw); }
  /* Catálogo a 1366: la clave SAT sale en el cajón de cada producto; en la tabla
     empujaba «Precio / Editar» fuera y partía el nombre en tres renglones. */
  .col-sat { display: none; }
}
.cajon .cab-cajon { padding: 16px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cajon .cab-cajon .contexto { font-size: 12px; color: var(--tenue); }
.cajon .cab-cajon h2 { margin: 0; font-size: 20px; }
.cajon .cuerpo-cajon { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; flex: 1; }
.cajon .pie-cajon { padding: 16px; border-top: 1px solid var(--borde); display: flex; gap: 8px; justify-content: flex-end; }

/* ── Modal de confirmación · solo lo irreversible · ancho 440 ──────────── */

.confirmar-fondo {
  position: fixed; inset: 0; z-index: 70; padding: 20px; background: var(--velo-dialogo);
  display: flex; align-items: center; justify-content: center;
}
.confirmar {
  width: 100%; max-width: 440px; padding: 22px; border-radius: var(--radio-modal); background: var(--tarjeta);
  box-shadow: var(--sombra-flotante); display: flex; flex-direction: column; gap: 14px;
}
.confirmar h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.confirmar .cuerpo { font-size: 14px; color: var(--etiqueta); line-height: 1.5; }
.confirmar .cuerpo b, .confirmar .cuerpo .mono { color: var(--tinta); }
.confirmar .botones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.confirmar .franja { margin: 0; }

/* ── Páginas de campo: puerta y taquilla web (Tanda B §14) ────────────────
   Sin menú lateral: pantalla completa y objetivos de 56 px para tableta. */

.campo-pagina { min-height: 100vh; display: flex; flex-direction: column; }
.campo-barra {
  height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde); font-size: 15px;
}
.campo-barra button { height: 44px; }
.campo-cuerpo { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; }
.campo-cuerpo.ancho { max-width: 1400px; }
.campo-pie { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; font-size: 13px; color: var(--tenue); }
kbd { font-family: var(--fuente-mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--borde); border-radius: 5px; background: var(--marfil); }
/* La tecla IMPRESA en el botón, como TeclaAtajo en la taquilla (02): el
   tooltip no existe en una pantalla táctil. Sobre un botón oscuro se invierte. */
kbd.tecla {
  flex: none; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 1px 7px; border-radius: 6px;
  background: var(--verde-suave); border: 1px solid var(--borde); color: var(--etiqueta);
}
button.primario kbd.tecla, button.peligro-lleno kbd.tecla, .fx-boton.solido kbd.tecla {
  background: transparent; color: var(--primario-texto);
  border-color: color-mix(in srgb, var(--primario-texto) 50%, transparent);
}
button:disabled kbd.tecla { opacity: .7; }

.lector { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-panel); padding: 20px; margin-bottom: 16px; text-align: center; }
.lector > label { font-family: var(--fuente-titulo); font-size: 24px; font-weight: 500; margin-bottom: 12px; }
.lector input#folio {
  height: 56px; width: 100%; margin: 0; text-align: center; font-family: var(--fuente-mono);
  font-size: 26px; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radio);
}
.lector-botones { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin: 12px 0; }
.lector-botones button { height: 56px; font-size: 16px; }

/* El veredicto ocupa la pantalla: color plano, palabra ≥ 64 px, instrucción. */
.veredicto {
  position: fixed; inset: 0; z-index: 80; padding: 32px 24px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px;
  color: var(--primario-texto); background: var(--rojo);
}
.veredicto.pasa { background: var(--verde); }
/* «Otro día»: el cian del manual, y encima la tinta, no el blanco. Con blanco
   la palabra gigante se leía y la instrucción de 20 px no (~2,8:1). */
.veredicto.otro { background: var(--oro); color: var(--tinta); }
.veredicto .palabra { font-family: var(--fuente-titulo); font-size: clamp(64px, 12vw, 120px); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.veredicto .quien { font-size: 22px; font-weight: 600; }
.veredicto .folio { font-size: 20px; }
.veredicto .instruccion { font-size: 20px; max-width: 30ch; }
.veredicto .toca { margin-top: 24px; font-size: 14px; opacity: .8; }
.veredicto:focus, .veredicto:focus-visible { outline: none; }

/* Taquilla web: el catálogo en cuadrícula. Es de CONSULTA: sin tecla por
   boleto, que sugería un atajo de venta que esta página no tiene. */
.boletos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.boleto { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; min-height: 80px; display: flex; flex-direction: column; gap: 4px; }
.boleto .nombre { font-weight: 600; margin-top: auto; }
.boleto .precio { color: var(--etiqueta); }
tr.nuevo td { animation: entra 1.4s ease-out; }
@keyframes entra { from { background: var(--chip-ok-fondo); } }

.contenido.atenuado > * { opacity: .72; }

/* ── Entrada · una columna, la tarjeta centrada ─────────────────────────── */

.entrada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; }
.entrada .marca-entrada { display: flex; align-items: center; gap: 16px; font-family: var(--fuente-titulo); font-size: 26px; color: var(--bosque); }
.entrada .hueco-franja { width: min(380px, 100%); min-height: 44px; }
.entrada form, .entrada .tarjeta-entrada {
  width: min(380px, 100%); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-panel);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.entrada h1 { margin: 0; font-size: 22px; color: var(--tinta); }
.entrada .pie { color: var(--tenue); font-size: 13px; margin: 0; text-align: center; }
.entrada label { margin: 0; }
.entrada input { width: 100%; }
.entrada button.primario { width: 100%; }
.entrada .con-boton { position: relative; }
.entrada .con-boton input { padding-right: 84px; }
.entrada .con-boton button { position: absolute; right: 4px; bottom: 4px; height: 32px; padding: 0 10px; border: 0; background: none; font-size: 13px; }
.entrada .servidor { font-size: 12px; color: var(--tenue); }

/* --- Botones de fila, con icono ------------------------------------------ */
/* Misma familia que el botón secundario del sistema, en dos tamaños. */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--alto-control);
  background: var(--tarjeta); color: var(--bosque);
  border: 1px solid var(--borde); border-radius: var(--radio-control);
  padding: 0 14px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; line-height: 1; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--marfil); border-color: var(--borde-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.chico { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.oro { border-color: var(--oro); color: var(--oro-tinta); }
.btn.oro:hover:not(:disabled) { background: var(--oro-fondo); }
.btn svg { width: 14px; height: 14px; flex: none; }
.acciones { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Auditoría: qué se registra ─────────────────────────────────────────── */
.audit-grid { display: flex; flex-direction: column; gap: 16px; }
.audit-grupo .audit-titulo { font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); margin: 0 0 6px; }
.audit-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; }
.audit-fila label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; }
.audit-fila svg { width: 13px; height: 13px; color: var(--tenue); }
/* --- Modal --------------------------------------------------------------- */

/* El mismo velo, radio y sombra que la confirmación: un solo diálogo. */
.modal-fondo {
  position: fixed; inset: 0; background: var(--velo-dialogo);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 50;
}
.modal {
  background: var(--tarjeta); border-radius: var(--radio-modal);
  width: min(960px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: var(--sombra-flotante);
}
.modal-cabecera {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--division);
}
.modal-cabecera h2 { margin: 0; font-size: 16px; }
.modal-cabecera .empuje { flex: 1; }
.modal-cuerpo { overflow: auto; padding: 18px; }
.modal-pie {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--division);
  background: var(--marfil); border-radius: 0 0 var(--radio-modal) var(--radio-modal);
}
.modal-pie .empuje { flex: 1; }
.cerrar {
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--tenue); cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.cerrar:hover { background: var(--verde-suave); color: var(--tinta); }
.visor-pdf { width: 100%; height: calc(100vh - 200px); border: 0; border-radius: var(--radio-control); background: var(--visor-fondo); }

/* --- El comprobante, pintado ------------------------------------------- */
/* Sigue la disposicion del PDF que emite el PAC, para que lo que se ve antes
   de timbrar se parezca a lo que sale despues. */

.cfdi { font-size: 13px; color: var(--tinta); }
.cfdi-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radio-control); margin-bottom: 14px; font-size: 13px;
}
.cfdi-marca svg { width: 16px; height: 16px; flex: none; }
.cfdi-marca.prueba { background: var(--chip-pend-fondo); color: var(--chip-pend-tinta); }
.cfdi-marca.real { background: var(--mal-fondo); color: var(--rojo); }
.cfdi-marca.timbrada { background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); }
.cfdi-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.cfdi-cabecera h3 { margin: 0; font-size: 20px; }
.cfdi-folio { text-align: right; }
.cfdi-folio .etiqueta { margin: 0 0 2px; }
.cfdi-folio .valor { font-family: var(--fuente-mono); font-size: 15px; }
.cfdi-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 720px) { .cfdi-partes { grid-template-columns: 1fr; } }
.cfdi-parte { border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 12px 14px; }
.cfdi-parte .etiqueta { margin-bottom: 8px; }
.cfdi-parte dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.cfdi-parte dt { color: var(--tenue); }
.cfdi-parte dd { margin: 0; font-weight: 600; }
.cfdi-parte dd.mono { font-family: var(--fuente-mono); font-weight: 500; }
.cfdi-parte dd.falta { color: var(--rojo); font-weight: 600; }
.cfdi table { font-size: 13px; }
.cfdi-totales { display: flex; justify-content: flex-end; margin-top: 10px; }
.cfdi-totales dl { display: grid; grid-template-columns: max-content max-content; gap: 4px 20px; margin: 0; }
.cfdi-totales dt { color: var(--tenue); text-align: right; }
.cfdi-totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cfdi-totales .total dt, .cfdi-totales .total dd { font-size: 17px; font-weight: 700; color: var(--tinta); padding-top: 6px; border-top: 1px solid var(--borde); }
.cfdi-pago { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--division); }
.cfdi-pago .etiqueta { margin: 0 0 2px; }
.cfdi-impedimento {
  background: var(--mal-fondo); color: var(--rojo); border-radius: var(--radio-control);
  padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
}
.cfdi-uuid { font-family: var(--fuente-mono); font-size: 12px; word-break: break-all; }

/* --- Diseñador del ticket de experiencia (documentacion/34 §3) --------------- */
.tk-cols { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .tk-cols { grid-template-columns: 1fr; } }
.tk-barra { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-add {
  padding: 6px 12px; font-size: 13px; border-radius: 999px; cursor: pointer;
  background: var(--tarjeta); color: var(--etiqueta); border: 1px solid var(--borde);
}
.tk-add:hover { border-color: var(--verde); color: var(--tinta); }
.tk-lista { display: flex; flex-direction: column; gap: 6px; }
.tk-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--tarjeta);
}
.tk-tipo { flex: 0 0 78px; font-size: 12px; font-weight: 700; color: var(--etiqueta); }
.tk-texto { flex: 1 1 auto; min-width: 80px; padding: 6px 9px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--tarjeta); color: var(--tinta); font: inherit; font-size: 13px; }
.tk-relleno { flex: 1 1 auto; }
.tk-fila select { padding: 5px 7px; font-size: 12px; }
.tk-acciones { display: flex; gap: 3px; flex: 0 0 auto; }
.tk-acciones button {
  width: 28px; height: 28px; padding: 0; cursor: pointer; font-size: 13px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--tarjeta); color: var(--tinta);
}
.tk-acciones button:hover:not(:disabled) { background: var(--verde-suave); border-color: var(--verde); }
.tk-acciones button:disabled { opacity: .4; cursor: not-allowed; }
.tk-sucio { font-size: 12px; color: var(--chip-pend-tinta); font-weight: 700; }
.tk-vista { position: sticky; top: 12px; }
.tk-vista-tit { font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--etiqueta); margin-bottom: 8px; }
/* El papel: angosto (~58 mm de aspecto), fondo blanco, tinta negra, mono como
   una térmica. No pretende ser exacto al raster —eso lo da el emulador— sino
   dar una idea fiel de la maqueta al diseñar. */
.tk-papel {
  width: 302px; max-width: 100%; margin: 0 auto; background: var(--papel); color: var(--papel-tinta);
  padding: 14px 16px; border-radius: var(--radio-chico); box-shadow: 0 6px 18px var(--papel-sombra);
  font-family: var(--fuente-mono); line-height: 1.35; word-break: break-word;
}

/* ── Facturación ────────────────────────────────────────────────────────────
   Rediseño del 22 sep 2026, a partir de la maqueta de Claude Design («Panel
   CFDI»). Todo con prefijo fx- para no pisar el resto del panel. Va al FINAL a
   propósito: varias reglas tienen que ganar a las genéricas de los inputs y de
   «label input» de arriba con la misma especificidad. */

.fx { display: flex; flex-direction: column; gap: 20px; }
.fx .mono { font-family: var(--fuente-mono); }

.fx-cabecera {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-tarjeta); padding: 18px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.fx-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-antetitulo { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.fx-cabecera h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.fx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fx-periodo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.fx-periodo .fx-rotulo { font-size: 13px; color: var(--etiqueta); }
input.fx-mes {
  border: 1px solid var(--borde); border-radius: 999px; background: var(--marfil);
  padding: 8px 14px; min-height: 40px; font: inherit; font-weight: 500; color: var(--tinta);
}
.fx-mes-grupo { display: inline-flex; align-items: center; gap: 6px; }
.fx-mes-nav { display: inline-flex; gap: 4px; }
.fx-flecha-mes {
  width: 40px; height: 40px; border: 1px solid var(--borde); border-radius: 999px; background: var(--tarjeta);
  color: var(--bosque); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.fx-flecha-mes svg { width: 18px; height: 18px; }
.fx-flecha-mes:hover:not(:disabled) { background: var(--verde-suave); border-color: var(--verde); }
.fx-flecha-mes:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.fx-flecha-mes:disabled { opacity: .4; cursor: not-allowed; }
.fx-cab .fx-empuje + .fx-chip, .fx-cab .fx-chip:has(+ .fx-empuje) { margin-left: 0; }
.fx-cifra-grande { font-family: var(--fuente-titulo); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.fx-nota {
  background: var(--tarjeta); border: 1px solid var(--borde); border-left: 3px solid var(--foco);
  border-radius: var(--radio-chico); padding: 10px 14px; font-size: 13px; color: var(--etiqueta); margin: 0;
}

.fx-chip {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.fx-chip.pendiente { background: var(--chip-pend-fondo); color: var(--chip-pend-tinta); }
.fx-chip.lista { background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); }
.fx-chip.timbrada { background: var(--bosque); color: var(--primario-texto); }
.fx-chip.revisar { background: var(--mal-fondo); color: var(--mal-tinta); }
.fx-chip.neutro { background: var(--gris-chip); color: var(--etiqueta); }
.fx-chip.real { background: var(--mal-fondo); color: var(--rojo); font-weight: 700; }

/* Pestañas */
.fx-tabs {
  display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
}
.fx-tab {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; background: transparent; color: var(--tinta);
  display: flex; align-items: center; gap: 10px; transition: background .15s;
}
.fx-tab:hover:not(.activa) { background: var(--marfil); }
.fx-tab.activa { background: var(--bosque); color: var(--primario-texto); }
.fx-tab:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.fx-seccion { display: flex; flex-direction: column; gap: 16px; animation: fx-sube .2s ease-out; }
@keyframes fx-sube { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fx-seccion h2 { margin: 0; font-size: 22px; }
.fx-intro { margin: 2px 0 0; color: var(--etiqueta); font-size: 14px; max-width: 62ch; }
.fx-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.fx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fx-tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-tarjeta); min-width: 0; overflow: hidden;
}
.fx-tarjeta.relleno { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; overflow: visible; }
.fx-tarjeta.flota { overflow: visible; position: relative; z-index: 2; }
.fx-cab {
  padding: 14px 22px; border-bottom: 1px solid var(--borde); font-weight: 600;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fx-cab .fx-chip, .fx-cab .fx-empuje { margin-left: auto; }
.fx-fila-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }

label.fx-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tinta); }
label.fx-campo > span:first-child { font-size: 13px; font-weight: 600; color: var(--etiqueta); }
.fx-ayuda { font-size: 13px; color: var(--tenue); }
.fx-duo { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }

input.fx-control, select.fx-control {
  display: block; width: 100%; margin: 0; min-height: 46px;
  border: 1.5px solid var(--borde); border-radius: 10px; background: var(--tarjeta);
  padding: 0 14px; font-size: 15px; color: var(--tinta);
}
select.fx-control { padding: 0 12px; font-size: 14px; }
input.fx-control:hover, select.fx-control:hover { border-color: var(--borde-hover); }
input.fx-control:focus, select.fx-control:focus { border-color: var(--bosque); outline: 3px solid var(--foco); outline-offset: 2px; }
input.fx-control.mono { font-family: var(--fuente-mono); letter-spacing: .04em; }
input.fx-control.mayus { text-transform: uppercase; }
input.fx-control.mayus::placeholder { text-transform: none; }
input.fx-control:disabled, select.fx-control:disabled { opacity: .55; cursor: not-allowed; }
textarea.fx-control {
  display: block; width: 100%; min-height: 64px; padding: 10px 14px; margin: 0;
  border: 1.5px solid var(--borde); border-radius: 10px; font: inherit; color: var(--tinta); background: var(--tarjeta);
}

/* Monto objetivo: la cifra grande es el control principal de la global. */
.fx-monto {
  display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 0 16px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--tarjeta);
  transition: border-color .15s;
}
.fx-monto:hover { border-color: var(--borde-hover); }
.fx-monto:focus-within { border-color: var(--bosque); outline: 3px solid var(--foco); outline-offset: 2px; }
.fx-monto .fx-signo { font-family: var(--fuente-titulo); font-size: 26px; color: var(--tenue); }
.fx-monto .fx-moneda { font-size: 13px; color: var(--tenue); font-weight: 500; }
input.fx-cifra {
  flex: 1; min-width: 0; width: auto; margin: 0; border: 0; outline: 0; background: transparent;
  padding: 8px 0; font-family: var(--fuente-titulo); font-weight: 600; font-size: 30px;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
input.fx-cifra:focus { outline: 0; }
input.fx-cifra:disabled { opacity: .55; }

/* Interruptor «permitir rebasar» */
.fx-interruptor {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; min-height: 64px;
  background: var(--tarjeta); cursor: pointer; font: inherit; color: inherit; transition: background .15s;
}
.fx-interruptor:hover:not(:disabled), .fx-interruptor[aria-checked="true"] { background: var(--marfil); }
.fx-interruptor:disabled { opacity: .55; cursor: not-allowed; }
.fx-interruptor:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.fx-riel {
  flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px;
  background: var(--interruptor-apagado); transition: background .15s;
}
.fx-interruptor[aria-checked="true"] .fx-riel { background: var(--bosque); }
.fx-perilla {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tarjeta); box-shadow: var(--sombra-perilla); transition: transform .15s;
}
.fx-interruptor[aria-checked="true"] .fx-perilla { transform: translateX(20px); }
.fx-texto { display: flex; flex-direction: column; gap: 2px; }
.fx-texto b { font-weight: 600; }

/* Botones */
.fx-boton {
  min-height: 48px; padding: 0 20px; border-radius: 11px; font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s;
}
.fx-boton svg { width: 17px; height: 17px; flex: none; }
.fx-boton.solido { border: 0; background: var(--bosque); color: var(--primario-texto); box-shadow: var(--sombra-boton); }
.fx-boton.solido:hover:not(:disabled) { background: var(--primario-hover); }
.fx-boton.contorno { border: 1.5px solid var(--bosque); background: var(--tarjeta); color: var(--bosque); }
.fx-boton.contorno:hover:not(:disabled) { background: var(--verde-suave); }
.fx-boton.neutro { border: 1.5px solid var(--borde); background: var(--tarjeta); color: var(--tinta); }
.fx-boton.neutro:hover:not(:disabled) { background: var(--marfil); }
.fx-boton.peligro { border: 0; background: var(--rojo); color: var(--primario-texto); }
.fx-boton.chico { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.fx-boton.ancho { width: 100%; }
.fx-boton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.fx-boton:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.fx-boton .fx-sub { font-size: 12px; font-weight: 400; color: var(--tenue); }
.fx-enlace {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--bosque); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.fx-en-vivo {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px;
  border-radius: 10px; background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); font-size: 13px;
}
.fx-en-vivo svg { width: 16px; height: 16px; flex: none; }
.fx-en-vivo.calculando { background: var(--marfil); color: var(--etiqueta); }

/* Cómo se emite la global */
.fx-como { border-top: 1px solid var(--borde); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.fx-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.fx-dl dt { color: var(--tenue); }
.fx-dl dd { margin: 0; font-weight: 500; }
.fx-editar > summary, .fx-mas > summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bosque);
  text-decoration: underline; text-underline-offset: 3px; width: max-content;
}
.fx-editar > summary::-webkit-details-marker, .fx-mas > summary::-webkit-details-marker { display: none; }
.fx-editar[open] > summary, .fx-mas[open] > summary { margin-bottom: 12px; }
.fx-rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.fx-casillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 16px; margin: 12px 0; }
label.fx-casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); cursor: pointer; }
label.fx-casilla input { width: 16px; height: 16px; margin: 0; display: inline-block; flex: none; }

/* Vista previa de la selección */
.fx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-bottom: 1px solid var(--borde); }
.fx-stat { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--borde); color: var(--tinta); }
.fx-stat:last-child { border-right: 0; }
.fx-stat .fx-rot { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.fx-stat .fx-valor { font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-stat .fx-det { font-size: 13px; color: var(--etiqueta); }
.fx-stat.falta { background: var(--falta-fondo); }
.fx-stat.falta .fx-rot, .fx-stat.falta .fx-valor, .fx-stat.falta .fx-det { color: var(--tinta); }
.fx-stat.pasa { background: var(--oro-fondo); }
.fx-stat.pasa .fx-rot, .fx-stat.pasa .fx-valor, .fx-stat.pasa .fx-det { color: var(--oro-tinta); }
.fx-stat.exacto { background: var(--chip-ok-fondo); }
.fx-stat.exacto .fx-rot, .fx-stat.exacto .fx-valor, .fx-stat.exacto .fx-det { color: var(--chip-ok-tinta); }
.fx-avance { padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--borde); }
.fx-avance-rot { display: flex; justify-content: space-between; font-size: 13px; color: var(--etiqueta); }
.fx-avance-rot b { font-family: var(--fuente-titulo); font-weight: 600; font-size: 15px; color: var(--tinta); }
.fx-barra { height: 10px; border-radius: 999px; background: var(--riel); overflow: hidden; }
.fx-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--verde); transition: width .25s; }
.fx-barra > span.pasa { background: var(--oro); }
.fx-bloque { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.fx-lista { list-style: none; margin: 0; padding: 0; }
.fx-fila-mini {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px 14px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--division-fila); font-size: 13px;
}
/* Con casilla delante (las tarjetas por depositar, doc 54 §9): toda la fila la marca. */
.fx-fila-mini.con-casilla { grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto; cursor: pointer; }
.fx-fila-mini.con-casilla input { width: 18px; height: 18px; accent-color: var(--verde); margin: 0; }
.fx-elipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fx-tenue { color: var(--tenue); }
.fx-importe { font-family: var(--fuente-titulo); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: 16px; }
.fx-vacio { padding: 44px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--tenue); }
.fx-vacio svg { width: 36px; height: 36px; color: var(--borde-hover); }
.fx-vacio b { font-weight: 500; color: var(--tinta); }
.fx-vacio span { font-size: 14px; max-width: 40ch; }

/* Barra de acciones */
.fx-acciones {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
}
.fx-estado { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; font-size: 13px; color: var(--etiqueta); }
.fx-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-botones.columna { flex-direction: column; }

/* Buscador de folios */
.fx-buscador { position: relative; }
.fx-caja {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--tarjeta); transition: border-color .15s;
}
.fx-caja:hover { border-color: var(--borde-hover); }
.fx-caja:focus-within { border-color: var(--bosque); outline: 3px solid var(--foco); outline-offset: 2px; }
.fx-caja > svg { width: 18px; height: 18px; flex: none; color: var(--tenue); }
input.fx-busqueda {
  flex: 1; min-width: 0; width: auto; margin: 0; border: 0; outline: 0; background: transparent;
  padding: 10px 0; font-size: 15px; color: var(--tinta);
}
input.fx-busqueda:focus { outline: 0; }
.fx-limpiar {
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--tenue);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fx-limpiar:hover { background: var(--marfil); }
.fx-limpiar[hidden] { display: none; }
.fx-limpiar svg { width: 16px; height: 16px; }
.fx-ejemplos { display: block; margin-top: 8px; font-size: 13px; color: var(--tenue); }
.fx-sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; overflow: hidden;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-flotante); animation: fx-sube .15s ease-out;
}
.fx-sug-cab {
  padding: 10px 14px; border-bottom: 1px solid var(--division-fila); font-size: 12px; color: var(--tenue);
  display: flex; justify-content: space-between; gap: 12px;
}
.fx-sug-lista { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.fx-sug {
  width: 100%; text-align: left; border: 0; border-radius: 9px; background: var(--tarjeta);
  padding: 10px 12px; min-height: 56px; cursor: pointer; font: inherit; color: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
}
.fx-sug:hover:not(:disabled), .fx-sug.activa { background: var(--marfil); }
.fx-sug:disabled { opacity: .5; cursor: not-allowed; }
.fx-sug .fx-importe { grid-row: span 2; font-size: 18px; }
.fx-sug-folio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-family: var(--fuente-mono); font-weight: 500; font-size: 14px; }
.fx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--etiqueta); }
.fx-meta i { font-style: normal; color: var(--separador); }
.fx-sin-sug { padding: 20px 14px; font-size: 14px; color: var(--tenue); }

/* Folios elegidos */
.fx-tabla-cab, .fx-elegido {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto 44px;
  gap: 14px; align-items: center; padding: 12px 22px;
}
.fx-tabla-cab { border-bottom: 1px solid var(--borde); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.fx-elegido { border-bottom: 1px solid var(--division-fila); animation: fx-sube .15s ease-out; }
.fx-elegido .fx-importe { font-size: 19px; }
.fx-dos-lineas { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.fx-quitar {
  width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta);
  color: var(--tenue); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.fx-quitar svg { width: 17px; height: 17px; }
.fx-quitar:hover:not(:disabled) { border-color: var(--rojo); color: var(--rojo); background: var(--mal-fondo); }
.fx-quitar:disabled { opacity: .45; cursor: not-allowed; }
.fx-pie { padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--tenue); }
.fx-total-linea { display: flex; align-items: baseline; gap: 8px; color: var(--etiqueta); }
.fx-total-linea b { font-family: var(--fuente-titulo); font-weight: 600; font-size: 22px; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Totales de la individual */
.fx-totales { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 14px; align-items: baseline; }
.fx-totales dt { color: var(--tenue); }
.fx-totales dd { margin: 0; font-family: var(--fuente-titulo); font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.fx-totales .fx-total { border-top: 1px solid var(--borde); padding-top: 10px; font-weight: 600; color: var(--tinta); }
.fx-totales dd.fx-total { font-size: 30px; line-height: 1; }

/* Desplegables de abajo: sacar folios a mano y comprobantes */
.fx-desplegable > summary {
  list-style: none; cursor: pointer; padding: 16px 22px; font-weight: 600;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fx-desplegable > summary::-webkit-details-marker { display: none; }
.fx-desplegable > summary .fx-flecha { margin-left: auto; transition: transform .15s; color: var(--tenue); }
.fx-desplegable[open] > summary .fx-flecha { transform: rotate(180deg); }
.fx-desplegable > summary .fx-flecha svg { width: 18px; height: 18px; display: block; }
.fx-desplegable[open] > summary { border-bottom: 1px solid var(--borde); }
.fx-cuerpo { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.fx-tabla { overflow-x: auto; }
.fx-cancelar { background: var(--mal-fondo); border-bottom: 1px solid var(--borde); }
.fx-tabla tr.sacada td { background: var(--marfil); }

/* Diálogo de confirmación del timbrado */
.fx-dialogo-fondo {
  position: fixed; inset: 0; z-index: 60; padding: 20px; background: var(--velo-dialogo);
  display: flex; align-items: center; justify-content: center;
}
.fx-dialogo {
  width: 100%; max-width: 460px; padding: 26px; border-radius: var(--radio-modal); background: var(--tarjeta);
  box-shadow: var(--sombra-flotante); display: flex; flex-direction: column; gap: 16px; animation: fx-sube .18s ease-out;
}
.fx-dialogo h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.fx-dialogo .fx-dl { background: var(--marfil); border-radius: 12px; padding: 14px 16px; }
.fx-dialogo .fx-dl dd.fx-importe { text-align: left; font-size: 20px; }
.fx-dialogo p { margin: 0; font-size: 14px; color: var(--etiqueta); }
.fx-dialogo .fx-botones { justify-content: flex-end; }

/* ── Reportes ───────────────────────────────────────────────────────────────
   Rediseño del 23 sep 2026, a partir de la maqueta de Claude Design («Reportes
   navegables con gráficas»). Prefijo rp-; reutiliza fx-chip, fx-boton,
   fx-riel/fx-perilla y fx-barra de Facturación para que sean la misma familia. */

.rp { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.rp-nav { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.rp-grupo-tit {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--etiqueta); padding: 0 12px 8px;
}
.rp-grupo-tit span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tenue); }
.rp-lista { display: grid; gap: 4px; }
.rp-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 10px 12px;
  text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--tinta); font: inherit; cursor: pointer; transition: background .12s;
}
.rp-item:hover { background: var(--tarjeta); }
.rp-item.activo { background: var(--tarjeta); border-color: var(--borde); box-shadow: var(--sombra-tarjeta); color: var(--bosque); }
.rp-item:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.rp-item-tit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.rp-num { flex: none; width: 18px; font-family: var(--fuente-mono); font-size: 11px; color: var(--tenue); }
.rp-item-desc { padding-left: 26px; font-size: 12.5px; line-height: 1.35; color: var(--tenue); }

.rp-principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rp-tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-tarjeta); min-width: 0; }

.rp-cabecera { padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; justify-content: space-between; }
.rp-titulos { flex: 1 1 320px; min-width: 0; }
.rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--tenue); }
.rp-cabecera h1 { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.rp-cabecera p { margin: 4px 0 0; max-width: 62ch; font-size: 14px; color: var(--etiqueta); }
.rp-rango { display: inline-block; margin-top: 8px; font-family: var(--fuente-mono); font-size: 12.5px; color: var(--tenue); }
.rp-controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rp-periodos { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--borde); border-radius: 11px; background: var(--marfil); }
.rp-periodo {
  min-height: 38px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--etiqueta); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.rp-periodo:hover:not(.activo) { color: var(--bosque); }
.rp-periodo.activo { background: var(--bosque); color: var(--primario-texto); }
.rp-periodo:focus-visible, .rp-interruptor:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.rp-interruptor {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 8px;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--tarjeta); color: var(--tinta);
  font: inherit; font-weight: 500; font-size: 13.5px; cursor: pointer;
}
.rp-interruptor:hover { border-color: var(--verde); }
.rp-interruptor .fx-riel { width: 40px; height: 24px; }
.rp-interruptor .fx-perilla { width: 18px; height: 18px; }
.rp-interruptor[aria-checked="true"] .fx-riel { background: var(--verde); }
.rp-interruptor[aria-checked="true"] .fx-perilla { transform: translateX(16px); }

/* Resumen + gráfica */
.rp-fila { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.4fr); gap: 16px; align-items: stretch; }
.rp-resumen { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rp-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--etiqueta); }
.rp-cifra {
  font-family: var(--fuente-titulo); font-weight: 500; font-size: clamp(26px, 2.2vw, 40px); line-height: 1.1;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--tinta);
  /* Se corta entre palabras («+$152.81 / día»), NUNCA dentro de una cifra. */
  overflow-wrap: normal; word-break: keep-all;
}
.rp-cifra.mal { color: var(--rojo); }
.rp-nota { font-size: 13.5px; color: var(--etiqueta); }
.rp-delta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--division); display: flex; flex-direction: column; gap: 6px; }
.rp-delta small { font-size: 12px; color: var(--tenue); }
.rp-delta-chip {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; font-weight: 600; font-size: 13px;
}
.rp-delta-chip.bien { background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); }
.rp-delta-chip.mal { background: var(--mal-fondo); color: var(--mal-tinta); }
.rp-delta-chip.igual { background: var(--marfil); border: 1px solid var(--borde); color: var(--etiqueta); }

.rp-grafica { padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-grafica-cab { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-weight: 600; }
.rp-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; font-weight: 400; color: var(--etiqueta); }
.rp-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.rp-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.rp-leyenda i.linea { height: 3px; border-radius: 2px; }
.rp-leyenda i.discontinua { height: 0; border-radius: 0; border-top: 2px dashed var(--oro-tinta); background: none !important; }
.rp-leyenda i.banda { opacity: .3; }
.rp-lienzo { position: relative; }
.rp-lienzo svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; }
.rp-rejilla { stroke: var(--division); stroke-width: 1; }
.rp-cero { stroke: var(--etiqueta); stroke-width: 1.5; }
.rp-eje, .rp-eje-x { font-size: 11px; fill: var(--tenue); }
.rp-eje { font-family: var(--fuente-mono); }
.rp-eje-x { font-family: var(--fuente); }
.rp-banda { fill: var(--oro); fill-opacity: .13; }
.rp-serie { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; }
.rp-recta { fill: none; stroke: var(--oro-tinta); stroke-width: 2; stroke-dasharray: 7 5; }
.rp-punto { fill: var(--verde); stroke: var(--tarjeta); stroke-width: 1.5; }
.rp-lienzo [data-tip] { cursor: pointer; transition: opacity .12s; }
.rp-lienzo [data-tip]:hover { opacity: .8; }
.rp-tip {
  position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 10px)); padding: 6px 10px;
  border-radius: 8px; background: var(--tinta); color: var(--primario-texto); white-space: nowrap;
  pointer-events: none; box-shadow: var(--sombra-flotante);
}
.rp-tip[hidden] { display: none; }
.rp-tip span { display: block; font-size: 11.5px; color: var(--barra-sub); }
.rp-tip b { font-family: var(--fuente-titulo); font-size: 16px; font-weight: 500; }
.rp-pista { font-size: 12px; color: var(--tenue); }

/* Tabla */
.rp-tabla-cab { padding: 16px 22px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; font-weight: 600; }
.rp-tabla-cab span { font-family: var(--fuente-mono); font-size: 12.5px; font-weight: 400; color: var(--tenue); }
.rp-tabla { overflow-x: auto; }
.rp-tabla table { min-width: 520px; font-size: 13.5px; }
.rp-tabla th { border-bottom: 2px solid var(--borde); white-space: nowrap; }
.rp-tabla th.rp-num, .rp-tabla td.rp-num { text-align: right; }
.rp-tabla td.rp-num { font-family: var(--fuente-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-tabla .rp-mono { font-family: var(--fuente-mono); font-size: 13px; }
.rp-tabla .mal { color: var(--rojo); font-weight: 600; }
.rp-tabla .bien { color: var(--chip-ok-tinta); font-weight: 600; }
.rp-tabla .info { color: var(--oro-tinta); font-weight: 600; }
.rp-tabla .fuerte { font-weight: 600; }
.rp-tabla tfoot td { border-top: 2px solid var(--borde); background: var(--marfil); font-weight: 600; }
.rp-tabla-nota { margin: 0; padding: 10px 22px 14px; font-size: 12.5px; color: var(--tenue); }

/* Estados: apagada, sin datos, cargando */
.rp-estado { padding: 26px 24px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.rp-estado-texto { flex: 1 1 320px; min-width: 0; }
.rp-estado h2 { margin: 12px 0 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.rp-estado p { margin: 10px 0 0; max-width: 58ch; color: var(--etiqueta); }
.rp-estado .fx-botones { margin-top: 16px; }
.rp-medidor {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border: 1px dashed var(--borde); border-radius: 12px; background: var(--marfil); color: var(--tenue); font-size: 12.5px;
}
.rp-medidor > div:first-child { display: flex; justify-content: space-between; }
.rp-medidor .mono { font-family: var(--fuente-mono); }
.rp-medidor .fx-barra > span { background: var(--aviso-tinta); }
.rp-esqueleto { padding: 22px; min-height: 220px; display: flex; flex-direction: column; gap: 14px; }
.rp-hueso { border-radius: 6px; background: var(--riel); animation: rp-pulso 1.4s ease-in-out infinite; }
@keyframes rp-pulso { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.rp-barras-esq { display: flex; align-items: flex-end; gap: 8px; height: 180px; }
.rp-barras-esq .rp-hueso { flex: 1; border-radius: 6px 6px 0 0; }

/* Ficha «de dónde sale este número» */
.rp-ficha { padding: 20px 22px; }
.rp-ficha-cab { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; justify-content: space-between; }
.rp-ficha-cab h3 { margin: 0; font-size: 20px; font-weight: 500; }
.rp-ficha-cab p { margin: 2px 0 0; font-size: 13px; color: var(--tenue); }
.rp-ficha dl { margin: 16px 0 0; display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); border-top: 1px solid var(--division); }
.rp-ficha dt {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--division);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--etiqueta);
}
.rp-ficha dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--division); color: var(--tinta); overflow-wrap: anywhere; }
.rp-ficha dd.ecuacion { padding: 10px 12px; background: var(--marfil); font-family: var(--fuente-mono); font-size: 13px; white-space: pre-wrap; }
.rp-ficha dd.mono { font-family: var(--fuente-mono); font-size: 13px; }
.rp-ficha dd.no-ve { color: var(--aviso-tinta); }
.fx-boton.copiado { border-color: var(--verde); background: var(--chip-ok-fondo); color: var(--chip-ok-tinta); }

@media (max-width: 1180px) {
  .rp { grid-template-columns: 1fr; }
  .rp-nav { position: static; }
  .rp-lista { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
@media (max-width: 900px) {
  .rp-fila { grid-template-columns: 1fr; }
}


/* ── Las secciones aprobadas (Facturación, Reportes, el comprobante) ────────
   conservan su tabla de encabezado neutro: el verde del sistema es para las
   tablas de operación. Solo se alinean radio, fuente y foco. */
.fx th, .rp th, .cfdi th {
  position: static; height: auto; background: none; color: var(--etiqueta);
  padding: 8px 10px; border-bottom: 1px solid var(--division);
}
.fx td, .rp td, .cfdi td { height: auto; padding: 10px; }
.fx tbody tr:nth-child(even) td, .rp tbody tr:nth-child(even) td, .cfdi tbody tr:nth-child(even) td { background: none; }
:where(.fx, .rp) :where(input, select) { height: auto; }
/* El botón del sistema (alto fijo, una línea) no aplica dentro de las
   secciones aprobadas: sus botones traen su propia medida. */
:where(.fx, .rp, .cfdi, .modal) button { height: auto; white-space: normal; }
.rp-item { align-items: stretch; }

/* ── Foto y cupo de cada producto (documentacion/43 F1.6 y 36 §5) ──────────
   La miniatura va en la proporción de la tarjeta de la taquilla (16:9) y se
   RECORTA, no se estira (object-fit: cover). El marco del panel lateral es el
   encuadre que se sube (16:9), con la franja central 3:1 que pinta la tarjeta
   de Vender en la taquilla marcada: lo sombreado no sale en la tarjeta. */
.celda-producto { display: flex; gap: 12px; align-items: center; }
.foto-mini {
  flex: none; width: 64px; height: 36px; border-radius: var(--radio-chico); overflow: hidden;
  background: var(--marfil); border: 1px solid var(--borde);
}
.foto-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-mini.vacia { border-style: dashed; background: var(--tarjeta); }
.foto-marco {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 6px; overflow: hidden;
  border-radius: var(--radio-control); border: 1px solid var(--borde); background: var(--marfil);
}
.foto-marco.vacia { border-style: dashed; }
.foto-marco.se-quita { border-color: var(--rojo); }
.foto-marco img, .foto-marco canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-marco canvas { cursor: grab; touch-action: none; }
/* `hidden` tiene que ganarle al display de arriba: sin esto, el lienzo, los
   controles de encuadre y «Quitar» se veían aunque no hubiera foto. */
.foto-marco [hidden], .foto-controles[hidden], .foto-botones [hidden] { display: none; }
/* La franja 3:1 que enseña la TARJETA de Vender en la taquilla: lo sombreado
   arriba y abajo existe en la foto pero no se ve en la tarjeta. */
.foto-guia { position: absolute; inset: 0; pointer-events: none; }
.foto-guia::before, .foto-guia::after {
  content: ""; position: absolute; left: 0; right: 0; height: 20.37%;
  background: color-mix(in srgb, var(--tinta) 38%, transparent);
}
.foto-guia::before { top: 0; }
.foto-guia::after { bottom: 0; }
.foto-marco canvas:active { cursor: grabbing; }
.foto-leyenda {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px;
  text-align: center; font-size: 13px; font-weight: 400; color: var(--tenue);
}
.foto-controles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.foto-zoom { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; }
.foto-zoom input { width: 160px; accent-color: var(--bosque); }
.foto-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.opciones-cupo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-weight: 400; }
.opciones-cupo .opcion { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; white-space: nowrap; }
.opciones-cupo input.corto { width: 96px; }
.opciones-cupo input[type="radio"] { accent-color: var(--bosque); }
ul.cupos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.cupos li { display: grid; gap: 4px; }
.cupo-cab { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.riel-cupo { height: 6px; border-radius: 3px; background: var(--riel); overflow: hidden; }
.riel-cupo span { display: block; height: 100%; background: var(--verde); }
.riel-cupo.aviso span { background: var(--oro); }
.riel-cupo.mal span { background: var(--rojo); }

/* App interna (documentacion/57 §9): el código de alta de un teléfono. El QR
   va oscuro sobre blanco con su zona de silencio (qrSVG ya la deja), porque
   un lector de teléfono no lee uno invertido ni uno sobre marfil con poco
   contraste; el token, en Geist Mono y grande, para dictarlo o teclearlo. */
.qr-alta { width: 184px; padding: 8px; background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 8px; flex: none; }
.qr-alta svg { display: block; width: 100%; height: auto; }
.codigo-alta { font-size: 20px; letter-spacing: 0.04em; color: var(--bosque); word-break: break-all; }

/* ── EN EL CELULAR (doc 65, H-06) ───────────────────────────────────────────
   A 390 px el menú lateral fijo se comía un sexto del ancho, la barra empujaba
   «Salir» y el tipo de cambio fuera de la pantalla, y Negocio pintaba sus
   tarjetas en tres columnas con la cifra cortada («$4,…»): justo lo que la
   junta mira en el teléfono. Aquí el menú pasa a una tira arriba (solo
   iconos, con desplazamiento lateral), la barra se acomoda en dos renglones y
   las tarjetas van de dos en dos, con «Ingresos de hoy» a todo lo ancho. */
@media (max-width: 560px) {
  .marco, .marco.plegado { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: static; height: auto; flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; overflow-y: hidden; padding: 6px 8px;
  }
  .menu-logo, .menu-grupo, .menu-pie, .menu-item span.nombre, .menu-marca small { display: none; }
  .menu-huella { display: block; width: 28px; height: 28px; }
  .menu-marca { padding: 0 6px 0 0; }
  .menu-item { width: auto; flex: none; height: 36px; padding: 0 9px; position: relative; }
  .menu-alerta { position: absolute; top: 2px; right: 2px; height: 8px; min-width: 8px; padding: 0; font-size: 0; }
  .barra-sup { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; gap: 10px; }
  .barra-sup .titulo { flex: 1 1 100%; }
  .conexion { margin-left: 0; }
  .usuario { padding-left: 8px; }
  .usuario div { display: none; }
  .franjas { padding: 10px 12px 0; }
  .contenido { padding: 12px; }
  .kpis, .kpis.inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpis.inicio > :first-child { grid-column: 1 / -1; }
  .kpi { height: auto; min-height: 96px; padding: 12px; gap: 6px; }
  .kpi .valor { font-size: clamp(18px, 6.2vw, 26px); }
  .kpis.inicio > :first-child .valor { font-size: 32px; }
}