/* ══════════════════════════════════════════════════════════════════════
   CUBIERTO · Sistema de diseño — identidad Cubierto v2
   Manual de marca v2.0 (04·08·2026)

   Reglas duras del manual, y no se negocian en ninguna vista:
     · Naranja --naranja = acción principal y acentos. NUNCA como texto
       bajo 18px (2.8:1 sobre blanco): el naranja de texto es --naranja-txt.
     · Azul --azul = marca, títulos, enlaces y el botón de operación.
     · Radios --radio-s/-m/-l (8/12/18). Sombras --sombra-1/2/3, tintadas
       de azul; --sombra-cta (naranja) solo en .btn-cta.
     · Degradado leve de fondo (body::before). Topbar de vidrio.
     · Grilla base de 4 px. Todo se alinea o no entra.
     · Sin líneas verticales en tablas. La hairline separa filas.
     · La doble regla cierra todo total: herencia del territorio Boleta,
       hoy gesto propio del dominio.
     · El color solo aparece cuando significa algo. Nunca decora.
     · Toda cifra en monoespaciada, alineada a la derecha.

   Si una vista necesita un estilo que no está acá, se agrega acá — no
   con style= en el HTML. Ese fue exactamente el problema que se arregló:
   había 1.133 declaraciones inline y 21 tamaños de letra distintos.
   ══════════════════════════════════════════════════════════════════════ */

@import url("/assets/fonts.css?v=2");

/* ── Tokens ──────────────────────────────────────────────────────── */
:root, :root[data-theme="light"] {
  color-scheme: light;

  /* Neutros. El nombre de la variable se mantiene a propósito: lo usan
     casi mil declaraciones (y los <style> embebidos de 39 vistas), así que
     renombrarlo sería mover medio sistema para no ganar nada. Lo que
     cambia es el valor, no lo que significa. Los grises salen de la paleta
     de marca (#F4F6F9 / #E1E6EB / #4F5D75) con sesgo azul. */
  --papel:    #ffffff;   /* superficie de tarjetas; la página la pinta el degradado */
  --papel-2:  #F4F6F9;   /* cabeceras, superficies secundarias */
  --papel-3:  #E8EDF3;   /* rayado y tramas */
  /* La zebra va aparte de las superficies: con el mismo gris que una
     tarjeta, sobre blanco no se distinguía y la tabla perdía el renglón. */
  --zebra:    #EFF3F8;
  --linea:    #E1E6EB;   /* línea normal: el borde de marca */
  --linea-f:  #C2CCD6;   /* línea fuerte; la sombra asume el rol estructural */
  --tinta-d:  #4F5D75;   /* gris profesional de la marca */
  --tinta:    #1A2B42;   /* navy-pizarra: casi negro, emparentado con el azul */

  /* Grosor de borde. Los contenedores vuelven a 1 px: la sombra suave
     hace el trabajo estructural que antes hacía el marco de 2 px. */
  --borde:    1px;
  --borde-f:  1px;

  /* Acentos de marca. El azul es marca, título, enlace y botón de
     operación; el naranja es LA acción y los acentos. El naranja nunca
     va como texto bajo 18px (2.8:1): para texto está --naranja-txt. */
  --azul:     #004E89;   /* marca, enlace, botón estándar, cifra destacada */
  --azul-ink: #ffffff;
  --azul-bg:  #E9F1F8;
  --naranja:       #FF6B35;   /* acción principal (.btn-cta), acentos, focos */
  --naranja-hover: #E55722;
  --naranja-bg:    #FFF0EA;
  --naranja-txt:   #C2410C;   /* único naranja permitido como texto chico (4.9:1) */
  --rojo:     #DC2626;   /* descuadre, merma, anulación, error (4.8:1) */
  --rojo-bg:  #FDECEC;

  /* Funcionales — solo interfaz, nunca marca. Las variantes de texto van
     oscurecidas para AA; los saturados (#10B981/#F59E0B/#0EA5E9) solo
     pueden aparecer como fondo o acento gráfico, jamás como texto. */
  --cuadra:   #047857;
  --cuadra-bg:#E2F6EE;
  --revisar:  #B45309;
  --revisar-bg:#FCF1D8;
  --info:     #0369A1;
  --info-bg:  #E0F2FE;

  /* Radios y sombras de la identidad v2 */
  --radio-s: 8px;  --radio-m: 12px;  --radio-l: 18px;  --radio-pill: 999px;
  --sombra-1: 0 2px 8px rgba(0, 78, 137, .04);
  --sombra-2: 0 6px 18px rgba(0, 78, 137, .07);
  --sombra-3: 0 12px 30px rgba(0, 78, 137, .12);
  --sombra-cta: 0 8px 20px rgba(255, 107, 53, .25);
  --degradado: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 45%, #F0F4F8 100%);
  --vidrio: rgba(255, 255, 255, .85);
  --transicion: .25s cubic-bezier(.4, 0, .2, 1);

  /* Grilla base de 4 px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  --ui:   "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tit:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --num:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Nombres del sistema anterior. Siguen vivos porque quedan estilos
     inline que los invocan; sin esto se resuelven a nada y el texto
     desaparece —un enlace blanco sobre fondo claro—. Se van cuando se
     limpie el último style= a mano. */
  --acc: var(--azul);      --acc-ink: var(--azul-ink);  --acc-soft: var(--azul-bg);
  --mut: var(--tinta-d);   --bg: var(--papel);          --card: var(--papel-2);
  --line: var(--linea);    --txt: var(--tinta);
  --bad: var(--rojo);      --bad-soft: var(--rojo-bg);
  --warn: var(--revisar);  --warn-soft: var(--revisar-bg);
  --ok: var(--cuadra);     --ok-soft: var(--cuadra-bg);
  --sombra: var(--sombra-1);
}

/* El oscuro sigue al claro: grises fríos en vez de neutros cálidos, y la
   misma línea reforzada. Si solo se aclarara el modo claro, cambiar de
   tema se sentiría como cambiar de sistema. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --papel:    #10161E;
  --papel-2:  #19212D;
  --papel-3:  #232E3E;
  --zebra:    #141B25;
  --linea:    #2C3950;
  --linea-f:  #46556E;
  --tinta-d:  #97A5BA;
  --tinta:    #EDF2F8;
  --azul:     #6BA6DF;
  --azul-ink: #0F1620;
  --azul-bg:  #16283C;
  --naranja:       #FF7E4F;
  --naranja-hover: #FF9268;
  --naranja-bg:    #3A2318;
  --naranja-txt:   #FFA37D;
  --rojo:     #F28B82;
  --rojo-bg:  #33201E;
  --cuadra:   #57C99B;
  --cuadra-bg:#14291F;
  --revisar:  #E8B45C;
  --revisar-bg:#2C2414;
  --info:     #7CC7F0;
  --info-bg:  #12293A;
  /* Sombra azul sobre fondo oscuro no se ve: acá tintan a negro. */
  --sombra-1: 0 2px 8px rgba(0, 0, 0, .35);
  --sombra-2: 0 6px 18px rgba(0, 0, 0, .4);
  --sombra-3: 0 12px 30px rgba(0, 0, 0, .5);
  --sombra-cta: 0 8px 20px rgba(255, 107, 53, .2);
  --degradado: linear-gradient(145deg, #10161E 0%, #121A26 45%, #152030 100%);
  --vidrio: rgba(16, 22, 30, .85);
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Escala de letra por dispositivo. Sube el tamaño base y con él todo lo
   que está en em/rem; los px sueltos de una vista puntual no se mueven,
   pero el cuerpo del sistema sí, que es lo que se lee de lejos. */
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: var(--cuerpo, 15px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* El degradado leve de la marca vive en un pseudo fijo, no en el body:
   background-attachment: fixed repinta entero en cada scroll de móvil. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--degradado);
}
:root[data-letra="grande"] { --cuerpo: 17px; }
:root[data-letra="enorme"] { --cuerpo: 19px; }
:root[data-letra="grande"] .tabla td,
:root[data-letra="grande"] table td { font-size: 15px; }
:root[data-letra="enorme"] .tabla td,
:root[data-letra="enorme"] table td { font-size: 17px; }
:root[data-letra="grande"] .btn { min-height: 44px; }
:root[data-letra="enorme"] .btn { min-height: 50px; font-size: 16px; }

/* Los tres botones de tamaño van pegados: es un control, no tres. Solo
   los extremos llevan radio; el hover no levanta un botón soldado. */
.grupo-letra { display: inline-flex; }
.grupo-letra .btn { border-right-width: 0; font-family: var(--num); padding-left: var(--e3); padding-right: var(--e3); border-radius: 0; box-shadow: none; }
.grupo-letra .btn:first-child { border-radius: var(--radio-s) 0 0 var(--radio-s); }
.grupo-letra .btn:last-child { border-right-width: 1px; border-radius: 0 var(--radio-s) var(--radio-s) 0; }
.grupo-letra .btn:hover { transform: none; box-shadow: none; }
.grupo-letra .btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

a { color: var(--azul); text-underline-offset: 2px; transition: color var(--transicion); }
a:hover { text-decoration: underline; color: var(--naranja-txt); }
::selection { background: var(--azul); color: var(--azul-ink); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* ── Tipografía ───────────────────────────────────────────────────
   Los títulos van en azul de marca y peso alto: es la voz tipográfica
   de la identidad v2 (el color de marca escribe, el naranja actúa). */
h1, .h1 {
  font-family: var(--tit); font-weight: 800; font-size: 22px;
  line-height: 1.3; letter-spacing: -.02em; margin: 0;
  color: var(--azul);
}
h2, .h2 {
  font-family: var(--tit); font-weight: 700; font-size: 15px;
  line-height: 1.3; letter-spacing: 0; margin: 0 0 var(--e3);
  color: var(--azul);
}
h3 {
  font-family: var(--tit); font-weight: 700; font-size: 13px;
  line-height: 1.4; margin: 0 0 var(--e2);
}
p { margin: 0 0 var(--e3); }
.sec {
  font-size: 13px; line-height: 1.5; color: var(--tinta-d);
}
.et {
  font-family: var(--num); font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tinta-d);
}

/* Cifras: mono, tabular, derecha. El peso no lleva decimales. */
.num, td.num, .cifra {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 13px; text-align: right; white-space: nowrap;
}
.cifra-d {                       /* cifra destacada */
  font-family: var(--num); font-weight: 500; font-size: 28px;
  line-height: 1.2; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.neg { color: var(--rojo); }     /* negativo: signo menos real, en rojo */
.uni { color: var(--tinta-d); }  /* unidad o porcentaje, tras espacio fino */
.aus { color: var(--tinta-d); }  /* dato ausente: raya, nunca celda vacía */

/* ── Shell ───────────────────────────────────────────────────────── */
/* La navegación pasó de una columna lateral fija a una barra superior con
   mega menú. La columna se comía 224 px permanentes: en un listado de
   inventario con nueve columnas eso era la diferencia entre leer la tabla
   y scrollear de lado. Arriba ocupa 48 px y solo mientras está desplegada. */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e5);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: var(--borde) solid var(--linea);
  box-shadow: var(--sombra-1);
  position: sticky; top: 0; z-index: 60;
}
/* Tablet vieja sin blur: barra opaca, mismo dibujo. */
@supports not (backdrop-filter: blur(12px)) {
  .topbar { background: var(--papel); }
}
.topbar .sep { flex: 1; }
.topbar-marca { display: flex; align-items: center; padding: var(--e2) var(--e4) var(--e2) 0; text-decoration: none; }
.topbar-marca:hover { text-decoration: none; }
/* La salida al salón: un botón, no un enlace. Se toca con el pulgar en la
   tablet del salón, así que tiene marco y alto de control. Va pegado a la
   marca —el extremo izquierdo es el lugar de "volver" en cualquier
   pantalla— y antes del menú, que es para ir a otra parte. */
.topbar-salon {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 0 var(--e3); min-height: 34px; margin-right: var(--e3);
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  text-decoration: none; transition: var(--transicion);
}
.topbar-salon:hover { background: var(--papel); border-color: var(--naranja); color: var(--naranja-txt); text-decoration: none; }
.topbar-salon .ico { width: 15px; height: 15px; flex: 0 0 15px; }

/* Atajos fijos de la barra: Volver y accesos directos (salón, movimientos).
   Mismo control tocable que el botón del salón. */
.topbar-atajos { display: flex; align-items: center; gap: var(--e2); flex: 0 0 auto; margin-right: var(--e2); }
.topbar-atajo {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 0 var(--e3); min-height: 34px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  text-decoration: none; cursor: pointer; transition: var(--transicion);
}
.topbar-atajo:hover { background: var(--papel-3); border-color: var(--naranja); text-decoration: none; }
.topbar-atajo .ico { width: 15px; height: 15px; flex: 0 0 15px; }

.topbar-fin { display: flex; align-items: center; gap: var(--e3); }
.topbar-dato { font-size: 12.5px; color: var(--tinta-d); white-space: nowrap; }
.topbar-dato b { color: var(--tinta); font-weight: 600; }
.hamburguesa { display: none; }

/* ── Mega menú ───────────────────────────────────────────────────── */
.mega { display: flex; align-items: stretch; }
.mega-tab { position: relative; display: flex; }

.mega-trigger {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e3); min-height: 46px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--num); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-d);
  cursor: pointer; white-space: nowrap;
}
.mega-trigger:hover { color: var(--tinta); background: var(--papel); }
.mega-trigger .ico { width: 16px; height: 16px; opacity: .6; }
.mega-trigger:hover .ico { opacity: .9; }
/* La pestaña de la sección activa lleva el subrayado naranja: es el
   único lugar de la barra donde la marca actúa. */
.mega-tab.on .mega-trigger { color: var(--azul); border-bottom-color: var(--naranja); }
.mega-tab.on .mega-trigger .ico { opacity: 1; }
/* Abierta: se ve que este panel es hijo de esta pestaña. */
.mega-tab.abierto .mega-trigger { color: var(--tinta); background: var(--papel); }

/* Rota el CONTENEDOR y no el <svg>: un transform sobre el propio elemento
   svg raíz se ignora en este motor —probado con estilo inline y todo—,
   mientras que sobre el span de al lado funciona sin drama. */
.mega-flecha { display: inline-flex; transition: transform .15s ease; }
.mega-flecha .ico { width: 13px; height: 13px; }
.mega-tab.abierto .mega-flecha { transform: rotate(180deg); }

/* Punto rojo en la pestaña: si hay que abrirla para enterarse de que algo
   está mal, la señal llega tarde. Va con su título en aria-label. */
.mega-alerta { width: 6px; height: 6px; background: var(--rojo); flex: 0 0 6px; }

.mega-panel {
  position: absolute; top: 100%; left: 0; z-index: 70;
  width: 560px; max-width: calc(100vw - var(--e6));
  background: var(--papel); border: var(--borde) solid var(--linea);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-3);
  margin-top: var(--e1);
  /* Gestión tiene 26 entradas: en una pantalla baja el panel es más alto
     que la ventana. Con `overflow:hidden` a secas lo que sobraba quedaba
     cortado y sin forma de llegar — el menú simplemente no mostraba la
     mitad de la sección. Se recorta en X (por las esquinas redondeadas) y
     se DESPLAZA en Y. dvh y no vh: en el teléfono la barra del navegador
     se come parte de vh y volvería a cortar. */
  max-height: calc(100dvh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Las últimas pestañas abren hacia la izquierda: ancladas a `left:0` desde
   una pestaña que ya está al borde derecho, el panel se salía de pantalla. */
.mega-tab:nth-last-child(-n+2) .mega-panel { left: auto; right: 0; }
.mega-panel[hidden] { display: none; }
/* La apertura es corta a propósito: el menú se usa cien veces por turno y
   una animación que se note se vuelve un peaje. */
.mega-tab.abierto .mega-panel { animation: mega-baja .12s ease-out; }
@keyframes mega-baja { from { opacity: 0; transform: translateY(-4px); } }

.mega-cab {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: var(--borde-f) solid var(--linea); background: var(--papel-2);
}
.mega-cab h2 { font-size: 15px; margin: 0; }
.mega-cab .sec { margin: 2px 0 0; }
.mega-cab .pill { margin-left: auto; flex: 0 0 auto; }

.mega-grilla {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--linea);
  border-top: 1px solid var(--linea);
}
/* En pantalla angosta las dos columnas dejan los títulos en dos líneas y
   el panel crece de alto sin ganar nada: una sola columna se lee mejor y
   el desplazamiento se encarga del resto. */
@media (max-width: 640px) {
  .mega-grilla { grid-template-columns: 1fr; }
}
.mega-item {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--papel); color: var(--tinta); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--transicion);
}
.mega-item:hover { background: var(--papel-2); text-decoration: none; color: var(--tinta); }
.mega-item.on { background: var(--azul-bg); border-left-color: var(--naranja); }
.mega-item > .ico { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; opacity: .55; }
.mega-item:hover > .ico { opacity: .85; }
.mega-item.on > .ico { opacity: 1; color: var(--naranja); }

.mega-cuerpo { min-width: 0; display: block; }
.mega-titulo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.mega-item.on .mega-titulo { color: var(--azul); }
.mega-desc {
  display: block; margin-top: 2px;
  font-size: 12px; line-height: 1.4; color: var(--tinta-d);
}
/* Impar: la última tarjeta ocupa las dos columnas y la grilla no queda coja. */
.mega-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── Menú de cuenta ──────────────────────────────────────────────── */
/* Tamaño de letra, tema y salir vivían sueltos en la barra y la
   desbordaban. Son ajustes que se tocan una vez: van guardados acá y le
   devuelven el ancho a lo que sí se usa cien veces por turno. */
.cuenta-tab { margin-left: var(--e2); }
.cuenta-trigger { text-transform: none; letter-spacing: 0; font-family: var(--ui); font-size: 12.5px; }
.cuenta-nombre { font-weight: 600; color: var(--tinta); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-panel { left: auto; right: 0; width: 320px; }
.cuenta-cuerpo { padding: var(--e3) var(--e5); }
.cuenta-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e2) 0;
}
.cuenta-fila + .cuenta-fila { border-top: 1px solid var(--linea); }
.cuenta-fila .et { margin: 0; }
.cuenta-salir {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--linea); background: var(--papel-2);
  color: var(--tinta); text-decoration: none; font-size: 13.5px;
}
.cuenta-salir:hover { background: var(--rojo-bg); color: var(--rojo); text-decoration: none; }
.cuenta-salir .ico { width: 16px; height: 16px; }
.topbar-local { white-space: nowrap; }
.localsel { margin: 0; }
.localsel select { margin: 0; min-height: 32px; font-size: 12.5px; max-width: 190px; }

/* ── Buscador rápido ─────────────────────────────────────────────── */
.spotlight-abre {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 6px var(--e3); min-height: 32px;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  color: var(--tinta-d); cursor: pointer; font-size: 12.5px;
  transition: var(--transicion);
}
.spotlight-abre:hover { border-color: var(--linea-f); color: var(--tinta); }
.spotlight-abre .ico { width: 15px; height: 15px; }
.spotlight-abre kbd {
  font-family: var(--num); font-size: 10px; letter-spacing: .06em;
  border: 1px solid var(--linea); padding: 1px 5px; color: var(--tinta-d);
  border-radius: 4px;
}

dialog.spotlight {
  width: 560px; max-width: calc(100% - 32px);
  /* dvh y no vh: la barra del navegador móvil recorta el vh (mismo motivo
     que el mega menú, más abajo). */
  margin: 12dvh auto auto; padding: 0;
  border: var(--borde) solid var(--linea); background: var(--papel);
  max-height: 70dvh; display: flex; flex-direction: column; overflow: hidden;
}
dialog.spotlight:not([open]) { display: none; }
dialog.spotlight::backdrop { background: rgba(10, 30, 50, .5); }

.spotlight-campo {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea);
  flex: 0 0 auto;
}
.spotlight-campo .ico { width: 17px; height: 17px; color: var(--tinta-d); flex: 0 0 17px; }
.spotlight-campo input {
  flex: 1; margin: 0; border: 0; background: transparent;
  font-size: 15px; min-height: 0; padding: 0;
}
.spotlight-campo input:focus { outline: none; box-shadow: none; }
.spotlight-campo kbd {
  font-family: var(--num); font-size: 10px;
  border: 1px solid var(--linea); padding: 1px 5px; color: var(--tinta-d);
  border-radius: 4px;
}

.spotlight-lista { overflow-y: auto; flex: 1 1 auto; }
.spot-item {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e3) var(--e4); cursor: pointer;
  border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--tinta);
}
.spot-item:last-child { border-bottom: 0; }
.spot-item:hover, .spot-item.sel { background: var(--azul-bg); text-decoration: none; color: var(--tinta); }
.spot-item.sel { box-shadow: inset 2px 0 0 var(--naranja); }
.spot-txt { flex: 1; min-width: 0; }
.spot-txt b { font-weight: 600; font-size: 13.5px; }
.spot-txt span { display: block; font-size: 12px; color: var(--tinta-d); margin-top: 1px; }
.spot-grupo {
  font-family: var(--num); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinta-d); flex: 0 0 auto;
}
/* Lo que coincide con lo escrito va marcado: se ve POR QUÉ salió. */
.spot-item mark { background: var(--revisar-bg); color: inherit; font-weight: 600; }
.spotlight-vacio { padding: var(--e6) var(--e4); text-align: center; color: var(--tinta-d); font-size: 13px; }
.spotlight-pie {
  margin: 0; padding: var(--e2) var(--e4); flex: 0 0 auto;
  border-top: 1px solid var(--linea); background: var(--papel-2);
  font-family: var(--num); font-size: 10.5px;
}

