/* =============================================================================
   VENDEX v2 — estilos de la aplicación
   Se apoya en tokens.css: aquí no hay colores sueltos salvo transparencias del
   mismo token. Toda tarjeta lleva overflow:hidden (lección del diseño: sin eso,
   lo que se desborda se pinta en la tarjeta de al lado).
   ========================================================================== */

@font-face { font-family: "Instrument Sans"; src: url("/estatico/fuentes/instrument-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/estatico/fuentes/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/estatico/fuentes/plex-mono-600.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente-ui);
  font-size: var(--t-13); line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.sin-scroll { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--fuente-mono); font-size: .92em; }
.cif, .n, .kpi__v, .tira__v { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.tenue { color: var(--tinta-3); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: 0 0 auto; display: block; }
kbd { font-family: var(--fuente-mono); font-size: 10px; border: 1px solid var(--borde-2); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; color: var(--tinta-2); background: var(--superficie); }
.salto { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--acento); color: #fff; padding: 8px 12px; border-radius: 6px; }
.salto:focus { left: 8px; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento); font-weight: 600; font-size: var(--t-12); cursor: pointer; }
.enlace:hover { color: var(--acento-hover); text-decoration: underline; }
.nota { font-size: var(--t-12); color: var(--tinta-2); line-height: 1.5; margin-top: var(--e-4); }
.parrafo { font-size: var(--t-13); color: var(--tinta-2); line-height: 1.55; margin: 0 0 var(--e-5); }
.sobre { font-size: var(--t-11); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); margin: 0 0 var(--e-5); }
.fila-par { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); font-size: var(--t-12); }
.fila-chips { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-5); }
.fila-botones { display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap; margin-top: var(--e-6); }
.elipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-plana { margin: var(--e-2) 0 0; padding-left: 18px; }

/* ------------------------------------------------------------------ shell */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; background: var(--nav); color: var(--nav-txt);
  display: flex; flex-direction: column; overflow: hidden auto; z-index: 20; }
.lateral__marca { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--acento); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.lateral__nom b { display: block; color: #fff; font-size: var(--t-14); letter-spacing: -.01em; }
.lateral__nom span { font-size: var(--t-11); color: var(--nav-txt-2); }
.lateral__gr { padding: 16px 20px 4px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-txt-2); font-weight: 600; }
.lateral__it { position: relative; display: flex; align-items: center; gap: 10px; margin: 1px 10px; padding: 8px 10px;
  border-radius: var(--radio-2); color: var(--nav-txt); font-weight: 500; }