/* El ancho de trabajo es el 90 % de la pantalla: estas son pantallas de
   operación —planos, comandas, listados de veinte columnas— y una columna
   de 1180 px dejaba media pantalla en blanco en cualquier monitor de local.
   El tope existe para que en un monitor muy ancho una tabla de texto no
   quede en renglones de 3000 px, que no se leen de un barrido. El gutter
   lateral lo pone el propio 90 %, así que el padding horizontal es mínimo. */
main {
  width: 90%; max-width: 1800px; margin: 0 auto;
  padding: var(--e6) 0 var(--e10);
}

/* ── Cabecera de pantalla ────────────────────────────────────────── */
.cabecera {
  display: flex; align-items: flex-start; gap: var(--e4);
  flex-wrap: wrap; margin-bottom: var(--e5);
  padding-bottom: var(--e3); border-bottom: var(--borde-f) solid var(--linea);
}
.cabecera .sep { flex: 1; }
.cabecera-txt { min-width: 0; }
.cabecera .sec { margin-top: 2px; }
.acciones-cab { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

.migas { font-size: 12.5px; color: var(--tinta-d); margin-bottom: var(--e2); }
.migas a { color: var(--tinta-d); }
.migas a:hover { color: var(--naranja-txt); }

/* ── Bloques ─────────────────────────────────────────────────────── */
/* La tarjeta de la identidad v2: blanca sobre el degradado, radio grande
   y sombra suave. Sin hover que la levante: esto es operación, no
   marketing. SIN overflow:hidden — recortaría los desplegables (.br-sug,
   .sb select) que flotan dentro; las esquinas de las tablas que llegan
   al borde se redondean aparte, más abajo. */
.bloque, .card {
  background: var(--papel);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  margin-bottom: var(--e5);
  padding: var(--e4);
}
/* Cuando el bloque trae cabecera o cuerpo propios, el relleno lo ponen
   ellos. Así el markup viejo (.card suelta) y el nuevo conviven sin que
   nadie tenga que tocar 83 archivos el mismo día. */
.bloque:has(> .bloque-cab), .bloque:has(> .bloque-cuerpo),
.bloque:has(> table), .card:has(> table) { padding: 0; }
/* …pero si la tarjeta trae ADEMÁS título o bajada, ese texto sí necesita
   el margen: sin esto queda pegado al filo y al borde de arriba, mientras
   la tabla de al lado se ve alineada porque sus celdas traen relleno
   propio. La tabla sigue de borde a borde —su filete tiene que cruzar la
   tarjeta entera— y solo se indenta lo que no es tabla. */
.bloque:has(> table) > :not(table),
.card:has(> table) > :not(table) { padding-left: var(--e4); padding-right: var(--e4); }
.bloque:has(> table) > :first-child:not(table),
.card:has(> table) > :first-child:not(table) { padding-top: var(--e4); }
.bloque:has(> table) > :last-child:not(table),
.card:has(> table) > :last-child:not(table) { padding-bottom: var(--e4); }
.bloque-cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: var(--borde-f) solid var(--linea);
  background: var(--papel-2);
  border-radius: calc(var(--radio-l) - 1px) calc(var(--radio-l) - 1px) 0 0;
}
.bloque-cab .sep { flex: 1; }
.bloque-cab h2 { margin: 0; }
/* Tabla pegada al filo de la tarjeta: sus celdas de esquina siguen la
   curva del contenedor para que zebra, hover o cabecera no la pinchen. */
.bloque > table:first-child tr:first-child > :first-child,
.card > table:first-child tr:first-child > :first-child,
.bloque > .tabla-envoltura:first-child tr:first-child > :first-child,
.card > .tabla-envoltura:first-child tr:first-child > :first-child { border-top-left-radius: calc(var(--radio-l) - 1px); }
.bloque > table:first-child tr:first-child > :last-child,
.card > table:first-child tr:first-child > :last-child,
.bloque > .tabla-envoltura:first-child tr:first-child > :last-child,
.card > .tabla-envoltura:first-child tr:first-child > :last-child { border-top-right-radius: calc(var(--radio-l) - 1px); }
.bloque > table:last-child tr:last-child > :first-child,
.card > table:last-child tr:last-child > :first-child,
.bloque > .tabla-envoltura:last-child tr:last-child > :first-child,
.card > .tabla-envoltura:last-child tr:last-child > :first-child { border-bottom-left-radius: calc(var(--radio-l) - 1px); }
.bloque > table:last-child tr:last-child > :last-child,
.card > table:last-child tr:last-child > :last-child,
.bloque > .tabla-envoltura:last-child tr:last-child > :last-child,
.card > .tabla-envoltura:last-child tr:last-child > :last-child { border-bottom-right-radius: calc(var(--radio-l) - 1px); }
.bloque-cuerpo { padding: var(--e4); }
.bloque-pie {
  padding: var(--e2) var(--e4); border-top: 1px solid var(--linea);
  font-size: 12.5px; color: var(--tinta-d);
}

/* ── Botones — el botón es una orden: verbo primero ────────────────
   El botón de operación es AZUL: en pantallas donde se mueve plata el
   color tiene que significar, no gritar. El naranja de acción vive en
   .btn-cta, opt-in y solo para la acción principal grande de la pantalla
   (entrar, cobrar, enviar a cocina). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--ui); font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 10px var(--e4); min-height: 38px;
  background: var(--azul); color: var(--azul-ink);
  border: 1px solid var(--azul); border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transicion);
}
.btn:hover {
  background: #003761; border-color: #003761; color: var(--azul-ink);
  text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-2);
}
:root[data-theme="dark"] .btn:hover { background: #82B5E6; border-color: #82B5E6; }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .ico { width: 15px; height: 15px; }

/* La acción principal de la pantalla: naranja de marca, texto blanco
   grande (AA solo desde 15px/700 — por eso el mínimo alto y el peso). */
.btn-cta {
  background: var(--naranja); border-color: var(--naranja); color: #fff;
  font-size: 15px; font-weight: 700; min-height: 48px;
  box-shadow: var(--sombra-cta);
}
.btn-cta:hover {
  background: var(--naranja-hover); border-color: var(--naranja-hover); color: #fff;
  box-shadow: var(--sombra-cta);
}
:root[data-theme="dark"] .btn-cta { color: #1A0E06; }
:root[data-theme="dark"] .btn-cta:hover { background: var(--naranja-hover); border-color: var(--naranja-hover); color: #1A0E06; }

.btn-sec {
  background: transparent; color: var(--tinta); border-color: var(--linea-f);
  box-shadow: none;
}
/* Gris al pasar por encima. Antes pintaba blanco sobre crema; con la
   página en blanco ese hover dejaba de verse. */
.btn-sec:hover { background: var(--papel-2); border-color: var(--tinta); color: var(--tinta); box-shadow: none; }

.btn-peligro { background: transparent; color: var(--rojo); border-color: var(--rojo); box-shadow: none; }
.btn-peligro:hover { background: var(--rojo); color: var(--papel); box-shadow: none; }

/* Acción de fila: "Anular", "quitar", "Reimprimir", "Entrar". Antes eran
   texto azul que solo se subrayaba al pasar por encima, así que no se leían
   como algo que se toca —y en una tablet, donde no hay "pasar por encima",
   no había ninguna señal—. Ahora son botones chicos de verdad: marco, fondo
   y área de toque. Chicos porque viven de a dos o tres por fila de tabla;
   con el marco grueso del resto del sistema, veinte filas serían una reja. */
.btn-plano {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; min-height: 30px;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transicion);
}
.btn-plano:hover { background: var(--papel-2); border-color: var(--tinta); color: var(--tinta); text-decoration: none; }
.btn-plano:active { background: var(--papel-3); }
.btn-plano[disabled] { opacity: .4; cursor: not-allowed; }
.btn-plano .ico { width: 14px; height: 14px; }
/* Lo que destruye se pinta al tocarlo, no antes: en reposo es un botón más
   con el color del riesgo; al pasar por encima se llena de rojo. */
.btn-plano.peligro { color: var(--rojo); border-color: var(--rojo); }
.btn-plano.peligro:hover { background: var(--rojo); color: var(--papel); border-color: var(--rojo); }

/* Dentro de una fila de totales o una lista apretada. */
.btn-mini { min-height: 24px; padding: 3px 7px; font-size: 11.5px; }

.btn-chico { font-size: 12.5px; padding: 6px var(--e3); min-height: 32px; }

/* ── Tablas ──────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; }

/* Se estila el elemento, no solo la clase: las 84 tablas del sistema ya
   existían sin clase y tienen que verse bien igual. */
/* La tabla es el objeto central del sistema: tarjeta blanca con radio y
   sombra suave. border-collapse: separate porque collapse ignora el
   radio; como las celdas solo dibujan bordes horizontales, no se duplica
   ninguna línea. Sin overflow: los desplegables dentro de celdas
   (.br, .sb) tienen que poder salir del marco. */
table, table.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--papel); border: var(--borde) solid var(--linea);
  border-radius: var(--radio-m); box-shadow: var(--sombra-1);
}
/* Las celdas de las esquinas siguen la curva del marco. */
table tr:first-child > :first-child { border-top-left-radius: calc(var(--radio-m) - 1px); }
table tr:first-child > :last-child { border-top-right-radius: calc(var(--radio-m) - 1px); }
table tr:last-child > :first-child { border-bottom-left-radius: calc(var(--radio-m) - 1px); }
table tr:last-child > :last-child { border-bottom-right-radius: calc(var(--radio-m) - 1px); }
/* Dentro de un bloque la tabla no dibuja su propio marco ni su fondo: el
   bloque ya es el contenedor y dos superficies distintas se ven como un
   parche pegado encima. */
.card table, .bloque table { border: none; background: transparent; border-radius: 0; box-shadow: none; }
/* Una tabla de totales no es una tabla de datos: es un desglose alineado
   dentro de otro contenedor. Marcada así queda sin marco propio, porque
   el suyo pegaba las cifras contra el borde y se leían apretadas. */
table.desglose { border: none; background: transparent; box-shadow: none; }
th, .tabla th {
  text-align: left; font-family: var(--ui); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-d); padding: var(--e2) var(--e4);
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea-f); white-space: nowrap;
}
/* El desglose de totales no es un listado: sin banda gris de cabecera. */
table.desglose th { background: transparent; }
th.num, .tabla th.num { text-align: right; }
td, .tabla td { padding: 11px var(--e4); border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
/* El hover pinta gris sobre blanco. Antes era al revés —blanco sobre
   crema— y al invertir los neutros se habría quedado sin efecto. */
tbody tr:hover { background: var(--papel-2); }
/* Las cifras van en monoespaciada aunque la vista no lo haya pedido. */
td.num, td.der, td[align="right"] { font-family: var(--num); font-variant-numeric: tabular-nums; text-align: right; }
.tabla .principal-col { font-weight: 500; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones > * + * { margin-left: var(--e3); }

/* Zebra: solo en tablas de más de seis filas, nunca en color */
.tabla.zebra tbody tr:nth-child(even) { background: var(--zebra); }
.tabla.zebra tbody tr:hover { background: var(--azul-bg); }

/* Fila que pide atención. Nunca solo por el fondo: la fila siempre lleva
   además su píldora con la palabra. */
tr.fila-mal      > td { background: var(--rojo-bg); }
tr.fila-revisar  > td { background: var(--revisar-bg); }

/* Doble regla: cierra toda suma */
table tfoot td, table tr.total td,
.tabla tfoot td, .tabla tr.total td {
  border-top: 3px double var(--tinta);
  border-bottom: none;
  font-weight: 600; padding-top: var(--e3);
}
.doble-regla { border: none; border-top: 3px double var(--tinta); margin: var(--e3) 0; }
.corte { border: none; border-top: 1px dashed var(--linea-f); margin: var(--e5) 0; }

.vacio { padding: var(--e8) var(--e4); text-align: center; color: var(--tinta-d); font-size: 13px; }
.vacio strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: var(--e1); font-family: var(--tit); }
/* El paso siguiente, cuando vive en otra pantalla. */
.vacio-accion { margin-top: var(--e3); }

/* ── Estado: nunca solo con color ────────────────────────────────── */
.pill {
  display: inline-block; font-family: var(--num); font-size: 11px; font-weight: 600;
  padding: 2px 10px; border: 1px solid var(--linea-f); border-radius: var(--radio-pill);
  color: var(--tinta-d); background: transparent; white-space: nowrap;
}
/* Fila de estados bajo un título: la cabecera lleva el nombre, esta línea
   lleva la situación. Separadas, porque son dos lecturas distintas. */
.linea-pills { display: flex; flex-wrap: wrap; gap: var(--e2); margin: calc(var(--e3) * -1) 0 var(--e4); }
/* Con estado, el fondo tenue hace el trabajo y el borde se apaga. */
.pill-ok      { color: var(--cuadra); border-color: transparent; background: var(--cuadra-bg); }
.pill-revisar { color: var(--revisar); border-color: transparent; background: var(--revisar-bg); }
.pill-mal     { color: var(--rojo); border-color: transparent; background: var(--rojo-bg); }
.pill-azul    { color: var(--azul); border-color: transparent; background: var(--azul-bg); }
.pill-naranja { color: var(--naranja-txt); border-color: transparent; background: var(--naranja-bg); }

.timbre {
  display: inline-block; font-family: var(--num); font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
  padding: var(--e1) var(--e2); border: 2px solid currentColor; color: var(--cuadra);
  border-radius: var(--radio-s);
}
.timbre.mal { color: var(--rojo); }

.sello {
  font-family: var(--num); font-size: 11.5px; line-height: 1.5; color: var(--tinta-d);
}
.sello b { color: var(--tinta); font-weight: 500; }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso {
  border: var(--borde-f) solid var(--linea); border-left: 4px solid var(--tinta-d);
  border-radius: var(--radio-m);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
  background: var(--papel-2); box-shadow: var(--sombra-1);
}
.aviso-ok  { border-left-color: var(--cuadra); background: var(--cuadra-bg); }
.aviso-mal { border-left-color: var(--rojo); background: var(--rojo-bg); color: var(--rojo); }
.aviso-mal b, .aviso-mal strong { color: var(--rojo); }
.aviso-revisar { border-left-color: var(--revisar); background: var(--revisar-bg); }
.aviso h3 { margin-bottom: var(--e1); display: flex; align-items: center; gap: var(--e2); }
.aviso p:last-child { margin-bottom: 0; }
/* El icono del aviso se alinea con la primera línea, no con el bloque. */
.aviso > .ico { width: 17px; height: 17px; float: left; margin: 2px var(--e2) 0 0; }
.aviso h3 > .ico { float: none; margin: 0; flex: 0 0 17px; }

/* ── Iconos ──────────────────────────────────────────────────────── */
.ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex: 0 0 auto; }
.btn .ico { width: 15px; height: 15px; }
.tabla .ico { width: 15px; height: 15px; vertical-align: -2.5px; }
/* Icono junto a una píldora de estado: refuerza, no sustituye la palabra. */
.pill .ico { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.ico-grande { width: 22px; height: 22px; }
h2 > .ico, h3 > .ico { margin-right: var(--e2); vertical-align: -3px; }

/* Plato atrasado en la pantalla de cocina. Se mira a dos metros, así que
   va con icono y con palabra: solo con color no se lee a esa distancia. */
.knota.atrasado { color: var(--rojo); font-weight: 600; }
.knota.atrasado .ico { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }

/* ── Tiles de cifra ──────────────────────────────────────────────── */
/* Cada cifra es su propia tarjeta: la rejilla soldada era del territorio
   anterior; acá el aire entre tarjetas hace la separación. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3);
  margin-bottom: var(--e5); }
.tile { padding: var(--e3) var(--e4); background: var(--papel);
  border: var(--borde) solid var(--linea); border-radius: var(--radio-m);
  box-shadow: var(--sombra-1); }
.tile .et { display: block; margin-bottom: var(--e1); }
.tile .cifra-d { font-size: 24px; }
.tile .pie { display: block; font-size: 12px; color: var(--tinta-d); margin-top: 2px; }

/* Variación contra el período anterior. El triángulo dice la dirección y el
   color la refuerza; el guion dice que no hay con qué comparar. */
.delta { font-family: var(--num); font-size: 12px; font-weight: 500; color: var(--tinta-d); }
.delta.ok  { color: var(--cuadra); }
.delta.bad { color: var(--rojo); }

/* Elegir columnas de una exportación: plegado por defecto, porque casi
   siempre se quiere el archivo entero. */
.cols-export { position: relative; }
.cols-export > summary { cursor: pointer; padding: 8px 0; user-select: none; }
.cols-lista {
  position: absolute; z-index: 20; right: 0; min-width: 220px; max-height: 300px;
  overflow-y: auto; padding: var(--e3) var(--e4);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-s); box-shadow: var(--sombra-2);
}
.cols-lista .check { display: flex; align-items: center; gap: var(--e2); font-size: 13.5px; padding: 3px 0; }
.cols-lista .check input { width: auto; margin: 0; }

/* Tabla que no necesita todo el ancho: una receta, una lista corta. */
.tabla-media { max-width: 620px; }

/* Tarjeta que avisa de algo. Es la versión "bloque" del aviso: sirve
   cuando lo que hay que destacar es una tarjeta entera, no un párrafo. */
.card-revisar { border-color: var(--revisar); background: var(--revisar-bg); }
.card-mal     { border-color: var(--rojo); }
.card-ok      { border-color: var(--cuadra); }

/* Código de vinculación de una tablet: se dicta en voz alta desde el otro
   lado del salón, así que va enorme y con las cifras separadas. */
.codigo-grande {
  font-family: var(--num); font-size: 44px; font-weight: 700;
  letter-spacing: 9px; text-align: center; user-select: all;
  padding: var(--e4) 0; color: var(--tinta);
}

/* Campo de un filtro que necesita más aire que el resto. */
.campo-crece  { flex: 1; min-width: 160px; }
.campo-ancho  { min-width: 170px; }
/* Dato corto (RUT, PIN, un número de dos dígitos, una fecha). Fuera de una
   fila flex el campo mide el 100% del bloque, y un dato de cuatro dígitos
   ocupando mil píxeles no se lee: se lee mal. */
.campo-corto  { max-width: 170px; }

/* Separador dentro de una tarjeta, cuando el contenido cambia de tema. */
.separa-arriba { border-top: 1px solid var(--linea); margin: var(--e2) 0 var(--e3); padding-top: var(--e3); }

/* Columna de una pantalla pública: la reserva desde el celular no necesita
   los mil pixeles del escritorio. */
.columna-angosta { max-width: 480px; margin: 0 auto; }

/* Trampa para robots: un campo que una persona no ve ni puede tabular. Si
   viene lleno, del otro lado no había nadie. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Botón que cierra un formulario largo y se toca con el pulgar. */
.btn-cerrar-form { width: 100%; justify-content: center; padding: 14px; font-size: 16px; margin-top: 6px; }

/* Grilla de tarjetas que se acomoda sola: locales, bodegas, agentes. */
.grilla-tarjetas       { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.grilla-tarjetas.chica { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Cifra grande dentro de una tarjeta de la grilla. */
.cifra-tarjeta { font-family: var(--num); font-size: 20px; font-weight: 600; margin-top: var(--e1); display: block; }

/* Fila que cierra una suma dentro de una tabla sin tfoot. */
.fila-corte > td { border-top: 2px solid var(--linea); }

/* Token recién generado: se copia entero de una pasada. */
.token { font-family: var(--num); font-size: 14px; user-select: all; }

/* Formulario que cuelga de un <details>: se despega del resumen. */
.form-detalle { margin-top: var(--e2); }

/* Resumen plegable dentro de un formulario (ficha del insumo). */
.sum-form { cursor: pointer; margin-bottom: 10px; }

/* Línea de factura: unidad elegible (formato/base) y equivalente en vivo. */
.pos-uni-select { font-size: 12px; margin-left: 4px; max-width: 140px; }
.pos-equiv { display: block; font-size: 11.5px; color: var(--tinta-d); white-space: nowrap; }

/* Vista previa del logo del local en el configurador de la carta. */
.cc-logo-previa { max-width: 160px; max-height: 120px; display: block;
  margin-bottom: 10px; border: 1px solid var(--linea); border-radius: var(--radio-s); }

/* Botonera rápida de cantidad (producto y comensales): 1 a 9 de un toque,
   pensada para el dedo del garzón; más de 9 se tipea en el input de siempre. */
/* Grilla de tres y no flex: con flex-wrap el 9 quedaba solo en la segunda
   fila y se estiraba de lado a lado, así que el teclado no se leía como
   teclado. Tres columnas es la forma que tiene un teclado numérico. */
.teclas-cantidad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 0; }
.teclas-cantidad button { min-height: 48px; font-family: var(--num);
  font-size: 17px; background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--radio-s); color: var(--tinta); cursor: pointer; }
.teclas-cantidad button:hover { border-color: var(--tinta); }
.teclas-cantidad button:active { background: var(--naranja); border-color: var(--naranja); color: #fff; }

/* Caja "quitar ingredientes" del modal de venta: mismo trazo que la de
   modificadores, con objetivos táctiles cómodos para tablet. */
.sin-caja { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 10px 12px; margin: 0 0 12px; }
.sin-caja label { display: flex; align-items: center; gap: 8px; font-size: 14px;
  font-weight: 400; color: var(--txt); margin: 8px 0 0; }

/* Anchos puntuales, con nombre en vez de un número suelto en el HTML. */
.ancho-medio  { max-width: 260px; margin: 0; }
.col-angosta  { width: 150px; }
.col-detalle  { max-width: 260px; }
.check-suelto { margin-right: 6px; }

/* Catálogo de permisos de un rol: muchas casillas cortas en columnas que
   se acomodan solas. Con el slug debajo, porque es lo que aparece en el
   código cuando hay que rastrear por qué alguien no puede hacer algo. */
.grupo-titulo {
  font-family: var(--num); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--tinta-d);
  margin: var(--e5) 0 var(--e2); padding-bottom: var(--e1);
  border-bottom: 1px solid var(--linea);
}
/* min(300px, 100%): en un teléfono más angosto que la pista mínima, la
   grilla no desborda — baja a una columna del ancho disponible. */
.grilla-permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e2); }
.grilla-permisos .check { align-items: flex-start; }
.slug { display: block; font-family: var(--num); font-size: 11px; color: var(--tinta-d); }

/* Cargar una cantidad desde la fila de una tabla: campos y botón en línea,
   sin que el formulario rompa la altura del renglón. */
.form-contar { display: flex; gap: 6px; align-items: center; }
.form-contar input { margin: 0; width: 110px; min-height: 44px; }
.form-contar input.ancho { width: 150px; }
.form-contar .btn, .form-contar button { min-height: 44px; }
th.col-contar { min-width: 280px; }

/* Días trabajados en el reparto de propinas: un número corto dentro de
   la tabla, sin romper la altura del renglón. */
.dias-input { width: 90px; margin: 0; }

/* Filtros de la lista de conteo: pastillas táctiles; la activa se marca
   con la doble regla, no con color decorativo. */
.filtros-conteo { margin: var(--e3) 0 var(--e2); }
.filtros-conteo .btn { min-height: 44px; }
.filtros-conteo .btn.activo { border-top: 3px double var(--tinta); font-weight: 600; }

/* Acciones que cierran una pantalla: van juntas y separadas del contenido. */
.barra-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }

/* Casilleros en fila: locales de una persona, columnas de un export. */
.grupo-checks { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.grupo-checks .check, label.check {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-weight: 400; font-size: 14px; color: var(--tinta); margin: 0;
}
.grupo-checks .check input, label.check > input { width: auto; margin: 0; }
.grupo-checks.columna { flex-direction: column; gap: var(--e2); justify-content: flex-end; }

/* Credenciales recién generadas: se copian a mano, así que van en
   monoespaciada — un 0 no puede confundirse con una O. */
.credenciales { display: flex; flex-wrap: wrap; gap: var(--e5); margin-top: var(--e3); }
.credenciales .et {
  display: block; font-family: var(--num); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-d);
}
.credenciales .valor { font-family: var(--num); font-size: 15px; user-select: all; }
.credenciales .fuerte { font-weight: 600; font-size: 16px; }

/* Fila de un registro desactivado: sigue legible, pero no compite. */
tr.fila-apagada > td { opacity: .55; }

/* Cambiar el PIN desde el listado: campo y botón pegados en una línea. */
.form-pin { display: inline-flex; gap: 5px; align-items: center; margin-left: 5px; }
.form-pin .campo-pin { width: 78px; margin: 0; }

/* Subir y bajar: un solo control de dos mitades, no dos botones sueltos. */
.grupo-orden { display: inline-flex; vertical-align: middle; }
.grupo-orden .btn { border-right-width: 0; padding-left: var(--e2); padding-right: var(--e2); min-width: 28px; border-radius: 0; box-shadow: none; }
.grupo-orden .btn:first-child { border-radius: var(--radio-s) 0 0 var(--radio-s); }
.grupo-orden .btn:last-child { border-right-width: 1px; border-radius: 0 var(--radio-s) var(--radio-s) 0; }
.grupo-orden .btn:hover { transform: none; box-shadow: none; }

/* Filas que no entraron en una importación: cada una con su número de
   línea, para poder abrir la planilla y arreglar exactamente esa. */
.lista-errores { margin: var(--e3) 0 0; padding-left: var(--e5); font-size: 13.5px; }
.lista-errores li { margin-bottom: var(--e1); }
.lista-errores .cifra { font-family: var(--num); font-size: 12px; color: var(--tinta-d); }

/* Filtro de rango de los reportes: campos y acciones en una sola línea,
   alineados por su base para que las etiquetas no desnivelen los botones. */
.filtro-rango { display: flex; gap: var(--e3); align-items: flex-end; flex-wrap: wrap; }
.filtro-rango .campo { margin-bottom: 0; }
.filtro-rango .sep { flex: 1; min-width: 0; }

/* ── Formularios ─────────────────────────────────────────────────── */
.campo { margin-bottom: var(--e4); }
.campo > label, label.campo-et {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--tinta); margin-bottom: var(--e1);
}
.campo .ayuda { font-size: 12.5px; color: var(--tinta-d); margin-top: var(--e1); }
.campo .ayuda-arriba { font-size: 12.5px; color: var(--tinta-d); margin: -2px 0 var(--e1); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"],
input[type="url"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 9px var(--e3); min-height: 38px;
  font-family: var(--ui); font-size: 14px; line-height: 1.4;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  /* Separación entre campos. Va en el control y no solo en .campo porque
     la mayoría de las vistas apila <label> + <input> sueltos: sin esto
     los campos quedan pegados uno encima de otro. */
  margin: 0 0 var(--e4);
}
/* Dentro de .campo el margen lo pone el contenedor, no el control. */
.campo input, .campo select, .campo textarea,
.filtros input, .filtros select, .sb input, .sb select { margin-bottom: 0; }
.campo { margin-bottom: var(--e4); }

/* ── Fila de campos de un formulario ───────────────────────────────────
   No confundir con .filtros, que es la barra gris que ENCABEZA un listado:
   usarla dentro de un formulario dibujaba bandas grises apiladas, cada una
   con el radio superior de una cabecera que no existía.
   Acá cada campo pide el ancho que su dato necesita. Por defecto todos
   valen igual; los dos modificadores existen porque un RUT y una dirección
   no son el mismo dato y no tienen por qué medir lo mismo. */
.campos {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--e3) var(--e4); margin-bottom: var(--e4);
}
.campos .campo { flex: 1 1 170px; min-width: 0; margin-bottom: 0; }
.campos .campo-corto { flex: 0 1 128px; }   /* RUT, teléfono, cuenta */
/* La fecha y la hora las dibuja el navegador con su icono al costado: bajo
   los 150 px recorta el año («04-08-202») y no hay CSS que lo evite. */
.campos .campo:has(input[type="date"]),
.campos .campo:has(input[type="time"]) { flex: 0 1 152px; }
.campos .campo-largo { flex: 2 1 260px; }   /* nombre, dirección, correo */
/* Una casilla no es un campo con caja: no estira ni se alinea a la base. */
.campos .campo-check { flex: 0 1 auto; align-self: center; }
.campos .campo-check label { display: flex; align-items: center; gap: var(--e2);
  font-weight: 400; font-size: 14px; margin: 0; }
.campos .campo-check input { width: auto; min-height: 0; }

/* La columna donde se corrige la cantidad a pedir: sin piso, el campo se
   encoge hasta que el número no se lee. */
.col-pedir { min-width: 120px; }

/* Un enlace de acción que pide atención sin ser destructivo (recibir una
   orden que llegó). Reemplaza a un style= inline con el hex a mano. */
.enlace-revisar { color: var(--revisar); }

/* El QR para conectar la línea de WhatsApp. Fondo blanco fijo también en
   modo oscuro: un QR invertido no lo lee ningún teléfono. */
.wa-qr { margin-top: var(--e4); max-width: 320px; }
.wa-qr img {
  display: block; width: 100%; height: auto; background: #fff;
  padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-m);
}

/* ── Precio por sucursal ──────────────────────────────────────────────
   Multilocal: el precio base rige y cada sucursal puede pisarlo. La
   grilla existe para COMPARAR, así que las cifras caen todas en la misma
   columna y en monoespaciada; en filas sueltas no se leería la diferencia. */
.precios-suc {
  border: 1px solid var(--linea); border-radius: var(--radio-m);
  padding: var(--e3) var(--e4) var(--e4); margin: var(--e4) 0;
}
.precios-suc legend {
  font-family: var(--tit); font-weight: 600; font-size: 14px;
  color: var(--tinta); padding: 0 var(--e2);
}
.precios-suc-grilla {
  display: grid; grid-template-columns: minmax(0, 1fr) 124px minmax(94px, auto);
  align-items: center; gap: var(--e2) var(--e3); margin: var(--e3) 0 var(--e4);
}
.precios-suc-rotulo { font-size: 12px; font-weight: 600; color: var(--tinta-d); }
/* Es un <label>, así que hay que apagar el bloque y el margen del global. */
.precios-suc-nombre { display: block; margin: 0; font-weight: 400; font-size: 14px; }
/* Gana al tope global de los campos numéricos: acá el ancho lo da la columna. */
.precios-suc-grilla input[type="number"] { width: 100%; max-width: none; margin: 0; }
.precios-suc-estado { font-size: 12px; }
/* En tablet angosta la columna del estado se lleva el ancho que necesita
   el precio, y lo que dice ya se deduce de si el campo está lleno. */
@media (max-width: 640px) {
  .precios-suc-grilla { grid-template-columns: minmax(0, 1fr) 108px; }
  .precios-suc-estado, .precios-suc-rotulo:last-of-type { display: none; }
}

/* ── Panel lateral de una pantalla-lienzo ─────────────────────────────
   El plano del salón y su editor son las dos pantallas donde el contenido
   es un dibujo y no una lista. En las dos, lo que no cabe en el dibujo
   —cuentas, filtros, formularios— vive en una columna al costado. */
.lienzo-marco{display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-panel,260px);
  gap:var(--e4);align-items:start}
.panel-lat{display:flex;flex-direction:column;gap:var(--e3);
  position:sticky;top:calc(var(--alto-topbar,52px) + var(--e3))}
/* Apilado bajo el dibujo, los bloques van en fila: hay ancho de sobra y
   una columna alta obligaría a bajar hasta el final para ver el último. */
@media (max-width: 1100px) {
  .lienzo-marco{grid-template-columns:minmax(0,1fr)}
  .panel-lat{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .panel-lat > *{flex:1 1 260px;min-width:240px}
}
.panel-bloque{border:var(--borde-f) solid var(--linea);background:var(--papel);
  border-radius:var(--radio-m);box-shadow:var(--sombra-1);overflow:hidden}
/* El relleno lo pone .panel-cuerpo cuando el bloque trae cabecera propia.
   Cuando no la trae —un h3 y contenido suelto—, no lo ponía nadie y el
   texto quedaba pegado al filo de la tarjeta. */
.panel-bloque:not(:has(> .panel-cab)){padding:var(--e3)}
.panel-bloque:not(:has(> .panel-cab)) > h3{margin-bottom:var(--e2)}
.panel-bloque:not(:has(> .panel-cab)) > :last-child{margin-bottom:0}
.panel-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);
  padding:var(--e2) var(--e3);border-bottom:1px solid var(--linea);background:var(--papel-2)}
.panel-cab h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-d);margin:0}
.panel-cab .marca{font-family:var(--num);font-size:10px;color:var(--cuadra);letter-spacing:.04em}
.panel-cuerpo{padding:var(--e3)}
.panel-vacio{padding:var(--e3);font-size:12.5px;color:var(--tinta-d)}

/* Cifras grandes en cuadrícula: lo que alguien mira al pasar. */
.panel-cifras{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linea);margin:0}
.panel-cifras > div{padding:var(--e3);border-right:1px solid var(--linea)}
.panel-cifras > div:last-child{border-right:none}
.panel-cifras dt{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-d)}
.panel-cifras dd{margin:2px 0 0;font-family:var(--num);font-size:26px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums}
.panel-cifras .sub{display:block;font-size:11px;font-weight:400;color:var(--tinta-d);
  font-variant-numeric:tabular-nums}

/* Acordeón del panel. Una sección abierta a la vez, porque quien edita un
   plano hace una cosa por vez: agrega mesas, o agrega objetos, o arma
   sectores. Los tres formularios abiertos juntos eran una pila que no
   cabía en pantalla y no decía cuál usar. */
.acordeon{border:var(--borde-f) solid var(--linea);background:var(--papel);
  border-radius:var(--radio-m);box-shadow:var(--sombra-1);overflow:hidden}
.acordeon > details{border-bottom:1px solid var(--linea)}
.acordeon > details:last-child{border-bottom:none}
.acordeon summary{display:flex;align-items:center;gap:var(--e2);cursor:pointer;
  padding:var(--e3);background:var(--papel-2);
  font-size:12.5px;font-weight:600;color:var(--tinta);list-style:none;min-height:40px}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:hover{background:var(--papel-3)}
.acordeon summary .sep{flex:1}
.acordeon summary .ico{width:15px;height:15px;flex:0 0 15px;color:var(--tinta-d)}
/* La flecha gira al abrir. Sobre el <span> y no sobre el <svg>: el
   transform en la raíz de un SVG no se aplica. */
.acordeon .flecha{display:inline-flex;transition:transform .16s ease}
.acordeon > details[open] > summary{background:var(--papel);border-bottom:1px solid var(--linea)}
.acordeon > details[open] .flecha{transform:rotate(180deg)}
.acordeon-cuerpo{padding:var(--e3)}
.acordeon-cuerpo > :last-child{margin-bottom:0}
@media (prefers-reduced-motion: reduce){.acordeon .flecha{transition:none}}

/* Un campo cuyo valor es la cola de una URL. El prefijo va dentro del marco
   y no en la ayuda de abajo: quien lo lee tiene que ver la dirección
   completa mientras la escribe, no reconstruirla mentalmente. */
.prefijo { display: flex; align-items: stretch; border: 1px solid var(--linea-f); background: var(--papel); border-radius: var(--radio-s); overflow: hidden; }
.prefijo-fijo {
  display: flex; align-items: center; padding: 0 var(--e2);
  font-family: var(--num); font-size: 13px; color: var(--tinta-d);
  background: var(--papel-2); border-right: 1px solid var(--linea-f); white-space: nowrap;
}
.prefijo input { border: none; margin: 0; font-family: var(--num); border-radius: 0; }
.prefijo:focus-within { border-color: var(--naranja); box-shadow: 0 0 0 3px var(--naranja-bg); }
.prefijo input:focus { outline: none; box-shadow: none; }

/* Etiqueta pegada a su control: el aire va debajo del par, no entre medio. */
label + input, label + select, label + textarea, label + .sb { margin-top: var(--e1); }
input[type="number"] { font-family: var(--num); text-align: right; }
textarea { min-height: 84px; resize: vertical; line-height: 1.6; }

/* Adjuntar un archivo. El control nativo es lo único que el navegador
   dibuja a su manera —gris, con su propio botón y el nombre cortado—, así
   que se le da el marco del sistema y su botón se viste de .btn-plano. */
input[type="file"] {
  width: 100%; padding: 7px var(--e2); min-height: 38px;
  font-family: var(--ui); font-size: 13px; color: var(--tinta-d);
  background: var(--papel); border: 1px solid var(--linea-f);
  border-radius: var(--radio-s); margin: 0 0 var(--e3); cursor: pointer;
}
input[type="file"]::file-selector-button {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 6px var(--e3); margin-right: var(--e3);
  color: var(--tinta); background: var(--papel-2);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  cursor: pointer; transition: var(--transicion);
}
input[type="file"]::file-selector-button:hover { border-color: var(--naranja); color: var(--naranja-txt); }
input[type="file"]:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--naranja-bg); }
/* Dentro de una celda no puede pedir el ancho del contenedor: el nombre del
   archivo estiraba la columna y descuadraba la tabla entera. */
td input[type="file"] { width: auto; max-width: 100%; font-size: 12px; }
/* El foco es naranja: la microinteracción de marca. Anillo por fuera,
   no inset: el campo no se achica al entrar. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--naranja-bg); }
input::placeholder, textarea::placeholder { color: var(--tinta-d); opacity: .65; }
input[disabled], select[disabled], textarea[disabled] { background: var(--papel-2); color: var(--tinta-d); }

/* ── Anchos puntuales de un control ───────────────────────────────────
   Van con el nombre del elemento delante y DESPUÉS de la regla general de
   formulario, porque `input[type="number"]` pesa más que una clase suelta:
   sin esto .cfg-orden y compañía perdían la pulseada y el campo se estiraba
   al 100 %. Un orden de dos dígitos ocupaba el ancho de la tarjeta. */
input.cfg-orden  { width: 72px; }
input.temp-input { width: 96px; }
input.dias-input { width: 90px; }

/* Tope para las cifras y las fechas. Un precio, una cantidad, un orden o un
   día ocupaban el ancho de su columna: en la ficha del producto medían 875
   px con el número perdido contra el borde derecho. Son 140 campos en el
   sistema y alguien ya había parchado uno con un style= inline, que es la
   señal de que el tope faltaba acá. Los que necesitan medir menos traen su
   propio width y ganan por ser más específicos. */
input[type="number"], input[type="date"], input[type="time"] { max-width: 210px; }
/* Dentro de una celda manda la celda: la columna ya acota. */
td input[type="number"], td input[type="date"], td input[type="time"] { max-width: none; }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.fila-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.check { display: flex; align-items: center; gap: var(--e2); font-size: 14px; }
.check input { width: auto; min-height: 0; margin: 0; }

.form-pie {
  display: flex; align-items: center; gap: var(--e3);
  padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--linea);
}
.form-pie .sep { flex: 1; }

/* Barra de filtros de listado */
.filtros {
  display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); background: var(--papel-2);
  border: 1px solid var(--linea); border-bottom: none;
  border-radius: var(--radio-m) var(--radio-m) 0 0;
}
.filtros .campo { margin-bottom: 0; min-width: 150px; }
.filtros .sep { flex: 1; }
/* La barra se dibuja abierta abajo porque nace pegada a su tabla. Cuando
   no hay tabla debajo —varias vistas la usan como fila de formulario— esa
   costura quedaba a la vista: media caja gris flotando. Ahí se cierra. */
.filtros:not(:has(+ table)):not(:has(+ .tabla-envoltura)):not(:has(+ .vacio)) {
  border-bottom: 1px solid var(--linea);
  border-radius: var(--radio-m);
  margin-bottom: var(--e4);
}
.filtros + .tabla-envoltura > .tabla,
.filtros + .tabla { border: 1px solid var(--linea); }
/* La tabla que cuelga de una barra de filtros se suelda a ella: las
   esquinas de arriba van rectas y el conjunto se lee como una pieza. */