.lateral__it:hover { background: rgba(143,180,247,.08); color: #fff; text-decoration: none; }
.lateral__it .ic { opacity: .85; }
.lateral__it[aria-current="page"] { background: rgba(143,180,247,.16); color: #fff; font-weight: 600; }
.lateral__it[aria-current="page"] .ic { opacity: 1; color: var(--acento-claro); }
.lateral__it[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento-claro); }
.insignia { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--mal); color: #fff; font-size: 10px; font-weight: 700; text-align: center; }
.lateral__pie { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.usuario { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.usuario__c { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-11); color: var(--nav-txt-2); }
.usuario__c b { color: var(--nav-txt); font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--nav-2); color: var(--nav-txt); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.btn--nav { color: var(--nav-txt-2); border-color: transparent; background: transparent; }
.btn--nav:hover { color: #fff; background: rgba(255,255,255,.08); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.superior { position: sticky; top: 0; z-index: 15; min-height: var(--barra-sup); background: var(--superficie);
  border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: var(--e-6); padding: 8px 20px; flex-wrap: wrap; }
.superior__titulo { min-width: 0; flex: 0 1 auto; }
.superior__titulo h1 { font-size: var(--t-16); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.superior__sub { font-size: var(--t-11); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.superior__filtros { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.superior__der { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); }
.sello { display: inline-flex; align-items: center; gap: var(--e-3); white-space: nowrap; }
.sello__t { font-size: var(--t-11); color: var(--tinta-3); }
.selector { display: inline-flex; align-items: center; gap: 6px; height: var(--control); padding: 0 8px 0 10px;
  border: 1px solid var(--borde-2); border-radius: var(--radio-2); background: var(--superficie); color: var(--tinta-2); }
.selector select { border: 0; background: transparent; font-size: var(--t-12); color: var(--tinta); padding: 0 2px; height: 100%; cursor: pointer; }
.selector select:focus-visible { outline: none; }
.selector:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.selector--ancho { width: 100%; height: var(--toque); }
.selector--ancho select { flex: 1; font-size: var(--t-14); }
.rango { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--tinta-3); }
.rango input { height: var(--control); border: 1px solid var(--borde-2); border-radius: var(--radio-2); padding: 0 8px; background: var(--superficie); font-size: var(--t-12); }
.busca { display: inline-flex; align-items: center; gap: 6px; height: var(--control); padding: 0 8px; border: 1px solid var(--borde-2);
  border-radius: var(--radio-2); background: var(--superficie); color: var(--tinta-3); }
.busca input { border: 0; outline: 0; background: transparent; min-width: 0; width: 100%; font-size: var(--t-12); color: var(--tinta); }
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.busca--sup { width: 190px; }
.busca--grande { flex: 1 1 260px; max-width: 360px; }
.contenido { padding: 16px 20px 32px; outline: none; }
.contenido:focus { outline: none; }
.pila { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rejilla { display: grid; gap: 12px; min-width: 0; align-items: start; }
.rejilla > * { min-width: 0; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r2--apretada { gap: 0 14px; }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.r-2-1 { grid-template-columns: minmax(0, 1fr) 380px; }
.r-2-1-ancho { grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); }
.r-3 { grid-template-columns: minmax(0, 420px) minmax(0, 1fr) minmax(0, 300px); }
.r-cajas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; }
.r-alertas { grid-template-columns: minmax(0, 1fr) 400px; }
.r-nuevo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-lote { grid-template-columns: 340px minmax(0, 1fr) 320px; }

/* ----------------------------------------------------------------- tarjeta */
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; min-width: 0; }
.card__h { display: flex; align-items: flex-start; gap: var(--e-4); padding: 12px 14px 0; }
.card__tt { min-width: 0; flex: 1; }
.card__t { font-size: var(--t-13); font-weight: 650; letter-spacing: -.01em; line-height: 1.35; }
.card__s { font-size: var(--t-11); color: var(--tinta-3); margin-top: 1px; }
.card__acc { margin-left: auto; flex: 0 0 auto; }
.card__b { padding: 10px 14px 14px; min-width: 0; }
.card__b--sin { padding: 10px 0 0; }
.card__b--aviso { padding: 0 14px 10px; }
.card__pie { padding: 9px 14px; border-top: 1px solid var(--borde); font-size: var(--t-11); color: var(--tinta-3); background: var(--superficie-2); line-height: 1.5; }
.caja-borde { border: 1px solid var(--borde); border-radius: var(--radio-2); padding: 10px 12px; margin-top: var(--e-5); }
.caja-borde .sobre { margin-bottom: var(--e-3); }

/* --------------------------------------------------------------------- kpi */
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 11px 14px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.kpi__et { display: flex; align-items: center; gap: 5px; font-size: var(--t-11); font-weight: 500; color: var(--tinta-3); }
.kpi__v { font-size: var(--t-24); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__v--sd { color: var(--sin-dato); font-weight: 600; }
.kpi__f { display: flex; align-items: center; gap: 6px; min-height: 20px; flex-wrap: wrap; }
.kpi__nota { font-size: var(--t-11); color: var(--tinta-3); }
.kpi__spark { margin-top: 4px; height: 28px; }
.kpi__spark svg { width: 100%; height: 28px; }
.kpi__pie { font-size: var(--t-11); color: var(--tinta-3); margin-top: 1px; }
.ayuda { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--borde-2); background: var(--superficie); color: var(--tinta-3);
  font-size: 9px; font-weight: 700; line-height: 1; padding: 0; cursor: help; display: inline-flex; align-items: center; justify-content: center; }

.tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 11px 0; }
.tira__i { padding: 0 16px; min-width: 0; }
.tira__i + .tira__i { border-left: 1px solid var(--borde); }
.tira__e { font-size: var(--t-11); color: var(--tinta-3); font-weight: 500; }
.tira__v { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; white-space: nowrap; }
.tira__s { font-size: var(--t-11); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------- chips */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; font-size: var(--t-11);
  font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--neutro-suave); color: var(--tinta-2); }