.filtros + .tabla-envoltura > table, .filtros + table {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.filtros + .tabla-envoltura > table tr:first-child > :first-child,
.filtros + table tr:first-child > :first-child { border-top-left-radius: 0; }
.filtros + .tabla-envoltura > table tr:first-child > :last-child,
.filtros + table tr:first-child > :last-child { border-top-right-radius: 0; }

/* ── Buscador remoto: autocompletar contra el servidor ───────────────
   Se ve igual que el combobox de al lado —nadie tiene por qué notar de
   dónde salen las opciones— pero la lista se arma con lo que responde el
   servidor y no con opciones escritas en la página. */
.br { position: relative; margin-bottom: var(--e4); }
.campo .br, .filtros .br, td .br { margin-bottom: 0; }
/* El espaciado lo pone el envoltorio, no el input: con el margen genérico
   de formulario encima, el componente medía 16px de más y desalineaba
   cualquier fila que lo tuviera al lado de otros campos. */
.br .br-txt { margin-bottom: 0; }
.br-sug {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  background: var(--papel); border: 1px solid var(--azul); margin-top: -1px;
  max-height: 260px; overflow-y: auto;
  border-radius: 0 0 var(--radio-s) var(--radio-s); box-shadow: var(--sombra-2);
}
.br-it {
  display: block; width: 100%; text-align: left; border: none;
  background: transparent; font-family: var(--ui); font-size: 14px;
  padding: var(--e2) var(--e3); cursor: pointer;
}
.br-it:hover, .br-it.activa { background: var(--papel-2); }
.br-vacio { padding: var(--e2) var(--e3); font-size: 13px; color: var(--tinta-d); }

/* Selección FIJA: elegido un ítem, el campo se bloquea (no se escribe encima,
   que descoordinaba el nombre del id de abajo). El botón "×" lo libera para
   volver a buscar. */
.br-limpiar {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: none; border-left: 1px solid var(--linea);
  color: var(--tinta-d); font-size: 19px; line-height: 1; cursor: pointer;
}
.br-limpiar:hover { color: var(--rojo); background: var(--papel-2); }
.br-elegido .br-limpiar { display: flex; }
.br-elegido .br-txt { padding-right: 40px; background: var(--papel-2); cursor: default; }

/* ── Combobox con buscador ───────────────────────────────────────── */
.sb { position: relative; }
.sb .sb-input { padding-right: var(--e6); }
.sb::after {
  content: ""; position: absolute; right: var(--e3); top: 50%; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--tinta-d); pointer-events: none;
}
.sb select {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  width: 100%; padding: var(--e1); max-height: 240px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--azul); margin-top: -1px;
  border-radius: 0 0 var(--radio-s) var(--radio-s); box-shadow: var(--sombra-2);
}
.sb.open select { display: block; }
/* Dentro de un modal la lista va EN EL FLUJO, no flotando.
   El cuerpo del modal tiene scroll propio —para que el pie no quede debajo
   del teclado en una tablet—, y una lista posicionada en absoluto queda
   recortada por ese scroll: se abría el desplegable de veinte mesas y se
   veía una sola, había que scrollear adentro del modal para elegir. En el
   flujo, el modal crece hasta su tope y la lista se ve entera. */
.modal-cuerpo .sb.open select, .dlg-cuerpo .sb.open select {
  position: static; margin-top: 2px; max-height: 260px;
}
.sb.open::after { border-top: none; border-bottom: 5px solid var(--azul); }
.sb select option { padding: 7px var(--e2); font-size: 14px; cursor: pointer; }
.sb select option:checked { background: var(--azul-bg); color: var(--tinta); }
.sb select option.hidden { display: none; }

/* Elegido = fijo; la equis suelta (mismo remedio que .br-limpiar: escribir
   encima de una selección descoordinaba el texto del valor de abajo). */
.sb-limpiar {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: none; border-left: 1px solid var(--linea);
  color: var(--tinta-d); font-size: 19px; line-height: 1; cursor: pointer;
}
.sb-limpiar:hover { color: var(--rojo); background: var(--papel-2); }
.sb-elegido .sb-limpiar { display: flex; }
.sb-elegido .sb-input { padding-right: 40px; background: var(--papel-2); cursor: default; }
.sb-elegido::after { display: none; }

/* ── Diálogos y modales ──────────────────────────────────────────
   Cabecera y pie fijos, cuerpo con scroll propio. En una tablet el
   teclado virtual se come media pantalla: si el modal scrollea entero,
   el botón de guardar queda debajo del teclado y no hay forma de llegar.
   ─────────────────────────────────────────────────────────────────── */
dialog {
  padding: 0; border: var(--borde) solid var(--linea); border-radius: var(--radio-l);
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-3);
  max-width: 480px; width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
dialog::backdrop { background: rgba(10, 30, 50, .5); }
.dlg-cab { padding: var(--e4) var(--e5) 0; }
.dlg-cab h2 { font-size: 17px; margin-bottom: var(--e2); }
.dlg-cuerpo { padding: 0 var(--e5) var(--e4); font-size: 14px; line-height: 1.6; }
.dlg-cuerpo .cifra { font-family: var(--num); font-weight: 500; }
.dlg-pie {
  display: flex; gap: var(--e2); justify-content: flex-end;
  padding: var(--e3) var(--e5) var(--e5);
}

/* ── Modal de formulario ─────────────────────────────────────────── */
dialog.modal {
  max-width: 640px;
  display: flex; flex-direction: column;   /* solo cuando está abierto */
}
dialog.modal:not([open]) { display: none; }
dialog.modal.ancho   { max-width: 860px; }
dialog.modal.angosto { max-width: 460px; }

/* Diálogos que se escribieron a mano, sin cabecera ni pie del sistema:
   el relleno lo pone el propio modal para que el formulario no quede
   pegado al borde. */
dialog.modal:not(:has(.modal-cab)) { padding: var(--e5); overflow-y: auto; display: block; }
dialog.modal:not(:has(.modal-cab)):not([open]) { display: none; }
dialog.modal:not(:has(.modal-cab)) > h2:first-child { margin-bottom: var(--e4); }

.modal-cab {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: var(--borde-f) solid var(--linea);
  flex: 0 0 auto;
}
.modal-cab h2 { margin: 0; font-size: 17px; }
.modal-cab .sec { margin: 2px 0 0; }
.modal-cab .sep { flex: 1; }
.modal-cerrar {
  background: transparent; border: 1px solid transparent; color: var(--tinta-d);
  padding: var(--e1); cursor: pointer; line-height: 0; margin: -4px -4px 0 0;
}
.modal-cerrar:hover { color: var(--tinta); border-color: var(--linea-f); }
.modal-cerrar .ico { width: 18px; height: 18px; }

.modal-cuerpo {
  padding: var(--e5);
  overflow-y: auto;                  /* el scroll vive acá, no en el modal */
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}
.modal-pie {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-top: var(--borde-f) solid var(--linea);
  background: var(--papel-2);
  border-radius: 0 0 calc(var(--radio-l) - 1px) calc(var(--radio-l) - 1px);
  flex: 0 0 auto;
}
.modal-pie .sep { flex: 1; }
.modal-cuerpo > *:last-child { margin-bottom: 0; }
/* Si el modal trae pie fijo, las acciones del formulario se van a él y no
   se repiten adentro. Si no lo trae, quedan donde estaban. */
dialog.modal:has(.modal-pie) .modal-cuerpo .form-pie { display: none; }
/* Modal sin pie: las acciones del formulario cierran el cuerpo. */
dialog.modal:not(:has(.modal-pie)) .modal-cuerpo > form > .form-pie,
dialog.modal:not(:has(.modal-pie)) .modal-cuerpo form button[type="submit"] { margin-top: var(--e4); }

/* ── Pasos, para los flujos que van de un modal al siguiente ─────── */
.pasos {
  display: flex; align-items: center; gap: 0;
  padding: 0 var(--e5) var(--e3);
  border-bottom: 1px solid var(--linea);
  flex: 0 0 auto;
}
/* Fuera de un modal la barra de pasos encabeza la pantalla. */
main > .pasos { padding: 0 0 var(--e3); margin-bottom: var(--e5); }
.paso {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--num); font-size: 11px; letter-spacing: .06em;
  color: var(--tinta-d); text-transform: uppercase;
}
.paso .n {
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--linea-f); font-size: 10px; flex: 0 0 20px;
  border-radius: var(--radio-pill);
}
.paso.on { color: var(--tinta); }
/* El paso en curso lleva el naranja de acción: es donde está la mano. */
.paso.on .n { border-color: var(--naranja); background: var(--naranja); color: #fff; }
.paso.listo .n { border-color: var(--cuadra); color: var(--cuadra); }
.paso-linea { flex: 1; height: 1px; background: var(--linea); margin: 0 var(--e3); min-width: 16px; }

@media (max-width: 640px) {
  dialog.modal, dialog.modal.ancho, dialog.modal.angosto {
    max-width: none; width: 100%; max-height: 100dvh; height: 100dvh;
    margin: 0; border: none; border-radius: 0;
  }
  .modal-pie { border-radius: 0; }
  .pasos { padding: 0 var(--e4) var(--e2); }
  .paso span:not(.n) { display: none; }   /* en teléfono queda el número */
  .modal-cuerpo, .modal-cab, .modal-pie { padding-left: var(--e4); padding-right: var(--e4); }
}

/* ── Logotipo ────────────────────────────────────────────────────── */
/* Identidad v2: icono naranja (tenedor y cuchillo en la C) como SVG
   inline + wordmark en Plus Jakarta 800 azul. El wordmark va en HTML y
   no dentro del SVG: así hereda la fuente self-hosted y el tema. */
.logo { display: inline-flex; align-items: center; gap: calc(var(--logo-tam, 17px) * .45); text-decoration: none; color: inherit; }
.logo:hover { text-decoration: none; }
.logo-ico { height: calc(var(--logo-tam, 17px) * 1.9); width: auto; flex: 0 0 auto; color: var(--naranja); display: block; }
.logo-txt { display: block; min-width: 0; }
.logo .palabra {
  display: block; font-family: var(--tit); font-weight: 800;
  letter-spacing: -.02em; text-transform: none;
  font-size: calc(var(--logo-tam, 17px) * 1.25); line-height: 1.1; color: var(--azul);
}
.logo .descriptor {
  display: block; font-family: var(--ui); font-size: 11px; font-weight: 400;
  letter-spacing: .02em; color: var(--tinta-d); margin-top: 2px;
  text-transform: none;
}
/* Sobre fondo azul de marca (banda CTA, correos, tarjetas oscuras) el
   wordmark pasa a blanco; el icono naranja funciona sobre azul. */
.logo.sobre-azul .palabra { color: #fff; }
.logo.sobre-azul .descriptor { color: rgba(255, 255, 255, .85); }

/* ══════════════════════════════════════════════════════════════════
   Traducción del markup anterior al sistema Boleta.

   Las vistas venían escritas contra un juego de clases distinto (.err,
   .muted, .row, .pill.acc, botones sin clase). En vez de reescribir 83
   archivos a mano y arriesgar el sistema entero en un solo golpe, acá se
   les da su significado nuevo. Los estilos inline sí se limpian, que era
   el problema de fondo.
   ══════════════════════════════════════════════════════════════════ */

button:not(.btn):not(.hamburguesa):not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--ui); font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 10px var(--e4); min-height: 38px;
  background: var(--azul); color: var(--azul-ink);
  border: 1px solid var(--azul); border-radius: var(--radio-m);
  box-shadow: var(--sombra-1); transition: var(--transicion); cursor: pointer;
}
button:not(.btn):not(.hamburguesa):not([class]):hover { background: #003761; border-color: #003761; }
:root[data-theme="dark"] button:not(.btn):not(.hamburguesa):not([class]):hover { background: #82B5E6; border-color: #82B5E6; }

label:not(.campo-et):not(.check):not(.hilera) {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta);
  margin: 0 0 var(--e1);
}
/* Casillas: el texto va al lado, no encima, y la caja no se estira. */
label.hilera, label.check { display: flex; align-items: center; gap: var(--e2); font-size: 14px; font-weight: 400; margin-bottom: var(--e4); }
label.check.revisar { color: var(--revisar); font-weight: 600; justify-content: center; margin-bottom: 0; cursor: pointer; }
label.hilera input[type="checkbox"], label.check input[type="checkbox"],
input[type="checkbox"], input[type="radio"] {
  width: auto; min-height: 0; margin: 0; flex: 0 0 auto;
}
/* El botón dentro de un formulario no arrastra el margen del campo. */
form .btn, form button { margin-bottom: 0; }
.sb { margin-bottom: var(--e4); }
.campo .sb, .filtros .sb { margin-bottom: 0; }

/* Mensajes: el error del sistema viejo pasa a ser un aviso de corrección. */
.err {
  border: 1px solid var(--rojo); border-left: 3px solid var(--rojo);
  border-radius: var(--radio-m);
  background: var(--rojo-bg); color: var(--rojo);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
/* El "flash" de éxito venía como .card con el borde pintado a mano. */
.card[style*="--acc"], .card.ok-flash {
  background: var(--cuadra-bg); border-color: var(--cuadra); border-left: 3px solid var(--cuadra);
  border-radius: var(--radio-m);
  color: var(--cuadra); padding: var(--e3) var(--e4); font-size: 14px;
}

.muted { color: var(--tinta-d); }
.acc   { color: var(--azul); }
.warn  { color: var(--revisar); }
.bad   { color: var(--rojo); }

.pill.acc  { color: var(--azul);    border-color: var(--azul);    background: var(--azul-bg); }
.pill.warn { color: var(--revisar); border-color: var(--revisar); background: var(--revisar-bg); }
.pill.bad  { color: var(--rojo);    border-color: var(--rojo);    background: var(--rojo-bg); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
@media (max-width: 980px) { .row { grid-template-columns: 1fr; } }

/* Clases que introdujo la migración al sacar los estilos inline. */
.fuerte { font-weight: 600; }
.hilera-ancha { gap: var(--e6); }
.angosto { max-width: 440px; }
.medio   { max-width: 600px; }

/* ── Acciones en el encabezado (a la derecha del título) ──────────────
   Enlaces a subsecciones ("Agentes", "Cola", "Impresoras") o a "volver".
   Antes se flotaban como texto de acento: varios seguidos se pegaban
   —"AgentesColaImpresoras"— y el float invertía el orden; además ninguno
   se leía como algo tocable. Ahora el h1 es una barra flex y cada enlace
   es un botón plano, separado. Mismo criterio que ya se aplicó a los
   botones de fila (ver .btn-plano). */
h1:has(.acc-der) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); }
/* El primer enlace se lleva el espacio sobrante: el título queda a la
   izquierda y el grupo de acciones, a la derecha. */
h1 > .acc-der:first-of-type { margin-left: auto; }

.acc-der { float: none; margin-bottom: var(--e2); }
/* Un enlace suelto toma la forma del botón plano del sistema. Los que ya
   son botones (.btn / .btn-chico / …) se excluyen para no encimarles otro
   estilo: solo heredan la posición a la derecha. */
.acc-der:not(.btn):not(.btn-chico):not(.btn-plano):not(.btn-sec) {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; min-height: 30px;
  color: var(--azul); background: var(--papel);
  border: 1px solid var(--linea-f); border-radius: var(--radio-s);
  white-space: nowrap; transition: var(--transicion);
}
.acc-der:not(.btn):not(.btn-chico):not(.btn-plano):not(.btn-sec):hover {
  background: var(--azul-bg); border-color: var(--azul); color: var(--azul); text-decoration: none;
}

.ok-flash {
  background: var(--cuadra-bg); border: 1px solid var(--cuadra);
  border-left: 3px solid var(--cuadra); color: var(--cuadra);
  border-radius: var(--radio-m);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
.revisar-flash {
  background: var(--revisar-bg); border: 1px solid var(--revisar);
  border-left: 3px solid var(--revisar); color: var(--revisar);
  border-radius: var(--radio-m);
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: 14px;
}
.btn-revisar { background: var(--revisar); color: var(--papel); border-color: var(--revisar); }
:root[data-theme="dark"] .btn-revisar { color: #241d10; }

/* Una cifra destacada dentro de una tabla o tarjeta sigue siendo cifra. */
.cifra-d { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* Restos de la identidad anterior que ya no existen en Boleta. */
.brand .logo, .login-marca .logo { display: none; }

/* ── Salón: buscador de mesa ─────────────────────────────────────── */
.salon-barra { margin-bottom: var(--e3); }
.ir-a-mesa { position: relative; }
.ir-a-mesa input {
  width: 150px; margin: 0; min-height: 38px;
  font-family: var(--num); text-align: center;
}
.ir-a-mesa input.sin-resultado {
  border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo);
}
/* Destello sobre la mesa encontrada: saltar hasta ella no alcanza si
   después hay que buscarla con la vista en un plano cargado. */
.mesa.encontrada {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  animation: mesa-destello .4s ease-in-out 3;
}
@keyframes mesa-destello { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .mesa.encontrada { animation: none; }
}

/* ── Pantalla de acceso ──────────────────────────────────────────── */
main.sin-sesion { max-width: none; padding: 0; }

.acceso { min-height: 100vh; display: grid; place-items: center; padding: var(--e6) var(--e4); }
.acceso-caja { width: 100%; max-width: 380px; }
/* La tarjeta de entrada flota sobre el degradado: primera impresión. */
.acceso-caja .bloque { box-shadow: var(--sombra-3); }
.acceso-marca { margin-bottom: var(--e6); }
.acceso-pie {
  margin-top: var(--e4); font-size: 12.5px; color: var(--tinta-d);
  font-family: var(--tit); letter-spacing: .01em;
}
.btn-ancho { width: 100%; }

/* Contexto antes de entrar: se entra a un lugar concreto, no a una app. */
.acceso-contexto {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--linea); border-bottom: none; background: var(--papel-2);
  border-radius: var(--radio-m) var(--radio-m) 0 0; overflow: hidden;
}
.acceso-contexto div { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); }
.acceso-contexto div:nth-child(odd) { border-right: 1px solid var(--linea); }
.acceso-contexto .et { display: block; }
.acceso-contexto b { font-size: 13.5px; font-weight: 600; }

/* ── Ruteo de la carta (/cocinas) ─────────────────────────────────────
   Una tabla-formulario: cada fila decide, para una categoría, dónde se
   prepara y por dónde sale. Los controles no arrastran el margen de
   formulario —desalinea la fila— y la fila que no se imprime se apaga. */
.tabla-ruteo td { vertical-align: middle; }
.tabla-ruteo td select { margin-bottom: 0; min-height: 34px; padding: 6px var(--e2); font-size: 13.5px; }
.tabla-ruteo .cat { font-weight: 600; }
.tabla-ruteo .cat small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-d); font-family: var(--num); }
.tabla-ruteo tr.apagada td:not(.papel) { opacity: .5; }
/* El interruptor "en papel": una casilla con su sí/no al lado, centrada. */
.tabla-ruteo .papel { text-align: center; }
.tabla-ruteo .papel label { display: inline-flex; align-items: center; gap: var(--e1); font-size: 12.5px; color: var(--tinta-d); cursor: pointer; }
.tabla-ruteo .papel input { width: auto; min-height: 0; margin: 0; }

/* Tira de resumen sobre el ruteo: tres cifras que se leen al pasar. */
.ruteo-resumen { display: flex; flex-wrap: wrap; gap: 0; border: var(--borde-f) solid var(--linea); border-bottom: none; background: var(--papel-2);
  border-radius: var(--radio-m) var(--radio-m) 0 0; overflow: hidden; }
.ruteo-resumen div { flex: 1 1 120px; padding: var(--e2) var(--e3); border-right: 1px solid var(--linea); }
.ruteo-resumen div:last-child { border-right: none; }
.ruteo-resumen dt { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-d); }
.ruteo-resumen dd { margin: 2px 0 0; font-family: var(--num); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ruteo-ayuda { margin-top: 0; }
.ruteo-nota { margin: 0; }

/* Teclado numérico: se usa con las manos mojadas. 46 px mínimo. */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.teclado button {
  min-height: 52px; font-family: var(--num); font-size: 19px; font-weight: 500;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linea-f);
  border-radius: var(--radio-m); cursor: pointer; transition: var(--transicion);
}
.teclado button:hover { background: var(--papel-2); border-color: var(--tinta); }
/* La tecla responde al dedo con el naranja de acción: en una pantalla
   sin mouse, el toque necesita confirmación visual inmediata. */