.chip--ok { background: var(--ok-suave); color: var(--ok); }
.chip--mal, .chip--alta { background: var(--mal-suave); color: var(--mal); }
.chip--aviso, .chip--media { background: var(--aviso-suave); color: var(--aviso); }
.chip--critica { background: var(--critico-suave); color: var(--critico); }
.chip--dato { background: var(--dato-suave); color: var(--dato); }
.chip--sindato { background: var(--sin-dato-bg); color: var(--sin-dato); }
.chip--acento { background: var(--acento-suave); color: var(--acento); }
.punto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: currentColor; }
.punto--ok { background: var(--ok); }
.punto--mal { background: var(--mal); }
.pill { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.pill--violeta { background: var(--violeta-suave); color: var(--violeta); }
.pill--acento { background: var(--acento-suave); color: var(--acento); }
.pill--neutro { background: var(--neutro-suave); color: var(--tinta-3); }

/* ------------------------------------------------------------------- aviso */
.aviso { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: var(--radio-2); font-size: var(--t-12); line-height: 1.5; }
.aviso .ic { margin-top: 2px; }
.aviso b { font-weight: 650; }
.aviso--info { background: var(--acento-suave); color: var(--acento-hover); }
.aviso--ok { background: var(--ok-suave); color: var(--ok); }
.aviso--mal { background: var(--mal-suave); color: var(--mal); }
.aviso--aviso { background: var(--aviso-suave); color: var(--aviso); }
.aviso--neutro { background: var(--neutro-suave); color: var(--tinta-2); }

/* ------------------------------------------------------------------ barras */
.barra { position: relative; height: 6px; border-radius: 4px; background: var(--neutro-suave); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 4px; }
.barra--marca { overflow: visible; }
.barra--marca > b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta-2); border-radius: 1px; }
.particion { display: flex; gap: 1.5px; border-radius: 8px; overflow: hidden; background: var(--superficie); margin-bottom: var(--e-5); }
.particion > span { display: flex; align-items: center; gap: 7px; padding: 0 12px; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; }
.particion > span b { font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.particion > span em { font-style: normal; font-size: var(--t-11); overflow: hidden; text-overflow: ellipsis; }
.celda-barra { width: 130px; min-width: 90px; }
.celda-barra .particion { margin: 0; border-radius: 4px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-11); color: var(--tinta-2); margin-top: 4px; }
.leyenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.cuadrito { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* ---------------------------------------------------------------- gráficas */
.g { width: 100%; }
.g svg { display: block; overflow: visible; }
.g svg text { font-family: var(--fuente-ui); }
.g [data-tip] { cursor: default; }
.bh { display: flex; flex-direction: column; gap: 3px; }
.bh__f { display: flex; align-items: center; gap: 8px; height: 22px; font-size: var(--t-12); }
.bh__et { flex: 0 0 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh__b { flex: 1; min-width: 30px; }
.bh__b i { display: block; height: 9px; border-radius: 3px; }
.bh__v { width: 70px; text-align: right; font-weight: 600; white-space: nowrap; }
.bh__s { width: 44px; text-align: right; font-size: var(--t-11); font-weight: 600; }
/* Sin ancho mínimo en celular: un mapa más ancho que la pantalla, aun dentro de su
   contenedor con scroll, hacía que el navegador ensanchara TODA la página (medido). */
.heat { display: grid; gap: 2px; align-items: center; grid-template-columns: 52px repeat(var(--horas), minmax(18px, 1fr)); }
.heat__fila { display: contents; }
.heat__h { font-size: 10px; color: var(--tinta-3); text-align: center; }
.heat__d { font-size: var(--t-11); color: var(--tinta-2); text-align: right; padding-right: 6px; white-space: nowrap; }
.heat__c { height: 20px; border-radius: 4px; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; overflow: hidden; }
.heat__c--sin { height: 20px; background: repeating-linear-gradient(45deg, var(--sin-dato-bg) 0 3px, var(--superficie) 3px 6px); }
.desliza { overflow-x: auto; }

/* ----------------------------------------------------------------- estados */
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; color: var(--tinta-3); }
.vacio h3 { font-size: var(--t-14); color: var(--tinta); font-weight: 650; }
.vacio p { font-size: var(--t-12); max-width: 48ch; line-height: 1.5; }
.vacio--error .ic { color: var(--mal); }
.vacio .btn { margin-top: 6px; }
.esqueleto-vista { display: flex; flex-direction: column; gap: 12px; }
.esq { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.esq i, .esq-lineas i { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--neutro-suave), var(--borde), var(--neutro-suave)); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
.esq--alta { min-height: 150px; }
.esq-lineas { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .esq i, .esq-lineas i { animation: none; } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--tinta); color: #fff;
  padding: 10px 16px; border-radius: 8px; box-shadow: var(--sombra-alta); font-size: var(--t-13); max-width: min(92vw, 560px); }
.globo { position: fixed; z-index: 95; max-width: 280px; background: var(--tinta); color: #fff; font-size: var(--t-11); line-height: 1.45;
  padding: 6px 9px; border-radius: 6px; pointer-events: none; box-shadow: var(--sombra-alta); }

/* ----------------------------------------------------------------- botones */
.seg { display: inline-flex; background: var(--neutro-suave); border-radius: 8px; padding: 2px; gap: 2px; max-width: 100%; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 6px; font-size: var(--t-12); font-weight: 500;
  color: var(--tinta-2); white-space: nowrap; cursor: pointer; min-height: 28px; }
.seg button:hover { color: var(--tinta); }
.seg button[aria-pressed="true"] { background: var(--superficie); color: var(--tinta); font-weight: 650; box-shadow: 0 1px 2px rgba(16,24,40,.10); }
.seg--lleno { display: flex; }
.seg--lleno button { flex: 1; }
.seg--desliza { overflow-x: auto; scrollbar-width: none; }
.seg--envuelve { flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control); padding: 0 12px;
  border: 1px solid var(--borde-2); border-radius: var(--radio-2); background: var(--superficie); color: var(--tinta-2);
  font-size: var(--t-12); font-weight: 550; white-space: nowrap; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--p { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 650; }