.teclado button:active { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.teclado button.ancho { grid-column: span 2; font-size: 13px; font-family: var(--ui); font-weight: 600; }
.pin-puntos {
  display: flex; gap: var(--e3); justify-content: center; align-items: center;
  min-height: 46px; margin-bottom: var(--e4); font-family: var(--num); font-size: 26px;
  letter-spacing: .3em; color: var(--tinta);
}

/* ── Utilidades mínimas. Deliberadamente pocas. ──────────────────── */
.der { text-align: right; }
.izq { text-align: left; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.mut { color: var(--tinta-d); }
.mal { color: var(--rojo); }
.ok { color: var(--cuadra); }
.en-linea { display: inline; }
.pila { display: flex; flex-direction: column; gap: var(--e2); }
.hilera { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.hilera .sep { flex: 1; }
.oculto { display: none; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Banda de impersonación ──────────────────────────────────────── */
.banda-soporte {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e5);
  background: var(--rojo); color: var(--papel);
  font-size: 13px; font-weight: 500;
}
.banda-soporte .sep { flex: 1; }
.banda-soporte a { color: var(--papel); border: 1px solid rgba(244,243,239,.5); padding: 3px var(--e3); text-decoration: none; border-radius: var(--radio-s); }
.banda-soporte a:hover { background: rgba(244,243,239,.15); text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
/* El mega menú es de escritorio. En un teléfono un panel flotante de 560 px
   no cabe, así que la barra se vuelve una lista vertical desplegable y los
   paneles pasan a acordeón: el mismo árbol, otra forma. */
@media (max-width: 1100px) {
  .spotlight-txt { display: none; }
  .spotlight-abre kbd { display: none; }
  .mega-trigger { padding: 0 var(--e2); }
  .mega-txt { display: none; }
  .mega-trigger .ico { width: 18px; height: 18px; }
}

@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap; padding: 0 var(--e4);
    align-items: center; row-gap: 0;
  }
  .topbar .sep { display: none; }
  .hamburguesa {
    display: inline-flex; align-items: center; justify-content: center;
    order: 2; margin-left: auto;
    width: 38px; height: 38px; padding: 0;
    background: transparent; border: 1px solid var(--linea-f); border-radius: var(--radio-s);
    color: var(--tinta); cursor: pointer;
  }
  .topbar-marca { order: 1; }
  /* Los atajos siguen a la vista en móvil, pero compactos: solo el icono,
     para no comerse el ancho de la primera fila. */
  .topbar-atajos { order: 1; }
  .topbar-atajo span { display: none; }
  .topbar-atajo { padding: 0 var(--e2); }
  .spotlight-abre { order: 3; margin-left: var(--e2); }

  /* Lo que se despliega con la hamburguesa. */
  .mega, .localsel, .topbar-local, .cuenta-tab {
    order: 4; display: none; width: 100%;
  }
  .mega { border-top: 1px solid var(--linea); padding: var(--e2) 0; }
  .shell.menu-abierto .mega { display: flex; flex-direction: column; }
  .shell.menu-abierto .localsel,
  .shell.menu-abierto .topbar-local { display: block; padding: var(--e3) 0; border-top: 1px solid var(--linea); }
  .shell.menu-abierto .cuenta-tab { display: block; margin: 0 0 var(--e3); }
  .localsel select { max-width: none; width: 100%; }
  .cuenta-panel { width: auto; }

  .mega-tab { display: block; }
  .mega-trigger {
    width: 100%; justify-content: flex-start; min-height: 44px;
    border-bottom: 1px solid var(--linea); border-left: 2px solid transparent;
  }
  .mega-txt { display: inline; }
  .mega-trigger .mega-flecha { margin-left: auto; }
  .mega-tab.on .mega-trigger { border-bottom-color: var(--linea); border-left-color: var(--azul); }

  /* Acordeón: el panel empuja, no flota. */
  .mega-panel {
    position: static; width: auto; max-width: none;
    border: 0; border-bottom: 1px solid var(--linea); box-shadow: none;
    border-radius: 0; margin-top: 0;
  }
  .mega-tab.abierto .mega-panel { animation: none; }
  .mega-cab { padding: var(--e3) var(--e4); }
  .mega-grilla { grid-template-columns: 1fr; }
  .mega-item:last-child:nth-child(odd) { grid-column: auto; }

  dialog.spotlight { margin-top: 6dvh; }
  /* En el celular el 90 % dejaría dos gutters de 20 px que no sirven para
     nada: se ocupa el ancho entero y el aire lo pone el padding, igual que
     el resto del sistema. */
  main { width: 100%; padding: var(--e4) var(--e4) var(--e8); }
  .fila, .fila-3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Teléfono (≤520 px) ───────────────────────────────────────────────
   El primer breakpoint pensado para un teléfono de verdad, no para una
   tablet vertical. La regla es una sola: TODO a una columna. Dos campos
   de 150 px lado a lado no se pueden ni leer ni tocar, y una ficha de
   148 px con una cifra de 24 px adentro tampoco. */
@media (max-width: 520px) {
  .campos .campo, .campos .campo-corto, .campos .campo-largo,
  .campos .campo:has(input[type="date"]),
  .campos .campo:has(input[type="time"]) { flex: 1 1 100%; }
  .tiles { grid-template-columns: 1fr; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros label, .filtros .campo { width: 100%; }
}

/* Manos mojadas, tablet, servicio. El manual pide 46 px de alto. */
@media (pointer: coarse) {
  .btn, input, select, textarea { min-height: 46px; }
  /* 16 px en los campos, no por gusto: bajo eso, iOS Safari hace zoom
     automático al enfocar y deja la página desencuadrada. La carta pública
     ya lo hacía; acá se generaliza SOLO en táctil para no engordar el
     escritorio. */
  input, select, textarea { font-size: 16px; }
  /* El "Editar" de todos los listados es un .btn-plano: es el control más
     tocado del sistema y se quedaba en 38 px, bajo el piso del manual.
     .btn-chico y .btn-mini viven en filas de tabla y suben a 40, que es lo
     que se puede sin desarmar el renglón. */
  .btn-plano { min-height: 44px; }
  .btn-chico, .btn-mini { min-height: 40px; }
  .mega-item { padding: var(--e4); }
  .spot-item { padding: var(--e4); }
  /* El cromo que el bloque de arriba no alcanzaba: la hamburguesa es el
     único acceso al menú en teléfono, el buscador es el mejor camino con
     37 módulos, y el selector de local ganaba por especificidad con sus
     32 px — equivocarse de local es el error caro. */
  .hamburguesa { width: 44px; height: 44px; }
  .spotlight-abre, .topbar-atajo { min-height: 44px; }
  .localsel select { min-height: 44px; }
  /* Las opciones del combobox medían ~33 px: es la lista que el garzón
     toca con el pulgar. */
  .sb select option { padding: 12px var(--e3); font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media print {
  .topbar, .acciones-cab, .filtros, .banda-soporte, .spotlight { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  main { max-width: none; padding: 0; }
  .bloque, .tabla { border-color: #000; box-shadow: none; }
}

/* ══ Libro de servicio de salud y RRHH (módulos del bloque F) ═════════
   El plano sanitario son BLOQUES en grilla, no un plano dibujado: en una
   tablet con las manos mojadas se le achunta a un bloque grande, no a un
   dibujo. Hereda tarjetas, radios y sombras del sistema. */

.pill-neutro { color: var(--tinta-d); border-color: var(--linea); }

.plano-salud { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
               gap: var(--e4); margin-bottom: var(--e5); }
.plano-salud-titulo { margin: var(--e5) 0 var(--e3); }
.bz .bz-cuerpo { display: flex; flex-direction: column; gap: var(--e2); }
.bz-alerta { border-color: var(--rojo); }
.bz-fila { display: flex; align-items: center; justify-content: space-between;
           gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--linea);
           color: var(--tinta); text-decoration: none; min-height: 46px; }
.bz-fila:first-child { border-top: none; }
.bz-fila:hover { color: var(--tinta); }
.bz-fila:hover span:first-child { color: var(--azul); }

/* Checklist de llenado: objetivo táctil grande, un ítem por renglón. */
.checklist-tactil { list-style: none; margin: 0; padding: 0; }
.checklist-tactil > li { border-bottom: 1px solid var(--linea); padding: var(--e2) var(--e4); }
.ct-item { display: flex; align-items: center; gap: var(--e3); min-height: 46px;
           cursor: pointer; }
.ct-item input[type="checkbox"] { width: 22px; height: 22px; flex: none; min-height: 0; }
.ct-cubierto .ct-texto { color: var(--tinta-d); }
.ct-proc { margin: 0 0 var(--e2) 34px; }
.ct-proc summary { color: var(--azul); cursor: pointer; font-size: 13px; }
.ct-proc p { margin: var(--e2) 0; color: var(--tinta-d); font-size: 13.5px; }

/* Higiene: matriz C / NC / N-A con celdas grandes. */
.hig-tabla .hig-op { text-align: center; width: 64px; }
.hig-radio { display: flex; justify-content: center; align-items: center;
             min-height: 42px; cursor: pointer; }
.hig-radio input { width: 20px; height: 20px; min-height: 0; }
.hig-resumen { list-style: none; margin: 0; padding: 0;
               display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
               gap: var(--e1) var(--e4); }
.hig-resumen li { display: flex; gap: var(--e2); align-items: baseline; padding: 2px 0; }

/* Temperaturas: la lectura es cifra, va en monoespaciada y angosta. */
.temp-input { width: 96px; text-align: right; font-family: var(--num); }
.temp-accion { width: 100%; min-width: 180px; }
.verif-linea { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) 0;
               border-top: 1px solid var(--linea); flex-wrap: wrap; }
.verif-linea .campo-pin { width: 110px; }
/* El PIN son cuatro dígitos: nunca necesita más de este ancho, y a ancho
   completo el campo parecía pedir una frase. */
.campo-pin { font-family: var(--num); letter-spacing: 4px; max-width: 140px; }

/* Configuración: filas-formulario (un form no puede vivir dentro de un
   tr, por eso esto no es tabla). */
.cfg-fila { display: flex; gap: var(--e3); align-items: flex-start; flex-wrap: wrap;
            padding: var(--e2) 0; border-top: 1px solid var(--linea); }
.cfg-fila:first-of-type { border-top: none; }
.cfg-fila input[type="text"] { flex: 1; min-width: 160px; }
/* Los controles de dato corto heredaban el width:100% de formulario y cada
   uno se llevaba una fila entera: una hora de cinco caracteres ocupaba
   1.200 px y un turno de dos horas se leía en cuatro renglones. */
.cfg-fila select { flex: 0 1 auto; width: auto; max-width: 100%; }
.cfg-fila input[type="time"], .cfg-fila input[type="date"] { flex: 0 0 auto; width: auto; }

/* Tramo de horario: día, entrada y salida se leen como una sola frase. */
.cfg-fila.tramo { align-items: center; }
.cfg-fila.tramo select { flex: 0 1 150px; }
.cfg-fila.tramo .mut { flex: 0 0 auto; }
.cfg-fila .cfg-texto { flex: 2; }
.cfg-orden { width: 72px; text-align: right; }
.cfg-rango { display: inline-flex; gap: var(--e2); align-items: center; }
.cfg-rango input { width: 76px; text-align: right; font-family: var(--num); }

/* Fila de equipo: es una tabla, así que se arma como tabla. Con flex, los
   rótulos y las cajas repartían el sobrante distinto y ninguna columna caía
   sobre la siguiente; con la MISMA grilla en la fila de rótulos y en cada
   formulario, calzan por construcción. El botón se fija a la última columna
   porque la fila de alta no trae la casilla "activo" y, sin eso, subiría un
   lugar. */
.cfg-equipo {
  display: grid; align-items: center;
  /* La última columna va con ancho fijo y no `auto`: con `auto` medía 0 en la
     fila de rótulos (que no trae botón) y 55 px en el formulario, y esa
     diferencia se la repartían las columnas elásticas, corriendo todo. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 200px 76px 92px;
  gap: var(--e3);
}
.cfg-equipo > button { grid-column: 6; }
.cfg-rotulos { padding-bottom: 0; border-top: none; }

/* Bajo 1100 px la grilla de seis columnas no cabe: vuelve a ser una lista
   de campos que se acomodan solos, y los rótulos sobran. */
@media (max-width: 1100px) {
  .cfg-equipo { display: flex; flex-wrap: wrap; }
  .cfg-equipo > button { margin-left: auto; }
  .cfg-rotulos { display: none; }
}
.cfg-planilla { border-top: 1px solid var(--linea); padding: var(--e3) 0; }
.cfg-planilla > summary { cursor: pointer; min-height: 40px; display: flex;
                          align-items: center; gap: var(--e2); }
.cfg-mas { flex: 2; min-width: 220px; }
.cfg-mas summary { color: var(--azul); cursor: pointer; font-size: 13px; }
.cfg-mas textarea, .cfg-mas input { width: 100%; margin-top: var(--e2); }

/* Historial: pestañas planas; la activa lleva la doble regla del manual. */
.tabs { display: flex; gap: var(--e4); border-bottom: 1px solid var(--linea);
        margin-bottom: var(--e4); }
.tab { padding: var(--e2) 0; color: var(--tinta-d); text-decoration: none;
       min-height: 40px; display: inline-flex; align-items: center; }
.tab-activa { color: var(--tinta); border-bottom: 3px double var(--tinta); }
.fila-detalle td { border-top: none; padding-top: 0; }

/* Mantención y carpetas: ítem apilado del panel lateral. */
.plan-item { padding: var(--e2) 0; border-top: 1px solid var(--linea);
             display: flex; flex-direction: column; gap: 2px; }
.plan-item:first-of-type { border-top: none; }
.adj-form { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e2); }
.acciones-linea { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }

/* Contrato: el documento se muestra tal cual, con tipografía de papel. */
.contrato-texto { white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif;
                  font-size: 13.5px; line-height: 1.55; margin: 0; }
.plantilla-editor { width: 100%; font-family: var(--num); font-size: 13px;
                    line-height: 1.5; }
.marcadores-lista { list-style: none; margin: 0; padding: 0; }
.marcadores-lista li { padding: 3px 0; border-top: 1px solid var(--linea); }
.marcadores-lista li:first-child { border-top: none; }
.marcadores-lista code { color: var(--azul); font-family: var(--num); font-size: 12.5px; }

/* Botón cómodo para el dedo en el flujo de llenado. */
.btn-tactil { min-height: 48px; }

/* Documentación SST: el formulario apilado de emisión y la carpeta. */
.form-col { display: flex; flex-direction: column; gap: var(--e3); max-width: 560px; }
.form-col > label { display: flex; flex-direction: column; gap: var(--e1);
                    font-size: 13.5px; color: var(--tinta-d); }
.fila-grupo td { background: var(--papel-2, #f6f7f9); font-size: 13px; }
.lista-adjuntos { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.lista-adjuntos li { padding: 4px 0; border-top: 1px solid var(--linea); }
.lista-adjuntos li:first-child { border-top: none; }

/* El documento congelado se lee como papel, igual que el contrato. */
.doc-cuerpo { font-family: Georgia, "Times New Roman", serif; font-size: 13.5px;
              line-height: 1.5; max-width: 760px; }
.doc-cuerpo h1 { font-size: 19px; margin: 0 0 4px; }
.doc-cuerpo h2 { font-size: 15.5px; margin: 14px 0 6px; }
.doc-cuerpo h3 { font-size: 14px; margin: 10px 0 4px; }
.doc-cuerpo table.doc-tabla { width: 100%; border-collapse: collapse;
                              margin: 8px 0 14px; font-size: 12.5px; }
.doc-cuerpo .doc-tabla th, .doc-cuerpo .doc-tabla td { border: 1px solid var(--linea);
                              padding: 4px 7px; text-align: left; vertical-align: top; }
.doc-cuerpo .doc-tabla th { background: var(--papel-2, #f6f7f9); }
.doc-cuerpo .doc-firmas { display: flex; gap: 40px; margin-top: 36px; }
.doc-cuerpo .doc-firma { flex: 1; border-top: 1px solid var(--tinta);
                         padding-top: 6px; text-align: center; font-size: 12.5px; }
.doc-cuerpo .doc-papeleta { border: 1px dashed var(--tinta-d); padding: 10px 14px; margin: 10px 0; }

/* ── Calculadora global (HU-1707 llevada a la topbar) ─────────────────
   El dialog calza con el spotlight: misma familia de capa flotante. El
   teclado reutiliza .teclado (el del PIN) en 4 columnas. */
dialog.calc {
  width: 360px; max-width: calc(100% - 32px);
  margin: 12dvh auto auto; padding: var(--e4);
  border: var(--borde) solid var(--linea); background: var(--papel);
  border-radius: var(--radio-l); box-shadow: var(--sombra-3);
}
dialog.calc::backdrop { background: rgba(10, 30, 50, .5); }
.teclado-4 { grid-template-columns: repeat(4, 1fr); }
.calc-cab { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e3); }
.calc-cab input {
  font-family: var(--num); font-size: 18px; text-align: right;
  min-height: 48px; padding: 8px var(--e3);
}
/* El resultado es LA cifra: monoespaciada, grande, a la derecha. */
.calc-res {
  display: block; text-align: right; font-family: var(--num);
  font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700;
  color: var(--azul); min-height: 34px;
}
/* El = es acción de operación: azul, como el resto de los botones del
   sistema. El naranja queda para el :active que ya trae .teclado. */
.teclado button.calc-igual { background: var(--azul); border-color: var(--azul); color: #fff; }
.teclado button.calc-igual:hover { background: var(--azul); filter: brightness(1.1); }
.calc-historial { list-style: none; margin: var(--e3) 0 0; padding: 0; max-height: 150px; overflow-y: auto; }
.calc-historial:empty { display: none; }
.calc-historial li {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: 5px 2px; border-top: 1px solid var(--linea);
  font-family: var(--num); font-size: 12.5px; color: var(--tinta-d); cursor: pointer;
}
.calc-historial li:hover { color: var(--tinta); background: var(--papel-2); }
.calc-historial li b { color: var(--tinta); }

/* ── Turnos del personal (RRHH): la grilla semanal y su navegación ──────
   La celda es un botón: en tablet se toca con el dedo, por eso el alto
   mínimo. El exceso sobre el tope se dice con palabra y color a la vez. */
.turnos-nav { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e3); padding: var(--e2) var(--e3); background: var(--card);
  border: 1px solid var(--linea); border-radius: var(--radio-m); }
.turnos-nav-titulo { display: flex; flex-direction: column; min-width: 220px; text-align: center; }
.turnos-nav-titulo strong { color: var(--azul); }
.turnos-nav-campo { display: flex; align-items: center; gap: var(--e1); font-size: 13px; color: var(--tinta-d); }
.turnos-nav-campo input[type="date"] { width: auto; }
.turnos-nav-local { min-width: 200px; }
.turnos-grid { table-layout: fixed; min-width: 980px; }
.turnos-grid th.turnos-dia { text-align: center; }
.turnos-grid th.turnos-dia .turnos-dia-nom { display: block; font-weight: 700; }
.turnos-grid th.turnos-dia .turnos-dia-num { display: block; font-weight: 400; font-family: var(--num); font-size: 11.5px; color: var(--tinta-d); }
.turnos-grid th.es-hoy, .turnos-grid td.es-hoy { background: var(--azul-bg); }
.turnos-grid td.turnos-cel { padding: 4px; vertical-align: top; }
.turnos-quien { width: 170px; }
.turnos-quien .turnos-nombre { display: block; font-weight: 600; }
.turnos-quien small { display: block; margin-bottom: 4px; }
.turno-celda { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 56px; padding: 6px 4px; border: 1px dashed var(--linea-f); border-radius: var(--radio-s);
  background: transparent; font: inherit; color: var(--tinta); cursor: pointer; text-align: center; }
.turno-celda:hover, .turno-celda:focus-visible { border-color: var(--azul); background: var(--card); outline: none; }
.turno-celda:not(.turno-vacio) { border-style: solid; background: var(--papel); box-shadow: var(--sombra-1); }
.turno-tramo { font-family: var(--num); font-size: 13px; font-weight: 600; white-space: nowrap; }
.turno-horas { font-family: var(--num); font-size: 11px; color: var(--tinta-d); }
.turno-nota { font-size: 10.5px; color: var(--tinta-d); font-style: italic; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno-libre { font-size: 12px; color: var(--tinta-d); }
.turnos-total .turnos-horas { display: block; font-size: 15px; font-weight: 700; }
.turnos-total small { display: block; }
.turno-exceso { color: var(--rojo); font-weight: 700; }
tr.fila-exceso > td.turnos-total { background: var(--rojo-bg); }
.turnos-copiar { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.turnos-copiar form { display: flex; gap: var(--e2); flex-wrap: wrap; }
.turnos-valor-hora { font-size: 20px; font-weight: 700; margin: 6px 0 0; }

/* ── Ficha del producto: pestañas y resumen ──────────────────────── */
/* La ficha se parte en pestañas por hash (#datos, #receta…): cada
   guardado vuelve a la pestaña que se estaba tocando y la página no
   arranca desde arriba. Sin JS todas las secciones se ven apiladas. */
.ficha-resumen { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  padding: var(--e3) var(--e4); background: var(--papel); border: var(--borde) solid var(--linea);
  border-radius: var(--radio-m); box-shadow: var(--sombra-1); margin-bottom: var(--e4); }
.ficha-resumen a { text-decoration: none; color: inherit; }
.ficha-resumen a:hover .ficha-res-v { color: var(--azul); }
.ficha-res { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.ficha-res .et { letter-spacing: .1em; }
.ficha-res-v { font-family: var(--num); font-size: 15px; font-weight: 600; }
.ficha-res-v.txt { font-family: var(--ui); font-weight: 600; font-size: 14px; }
.ficha-res-v.bad { color: var(--rojo); }
.ficha-res-v.mut { color: var(--tinta-d); font-weight: 400; }
.ficha-tabs { position: sticky; top: 0; z-index: 5; background: var(--papel-2);
  margin-bottom: var(--e4); padding-top: var(--e2); }
.ficha-tabs .tab { position: relative; padding: var(--e2) var(--e1); font-weight: 600; }
.ficha-tabs .tab .tab-n { font-family: var(--num); font-size: 11px; font-weight: 400;
  color: var(--tinta-d); margin-left: 6px; }
/* Punto naranja: la pestaña tiene cambios que todavía no se guardaron. */
.ficha-tabs .tab.sucia::after { content: ""; position: absolute; top: 6px; right: -6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }
.js .ficha-sec { display: none; }
html[data-ficha="datos"] .ficha-sec[data-sec="datos"],
html[data-ficha="receta"] .ficha-sec[data-sec="receta"],
html[data-ficha="presentacion"] .ficha-sec[data-sec="presentacion"],
html[data-ficha="modificadores"] .ficha-sec[data-sec="modificadores"],
html[data-ficha="horario"] .ficha-sec[data-sec="horario"],
html[data-ficha="contratos"] .ficha-sec[data-sec="contratos"],
html[data-ficha="carpeta"] .ficha-sec[data-sec="carpeta"] { display: block; }
.ficha-sec > h2 { margin-bottom: var(--e1); }
.ficha-sec > .sec.bajada { margin-bottom: var(--e4); }
/* Sin JS todas las secciones se apilan y las cabeceras las separan. */
.no-js .ficha-sec + .ficha-sec { margin-top: var(--e6); }
.ficha-pie { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.ficha-pie .sec { margin: 0; }
.ficha-pie .sep { flex: 1; }
/* Cambios sin guardar en el formulario de datos: aviso junto al botón. */
.ficha-pie .pendiente { display: none; color: var(--naranja-txt); font-size: 13px; }
form.sucia .ficha-pie .pendiente { display: inline; }
/* Precio sugerido y margen, en la pestaña de datos, como una fila. */
.ficha-precio-info { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3); background: var(--papel-2); border-radius: var(--radio-s); margin-bottom: var(--e4); }
.ficha-precio-info .sec { margin: 0; }
/* Receta: elección insumo / sub-receta como par de opciones grandes. */
.tipo-comp { display: flex; gap: var(--e2); margin-bottom: var(--e3); }
.tipo-comp label { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3);
  border: 1px solid var(--linea-f); border-radius: var(--radio-pill); cursor: pointer;
  font-size: 14px; font-weight: 500; margin: 0; }
.tipo-comp label:has(input:checked) { border-color: var(--azul); background: var(--azul-bg); color: var(--azul); }
.tipo-comp input { width: auto; min-height: 0; margin: 0; }
.receta-costo-vivo { font-family: var(--num); font-size: 13px; color: var(--tinta-d); }
.receta-costo-vivo strong { color: var(--tinta); }
/* Edición en línea de la receta: los campos se ven como texto hasta que
   se tocan; el botón Guardar de la fila aparece solo si algo cambió. */
.receta-tabla td input { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.receta-tabla td input.num { width: 96px; text-align: right; }
.receta-tabla td input.orden { width: 60px; }
.receta-tabla td input.paso { min-width: 180px; width: 100%; }
.receta-tabla .guardar-linea { visibility: hidden; }
.receta-tabla tr.sucia .guardar-linea { visibility: visible; }
.no-js .receta-tabla .guardar-linea { visibility: visible; }
.receta-tabla td.acciones { white-space: nowrap; }
.receta-agrega { background: var(--papel-2); border-radius: var(--radio-m); padding: var(--e4); margin-top: var(--e4); }
.receta-agrega h3 { margin-bottom: var(--e1); }
.receta-agrega > .sec { margin-bottom: var(--e3); }
/* Lista de modificadores en dos columnas cuando hay muchos grupos. */
.mods-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 0 var(--e5); }
.mods-lista label.hilera { margin-bottom: var(--e2); }
/* Foto en la pestaña de presentación. */
.foto-plato { display: flex; gap: var(--e4); align-items: flex-start; }
.foto-plato-marco { flex: 0 0 120px; width: 120px; height: 120px; border: var(--borde-f) solid var(--linea);
  border-radius: var(--radio-m); background: var(--papel-2); display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.foto-plato-marco img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .ficha-tabs { background: var(--papel-2); }
/* La ayuda de la ficha se ve chica también fuera de un .campo (el
   fieldset de precios por sucursal). */
.ficha-sec .ayuda { font-size: 12.5px; color: var(--tinta-d); margin-top: var(--e1); }
.ficha-sec fieldset legend { font-weight: 600; }

/* ── Formulario por grupos (modal de insumos) ─────────────────────── */
/* Cada grupo tiene título y una línea que dice para qué sirve: un
   formulario de veinte campos se lee como cuatro preguntas. */
.form-grupo { padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--linea); }
.form-grupo:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.form-grupo > h3 { margin-bottom: 2px; }
.form-grupo > .sec { margin-bottom: var(--e3); }
.form-grupo > label.hilera { margin-bottom: var(--e3); }
details.form-grupo > summary { font-family: var(--tit); font-weight: 700; font-size: 13px; color: var(--azul); }
details.form-grupo > summary .muted { font-weight: 400; }
details.form-grupo[open] > summary { margin-bottom: var(--e2); }
/* La fila recién creada o editada, para encontrarla entre cientos. */
.tabla tr.fila-resaltada > td { background: var(--naranja-bg); }
.tabla.zebra tbody tr.fila-resaltada { background: var(--naranja-bg); }

/* ── Modificadores: un bloque por grupo ──────────────────────────────── */
.grupo-mod { scroll-margin-top: var(--e4); }
.grupo-mod-titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grupo-mod-titulo h2 { margin: 0; }
.grupo-mod-pills { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.grupo-mod .bloque-cab { flex-wrap: wrap; }
/* Apagado: el bloque se apaga con él, para que se note de un vistazo. */
.grupo-apagado { opacity: .72; }
.grupo-apagado .bloque-cab { background: var(--papel-2); }
/* El grupo recién creado o tocado. */
.grupo-resaltado { box-shadow: 0 0 0 2px var(--naranja), var(--sombra-1); }
/* En el modal de opción, el grupo ya decidido se muestra fijo. */
.grupo-fijo { display: flex; gap: var(--e2); align-items: baseline; padding: var(--e2) var(--e3);
  background: var(--papel-2); border-radius: var(--radio-s); margin: 0; }
.grupo-fijo strong { color: var(--azul); }

/* ── Modificadores: lista + detalle ──────────────────────────────────
   Los grupos a la izquierda, el abierto a la derecha. Escala a muchos
   grupos sin alargar la página, y agregar una opción es una fila al pie
   de la tabla, no otra pantalla. */
.maestro-detalle { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--e5); align-items: start; }
.md-lista { padding: 0; position: sticky; top: var(--e4); max-height: calc(100vh - var(--e8)); display: flex; flex-direction: column; }
.md-buscar { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea); }
.md-buscar input[type="search"] { margin-bottom: var(--e2); }
.md-buscar .ayuda { margin-top: var(--e2); }
.md-fichas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.md-fichas .pill { text-decoration: none; cursor: pointer; }
.md-fichas .pill:hover { border-color: var(--tinta); color: var(--tinta); }
.md-items { overflow-y: auto; min-height: 0; }
.md-item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea); border-left: 3px solid transparent; text-decoration: none; color: var(--tinta); }
.md-item:hover { background: var(--papel-2); text-decoration: none; color: var(--tinta); }
.md-item.on { background: var(--azul-bg); border-left-color: var(--azul); }
.md-item.on .md-item-nombre { color: var(--azul); }
.md-item.apagado { opacity: .7; }
.md-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.md-item-nombre { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-lista-pie { padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); }
.md-lista-pie .btn { width: 100%; }
.md-detalle { padding: 0; }
.md-detalle-cab { align-items: flex-start; flex-wrap: wrap; }
.md-detalle-cab.apagado { opacity: .8; }
.md-detalle-titulo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-detalle-titulo h2 { font-size: 18px; margin: 0; }
.md-pills { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.md-datos { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); padding: var(--e3) var(--e4) 0; font-size: 14px; }
.md-datos > div { flex: 1 1 200px; min-width: 0; }
.md-datos .et { display: block; margin-bottom: 2px; }
.md-productos summary { cursor: pointer; color: var(--tinta); }
.md-productos summary .sec { color: var(--azul); }
.md-productos ul { margin: var(--e2) 0 0; padding-left: 18px; columns: 2; font-size: 13px; }
.md-tabla { margin-top: var(--e3); }
/* La fila de alta al pie: NO es una fila de totales, así que nada de
   doble regla ni negrita; es una zona de trabajo gris. */
.md-tabla tfoot td, .md-tabla tr.md-alta td { border-top: 1px solid var(--linea-f); font-weight: 400; padding: var(--e4); background: var(--papel-2); border-radius: 0 0 17px 17px; }
.md-alta form { margin: 0; }
.md-alta-fila { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: flex-end; }
.md-alta-fila .campo { margin-bottom: 0; }
.md-alta-nombre { flex: 2 1 200px; }
.md-alta-tipo { flex: 0 1 auto; }
.md-alta-tipo .tipo-comp { margin: 0; }
.md-alta-tipo .tipo-comp label { min-height: 38px; }
.md-alta-prod { flex: 3 1 240px; }
.md-alta-cant { flex: 0 0 90px; }
.md-alta-rec { flex: 0 0 110px; }
.md-alta-btn { flex: 0 0 auto; }
.md-alta .ayuda { margin-top: var(--e2); font-size: 12.5px; color: var(--tinta-d); }
@media (max-width: 900px) {
  .maestro-detalle { grid-template-columns: 1fr; }
  .md-lista { position: static; max-height: none; }
  .md-items { max-height: 320px; }
}

/* ── Carta: lista + ficha (misma familia que modificadores) ────────── */
.md-carta { grid-template-columns: 380px minmax(0, 1fr); }
.md-cat { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e2); }
.md-cat .sb { flex: 1; min-width: 0; }
.md-cat-cab { position: sticky; top: 0; z-index: 1; padding: 6px var(--e4) 4px; background: var(--papel-2);
  border-bottom: 1px solid var(--linea); font-family: var(--num); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-d); }
.md-foto { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radio-s); background: var(--papel-3);
  overflow: hidden; display: grid; place-items: center; text-align: center; }
.md-foto img { width: 100%; height: 100%; object-fit: cover; }
.md-foto .et { font-size: 8px; letter-spacing: .04em; line-height: 1.2; }
.md-item .warn { color: var(--revisar); }
.md-item .pill { flex: 0 0 auto; }
.md-lista-pie .md-importar { margin-top: var(--e3); }
.md-importar summary { cursor: pointer; color: var(--azul); }
.md-importar[open] summary { margin-bottom: var(--e2); }
.md-importar .campo { margin: var(--e2) 0; }
.md-detalle-cuerpo { padding: var(--e4); }
.md-ficha .ficha-sec { padding: 0; }
.md-ficha .ficha-tabs { top: 0; }
.md-solo-lectura { padding: 0 var(--e4) var(--e4); }
@media (max-width: 1100px) { .md-carta { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 900px) { .md-carta { grid-template-columns: 1fr; } }
/* Insumos: lista + ficha (misma familia). */
.md-sin-pie { padding-bottom: 0; }
.md-sin-pie .ficha-tabs { margin-bottom: 0; }
.md-dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); align-items: start; }
.md-dos-col table { margin-bottom: var(--e2); }
@media (max-width: 1100px) { .md-dos-col { grid-template-columns: 1fr; } }
/* Categorías: lista + ficha y el eliminar con alternativas. */
.md-orden { width: 22px; flex: 0 0 22px; text-align: right; font-size: 11px; color: var(--tinta-d); }
.md-alternativas { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e3); }
.md-alt { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3);
  border: 1px solid var(--linea-f); border-radius: var(--radio-m); cursor: pointer; margin: 0; font-weight: 400; }
.md-alt:has(input:checked) { border-color: var(--azul); background: var(--azul-bg); }
.md-alt input { width: auto; min-height: 0; margin-top: 3px; }
.md-alt-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.md-alt-destino { margin: 0 0 var(--e2) var(--e8); }
.aviso .md-conc { color: var(--tinta); margin: 4px 0 0; }
/* Caja = el cajón (opción A, 2026-08-19): una columna, sin cola de cobro. */
.caja-cajon { max-width: 880px; }
.abrir-caja { max-width: 460px; }
.abrir-caja .btn { width: 100%; justify-content: center; padding: 14px; }
.caja-egreso { font-size: 15px; }
.caja-desglose { margin: calc(var(--e3) * -1) 0 var(--e5); }
.caja-desglose summary { cursor: pointer; color: var(--azul); }
.caja-desglose table { max-width: 460px; margin-top: var(--e2); }
.caja-mov-form { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px dashed var(--linea-f); }
.caja-cierre { display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; }
.caja-cierre-txt { flex: 1; min-width: 280px; }
.caja-cierre-txt p { margin: 0; }
.caja-cierre .btn-cta { min-height: 48px; }
.caja-anular summary { cursor: pointer; display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.caja-anular summary h2 { display: inline; margin: 0; }
.caja-anular[open] summary { margin-bottom: var(--e3); }
/* Descuentos: la interfaz común (plantillas + convenios). */
.md-pie-doble { display: flex; gap: var(--e2); }
.md-pie-doble .btn { flex: 1; }
.md-reporte summary { cursor: pointer; display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.md-reporte summary h2 { display: inline; margin: 0; }
.md-reporte[open] summary { margin-bottom: var(--e3); }
.md-avance-col { min-width: 160px; }

/* ── Movimientos: la botonera de tipos del POS «Mostrador» ──────────────
   La comparten /movimientos (elegir qué documento se carga) y
   /movimientos/buscar (elegir qué documentos se buscan): las dos pantallas
   hermanas hablan el mismo idioma. Entrada lleva su globo con los envíos
   en camino. */
.pos-tipos { display: flex; gap: var(--e2); align-items: stretch; flex-wrap: wrap; margin-bottom: var(--e4); }
.pos-tipo-btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; min-width: 112px; min-height: 54px;
  padding: var(--e2) var(--e3); cursor: pointer;
  border: 1px solid var(--linea-f); border-radius: var(--radio-m); background: var(--papel);
  font-family: var(--ui); font-weight: 700; font-size: 13.5px; color: var(--tinta);
  box-shadow: var(--sombra-1); text-decoration: none;
}
.pos-tipo-btn:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.pos-tipo-btn .sub {
  font-family: var(--num); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-d); font-weight: 400;
}
.pos-tipo-btn.on { border-color: var(--azul); background: var(--azul-bg); color: var(--azul); box-shadow: inset 0 -3px 0 var(--azul); }
.pos-tipo-btn.on .sub { color: var(--azul); }
.pos-tipo-btn .globo {
  position: absolute; top: -7px; right: -7px; background: var(--naranja); color: #fff;
  font-family: var(--num); font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: var(--radio-pill); display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.pos-tipos .pos-local { margin-left: auto; align-self: center; text-align: right; }
.pos-local { display: inline-flex; flex-direction: column; font-size: 12px; color: var(--tinta-d); white-space: nowrap; line-height: 1.35; }
.pos-local b { color: var(--tinta); font-size: 14px; }
.pos-tipos .btn-plano { align-self: center; }

/* ── Plano sanitario (/salud/plano) ───────────────────────────────────
   Plano a escala (40 px = 1 m) en SVG: estructura, zonas como áreas de
   piso y equipos con silueta real. Prefijo propio: .plano-salud ya existe
   para la portada del libro y las clases del editor de salón viven en su
   vista. El zoom escala el lienzo entero; las coordenadas son reales. */
.ps-marco { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: var(--e3); align-items: start; }
@media (max-width: 1180px) { .ps-marco { grid-template-columns: minmax(0, 1fr); } }
.ps-pisos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e3); align-items: center; }
.ps-pisos .ps-piso { background: var(--papel-2); color: var(--tinta-d); border: 1px solid var(--linea);
  border-radius: var(--radio-pill); padding: 9px 18px; font-size: 13px; min-height: 38px; cursor: pointer; }
.ps-pisos .ps-piso:hover { border-color: var(--linea-f); color: var(--tinta); }
.ps-pisos .ps-piso.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ps-pisos .ps-piso-cuenta:not(:empty) { display: inline-block; margin-left: 7px; padding: 0 5px; font-family: var(--num);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--linea); color: var(--tinta); }
.ps-pisos .ps-piso.on .ps-piso-cuenta:not(:empty) { background: var(--papel); }
.ps-pisos form { display: inline-flex; gap: 6px; align-items: center; }
.ps-pisos form input[type=text] { width: 150px; min-height: 38px; }
.ps-barra { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.ps-barra .rotulo { font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-d); }
.ps-barra .sep { flex: 1; }
.ps-escala { font-family: var(--num); font-size: 12.5px; font-weight: 600; border: 1px solid var(--linea-f); border-radius: var(--radio-s); padding: 6px 10px; }
.ps-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ps-zoom { display: inline-flex; }
.ps-zoom .btn { border-right-width: 0; font-family: var(--num); }
.ps-zoom .btn:last-child { border-right-width: 1px; }
.ps-zoom .ps-zoom-nivel { min-width: 66px; cursor: default; }
.ps-plano { position: relative; background: var(--papel-2); border: var(--borde-f) solid var(--linea);
  border-radius: var(--radio-m); box-shadow: var(--sombra-1); height: calc(100vh - 270px); min-height: 520px;
  overflow: auto; touch-action: pan-x pan-y; }
.ps-plano[data-herr="pared"] .ps-svg, .ps-plano[data-herr="medir"] .ps-svg { cursor: crosshair; }
.ps-plano[data-herr="pared"] .ps-pieza, .ps-plano[data-herr="medir"] .ps-pieza { pointer-events: none; }
.ps-lienzo { position: relative; transform-origin: 0 0; display: none; }
.ps-lienzo.on { display: block; }
.ps-svg { display: block; user-select: none; }
.ps-svg text { font-family: var(--ui); pointer-events: none; }
.ps-pieza { cursor: grab; touch-action: none; }
.ps-pieza:active { cursor: grabbing; }
.ps-z-nombre { font-size: 12.5px; font-weight: 700; fill: var(--tinta); }
.ps-z-cota { font-family: var(--num) !important; font-size: 9px; letter-spacing: .1em; fill: var(--tinta-d); }
.ps-e-nombre { font-size: 8.5px; fill: var(--tinta-d); }
.ps-resize, .ps-estira { fill: transparent; cursor: nwse-resize; }
.ps-estira { cursor: ew-resize; }
.ps-pieza.sel .ps-z-area { stroke: var(--naranja); stroke-width: 2.5; stroke-dasharray: none; }
.ps-pieza.sel .ps-resize { fill: var(--papel); stroke: var(--naranja); stroke-width: 1.5; }
.ps-pieza.sel .ps-estira { fill: var(--papel); stroke: var(--naranja); stroke-width: 1.5; }
.ps-pieza.ps-equipo.sel, .ps-pieza.ps-elem.sel { filter: drop-shadow(0 0 0 var(--naranja)) drop-shadow(0 0 2px var(--naranja)); }
.ps-herr { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio-pill); padding: 4px; box-shadow: var(--sombra-2); z-index: 4; }
.ps-herr .ps-herr-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 12px; font-weight: 600; padding: 7px 14px;
  min-height: 34px; border: 0; border-radius: var(--radio-pill); background: transparent; color: var(--tinta-d); cursor: pointer; }
.ps-herr .ps-herr-btn.on { background: var(--tinta); color: var(--papel); }
.ps-herr kbd, .ps-ayuda kbd { font-family: var(--num); font-size: 10px; border: 1px solid var(--linea-f); border-radius: 4px; padding: 0 4px; }
.ps-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -120%); background: var(--tinta); color: var(--papel);
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--radio-pill); box-shadow: var(--sombra-3); }
.ps-paleta h3, .ps-docs h3 { font-size: 11px; font-family: var(--num); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-d); margin: var(--e3) 0 var(--e2); }
.ps-paleta h3:first-child, .ps-docs h3:first-child { margin-top: 0; }
.ps-paleta input[type=search] { min-height: 34px; padding: 6px 10px; font-size: 12.5px; margin-bottom: var(--e2); }
.ps-lib-cat { display: flex; align-items: baseline; justify-content: space-between; margin: var(--e3) 0 6px; font-size: 12px; font-weight: 700; }
.ps-lib-cat small { font-family: var(--num); font-size: 10.5px; color: var(--tinta-d); font-weight: 400; }
.ps-lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ps-lib-lista { display: flex; flex-direction: column; gap: 6px; }
.ps-lib { display: flex; align-items: center; gap: 8px; padding: 6px 8px; min-height: 38px; border: 1px solid var(--linea); border-radius: var(--radio-s);
  background: var(--papel); color: var(--tinta); font-family: var(--ui); font-size: 12px; font-weight: 500; text-align: left; cursor: grab; touch-action: none; }
.ps-lib:hover { border-color: var(--linea-f); }
.ps-lib:active { cursor: grabbing; }
.ps-lib.sugerido { border-color: var(--azul); background: var(--azul-bg); }
.ps-lib-ico { flex: none; display: inline-flex; width: 24px; height: 24px; }
.ps-lib span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-ayuda { font-size: 11.5px; color: var(--tinta-d); margin: var(--e3) 0 0; }
.ps-docs .ps-doc-zona { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.ps-docs .ps-doc-zona:last-child { border-bottom: none; }
.ps-docs .ps-doc-zona h4 { margin: 0 0 4px; font-size: 13px; cursor: pointer; }
.ps-docs .ps-doc-zona h4 small { font-family: var(--num); font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-d); margin-left: 6px; }
.ps-doc { font-size: 12.5px; padding: 5px 0; display: flex; gap: 8px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--linea); }
.ps-doc:last-child { border-bottom: none; }
.ps-doc .n { font-family: var(--num); font-size: 11px; color: var(--tinta-d); white-space: nowrap; }
.ps-doc-vacio { font-size: 12.5px; color: var(--tinta-d); margin: 0; }
.ps-f-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--e3); }
.ps-f-ico { flex: none; width: 40px; height: 40px; }
.ps-f-cab .rot { font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-d); }
.ps-f-titulo { font-size: 16px; font-weight: 700; margin-top: 2px; }
.ps-f-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ps-f-form { display: flex; flex-direction: column; gap: var(--e2); }
.ps-f-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tinta-d); font-weight: 500; }
.ps-f-form input, .ps-f-form select { margin: 0; font-size: 13px; }
.ps-f-form input[readonly] { background: var(--papel-2); color: var(--tinta-d); }
.ps-f-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.ps-f-nota { font-size: 11.5px; color: var(--tinta-d); margin: 0; }
.ps-f-acc { display: flex; gap: 8px; margin-top: 4px; }
.ps-f-acc .btn:first-child { flex: 1; }
.ps-f-quitar { color: var(--rojo); border-color: var(--rojo); }
.ps-f-equipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ps-f-eq { display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 38px; border: 1px solid var(--linea); border-radius: var(--radio-s);
  background: var(--papel); font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--tinta); text-align: left; cursor: pointer; }