.btn--p:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: #fff; }
.btn--peligro { background: var(--mal); border-color: var(--mal); color: #fff; font-weight: 650; }
.btn--peligro:hover { background: var(--critico); border-color: var(--critico); color: #fff; }
.btn--g { height: 38px; padding: 0 16px; font-size: var(--t-13); }
.btn--icono { width: var(--control); padding: 0; }
.btn--mini { height: 26px; padding: 0 8px; font-size: var(--t-11); }
.btn--mini.btn--icono { width: 26px; }
.btn--ancho { width: 100%; }
.btn--escanear { width: 100%; height: 52px; font-size: var(--t-14); gap: 10px; margin-bottom: var(--e-6);
  background: var(--acento); border-color: var(--acento); color: #fff; }

/* ------------------------------------------------------------------- tablas */
.tabla-env { overflow: auto; max-width: 100%; }
.tabla-env--alta { max-height: 560px; }
.tabla-env--media { max-height: 380px; }
.tabla-env--grid { max-height: calc(100vh - 260px); }
.t { width: 100%; border-collapse: collapse; font-size: var(--t-12); }
.t th { position: sticky; top: 0; z-index: 1; background: var(--superficie); text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-3); font-weight: 650; padding: 8px 10px 7px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.t td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t .n { text-align: right; white-space: nowrap; }
.t th.n { text-align: right; }
.t tfoot td { position: sticky; bottom: 0; background: var(--superficie-2); border-top: 2px solid var(--borde-2); border-bottom: 0; font-weight: 700; }
.t--densa td { padding: 5px 10px; }
.t--zebra tbody tr:nth-child(even) { background: var(--superficie-2); }
.t--click tbody tr { cursor: pointer; }
.t--click tbody tr:hover { background: var(--acento-suave); }
.t .sub { font-size: var(--t-11); color: var(--tinta-3); margin-top: 1px; }
.t .sub--mal { color: var(--mal); }
.fila-critica { background: var(--critico-suave) !important; }
.ancho-nombre { max-width: 280px; }
.celda-check { width: 30px; text-align: center; }
.celda-check input { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.celda-acc { white-space: nowrap; text-align: right; }
.th-orden { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-orden:hover { color: var(--tinta); }

/* ----------------------------------------------------------------- resumen */
.mini-alerta { display: flex; width: 100%; text-align: left; border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--superficie);
  padding: 0; overflow: hidden; cursor: pointer; margin-bottom: 8px; }
.mini-alerta:hover { border-color: var(--acento); }
.mini-alerta__marca { flex: 0 0 4px; background: var(--tinta-3); }
.sev-critica .mini-alerta__marca, .sev-critica .alerta__marca { background: var(--critico); }
.sev-alta .mini-alerta__marca, .sev-alta .alerta__marca { background: var(--mal); }
.sev-media .mini-alerta__marca, .sev-media .alerta__marca { background: var(--aviso); }
.sev-dato .mini-alerta__marca, .sev-dato .alerta__marca { background: var(--dato); }
.mini-alerta__c { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; min-width: 0; flex: 1; }
.mini-alerta__top { display: flex; align-items: center; gap: 6px; }
.mini-alerta__cuando { margin-left: auto; font-size: var(--t-11); color: var(--tinta-3); white-space: nowrap; }
.mini-alerta__t { font-size: var(--t-12); font-weight: 600; line-height: 1.35; color: var(--tinta); }
.mini-ses { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--borde); font-size: var(--t-12); }
.mini-ses:first-child { border-top: 0; }
.mini-ses b { margin-left: auto; }
.caja-fila { padding: 7px 0; }
.caja-fila + .caja-fila { border-top: 1px solid var(--borde); }
.caja-fila__top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.caja-fila__v { margin-left: auto; font-size: var(--t-14); font-weight: 700; }
.caja-fila__pie { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-11); color: var(--tinta-3); margin-top: 4px; }

/* ------------------------------------------------------------------- cajas */
.caja-card { padding: 13px 15px; }
.caja-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.caja-card__top h2 { font-size: var(--t-14); font-weight: 650; }
.caja-card__top .chip { margin-left: auto; }
.caja-card__v { font-size: var(--t-24); font-weight: 700; letter-spacing: -.02em; }
.caja-card.atenuada { background: var(--superficie-2); box-shadow: none; }
.datos5, .datos4 { display: grid; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
.datos5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .datos5 { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } }
.datos4 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.dato__e { font-size: var(--t-11); color: var(--tinta-3); }
.dato__v { font-size: var(--t-14); font-weight: 600; white-space: nowrap; }
.dato__v .chip, .datos4 .chip { margin-top: 3px; }
.persona { display: inline-flex; align-items: center; gap: 8px; }
.persona .avatar { background: var(--acento-suave); color: var(--acento); width: 24px; height: 24px; font-size: 10px; }

/* ----------------------------------------------------------------- alertas */
.barra-herr { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; padding: 12px 14px; }
.barra-herr--suelta { padding: 0; }
.barra-herr__nota { font-size: var(--t-12); color: var(--tinta-2); }
.barra-herr__acc { margin-left: auto; display: flex; gap: var(--e-4); flex-wrap: wrap; }
.lista-alertas { display: flex; flex-direction: column; gap: 8px; }
.alerta { display: flex; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; cursor: pointer; }
.alerta:hover { border-color: var(--borde-2); }
.alerta--sel { border: 2px solid var(--acento); background: var(--acento-suave); }
/* Lo cerrado se distingue por la marca apagada, NO con opacidad: bajarle la opacidad a
   la tarjeta dejaba sus metadatos en 3.7:1 (auditoría de contraste). */
.alerta--cerrada .alerta__marca { opacity: .35; }
/* Sobre un fondo suave, el gris tenue no llega a 4.5:1: se usa el segundo gris. */
.alerta--sel .tenue, .opcion:has(input:checked) .tenue, .t--click tbody tr:hover .tenue,
.fila-critica .tenue, .tcat--mal .tenue, .pref-op[aria-pressed="true"] span { color: var(--tinta-2); }
.alerta__marca { flex: 0 0 5px; background: var(--tinta-3); }
.alerta__c { padding: 10px 13px 11px; min-width: 0; flex: 1; }
.alerta__top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--t-11); }
.alerta__t { font-size: var(--t-13); font-weight: 650; margin-top: 5px; line-height: 1.35; }
.alerta__d { font-size: var(--t-12); color: var(--tinta-2); margin-top: 3px; line-height: 1.5; }
.alerta__acc { display: flex; gap: 8px; margin-top: 10px; }
.alerta__acc .btn { flex: 1; height: 38px; }
details.historico > summary, details.plegable > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; font-size: var(--t-12); list-style: none; }
details.historico > summary::-webkit-details-marker, details.plegable > summary::-webkit-details-marker { display: none; }
details.historico[open] > summary, details.plegable[open] > summary { border-bottom: 1px solid var(--borde); }
details.historico .lista-alertas { padding: 10px; background: var(--superficie-2); }
.panel-fijo { position: sticky; top: calc(var(--barra-sup) + 16px); }
.ficha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; margin: 0 0 var(--e-5); font-size: var(--t-12); }
.ficha dt { color: var(--tinta-3); }
.ficha dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.opcion { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--borde-2); border-radius: var(--radio-2); margin-bottom: 6px; cursor: pointer; font-size: var(--t-12); }
.opcion input { margin-top: 2px; accent-color: var(--acento); }
.opcion:has(input:checked) { border: 2px solid var(--acento); background: var(--acento-suave); padding: 7px 9px; }