.ps-f-eq.frio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); flex: none; }
.ps-aviso-flot { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50;
  background: var(--tinta); color: var(--papel); padding: 10px 18px; border-radius: var(--radio-pill);
  box-shadow: var(--sombra-3); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ps-aviso-flot.on { opacity: 1; }
.ps-aviso-flot.mal { background: var(--rojo); }
@media (pointer: coarse) {
  .ps-pisos .ps-piso, .ps-herr .ps-herr-btn { min-height: 44px; }
  .ps-resize, .ps-estira { transform: scale(2); transform-origin: center; transform-box: fill-box; }
}
@media print {
  .topbar, .mega, dialog, .ps-pisos, .ps-barra, .ps-paleta, .ps-docs, .ps-herr, .aviso, .acciones-cab, .migas { display: none !important; }
  .ps-marco { display: block; }
  .ps-plano { height: auto; min-height: 0; overflow: visible; border: 0; box-shadow: none; background: #fff; }
  .ps-lienzo { transform: none !important; }
}
.bloque-angosto { max-width: 420px; }
.ps-herr .ps-herr-cuenta:not(:empty) { font-family: var(--num); font-size: 10.5px; font-weight: 700; background: var(--naranja-bg); color: var(--naranja-txt); border-radius: var(--radio-pill); padding: 0 6px; }
.ps-herr .ps-herr-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Inputs de línea en facturas y gastos ─────────────────────────────
   88 px no alcanzaban para «1.234.567»: cantidad y precio van anchos y
   con alto táctil; los selects y textos de la fila, parejos. */
.pos-tabla input[type="number"] { width: 124px; min-width: 124px; min-height: 44px; text-align: right;
  font-family: var(--num); font-size: 14.5px; font-variant-numeric: tabular-nums; padding: 6px var(--e2); }
.pos-tabla select, .pos-tabla input[type="text"] { min-height: 40px; padding: 6px var(--e2); font-size: 13px; }

/* ── Tablas largas: cabecera fija y nombres que no desbordan ──────────
   .tabla-envoltura hace scroll horizontal (overflow:auto), y dentro de un
   contenedor así un thead sticky no se pega a la página. Por eso es una
   clase opt-in: en pantallas anchas el envoltorio deja de recortar y la
   cabecera se queda bajo la barra superior; en angostas sigue el scroll. */
@media (min-width: 900px) {
  .tabla-envoltura.cabecera-fija { overflow: visible; }
  .tabla-envoltura.cabecera-fija thead th { position: sticky; top: var(--topbar-h, 56px); z-index: 5; background: var(--papel); box-shadow: 0 1px 0 var(--linea); }
}
.td-nombre { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Receta: cantidad con unidad y rentabilidad al pie ─────────────── */
.rec-cant-unidad { display: flex; gap: var(--e2); align-items: center; }
.rec-cant-unidad input { flex: 1; min-width: 0; }
.rec-unidad { width: auto; min-width: 84px; margin: 0 0 0 6px; font-family: var(--num); font-size: 12.5px; min-height: 36px; padding: 4px 8px; }
.receta-tabla td.num .rec-unidad { display: inline-block; vertical-align: middle; }
.receta-tabla tfoot th { font-weight: 700; border-top: 3px double var(--tinta); padding-top: var(--e3); }
.rec-rentabilidad { display: flex; flex-wrap: wrap; gap: var(--e5); align-items: flex-end; margin: var(--e4) 0 var(--e6);
  padding: var(--e4); background: var(--papel-2); border-radius: var(--radio-m); }
.rec-rent { display: flex; flex-direction: column; gap: 2px; }
.rec-rent .et { font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-d); }
.rec-rent .v { font-family: var(--num); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-rent .v.bad { color: var(--rojo); }
.rec-rentabilidad .btn { margin-left: auto; }
.cobro-cliente { display: flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e3); }
.cli-rapido { margin-top: var(--e3); }
.cli-rapido summary { cursor: pointer; font-size: 13px; color: var(--azul); }
.cli-rapido form { margin-top: var(--e2); }

/* ── RRHH: ausencias en la hoja de turnos y descuentos en la ficha ──── */
.turnos-cel.turno-ausente { background: var(--revisar-bg); }
.turno-ausencia { display: block; padding: 8px 6px; font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--revisar); text-align: center; }
.aus-tiles { margin-bottom: var(--e4); }
.aus-anulada td { opacity: .55; text-decoration: line-through; }
.aus-anulada td.acciones { text-decoration: none; }
.rr-descuentos { border-top: 1px solid var(--linea); margin-top: var(--e2); }
.rr-desc-lista { margin: var(--e1) 0 0; padding-left: var(--e4); font-size: 12.5px; }
.rr-desc-lista li { padding: 2px 0; }

/* ── Informe valorizado (rediseño 2026-08-22): la ecuación del CMV como
   pieza central, la tabla con buscador y los cortes de mes en columna. ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecuacion { display: flex; align-items: stretch; padding: var(--e1); gap: 0; }
.ecuacion-paso { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--e4) var(--e5); min-width: 0; }
.ecuacion-monto { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.ecuacion-monto.neg { color: var(--rojo); }
.ecuacion-monto.fuerte { font-weight: 700; }
.ecuacion-op { display: flex; align-items: center; justify-content: center; width: 36px; flex: none; font-family: var(--num); font-size: 22px; color: var(--linea-f); }
.ecuacion-resultado { background: var(--azul-bg); border-radius: calc(var(--radio-l) - var(--e1)); }
.ecuacion-resultado .et, .ecuacion-resultado .sec, .ecuacion-resultado .ecuacion-monto { color: var(--azul); }
.ecuacion-negativos { display: flex; align-items: center; gap: var(--e3); }
.ecuacion-negativos .num { font-weight: 700; color: var(--rojo); font-size: 15px; }
.ecuacion-negativos .sep { flex: 1; }
.valorizado-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--e5); align-items: start; }
.valorizado-grilla > .card { margin-bottom: 0; }
.valorizado-herr { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding-bottom: var(--e3); }
.valorizado-buscar { width: 280px; max-width: 100%; height: 36px; padding: 0 var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-m); font-family: var(--ui); font-size: 13px; background: var(--papel); color: var(--tinta); }
.valorizado-buscar:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.valorizado-pie { margin: var(--e3) 0 0; }
.cortes { display: flex; flex-direction: column; gap: var(--e3); }
.cortes-cab h2 { margin-bottom: 2px; }
.cortes-cab p { margin: 0; }
.cortes-falta { padding: var(--e2) var(--e3); background: var(--revisar-bg); border-radius: var(--radio-m); font-size: 12.5px; }
.cortes-falta b { color: var(--revisar); }
.cortes-form { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.cortes-form-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.cortes-form .campo { margin-bottom: 0; }
.cortes-form .btn { width: 100%; }
.cortes-lista { display: flex; flex-direction: column; }
.corte { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--e2) var(--e3); align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.corte:last-child { border-bottom: 0; }
.corte-mes, .corte-valor { text-align: left; }
.corte-det { display: flex; flex-direction: column; min-width: 0; }
.corte-valor { font-size: 14px; }
.corte-anulado { opacity: .55; }
.corte-quien { font-size: 11.5px; }
@media (max-width: 1100px) {
  .valorizado-grilla { grid-template-columns: minmax(0, 1fr); }
  .ecuacion { flex-wrap: wrap; }
  .ecuacion-paso { flex: 1 1 40%; }
}

/* ── Compras (rediseño 2026-08-22): el hub «Para pedir hoy» por proveedor,
   los días como segmentos, el pedido con stepper y la barra fija al pie. ── */
.segmentos { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--linea-f); border-radius: var(--radio-m); overflow: hidden; background: var(--papel); }
.segmentos .segmentos-et { display: flex; align-items: center; padding: 0 var(--e3); font-size: 13px; font-weight: 600; color: var(--tinta-d); }
.segmentos a, .segmentos span.activo { display: flex; align-items: center; padding: 0 var(--e3); font-size: 13px; font-weight: 600; color: var(--tinta-d); border-left: 1px solid var(--linea-f); text-decoration: none; }
.segmentos a:hover { color: var(--tinta); background: var(--papel-2); }
.segmentos a.activo, .segmentos span.activo { background: var(--azul-bg); color: var(--azul); }
.pedir-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.pedir-tit { display: flex; align-items: baseline; gap: var(--e3); }
.pedir-tit h2 { margin: 0; }
.pedir-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.pedir-prov { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4) var(--e5); background: var(--papel); border: var(--borde) solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
.pedir-prov.activa { outline: 2px solid var(--azul); outline-offset: 1px; }
.pedir-prov-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e2); }
.pedir-prov-cab b { font-size: 15px; }
.pedir-prov-monto { display: flex; flex-direction: column; }
.pedir-prov-monto .cifra-d { font-size: 24px; }
.pedir-canales { display: flex; gap: var(--e3); }
.pedir-canal { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-d); }
.pedir-canal .mb-wa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--linea-f); }
.pedir-canal .mb-wa-punto[data-wa-estado="conectada"] { background: #10B981; }
.pedir-prov .btn { width: 100%; margin-top: auto; }
.pedir-sin { background: var(--papel-2); box-shadow: none; border-style: dashed; justify-content: center; gap: var(--e1); }
.pedir-sin b { color: var(--tinta-d); font-size: 14px; }
.pedir-sin a { font-size: 12.5px; font-weight: 600; }
.pedir-herr { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.pedir-otros { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pedir-form { padding-bottom: 96px; }   /* sitio para la barra fija */
.pedir-tabla td b { font-weight: 600; }
.pedir-col { text-align: center; width: 180px; }
.stepper { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--linea-f); border-radius: var(--radio-m); overflow: hidden; background: var(--papel); }
.stepper-btn { width: 44px; height: 100%; border: 0; background: var(--papel-2); color: var(--azul); font-size: 20px; font-weight: 600; cursor: pointer; font-family: var(--ui); }
.stepper-btn:hover { background: var(--azul-bg); }
.stepper input { width: 76px; height: 100%; border: 0; border-left: 1px solid var(--linea-f); border-right: 1px solid var(--linea-f); border-radius: 0; margin: 0; text-align: center; font-size: 15px; background: transparent; }
.stepper input:focus { outline: none; background: var(--azul-bg); }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.pedir-precio { display: inline-flex; align-items: center; gap: 2px; }
.pedir-precio input { width: 92px; text-align: right; margin: 0; }
tr.apagada td { color: var(--tinta-d); }
tr.apagada td b { font-weight: 500; text-decoration: line-through; }
tr.apagada .stepper { opacity: .55; }
.pedir-quitar { font-size: 12px; }
.pedir-agregar { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); background: var(--papel-2); border-radius: 0 0 var(--radio-l) var(--radio-l); }
.pedir-buscar { height: 36px; padding: 0 var(--e3); border: 1px solid var(--linea); border-radius: var(--radio-m); font-family: var(--ui); font-size: 13px; width: 280px; max-width: 100%; background: var(--papel); color: var(--tinta); margin: 0; }
.pedir-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: var(--e5); padding: var(--e3) var(--e8); background: var(--vidrio); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--linea); box-shadow: 0 -6px 18px rgba(0, 78, 137, .07); }
.pedir-total { display: flex; flex-direction: column; }
.pedir-total .cifra-d { font-size: 24px; }
.pedir-nota { max-width: 360px; }
.pedir-pie .sep { flex: 1; }
.pedir-pie .btn-cta { min-height: 48px; font-size: 15px; padding: 0 var(--e6); }
@media (max-width: 760px) {
  .pedir-nota { display: none; }
  .pedir-pie { padding: var(--e3) var(--e4); gap: var(--e3); }
}
.pedir-herr-tabla { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: 0 0 var(--e3); margin-bottom: var(--e2); border-bottom: 1px solid var(--linea); }
.pedir-herr-tabla .pedir-buscar { flex: 0 0 auto; width: 300px; }

/* ── Ficha de la orden de compra (rediseño 2026-08-22): detalle a la
   izquierda, envío por canal a la derecha. ── */
.orden-estado { margin: calc(-1 * var(--e3)) 0 var(--e4); }
.orden-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--e5); align-items: start; }
.orden-grilla > .bloque { margin-bottom: 0; }
.orden-lado { display: flex; flex-direction: column; gap: var(--e4); }
.orden-detalle .bloque-cab { flex-wrap: wrap; }
.orden-pie { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); border-top: 1px solid var(--linea); background: var(--papel-2); border-radius: 0 0 var(--radio-l) var(--radio-l); }
.orden-pie .sep { flex: 1; }
.orden-total { font-size: 16px; }
.orden-enviar { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); }
.orden-enviar-cab h2 { margin-bottom: 2px; }
.orden-enviar-cab p { margin: 0; }
label.check.canal, .canal { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); margin: 0; border: 1px solid var(--linea-f); border-radius: var(--radio-m); cursor: pointer; font-weight: 400; font-size: 13px; position: relative; }
.canal input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.canal-check { display: block; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--linea-f); background: var(--papel); position: relative; }
.canal.on { border-color: var(--azul); background: var(--azul-bg); }
.canal.on .canal-check { background: var(--azul); border-color: var(--azul); }
.canal.on .canal-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--azul-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.canal.off { border-style: dashed; cursor: default; color: var(--tinta-d); }
.canal-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.canal-txt b { font-size: 13.5px; color: var(--tinta); }
.canal-txt b .muted { font-weight: 500; }
.canal .mb-wa-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--linea-f); }
.canal .mb-wa-punto[data-wa-estado="conectada"] { background: #10B981; }
.orden-enviar .btn-cta { width: 100%; min-height: 48px; font-size: 15px; }
.orden-enviar .btn-cta[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.orden-enviar p.centro { text-align: center; margin: 0; }
.orden-envios { display: flex; flex-direction: column; }
.envio { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--e2); align-items: start; padding: var(--e2) 0; border-bottom: 1px solid var(--linea); font-size: 12.5px; }
.envio:last-child { border-bottom: 0; }
.envio .mb-wa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--linea-f); margin-top: 6px; }
.envio .mb-wa-punto[data-wa-estado="conectada"] { background: #10B981; }
.envio .mb-wa-punto[data-wa-estado="fallo"] { background: #EF4444; }
@media (max-width: 1000px) { .orden-grilla { grid-template-columns: minmax(0, 1fr); } }

/* ── Roles y permisos: lista + ficha (2026-08-22) ─────────────────────
   La ficha muestra los permisos por módulo como grupos con contador; en
   un rol a medida cada grupo tiene su «marcar todo» y lo que difiere de
   la plantilla de origen queda señalado en ámbar. */
.md-grupo-et { font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-d); padding: var(--e3) var(--e4) var(--e1); }
.md-vacio-chico { padding: 0 var(--e4) var(--e3); margin: 0; }
.perm-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e4) var(--e5); }
.perm-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-grupo-vacio { opacity: .55; }
.perm-grupo-cab { display: flex; align-items: center; gap: var(--e2); padding-bottom: var(--e2); margin-bottom: var(--e1);
  border-bottom: 1px solid var(--linea); }
.perm-grupo-nombre { font-family: var(--num); font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-d); font-weight: 600; }
.perm-grupo-n { margin-left: auto; font-size: 11.5px; color: var(--tinta-d); font-variant-numeric: tabular-nums; }
.perm-grupo-todo { margin: 0; gap: var(--e2); }
.perm-grupo-todo input { width: 15px; height: 15px; }
.perm-item { display: flex; align-items: flex-start; gap: var(--e2); min-height: 36px; padding: 5px var(--e2); margin: 0;
  border-radius: var(--radio-s); font-size: 13.5px; font-weight: 400; }
label.perm-item { cursor: pointer; }
label.perm-item:hover { background: var(--papel-2); }
.perm-item input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--azul); }
.perm-txt { display: flex; flex-direction: column; min-width: 0; }
.perm-slug { font-family: var(--num); font-size: 10.5px; color: var(--tinta-d); letter-spacing: .02em; }
.perm-marca { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; border: 1px solid var(--linea-f); }
.perm-si .perm-marca { background: var(--cuadra); border-color: var(--cuadra); position: relative; }
.perm-si .perm-marca::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.perm-no { color: var(--tinta-d); }
.perm-no .perm-txt > span:first-child, .perm-no .perm-txt { color: var(--tinta-d); }
.perm-difiere { background: var(--revisar-bg); box-shadow: inset 3px 0 0 var(--revisar); }
.perm-difiere:hover { background: var(--revisar-bg); }

/* ── Personal: lista + ficha (2026-08-22) ───────────────────────────── */
.avatar-ini { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: var(--radio-pill); background: var(--azul-bg); color: var(--azul);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.avatar-grande { width: 48px; height: 48px; font-size: 16px; margin-right: var(--e3); }
.md-item.apagado .avatar-ini { background: var(--papel-2); color: var(--tinta-d); }
.acceso-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); }
.acceso-caja { border: 1px solid var(--linea); border-radius: var(--radio-m); padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.acceso-caja h3 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: var(--e2); }
.acceso-caja form { margin-top: auto; }
.acceso-caja .form-pin { display: flex; gap: var(--e2); align-items: center; }
.acceso-caja .form-pin input { margin: 0; }
.aviso-info { border-left-color: var(--azul); background: var(--azul-bg); }
.permisos-origen { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.permisos-origen .sep { flex: 1; }
.md-fichas button.pill { cursor: pointer; font-family: var(--num); }
/* Dentro de una ficha, cada fila de campos respira: el margen del control
   lo pone .campo (0) y las filas quedaban pegadas una encima de otra. */
.md-ficha .ficha-sec .campos + .campos,
.md-ficha .ficha-sec .campos + .campo,
.md-ficha .ficha-sec .campo + .campo,
.md-ficha .ficha-sec .campo + .campos { margin-top: var(--e5); }
.md-ficha .ficha-sec .campos .campo .ayuda { margin-top: var(--e2); }
.md-ficha .ficha-sec .grupo-checks { padding: var(--e2) 0; gap: var(--e3) var(--e5); }
.md-ficha .ficha-sec > .ficha-pie { margin-top: var(--e5); }
/* El cuerpo con padding gana aunque la sección sea también .ficha-sec
   (.md-ficha .ficha-sec pone padding 0 para las fichas viejas). */
.md-ficha .md-detalle-cuerpo.ficha-sec { padding: var(--e4); }
.md-ficha .md-detalle-cuerpo.ficha-pie { padding: var(--e4); margin-top: 0; }

/* Filas de campos con ayuda debajo: alineadas arriba, no al pie. */
.campos.campos-arriba { align-items: flex-start; }
/* Dos columnas parejas (topes de un rol): etiqueta, campo y ayuda alineados. */
.campos-grilla2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e5); }
.md-ficha .ficha-sec .campos-grilla2 .campo, .campos-grilla2 .campo { margin: 0; }
.md-ficha .ficha-sec .campo + .campos-grilla2, .md-ficha .ficha-sec .campos-grilla2 + .campo { margin-top: var(--e5); }
.campos-grilla2 .campo input { max-width: 220px; }
@media (max-width: 700px) { .campos-grilla2 { grid-template-columns: 1fr; } }
/* Los permisos son una lista densa: la separacion de hermanos de la ficha no les aplica. */
.md-ficha .ficha-sec .perm-grupo .perm-item + .perm-item { margin-top: 0; }
.md-ficha .ficha-sec .perm-grupos { margin-top: var(--e3); }
.perm-grupo label.perm-item { margin-bottom: 0; }