/* ------------------------------------------------------------------- salud */
.salud-caja { padding: 13px 15px; }
.salud-caja__cob { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--borde); }
.salud-caja__cob .barra { margin-top: 5px; }
.lat-fila { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 8px; }
.lat-fila__n { font-size: var(--t-12); font-weight: 550; }
.lat-tira { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.lat-tira i { display: block; height: 16px; border-radius: 3px; }
.lat-tira i.si { background: var(--ok); }
.lat-tira i.no { background: var(--mal-suave); box-shadow: inset 0 0 0 1px rgba(185,28,28,.25); }
.lat-fila--eje { margin-top: -4px; }
.lat-eje { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); font-size: 10px; color: var(--tinta-3); white-space: nowrap; }
.agente { display: flex; align-items: center; gap: 10px; font-size: var(--t-12); }
.agente__der { margin-left: auto; text-align: right; }
.lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-12); color: var(--tinta-2); }
.lista-check li { display: flex; gap: 8px; align-items: flex-start; }
.lista-check .ic { color: var(--ok); margin-top: 2px; }

/* ------------------------------------------------------------ cajón ticket */
.telon { position: fixed; inset: 0; background: rgba(16,24,40,.32); z-index: 40; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 100%); background: var(--superficie); z-index: 45;
  box-shadow: -8px 0 24px rgba(16,24,40,.14); display: flex; flex-direction: column; }
.cajon__cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px 10px; border-bottom: 1px solid var(--borde); }
.cajon__cab h2 { font-size: 19px; font-weight: 700; }
.cajon__cab .btn--icono { margin-left: auto; }
.cajon__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 18px; border-bottom: 1px solid var(--borde); }
.cajon__meta span { display: block; font-size: var(--t-11); color: var(--tinta-3); }
.cajon__meta b { font-size: var(--t-12); }
.cajon__cuerpo { flex: 1; overflow: auto; padding: 12px 18px; }
.cajon__pie { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--borde); }
.cajon__pie .tenue { margin-left: auto; font-size: var(--t-11); }
.cajon__cajas { margin-top: 12px; }
.cajon .elipsis { max-width: 220px; }
.cajon .t td.tenue { white-space: nowrap; font-size: var(--t-11); }
.cajon .t th, .cajon .t td { padding-left: 7px; padding-right: 7px; }
.linea-pago { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: var(--t-12); }
.linea-pago i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.linea-pago b { margin-left: auto; }
.margen-grande { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.margen-grande .cif { font-size: 20px; font-weight: 700; }

/* ------------------------------------------------------------------- hojas */
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--superficie); border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(16,24,40,.16); max-height: 86vh; overflow: auto;
  transform: translateY(12px); opacity: 0; transition: transform .16s ease, opacity .16s ease; }
.hoja.abierta { transform: none; opacity: 1; }
.hoja__asa { width: 40px; height: 4px; border-radius: 2px; background: var(--borde-2); margin: 2px auto 12px; }
.hoja .sobre { margin: 12px 0 8px; }
.hoja .rango { margin-top: 10px; }
.hoja .btn--ancho { margin-top: 18px; }
.hoja__lista { display: flex; flex-direction: column; }
.hoja__lista a { display: flex; align-items: center; gap: 12px; min-height: var(--toque); padding: 0 6px; color: var(--tinta); font-size: var(--t-14); border-bottom: 1px solid var(--borde); }
.hoja__lista a[aria-current="page"] { color: var(--acento); font-weight: 650; }
.hoja__pie { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.hoja__pie .usuario__c { color: var(--tinta-3); }
.hoja__pie .usuario__c b { color: var(--tinta); }
.hoja__pie .avatar { background: var(--acento-suave); color: var(--acento); }

/* ------------------------------------------------------------------ modales */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(460px, calc(100vw - 24px)); box-shadow: var(--sombra-alta); color: var(--tinta); }
dialog::backdrop { background: rgba(16,24,40,.40); }
.modal__cab { padding: 16px 18px 6px; }
.modal__cab h3 { font-size: var(--t-16); font-weight: 650; }
.modal__cuerpo { padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.modal__pie { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--borde); }
.atajos { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 10px; align-items: center; font-size: var(--t-12); }
.escaner { width: min(520px, calc(100vw - 16px)); }
.escaner__visor { position: relative; background: #000; aspect-ratio: 4 / 3; }
.escaner__visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.escaner__guia { position: absolute; left: 12%; right: 12%; top: 34%; bottom: 34%; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); }
.escaner__estado { padding: 10px 18px 0; font-size: var(--t-13); color: var(--tinta-2); min-height: 30px; }

/* ----------------------------------------------------------------- campos */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo__e { font-size: var(--t-12); font-weight: 600; color: var(--tinta-2); }
.campo__a { font-size: var(--t-11); color: var(--tinta-3); line-height: 1.45; }
.campo input:not([type=radio]):not([type=checkbox]), .campo select, .campo textarea, .form-linea input, .t input, .t select {
  height: 36px; border: 1px solid var(--borde-2); border-radius: var(--radio-2); padding: 0 10px; background: var(--superficie); font-size: var(--t-13); min-width: 0; width: 100%; }
.campo textarea { height: auto; padding: 8px 10px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .form-linea input:focus, .t input:focus, .t select:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campo--2 { grid-column: span 2; }
.con-unidad { position: relative; display: flex; align-items: center; }
.con-unidad input { padding-right: 44px !important; }
.con-unidad em { position: absolute; right: 10px; font-style: normal; font-size: var(--t-11); color: var(--tinta-3); pointer-events: none; }
.con-unidad--grande em { left: 12px; right: auto; font-size: 18px; font-weight: 700; color: var(--tinta-2); }
.con-unidad--grande input { height: 46px !important; font-size: 22px !important; font-weight: 700; padding-left: 28px !important; padding-right: 10px !important; font-variant-numeric: tabular-nums; }
.con-boton { display: flex; gap: 6px; }
.con-boton .btn { height: 36px; width: 40px; flex: 0 0 auto; color: var(--acento); }
.form-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
.form-linea input { width: auto; height: 32px; }
.form-linea input[name=prefijo] { width: 80px; }
.form-linea input[name=piso] { width: 100px; }
.form-linea input[name=fuente] { flex: 1 1 220px; }
.opciones { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- catálogo */
.lote { padding: 10px 0; }
.lote + .lote { border-top: 1px solid var(--borde); }
.lote__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lote__top .tenue { margin-left: auto; font-size: var(--t-11); }
.lote .tenue { font-size: var(--t-12); }
.lote__acc { display: flex; gap: 6px; margin-top: 6px; }
.pasos { margin: 0; padding-left: 20px; font-size: var(--t-12); color: var(--tinta-2); line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.pasos--num { padding-left: 0; list-style: none; counter-reset: paso; gap: 10px; margin-bottom: 12px; }
.pasos--num li { counter-increment: paso; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; }
.pasos--num li::before { content: counter(paso); width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff;
  font-size: var(--t-11); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pasos--num li.paso-ok::before { background: var(--ok); }
.pref { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--neutro-suave); margin: 1px 0; }
.reglas select { min-width: 104px; height: 30px; }
.reglas input { min-width: 100px; height: 30px; }
.reglas td.elipsis { max-width: 240px; }
.prefijos { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.pref-op { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 10px; border: 1px solid var(--borde-2);
  border-radius: var(--radio-2); background: var(--superficie); cursor: pointer; min-height: 36px; }
.pref-op span { font-size: 10px; color: var(--tinta-3); }
.pref-op[aria-pressed="true"] { border: 2px solid var(--acento); background: var(--acento-suave); padding: 3px 9px; }
.pref-otro input { width: 76px !important; height: 36px !important; text-transform: uppercase; }
.derivados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.derivado__e { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 600; color: var(--tinta-2); margin-bottom: 4px; }
.derivado__v { display: flex; align-items: center; height: 36px; padding: 0 10px; border: 1px dashed var(--borde-2); border-radius: var(--radio-2);
  background: var(--superficie-2); font-weight: 600; font-size: var(--t-13); overflow: hidden; white-space: nowrap; }
.derivado__v.acento { color: var(--acento); }
.derivado__x { font-size: var(--t-11); color: var(--tinta-3); line-height: 1.45; margin-top: 4px; }
.precio-bloque { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.margen-vivo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.margen-vivo__v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.margen-vivo__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.margen-vivo__b .fila-par { font-size: var(--t-11); flex-wrap: wrap; }
.revision { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rev { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-12); line-height: 1.45; }
.rev .ic { margin-top: 2px; }
.rev--mal { color: var(--mal); }
.rev--aviso { color: var(--aviso); }
.rev--ok { color: var(--tinta-2); }
.rev--ok .ic { color: var(--ok); }
.panel-masiva { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radio); background: var(--acento-suave); color: var(--acento-hover); font-size: var(--t-12); }
.panel-masiva--mal { background: var(--mal-suave); color: var(--mal); }
.panel-masiva .fila-botones { margin: 0 0 0 auto; }
.grid td { padding: 2px 3px; }
.grid th { padding: 7px 6px; }
.grid .celda-in input { height: 30px; border-color: transparent; background: transparent; padding: 0 6px; font-size: var(--t-12); }
.grid .celda-in input.n { text-align: right; }
.grid .celda-in input:hover { border-color: var(--borde); }
.grid .celda-in input:focus { background: var(--superficie); }
.grid .celda--mal input { border-color: rgba(185,28,28,.45); background: var(--mal-suave); }
.grid tr.fila-mal td:first-child { box-shadow: inset 3px 0 0 var(--mal); }
.grid tr.fila-aviso td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }
.grid tr.fila-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.celda-msg { font-size: var(--t-11); color: var(--tinta-2); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-mal .celda-msg { color: var(--mal); }
.fila-aviso .celda-msg { color: var(--aviso); }
.archivo { display: flex; align-items: center; gap: 11px; padding: 10px 0; }
.archivo + .archivo { border-top: 1px solid var(--borde); }
.archivo__ic { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 34px; background: var(--neutro-suave); color: var(--tinta-3); display: flex; align-items: center; justify-content: center; }
.archivo__ic--p { background: var(--acento-suave); color: var(--acento); }
.archivo__c { min-width: 0; flex: 1; font-size: var(--t-12); }
.archivo__c .tenue { font-size: var(--t-11); }
.archivo__donde { font-size: var(--t-11); color: var(--tinta-2); margin-top: 2px; }

/* ------------------------------------------------------------------ acceso */
.acceso { display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); min-height: 100vh; }
.acceso__marca { background: var(--nav); color: #fff; padding: 56px 52px; display: flex; flex-direction: column; }
.marca { display: flex; align-items: center; gap: 11px; }
.marca .logo { width: 38px; height: 38px; border-radius: 10px; font-size: 19px; }
.marca__n { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.acceso__promesa { margin-top: auto; margin-bottom: auto; max-width: 440px; }
.acceso__promesa h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.acceso__promesa p { margin-top: 16px; font-size: var(--t-14); line-height: 1.6; color: var(--nav-txt); }
.acceso__forma { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.acceso__forma form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.acceso__forma h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.acceso__forma .tenue { margin-top: -10px; margin-bottom: 6px; }
.acceso__forma .campo input { height: 42px !important; font-size: var(--t-14) !important; }
.acceso__forma .btn--g { height: 44px; }
.acceso__error { background: var(--mal-suave); color: var(--mal); padding: 9px 12px; border-radius: var(--radio-2); font-size: var(--t-12); }

/* ------------------------------------------------------------------ tabbar */
.tabbar { display: none; }
.solo-movil { display: none !important; }
.tarjetas-prod, .tarjetas-cat { display: none; }
.tcat { border: 1px solid var(--borde); border-radius: var(--radio-2); padding: 9px 11px; }
.tcat--mal { background: var(--critico-suave); }
.tcat__top { display: flex; align-items: center; gap: 8px; }
.tcat__top input { width: 20px; height: 20px; accent-color: var(--acento); }
.tcat__m { margin-left: auto; }
.tcat__n { font-weight: 600; margin: 3px 0; }
.tcat__l { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; font-size: var(--t-12); color: var(--tinta-2); }
.tcat__acc { display: flex; gap: 8px; margin-top: 8px; }
.tcat__acc .btn { flex: 1; }

/* ---------------------------------------------------------------- usuarios */
.t--click tbody tr[aria-current="true"] { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.t--click tbody tr[aria-current="true"] .tenue { color: var(--tinta-2); }   /* tenue no llega a 4.5:1 sobre el suave */
.usr-nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.usr-nom .mono { font-size: var(--t-11); color: var(--tinta-2); }
/* Una cuenta desactivada se distingue por su chip y su avatar apagado, NO bajando el
   texto: gris sobre el fondo de la fila elegida no pasa contraste. */
.usr-inactivo .persona .avatar { background: var(--neutro-suave); color: var(--tinta-2); }
.form-usr { display: flex; flex-direction: column; gap: 12px; }
.form-usr + .form-usr { margin-top: var(--e-7); padding-top: var(--e-7); border-top: 1px solid var(--borde); }
.form-usr .sobre, .form-usr .nota { margin: 0; }
.form-usr .fila-botones { margin-top: 0; }
.usr-roles legend { padding: 0; margin-bottom: 6px; }
.usr-roles .opcion:has(input:disabled) { cursor: not-allowed; }
.usr-roles .opcion:has(input:disabled:not(:checked)) { background: var(--superficie-2); border-style: dashed; }
.usr-err:empty { display: none; }
.panel-usr .caja-borde { margin-top: var(--e-7); }
.panel-usr { scroll-margin-top: calc(var(--barra-sup) + 12px); }   /* que la cabecera fija no tape su título */
.usr-bitacora { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-12); line-height: 1.45; }
.usr-bitacora li { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 10px; }
.usr-chips-movil { display: none; }
@media (max-width: 760px) {
  .usr-bitacora li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .t .usr-col { display: none; }
  .usr-chips-movil { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
}
/* En una sola columna el formulario va justo después de la lista, no después de la bitácora. */
@media (max-width: 1100px) {
  .r-usuarios > .pila { display: contents; }
  .r-usuarios .usr-act { order: 3; }
}

/* =========================================================== responsivo */
@media (max-width: 1440px) {
  .sello__t { display: none; }
  .busca--sup { width: 150px; }
  .superior { gap: var(--e-4); }
  .superior__sub { max-width: 30ch; }
  .superior .seg button { padding: 5px 8px; }
}
@media (max-width: 1280px) {
  .app { grid-template-columns: var(--lateral-min) minmax(0, 1fr); }
  .lateral__nom, .lateral__gr, .lateral__t, .lateral__pie .usuario { display: none; }
  .lateral__marca { justify-content: center; padding: 14px 0; }
  .lateral__it { justify-content: center; margin: 2px 8px; }
  .lateral__it .insignia { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 4px; min-width: 16px; font-size: 9px; }
  .lateral__pie { justify-content: center; padding: 12px 0; }
  .busca--sup { width: 150px; }
  .r-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-3 > :last-child { grid-column: span 2; }
  .r-lote { grid-template-columns: 320px minmax(0, 1fr); }
  .r-lote > :last-child { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .r-2-1, .r-2-1-ancho, .r-alertas { grid-template-columns: minmax(0, 1fr); }
  .panel-fijo { position: static; }
  .superior__sub { max-width: 30ch; }
}
@media (max-width: 900px) {
  .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3, .r2, .r-nuevo, .r-lote { grid-template-columns: minmax(0, 1fr); }
  .r-3 { grid-template-columns: minmax(0, 1fr); }
  .r-3 > :last-child, .r-lote > :last-child { grid-column: auto; }
  .tira { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .tira__i:nth-child(3) { border-left: 0; }
  .solo-escritorio { display: none !important; }
}
@media (max-width: 760px) {
  :root { --control: 40px; }
  body { font-size: var(--t-14); }
  .app { display: block; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .lateral { display: none; }
  .solo-movil { display: inline-flex !important; }
  .solo-movil[hidden] { display: none !important; }   /* el atributo manda sobre la clase */
  .superior { padding: 10px 14px 9px; gap: 8px; flex-wrap: nowrap; }
  .superior__titulo { flex: 1 1 auto; min-width: 0; }
  .btn--filtro { width: 40px; padding: 0; }
  .btn--filtro #resumenFiltroMovil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #btnExcel { width: 40px; padding: 0; }
  .superior__titulo h1 { font-size: 18px; font-weight: 700; }
  .superior__sub { max-width: 60vw; }
  .superior__filtros, #formTicket, .sello { display: none !important; }
  .superior__der { gap: 6px; }
  .btn--filtro { max-width: 46vw; overflow: hidden; }
  .btn--filtro span { overflow: hidden; text-overflow: ellipsis; }
  .contenido { padding: 12px 12px 24px; }
  .pila, .rejilla { gap: 10px; }
  .kpi { padding: 9px 11px; }
  .kpi__v { font-size: 20px; }
  .kpi__spark { display: none; }
  .tira__v { font-size: 16px; }
  .tira__i { padding: 0 11px; }
  .card__h { padding: 11px 12px 0; }
  .card__b { padding: 9px 12px 12px; }
  .barra-herr { padding: 10px 12px; }
  .barra-herr__acc { margin-left: 0; width: 100%; }
  .barra-herr__acc .btn { flex: 1; }
  .busca--grande { max-width: none; flex-basis: 100%; }
  .seg button { min-height: 36px; }
  .btn { height: 40px; }
  .btn--mini { height: 32px; }
  .btn--mini.btn--icono { width: 32px; }
  #envTablaProd, #envTablaCat { display: none; }
  .tarjetas-cat { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
  .tarjetas-prod { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
  .tprod { border: 1px solid var(--borde); border-radius: var(--radio-2); padding: 9px 11px; }
  .tprod__top { display: flex; justify-content: space-between; font-size: var(--t-12); }
  .tprod__n { font-weight: 600; margin: 2px 0 4px; }
  .tprod__l { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-12); color: var(--tinta-2); }
  .campos, .derivados { grid-template-columns: minmax(0, 1fr); }
  .campo--2 { grid-column: auto; }
  .campo input:not([type=radio]):not([type=checkbox]), .campo select { height: var(--toque); font-size: 16px; }
  .precio-bloque { grid-template-columns: minmax(0, 1fr); }
  .ficha { grid-template-columns: 96px minmax(0, 1fr); }
  .lat-fila { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lat-fila--eje .lat-fila__n { display: none; }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso__marca { padding: 28px 24px; }
  .acceso__promesa { margin: 28px 0 0; }
  .acceso__promesa h1 { font-size: 24px; }
  .acceso__forma { padding: 28px 20px 40px; align-items: flex-start; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--superficie); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 58px; font-size: 10.5px; color: var(--tinta-3); font-weight: 500; border: 0; background: none; text-decoration: none; padding: 0; }
  .tabbar a[aria-current="page"], .tabbar button.activo { color: var(--acento); font-weight: 650; }
  .tabbar .insignia { position: absolute; top: 6px; left: 50%; margin-left: 6px; padding: 0 5px; min-width: 16px; font-size: 9px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cajon { width: 100%; }
  .cajon__meta { gap: 6px 16px; }
  .celda-barra { display: none; }
  .heat { grid-template-columns: 34px repeat(var(--horas), minmax(0, 1fr)); gap: 1px; }
  .heat__c { font-size: 8px; border-radius: 2px; }
  .heat__h { font-size: 8px; }
  .heat__d { font-size: 9.5px; padding-right: 3px; }
  .tabla-env--alta { max-height: 70vh; }
}

/* ------------------------------------------------------------- impresión */
@media print {
  :root { --fondo: #fff; }
  .lateral, .tabbar, .superior__filtros, .superior__der, .barra-herr, .alerta__acc, .fila-botones, .btn, .telon, .hoja, .toast, .globo { display: none !important; }
  .app { display: block; }
  .superior { position: static; border: 0; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
  .tabla-env, .tabla-env--alta { max-height: none; overflow: visible; }
  .cajon { position: static; width: 100%; box-shadow: none; }
  body.sin-scroll .principal { display: none; }
}