/* ── Configuración: lista + ficha por secciones (2026-08-23) ────────── */
.cfg-tiles { margin-bottom: var(--e5); }
.cfg-tile-v { display: block; font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }
.cfg-tile-v.num { font-size: 13px; }
.cfg-tile-v.ok { color: var(--cuadra); }
.cfg-tile-v.warn { color: var(--revisar); }
.cfg-tile-v.bad { color: var(--rojo); }
.cfg-md { grid-template-columns: 300px minmax(0, 1fr); }
.cfg-ficha .cfg-aviso { margin: var(--e4) var(--e4) 0; }
.cfg-ficha .md-detalle-titulo .sec { margin: 0; max-width: 72ch; }
/* Cada bloque de una sección es un formulario propio, separado por una línea. */
.cfg-bloque + .cfg-bloque { border-top: 1px solid var(--linea); }
.cfg-bloque h3 { margin: 0 0 var(--e2); font-size: 15px; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cfg-bloque > .sec.muted { margin: 0 0 var(--e4); max-width: 72ch; }
.cfg-jornada { font-family: var(--num); font-size: 15px; margin: 8px 0 0; }
.cfg-ayuda-lado { margin-top: 26px; }
.cfg-borrar { color: var(--rojo); font-size: 13px; margin: 0; }
.cfg-reporte { gap: var(--e5); margin-top: var(--e2); }
.md-ficha .ficha-sec .prefijo input { margin: 0; }
@media (max-width: 900px) { .cfg-md { grid-template-columns: 1fr; } }
.cfg-bloque .campo .check { margin-bottom: 0; }
.cfg-bloque .campo .check + .ayuda { margin-top: var(--e2); }
.cfg-bloque .campos + .campo { margin-top: var(--e5); }

/* ── Reporte de ventas: dashboard del dueño (2026-08-23) ────────────── */
.rv-sec { margin: var(--e5) 0 var(--e3); display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.rv-sec h2 { margin: 0; font-size: 15px; }
.rv-sec .sec { margin: 0; font-size: 12.5px; color: var(--tinta-d); }
.rv-sec .sep { flex: 1; }
.rv-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rv-tiles .tile .cifra-d { font-size: 22px; }
.rv-tiles .tile-aviso { background: var(--revisar-bg); border-color: var(--revisar-bg); }
.rv-tiles .tile-aviso .cifra-d { font-size: 16px; color: var(--revisar); }
/* Señales: punto + texto + cifra en mono, de lo más grave a lo menos; nunca color solo. */
.rv-senales { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e2); }
.rv-senal { display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e3); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio-s); font-size: 13px; text-decoration: none; color: var(--tinta); }
.rv-senal:hover { border-color: var(--azul); text-decoration: none; }
.rv-senal .punto { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--linea-f); }
.rv-senal.mal .punto { background: var(--rojo); }
.rv-senal.revisar .punto { background: var(--revisar); }
.rv-senal .txt { flex: 1; min-width: 0; }
.rv-senal .n { font-family: var(--num); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* El filtro va pegado arriba de lo que filtra, y se queda a la vista al bajar. */
.rv-filtro { position: sticky; top: 0; z-index: 6; }
.rv-filtro .filtro-rango { align-items: center; }
.rv-filtro .rv-atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-filtro .rv-atajos .pill { cursor: pointer; text-decoration: none; }
.rv-filtro .rv-rango { font-family: var(--num); font-size: 12.5px; color: var(--tinta-d); white-space: nowrap; }
/* Gráfico: una serie en azul; el período anterior en gris, detrás. Etiqueta directa solo en el máximo. */
.rv-viz { padding: var(--e4) var(--e4) var(--e2); }
.rv-viz svg { display: block; width: 100%; height: auto; font-family: var(--num); }
.rv-viz .eje { fill: var(--tinta-d); font-size: 10px; }
.rv-viz .eje.finde { fill: var(--revisar); font-weight: 600; }
.rv-viz .grilla { stroke: var(--linea); stroke-width: 1; }
.rv-viz .barra { fill: var(--azul); }
.rv-viz .barra-ant { fill: var(--linea); }
.rv-viz .barra:hover, .rv-viz g:hover .barra { fill: var(--naranja); }
.rv-viz .max { fill: var(--tinta); font-size: 10.5px; font-weight: 600; }
.rv-viz .mes { fill: var(--tinta-d); font-size: 9.5px; }
.rv-tip { position: absolute; z-index: 7; pointer-events: none; background: var(--tinta); color: var(--papel);
  font-family: var(--num); font-size: 12px; padding: 5px 9px; border-radius: var(--radio-s); white-space: nowrap; }
.rv-tip[hidden] { display: none; }
.rv-leyenda { display: flex; gap: var(--e4); font-size: 12px; color: var(--tinta-d); margin-top: var(--e2); }
.rv-leyenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--azul); }
.rv-leyenda span.ant::before { background: var(--linea); }
/* Barras de participación (medios, días, horas): mismo azul, el % al lado. */
.rv-barras { display: flex; flex-direction: column; gap: 2px; }
.rv-barra { display: flex; align-items: center; gap: var(--e3); padding: 6px 0; font-size: 13.5px; }
.rv-barra .nom { flex: 0 0 110px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-barra .pista { flex: 1; height: 10px; background: var(--papel-2); border-radius: 4px; overflow: hidden; }
.rv-barra .relleno { display: block; height: 100%; background: var(--azul); border-radius: 4px; }
.rv-barra .pct { min-width: 44px; text-align: right; font-family: var(--num); font-size: 12.5px; color: var(--tinta-d); }
.rv-barra .monto { min-width: 96px; text-align: right; font-family: var(--num); font-weight: 600; }
.rv-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
.rv-card { padding: var(--e4); }
.rv-card .tabla { margin: 0; }
.rv-nota { font-size: 12px; color: var(--tinta-d); }
@media (max-width: 900px) { .rv-2col { grid-template-columns: 1fr; } .rv-filtro { position: static; } }
.rv-sec-cab { margin-top: 0; }
.rv-viz-envoltura { position: relative; }
.tabs-reportes { margin: 0 0 var(--e4); }
.rv-tiles .tile .cifra-d.bad { color: var(--rojo); }
.rv-barra .nom-hora { flex-basis: 118px; font-family: var(--num); font-size: 12.5px; }

/* ── Menú de cuenta: los ajustes que se tocan una vez (2026-08-23) ──── */
.cuenta-ajustes { border-top: 1px solid var(--linea); padding: var(--e2) 0; }
.cuenta-ajustes .et { display: block; padding: var(--e2) var(--e5) var(--e1); margin: 0; }
.cuenta-ajustes a { display: flex; align-items: center; gap: var(--e2); padding: 8px var(--e5); font-size: 13.5px; color: var(--tinta); text-decoration: none; }
.cuenta-ajustes a:hover { background: var(--papel-2); text-decoration: none; }
.cuenta-ajustes a.on { color: var(--azul); font-weight: 600; }
.cuenta-ajustes a .ico { width: 16px; height: 16px; color: var(--tinta-d); flex: 0 0 auto; }
.cuenta-ajustes .pill { margin-left: auto; }
.cuenta-panel { width: 340px; }
/* Con seis grupos la barra aprieta: el selector de local no se deja
   comprimir bajo su nombre, y las pestañas ceden un poco de aire antes. */
.localsel { flex: 0 0 auto; }
.localsel select { min-width: 150px; }
@media (min-width: 901px) and (max-width: 1500px) { .mega-trigger { padding: 0 var(--e2); } .topbar { gap: var(--e2); } }
/* Seis grupos en la barra: hasta 1700px los botones de buscar y calcular
   van solo con ícono (bajo 1100 ya lo hacían) y las pestañas ceden aire. */
@media (min-width: 901px) and (max-width: 1999px) {
  .spotlight-abre kbd { display: none; }
  .mega-trigger { padding: 0 var(--e2); letter-spacing: .04em; }
  .topbar { gap: var(--e2); }
}
@media (min-width: 901px) and (max-width: 1500px) {
  .spotlight-txt { display: none; }
}

/* ── Impresión: una sola pantalla (2026-08-23) ─────────────────────── */
.imp-md { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--e5); align-items: start; }
.imp-derecha { display: flex; flex-direction: column; gap: var(--e4); }
.imp-tiles .tile .tile-sub { font-family: var(--ui); font-size: 13px; color: var(--tinta-d); font-weight: 400; }
.imp-tiles .tile-mal { background: var(--rojo-bg); border-color: var(--rojo-bg); }
.imp-tiles .tile-mal .cifra-d, .imp-tiles .tile-mal .pie { color: var(--rojo); }
.imp-pasos { position: sticky; top: var(--e4); }
.imp-pasos-cab { padding: var(--e4) var(--e4) var(--e3); margin: 0; border-bottom: 1px solid var(--linea); }
.imp-paso { display: flex; gap: var(--e3); padding: var(--e4); border-bottom: 1px solid var(--linea); }
.imp-paso:last-child { border-bottom: 0; }
.imp-paso .n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radio-pill); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--num); font-weight: 600; font-size: 13px; border: 2px solid var(--linea-f); color: var(--tinta-d); }
.imp-paso.ok .n { background: var(--cuadra); border-color: var(--cuadra); color: #fff; }
.imp-paso.ahora .n { border-color: var(--naranja); color: var(--naranja-txt); }
.imp-paso-cuerpo { min-width: 0; flex: 1; }
.imp-paso .t { font-size: 14px; font-weight: 700; }
.imp-paso.ok .t { color: var(--tinta-d); font-weight: 600; }
.imp-paso .d { font-size: 13px; color: var(--tinta-d); margin-top: 2px; }
.imp-paso .d code { font-family: var(--num); font-size: 12px; }
.imp-paso-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.imp-paso-acciones form { margin: 0; }
.imp-lista { display: flex; flex-direction: column; }
.imp-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: var(--e3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.imp-fila:last-child { border-bottom: 0; }
.imp-fila .pill { min-width: 96px; justify-content: center; }
.imp-fila .imp-nom { display: flex; flex-direction: column; min-width: 0; }
.imp-fila .imp-nom b { font-size: 14px; }
.imp-fila .imp-nom .sec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-fila .imp-n { font-size: 12.5px; white-space: nowrap; }
.imp-fila form { margin: 0; }
.imp-fila.imp-vista { background: var(--revisar-bg); margin: 0 calc(-1 * var(--e4)); padding-left: var(--e4); padding-right: var(--e4); }
.imp-hora { font-size: 12.5px; }
.imp-ruteo { display: flex; flex-direction: column; }
.imp-ruta { display: grid; grid-template-columns: 130px 24px 280px minmax(0, 1fr); gap: var(--e3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.imp-ruta .flecha { color: var(--tinta-d); text-align: center; font-size: 16px; }
.imp-ruta .sb, .imp-ruta .br { margin: 0; }
.imp-ruta .imp-caja { min-height: 38px; display: flex; align-items: center; }
.imp-pie { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.cola-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e3); align-items: end; }
@media (max-width: 1100px) { .imp-md { grid-template-columns: 1fr; } .imp-pasos { position: static; } .imp-ruta { grid-template-columns: 110px 20px minmax(0, 1fr); } .imp-ruta .sec { grid-column: 1 / -1; } }

/* ── Clientes: lista + ficha (quién viene, cuánto gasta, cuánto debe) ── */
.cli-tiles a.tile { text-decoration: none; color: inherit; display: block; }
.cli-tiles a.tile:hover { border-color: var(--azul); }
.cli-tiles .tile .cifra-d { font-size: 22px; }
.cli-tiles .tile .cifra-d.txt { font-family: var(--ui); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cli-tiles .tile .cifra-d.bad { color: var(--rojo); }
.cli-tiles .tile-mal { background: var(--rojo-bg); border-color: var(--rojo-bg); }
.cli-tiles .tile-revisar { background: var(--revisar-bg); border-color: var(--revisar-bg); }
.cli-tiles .tile-revisar .cifra-d { color: var(--revisar); }
.cli-buscar { display: flex; gap: var(--e2); align-items: flex-start; margin-bottom: var(--e2); }
.cli-buscar input[type="search"] { flex: 1; margin-bottom: 0; }
.cli-buscar .btn { flex: 0 0 auto; }
.cli-orden { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e2); font-size: 12px; }
.cli-orden .et { margin: 0; }
.cli-orden a { color: var(--tinta-d); text-decoration: none; padding: 2px 8px; border-radius: var(--radio-pill); }
.cli-orden a.on { background: var(--papel-2); color: var(--tinta); font-weight: 600; }
.cli-orden a:hover { color: var(--azul); }
.cli-item .md-item-nombre { display: flex; align-items: center; gap: var(--e1); white-space: normal; }
.cli-item .md-item-nombre .pill { font-size: 10px; padding: 0 6px; }
.cli-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.cli-item-der .num { font-size: 13px; }
.cli-corte { margin: 0 0 var(--e2); }
.cli-nota { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e3); background: var(--revisar-bg); border-radius: var(--radio-s); margin: 0 0 var(--e4); font-size: 14px; }
.cli-nota .ico { flex: 0 0 auto; margin-top: 2px; color: var(--revisar); }
.cli-resumen { margin-bottom: var(--e5); }
.cli-resumen .ficha-res { min-width: 130px; }
.cli-h3 { font-size: 13px; margin: 0 0 var(--e2); color: var(--tinta-d); letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.cli-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.cli-ranking li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: var(--e2); align-items: center; font-size: 14px; }
.cli-rk-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-rk-barra { height: 8px; background: var(--papel-2); border-radius: var(--radio-pill); overflow: hidden; }
.cli-rk-lleno { display: block; height: 100%; background: var(--azul); border-radius: var(--radio-pill); width: 0; }
.cli-visitas { list-style: none; margin: 0; padding: 0; }
.cli-visitas li { display: flex; justify-content: space-between; gap: var(--e3); padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.cli-visitas li:last-child { border-bottom: 0; }
.cli-cc-cab { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e6); align-items: flex-start; justify-content: space-between; margin-bottom: var(--e4); }
.cli-abono { flex: 1 1 280px; max-width: 360px; }
.cli-abono label { display: block; font-weight: 600; margin-bottom: var(--e1); font-size: 13px; }
.cli-abono .hilera { flex-wrap: nowrap; }
.cli-abono input { flex: 1; margin: 0; }
.cli-datos { padding: 0; margin-bottom: var(--e5); }
.cli-importar h3, .cli-credencial h3 { font-size: 15px; margin: 0 0 var(--e3); }
.cli-importar, .cli-credencial { border-top: 1px solid var(--linea); }
.cli-recalcular { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.ficha-tabs .tab-n.neg { color: var(--rojo); }
[data-theme="dark"] .cli-tiles .tile-mal, [data-theme="dark"] .cli-tiles .tile-revisar { background: var(--papel-2); }
@media (max-width: 900px) { .cli-ranking li { grid-template-columns: minmax(0, 1fr) 60px auto; } .cli-dos-col { grid-template-columns: 1fr; } }
/* Formulario del cliente: bloques de dos columnas parejas, ayuda bajo su campo. */
.cli-form-sec { border: 0; padding: 0; margin: 0 0 var(--e5); min-width: 0; }
.cli-form-sec legend { padding: 0; margin-bottom: var(--e3); }
.cli-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e5); align-items: start; }
.cli-grilla .campo { margin-bottom: 0; min-width: 0; }
.cli-grilla .campo input, .cli-grilla .campo .sb { width: 100%; max-width: none; }
.cli-grilla .ayuda { margin-top: var(--e1); }
.cli-check label.check { display: flex; align-items: center; gap: var(--e2); min-height: 40px; margin: 0; font-weight: 600; }
.cli-check label.check input { width: auto; min-height: 0; margin: 0; }
@media (max-width: 700px) { .cli-grilla { grid-template-columns: 1fr; } }
.md-ficha .ficha-sec .cli-grilla .campo + .campo { margin-top: 0; }
.cli-grilla .cli-check { padding-top: 24px; }   /* alinea el check con el input de al lado, no con su label */
@media (max-width: 700px) { .cli-grilla .cli-check { padding-top: 0; } }

/* ── Corte del sistema por impago ─────────────────────────────────────
   Pantalla propia y sin menú: si el sistema está cortado, no tiene sentido
   dejar a la vista pantallas que no abren. */
.corte-body { background: var(--papel-2); min-height: 100vh; }
.corte-barra { display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e6);
  background: var(--rojo); color: #fff; font-size: 13.5px; font-weight: 700; }
.corte-barra-aviso { background: var(--revisar); }
.corte-pt { width: 8px; height: 8px; border-radius: var(--radio-pill); background: #fff; flex: 0 0 auto; }
.corte-top { display: flex; align-items: center; gap: var(--e4); padding: var(--e3) var(--e6);
  background: var(--papel); border-bottom: 1px solid var(--linea); }
.corte-quien { margin-left: auto; color: var(--tinta-d); font-size: 13.5px; }
.corte-salir { color: var(--tinta-d); font-size: 13.5px; text-decoration: none; }
.corte-salir:hover { color: var(--azul); }
.corte-main { max-width: 900px; margin: 0 auto; padding: var(--e7) var(--e5) var(--e8); }
.corte-hero { text-align: center; margin-bottom: var(--e6); }
.corte-icono { width: 60px; height: 60px; border-radius: var(--radio-l); background: var(--rojo-bg);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--e4); }
.corte-icono .ico { width: 28px; height: 28px; color: var(--rojo); }
.corte-icono-aviso { background: var(--revisar-bg); }
.corte-icono-aviso .ico { color: var(--revisar); }
.corte-hero h1 { font-size: 27px; margin: 0 0 var(--e2); }
.corte-hero p { color: var(--tinta-d); font-size: 15.5px; margin: 0 auto; max-width: 580px; }
.corte-cifras { display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap;
  padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.corte-c { display: flex; flex-direction: column; gap: 3px; }
.corte-c .v { font-family: var(--num); font-size: 26px; font-weight: 600; }
.corte-c .v.chica { font-size: 16px; }
.corte-card { margin-bottom: var(--e4); }
.corte-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e6); }
.corte-dato .et, .corte-fila .et { display: block; margin-bottom: 2px; }
.corte-dato .v { font-size: 15px; font-weight: 650; }
.corte-dato .v.num, .corte-fila .v.num { font-family: var(--num); font-weight: 600; }
.corte-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e4);
  padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.corte-fila:last-child { border-bottom: 0; }
.corte-fila .et { margin: 0; }
.corte-fila .v { font-weight: 650; }
.corte-oculto { color: var(--tinta-d); font-size: 13px; background: var(--papel-2);
  border-radius: var(--radio-s); padding: 2px 10px; font-weight: 600; }
.corte-acciones { display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.corte-ay { margin: 0; }
.corte-apagado { display: flex; gap: var(--e2); align-items: flex-start; margin: 0;
  color: var(--tinta-d); font-size: 13.5px; }
.corte-nota { align-items: flex-start; }
.corte-ultimo { margin: calc(-1 * var(--e2)) 0 var(--e4); }
.corte-pie { text-align: center; color: var(--tinta-d); font-size: 12.5px; margin-top: var(--e6); }
@media (max-width: 700px) { .corte-datos { grid-template-columns: 1fr; }
  .corte-cifras { gap: var(--e4); } .corte-hero h1 { font-size: 22px; } }

/* Mi suscripción (la ficha, antes del corte) */
.sus-tiles .tile .cifra-d.txt { font-family: var(--ui); font-size: 17px; font-weight: 750; }
.sus-tiles .tile-ok { background: var(--cuadra-bg); border-color: var(--cuadra-bg); }
.sus-tiles .tile-ok .cifra-d { color: var(--cuadra); }
.sus-tiles .tile-revisar { background: var(--revisar-bg); border-color: var(--revisar-bg); }
.sus-tiles .tile-revisar .cifra-d { color: var(--revisar); }
.sus-tiles .tile-mal { background: var(--rojo-bg); border-color: var(--rojo-bg); }
.sus-tiles .tile-mal .cifra-d { color: var(--rojo); }
.sus-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e4); align-items: start; }
.sus-dato { display: flex; justify-content: space-between; gap: var(--e3);
  padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.sus-dato:last-child { border-bottom: 0; }
.sus-dato .et { margin: 0; }
.sus-dato .v { font-weight: 650; text-align: right; }
.sus-dato .v.num { font-family: var(--num); font-weight: 600; }
.sus-ciclo { align-items: flex-start; margin-top: var(--e4); }
@media (max-width: 980px) { .sus-cols { grid-template-columns: 1fr; } }

/* Plataforma · cobro: el ciclo del mes y la bandeja de depósitos */
.cobro-ciclo { display: flex; align-items: flex-start; gap: 0; margin: var(--e3) 0 var(--e5); }
.cobro-hito { flex: 1; text-align: center; position: relative; font-size: 12px; color: var(--tinta-d); }
.cobro-hito::before { content: ""; position: absolute; top: 13px; left: 50%; right: -50%; height: 3px; background: var(--linea); }
.cobro-hito:last-child::before { display: none; }
.cobro-hito b { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radio-pill); background: var(--papel-2);
  border: 2px solid var(--linea); font-family: var(--num); font-size: 12px; }
.cobro-hito.act b { background: var(--azul); border-color: var(--azul); color: #fff; }
.cobro-hito.mal b { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.cobro-hito span { display: block; margin-top: 7px; }
.cobro-chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2) 0; }
.cobro-comentario { max-width: 260px; }
@media (max-width: 800px) { .cobro-ciclo { flex-wrap: wrap; gap: var(--e3); }
  .cobro-hito { flex: 0 0 45%; } .cobro-hito::before { display: none; } }