/* HOST OS · Store y caja — sistema visual v4
   Tokens primero; componentes después; páginas al final. Sin dependencias externas. */

/* --- Tipografía local ------------------------------------------------------------------- */
/* Gotham (entregada por Host): solo Light, Bold y Black. Se usa en títulos y cifras.
   Texto corrido: Inter (SIL OFL), incluida localmente, porque faltan Gotham Book y Medium. */
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* --- Tokens ----------------------------------------------------------------------------- */
:root {
  /* Marca. Valores tomados de los logos entregados; provisorios hasta tener los oficiales. */
  --host-negro: #1d1d1b;
  --host-cian: #4dbdd7;        /* Villa Belgrano · Coworking */
  --host-magenta: #c50265;     /* Orfeo · Comunidad de Negocios */
  --host-amarillo: #ffcc17;

  /* Neutros cálidos */
  --fondo: #f6f5f2;
  --superficie: #ffffff;
  --superficie-2: #faf9f7;
  --superficie-3: #f0efeb;
  --linea: #e7e4de;
  --linea-fuerte: #d3cfc6;
  --tinta: #1d1d1b;
  --tinta-2: #46443f;
  --tinta-3: #6b6862;          /* texto secundario: ≥ 4,5:1 sobre blanco y fondo */

  /* Acento de sede (se redefine por sede) */
  --acento: #6b6862; --acento-sobre: #fff; --acento-texto: #46443f; --acento-suave: #f0efeb;
  --acento-oscuro: #d3cfc6;    /* acento legible sobre la tinta (íconos de botones principales) */
  --acento-anillo: rgb(29 29 27 / .12);
  --acento-velo: #efede8;      /* lavado de fondo, arriba de cada página */
  --acento-borde: #d3cfc6;

  /* Estados: siempre con texto o ícono */
  --ok: #1d6b46;        --ok-suave: #e9f4ee;      --ok-borde: #bfdcca;
  --alerta: #7a4a00;    --alerta-suave: #fff6dc;  --alerta-borde: #f0d590;
  --error: #a8261b;     --error-suave: #fcecea;   --error-borde: #efc0ba;
  --info: #2d4a66;      --info-suave: #eef3f8;    --info-borde: #cbd9e7;

  --f-titulo: "Gotham", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: .8125rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.0625rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem;

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;
  --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 22px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgb(29 29 27 / .04);
  --sombra-2: 0 1px 2px rgb(29 29 27 / .04), 0 8px 24px -10px rgb(29 29 27 / .16);
  --sombra-3: 0 18px 48px -16px rgb(29 29 27 / .32);
  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento-texto);
  --rapido: .16s cubic-bezier(.2, .7, .3, 1);

  --toque: 44px; --lateral: 252px; --barra-movil: 56px; --nav-movil: 64px; --contenido: 1160px;
}
/* Por sede. Todos los pares texto/fondo cumplen 4,5:1; el color de marca puro solo va como relleno
   con texto oscuro (cian) o blanco (magenta), o en detalles no textuales. */
[data-sede="VB"]  { --acento: var(--host-cian);    --acento-sobre: var(--host-negro); --acento-texto: #12697f; --acento-suave: #e8f6fa;
                    --acento-oscuro: #4dbdd7; --acento-anillo: rgb(77 189 215 / .32); --acento-velo: #e3f2f5; --acento-borde: #9fd7e5; }
[data-sede="ORF"] { --acento: var(--host-magenta); --acento-sobre: #fff;              --acento-texto: #ad0259; --acento-suave: #fbeaf3;
                    --acento-oscuro: #ff6fb0; --acento-anillo: rgb(197 2 101 / .2); --acento-velo: #f8e9f0; --acento-borde: #ecaccb; }

/* --- Base -------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-m)/1.5 var(--f-texto);
       -webkit-font-smoothing: antialiased; font-synthesis: none; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); }
h1 { font: 700 var(--t-2xl)/1.15 var(--f-titulo); letter-spacing: -.02em; }
h2 { font: 600 var(--t-l)/1.3 var(--f-texto); letter-spacing: -.01em; }
::selection { background: var(--acento-anillo); }
h3 { font: 600 var(--t-m)/1.3 var(--f-texto); }
strong, b { font-weight: 600; }
p { margin: 0 0 var(--e-3); }
a { color: var(--tinta); text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
img, svg { max-width: 100%; }
code { font-size: .85em; background: var(--superficie-3); padding: .1em .35em; border-radius: 4px; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-s); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .importe { font-variant-numeric: tabular-nums; }
.importe { font-weight: 600; white-space: nowrap; }
.tenue { color: var(--tinta-3); }
.chico { font-size: var(--t-s); }
.neg { color: var(--error); }
.pos { color: var(--ok); }
.nowrap { white-space: nowrap; }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-s { width: 16px; height: 16px; }
.ic-l { width: 24px; height: 24px; }

@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes marcar { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Estructura ------------------------------------------------------------------------- */
.app { min-height: 100vh; }
.lateral { display: none; }
.principal { min-width: 0; background: linear-gradient(180deg, var(--acento-velo) 0, var(--fondo) 300px) no-repeat; }
.contenido { width: min(100% - 2 * var(--e-4), var(--contenido)); margin-inline: auto;
             padding: var(--e-5) 0 calc(var(--nav-movil) + var(--e-10) + env(safe-area-inset-bottom)); }

/* Barra superior (celular): vidrio sutil con alternativa sólida */
.barra-movil { position: sticky; top: 0; z-index: 20; height: var(--barra-movil); display: flex; align-items: center; gap: var(--e-2);
               padding: 0 var(--e-3) 0 var(--e-4); background: var(--superficie); border-bottom: 1px solid var(--linea); }
.barra-movil .logo-store { height: 28px; width: auto; display: block; }
.barra-movil .espacio { flex: 1; }
.sede-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill);
             border: 1px solid var(--acento-borde); background: var(--acento-suave); font: 500 var(--t-s)/1 var(--f-texto); color: var(--tinta); cursor: pointer; }
.sede-pill[disabled] { cursor: default; }
.sede-pill .ic { color: var(--acento-texto); }

/* Navegación inferior (celular) */
.nav-movil { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
             height: calc(var(--nav-movil) + env(safe-area-inset-bottom)); padding: 0 var(--e-1) env(safe-area-inset-bottom);
             background: var(--superficie); border-top: 1px solid var(--linea); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .barra-movil, .nav-movil { background: rgb(255 255 255 / .94); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); }
}
.nav-movil a, .nav-movil button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--toque); border: 0; background: none; color: var(--tinta-3); text-decoration: none;
  font: 500 11px/1.1 var(--f-texto); cursor: pointer; position: relative; transition: color var(--rapido); }
.nav-movil .ic { width: 22px; height: 22px; }
.nav-movil [aria-current="page"] { color: var(--tinta); font-weight: 600; }
.nav-movil [aria-current="page"] .ic { color: var(--acento-texto); }
.nav-movil a::before, .nav-movil button::before { content: ""; position: absolute; top: 7px; left: 50%; width: 52px; height: 30px; margin-left: -26px;
  border-radius: 15px; background: var(--acento-suave); opacity: 0; transform: scaleX(.6); transition: opacity var(--rapido), transform var(--rapido); z-index: -1; }
.nav-movil a, .nav-movil button { isolation: isolate; }
.nav-movil [aria-current="page"]::before { opacity: 1; transform: none; }
.nav-movil .punto-aviso { position: absolute; top: 9px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--host-amarillo); box-shadow: 0 0 0 2px var(--superficie); }

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr);
         background: linear-gradient(to right, var(--superficie) calc(var(--lateral) - 1px), var(--linea) 0 var(--lateral), transparent 0); }
  .barra-movil, .nav-movil { display: none; }
  .lateral { display: flex; flex-direction: column; gap: var(--e-4); position: sticky; top: 0; height: 100vh; overflow-y: auto;
             padding: var(--e-5) var(--e-3) var(--e-4); background: var(--superficie); border-right: 1px solid var(--linea); }
  .contenido { width: min(100% - 2 * var(--e-10), var(--contenido)); padding: var(--e-8) 0 var(--e-12); }
}

/* Lateral */
.lateral .logo-store { display: block; width: 104px; height: auto; margin: 0 var(--e-2); }
.sede-actual { display: flex; align-items: center; gap: var(--e-3); width: 100%; padding: 10px var(--e-3); border: 1px solid transparent;
  border-radius: var(--r); background: var(--acento-suave); font: inherit; color: inherit; text-align: left; cursor: pointer;
  min-height: var(--toque); transition: border-color var(--rapido); }
.sede-actual:hover { border-color: var(--acento-borde); }
.sede-actual[disabled] { cursor: default; }
.sede-actual .datos { min-width: 0; flex: 1; display: grid; }
.sede-actual strong { font-weight: 600; line-height: 1.25; }
.sede-actual small { color: var(--acento-texto); font-size: var(--t-xs); }
.sede-actual .ic { color: var(--acento-texto); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); flex: none; box-shadow: 0 0 0 3px var(--acento-suave); }

.menu { display: grid; gap: 2px; }
.menu-grupo { font: 500 var(--t-xs)/1 var(--f-texto); color: var(--tinta-3); padding: var(--e-5) var(--e-3) var(--e-2); }
.menu a { position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 40px; padding: 0 var(--e-3);
  border-radius: var(--r-s); color: var(--tinta-2); text-decoration: none; font-weight: 500; transition: background-color var(--rapido), color var(--rapido); }
.menu a .ic { color: var(--tinta-3); }
.menu a:hover { background: var(--superficie-3); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--acento-suave); color: var(--tinta); font-weight: 600; }
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.menu a[aria-current="page"] .ic { color: var(--acento-texto); }
.menu .cuenta { margin-left: auto; }
.menu.principal-menu a { min-height: 44px; font-size: var(--t-m); }

.usuario-lateral { margin-top: auto; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-2) 0; border-top: 1px solid var(--linea); }
.usuario-lateral .datos { min-width: 0; flex: 1; display: grid; line-height: 1.3; }
.usuario-lateral strong { font-size: var(--t-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-lateral small { color: var(--tinta-3); font-size: var(--t-xs); }

.iniciales { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--superficie-3); color: var(--tinta-2); font: 600 13px/1 var(--f-texto); letter-spacing: .02em; }
.iniciales.l { width: 52px; height: 52px; font-size: 17px; }

.marca-demo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--alerta-suave); color: var(--alerta); font-size: var(--t-xs); font-weight: 500; }

/* --- Encabezado de página --------------------------------------------------------------- */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-6); }
.encabezado .titulos { min-width: 0; flex: 1 1 280px; }
.encabezado .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.antetitulo { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); color: var(--tinta-3); font-size: var(--t-s); }
.antetitulo a { color: var(--tinta-3); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.antetitulo a:hover { color: var(--tinta); }
.bajada { margin: var(--e-2) 0 0; color: var(--tinta-3); max-width: 62ch; }
.ceja { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--e-2); font: 700 11px/1.2 var(--f-titulo); letter-spacing: .09em;
  text-transform: uppercase; color: var(--acento-texto); }
.ceja::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); }
.contexto-sede { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: var(--t-s); }

/* --- Botones ----------------------------------------------------------------------------- */
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque);
  padding: 0 var(--e-5); border-radius: var(--r); border: 1px solid transparent; background: var(--tinta); color: #fff;
  font: 600 var(--t-m)/1 var(--f-texto); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido);
  -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #000; }
.btn:not(.sec):not(.fantasma):not(.peligro) .ic { color: var(--acento-oscuro); }
.btn.sec .ic { color: var(--acento-texto); }
.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.sec { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn.sec:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
.btn.fantasma { background: transparent; color: var(--tinta-2); }
.btn.fantasma:hover { background: var(--superficie-3); color: var(--tinta); }
.btn.peligro { background: var(--superficie); color: var(--error); border-color: var(--error-borde); }
.btn.peligro:hover { background: var(--error-suave); }
.btn.chico { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-s); border-radius: var(--r-s); }
.btn.ancho { width: 100%; }
.btn.grande { min-height: 54px; font-size: var(--t-l); border-radius: var(--r-l); }
.btn.icono { width: var(--toque); padding: 0; }
.btn .ic { width: 18px; height: 18px; }
.btn.enviando { position: relative; color: transparent !important; pointer-events: none; }
.btn.enviando .ic { opacity: 0; }
.btn.enviando::after { content: attr(data-enviando); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: var(--t-m); }
.btn.enviando::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; border: 2px solid var(--acento-oscuro); border-right-color: transparent; animation: girar .8s linear infinite; }
.btn.sec.enviando::before, .btn.fantasma.enviando::before { border-color: var(--acento-texto); border-right-color: transparent; }
@media (prefers-reduced-motion: reduce) { .btn.enviando::before { border-right-color: var(--acento-oscuro); opacity: .7; } }
.btn.sec.enviando::after, .btn.fantasma.enviando::after { color: var(--tinta); }
.vinculo { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--tinta); text-decoration: underline;
  text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.vinculo:hover { text-decoration-color: currentColor; }
.ver-todo { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: var(--t-s); font-weight: 500; color: var(--tinta-2); text-decoration: none; }
.ver-todo:hover { color: var(--tinta); }

/* --- Campos ------------------------------------------------------------------------------ */
.campo { display: grid; gap: 6px; margin-bottom: var(--e-4); min-width: 0; }
.campo:last-child { margin-bottom: 0; }
label, .etiqueta { font-size: var(--t-s); font-weight: 500; color: var(--tinta-2); }
.etiqueta-opc, .opcional { font-weight: 400; color: var(--tinta-3); }
.ayuda { font-size: var(--t-s); color: var(--tinta-3); margin: 0; }
.error-campo { font-size: var(--t-s); color: var(--error); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; margin: 0; }
input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], input:not([type]), select, textarea {
  width: 100%; min-height: var(--toque); padding: 10px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-s);
  background: var(--superficie); color: var(--tinta); font: 400 16px/1.3 var(--f-texto);
  transition: border-color var(--rapido), box-shadow var(--rapido); appearance: none; -webkit-appearance: none; }
select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6862' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento-texto); box-shadow: 0 0 0 3px var(--acento-anillo); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px rgb(168 38 27 / .1); }
input::placeholder { color: #9a968e; }
.campo-importe { position: relative; }
.campo-importe::before { content: "$"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font: 500 var(--t-l)/1 var(--f-texto); color: var(--tinta-3); pointer-events: none; }
.campo-importe input { padding-left: 30px; font: 600 var(--t-l)/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.campo-importe input::placeholder { font-weight: 400; font-size: var(--t-m); }
.buscador { position: relative; }
.buscador .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.buscador input { padding-left: 40px; }
.fila-campos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.fila-campos .campo { margin-bottom: 0; }
.fecha-rapida { display: flex; gap: 6px; flex-wrap: wrap; }

.check { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--toque); padding: 10px 0; font-weight: 400; color: var(--tinta); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acento-texto); flex: none; }
.check small { display: block; color: var(--tinta-3); }

/* Selector segmentado */
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--superficie-3); border-radius: var(--r); }
.segmento label, .segmento a { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 0 var(--e-3); border-radius: 9px; font-size: var(--t-s); font-weight: 500; color: var(--tinta-2); cursor: pointer;
  text-align: center; text-decoration: none; white-space: nowrap; transition: background-color var(--rapido), color var(--rapido), box-shadow var(--rapido); }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento label:has(input:checked), .segmento a[aria-current="true"] { background: var(--superficie); color: var(--acento-texto); font-weight: 600; box-shadow: 0 1px 3px rgb(29 29 27 / .1), 0 0 0 1px var(--linea); }
.segmento a:not([aria-current="true"]):hover, .segmento label:not(:has(input:checked)):hover { color: var(--tinta); background: rgb(255 255 255 / .55); }
.segmento label:has(input:focus-visible) { box-shadow: var(--foco); }
@media (max-width: 599px) { .segmento a, .segmento label { padding: 0 var(--e-2); } }

/* Opciones grandes (cómo paga, tipo de movimiento) */
.opciones { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); }
.opcion { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 76px; padding: var(--e-3);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--superficie); cursor: pointer; font-weight: 500; color: var(--tinta);
  transition: border-color var(--rapido), background-color var(--rapido), box-shadow var(--rapido); line-height: 1.25; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion .ic { color: var(--tinta-3); margin-bottom: 2px; transition: color var(--rapido); }
.opcion small { font-weight: 400; color: var(--tinta-3); font-size: var(--t-xs); line-height: 1.3; }
.opcion:hover { border-color: var(--acento-borde); }
.opcion:has(input:checked) { border-color: var(--acento-texto); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento-texto); font-weight: 600; }
.opcion:has(input:checked) .ic { color: var(--acento-texto); }
.opcion:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; animation: marcar .2s ease-out;
  background: var(--acento-texto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center no-repeat; }
.opcion:has(input:focus-visible) { box-shadow: var(--foco); }
.opcion .logo-mp { height: 18px; width: auto; margin-bottom: 2px; }

/* --- Superficies ------------------------------------------------------------------------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-5); min-width: 0; }
.tarjeta + .tarjeta { margin-top: var(--e-4); }
.tarjeta.plana { background: var(--superficie-2); }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; overflow: clip; }
.tarjeta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-4); min-width: 0; }
.tarjeta-cab h2, .tarjeta-cab h3 { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-2); }
.tarjeta-cab .ic { color: var(--tinta-3); }
.tarjeta-cab > .segmento { flex: 0 1 auto; }
@media (max-width: 599px) { .tarjeta-cab > .segmento { flex: 1 1 100%; } }
.sin-relleno > .tarjeta-cab { padding: var(--e-4) var(--e-5) 0; margin-bottom: var(--e-2); }
.tarjeta.admin { background: var(--superficie); }
.etq-admin { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3);
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--linea); background: var(--superficie-2); white-space: nowrap; }
.etq-admin .ic { width: 12px; height: 12px; }

/* Sección sin tarjeta: título + contenido sobre el fondo */
.seccion { margin-top: var(--e-8); }
.seccion:first-child { margin-top: 0; }
.seccion-cab { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); min-height: 36px; }
.seccion-cab h2 { flex: 1; }
.titulo-seccion { font: 600 var(--t-l)/1.3 var(--f-texto); margin: var(--e-8) 0 var(--e-3); }

.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rejilla-3 { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.rejilla-3 > .tarjeta + .tarjeta, .rejilla > .tarjeta + .tarjeta { margin-top: 0; }
.dos-col { display: grid; gap: var(--e-5); align-items: start; grid-template-columns: minmax(0, 1fr); }
.pila { min-width: 0; }
.pila > * + * { margin-top: var(--e-4); }
@media (min-width: 1024px) {
  .dos-col { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--e-6); }
  .dos-col.inversa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .dos-col.mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pegajoso { position: sticky; top: var(--e-6); }
}

/* --- Etiquetas y avisos ----------------------------------------------------------------- */
.etq { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--superficie-3); color: var(--tinta-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; vertical-align: middle; line-height: 1; }
.etq .ic { width: 13px; height: 13px; }
.etq.ok { background: var(--ok-suave); color: var(--ok); }
.etq.alerta { background: var(--alerta-suave); color: var(--alerta); }
.etq.error { background: var(--error-suave); color: var(--error); }
.etq.info { background: var(--info-suave); color: var(--info); }
.etq.demo { background: transparent; border: 1px dashed var(--linea-fuerte); color: var(--tinta-3); }
.etq.sede { background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta-2); }
.etq.sede::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--tinta-3)); }
.etq.sede[data-sede="VB"] { --c: var(--host-cian); }
.etq.sede[data-sede="ORF"] { --c: var(--host-magenta); }

.aviso { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r);
  border: 1px solid var(--info-borde); background: var(--info-suave); color: var(--info); margin-bottom: var(--e-4); animation: aparecer .2s ease-out; }
.aviso .ic { margin-top: 1px; }
.aviso > div { min-width: 0; flex: 1; }
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }
.aviso.ok { border-color: var(--ok-borde); background: var(--ok-suave); color: var(--ok); }
.aviso.alerta { border-color: var(--alerta-borde); background: var(--alerta-suave); color: var(--alerta); }
.aviso.error { border-color: var(--error-borde); background: var(--error-suave); color: var(--error); }
.aviso.neutro { border-color: var(--linea); background: var(--superficie-2); color: var(--tinta-2); }
.aviso a { color: inherit; }
.aviso ul { margin: var(--e-1) 0 0; padding-left: 1.1rem; }
.aviso .acciones-aviso { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }

/* Estado del envío, junto al botón que lo disparó */
.estado-envio { margin: 0 0 var(--e-3); }
.estado-envio .aviso { margin: 0; }

.vacio { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-8) var(--e-4); text-align: center; color: var(--tinta-3); }
.vacio .ic { width: 28px; height: 28px; color: var(--linea-fuerte); }
.vacio strong { color: var(--tinta-2); font-weight: 600; }
.vacio p { margin: 0; max-width: 42ch; font-size: var(--t-s); }
.vacio.tranquilo .ic { color: var(--ok); }

/* --- Listas de filas -------------------------------------------------------------------- */
.filas { list-style: none; margin: 0; padding: 0; }
.fila { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea);
  min-height: 60px; color: inherit; text-decoration: none; min-width: 0; transition: background-color var(--rapido); }
.filas > li:first-child > .fila, .filas > .fila:first-child { border-top: 0; }
a.fila:hover, .fila.interactiva:hover { background: var(--superficie-2); }
a.fila:hover .chev { color: var(--acento-texto); transform: translateX(2px); }
.fila .chev { transition: transform var(--rapido), color var(--rapido); }
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .titulo { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-s); color: var(--tinta-3); margin-top: 2px; }
.fila .derecha { text-align: right; flex: none; }
.fila .importe { font-size: var(--t-m); }
.fila .chev { color: var(--linea-fuerte); }
.fila-icono { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--superficie-3); color: var(--tinta-2); }
.fila-icono .ic { width: 18px; height: 18px; }
.fila-icono.ok { background: var(--ok-suave); color: var(--ok); }
.fila-icono.alerta { background: var(--alerta-suave); color: var(--alerta); }
.fila-icono.error { background: var(--error-suave); color: var(--error); }
.fila-icono.acento { background: var(--acento-suave); color: var(--acento-texto); }
.fila-icono.entra { background: var(--ok-suave); color: var(--ok); }
.fila-icono.sale { background: #f6efe6; color: #7a4f1d; }
.fila-icono.stock-i { background: var(--info-suave); color: var(--info); }
.filas.compactas .fila { min-height: 52px; padding-block: 10px; }
.filas.planas .fila { padding-inline: 0; }
@media (max-width: 599px) { .fila { padding: var(--e-3) var(--e-4); } .sin-relleno > .tarjeta-cab { padding: var(--e-4) var(--e-4) 0; } }

/* --- Tablas ----------------------------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.tabla th { text-align: left; font: 500 var(--t-xs)/1.2 var(--f-texto); color: var(--tinta-3); padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--superficie-2); }
.tabla td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla td input { min-height: 40px; }
.tabla .sub { display: block; color: var(--tinta-3); font-size: var(--t-s); }
.desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 719px) {
  .tabla.responsiva thead { display: none; }
  .tabla.responsiva, .tabla.responsiva tbody, .tabla.responsiva tr, .tabla.responsiva td { display: block; width: 100%; }
  .tabla.responsiva tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); }
  .tabla.responsiva tr:last-child { border-bottom: 0; }
  .tabla.responsiva td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: var(--e-3); text-align: right; }
  .tabla.responsiva td::before { content: attr(data-et); color: var(--tinta-3); font-size: var(--t-s); text-align: left; flex: none; }
  .tabla.responsiva td.principal-celda { display: block; text-align: left; padding-bottom: 6px; }
  .tabla.responsiva td.principal-celda::before { content: none; }
  .tabla.responsiva td:empty { display: none; }
  .tabla.responsiva td input { max-width: 140px; }
}

/* --- Diálogos y hojas ------------------------------------------------------------------- */
dialog { border: 0; padding: 0; color: inherit; background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-3);
  width: min(100% - 2 * var(--e-4), 460px); max-height: calc(100dvh - 2 * var(--e-6)); overscroll-behavior: contain; }
dialog[open] { animation: aparecer .18s ease-out; }
dialog::backdrop { background: rgb(29 29 27 / .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fundido .18s; }
dialog.ancho { width: min(100% - 2 * var(--e-4), 560px); }
dialog > form, dialog .dialogo-marco { display: flex; flex-direction: column; max-height: inherit; }
.dialogo-cab { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-3) var(--e-2) var(--e-5); flex: none; }
.dialogo-cab h2 { flex: 1; }
.dialogo-cuerpo { padding: var(--e-2) var(--e-5) var(--e-5); overflow-y: auto; min-height: 0; }
.dialogo-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-3) var(--e-5) var(--e-4);
  border-top: 1px solid var(--linea); flex: none; background: var(--superficie); }
.dialogo-pie .estado-envio { flex: 1 1 100%; }
@media (max-width: 1023px) {
  dialog.hoja { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92dvh;
                padding-bottom: env(safe-area-inset-bottom); }
  dialog.hoja[open] { animation: subir .22s cubic-bezier(.2, .7, .3, 1); }
  dialog.hoja .dialogo-pie .btn { flex: 1 1 auto; }
}
.lista-sedes { display: grid; gap: var(--e-2); }
.lista-sedes button { display: flex; align-items: center; gap: var(--e-4); width: 100%; min-height: 72px; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--superficie); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--rapido); }
.lista-sedes button:hover { border-color: var(--tinta-3); }
.lista-sedes button[aria-current="true"] { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); background: var(--acento-suave); }
.lista-sedes img { height: 40px; width: 76px; object-fit: contain; object-position: left center; }
.lista-sedes .datos { display: grid; flex: 1; }
.lista-sedes small { color: var(--tinta-3); }
.menu-mas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.menu-mas a { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: 0 var(--e-4); border-radius: var(--r);
  background: var(--superficie-2); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 500; }
.menu-mas a .ic { color: var(--acento-texto); }
.menu-mas a[aria-current="page"] { border-color: var(--acento-texto); background: var(--acento-suave); font-weight: 600; }
.menu-mas-titulo { font-size: var(--t-xs); font-weight: 500; color: var(--tinta-3); margin: var(--e-4) 0 var(--e-2); }

/* --- Mensajes de página ---------------------------------------------------------------- */
.mensajes { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.mensajes .aviso { margin: 0; }

/* --- Inicio ------------------------------------------------------------------------------ */
.inicio-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-5); }
.saludo { font: 600 var(--t-xl)/1.2 var(--f-texto); letter-spacing: -.01em; margin: 0; }
.inicio-cab .contexto { color: var(--tinta-3); font-size: var(--t-s); margin-top: 2px; }
.alcance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.accesos { display: grid; gap: var(--e-3); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--e-6); }
.acceso { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-4); min-height: 112px; padding: var(--e-4);
  border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none;
  transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido); }
.acceso:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.acceso:active { transform: scale(.99); }
.acceso .ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-texto); }
.acceso strong { font: 600 var(--t-l)/1.2 var(--f-texto); display: block; }
.acceso small { color: var(--tinta-3); font-size: var(--t-s); line-height: 1.3; display: block; margin-top: 2px; }
.acceso.principal-acceso { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.acceso.principal-acceso .ic { color: var(--acento-oscuro); background: rgb(255 255 255 / .08); }
.acceso.principal-acceso small { color: #cfccc5; }
.acceso.principal-acceso:hover { background: #000; }
@media (max-width: 599px) {
  .accesos { grid-template-columns: 1fr 1fr; gap: var(--e-2); }
  .accesos .acceso:first-child { grid-column: 1 / -1; min-height: 88px; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--e-4); }
  .acceso { min-height: 96px; padding: var(--e-3) var(--e-4); }
}
.resumen-cifras { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.resumen-cifras > div { background: var(--superficie); padding: var(--e-4) var(--e-5); min-width: 0; }
.cifras { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cifra { min-width: 0; }
.cifra .etiqueta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--tinta-3); font-weight: 500; }
.cifra .valor { font: 700 var(--t-2xl)/1.1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra .valor.xl { font-size: var(--t-3xl); }
.cifra .det { margin-top: 6px; font-size: var(--t-s); color: var(--tinta-3); }
.cifra a.det { display: inline-flex; text-decoration: none; }
.cifra a.det:hover { color: var(--tinta); }
.barra-medios { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--superficie-3); margin: var(--e-3) 0 var(--e-2); }
.barra-medios span { display: block; height: 100%; }
.barra-medios .m-efectivo { background: var(--tinta); }
.barra-medios .m-qr { background: var(--acento); }
.barra-medios .m-pendiente { background: var(--host-amarillo); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--e-4); font-size: var(--t-s); color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.revisar-aviso { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-l);
  background: var(--alerta-suave); border: 1px solid var(--alerta-borde); color: var(--alerta); text-decoration: none; margin-bottom: var(--e-5); }
.revisar-aviso .cuerpo { flex: 1; min-width: 0; }
.revisar-aviso strong { color: var(--tinta); }

/* --- Vender ------------------------------------------------------------------------------ */
.venta { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 1024px) { .venta { grid-template-columns: minmax(0, 1fr) 372px; gap: var(--e-6); } }
@media (min-width: 1360px) { .venta { grid-template-columns: minmax(0, 1fr) 400px; } }
.venta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.catalogo-cab { position: sticky; top: var(--barra-movil); z-index: 5; background: rgb(246 245 242 / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: var(--e-2) 0 var(--e-3); }
@media (min-width: 1024px) { .catalogo-cab { top: 0; padding-top: var(--e-2); } }
.catalogo { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }
@media (max-width: 599px) { .catalogo { grid-template-columns: 1fr; gap: var(--e-2); } }
.producto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 2px var(--e-3);
  min-height: 112px; padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--superficie);
  font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido); }
.producto:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.producto:active { transform: scale(.985); }
.producto .nombre { grid-column: 1 / -1; font-weight: 600; font-size: var(--t-m); line-height: 1.3; padding-right: 34px; }
.producto .pres { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tinta-3); }
.producto .precio { font: 600 var(--t-l)/1 var(--f-texto); align-self: end; font-variant-numeric: tabular-nums; }
.producto .stock { align-self: end; justify-self: end; font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; }
.producto .stock.bajo { color: var(--alerta); font-weight: 500; }
.producto .stock.neg { color: var(--error); font-weight: 500; }
.producto .en-carrito { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px;
  display: grid; place-items: center; background: var(--acento); color: var(--acento-sobre); font: 600 13px/1 var(--f-texto); animation: fundido .15s; }
.producto.elegido { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); background: linear-gradient(180deg, var(--acento-suave), var(--superficie) 70%); }
.producto:focus-visible { box-shadow: var(--foco); }
@media (max-width: 599px) {
  .producto { min-height: 0; grid-template-rows: auto auto; padding: var(--e-3) var(--e-4); }
  .producto .nombre { grid-column: 1; padding-right: 0; }
  .producto .pres { grid-column: 1; }
  .producto .precio { grid-column: 2; grid-row: 1; align-self: start; }
  .producto .stock { grid-column: 2; grid-row: 2; }
  .producto .en-carrito { top: -7px; right: -7px; }
}

/* Carrito: columna en computadora, hoja en celular */
.carrito { display: block; position: static; width: auto; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-2); background: var(--superficie); animation: none; }
@media (min-width: 1024px) {
  .carrito { position: sticky; top: var(--e-6); display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--e-6)); overflow: hidden; }
  .carrito .carrito-cuerpo { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1023px) {
  .carrito:not([open]) { display: none; }
  .carrito[open] { position: fixed; display: flex; flex-direction: column; overflow: hidden; }   /* hoja fija: no se corre con el catálogo desplazado */
  .carrito[open] .carrito-cuerpo { overflow-y: auto; }
}
.carrito-cab { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-3) var(--e-3) var(--e-5); border-bottom: 1px solid var(--linea); flex: none; }
.carrito-cab .titulo-carrito { flex: 1; min-width: 0; }
.carrito-cab h2 { font-size: var(--t-m); }
.carrito-cab .contexto-sede { margin-top: 2px; }
.carrito-cab .cerrar { display: none; }
@media (max-width: 1023px) { .carrito-cab .cerrar { display: inline-flex; } }
.carrito-cuerpo { padding: var(--e-1) var(--e-5) var(--e-5); flex: 1 1 auto; min-height: 0; }
.carrito-invitacion { display: grid; justify-items: center; text-align: center; gap: var(--e-2); padding: var(--e-10) var(--e-4) var(--e-8); color: var(--tinta-3); }
.carrito-invitacion .ic { width: 32px; height: 32px; color: var(--acento-texto); }
.carrito-invitacion strong { color: var(--tinta); font-weight: 600; font-size: var(--t-l); }
.carrito-invitacion p { margin: 0; font-size: var(--t-s); max-width: 30ch; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); animation: aparecer .16s ease-out; }
.linea .nombre { font-weight: 500; line-height: 1.3; }
.linea .unit { font-size: var(--t-s); color: var(--tinta-3); }
.linea .subtotal { font-weight: 600; text-align: right; align-self: start; padding-top: 1px; font-variant-numeric: tabular-nums; }
.linea .controles { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); }
.linea .falta { grid-column: 1 / -1; font-size: var(--t-s); color: var(--alerta); display: flex; gap: 6px; align-items: center; }
.paso { display: inline-flex; align-items: center; border: 1px solid var(--linea-fuerte); border-radius: var(--r); overflow: hidden; background: var(--superficie); }
.paso button { width: var(--toque); height: var(--toque); border: 0; background: none; color: var(--tinta); cursor: pointer; display: grid; place-items: center; transition: background-color var(--rapido); }
.paso button:hover { background: var(--superficie-3); }
.paso input { width: 48px; min-height: var(--toque); border: 0; border-inline: 1px solid var(--linea); border-radius: 0; text-align: center; padding: 0; font: 600 var(--t-m)/1 var(--f-texto); }
.paso input:focus { box-shadow: inset 0 0 0 2px var(--tinta); }
.quitar { margin-left: auto; }
.bloque { padding-top: var(--e-5); }
.bloque > .etiqueta, .bloque > legend.etiqueta { display: block; margin-bottom: var(--e-2); padding: 0; }
.motivo-stock { margin-top: var(--e-3); padding: var(--e-3); border-radius: var(--r); background: var(--alerta-suave); border: 1px solid var(--alerta-borde); }
.motivo-stock label { color: var(--alerta); }
.motivo-stock .ayuda { color: var(--alerta); }
.carrito-pie { padding: var(--e-3) var(--e-5) var(--e-4); border-top: 1px solid var(--linea); background: var(--superficie); flex: none; }
.precios-nuevos { margin: 0 0 var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--alerta-borde); border-radius: var(--r-m);
  background: var(--alerta-suave); color: var(--tinta); }
.precios-nuevos .pn-titulo { color: var(--alerta); }
.precios-nuevos .pn-titulo .ic { vertical-align: -2px; margin-right: 6px; }
.precios-nuevos .num, .precios-nuevos .tenue { white-space: nowrap; }
.precios-nuevos .pn-lista { list-style: none; margin: var(--e-2) 0; padding: 0; }
.precios-nuevos .pn-lista li { display: flex; justify-content: space-between; gap: var(--e-3); padding: 4px 0; }
.precios-nuevos .pn-lista s { color: var(--tinta-2); }
.precios-nuevos .pn-total { margin-bottom: var(--e-3); }
/* Mientras hay precios nuevos, el aviso dice el total y su botón es el siguiente paso. */
.carrito-pie:has(.precios-nuevos:not([hidden])) :is(.total-venta, #confirmar) { display: none; }
.precio-cambio { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: var(--alerta); font-size: var(--t-s); }
.precio-cambio .ic { flex: none; }
.total-venta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.total-venta .etiqueta { font-size: var(--t-m); }
.total-venta .valor { font: 700 1.75rem/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total-venta .resumen { font-size: var(--t-s); color: var(--tinta-3); text-align: right; }
.persona-elegida { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3); border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--superficie-2); }
.persona-elegida .cuerpo { flex: 1; min-width: 0; }
.sugerencias { margin-top: 6px; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--superficie); }
.sugerencias button { display: flex; width: 100%; align-items: center; gap: var(--e-3); min-height: var(--toque); padding: var(--e-2) var(--e-3);
  border: 0; border-top: 1px solid var(--linea); background: none; font: inherit; text-align: left; cursor: pointer; }
.sugerencias button:first-child { border-top: 0; }
.sugerencias button:hover, .sugerencias button:focus-visible { background: var(--superficie-2); }
.sugerencias .vacio-sug { padding: var(--e-3); font-size: var(--t-s); color: var(--tinta-3); margin: 0; }
details.mas summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); font-size: var(--t-s); font-weight: 500; color: var(--tinta-2); }
details.mas summary::-webkit-details-marker { display: none; }
details.mas summary .ic { transition: transform var(--rapido); width: 16px; height: 16px; }
details.mas[open] summary .ic { transform: rotate(90deg); }
details.mas[open] > :not(summary) { margin-top: var(--e-2); animation: aparecer .16s ease-out; }

/* Resultado de una venta */
.resultado { display: grid; justify-items: center; text-align: center; gap: var(--e-2); padding: var(--e-8) var(--e-5) var(--e-6); animation: aparecer .2s ease-out; }
.resultado .sello { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-suave); color: var(--ok); margin-bottom: var(--e-1); }
.resultado .sello .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.resultado h2 { font-size: var(--t-l); }
.resultado .monto { font: 700 2.25rem/1.05 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resultado .detalle { color: var(--tinta-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.resultado .nota { font-size: var(--t-s); color: var(--tinta-3); max-width: 34ch; margin: 0; }
.resultado .acciones-resultado { display: grid; gap: var(--e-2); width: 100%; margin-top: var(--e-4); }

/* Barra de resumen (celular) */
.barra-carrito { position: fixed; left: var(--e-3); right: var(--e-3); bottom: calc(var(--nav-movil) + env(safe-area-inset-bottom) + var(--e-2)); z-index: 15;
  display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: 0 var(--e-2) 0 var(--e-4); border-radius: var(--r-l);
  background: var(--tinta); color: #fff; box-shadow: var(--sombra-3); border: 0; font: inherit; text-align: left; cursor: pointer; animation: subir .2s ease-out; }
.barra-carrito .cuenta { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 14px; background: var(--acento); color: var(--acento-sobre); font: 600 13px/1 var(--f-texto); padding: 0 8px; }
.barra-carrito .txt { flex: 1; font-weight: 500; }
.barra-carrito .importe { font-size: var(--t-l); }
.barra-carrito .ir { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .12); }
.barra-carrito.oculta { display: none; }
@media (min-width: 1024px) { .barra-carrito { display: none !important; } }
.con-barra-carrito .contenido { padding-bottom: calc(var(--nav-movil) + 56px + var(--e-12) + env(safe-area-inset-bottom)); }

/* --- Cobrar ------------------------------------------------------------------------------ */
.persona-cab { display: flex; align-items: center; gap: var(--e-4); }
.deuda-total .valor { font: 700 2.25rem/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.por-sede { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.previa { margin-top: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; transition: opacity var(--rapido); }
.previa.desactualizada { opacity: .45; }
.previa-cab { padding: var(--e-2) var(--e-4); background: var(--superficie-2); border-bottom: 1px solid var(--linea); font-size: var(--t-s); color: var(--tinta-2); }
.previa .fila { min-height: 48px; padding: var(--e-2) var(--e-4); }
.previa-pie { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linea); background: var(--superficie-2); }
.rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-btn { min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--linea-fuerte); background: var(--superficie);
  font: 500 var(--t-s)/1 var(--f-texto); color: var(--tinta-2); cursor: pointer; transition: border-color var(--rapido), color var(--rapido); }
.chip-btn:hover { border-color: var(--tinta-3); color: var(--tinta); }
.chip-btn[aria-pressed="true"] { border-color: var(--acento-texto); color: var(--acento-texto); background: var(--acento-suave); font-weight: 600; }
.resultado-cobro { display: flex; gap: var(--e-3); align-items: flex-start; }

/* --- Caja -------------------------------------------------------------------------------- */
.caja-hero { display: grid; gap: var(--e-5); align-items: end; margin-bottom: var(--e-6); }
@media (min-width: 900px) { .caja-hero { grid-template-columns: minmax(0, 1fr) auto; } }
.caja-hero .valor { font: 700 2.75rem/1 var(--f-titulo); letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.caja-hero .det { color: var(--tinta-3); font-size: var(--t-s); margin-top: var(--e-2); }
.acciones-caja { display: grid; gap: var(--e-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .acciones-caja { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.accion { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e-3); min-height: 88px;
  padding: var(--e-3) var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--superficie); color: var(--tinta);
  font: 500 var(--t-m)/1.25 var(--f-texto); text-align: left; cursor: pointer; text-decoration: none; transition: border-color var(--rapido), box-shadow var(--rapido); }
.accion:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.accion .ic { width: 22px; height: 22px; color: var(--acento-texto); }
.accion small { display: block; font-size: var(--t-xs); color: var(--tinta-3); font-weight: 400; margin-top: 2px; }
.secundario { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r);
  background: var(--superficie-2); border: 1px solid var(--linea); color: var(--tinta-2); font-size: var(--t-s); }
.secundario .importe { color: var(--tinta); }
.secundario img { height: 16px; width: auto; }
.comparacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.comparacion > div { padding: var(--e-3); background: var(--superficie-2); min-width: 0; }
.comparacion > div + div { border-left: 1px solid var(--linea); }
.comparacion .etiqueta { display: block; font-size: var(--t-xs); color: var(--tinta-3); }
.comparacion .v { display: block; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diferencia { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); margin-bottom: var(--e-3); }
.qr-nota { display: flex; align-items: center; gap: var(--e-2); }
.qr-nota img { height: 16px; width: auto; }
.consolidado { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.consolidado .etq.sede { min-height: 30px; padding: 0 10px; font-size: var(--t-s); }

/* --- Paso a paso (corrección) ------------------------------------------------------------ */
.pasos-num { counter-reset: paso; }
.paso-num { position: relative; padding-left: 42px; }
.paso-num + .paso-num { margin-top: var(--e-6); }
.paso-num::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: -3px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--superficie-3); color: var(--tinta); font: 600 13px/1 var(--f-texto); }
.paso-num h2 { margin-bottom: var(--e-3); }
.opcion-larga { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  cursor: pointer; margin-bottom: var(--e-2); color: var(--tinta); transition: border-color var(--rapido), background-color var(--rapido); }
.opcion-larga input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acento-texto); flex: none; }
.opcion-larga small { display: block; color: var(--tinta-3); margin-top: 2px; }
.opcion-larga:hover { border-color: var(--acento-borde); }
.opcion-larga:has(input:checked) { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); background: var(--acento-suave); }
.opcion-larga:has(input:focus-visible) { box-shadow: var(--foco); }
.efecto { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.efecto > div { padding: var(--e-3) var(--e-4); border-radius: var(--r); border: 1px solid var(--linea); background: var(--superficie-2); }
.efecto .etiqueta { display: block; margin-bottom: 4px; }

/* --- Datos clave/valor ------------------------------------------------------------------- */
.datos-op { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: 0; }
.datos-op dt { font-size: var(--t-s); color: var(--tinta-3); }
.datos-op dd { margin: 2px 0 0; font-weight: 500; }

/* --- Stock ------------------------------------------------------------------------------- */
.stock-herramientas { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
@media (min-width: 760px) { .stock-herramientas { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.existencia { font: 600 var(--t-l)/1 var(--f-texto); font-variant-numeric: tabular-nums; }

/* --- Permisos ---------------------------------------------------------------------------- */
.grupo-permisos + .grupo-permisos { border-top: 1px solid var(--linea); }
.grupo-permisos > h3 { padding: var(--e-4) var(--e-5) var(--e-1); font-size: var(--t-s); color: var(--tinta-3); font-weight: 500; }
.permiso { display: grid; gap: var(--e-2) var(--e-4); align-items: center; padding: var(--e-3) var(--e-5); transition: background-color var(--rapido); }
.permiso.excepcion { background: var(--info-suave); box-shadow: inset 3px 0 0 var(--info); }
.permiso.cambiado { box-shadow: inset 3px 0 0 var(--host-amarillo); }
@media (min-width: 900px) { .permiso { grid-template-columns: minmax(0, 1fr) 330px; } }
.permiso .nombre-permiso { font-weight: 500; }
.permiso .estado-permiso { font-size: var(--t-s); color: var(--tinta-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.permiso .segmento { grid-auto-columns: auto; grid-template-columns: 1.5fr 1fr 1fr; }
.permiso .segmento label { font-size: var(--t-xs); padding: 0 6px; white-space: normal; line-height: 1.2; min-height: 40px; }
.barra-guardar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); background: rgb(255 255 255 / .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.barra-guardar .pendiente-guardar { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--alerta); font-weight: 500; }
@media (max-width: 1023px) { .barra-guardar { bottom: calc(var(--nav-movil) + env(safe-area-inset-bottom)); } }
.cuadricula-permisos { display: grid; }
@media (min-width: 760px) { .cuadricula-permisos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); } }

/* --- Ingreso ----------------------------------------------------------------------------- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: var(--e-6) var(--e-4); }
.ingreso-caja { width: min(100%, 380px); }
.ingreso-caja .logo-store { display: block; width: 168px; height: auto; margin: 0 auto var(--e-6); }
.ingreso-caja h1 { font-size: var(--t-xl); text-align: center; }
.ingreso-caja .bajada { text-align: center; margin: var(--e-2) auto var(--e-6); }
.ingreso-sedes { display: flex; justify-content: center; align-items: center; gap: var(--e-6); margin-top: var(--e-8); }
.ingreso-sedes img { height: 32px; width: auto; opacity: .9; }

/* --- Utilidades -------------------------------------------------------------------------- */
.entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.en-linea { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--e-2); } .mt-3 { margin-top: var(--e-3); } .mt-4 { margin-top: var(--e-4); } .mt-6 { margin-top: var(--e-6); } .mt-8 { margin-top: var(--e-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--e-2); } .mb-4 { margin-bottom: var(--e-4); } .mb-6 { margin-bottom: var(--e-6); }
.ancho-texto { max-width: 640px; }
.derecha-txt { text-align: right; }
.romper { overflow-wrap: anywhere; }
.auditoria-detalle { margin: var(--e-2) 0 0; padding: var(--e-3); background: var(--superficie-2); border-radius: var(--r-s);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.cambio { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 599px) { .solo-amplio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
details.ayuda-desplegable summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--t-s); color: var(--tinta-3); }
details.ayuda-desplegable summary::-webkit-details-marker { display: none; }
details.ayuda-desplegable[open] p { font-size: var(--t-s); color: var(--tinta-2); margin: var(--e-1) 0 var(--e-3); max-width: 62ch; animation: aparecer .16s ease-out; }

/* Configuración general (Administración) */
fieldset.grupo-permisos { border: 0; margin: 0; padding: 0 0 var(--e-2); min-width: 0; }
fieldset.grupo-permisos > legend { float: left; width: 100%; padding: var(--e-4) var(--e-5) var(--e-1); font-size: var(--t-s); color: var(--tinta-3); font-weight: 500; }
fieldset.grupo-permisos > legend + * { clear: both; }
fieldset.grupo-permisos .check { padding-inline: var(--e-5); }
.barra-guardar .cambios { font-size: var(--t-s); color: var(--alerta); font-weight: 500; }
.barra-guardar .cambios:empty::before { content: "Sin cambios"; color: var(--tinta-3); font-weight: 400; }
.permiso .segmento label { flex-direction: column; gap: 0; min-height: 44px; text-align: center; }
.permiso .segmento label small { font-weight: 400; color: var(--tinta-3); font-size: 11px; }

/* Caja v3 */
.caja-secundario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .caja-secundario { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.caja-secundario .filas { border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.h-chico { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); margin-bottom: var(--e-2); letter-spacing: 0; }
.consolidado-caja h2 { margin-bottom: var(--e-2); }
.cons-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 var(--e-3); border: 1px solid var(--linea);
  border-radius: var(--r-pill); background: var(--superficie); font-size: var(--t-s); }
.previa-ajuste { margin: 0 0 var(--e-4); padding: var(--e-3); border-radius: var(--r); background: var(--superficie-2); font-size: var(--t-s); color: var(--tinta-3); }
.previa-ajuste.listo { color: var(--tinta); }
.previa-ajuste.neg { color: var(--error); }
details.filtros-caja > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 44px; }
details.filtros-caja > summary::-webkit-details-marker { display: none; }
.fila.recien { background: var(--ok-suave); }
.caja-hero .acciones-caja { min-width: 0; }
@media (min-width: 900px) { .caja-hero .acciones-caja { width: 520px; } }
.accion { font: 600 var(--t-s)/1.25 var(--f-texto); text-align: left; cursor: pointer; }

/* Cobrar v3 */
.resultado-cobro-v3 { display: flex; gap: var(--e-4); align-items: flex-start; border-color: var(--ok-borde, var(--linea)); animation: aparecer .2s ease-out; }
.resultado-cobro-v3 .sello { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-suave); color: var(--ok); }
.resultado-cobro-v3 h2 { font-size: var(--t-l); margin-bottom: 4px; }
.resultado-cobro-v3 .cuerpo { min-width: 0; }
details.historial-plegable > summary { list-style: none; cursor: pointer; min-height: 52px; }
details.historial-plegable > summary::-webkit-details-marker { display: none; }
details.historial-plegable[open] > summary .ic { transform: rotate(180deg); }
details.historial-plegable > .filas { border-top: 1px solid var(--linea); }
.logo-mp { height: 18px; width: auto; }

/* Para revisar v3 */
.acciones-revision { flex: 1 1 340px; display: grid; gap: var(--e-3); }
.acciones-revision .corregir { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.acciones-revision .corregir:empty { display: none; }
.marcar-revisado { display: grid; gap: 6px; padding: var(--e-3); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); }
.marcar-revisado label { font-size: var(--t-s); font-weight: 500; }
.marcar-revisado input { flex: 1 1 auto; min-width: 0; }
.una-col { display: grid; gap: var(--e-4); max-width: 720px; }
@media (max-width: 599px) { .comparacion { grid-template-columns: 1fr; } .comparacion > div + div { border-left: 0; border-top: 1px solid var(--linea); } .comparacion > div { display: flex; justify-content: space-between; gap: var(--e-3); } .comparacion .v { margin-top: 0; } }

/* Celular: todo control táctil tiene al menos 44 px de alto. */
@media (max-width: 599px) {
  .btn, .btn.chico, .chip-btn, .segmento a, .segmento label, .vinculo, .ver-todo,
  details > summary, .cons-item, .rapidos button { min-height: 44px; }
  .btn.icono { min-width: 44px; }
}

/* Venta v3: opciones de pago compactas y ritmo vertical del carrito */
.bloque-medio > legend.etiqueta { display: block; margin-bottom: var(--e-2); padding: 0; }
.carrito .bloque { padding-top: var(--e-3); }
.carrito #bloque-persona { padding-top: var(--e-4); }
.carrito .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carrito .opcion { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center;
  min-height: 56px; padding: 10px 34px 10px 12px; line-height: 1.25; }
.carrito .opcion > .ic, .carrito .opcion > .logo-mp { grid-row: 1 / span 2; margin: 0; }
.carrito .opcion > .logo-mp { width: 22px; height: auto; object-fit: contain; }
.carrito .opcion small { grid-column: 2; }
.carrito .opcion:has(input:checked)::after { top: 50%; margin-top: -9px; }
.carrito .motivo-stock input { font-size: var(--t-m); }
.estado-ok { font-size: var(--t-xs); color: var(--tinta-3); }
@media (min-width: 900px) { .caja-hero .acciones-caja { width: auto; display: flex; } .caja-hero .accion { width: 128px; } }
@media (max-width: 599px) {
  .seccion-cab { flex-wrap: wrap; }
  .seccion-cab > .segmento { flex: 1 1 100%; }
  .acciones-caja .accion { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 60px; gap: var(--e-3); }
}
@media (max-width: 599px) { .segmento a, .segmento label { white-space: normal; text-align: center; line-height: 1.2; } }

/* ==========================================================================================
   v4 · Componentes compartidos
   Superficies por función: .lista (contenido navegable, blanca), .panel (resumen o vínculo, teñida
   con el acento de la sede, sin borde), .tarjeta.elevada (la tarea principal de la pantalla).
   ========================================================================================== */
.panel { border-radius: var(--r-l); background: var(--acento-suave); padding: var(--e-4) var(--e-5); min-width: 0; }
.panel.alerta { background: var(--alerta-suave); }
.panel.neutro { background: var(--superficie-3); }
.panel + .panel, .panel + .lista, .lista + .panel, .lista + .lista, .lista + details.lista, details.lista + .lista { margin-top: var(--e-4); }
.panel .h-chico { display: flex; align-items: center; gap: 6px; color: var(--tinta); }
.tarjeta.elevada { border-color: transparent; box-shadow: var(--sombra-2); }

.lista { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; overflow: clip; min-width: 0; }
.lista-cab { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); padding: var(--e-4) var(--e-5) var(--e-3); }
.lista-cab h2 { flex: 1; min-width: 0; font-size: var(--t-m); }
.lista-cuerpo { padding: 0 var(--e-5) var(--e-4); }
.lista-cuerpo.borde-arriba { border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.lista > .filas { border-top: 1px solid var(--linea); }
.lista > .tabla { border-top: 1px solid var(--linea); }
.lista-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); background: var(--superficie-2); font-size: var(--t-s); color: var(--tinta-2); }
.total-linea .importe { font-size: var(--t-l); color: var(--tinta); margin-left: 6px; }
.sub-cab { display: flex; align-items: center; gap: 6px; padding: var(--e-3) var(--e-5) var(--e-2); font: 500 var(--t-s)/1.3 var(--f-texto);
  color: var(--tinta-3); border-top: 1px solid var(--linea); margin: 0; background: var(--superficie-2); }
.sub-cab + .filas > li:first-child > .fila, .sub-cab + .filas > .fila:first-child { border-top: 1px solid var(--linea); }
details.plegable > summary { list-style: none; cursor: pointer; min-height: 52px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary .gira { transition: transform var(--rapido); color: var(--tinta-3); }
details.plegable[open] > summary .gira { transform: rotate(180deg); }
details.plegable > summary:hover h2 { color: var(--acento-texto); }
@media (max-width: 599px) {
  .lista-cab { padding: var(--e-4) var(--e-4) var(--e-3); } .lista-cuerpo { padding: 0 var(--e-4) var(--e-4); }
  .lista-pie, .sub-cab { padding-inline: var(--e-4); }
}

/* Efecto de una operación: el color acompaña, el texto explica */
.importe.efecto-entra { color: var(--ok); }
.importe.efecto-sale { color: #7a4f1d; }
.importe.efecto-alerta, .importe.efecto-neutro, .importe.efecto-stock-i { color: var(--tinta); }
.fila .efecto { display: block; font-size: var(--t-xs); color: var(--tinta-3); margin-top: 3px; white-space: nowrap; }
.fila.mov .derecha { min-width: 92px; }
.etq.efecto-etq.entra { background: var(--ok-suave); color: var(--ok); }
.etq.efecto-etq.sale { background: #f6efe6; color: #7a4f1d; }
.etq.efecto-etq.acento { background: var(--acento-suave); color: var(--acento-texto); }
.etq.efecto-etq.stock-i { background: var(--info-suave); color: var(--info); }
.etq.efecto-etq.neutro { background: var(--superficie-3); color: var(--tinta-2); }
.fila-icono.neutro { background: var(--superficie-3); color: var(--tinta-2); }
.fila-icono.grande { width: 52px; height: 52px; border-radius: 16px; }
.fila-icono.grande .ic { width: 24px; height: 24px; }
.dif { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dif.mas { color: var(--ok); }
.dif.menos { color: #8a3b12; }
.cantidad-chip { min-width: 36px; height: 32px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--acento-suave); color: var(--acento-texto); font: 600 var(--t-s)/1 var(--f-texto); font-variant-numeric: tabular-nums; }
.grande-txt { font-size: var(--t-xl); }
.fila.mini { min-height: 52px; padding: var(--e-2) var(--e-3); margin-top: var(--e-2); border: 0; border-radius: var(--r); background: rgb(255 255 255 / .7); }
.panel .filas .fila.mini { margin-top: var(--e-2); }
.panel a.fila.mini:hover { background: var(--superficie); }

/* Movimientos */
.filtros-mov { display: flex; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-3); }
.pildoras { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px; margin: -2px; }
.pildoras::-webkit-scrollbar { display: none; }
.pildoras a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--e-4); border-radius: var(--r-pill);
  border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta-2); font: 500 var(--t-s)/1 var(--f-texto);
  text-decoration: none; transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido); }
.pildoras a:hover { border-color: var(--acento-borde); color: var(--tinta); }
.pildoras a[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 600; }
.mas-filtros { flex: none; position: relative; }
.mas-filtros > summary { list-style: none; }
.mas-filtros > summary::-webkit-details-marker { display: none; }
.mas-filtros[open] > summary { background: var(--acento-suave); border-color: var(--acento-borde); }
.cuenta-filtros { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--acento-texto); color: #fff; font-size: 11px; font-weight: 600; }
.panel-filtros { position: absolute; right: 0; top: calc(100% + 8px); z-index: 12; width: min(560px, calc(100vw - 2 * var(--e-4)));
  padding: var(--e-5); border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-3); animation: aparecer .16s ease-out; }
@media (max-width: 719px) {
  .filtros-mov { flex-direction: column; align-items: stretch; }
  .pildoras { width: 100%; max-width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
  .pildoras a { min-height: 44px; }
  .mas-filtros > summary { width: 100%; }
  .panel-filtros { position: static; width: auto; margin-top: var(--e-2); box-shadow: none; }
}
.filtros-activos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--e-3); padding: 0; }
.filtros-activos a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border-radius: var(--r-pill);
  background: var(--acento-suave); color: var(--acento-texto); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.filtros-activos a:hover { box-shadow: inset 0 0 0 1px var(--acento-borde); }
.filtros-activos a.limpiar { background: none; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.dia + .dia { margin-top: var(--e-5); }
.dia-cab { font: 700 11px/1.2 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 var(--e-2) var(--e-1); }
.lista.filas, ul.filas.lista { background: var(--superficie); }

/* Detalle de operación */
.op-cab { margin-bottom: var(--e-6); }
.op-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2) var(--e-4); align-items: start; }
.op-titulos h1 { font-size: var(--t-xl); line-height: 1.2; }
@media (min-width: 600px) { .op-titulos h1 { font-size: var(--t-2xl); } }
.op-titulos .ceja { margin-bottom: 6px; }
.op-importe { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-2); }
.op-importe .valor { font: 700 var(--t-2xl)/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.op-importe .valor.efecto-entra { color: var(--ok); }
.op-importe .valor.efecto-sale { color: #7a4f1d; }
@media (min-width: 900px) {
  .op-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  .op-importe { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; margin-top: 4px; }
  .op-importe .valor { font-size: var(--t-3xl); }
}
.op-datos { display: grid; gap: var(--e-3) var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); margin: var(--e-5) 0 0;
  padding: var(--e-4) 0 0; border-top: 1px solid var(--linea); }
.op-datos dt { font-size: var(--t-xs); color: var(--tinta-3); }
.op-datos dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.op-datos .ancho-completo { grid-column: 1 / -1; }
.panel .op-datos { border-top-color: rgb(29 29 27 / .08); }
.op-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-4); }
.op-cuerpo { display: grid; gap: var(--e-4); max-width: 820px; }
.op-cuerpo > * + * { margin-top: 0 !important; }
.vinculo-correccion { margin-bottom: var(--e-4); max-width: 820px; }
.panel-form { margin-top: var(--e-3); padding: var(--e-4); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); }

/* Transferencias: origen → destino y pasos */
.ruta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--e-2); }
.ruta-sede { position: relative; display: grid; gap: 2px; padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 6px); border-radius: var(--r);
  background: var(--superficie-2); border: 1px solid var(--linea); min-width: 0; }
.ruta-sede::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--c, var(--tinta-3)); }
.ruta-sede[data-sede="VB"] { --c: var(--host-cian); }
.ruta-sede[data-sede="ORF"] { --c: var(--host-magenta); }
.ruta-sede strong { font-weight: 600; overflow-wrap: anywhere; }
.ruta-et { font-size: var(--t-xs); color: var(--tinta-3); }
.ruta-flecha { display: grid; place-items: center; color: var(--tinta-3); }
.linea-tiempo { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: 0; }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-3); padding-bottom: var(--e-4); }
.linea-tiempo li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--linea); }
.linea-tiempo .hito { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3); color: var(--tinta-2); }
.linea-tiempo .hito .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.linea-tiempo .hecho .hito { background: var(--ok-suave); color: var(--ok); }
.linea-tiempo .actual .hito { background: var(--info-suave); color: var(--info); box-shadow: 0 0 0 4px rgb(45 74 102 / .08); }
.linea-tiempo strong { display: block; font-weight: 600; padding-top: 3px; }
.linea-tiempo .meta { display: block; font-size: var(--t-s); color: var(--tinta-3); }

/* Productos */
.herramientas-lista { display: grid; gap: var(--e-3); margin-bottom: var(--e-3); }
@media (min-width: 760px) { .herramientas-lista { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.cuenta-seg { font-weight: 400; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.codigo { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--tinta-2);
  background: var(--superficie-3); padding: 3px 6px; border-radius: 5px; }
.producto-fila .titulo { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.producto-fila.apagada .titulo { color: var(--tinta-2); }
.por-sede-prod { display: flex; gap: var(--e-2); flex: none; }
.sede-prod { position: relative; display: grid; gap: 1px; min-width: 128px; padding: 6px 10px 6px 14px; border-radius: var(--r-s);
  background: var(--superficie-2); font-size: var(--t-s); text-align: left; }
.sede-prod::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--c, var(--tinta-3)); }
.sede-prod[data-sede="VB"] { --c: var(--host-cian); } .sede-prod[data-sede="ORF"] { --c: var(--host-magenta); }
.sede-prod.no-vende::before { background: var(--linea-fuerte); }
.sede-prod .sede-nombre { font-size: var(--t-xs); color: var(--tinta-3); }
.sede-prod .importe { font-size: var(--t-m); }
.stock-mini { font-size: var(--t-xs); color: var(--tinta-3); }
.stock-mini.bajo { color: var(--alerta); font-weight: 500; }
.stock-mini.neg { color: var(--error); font-weight: 500; }
@media (max-width: 719px) {
  .producto-fila { flex-wrap: wrap; }
  .producto-fila .cuerpo { flex: 1 1 calc(100% - 40px); }
  .producto-fila .chev { order: 2; }
  .por-sede-prod { order: 3; flex: 1 1 100%; }
  .sede-prod { flex: 1 1 0; min-width: 0; }
}
.sedes-prod { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sede-card { position: relative; padding: var(--e-4) var(--e-5) var(--e-4) calc(var(--e-5) + 4px); border-radius: var(--r-l); background: var(--superficie);
  border: 1px solid var(--linea); overflow: hidden; }
.sede-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c, var(--tinta-3)); }
.sede-card[data-sede="VB"] { --c: var(--host-cian); } .sede-card[data-sede="ORF"] { --c: var(--host-magenta); }
.sede-card.apagada { background: var(--superficie-2); }
.sede-card.apagada::before { background: var(--linea-fuerte); }
.sede-card-nombre { font-weight: 600; }
.sede-card-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--e-3); margin: var(--e-3) 0 0; }
.sede-card-datos dt { font-size: var(--t-xs); color: var(--tinta-3); }
.sede-card-datos dd { margin: 2px 0 0; font-weight: 500; }
.cifra-m { font: 700 var(--t-xl)/1.1 var(--f-titulo) !important; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.form-sede { flex-wrap: wrap; align-items: flex-end; }
.form-sede .cuerpo { display: grid; gap: 4px; justify-items: start; }
.form-sede .check { min-height: 40px; padding: 4px 0; }
.form-sede .minimo { margin: 0; width: 150px; }
.form-sede .ancho-completo { flex: 1 1 100%; }
@media (max-width: 599px) { .form-sede .minimo { flex: 1 1 auto; width: auto; } }
.separador { height: 1px; background: rgb(29 29 27 / .08); margin: var(--e-4) 0; }
.pie-form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.formulario-guiado { max-width: 640px; }
.formulario-guiado .campo + .campo, .formulario-guiado .campo + fieldset, .formulario-guiado fieldset + .campo { margin-top: var(--e-5); }

/* Corrección */
.panel.original { margin-bottom: var(--e-4); max-width: 820px; background: var(--superficie-3); }
.original-titulo { font: 600 var(--t-l)/1.3 var(--f-texto); margin: var(--e-2) 0 0; }
.panel.original .op-datos { margin-top: var(--e-3); }
.original-lineas { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 6px; }
.original-lineas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; font-size: var(--t-s); }
.original-lineas .cantidad-chip { background: var(--superficie); color: var(--tinta); height: 28px; min-width: 32px; }
.correccion-form { max-width: 820px; }
fieldset.paso-num { border: 0; margin: 0; padding: 0 0 0 42px; min-width: 0; }
fieldset.paso-num > legend { padding: 0; float: left; width: 100%; }
fieldset.paso-num > legend + * { clear: both; }
.paso-num::before { background: var(--acento-suave); color: var(--acento-texto); }
.paso-num + .paso-num { padding-top: var(--e-6); border-top: 1px solid var(--linea); margin-top: var(--e-6); }
.paso-num + .paso-num::before { top: calc(var(--e-6) - 3px); }
.opcion-larga strong { display: block; font-weight: 600; }
.corregir-lineas { border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.corregir-lineas .fila { padding: var(--e-3) var(--e-4); flex-wrap: wrap; }
.campo-real { display: grid; gap: 4px; width: 132px; }
.campo-real label { font-size: var(--t-xs); }
.campo-real input { text-align: center; font-weight: 600; }
@media (max-width: 599px) { fieldset.paso-num, .paso-num { padding-left: 0; } .paso-num::before { position: static; margin-bottom: var(--e-2); }
  .paso-num + .paso-num::before { top: auto; } .campo-real { width: 100%; } }
.efecto-resumen { padding: var(--e-4); border-radius: var(--r); background: var(--acento-suave); }
.efecto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.efecto-lista li { position: relative; padding-left: 22px; }
.efecto-lista li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--acento-texto); }
.efecto-lista li.falta { color: var(--alerta); }
.efecto-lista li.falta::before { background: var(--host-amarillo); }

/* Flujos de stock: recepción, transferencia, conteo */
.destino { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-3); margin-bottom: var(--e-5);
  padding: var(--e-4) var(--e-5) var(--e-4) calc(var(--e-5) + 6px); border-radius: var(--r-l); background: var(--acento-suave); }
.destino::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 5px; border-radius: 3px; background: var(--acento); }
.destino-et { font-size: var(--t-s); color: var(--acento-texto); font-weight: 500; }
.destino strong { font: 700 var(--t-xl)/1.15 var(--f-titulo); letter-spacing: -.015em; }
.destino .vinculo { margin-left: auto; min-height: 44px; }
.flujo { display: grid; gap: var(--e-4); max-width: 820px; }
.flujo > .tarjeta + .tarjeta { margin-top: 0; }
.paso-flujo-cab { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.paso-flujo-cab h2 { flex: 1; }
.num-paso { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--acento-suave); color: var(--acento-texto); font: 700 13px/1 var(--f-titulo); }
.resultados-prod { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.resultado-prod { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 56px; padding: var(--e-2) var(--e-3); border-radius: var(--r);
  border: 1px solid var(--linea); background: var(--superficie-2); font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--rapido), background-color var(--rapido); }
.resultado-prod:hover { border-color: var(--acento-borde); background: var(--superficie); }
.resultado-prod .cuerpo { flex: 1; min-width: 0; display: grid; }
.resultado-prod strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-prod small { color: var(--tinta-3); font-size: var(--t-xs); }
.resultado-prod .agregar { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--acento-texto); white-space: nowrap; }
.resultado-prod.ya { background: var(--acento-suave); border-color: transparent; }
.resultado-prod.ya .agregar { color: var(--tinta-3); font-weight: 500; }
.sin-resultados { padding: var(--e-3); font-size: var(--t-s); color: var(--tinta-3); grid-column: 1 / -1; }
.sub-cab-flujo { font: 500 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-3); margin: var(--e-5) 0 var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.lineas-arm { display: grid; gap: var(--e-2); }
.linea-arm { padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border-radius: var(--r); border: 1px solid var(--acento-borde); background: var(--superficie);
  box-shadow: inset 3px 0 0 var(--acento); animation: aparecer .16s ease-out; }
.linea-arm-cab { display: flex; align-items: flex-start; gap: var(--e-2); }
.linea-arm-cab .cuerpo { flex: 1; min-width: 0; display: grid; padding-top: 4px; }
.linea-arm-cab strong { font-weight: 600; }
.linea-arm-cab small { color: var(--tinta-3); font-size: var(--t-s); }
.linea-arm-campos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2) var(--e-4); margin-top: var(--e-2); }
.linea-arm-campos .campo { margin: 0; }
.linea-arm-campos select { width: auto; min-width: 150px; }
.linea-arm .paso input { width: 64px; }
.nota-linea { margin-top: 4px; min-height: 1em; }
.costo-linea { flex: 1 1 200px; }
.costo-linea .campo-importe { max-width: 220px; }
.sin-lineas { display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-4); border-radius: var(--r); border: 1px dashed var(--linea-fuerte);
  color: var(--tinta-3); font-size: var(--t-s); }
.opciones.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 339px) { .opciones.dos { grid-template-columns: 1fr; } }
.confirmacion { display: grid; justify-items: center; text-align: center; gap: var(--e-2); max-width: 640px; padding: var(--e-8) var(--e-6); animation: aparecer .2s ease-out; }
.confirmacion:focus { outline: none; }
.sello { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-suave); color: var(--ok); animation: marcar .3s ease-out; }
.sello .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.confirmacion h2 { font: 700 var(--t-xl)/1.2 var(--f-titulo); }
.confirmacion-dato { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.resumen-lineas { width: 100%; text-align: left; border: 1px solid var(--linea); border-radius: var(--r); margin: var(--e-3) 0 var(--e-2); overflow: hidden; }
.resumen-lineas .fila { min-height: 48px; padding: var(--e-2) var(--e-4); }
.resumen-lineas .cantidad-chip { background: var(--ok-suave); color: var(--ok); }
.confirmacion-pago { font-size: var(--t-s); color: var(--tinta-2); display: flex; gap: 6px; align-items: center; margin: 0; }
.acciones-confirmacion { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-4); }
@media (max-width: 599px) { .acciones-confirmacion { display: grid; width: 100%; } .confirmacion { padding: var(--e-6) var(--e-4); } }
.panel.explicacion { margin-bottom: var(--e-5); max-width: 820px; }
.conteo-herr { max-width: 820px; }
.progreso-conteo { margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--acento-texto); white-space: nowrap; }
.conteo-lista { max-width: 820px; }
.conteo-fila { flex-wrap: wrap; }
.conteo-fila .cuerpo { flex: 1 1 220px; }
.conteo-fila.bloqueada { background: var(--superficie-2); }
.contar { display: grid; grid-template-columns: 96px auto; grid-template-rows: auto auto; gap: 4px var(--e-2); align-items: center; }
.contar input { text-align: center; font-weight: 600; }
.contar input::placeholder { font-weight: 400; font-size: var(--t-s); }
.estado-conteo { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--tinta-3); }
.conteo-fila.contada .estado-conteo { color: var(--ok); font-weight: 500; }
.conteo-fila.difiere .estado-conteo { color: #8a3b12; font-weight: 600; }
.conteo-fila.invalida .estado-conteo { color: var(--error); font-weight: 600; }
.conteo-fila.contada { box-shadow: inset 3px 0 0 var(--ok); }
.conteo-fila.difiere { box-shadow: inset 3px 0 0 #d9822b; }
@media (max-width: 599px) { .contar { grid-template-columns: minmax(0, 1fr) auto; width: 100%; } }
.barra-confirmar { position: sticky; bottom: var(--e-3); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3);
  max-width: 820px; margin-top: var(--e-4); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5); border-radius: var(--r-l);
  background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sombra-3); border: 1px solid var(--linea); }
.barra-confirmar .aviso { flex: 1 1 100%; }
.barra-confirmar-txt { flex: 1 1 260px; font-size: var(--t-s); color: var(--tinta-2); }
@media (max-width: 1023px) { .barra-confirmar { bottom: calc(var(--nav-movil) + env(safe-area-inset-bottom) + var(--e-2)); } }
@media (max-width: 599px) { .barra-confirmar { padding: var(--e-3); } .barra-confirmar .en-linea { width: 100%; } .barra-confirmar .en-linea .btn { flex: 1 1 auto; } }
.recibir-lineas { border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.recibir-lineas .fila { flex-wrap: wrap; padding: var(--e-3) var(--e-4); }
.recibir-lineas .cuerpo { flex: 1 1 200px; }
.campo-recibido { display: flex; align-items: center; gap: var(--e-3); }
.estado-recibido { min-width: 92px; font-size: var(--t-s); }
.previa-pasos { margin-top: var(--e-4); }
.previa-pasos .hito { font: 700 12px/1 var(--f-titulo); }
.zona-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5);
  border-radius: var(--r-l); border: 1px dashed var(--linea-fuerte); background: var(--superficie-2); }
.zona-admin > div { flex: 1 1 280px; }
.previa-ajuste strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.en-camino .lista-cab h2 { display: flex; align-items: center; gap: 6px; }

/* Venta v4: medios de pago en una composición pareja (3 en fila; 2 × 2 con cortesía), igual en computadora y celular */
.carrito .opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.carrito .opciones:has(> .opcion:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carrito .opcion { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  min-height: 84px; padding: 10px 10px 10px 12px; line-height: 1.2; font-size: var(--t-s); }
.carrito .opcion > .ic { margin: 0 0 4px; width: 20px; height: 20px; }
.carrito .opcion small { font-size: 11px; }
.carrito .opcion:has(input:checked)::after { top: 8px; right: 8px; margin-top: 0; }
#ayuda-qr { display: flex; gap: 6px; align-items: flex-start; }
#ayuda-qr[hidden] { display: none; }

/* Celular: los títulos de operación usan hasta dos líneas antes de recortarse. */
@media (max-width: 599px) {
  .fila .titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}
@media (max-width: 599px) {
  .en-camino .fila { flex-wrap: wrap; }
  .en-camino .fila .cuerpo { flex: 1 1 calc(100% - 64px); }
  .en-camino .fila .derecha { flex: 1 1 100%; text-align: left; padding-left: 56px; }
  .en-camino .fila .derecha .btn { width: 100%; }
}
.lista.en-camino { margin-bottom: var(--e-5); }

/* v4.1 · Prueba con el equipo: recorridos más cortos en celular ------------------------------- */
.intro-corta { max-width: 820px; margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r-l);
  background: var(--acento-velo); border: 1px solid var(--acento-borde); color: var(--tinta-2); }
.intro-corta details { margin-top: var(--e-1); }
.intro-corta .efecto-lista { margin: var(--e-1) 0 var(--e-2); font-size: var(--t-s); }
@media (max-width: 599px) {
  .solo-escritorio { display: none !important; }
  /* Barra de guardar del conteo: una sola fila, texto corto a la izquierda y el botón a la derecha. */
  .barra-confirmar { flex-wrap: nowrap; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3); border-radius: var(--r); }
  .barra-confirmar-txt { flex: 1 1 auto; min-width: 0; font-size: var(--t-xs); line-height: 1.3; }
  .barra-confirmar .en-linea { width: auto; flex: none; }
  .barra-confirmar .en-linea .btn { flex: none; }
  .barra-confirmar .aviso { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--e-2)); }
}
/* Mientras se escribe en celular, la barra inferior se oculta para dejar a la vista el campo
   (el teclado del teléfono ocupa ese lugar). Vuelve al salir del campo. */
@media (max-width: 1023px) {
  body.escribiendo .nav-movil { display: none; }
  body.escribiendo .barra-confirmar { bottom: var(--e-2); }
}
@media (max-width: 599px) {
  /* Recepción y transferencia: menos aire y destino en una línea. */
  .flujo { gap: var(--e-3); }
  .flujo .tarjeta.paso-flujo { padding: var(--e-4); }
  .paso-flujo-cab { margin-bottom: var(--e-3); }
  .destino { flex-wrap: nowrap; align-items: center; margin-bottom: var(--e-3); padding: var(--e-2) var(--e-3) var(--e-2) calc(var(--e-4) + 6px); }
  .destino::before { top: 10px; bottom: 10px; }
  .destino strong { font-size: var(--t-l); }
  .destino .vinculo { white-space: nowrap; font-size: var(--t-xs); }
  .sin-lineas { padding: var(--e-3); }
  /* Corrección: el número de paso va junto al título, no en su propia línea. */
  fieldset.paso-num > legend, .paso-num > h2 { padding-left: 38px; }
  .paso-num::before { position: absolute; left: 0; top: -2px; margin: 0; }
  .paso-num + .paso-num { padding-top: var(--e-5); margin-top: var(--e-5); }
  .paso-num + .paso-num::before { top: calc(var(--e-5) - 2px); }
  .paso-num h2 { margin-bottom: var(--e-2); }
  .correccion-form { padding: var(--e-4); }
  .panel.original { padding: var(--e-4); }
  .panel.original .op-datos { gap: var(--e-2) var(--e-4); }
  /* Inicio: cifras en filas compactas (dato a la izquierda, importe a la derecha) y 3 movimientos. */
  .resumen-cifras > div { padding: var(--e-3) var(--e-4); }
  .cifra { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-3); align-items: baseline; }
  .cifra .etiqueta { margin: 0; grid-column: 1; grid-row: 1; }
  .cifra .valor { grid-column: 2; grid-row: 1; font-size: var(--t-xl); text-align: right; }
  .cifra .det, .cifra .leyenda, .cifra .entre { grid-column: 1 / -1; }
  .cifra .det { margin-top: 2px; }
  .cifra .leyenda { margin-top: var(--e-1) !important; }
  .actividad-inicio > :nth-child(n+4) { display: none; }
}
@media (max-width: 599px) { .destino-et, .destino strong { white-space: nowrap; } .destino strong { overflow: hidden; text-overflow: ellipsis; min-width: 0; } }
.destino { max-width: 820px; }

/* v4.2 · Inicio como resumen de la operación ------------------------------------------------
   Tres bloques: lo que pasó en el período (blanco), los saldos de ahora (fondo cálido, no dependen
   del período) y lo que hay que atender. Importes alineados a la derecha para compararlos. */
.panorama { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .panorama { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--e-5);
    grid-template-areas: "periodo ahora" "periodo atender" "reciente atender"; grid-template-rows: auto auto 1fr; }
  .panorama .periodo { grid-area: periodo; }
  .panorama .ahora { grid-area: ahora; }
  .panorama .atender { grid-area: atender; }
  .panorama .reciente { grid-area: reciente; }
}
.bloque-resumen { min-width: 0; padding: var(--e-5); border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--linea); }
.bloque-resumen.ahora { background: var(--superficie-3); border-color: var(--linea); }
.bloque-resumen.atender { background: var(--superficie-2); }
.bloque-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.bloque-cab h2 { margin: 0; }
.bloque-sub { margin: 2px 0 0; font-size: var(--t-s); color: var(--tinta-3); }
.periodos { margin-bottom: var(--e-2); }
.fechas-periodo > summary { display: none; }
.fechas-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); padding: var(--e-3) 0 var(--e-1); }
.fechas-form .campo { flex: 1 1 140px; margin: 0; }
.fechas-form .btn { flex: none; }

.libro { display: grid; }
.libro-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); align-items: baseline;
  padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
.libro-fila:first-child { border-top: 0; padding-top: var(--e-1); }
.ahora .libro-fila { border-color: var(--linea-fuerte); }
.libro-dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.libro-et { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 32px;
  font: 600 var(--t-m)/1.25 var(--f-texto); color: var(--tinta); text-decoration: none; }
.libro-et .ic { color: var(--tinta-3); transition: transform var(--rapido); }
a.libro-et:hover .ic { transform: translateX(2px); color: var(--tinta); }
.libro-det { font-size: var(--t-s); color: var(--tinta-3); }
.libro-det a { color: var(--tinta-2); }
.libro-det.medios { display: flex; flex-wrap: wrap; gap: 4px var(--e-4); }
.libro-det.medios a { text-decoration: none; color: var(--tinta-2); display: inline-flex; gap: 5px; align-items: baseline; }
.libro-det.medios a strong { color: var(--tinta); font-weight: 600; }
.libro-det.medios a:hover { text-decoration: underline; }
.libro-valor { font: 700 var(--t-xl)/1.1 var(--f-titulo); letter-spacing: -.015em; text-align: right; white-space: nowrap; }
.por-sede, .desglose { grid-column: 1 / -1; }
.por-sede { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: 2px; }
.por-sede li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 32px; font-size: var(--t-s); }
.por-sede a.num { color: var(--tinta-2); font-weight: 600; text-decoration: none; padding: 4px 0; }
.por-sede a.num:hover { color: var(--tinta); text-decoration: underline; }
.desglose { margin-top: var(--e-1); }
.desglose > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--t-s);
  color: var(--tinta-2); cursor: pointer; }
.desglose > summary::-webkit-details-marker { display: none; }
.desglose > summary .ic { transition: transform var(--rapido); color: var(--tinta-3); }
.desglose[open] > summary .ic { transform: rotate(90deg); }
.desglose ul { list-style: none; margin: var(--e-1) 0 0; padding: var(--e-2) var(--e-3); border-radius: var(--r); background: var(--superficie-2);
  border: 1px solid var(--linea); display: grid; gap: 2px; }
.desglose li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 32px; font-size: var(--t-s); }
.desglose li a { color: var(--tinta); }
.desglose li .num { font-weight: 600; }
.desglose li.aparte { border-top: 1px dashed var(--linea-fuerte); margin-top: var(--e-1); padding-top: var(--e-1); color: var(--tinta-3); }
.desglose li.aparte a { color: var(--tinta-2); }

.atender-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.atender-lista > li > a, .atender-lista > li > .fila-atender { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3); border-radius: var(--r);
  background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 500; font-size: var(--t-m); }
.atender-lista > li > a:hover { border-color: var(--linea-fuerte); }
.atender-lista > li > :is(a, .fila-atender) > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.atender-lista .ic { color: var(--alerta); flex: none; }
.atender-lista .cuenta { flex: none; min-width: 26px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--alerta-suave);
  color: var(--alerta); font: 600 var(--t-s)/1.3 var(--f-texto); text-align: center; }
.productos-reponer { list-style: none; margin: var(--e-1) 0 0; padding: 0 var(--e-3); display: grid; }
.productos-reponer li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px var(--e-3);
  min-height: 36px; font-size: var(--t-s); border-bottom: 1px solid var(--linea); }
.productos-reponer li:last-child { border-bottom: 0; }
.productos-reponer a { color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; }
.productos-reponer .num { color: var(--tinta-3); }
.productos-reponer .negativo { color: var(--error); font-weight: 600; }
.atender-ok { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-s); color: var(--ok); }
.reciente .seccion-cab { margin-top: 0; }
.inicio-cab .contexto .etq { vertical-align: 1px; }

@media (max-width: 599px) {
  .panorama { gap: var(--e-3); }
  .bloque-resumen { padding: var(--e-4); }
  .periodos a { padding: 0 4px; }
  .libro-et { min-height: 40px; }
  .libro-fila { padding: var(--e-2) 0; }
  .libro-valor { font-size: var(--t-xl); }
  .por-sede li, .desglose li { min-height: 40px; }
  .desglose > summary { min-height: 40px; }
  .libro-det.medios a { min-height: 32px; align-items: center; }
  .productos-reponer li { min-height: 44px; }
  .fechas-form .campo { flex-basis: calc(50% - var(--e-2)); }
  .fechas-form .btn { flex: 1 1 100%; }
}
.atender-lista > li > .fila-atender { background: transparent; border-color: transparent; padding-left: var(--e-1); }

/* v4.3 · Menos ruido visual ------------------------------------------------------------------
   Navegación: cuatro tareas a la vista; el resto agrupado en «Más» y «Administración». */
.sede-actual .datos small { color: var(--tinta-3); font-weight: 500; }
.sede-actual .cambiar { font-size: var(--t-xs); font-weight: 600; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 2px; }
.grupo-nav { border-top: 1px solid var(--linea); padding-top: var(--e-2); }
.grupo-nav + .grupo-nav { border-top: 0; padding-top: 0; }
.grupo-nav > summary { list-style: none; position: relative; display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3);
  border-radius: var(--r-s); color: var(--tinta-2); font-weight: 500; cursor: pointer; }
.grupo-nav > summary::-webkit-details-marker { display: none; }
.grupo-nav > summary .txt { flex: 1; }
.grupo-nav > summary .ic { color: var(--tinta-3); }
.grupo-nav > summary .gira { transition: transform var(--rapido); }
.grupo-nav[open] > summary .gira { transform: rotate(180deg); }
.grupo-nav > summary:hover { background: var(--superficie-3); color: var(--tinta); }
.grupo-nav > summary:focus-visible { outline: none; box-shadow: var(--foco); }
.grupo-nav > summary.activo { color: var(--tinta); font-weight: 600; }
.grupo-nav:not([open]) > summary.activo { background: var(--acento-suave); }
.grupo-nav:not([open]) > summary.activo::before { content: ""; position: absolute; left: -12px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.grupo-nav > .menu { padding: 2px 0 var(--e-2) var(--e-4); }
.grupo-nav > .menu a { min-height: 40px; }
.grupo-nav > .menu a[aria-current="page"]::before { left: -28px; }
.menu-mas-titulo.mt-0 { margin-top: 0; }

/* Vender: buscador, productos (nombre y precio) y carrito con lectura limpia. */
.venta .catalogo-cab { padding-top: 0; }
@media (min-width: 1024px) { .venta .catalogo-cab { padding-top: var(--e-1); } }
.catalogo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 164px), 1fr)); gap: var(--e-2); }
.producto { min-height: 84px; grid-template-rows: 1fr auto; padding: var(--e-3) var(--e-4); border-radius: var(--r); gap: var(--e-2) var(--e-2); }
.producto .nombre { font-weight: 500; }
.producto .precio { font-weight: 700; }
.producto .stock { display: inline-flex; align-items: center; gap: 4px; }
.producto .stock .ic { width: 14px; height: 14px; }
.producto .en-carrito { top: 8px; right: 8px; }
@media (max-width: 599px) {
  .producto { min-height: 56px; grid-template-rows: auto; align-items: center; padding: var(--e-2) var(--e-4); }
  .producto .nombre { grid-row: 1; }
  .producto .precio { align-self: center; }
  .producto .stock { grid-column: 1; grid-row: 2; justify-self: start; }
  .producto .stock:empty { display: none; }
}
.carrito-cab { padding-top: var(--e-3); padding-bottom: var(--e-2); }
.linea { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--e-2) 0; }
.linea .controles { gap: var(--e-1); }
.linea .quitar { width: var(--toque); height: var(--toque); color: var(--tinta-3); }
.linea .quitar:hover { color: var(--error); }
#modalidades.opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#modalidades .opcion { min-height: 52px; flex-direction: row; align-items: center; gap: 8px; padding: var(--e-2) var(--e-3); font-size: var(--t-s); line-height: 1.2; }
#modalidades .opcion .ic { margin: 0; flex: none; }
#modalidades .opcion:has(input:checked)::after { display: none; }
.bloque-medio { margin-top: var(--e-4) !important; }
.resumen-venta { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin: -6px 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-2); font-weight: 500; }
.resumen-venta.falta-medio #resumen { color: var(--alerta); }
.total-venta { margin-bottom: var(--e-2); }
#mas-opciones #bloque-persona { padding-top: 0; }
.resultado .acciones-resultado { width: 100%; display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.venta .catalogo-cab { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.venta .catalogo-cab h1 { margin: 0; font-size: var(--t-xl); }
.venta .catalogo-cab .buscador { flex: 1 1 240px; }
.venta .catalogo-cab #cuenta-res { flex-basis: 100%; margin: 0 !important; }
.venta .catalogo-cab #cuenta-res:empty { display: none; }
@media (max-width: 599px) { .venta .catalogo-cab h1 { display: none; } }

/* Cobrar: buscar persona, cuánto debe, importe y medio. El desglose y el historial, en «Ver detalle». */
.cobro-pantalla { max-width: 600px; display: grid; gap: var(--e-4); }
.cobro-cab { display: grid; gap: var(--e-2); }
.cobro-cab .volver { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; align-self: start; justify-self: start;
  color: var(--tinta-2); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.cobro-cab .volver:hover { color: var(--tinta); text-decoration: underline; }
.cobro-cab h1 { font-size: var(--t-2xl); margin: 0; }
.cobro-cab .bajada { margin: 2px 0 0; }
.cobro-tarjeta { padding: var(--e-5); }
.cobro-tarjeta .debe { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }
.cobro-tarjeta .debe .etiqueta { font-size: var(--t-m); color: var(--tinta-2); }
.cobro-tarjeta .debe .valor { font: 700 var(--t-3xl)/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.por-sede-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: calc(-1 * var(--e-2)) 0 var(--e-4); }
.importe-fila { display: flex; gap: var(--e-2); align-items: stretch; }
.importe-fila .campo-importe { flex: 1; }
.importe-fila .rapidos { margin: 0; display: flex; }
.importe-fila .chip-btn { min-height: 100%; padding-inline: var(--e-4); border-radius: var(--r); }
.medio-cobro { border: 0; padding: 0; margin-inline: 0; }
.medio-cobro legend { padding: 0; margin-bottom: 6px; }
.medio-cobro .opcion { min-height: 52px; flex-direction: row; align-items: center; gap: 8px; padding: var(--e-2) var(--e-3); }
.medio-cobro .opcion .ic { margin: 0; }
.medio-cobro .opcion:has(input:checked)::after { display: none; }
#previa, #previa-servidor { margin-top: var(--e-3); }
#previa .previa-pie, #previa-servidor .previa-pie { border-top: 0; background: var(--superficie-2); padding: var(--e-3) var(--e-4); }
#previa .previa-pie .etiqueta, #previa-servidor .previa-pie .etiqueta { font-size: var(--t-m); color: var(--tinta-2); }
#previa .previa-pie .importe, #previa-servidor .previa-pie .importe { font: 700 var(--t-xl)/1 var(--f-titulo); }
.previa-detalle { border-top: 1px solid var(--linea); }
.previa-detalle > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--e-4);
  font-size: var(--t-s); color: var(--tinta-2); cursor: pointer; }
.previa-detalle > summary::-webkit-details-marker { display: none; }
.previa-detalle > summary .ic { transition: transform var(--rapido); }
.previa-detalle[open] > summary .ic { transform: rotate(90deg); }
.previa-detalle .filas { border-top: 1px solid var(--linea); }
.destino-cobro { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-4) 0 var(--e-2); font-size: var(--t-s); color: var(--tinta-3); }
.destino-cobro .etq { flex: none; }
.ver-detalle > summary { list-style: none; display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-3) var(--e-5); cursor: pointer; }
.ver-detalle > summary::-webkit-details-marker { display: none; }
.ver-detalle > summary .chico { flex: 1; }
.ver-detalle > summary .gira { transition: transform var(--rapido); }
.ver-detalle[open] > summary .gira { transform: rotate(180deg); }
.ver-detalle > summary:focus-visible { box-shadow: var(--foco); border-radius: var(--r-l); outline: none; }
.sub-detalle { font-size: var(--t-s); font-weight: 600; margin: 0; padding: var(--e-3) var(--e-5) var(--e-2); border-top: 1px solid var(--linea); color: var(--tinta-2); }
.resultado-cobro { display: grid; justify-items: center; text-align: center; gap: var(--e-2); padding: var(--e-8) var(--e-5) var(--e-6); animation: aparecer .2s ease-out; }
.resultado-cobro .sello { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-suave); color: var(--ok); }
.resultado-cobro .sello .ic { width: 26px; height: 26px; }
.resultado-cobro h2 { font-size: var(--t-l); margin: 0; }
.resultado-cobro .monto { font: 700 var(--t-3xl)/1.1 var(--f-titulo); letter-spacing: -.02em; }
.resultado-cobro .detalle { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.resultado-cobro .nota { margin: 0; color: var(--tinta-2); }
.resultado-cobro .acciones-resultado { width: 100%; max-width: 360px; display: grid; gap: var(--e-2); margin-top: var(--e-3); justify-items: stretch; }
.resultado-cobro .acciones-resultado .vinculo { justify-self: center; }
@media (max-width: 599px) { .catalogo { grid-template-columns: 1fr; } }

/* Inicio v4.3: acciones en una fila, controles de consulta juntos, importes grandes y desgloses plegados. */
.inicio-cab { align-items: flex-end; margin-bottom: var(--e-4); }
.acciones-inicio { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.acciones-inicio .btn { min-height: 48px; }
.consulta-inicio { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; justify-content: space-between; margin-bottom: var(--e-3); }
.consulta-inicio .periodos { margin: 0; flex: 0 1 420px; }
.consulta-inicio .ver-sedes { flex: 0 1 auto; }
.solo-consulta { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--info); }
.fechas-periodo { margin-bottom: var(--e-3); }
.fechas-periodo:not([open]) { display: none; }
.bloque-titulo { font-size: var(--t-m); font-weight: 600; margin: 0 0 var(--e-2); display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.bloque-nota { font-size: var(--t-s); font-weight: 400; color: var(--tinta-3); }
.libro-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.libro-fila > .libro-et { grid-column: 1; }
.libro-fila > .libro-valor { grid-column: 2; grid-row: 1; font-size: var(--t-2xl); }
.libro-fila > .libro-det, .libro-fila > .desglose { grid-column: 1 / -1; }
.libro-fila .desglose { margin-top: 0; }
.libro-fila .desglose > summary { color: var(--tinta-3); min-height: 36px; }
.libro-fila .desglose[open] > summary .ic { transform: rotate(90deg); }
.desglose .por-sede { margin-top: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); }
.desglose ul + .por-sede { margin-top: var(--e-2); }
.ahora .desglose ul.por-sede { margin-top: var(--e-1); }
.atender-lista { gap: 6px; }
.atender-lista > li > a { min-height: 44px; }
.reponer-det > summary { color: var(--tinta-2) !important; }
.reponer details.reponer-det:first-child > summary { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3);
  border-radius: var(--r); background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta) !important; font-weight: 500; font-size: var(--t-m); }
.reponer details.reponer-det:first-child > summary > span:first-of-type { flex: 1; }
.reponer details.reponer-det:not(:first-child) > summary { padding-left: var(--e-3); }
.reciente .seccion-cab h2 { font-size: var(--t-m); }
@media (max-width: 599px) {
  .inicio-cab { display: grid; gap: var(--e-3); }
  .acciones-inicio { display: grid; grid-template-columns: 1fr 1fr; }
  .acciones-inicio .btn:first-child { grid-column: 1 / -1; }
  .consulta-inicio { display: grid; }
  .consulta-inicio .periodos, .consulta-inicio .ver-sedes { flex: none; }
  .libro-fila > .libro-valor { font-size: var(--t-xl); }
}

/* ---- v4.3 · Caja y Stock: una acción principal, el resto secundario ---- */
.caja-hero .acciones-caja { display: flex; flex-wrap: wrap; gap: var(--e-2); width: auto; justify-content: flex-end; }
.caja-hero .acciones-caja .btn { min-height: 44px; }
.caja-hero .det strong.neg { color: var(--error); }
.consolidado-caja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-6);
  padding: var(--e-3) var(--e-4); border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.consolidado-caja h2 { font: 600 var(--t-s)/1.3 var(--f-texto); margin: 0; color: var(--tinta-2); }
.consolidado-caja .consolidado { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; flex: 1 1 auto; }
.consolidado-caja .cons-item { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); border: 0; padding: 0; background: none; min-height: 0; }
.consolidado-caja .cons-item.total { padding-left: var(--e-4); border-left: 1px solid var(--linea); }
@media (max-width: 599px) {
  .caja-hero .acciones-caja { justify-content: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .caja-hero .acciones-caja .btn:first-child { grid-column: 1 / -1; }
  .consolidado-caja .cons-item.total { padding-left: 0; border-left: 0; }
}
.caja-hero { grid-template-columns: minmax(0, 1fr) !important; align-items: start; }
.caja-hero .valor { white-space: nowrap; }
.caja-hero .acciones-caja { justify-content: flex-start; }
@media (max-width: 599px) {
  .caja-hero .acciones-caja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caja-hero .acciones-caja .btn { white-space: normal; min-width: 0; padding-inline: var(--e-3); }
}


/* ==== v4.4 · comodidad y claridad ==========================================================
   Texto base de 16 px y secundario de 14 px. Una sola fila compacta para movimientos.
   Inicio en dos zonas: lo que pasó en el período (blanco) y cómo estamos ahora (tono cálido). */

/* Filas de movimientos: título, una línea de contexto y, a la derecha, importe y medio. */
.fila.mov { padding-block: 10px; gap: var(--e-3); }
.fila.mov .titulo { font-weight: 500; }
.fila.mov .meta { margin-top: 1px; }
.fila.mov .mov-det { color: var(--tinta-2); font-weight: 500; }
.fila.mov .derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 96px; }
.fila.mov .importe { font-weight: 600; font-variant-numeric: tabular-nums; }
.fila.mov .efecto { font-size: var(--t-s); color: var(--tinta-3); }
.fila.mov .efecto.medio-alerta { color: var(--alerta); }
.fila.mov .fila-icono { width: 34px; height: 34px; }

/* Inicio */
.tablero { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .tablero { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); }
  .tablero .reciente { grid-column: 1; }
  .tablero .atender { grid-column: 2; grid-row: 2; }
}
.tablero .bloque-resumen { padding: var(--e-5); border-radius: var(--r-l); border: 1px solid var(--linea); background: var(--superficie); margin: 0; }
.tablero .bloque-titulo { font: 600 var(--t-m)/1.3 var(--f-texto); margin: 0 0 var(--e-4); color: var(--tinta); }
.tablero .bloque-nota { font-weight: 400; color: var(--tinta-3); font-size: var(--t-s); margin-left: 6px; }
.tablero .ahora { background: #f3efe7; border-color: #e6dfd2; }
.tablero .cifras { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tablero .ahora .cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.cifra { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cifra + .cifra { }
.cifra-et { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--tinta-2); text-decoration: none; width: fit-content; min-height: 32px; }
a.cifra-et:hover { color: var(--acento-texto); }
.cifra-et .ic { color: var(--tinta-3); }
.cifra-valor { font: 700 var(--t-2xl)/1.1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra-det { margin: 4px 0 0; font-size: var(--t-s); color: var(--tinta-2); }
.cifra-det.tenue { color: var(--tinta-3); margin-top: 0; }
.cifra-det a { color: inherit; }
.cifra-det.medios { display: flex; flex-wrap: wrap; gap: 4px var(--e-3); }
.cifra-det .num { font-weight: 600; color: var(--tinta); }
.cifra .por-sede { list-style: none; margin: var(--e-2) 0 0; padding: var(--e-2) 0 0; border-top: 1px dashed var(--linea-fuerte); display: grid; gap: 4px; font-size: var(--t-s); }
.cifra .por-sede li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.tablero .ahora .por-sede { border-top-color: #d9cfbd; }
.tablero .reciente .seccion-cab { margin-bottom: var(--e-2); }
.tablero .reciente h2 { font: 600 var(--t-m)/1.3 var(--f-texto); }
.tablero .atender .atender-lista { margin: 0; }
.productos-reponer { list-style: none; margin: var(--e-2) 0 0 30px; padding: 0; display: grid; gap: 2px; font-size: var(--t-s); }
.productos-reponer li { display: flex; justify-content: space-between; gap: var(--e-2); }
.productos-reponer a { color: var(--tinta-2); }
@media (max-width: 599px) {
  .tablero .bloque-resumen { padding: var(--e-4); }
  /* En celular cada cifra es una fila: nombre a la izquierda, importe a la derecha. */
  .tablero .cifras { gap: 0; grid-template-columns: minmax(0, 1fr) !important; }
  .cifra { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-3); align-items: baseline; padding: var(--e-3) 0; border-top: 1px solid var(--linea); }
  .tablero .ahora .cifra { border-top-color: #e2d9c9; }
  .cifra:first-child { border-top: 0; padding-top: 0; }
  .cifra:last-child { padding-bottom: 0; }
  .cifra-et { grid-column: 1; }
  .cifra-valor { grid-column: 2; grid-row: 1; font-size: var(--t-xl); }
  .cifra-det, .cifra .por-sede { grid-column: 1 / -1; }
}
.tablero .cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cifra .por-sede .etq.sede { background: none; border: 0; padding: 0; min-height: 0; font-size: var(--t-s); color: var(--tinta-2); }
.cifra .por-sede li { min-height: 28px; }
.cifra .por-sede a { min-height: 28px; display: inline-flex; align-items: center; }
.productos-reponer .etq.sede { background: none; border: 0; padding: 0; min-height: 0; }
@media (max-width: 599px) {
  .fila.mov { align-items: flex-start; }
  .fila.mov .titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fila.mov .derecha { min-width: 0; max-width: 42%; }
  .fila.mov .derecha:not(:has(.importe)) { display: none; }
  .fila.mov .meta .etq.sede { background: none; border: 0; padding: 0; min-height: 0; }
  .cifra .por-sede li, .cifra .por-sede a { min-height: 32px; }
}
@media (min-width: 1100px) {
  .tablero.varias { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tablero.varias .periodo { grid-column: 1 / -1; }
  .tablero.varias .ahora { grid-column: 1 / -1; }
  .tablero.varias .reciente { grid-column: 1; grid-row: auto; }
  .tablero.varias .atender { grid-column: 2; grid-row: auto; }
  .tablero.varias .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
  .tablero.varias .ahora .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cifra .por-sede .num { white-space: nowrap; }
/* «Cambiar» va a la altura de «Sede de trabajo», para que el nombre de la sede quede entero en una línea. */
.sede-actual { position: relative; }
.sede-actual strong { white-space: nowrap; display: block; }
.sede-actual .cambiar { position: absolute; top: 10px; right: 12px; font-size: var(--t-xs); }

/* Vender v4.4: catálogo más denso (más productos a la vista), más vendidos arriba y carrito a la vista. */
.catalogo { gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.producto { min-height: 72px; padding: 10px 12px; gap: 4px var(--e-2); border-radius: var(--r); }
.producto .nombre { font-weight: 500; font-size: var(--t-m); line-height: 1.25; padding-right: 26px; }
.producto .precio { font-weight: 600; font-size: var(--t-m); }
.producto .en-carrito { top: 8px; right: 8px; min-width: 24px; height: 24px; border-radius: 12px; }
.catalogo-titulo { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-3); margin: var(--e-3) 0 var(--e-2); }
#frecuentes-bloque .catalogo-titulo:first-child { margin-top: 0; }
#frecuentes-bloque .catalogo { margin-bottom: var(--e-2); }
.carrito-invitacion { padding: var(--e-6) var(--e-4); }
@media (max-width: 599px) {
  .catalogo { grid-template-columns: 1fr; }
  .producto { min-height: 56px; }
  .producto .nombre { padding-right: 0; }
}
@media (min-width: 1024px) { .venta { grid-template-columns: minmax(0, 1fr) 344px; } .catalogo { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } }
@media (min-width: 1360px) { .venta { grid-template-columns: minmax(0, 1fr) 380px; } }
/* Precio siempre entero; el aviso de stock va debajo, junto al producto. */
.producto .precio { white-space: nowrap; }
.producto .stock { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 599px) { .producto .stock { grid-column: 2; justify-self: end; } }
/* Medios de pago: ícono arriba y nombre abajo, entran los tres sin cortarse. */
.carrito #modalidades .opcion { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; padding: 10px 6px; min-height: 64px; line-height: 1.2; }
.carrito #modalidades .opcion > .ic { grid-row: auto; }

/* Stock v4.4: cuántos hay en cada grupo y filas livianas; solo se marca lo que pide atención. */
.cuenta-seg { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
  background: var(--superficie-3); color: var(--tinta-3); font-size: var(--t-xs); font-weight: 600; }
.cuenta-seg.hay { background: var(--alerta-suave); color: var(--alerta); }
#lista-stock .fila { padding-block: 10px; }
#lista-stock .existencia { font: 700 var(--t-l)/1.1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.stock-herramientas { margin-bottom: var(--e-3); }

/* Formularios de mercadería v4.4: el destino como una línea, no como un cartel. */
.destino { padding: var(--e-2) var(--e-4) var(--e-2) calc(var(--e-4) + 8px); margin-bottom: var(--e-4); background: var(--acento-suave); border-radius: var(--r); align-items: center; }
.destino::before { top: 10px; bottom: 10px; left: 10px; width: 4px; }
.destino strong { font: 600 var(--t-l)/1.2 var(--f-texto); letter-spacing: 0; }
.encabezado .titulos .antetitulo + h1 { margin-top: 2px; }
/* En computadora, la lista de stock va en dos columnas: la mitad de largo, mismo orden alfabético. */
@media (min-width: 1100px) {
  #lista-stock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  #lista-stock > li { border-top: 1px solid var(--linea); }
  #lista-stock > li:nth-child(odd) { border-right: 1px solid var(--linea); }
  #lista-stock > li:nth-child(-n+2) { border-top: 0; }
  #lista-stock > li > .fila { border-top: 0; }
  #lista-stock > li[hidden] { display: none; }
}

/* Administración v4.4: permisos en columnas y productos con las sedes nombradas una sola vez. */
@media (min-width: 900px) {
  .grupos-permisos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grupos-permisos .grupo-permisos:nth-child(odd) { border-right: 1px solid var(--linea); }
}
.prod-cab { display: none; }
@media (min-width: 760px) {
  .prod-cab { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-5); border-bottom: 1px solid var(--linea);
    font-size: var(--t-s); color: var(--tinta-3); font-weight: 500; }
  .prod-cab > span:first-child { flex: 1; }
  .prod-cab .por-sede-prod .sede-prod-cab { min-width: 128px; padding-left: 4px; }
  .prod-cab .chev-esp { width: 18px; flex: none; }
  .lista-prod .sede-prod .sede-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lista-prod #lista-prod > li:first-child > .fila { border-top: 0; }
}
details.tecnico { margin-top: 2px; }
details.tecnico summary { cursor: pointer; width: max-content; }
.atender .productos-reponer li { flex-wrap: nowrap; }
.atender .productos-reponer a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.atender .productos-reponer li > :last-child { flex: none; white-space: nowrap; }
.principal:has(form.venta) { background: var(--fondo); }
@media (max-width: 599px) { .producto .en-carrito { top: -8px; right: -6px; } }

/* =========================================================================================
   v4.5 · Inicio con registro general, productos con imagen, categorías, logo y perfil
   ========================================================================================= */

/* --- Inicio: cabecera compacta ------------------------------------------------------------ */
.inicio-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.inicio-saludo { display: flex; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.inicio-saludo .saludo { font: 700 var(--t-2xl)/1.15 var(--f-titulo); margin: 0; }
.fecha-hoy { color: var(--tinta-3); font-size: var(--t-s); }
.consulta-inicio { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.sede-consulta { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.punto-sede { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); display: inline-block; flex: none; }
.ver-sedes a .punto-sede { margin-right: 6px; }

/* --- Resumen: período y saldos actuales en una franja ------------------------------------- */
.resumen-inicio { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
@media (min-width: 1100px) { .resumen-inicio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.resumen-grupo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-3) var(--e-4) var(--e-4); min-width: 0; }
.resumen-grupo.saldos { background: #f3efe7; border-color: #e6dfd2; }
.grupo-titulo { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); margin: 0 0 var(--e-2); }
.grupo-nota { font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.resumen-inicio .cifras { display: grid; gap: var(--e-3) var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.resumen-inicio .cifra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; position: relative; padding: 0; border: 0; background: none; }
.resumen-inicio .cifra + .cifra { border: 0; }
.resumen-inicio .cifra-et { font: 500 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); }
.resumen-inicio .cifra-valor { font: 700 var(--t-2xl)/1.1 var(--f-titulo); letter-spacing: -.02em; white-space: nowrap; color: var(--tinta); }
.resumen-inicio .cifra-det { font-size: var(--t-xs); color: var(--tinta-3); }
.enlace-sutil { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--tinta-3); }
.enlace-sutil:hover { color: var(--tinta); text-decoration: underline; }

/* Desglose: control con nombre visible; se abre como panel sobre el contenido, sin empujarlo. */
.desglose { position: static; margin-top: 2px; }
.desglose > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; margin-left: -10px;
  border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--acento-texto); cursor: pointer; }
.desglose > summary::-webkit-details-marker { display: none; }
.desglose > summary:hover { background: var(--acento-suave); }
.desglose > summary .ic { transition: transform var(--rapido); }
.desglose[open] > summary { background: var(--acento-suave); }
.desglose[open] > summary .ic { transform: rotate(180deg); }
.desglose-panel { position: absolute; z-index: 20; top: 100%; left: -8px; margin-top: 4px; width: max(100%, 290px); max-width: min(340px, calc(100vw - 32px));
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r); box-shadow: var(--sombra-3); padding: var(--e-3) var(--e-4); }
.desglose-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.desglose-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 36px; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.desglose-lista li:last-child { border-bottom: 0; }
.desglose-lista li.separa { border-top: 1px solid var(--linea-fuerte); }
.desglose-lista a { display: inline-flex; align-items: center; gap: 6px; }
.desglose-lista .num { font-weight: 600; white-space: nowrap; }
.desglose-lista.por-sede { margin-top: var(--e-2); border-top: 1px dashed var(--linea-fuerte); }
.desglose-lista .etq.sede { background: none; border: 0; padding: 0; min-height: 0; font-size: var(--t-s); }
.desglose-nota { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--tinta-3); }
.desglose-ir { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--e-2); font-size: var(--t-s); font-weight: 600; color: var(--acento-texto); }

/* --- Cuerpo: registro protagonista y «Para atender» al costado ---------------------------- */
.inicio-cuerpo { display: grid; gap: var(--e-6); align-items: start; }

.registro-cab { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-3); }
.registro-cab h2 { font: 700 var(--t-xl)/1.2 var(--f-titulo); letter-spacing: -.01em; }
.registro-cuenta { color: var(--tinta-3); font-size: var(--t-s); }
.registro-filtros { display: flex; gap: var(--e-2); margin-bottom: var(--e-3); }
.registro-filtros .buscador { flex: 1 1 auto; position: relative; }
.registro-filtros .buscador input { width: 100%; }
.tipos-registro { margin-bottom: var(--e-3); }
.filtros-activos-linea { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.filtros-activos-linea .filtros-activos { margin: 0; }
.quitar-todos { font-size: var(--t-s); font-weight: 600; }

.tabla-registro-marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; }
.tabla-registro { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla-registro th { text-align: left; font: 600 var(--t-xs)/1.2 var(--f-texto); color: var(--tinta-3); text-transform: none;
  padding: 10px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-registro td { padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla-registro tbody tr:last-child td { border-bottom: 0; }
.tabla-registro tbody tr:hover { background: var(--superficie-2); }
.tabla-registro tbody tr:target { background: var(--acento-suave); }
.tabla-registro .c-fecha { white-space: nowrap; color: var(--tinta-2); width: 1%; }
.tabla-registro .c-fecha .hora { color: var(--tinta-3); margin-left: 4px; }
.tabla-registro .c-op { white-space: nowrap; width: 1%; }
.tabla-registro .c-op .fila-icono { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; vertical-align: middle; margin-right: 8px; }
.tabla-registro .c-op .fila-icono .ic { width: 16px; height: 16px; }
.op-enlace { font-weight: 600; color: var(--tinta); text-decoration: none; }
.op-enlace:hover { text-decoration: underline; }
.tabla-registro .c-concepto { min-width: 0; }
.concepto { display: block; color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; }
.concepto-det { display: block; color: var(--tinta-3); font-size: var(--t-xs); overflow-wrap: anywhere; }
.etq-chica { font-size: var(--t-xs); min-height: 22px; padding: 0 8px; margin-top: 2px; text-decoration: none; }
.tabla-registro .c-medio, .tabla-registro .c-sede { white-space: nowrap; width: 1%; }
.tabla-registro .c-importe { text-align: right; white-space: nowrap; width: 1%; }
.tabla-registro th.c-importe, .tabla-registro th.c-efecto { text-align: right; }
.tabla-registro .importe { font-weight: 600; color: var(--tinta); }
.tabla-registro .importe.sale { color: #8a3b12; }
.tabla-registro .antes { display: block; font-size: var(--t-xs); color: var(--tinta-3); }
.tabla-registro .c-efecto { text-align: right; white-space: nowrap; width: 1%; }
.tabla-registro .c-ver { width: 1%; padding-left: 0; }
.ir-detalle { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--tinta-3); }
.ir-detalle:hover { background: var(--superficie-3); color: var(--tinta); }
.tabla-registro tr.anulada .concepto, .tabla-registro tr.anulada .importe { text-decoration: line-through; color: var(--tinta-3); }

.medio-etq { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; border: 1px solid transparent; }
.medio-etq.m-efectivo { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-borde); }
.medio-etq.m-qr { background: var(--info-suave); color: var(--info); border-color: var(--info-borde); }
.medio-etq.m-a-cobrar { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta-borde); }
.medio-etq.m-cortesia { background: #f3eef8; color: #5b3f7a; border-color: #ddd0ea; }

.efecto-caja { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.efecto-caja .ic { width: 15px; height: 15px; }
.efecto-caja.entra { color: var(--ok); }
.efecto-caja.sale { color: #8a3b12; }
.efecto-caja.sin { color: var(--tinta-3); font-weight: 400; }

/* Íconos de tipo: familias reconocibles (venta, cobro, salida, ingreso, ajuste). */
.fila-icono { background: var(--superficie-3); color: var(--tinta-2); }
.tipo-venta .fila-icono, .fila-icono.t-venta { background: var(--acento-suave); color: var(--acento-texto); }
.tipo-cobro_deuda .fila-icono { background: var(--ok-suave); color: var(--ok); }
.tipo-gasto .fila-icono, .tipo-pago_proveedor .fila-icono, .tipo-recepcion .fila-icono, .tipo-retiro .fila-icono { background: #fbeee6; color: #8a3b12; }
.tipo-aporte .fila-icono, .tipo-apertura_caja .fila-icono { background: var(--ok-suave); color: var(--ok); }
.tipo-ajuste_caja .fila-icono { background: var(--alerta-suave); color: var(--alerta); }

.registro-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-3); }
.registro-totales { margin: 0; display: flex; gap: var(--e-2) var(--e-4); flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-3); }
.cargar-mas { order: 2; }
.registro-pie .ver-todo { order: 3; font-size: var(--t-s); }
.centrado { text-align: center; }

/* Para atender: compacto */
.atender h2 { font: 600 var(--t-m)/1.3 var(--f-texto); margin: 0 0 var(--e-2); }
.inicio-cuerpo .atender { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-4); }
@media (min-width: 760px) {
  .inicio-cuerpo .atender { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px var(--e-4); }
  .inicio-cuerpo .atender h2 { margin: 0; font-size: var(--t-s); }
  .inicio-cuerpo .atender .atender-lista { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
  .inicio-cuerpo .atender .atender-lista > li > a { min-height: 36px; }
}
.inicio-cuerpo .atender-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inicio-cuerpo .atender-lista > li > a { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linea);
  border-radius: var(--r); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.inicio-cuerpo .atender-lista > li > a:hover { border-color: var(--linea-fuerte); background: var(--superficie-2); }
.inicio-cuerpo .atender-lista .cuenta { margin-left: auto; }
.reponer-nombres { margin: 4px 0 0 10px; font-size: var(--t-xs); color: var(--tinta-3); }

/* Tabla en celular: cada operación es una tarjeta de tres líneas, sin comprimir columnas. */
@media (max-width: 759px) {
  .tabla-registro-marco { border-radius: var(--r); }
  .tabla-registro thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-registro, .tabla-registro tbody { display: block; }
  .tabla-registro tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
      "op importe" "concepto medio" "fecha efecto" "sede sede"; column-gap: var(--e-3); row-gap: 2px;
    padding: 10px 12px; border-bottom: 1px solid var(--linea); position: relative; }
  .tabla-registro tbody tr:last-child { border-bottom: 0; }
  .tabla-registro td { display: block; padding: 0; border: 0; width: auto !important; }
  .tabla-registro .c-op { grid-area: op; }
  .tabla-registro .c-importe { grid-area: importe; }
  .tabla-registro .c-concepto { grid-area: concepto; padding-left: 36px; }
  .tabla-registro .c-concepto .concepto-det { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tabla-registro .c-medio { grid-area: medio; text-align: right; }
  .tabla-registro .c-fecha { grid-area: fecha; padding-left: 36px; font-size: var(--t-xs); color: var(--tinta-3); }
  .tabla-registro .c-efecto { grid-area: efecto; font-size: var(--t-xs); }
  .tabla-registro .c-sede { grid-area: sede; padding-left: 36px; }
  .tabla-registro .c-ver { position: absolute; inset: 0; }
  .tabla-registro .c-ver .ir-detalle { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; }
  .tabla-registro .c-ver .ir-detalle:focus-visible { opacity: 1; background: transparent; box-shadow: inset 0 0 0 2px var(--acento-texto); }
  .tabla-registro .c-op .op-enlace, .tabla-registro .c-concepto a { position: relative; z-index: 1; }
  .resumen-inicio .cifra-valor { font-size: var(--t-xl); }
  .resumen-inicio .periodo .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
  .resumen-inicio .saldos .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .resumen-inicio .cifra-det { display: none; }
  .resumen-inicio .saldos .cifra-det { display: inline-flex; }
  .desglose-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--nav-movil) + 12px); width: auto; max-width: none; max-height: 60vh; overflow: auto; }
  .registro-filtros .btn { padding-inline: 14px; }
  .inicio-saludo .saludo { font-size: var(--t-xl); }
}
@media (max-width: 400px) { .resumen-inicio .periodo .cifra-valor { font-size: var(--t-l); } }
.inicio-cuerpo > * { min-width: 0; }
@media (min-width: 760px) { .tipos-registro.pildoras { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; } }
@media (max-width: 759px) { .sede-consulta { display: none; } }
.tabla-registro td, .tabla-registro th { padding-left: 10px; padding-right: 10px; }

/* --- v4.5: logo, perfil ------------------------------------------------------------------ */
.lateral > a:first-child { display: block; padding: var(--e-1) var(--e-2) var(--e-2); border-radius: var(--r); }
.lateral .logo-store { width: 168px; height: auto; margin: 0; }
.barra-movil { padding-left: var(--e-3); }
.barra-movil .logo-store { height: 38px; }
.barra-movil > a:first-child { display: flex; align-items: center; min-height: 44px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; }
.avatar.s { width: 32px; height: 32px; font-size: 12px; }
.avatar.iniciales { font: 600 13px/1 var(--f-texto); letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.avatar.tono-0 { background: #e3eef3; color: #1f5566; }
.avatar.tono-1 { background: #efe6f0; color: #6b2d5c; }
.avatar.tono-2 { background: #f3ecdc; color: #6e5214; }
.avatar.tono-3 { background: #e6efe7; color: #2f5d3a; }
.btn-perfil { padding: 4px; }

/* --- v4.5: miniaturas de producto y categorías ------------------------------------------------ */
.miniatura { --mini: 52px; width: var(--mini); height: var(--mini); flex: none; display: inline-grid; place-items: center; border-radius: 10px;
  overflow: hidden; background: #eef0f2; color: #5f6b76; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .04); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .pic { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.miniatura.s { --mini: 40px; border-radius: 8px; }
.miniatura.xs { --mini: 30px; border-radius: 7px; }
.miniatura.l { --mini: 64px; border-radius: 12px; }
.miniatura.cat-bebidas { background: #e7eef7; color: #2f5d8f; }
.miniatura.cat-cafeteria { background: #f4ece4; color: #7b4f33; }
.miniatura.cat-comidas { background: #fbf0dc; color: #94650f; }
.miniatura.cat-otros, .miniatura.cat-sin { background: #eef0f2; color: #5f6b76; }
.miniatura:has(img) { background: #fff; }
.producto-titulo { display: flex; align-items: center; gap: var(--e-3); }
.producto-titulo h1 { margin: 0; }
.filas .fila > .miniatura { margin-right: 2px; }

/* Categorías en Vender */
.venta .catalogo-cab { row-gap: var(--e-2); }
.categorias { flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.categorias::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .categorias { flex-wrap: wrap; overflow: visible; } }
.cat-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 5px; border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--linea); background: var(--superficie); font: 500 var(--t-s)/1 var(--f-texto); color: var(--tinta-2); cursor: pointer;
  transition: border-color var(--rapido), background-color var(--rapido), opacity var(--rapido); }
.cat-btn .miniatura, .cat-btn .cat-ic { --mini: 30px; border-radius: 50%; }
.cat-btn .cat-ic { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--superficie-3); color: var(--tinta-2); }
.cat-btn .n { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.cat-btn:hover { border-color: var(--linea-fuerte); }
.cat-btn[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cat-btn[aria-pressed="true"] .n { color: rgb(255 255 255 / .75); }
.cat-btn:focus-visible { box-shadow: var(--foco); outline: none; }
.categorias.en-pausa .cat-btn { opacity: .5; border-style: dashed; }
.ayuda-busqueda { flex: 1 1 100%; margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.ayuda-busqueda[hidden] { display: none; }

/* Tarjetas de producto: miniatura, nombre y precio siempre visibles, tamaño parejo */
.venta .catalogo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); gap: var(--e-2); }
.venta .producto { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas:
  "mini nombre" "mini pres" "mini pie"; gap: 2px 12px; align-items: start; min-height: 84px; padding: 12px; text-align: left; }
.venta .producto .miniatura { grid-area: mini; align-self: center; }
.venta .producto .nombre { grid-area: nombre; grid-column: auto; padding-right: 22px; font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.venta .producto .pres { grid-area: pres; grid-column: auto; font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venta .producto .pie-prod { grid-area: pie; align-self: end; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.venta .producto .precio { grid-column: auto; grid-row: auto; font-size: var(--t-m); font-weight: 650; }
.venta .producto .stock { grid-column: auto; grid-row: auto; justify-self: auto; }
.venta .producto .en-carrito { top: 8px; right: 8px; }
@media (max-width: 599px) {
  .venta .catalogo { grid-template-columns: 1fr; }
  .venta .producto { min-height: 64px; grid-template-areas: "mini nombre" "mini pres" "mini pie"; padding: 8px 12px 8px 8px; }
  .venta .producto .miniatura { --mini: 46px; }
  .venta .producto .en-carrito { top: -8px; right: -6px; }
}
/* Más vendidos: pocos accesos rápidos, compactos */
.mas-vendidos-lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px var(--e-2); }
.mas-vendidos-lista::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .mas-vendidos-lista { flex-wrap: wrap; overflow: visible; } }
.venta .producto.rapido { flex: none; width: auto; max-width: 240px; min-height: 48px; padding: 6px 12px 6px 6px; grid-template-areas: "mini nombre" "mini pie";
  grid-template-rows: auto auto; gap: 0 10px; border-radius: var(--r-pill); }
.venta .producto.rapido .miniatura { --mini: 36px; border-radius: 50%; }
.venta .producto.rapido .nombre { -webkit-line-clamp: 1; padding-right: 0; font-size: var(--t-s); }
.venta .producto.rapido .precio { font-size: var(--t-s); }
.venta .producto.rapido .stock { display: none; }
.venta .producto.rapido .en-carrito { top: -6px; right: -6px; }
#frecuentes-bloque .catalogo-titulo .tenue { font-weight: 400; }

/* Líneas del carrito con miniatura chica */
.linea-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.linea-prod > div { min-width: 0; }
.cat-btn { gap: 6px; padding: 3px 10px 3px 4px; min-height: 38px; }
.cat-btn .miniatura, .cat-btn .cat-ic { --mini: 28px; width: 28px; height: 28px; }
.venta .producto .miniatura { --mini: 56px; }
@media (max-width: 599px) {
  .venta .producto { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "mini nombre pie" "mini pres pie";
    min-height: 60px; align-items: center; }
  .venta .producto .miniatura { --mini: 44px; }
  .venta .producto .nombre { padding-right: 0; -webkit-line-clamp: 1; }
  .venta .producto .pie-prod { flex-direction: column; align-items: flex-end; align-self: center; gap: 2px; }
  .venta .producto .pres:empty { display: none; }
}
.usuario-lateral strong { white-space: normal; overflow: visible; line-height: 1.25; }
/* Botón principal deshabilitado: legible, sin parecer apagado por error */
.btn:not(.sec):not(.fantasma)[disabled], .btn:not(.sec):not(.fantasma)[aria-disabled="true"] { opacity: 1; background: var(--superficie-3); border-color: var(--linea); color: var(--tinta-2); box-shadow: none; }
.avatar.l { width: 52px; height: 52px; font-size: 17px; }
@media (max-width: 759px) { .cat-btn { min-height: 44px; } }

/* =========================================================================================
   v4.6 · Consulta de todas las sedes, precios cambiados, registro legible
   ========================================================================================= */

/* --- Todas las sedes: identidad HOST (negro y amarillo, valores provisorios de los logos) ---- */
/* Solo el contenido cambia de acento: la barra lateral, la barra superior y la navegación siguen
   mostrando la sede de trabajo con su color, porque ahí es donde se registra. */
[data-ambito="todas"] .contenido { --acento: var(--host-amarillo); --acento-sobre: var(--host-negro); --acento-texto: var(--host-negro);
  --acento-suave: #fff6d4; --acento-velo: #f5efdc; --acento-borde: #e6cf78; --acento-anillo: rgb(255 204 23 / .4); --acento-oscuro: var(--host-amarillo); }
[data-ambito="todas"] .principal { background: linear-gradient(180deg, #f3eedd 0, var(--fondo) 300px) no-repeat; }
.punto-sede.todas { background: conic-gradient(var(--host-amarillo) 0 50%, var(--host-negro) 0); }
.franja-todas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-6);
  margin: 0 0 var(--e-4); padding: var(--e-4) var(--e-5); border-radius: var(--r-l); background: var(--host-negro); color: #fff;
  box-shadow: inset 6px 0 0 var(--host-amarillo); }
.franja-todas .ft-ambito { min-width: 0; }
.franja-todas .ft-etq { margin: 0; color: var(--host-amarillo); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.franja-todas .ft-titulo { margin: 2px 0 4px; font: 700 var(--t-xl)/1.2 var(--f-titulo); color: #fff; }
.franja-todas .ft-sedes, .franja-todas .ft-destino { margin: 0; font-size: var(--t-s); color: #e9e7e2; }
.franja-todas .ft-sede { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.franja-todas .ft-destino strong { color: #fff; }
.franja-todas .ft-registrar { display: grid; gap: var(--e-2); justify-items: end; }
.franja-todas .acciones-inicio .btn { min-height: 44px; }
.franja-todas .acciones-inicio .btn:not(.sec) { background: var(--host-amarillo); border-color: var(--host-amarillo); color: var(--host-negro); }
.franja-todas .acciones-inicio .btn:not(.sec) .ic { color: var(--host-negro); }
.franja-todas .acciones-inicio .btn.sec, .franja-todas .acciones-inicio .btn.sec .ic { background: transparent; border-color: #6b6862; color: #fff; }
.franja-todas .acciones-inicio .btn.sec:hover { background: rgb(255 255 255 / .1); }
.franja-todas a:focus-visible { box-shadow: 0 0 0 2px var(--host-negro), 0 0 0 4px var(--host-amarillo); }
@media (max-width: 759px) {
  .franja-todas { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--e-4); }
  .franja-todas .ft-registrar { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .franja-todas .acciones-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja-todas .acciones-inicio .btn { min-width: 0; padding-inline: 10px; }
}

/* Logo de Store: proporcionado a la barra lateral, sin competir con la sede de trabajo */
.lateral .logo-store { width: 120px; }

/* --- Cobrar: alcance de las deudas y sede de origen -------------------------------------------- */
.alcance-cobro { margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.alcance-cobro p { margin: 0 0 4px; }
.alcance-cobro a { color: var(--acento-texto); font-weight: 500; margin-left: 4px; }
.alcance-cobro .etq.sede { vertical-align: 1px; }
.deuda-sedes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; align-items: center; font-size: var(--t-xs); }
.deuda-origen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--e-1) 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-3); }
.destino-cobro { flex-wrap: wrap; }
.destino-cobro .destino-efectivo { color: var(--tinta-3); }

/* --- Resumen: cada cifra lleva al registro que suma lo mismo --------------------------------------- */
a.cifra-valor { color: inherit; text-decoration: none; border-radius: 6px; }
a.cifra-valor:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--acento-borde); }

/* --- Para atender: una línea, solo cuando hay algo ------------------------------------------------- */
.atender-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: calc(-1 * var(--e-2)) 0 var(--e-6);
  padding: var(--e-2) var(--e-3); border: 1px solid var(--alerta-borde); border-radius: var(--r); background: var(--alerta-suave); }
.atender-linea h2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--alerta); }
.atender-linea ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.atender-linea a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--superficie); border: 1px solid var(--alerta-borde); color: var(--tinta); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.atender-linea a:hover { border-color: var(--alerta); }
.atender-linea .cuenta { font-weight: 700; color: var(--alerta); }

/* --- Registro: un importe, el medio aparte y el efecto en la caja en palabras ---------------------- */
.tabla-registro .estado-op { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600;
  background: var(--superficie-3); color: var(--tinta-2); vertical-align: 1px; }
.tabla-registro .estado-op.anulada { background: var(--error-suave); color: var(--error); }
.tabla-registro .importe { color: var(--tinta); }
.tabla-registro .c-importe { padding-right: var(--e-4); }
.efecto-caja.no { color: var(--tinta-3); font-weight: 400; }
.efecto-caja .ic { flex: none; }
.tabla-registro.un-dia .c-fecha { color: var(--tinta-3); }
.registro-totales strong { color: var(--tinta); font-weight: 600; white-space: nowrap; }
@media (max-width: 759px) {
  /* Celular: qué, cuándo e importe; con quién (ancho completo, los nombres largos no se cortan); medio y efecto
     en la caja. Ninguna columna puede empujar el importe fuera de la fila. */
  .tabla-registro tr { grid-template-columns: minmax(0, 1fr) max-content max-content; grid-template-areas:
      "op fecha importe" "concepto concepto concepto" "medio medio efecto" "sede sede sede"; column-gap: var(--e-2); row-gap: 4px; align-items: center; }
  .tabla-registro .c-fecha { padding-left: 0; align-self: center; white-space: nowrap; }
  .tabla-registro .c-concepto { align-self: start; overflow-wrap: anywhere; }
  .tabla-registro .c-medio { text-align: left; padding-left: 36px; }
  .tabla-registro .c-importe { white-space: nowrap; }
  .tabla-registro .c-medio .medio-etq { min-height: 22px; padding: 0 7px; }
  .tabla-registro .c-sede:empty { display: none; }
  .tabla-registro .c-op { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; min-width: 0; }
  .tabla-registro .c-op .op-enlace { white-space: nowrap; }
  .tabla-registro .c-op .estado-op { margin-left: 4px; }
  .tabla-registro .c-concepto .concepto-det { display: block; -webkit-line-clamp: unset; overflow: visible; color: var(--tinta-3); font-size: var(--t-xs); }
  .tabla-registro .c-importe { padding-right: 0; }
  .tabla-registro .c-efecto { text-align: right; }
  .registro-totales { display: grid; gap: 4px; }
}

/* Medio: color moderado. Efectivo y QR en neutro (el efecto en la caja ya dice si entra); «A cobrar» se destaca. */
.tabla-registro .medio-etq.m-efectivo, .tabla-registro .medio-etq.m-qr { background: var(--superficie); color: var(--tinta-2); border-color: var(--linea-fuerte); }
.permiso-nota { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: var(--t-xs); color: var(--tinta-3); }

/* --- Vender: catálogo compacto. Una fila por producto: nombre completo (sin cortar), presentación y precio ---- */
.venta .catalogo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--e-2); }
.venta .producto { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "mini nombre pie" "mini pres pie";
  align-items: center; gap: 0 10px; min-height: 60px; padding: 8px 12px 8px 8px; }
.venta .producto .miniatura { --mini: 44px; }
.venta .producto .nombre { display: block; -webkit-line-clamp: unset; overflow: visible; padding-right: 0; overflow-wrap: anywhere; align-self: end; }
.venta .producto .pres { white-space: normal; overflow: visible; align-self: start; }
.venta .producto:not(:has(.pres)) .nombre { grid-row: 1 / 3; align-self: center; }
.venta .producto .pie-prod { flex-direction: column; align-items: flex-end; align-self: center; gap: 2px; flex-wrap: nowrap; }
.venta .producto .precio { white-space: nowrap; font-variant-numeric: tabular-nums; }
.venta .producto .en-carrito { top: -8px; right: -6px; }
.venta .producto.rapido { max-width: 280px; }
.venta .producto.rapido .nombre { -webkit-line-clamp: unset; white-space: normal; grid-row: auto; align-self: end; }
/* El título de Vender se oculta solo a la vista en celular: los lectores de pantalla lo siguen encontrando. */
@media (max-width: 599px) {
  .venta .catalogo-cab h1 { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .venta .producto { min-height: 56px; }
}
.destino-cobro .destino-efectivo { flex-basis: 100%; }
.acciones-caja .permiso-nota { grid-column: 1 / -1; }
/* Caja: el título de cada movimiento se lee completo también en celular */
.caja-pantalla .filas .titulo, .tarjeta .filas li[class^="tipo-"] .titulo { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; }

/* 360–420 px: el contador del registro va debajo del título y las acciones secundarias de Caja entran en una línea. */
@media (max-width: 599px) {
  .registro-cab { flex-direction: column; align-items: flex-start; gap: 2px; }
}
@media (max-width: 420px) {
  .caja-hero .acciones-caja .btn.sec { padding-inline: 10px; min-width: 0; }
  .caja-hero .acciones-caja .btn.sec .ic { display: none; }
}
@media (max-width: 759px) {
  /* El desglose se abre debajo de las cifras, empujando lo que sigue (no tapa «Ahora»). Ocupa el ancho del bloque
     (unidades del contenedor .cifras): cada columna corre el panel a la izquierda lo que miden las anteriores. */
  .resumen-inicio .cifras { --g: var(--e-2); container-type: inline-size; }
  .resumen-inicio .desglose-panel { max-height: none; overflow: visible; max-width: none; width: 100cqw;
    margin-top: var(--e-2); box-shadow: none; position: relative; top: 0; z-index: 2; }
  .resumen-inicio .periodo .cifra:nth-child(2) .desglose-panel { margin-left: calc((100cqw + var(--g)) / -3); }
  .resumen-inicio .periodo .cifra:nth-child(3) .desglose-panel { margin-left: calc((100cqw + var(--g)) * -2 / 3); }
  .resumen-inicio .ahora .cifra:nth-child(2) .desglose-panel { margin-left: calc((100cqw + var(--g)) / -2); }
}

/* ==========================================================================================
   v4.7 · Jerarquía de Inicio, estados claros en altas y aperturas, ayuda y práctica
   ========================================================================================== */

/* Inicio: el resumen de cada cifra es el mismo control que abre su desglose. Tono secundario, sin pastilla. */
.desglose.con-resumen > summary { font-weight: 400; color: var(--tinta-3); padding: 0 6px; margin-left: -6px; border-radius: 6px; text-align: left; }
.desglose.con-resumen > summary:hover { background: transparent; color: var(--tinta); }
.desglose.con-resumen > summary:hover .det-largo { text-decoration: underline; text-underline-offset: 3px; }
.desglose.con-resumen[open] > summary { background: transparent; color: var(--tinta-2); }
.desglose.con-resumen > summary .ic { color: var(--tinta-3); flex: none; }
.desglose.con-resumen .det-corto { display: none; }
.resumen-inicio .grupo-titulo { color: var(--tinta); }
.resumen-inicio .grupo-nota { color: var(--tinta-3); }
.resumen-inicio .cifra { min-width: 0; }
.desglose.con-resumen > summary { max-width: 100%; }
.desglose.con-resumen .det-largo { min-width: 0; white-space: normal; }
@media (max-width: 759px) {
  .resumen-inicio .desglose.con-resumen .det-largo { display: none; }
  .resumen-inicio .desglose.con-resumen .det-corto { display: inline; }
}

/* Producto recién creado: qué falta para poder venderlo. */
.panel-creado { margin: 0 0 var(--e-6); padding: var(--e-4) var(--e-5); border-radius: var(--r); background: var(--superficie);
  border: 1px solid var(--linea); border-left: 4px solid var(--ok); display: grid; gap: var(--e-2); justify-items: start; max-width: 720px; }
.panel-creado h2 { display: flex; align-items: center; gap: var(--e-2); margin: 0; font: 600 var(--t-l)/1.3 var(--f-titulo); }
.panel-creado h2 .ic { color: var(--ok); }
.panel-creado p { margin: 0; max-width: 62ch; }

/* Aperturas: si ya existe, un estado y no un formulario. */
.estado-listo { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-s); font-weight: 600; color: var(--ok); }
.apertura-hecha { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.apertura-hecha .tarjeta-cab { width: 100%; }
.apertura-importe { margin: 0; font: 700 var(--t-2xl)/1.1 var(--f-titulo); letter-spacing: -.02em; }
.apertura-hecha .btn { margin-top: auto; }
.ya-cargadas { margin-top: var(--e-4); border-top: 1px solid var(--linea); padding-top: var(--e-2); }
.ya-cargadas > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; font-size: var(--t-s); color: var(--tinta-2); }
.filas-simples { list-style: none; margin: 0; padding: 0; }
.filas-simples li { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 36px; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.filas-simples li:last-child { border-bottom: 0; }

/* «Ir a la venta»: invisible hasta recibir el foco con teclado; no ocupa lugar en el catálogo. */
.catalogo-cab { position: relative; }
.salto-venta { position: absolute; left: -9999px; top: auto; z-index: 30; }
.salto-venta:focus { position: static; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--e-4); margin: var(--e-2) 0 0;
  border-radius: var(--r-pill); background: var(--tinta); color: var(--superficie); font-weight: 600; text-decoration: none; box-shadow: var(--foco); }
.carrito-invitacion:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento-texto); border-radius: var(--r); }

/* --- Ayuda: entrada en el menú (computadora) y en la barra superior (celular) --------------------- */
.nav-ayuda { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3); border: 0; border-radius: var(--r-s);
  background: none; font: 500 var(--t-m)/1.2 var(--f-texto); color: var(--tinta-2); cursor: pointer; text-align: left; border-top: 1px solid var(--linea); border-radius: 0; }
.nav-ayuda .ic { color: var(--tinta-3); }
.nav-ayuda:hover { background: var(--superficie-3); color: var(--tinta); border-radius: var(--r-s); }
.nav-ayuda:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-s); }
.ayuda-movil { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-pill);
  background: none; font: 500 var(--t-s)/1 var(--f-texto); color: var(--tinta-2); cursor: pointer; }
.ayuda-movil .ic { width: 20px; height: 20px; color: var(--tinta-2); }
.ayuda-movil:focus-visible { outline: none; box-shadow: var(--foco); }

/* Panel: hoja desde abajo en celular; columna a la derecha en computadora, sin tapar el centro del trabajo. */
.ayuda-hoja[open] { display: flex; flex-direction: column; }
.ayuda-hoja .dialogo-cab h2 { display: flex; align-items: center; gap: var(--e-2); }
@media (min-width: 1024px) {
  dialog.ayuda-hoja { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(100%, 520px); border-radius: var(--r-xl) 0 0 var(--r-xl); }
  dialog.ayuda-hoja[open] { animation: deslizar .2s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes deslizar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.ayuda-centro { display: grid; gap: var(--e-6); }
.ayuda-pagina .ayuda-centro { max-width: 760px; }
.ay-contexto { margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.ay-practica { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinta); }
.ay-retomar { padding: var(--e-3) var(--e-4); border-radius: var(--r); background: var(--acento-suave); border: 1px solid var(--acento-borde); }
.ay-retomar p { font-size: var(--t-s); }
.ay-accesos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ay-accesos a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--e-3); border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.ay-accesos a:hover { border-color: var(--linea-fuerte); }
.ay-seccion :is(h2, h3):not(.ay-sub) { font: 700 var(--t-l)/1.3 var(--f-titulo); margin: 0 0 var(--e-3); scroll-margin-top: var(--e-4); }
.ay-seccion > p { margin: 0 0 var(--e-3); color: var(--tinta-2); max-width: 62ch; }
.ay-sub { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); margin: var(--e-4) 0 var(--e-2); }
.ay-sub:first-of-type { margin-top: 0; }
.ay-primeros { margin: 0 0 var(--e-2); padding-left: 1.3em; display: grid; gap: var(--e-2); }
.ay-lista { border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie); }
.ay-tarea + .ay-tarea { border-top: 1px solid var(--linea); }
.ay-tarea > summary { list-style: none; display: flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: var(--e-2) var(--e-4);
  cursor: pointer; font-weight: 500; scroll-margin-top: var(--e-4); }
.ay-tarea > summary::-webkit-details-marker { display: none; }
.ay-tarea > summary .ay-tarea-t { flex: 1; }
.ay-tarea > summary .ic { color: var(--tinta-3); transition: transform var(--rapido); flex: none; }
.ay-tarea[open] > summary .ic { transform: rotate(180deg); }
.ay-tarea > summary:hover { background: var(--superficie-2); }
.ay-tarea > summary:focus-visible { outline: none; box-shadow: inset var(--foco); }
.ay-tarea-cuerpo { padding: 0 var(--e-4) var(--e-4); }
.ay-para { margin: 0 0 var(--e-2); color: var(--tinta-2); }
.ay-pasos { margin: 0 0 var(--e-3); padding-left: 1.4em; display: grid; gap: var(--e-2); }
.ay-pasos li::marker { font-weight: 600; color: var(--tinta-3); }
.ay-nota { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--tinta-3); }
.ay-resultado { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); background: var(--superficie-2); font-size: var(--t-s); }
.ay-acciones, .acciones-fila { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.ay-aviso-real { display: flex; gap: 6px; align-items: flex-start; margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--tinta-3); }
.ay-aviso-real .ic { flex: none; margin-top: 2px; }
@media (min-width: 1024px) { .ay-pasos .solo-movil { display: none; } }

/* --- Práctica: franja siempre visible, distinta de las sedes y de «Todas las sedes» --------------- */
.franja-practica { position: sticky; top: 0; z-index: 19; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4);
  padding: var(--e-2) var(--e-4); background: repeating-linear-gradient(135deg, #efece4 0 12px, #e6e2d8 12px 24px);
  border-bottom: 1px solid var(--linea-fuerte); color: var(--tinta); }
.fp-marca { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--tinta); color: var(--superficie); font: 700 var(--t-s)/1.2 var(--f-texto); }
.fp-texto { margin: 0; flex: 1 1 260px; font-size: var(--t-s); }
.fp-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fp-acciones form { margin: 0; }
.fp-acciones .btn.fantasma { background: var(--superficie); }
@media (max-width: 1023px) { .franja-practica { top: var(--barra-movil); } .fp-texto { display: none; } }
@media (max-width: 599px) { .franja-practica { gap: 6px var(--e-2); padding: 6px var(--e-3); } .fp-acciones { gap: 6px; } .fp-acciones .btn.chico { padding-inline: 10px; } }

.practica-entrada { max-width: 680px; display: grid; gap: var(--e-4); justify-items: start; }
.practica-entrada h2, .practica-en-curso h2 { display: flex; align-items: center; gap: var(--e-2); margin: 0; font: 700 var(--t-l)/1.3 var(--f-titulo); }
.practica-en-curso { margin-bottom: var(--e-6); display: grid; gap: var(--e-3); max-width: 720px; border-left: 4px solid var(--tinta); }
.practica-en-curso .ceja { margin: 0; }
.ejercicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); max-width: 760px; }
.ejercicio { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r); background: var(--superficie);
  border: 1px solid var(--linea); scroll-margin-top: 96px; }
.ejercicio:target { border-color: var(--tinta); box-shadow: var(--sombra-2); }
.ej-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3);
  font: 700 var(--t-s)/1 var(--f-titulo); color: var(--tinta-2); }
.ej-cuerpo { flex: 1; min-width: 0; }
.ej-cuerpo h3 { margin: 0; font: 600 var(--t-m)/1.3 var(--f-texto); }
.ej-cuerpo p { margin: 2px 0 0; font-size: var(--t-s); color: var(--tinta-3); }
.ejercicio form { margin: 0; flex: none; }
@media (max-width: 479px) { .ejercicio { flex-wrap: wrap; } .ejercicio form { margin-left: 44px; } }
.resultado-ejercicio { max-width: 720px; display: grid; gap: var(--e-3); border-left: 4px solid var(--ok); }
.resultado-ejercicio.falta { border-left-color: var(--alerta); }
.resultado-ejercicio h2 { display: flex; align-items: center; gap: var(--e-2); margin: 0; font: 700 var(--t-l)/1.3 var(--f-titulo); }
.resultado-ejercicio.ok h2 .ic { color: var(--ok); }
.resultado-ejercicio.falta h2 .ic { color: var(--alerta); }
.res-datos { margin: 0; display: grid; gap: var(--e-3); }
.res-datos dt { font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.res-datos dd { margin: 2px 0 0; }
.res-donde { margin: 0; padding-left: 1.2em; display: grid; gap: var(--e-1); }
.res-pista { margin: 0; max-width: 62ch; }

/* --- Bienvenida: un panel en Inicio, no un bloqueo --------------------------------------------------- */
.bienvenida { margin: 0 0 var(--e-6); padding: var(--e-5); border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: var(--sombra-2); border-top: 4px solid var(--acento); }
.bv-cab { display: flex; align-items: flex-start; gap: var(--e-3); }
.bv-cab h2 { flex: 1; margin: 0; font: 700 var(--t-xl)/1.25 var(--f-titulo); }
.bv-cab form { margin: -6px -6px 0 0; }
.bv-items { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bv-items li { display: flex; gap: var(--e-3); align-items: flex-start; }
.bv-items li > .ic { flex: none; width: 22px; height: 22px; color: var(--acento-texto); margin-top: 2px; }
.bv-items strong { display: block; margin-bottom: 2px; }
.bv-items p { margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.bv-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.bv-acciones form { display: contents; }
.bv-pie { margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--tinta-3); }

/* --- Guía en pantalla: tarjeta que no tapa el control ni los importes -------------------------------- */
.guia-tarjeta { position: fixed; z-index: 60; left: calc(var(--lateral) + var(--e-6)); bottom: var(--e-6); width: min(380px, calc(100vw - 2 * var(--e-4)));
  max-height: min(48vh, 420px); overflow-y: auto; padding: var(--e-4); border-radius: var(--r-l); background: var(--superficie);
  border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-3); outline: none; }
.guia-tarjeta.arriba { top: var(--e-6); bottom: auto; }
.guia-tarjeta:focus-visible { box-shadow: var(--sombra-3), var(--foco); }
dialog .guia-tarjeta { left: var(--e-4); }
@media (max-width: 1023px) {
  .guia-tarjeta { left: var(--e-4); right: var(--e-4); width: auto; bottom: calc(var(--nav-movil) + var(--e-2) + env(safe-area-inset-bottom)); max-height: 38vh; }
  .guia-tarjeta.arriba { top: calc(var(--barra-movil) + var(--e-2)); bottom: auto; }
  dialog .guia-tarjeta { bottom: auto; top: var(--e-2); }
}
.gt-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin: -4px -6px 0 0; }
.gt-ceja { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); }
.gt-titulo { margin: 2px 0 var(--e-2); font: 700 var(--t-m)/1.3 var(--f-titulo); }
.gt-texto { margin: 0 0 var(--e-2); font-size: var(--t-m); }
.gt-nota { margin: 0 0 var(--e-2); font-size: var(--t-s); color: var(--tinta-2); padding-left: var(--e-3); border-left: 2px solid var(--linea-fuerte); }
.gt-listo { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--e-2); color: var(--ok); }
.gt-pie { margin: var(--e-1) 0 var(--e-2); }
.gt-pie .vinculo { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.gt-ambito { display: flex; align-items: flex-start; gap: 6px; margin: var(--e-2) 0 0; padding-top: var(--e-2); border-top: 1px solid var(--linea);
  font-size: var(--t-xs); color: var(--tinta-3); }
.gt-ambito.practica { color: var(--tinta); font-weight: 600; }
.gt-ambito .ic { flex: none; margin-top: 1px; }
.guia-tarjeta .acciones-fila { margin: var(--e-2) 0 0; }
.guia-tarjeta .aviso-salir { margin-top: var(--e-3); }
.guia-objetivo { outline: 3px solid var(--host-negro) !important; outline-offset: 3px; box-shadow: 0 0 0 8px rgb(255 204 23 / .6) !important; border-radius: 6px; scroll-margin: 120px; }
@media (prefers-reduced-motion: no-preference) { .guia-objetivo { animation: latido 1.6s ease-in-out 2; } }
@keyframes latido { 50% { outline-offset: 6px; } }

/* «¿Qué hago?» junto a un aviso: abre la explicación en el panel de Ayuda, sin salir. */
.que-hago { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--e-2); margin-top: var(--e-1); border: 1px solid currentColor;
  border-radius: var(--r-pill); background: transparent; color: inherit; font: 600 var(--t-xs)/1 var(--f-texto); cursor: pointer; }
.que-hago:focus-visible { outline: none; box-shadow: var(--foco); }

/* Barra superior en celular: logo, Ayuda y sede de trabajo. La cuenta está en «Más», abajo (antes estaba repetida). */
.barra-movil .sede-pill { white-space: nowrap; }
@media (max-width: 380px) { .barra-movil .sede-pill { padding: 0 10px; gap: 6px; } .ayuda-movil { padding: 0 4px; } }

/* Guía: hay un aviso de error en la pantalla */
.guia-tarjeta .gt-error { display: flex; gap: var(--e-2); align-items: flex-start; color: var(--error, #b42318); font-weight: 600; margin: 0 0 var(--e-2); }
.guia-tarjeta .gt-error .ic { flex: none; margin-top: 2px; }

/* v4.8 · Preparar el arranque ---------------------------------------------------------------- */
.prep-progreso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin: 0 0 var(--e-5); }
.prep-barra { flex: 1 1 220px; max-width: 420px; height: 8px; border-radius: var(--r-pill); background: var(--superficie-3); overflow: hidden; }
.prep-barra span { display: block; height: 100%; background: var(--host-negro); border-radius: inherit; }
.prep-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.prep-paso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-4) var(--e-5); }
.prep-paso-cab { display: flex; gap: var(--e-3); align-items: flex-start; }
.prep-paso-cab h2 { margin: 0; font-size: var(--t-l); }
.prep-num { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--host-negro); color: var(--host-amarillo); font: 700 var(--t-s)/1 var(--f-titulo); }
.prep-estados { list-style: none; margin: var(--e-3) 0 0 42px; padding: 0; }
.prep-estados li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  padding: var(--e-2) 0; border-top: 1px solid var(--linea); }
.prep-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.prep-texto { font-size: var(--t-s); color: var(--tinta-2); }
@media (max-width: 599px) {
  .prep-paso { padding: var(--e-3) var(--e-4); }
  .prep-estados { margin-left: 0; }
  .prep-estados li { grid-template-columns: minmax(0, 1fr) auto; }
  .prep-estados .prep-estado { grid-column: 1 / -1; grid-row: 2; }
}
.prep-sedes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin: calc(-1 * var(--e-2)) 0 var(--e-5); }
.prep-sedes .segmento { min-width: min(100%, 320px); }
.prep-sedes .segmento a[aria-current="true"] { color: var(--acento-texto); }
.prep-mini-pasos { margin: 0 0 var(--e-4); padding-left: 1.2rem; display: grid; gap: var(--e-1); font-size: var(--t-s); color: var(--tinta-2); }
.prep-cifra { margin: 0 0 var(--e-3); font-size: var(--t-m); }
.prep-cifra strong { font: 700 var(--t-xl)/1 var(--f-titulo); margin-right: 4px; }
.prep-frase { font-size: var(--t-m); max-width: 62ch; }
.prep-revision { border-color: var(--acento-borde); }
.prep-revision .efecto-lista { margin-top: var(--e-3); }
.prep-lineas { max-height: 320px; overflow: auto; margin: var(--e-2) 0; }
.prep-fecha { max-width: 420px; margin-bottom: var(--e-3); }
.prep-hechos > summary, .prep-hechos-cab { cursor: pointer; display: flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-5); font-weight: 600; }
.prep-hechos[open] > summary { border-bottom: 1px solid var(--linea); }
.prep-deuda { flex-wrap: wrap; }
.prep-corregir { flex: 1 1 100%; }
.prep-corregir > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--t-s); color: var(--acento-texto); }
.prep-corregir form { margin-top: var(--e-2); max-width: 420px; }
.pila-chica > * + * { margin-top: var(--e-2); }
/* Botones de un paso: el texto nombra la sede, así que puede necesitar dos líneas en pantallas angostas. */
.prep-listo .btn, .prep .barra-confirmar .btn { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: 8px; }
.prep-resumen { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-4); padding: 0; }
.prep-resumen li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--superficie);
  border: 1px solid var(--linea); font-size: var(--t-s); color: var(--tinta-2); }
.prep-resumen li strong { color: var(--tinta); font-size: var(--t-m); }
.prep-resumen li.alerta { border-color: var(--host-amarillo); background: #fff8dc; }
.prep-resumen li.error { border-color: var(--error-borde); color: var(--error); }
.contar { display: flex; align-items: center; gap: var(--e-2); }
.contar input { width: 110px; text-align: right; }
.sin-borde { border: 0; padding: 0; margin: 0 0 var(--e-4); min-width: 0; }
.etiqueta-grupo { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }

/* Importar catálogo: vista previa */
.imp-cab { padding: var(--e-4) var(--e-5) var(--e-2); }
.imp-cab h2 { margin: 0; font-size: var(--t-l); }
.imp-filas { list-style: none; margin: 0; padding: 0; }
.imp-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-2) var(--e-4); padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); }
.imp-dato, .imp-efecto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-efecto .etq { align-self: flex-start; }
.imp-decidir { grid-column: 1 / -1; border: 0; margin: var(--e-1) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.imp-decidir .segmento { max-width: 420px; }
.imp-dudoso { border-color: var(--host-amarillo); }
.imp-dudoso .imp-cab { background: #fff8dc; border-radius: var(--r-l) var(--r-l) 0 0; }
.imp-error .imp-cab h2 { color: var(--error); }
@media (max-width: 599px) { .imp-fila { grid-template-columns: minmax(0, 1fr); padding: var(--e-3) var(--e-4); } }

/* Código para elegir la contraseña */
.codigo-acceso { max-width: 560px; }
.codigo-grande { margin: var(--e-2) 0 var(--e-4); font: 700 clamp(28px, 7vw, 40px)/1.1 var(--f-titulo); letter-spacing: .08em; }
.datos-codigo { display: grid; gap: var(--e-2); margin: 0 0 var(--e-4); }
.datos-codigo div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--e-3); }
.datos-codigo dt { color: var(--tinta-3); font-size: var(--t-s); }
.datos-codigo dd { margin: 0; }

/* Cuando la barra inferior tiene dos acciones visibles en celular (por ejemplo «Actualizar la vista previa» e
   «Incorporar al catálogo»), no caben en una sola fila: ahí comparten la fila y el texto se parte en dos líneas.
   No cuenta un botón que en celular está oculto (`solo-escritorio`): esa barra sigue siendo de una sola acción. */
@media (max-width: 599px) {
  .barra-confirmar:has(.en-linea .btn:not(.solo-escritorio) + .btn:not(.solo-escritorio)) { flex-wrap: wrap; }
  .barra-confirmar:has(.en-linea .btn:not(.solo-escritorio) + .btn:not(.solo-escritorio)) .en-linea { width: 100%; flex: 1 1 100%; }
  .barra-confirmar:has(.en-linea .btn:not(.solo-escritorio) + .btn:not(.solo-escritorio)) .en-linea .btn { flex: 1 1 45%; max-width: 100%; white-space: normal; height: auto; min-height: 44px; padding-block: 8px; }
}

/* Botón cuyo texto nombra una acción larga: puede ocupar dos líneas en pantallas angostas en vez de desbordar. */
.btn.ancho-libre { max-width: 100%; white-space: normal; height: auto; min-height: 44px; padding-block: 8px; }

/* v4.8.1 · Sede de trabajo y sede que se prepara, siempre rotuladas ---------------------------------------- */
.sede-pill .pill-datos { display: grid; text-align: left; line-height: 1.15; }
.sede-pill .pill-datos small { font-size: 11px; font-weight: 500; color: var(--tinta-3); }
.prep-contexto { display: flex; gap: var(--e-2); align-items: flex-start; margin: calc(-1 * var(--e-2)) 0 var(--e-5); max-width: 72ch;
                 font-size: var(--t-s); color: var(--tinta-2); }
.prep-contexto .ic { flex: none; margin-top: 3px; color: var(--acento-texto); }
.prep-donde { margin: var(--e-3) 0 0; font-weight: 600; }

/* --- v4.9 · Máquina de Orfeo (ControlGlobal) ---------------------------------------------------------- */
/* QR máquina: otra billetera; se distingue del QR del mostrador. Crédito y «para revisar» no son ventas. */
.medio-etq.m-qr-maquina { background: var(--info-suave); color: var(--info); border-color: var(--info-borde); border-style: dashed; }
.medio-etq.m-credito { background: var(--superficie-3); color: var(--tinta-2); border-color: var(--linea-fuerte); }
.medio-etq.m-revisar { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta-borde); }
.tabla-registro tr.solo-consumo .concepto { color: var(--tinta-2); }
.tabla-registro .estado-op.revisar { background: var(--alerta-suave); color: var(--alerta); }
.registro-maquina { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-3); }
.registro-maquina .ic { flex: none; margin-top: 2px; }
.registro-maquina.atrasada { color: var(--alerta); }
details.desplegable-tarjeta > summary { list-style: none; cursor: pointer; }
details.desplegable-tarjeta > summary::-webkit-details-marker { display: none; }
details.desplegable-tarjeta > summary h2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
details.desplegable-tarjeta[open] > summary { margin-bottom: var(--e-3); }
.lista-revisar li { margin-bottom: var(--e-2); }
.lista-revisar .chico { display: block; overflow-wrap: anywhere; }
.tabla-desplazable { overflow-x: auto; margin-top: var(--e-3); }
.consumo-nominal { margin: var(--e-2) 0 0; }
/* La marca «Revisar» de un consumo de máquina va debajo del nombre: no ensancha la columna en computadora. */
@media (min-width: 760px) {
  .tabla-registro tr.tipo-maquina .estado-op { display: block; width: fit-content; margin: 2px 0 0 36px; }
}
/* El día del efectivo inicial, «Punto de partida · no es ingreso del período» pasa a dos líneas: con los consumos de
   máquina la tabla ya no entraba a 1280 px (la fila del efectivo inicial ya sobresalía unos píxeles en la 4.8.1). */
@media (min-width: 760px) {
  .tabla-registro tr.tipo-apertura_caja .c-efecto { white-space: normal; min-width: 17ch; }
}
/* Entre celular y computadora ancha, «Consumo de máquina» puede ir en dos líneas para no ensanchar el registro. */
@media (min-width: 760px) and (max-width: 1199px) {
  .tabla-registro tr.tipo-maquina .c-op { white-space: normal; }
  .tabla-registro tr.tipo-maquina .c-op .op-enlace { display: inline-block; max-width: 7.5em; vertical-align: middle; }
}

/* v4.10 · Precio editable en la venta ------------------------------------------------------------- */
.producto .precio.sin-precio { font-size: var(--t-s); font-weight: 600; color: var(--alerta); }
.linea .precio-zona { grid-column: 1 / -1; min-width: 0; }
.precio-linea-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-3); }
.precio-linea { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px; margin-left: -10px;
  border: 1px dashed transparent; border-radius: var(--r-s); background: none; color: var(--tinta-2); font: inherit; font-size: var(--t-s); cursor: pointer; }
.precio-linea .num { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.precio-linea .ic { color: var(--tinta-3); }
.precio-linea:hover, .precio-linea[aria-expanded="true"] { border-color: var(--linea-fuerte); background: var(--superficie-2); }
.precio-linea:focus-visible { outline: none; box-shadow: var(--foco); }
.precio-linea.editado { border-color: var(--acento-borde); background: var(--acento-suave); }
.precio-linea.editado .num { color: var(--acento-texto); }
.precio-linea.sin-precio { border-color: var(--alerta-borde); background: var(--alerta-suave); color: var(--alerta); font-weight: 600; }
.precio-linea.sin-precio .ic { color: var(--alerta); }
.pl-habitual { font-size: var(--t-s); color: var(--tinta-3); }
.pl-habitual .vinculo { font-size: inherit; min-height: 40px; }
.editor-precio { margin-top: var(--e-2); padding: var(--e-3); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); }
.editor-precio > label { display: block; font-weight: 500; margin-bottom: var(--e-2); }
.pp-fila { display: flex; align-items: center; gap: var(--e-2); }
.pp-fila .pp-signo { color: var(--tinta-3); font-weight: 600; }
.pp-fila input { flex: 1; min-width: 0; max-width: 11em; font-size: var(--t-l); font-variant-numeric: tabular-nums; }
.pp-fila .btn { flex: none; min-height: var(--toque); }
.editor-precio .ayuda { margin: var(--e-2) 0 0; }
.editor-precio .error-campo { margin: var(--e-1) 0 0; }
.editor-precio .pp-habitual { padding-bottom: 0; }
.editor-precio .pp-habitual-ayuda { margin-top: 0; padding-left: calc(18px + var(--e-3)); }
.precios-nuevos .pn-aplicado { display: block; font-size: var(--t-xs); color: var(--tinta-2); text-align: right; }
.precio-linea-meta { color: var(--tinta-3); }
/* El botón de confirmar puede nombrar un producto largo («Revisá el precio de …»): que baje de línea en vez de cortarse. */
#confirmar { white-space: normal; line-height: 1.25; text-align: center; padding-block: 8px; overflow-wrap: anywhere; }

/* =========================================================================================
   HOST OS · Salas y horas (v4.11). Mismos tokens; el acento sigue a la sede (VB cian, Orfeo magenta).
   La entrada común (Store · Salas) usa el negro y amarillo de HOST.
   ========================================================================================= */
.modulos { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--superficie-3); }
.modulos a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px;
             border-radius: var(--r-pill); font: 600 var(--t-s)/1 var(--f-texto); color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.modulos a .ic { color: var(--tinta-3); }
.modulos a:hover { color: var(--tinta); background: rgb(255 255 255 / .6); }
.modulos a[aria-current="page"] { background: var(--host-negro); color: #fff; box-shadow: var(--sombra-1); }
.modulos a[aria-current="page"] .ic { color: var(--host-amarillo); }
.lateral .modulos { margin: 0 var(--e-1); }
.modulos.movil { flex: none; }
.modulos.movil a { min-height: 36px; padding: 0 10px; }
@media (max-width: 380px) { .modulos.movil a .ic { display: none; } }
/* Marca de Salas: logo genérico oficial de HOST (imagen, nunca redibujado) y el rótulo «Salas» aparte. */
.marca-modulo { display: flex; align-items: center; gap: 10px; margin: 0 var(--e-2); text-decoration: none; color: var(--tinta); }
.marca-modulo .logo-host { display: block; width: 104px; height: auto; }
.marca-modulo .mm-modulo { font: 700 var(--t-s)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .1em; color: var(--tinta);
  padding: 5px 8px; border-radius: 6px; background: var(--host-amarillo, #ffcc17); }
.marca-modulo.movil { margin: 0; gap: 6px; flex: none; }
.marca-modulo.movil .logo-host { width: 50px; }
/* En el celular, el rótulo «Salas» es la opción activa del selector Store · Salas, al lado del logo. */
.marca-modulo.movil .mm-modulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 1024px) { .marca-modulo.movil { display: none; } }
.ingreso-caja .logo-ingreso { display: block; width: 168px; height: auto; margin: 0 auto var(--e-6); }
.barra-movil .sede-pill .pill-datos small { display: none; }
@media (min-width: 420px) { .barra-movil .sede-pill .pill-datos small { display: inline; } }

.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-bottom: 2px; color: var(--tinta-3);
          font-size: var(--t-s); text-decoration: none; }
.volver:hover { color: var(--tinta); text-decoration: underline; }
.ml-auto { margin-left: auto; }
.chip-btn.icono { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.etq.acento { background: var(--acento-suave); color: var(--acento-texto); }
.etq-reserva { font-size: var(--t-xs); color: var(--tinta-3); }

/* Estado de Calendar: una línea, siempre honesta */
.estado-cal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: 8px var(--e-3) 8px var(--e-4);
              margin-bottom: var(--e-4); border-radius: var(--r); border: 1px solid var(--linea); background: var(--superficie);
              font-size: var(--t-s); color: var(--tinta-2); }
.estado-cal > .ic { color: var(--tinta-3); }
.estado-cal > span:first-of-type { flex: 1 1 260px; }
.estado-cal-simulado { border-style: dashed; border-color: var(--linea-fuerte); background: var(--superficie-2); }
.estado-cal-desconectado { border-color: var(--alerta-borde); background: var(--alerta-suave); color: var(--alerta); }
.estado-cal-desconectado > .ic { color: var(--alerta); }
.estado-cal form { margin: 0; }

/* Pantalla principal */
.salas-cab h1 { font-size: var(--t-2xl); }
.dias { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-5); }
.dias-lista { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; flex: 1; min-width: 0; }
.dias-lista::-webkit-scrollbar { display: none; }
.dia-chip { flex: none; display: grid; justify-items: center; min-width: 52px; padding: 6px 8px; border-radius: var(--r);
            border: 1px solid var(--linea); background: var(--superficie); text-decoration: none; color: var(--tinta-2); }
.dia-chip small { font-size: var(--t-xs); color: var(--tinta-3); text-transform: capitalize; }
.dia-chip strong { font: 700 var(--t-l)/1.2 var(--f-titulo); }
.dia-chip:hover { border-color: var(--acento-borde); }
.dia-chip[aria-current="date"] { background: var(--acento-suave); border-color: var(--acento-texto); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--acento-texto); }
.dia-chip[aria-current="date"] small { color: var(--acento-texto); }
.otro-dia input { min-height: 36px; padding: 0 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pill); background: var(--superficie);
                  font: inherit; font-size: var(--t-s); color: var(--tinta-2); width: 44px; }
.otro-dia input:focus { width: auto; }
@media (min-width: 700px) { .otro-dia input { width: auto; } }

.sin-marcar { margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r-l); border: 1px solid var(--alerta-borde); background: var(--alerta-suave); }
.sin-marcar h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-m); margin-bottom: var(--e-2); color: var(--alerta); }
.sin-marcar h2 .tenue { color: var(--alerta); opacity: .85; font-weight: 400; }
.sin-marcar .filas { background: var(--superficie); border-radius: var(--r); }
.sin-marcar .fila { padding: var(--e-2) var(--e-3); }
.sin-marcar .cuerpo { text-decoration: none; color: inherit; }
.acciones-marcar { display: flex; gap: 6px; }
.acciones-marcar form { margin: 0; }

.sala-dia { padding: var(--e-4) var(--e-5) var(--e-3); }
.sala-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-3); margin-bottom: var(--e-3); }
.sala-cab h2 { font: 700 var(--t-xl)/1.2 var(--f-titulo); letter-spacing: -.01em; }
.sala-cab .estado-ahora { margin-left: auto; }
.franja { position: relative; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, var(--ok-suave) 0 calc(100% / 13 - 1px), #fff 0 calc(100% / 13));
          border: 1px solid var(--ok-borde); overflow: hidden; }
.fr-bloque { position: absolute; top: 0; bottom: 0; background: var(--acento); }
.fr-bloque.fr-fija { background: repeating-linear-gradient(135deg, var(--acento) 0 6px, var(--acento-oscuro) 6px 9px); }
.fr-bloque.fr-cal { background: repeating-linear-gradient(135deg, #d9a43a 0 5px, #f0d590 5px 9px); }
.fr-ahora { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--host-negro); }
.franja-horas { position: relative; height: 18px; margin: 2px 0 var(--e-2); font-size: 11px; color: var(--tinta-3); }
.franja-horas span { position: absolute; transform: translateX(-50%); }
.franja-horas span:first-child { transform: none; }
.franja-horas span:last-child { transform: translateX(-100%); }

.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { border-top: 1px solid var(--linea); }
.agenda li:first-child { border-top: 0; }
.agenda a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 52px; padding: 6px 0;
            text-decoration: none; color: inherit; }
.ag-hora { font-weight: 600; font-size: var(--t-s); color: var(--tinta-2); }
.ag-txt { min-width: 0; display: grid; }
.ag-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-meta { font-size: var(--t-s); color: var(--tinta-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.ag-meta .ic { width: 13px; height: 13px; }
.ag-libre a .ag-txt { color: var(--ok); font-weight: 500; }
.ag-accion { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
             border: 1px solid var(--acento-borde); background: var(--acento-suave); color: var(--acento-texto); font-size: var(--t-s); font-weight: 600; }
.ag-libre a:hover .ag-accion { background: var(--acento); color: var(--acento-sobre); border-color: var(--acento); }
.ag-ocupado a { position: relative; padding-left: 12px; }
.ag-ocupado a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: var(--acento); }
.ag-ocupado a:hover strong { text-decoration: underline; }
.ag-ocupado.pasada .ag-txt strong, .ag-ocupado.pasada .ag-hora { color: var(--tinta-3); }
.ag-externo a { position: relative; padding-left: 12px; }
.ag-externo a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 2px; background: #d9a43a; }
.ag-vacio { padding: var(--e-3) 0; font-size: var(--t-s); }
@media (max-width: 599px) {
  .sala-dia { padding: var(--e-4); }
  .agenda a { grid-template-columns: 78px minmax(0, 1fr) auto; gap: var(--e-2); }
  .ag-accion { padding: 0 10px; }
}
.proximas .fila .cuerpo { text-decoration: none; color: inherit; }

/* Reservar (v4.12): un solo formulario, una columna. El resumen va debajo del horario. */
.reservar { display: grid; gap: var(--e-4); max-width: 640px; }
.reservar > .campo, .reservar .reservar-grilla .campo { margin-bottom: 0; }
.reservar-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.reservar-grilla .r-sala, .reservar-grilla .r-fecha { grid-column: span 1; }
@media (max-width: 599px) { .reservar-grilla .r-sala { grid-column: 1 / -1; } .reservar-grilla .r-fecha { grid-column: 1 / -1; } }
.reservar-grilla select, .reservar-grilla input { font-variant-numeric: tabular-nums; }
.mas-opciones > summary { display: inline-flex; align-items: center; min-height: var(--toque); cursor: pointer; color: var(--tinta-2); font-weight: 500; }
.mas-opciones[open] { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: 0 var(--e-4) var(--e-4); }
.mas-opciones .campo:last-child { margin-bottom: 0; }
.campo.exceso input { border-color: var(--alerta-borde); }
.reservar-campos { display: grid; gap: var(--e-4); }
.paso-r { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-4) var(--e-5) var(--e-5); }
.paso-r h2 { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.pr-num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--acento-suave);
          color: var(--acento-texto); font: 700 var(--t-s)/1 var(--f-titulo); }
.paso-r .campo:last-child { margin-bottom: 0; }
.sala-unica { display: flex; align-items: center; gap: 6px; margin-bottom: var(--e-3); color: var(--tinta-2); }
.horario { margin-top: var(--e-1); }
.horario select { font-variant-numeric: tabular-nums; }
.duraciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-2); }
.repetir { margin-top: var(--e-3); }
.responsable { position: relative; }
.resp-elegido { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-3); min-height: var(--toque); padding: 8px 8px 8px var(--e-4);
                border: 1px solid var(--acento-texto); border-radius: var(--r); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento-texto); }
.resp-nombre { font-weight: 600; }
.resp-cuenta { font-size: var(--t-s); color: var(--acento-texto); flex: 1; }
.resp-elegido .btn { margin-left: auto; }
.resp-resultados { position: absolute; z-index: 15; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto;
                   background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r); box-shadow: var(--sombra-2); }
.resp-resultados li { display: grid; padding: 8px 12px; border-radius: var(--r-s); cursor: pointer; }
.resp-resultados li span { font-size: var(--t-s); color: var(--tinta-3); }
.resp-resultados li:hover, .resp-resultados li:focus { background: var(--acento-suave); outline: none; }
.resp-resultados .resp-nueva { color: var(--acento-texto); border-top: 1px solid var(--linea); }
.resp-resultados .resp-sin { color: var(--tinta-3); cursor: default; }

.reservar-resumen { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-3) var(--e-4); }
.reservar-resumen h2 { margin-bottom: var(--e-3); }
#previa[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.sp { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.sp-cuando { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sp-dur { margin-left: auto; padding: 2px 10px; border-radius: var(--r-pill); background: var(--host-negro); color: #fff; font-weight: 600; font-size: var(--t-s); }
.sp-sala { margin: -8px 0 0; font-size: var(--t-s); color: var(--tinta-3); }
.sp-cupo { padding: var(--e-3); border-radius: var(--r); background: var(--superficie-2); border: 1px solid var(--linea); }
.sp-cupo-cab { display: flex; justify-content: space-between; gap: var(--e-2); font-size: var(--t-s); margin-bottom: var(--e-2); }
.sp-lineas { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-s); }
.sp-lineas li { display: flex; justify-content: space-between; gap: var(--e-3); color: var(--tinta-2); }
.sp-lineas .sp-fuerte { color: var(--tinta); font-weight: 600; }
.sp-adicional { padding: var(--e-3); border-radius: var(--r); background: var(--alerta-suave); border: 1px solid var(--alerta-borde); }
.sp-adicional-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); color: var(--alerta); font-weight: 600; }
.sp-adicional-cab strong { font: 700 var(--t-xl)/1.1 var(--f-titulo); color: var(--tinta); }
.sp-det { font-size: var(--t-s); color: var(--tinta-2); margin-top: 4px; }
.sp-nota { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-s); color: var(--tinta-2); margin: 0; }
.sp-sin-costo { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-weight: 600; }
.sp-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-s); color: var(--error); margin: 0; }
.sp-error .ic, .sp-nota .ic { margin-top: 2px; }
.sp-vacio { display: flex; gap: var(--e-3); align-items: flex-start; color: var(--tinta-3); font-size: var(--t-s); margin-bottom: var(--e-4); }
.sp-vacio .ic { flex: none; color: var(--linea-fuerte); width: 24px; height: 24px; }
.sp-vacio p { margin: 0; }

/* Medidor de horas: usadas (sólido), comprometidas (rayado), disponible (fondo). Siempre con cifras al lado. */
.medidor { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--ok-suave); border: 1px solid var(--ok-borde); }
.medidor.compacto { height: 8px; border-radius: 4px; }
.m-usado { background: var(--host-negro); }
.m-comp { background: repeating-linear-gradient(135deg, var(--acento) 0 4px, var(--acento-oscuro) 4px 7px); }
.m-esta { background: var(--acento); }
.leyenda .ley, .ch-partes .ley { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.ch-partes .ley { margin-left: 0; }
.ley.m-libre { background: var(--ok-suave); border: 1px solid var(--ok-borde); }

/* Detalle de reserva */
.reserva-hero { display: grid; gap: var(--e-4); }
@media (min-width: 760px) { .reserva-hero { grid-template-columns: 240px minmax(0, 1fr); } }
.rh-cuando { display: grid; align-content: start; gap: 2px; padding-right: var(--e-4); }
.rh-dia { color: var(--tinta-2); }
.rh-hora { font: 700 var(--t-3xl)/1.1 var(--f-titulo); letter-spacing: -.02em; }
.rh-dur { color: var(--acento-texto); font-weight: 600; }
.rh-datos { margin: 0; display: grid; gap: var(--e-2); }
.rh-datos > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-3); }
.rh-datos dt { color: var(--tinta-3); font-size: var(--t-s); padding-top: 2px; }
.rh-datos dd { margin: 0; }
.cal-linea { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); }
.cal-linea::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); }
.cal-linea.cal-ok::before { background: var(--ok); }
.cal-linea.cal-alerta::before { background: #d9a43a; }
.cal-linea.cal-error { color: var(--error); }
.cal-linea.cal-error::before { background: var(--error); }
.efecto-horas { margin-top: var(--e-4); }
.efecto-horas h2 { margin-bottom: var(--e-2); }
.acciones-reserva { margin: var(--e-5) 0; }
.acciones-reserva form { margin: 0; }
.regla { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r); }
.regla.ok { background: var(--ok-suave); color: var(--ok); border: 1px solid var(--ok-borde); }
.regla.alerta { background: var(--alerta-suave); color: var(--alerta); border: 1px solid var(--alerta-borde); }
.regla .ic { flex: none; margin-top: 2px; }
.historial { list-style: none; margin: 0; padding: 0 0 0 var(--e-4); border-left: 2px solid var(--linea); display: grid; gap: var(--e-3); }
.historial li { display: grid; gap: 2px; position: relative; }
.historial li::before { content: ""; position: absolute; left: calc(-1 * var(--e-4) - 6px); top: 6px; width: 10px; height: 10px; border-radius: 50%;
                         background: var(--superficie); border: 2px solid var(--linea-fuerte); }
.h-cuando { font-size: var(--t-xs); color: var(--tinta-3); }
.h-texto { font-size: var(--t-s); }

/* Horas */
.barra-mes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-2); }
.barra-mes strong { min-width: 140px; text-align: center; font: 700 var(--t-l)/1.2 var(--f-titulo); }
.barra-mes .buscador { margin: 0; }
.barra-mes .buscador input { min-height: 40px; }
.cuentas { list-style: none; margin: var(--e-3) 0 var(--e-2); padding: 0; }
.cuentas li + li { border-top: 1px solid var(--linea); }
.cuenta-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) auto; align-items: center; gap: var(--e-4);
               padding: var(--e-3) var(--e-5); text-decoration: none; color: inherit; }
.cuenta-fila:hover { background: var(--superficie-2); }
.cf-nombre { display: grid; min-width: 0; }
.cf-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-disp { display: grid; justify-items: end; text-align: right; }
.cf-disp strong { font: 700 var(--t-l)/1.1 var(--f-titulo); }
@media (max-width: 599px) {
  .cuenta-fila { grid-template-columns: minmax(0, 1fr) auto; padding: var(--e-3) var(--e-4); gap: 6px var(--e-3); }
  .cf-medidor { grid-column: 1 / -1; grid-row: 2; }
}
.cupo-hero { display: grid; gap: var(--e-3); }
.ch-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--e-3); }
.ch-principal .etiqueta { flex: 1 1 100%; }
.ch-valor { font: 700 var(--t-3xl)/1 var(--f-titulo); letter-spacing: -.02em; }
.ch-partes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin: 0; }
.ch-partes > div { display: grid; }
.ch-partes dt { font-size: var(--t-s); color: var(--tinta-3); }
.ch-partes dd { margin: 0; font-weight: 600; }
.detalle-horas > summary, details > summary h2 { cursor: pointer; }
details > summary:has(h2) { list-style: none; display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
details > summary:has(h2)::-webkit-details-marker { display: none; }
details > summary:has(h2)::after { content: "▾"; color: var(--tinta-3); transition: transform var(--rapido); }
details[open] > summary:has(h2)::after { transform: rotate(180deg); }
.panel-form h2 { margin-bottom: var(--e-1); }
.panel-form .ayuda { margin-bottom: var(--e-3); }
.agregar-integrante { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-3); }
.agregar-integrante .campo { flex: 1 1 260px; margin-bottom: 0; }

/* Para revisar */
.revisiones { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.revision { border-left: 4px solid #d9a43a; }
.rev-superposicion { border-left-color: var(--error); }
.rev-tipo { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--t-s); font-weight: 600; color: var(--tinta-2); }
.rev-texto { margin-bottom: var(--e-3); }
.rev-acciones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2); }
.rev-acciones form { margin: 0; }
.rev-registrar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-2); flex: 1 1 100%; }
.rev-registrar .campo { flex: 1 1 260px; margin-bottom: 0; }
.rev-nota { flex: 1 1 100%; }
.simulador { border-style: dashed; background: var(--superficie-2); }
.simulador h2 { display: flex; align-items: center; gap: 6px; margin-bottom: var(--e-1); }
.simulador .ayuda { margin-bottom: var(--e-3); }
.simulador .fila-campos { align-items: end; }

/* Configuración */
.config-sala form + .tarifa-bloque { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.tarifa-bloque h3 { margin-bottom: var(--e-2); }
.tarifa-bloque .fila-campos { align-items: end; }
.chico-campo { max-width: 160px; }
.plan-fila { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto auto; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-4); margin: 0; }
.plan-fila + .plan-fila { border-top: 1px solid var(--linea); }
.plan-fila input { min-height: 40px; }
@media (max-width: 599px) { .plan-fila { grid-template-columns: minmax(0, 1fr) 64px auto; } .plan-fila .btn { grid-column: 1 / -1; justify-self: start; } }
.feriados .fila { padding: var(--e-2) var(--e-4); }
/* Ajustes Salas en celular (revisión visual 390 px) */
.ag-libre .ag-txt { display: block; }
.agenda a { grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; }
.ag-hora { white-space: nowrap; }
@media (max-width: 459px) {
  .barra-movil .ayuda-movil span { display: none; }
  .modulos.movil a .ic { display: none; }
  .modulos.movil a { padding: 0 12px; }
}
@media (max-width: 699px) {
  .dias { flex-wrap: wrap; }
  .dias > .chip-btn.icono { display: none; }
  .dias-lista { flex: 1 1 100%; }
  .otro-dia { flex: 1 1 100%; display: flex; align-items: center; gap: var(--e-2); }
  .otro-dia::before { content: "Otro día"; font-size: var(--t-s); color: var(--tinta-3); }
  .otro-dia input { width: auto; flex: 1; }
}
.paso-r fieldset, .dialogo-cuerpo fieldset, .panel-form fieldset { border: 0; padding: 0; margin: 0 0 var(--e-3); min-width: 0; }
.horario { grid-template-columns: 1fr 1fr; }
.filas a.cuerpo, .filas a.cuerpo:hover { text-decoration: none; color: inherit; }
.filas a.cuerpo:hover .titulo { text-decoration: underline; text-decoration-color: var(--linea-fuerte); }
.sp-cuando { display: grid; gap: 2px; }
.sp-horario { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-l); font-weight: 600; }
.sp-dur { margin-left: auto; }
.sp-lineas .num { white-space: nowrap; }
.rev-nota > summary { display: inline-flex; align-items: center; list-style: none; }
.rev-nota > summary::-webkit-details-marker { display: none; }
/* Áreas táctiles de 44 px también en la entrada común (verificación en navegador, 390 px) */
.modulos a, .modulos.movil a { min-height: var(--toque); }
.modulos.movil { padding: 2px; }

/* Resumen en vivo de Salas (v4.12): duración, horas del mes y exceso. Sin precios. */
.reservar-resumen .sp { gap: var(--e-2); margin-bottom: 0; }
.sp-linea { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sp-linea .sp-dur { margin-left: auto; white-space: nowrap; }
.sp-sub, .sp-horas { margin: 0; font-size: var(--t-s); color: var(--tinta-2); }
.sp-sub .ic { vertical-align: -2px; margin-right: 4px; }
.sp-exceso { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r);
             background: var(--alerta-suave); border: 1px solid var(--alerta-borde); color: var(--alerta); font-size: var(--t-s); }
.sp-exceso .ic { flex: none; margin-top: 2px; }
.sp-vacio { display: flex; gap: 8px; align-items: center; color: var(--tinta-3); font-size: var(--t-s); }
.desglose-horas { margin-top: var(--e-3); }
.desglose-horas > summary { display: inline-flex; align-items: center; min-height: var(--toque); cursor: pointer; color: var(--acento-texto); font-weight: 600; }
.desglose-horas[open] > summary { margin-bottom: var(--e-2); }
.desglose-horas .ch-partes { margin-top: var(--e-3); }
.mas-opciones > summary::before, .desglose-horas > summary::before { content: "▸"; margin-right: 6px; font-size: .8em; }
.mas-opciones[open] > summary::before, .desglose-horas[open] > summary::before { content: "▾"; }

/* --- Salas 4.13 --------------------------------------------------------------------------------- */
/* Sede consultada y sala de cada reserva: el color de la sede siempre acompañado por su nombre. */
.punto-sede { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--host-negro); }
.sede-VB .punto-sede, .sala-chip.sede-VB::before { background: var(--host-cian); }
.sede-ORF .punto-sede, .sala-chip.sede-ORF::before { background: var(--host-magenta); }
.sala-chip { display: inline-flex; align-items: center; gap: 6px; }
.sala-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--host-negro); flex: none; }
.aviso-discreto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: calc(-1 * var(--e-2)) 0 var(--e-4); font-size: var(--t-s); color: var(--tinta-2); }
.aviso-discreto .ic { color: var(--alerta); }
.estado-cal.disp-desactualizada, .estado-cal.disp-error { border-color: var(--alerta-borde); background: var(--alerta-suave); color: var(--alerta); }
.estado-cal.disp-solo_hostos { border-style: dashed; }
/* Bolsa de horas en el resumen */
.sp-bolsa { border-left: 3px solid var(--host-negro); padding: 2px 0 2px 10px; display: grid; gap: 2px; }
.sp-bolsa.sede-VB { border-left-color: var(--host-cian); }
.sp-bolsa.sede-ORF { border-left-color: var(--host-magenta); }
.sp-bolsa-nombre { margin: 0; }
.sp-etq { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.sp-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: var(--r); background: var(--superficie-2, #f6f5f2);
            border: 1px solid var(--linea); font-size: var(--t-s); }
.sp-aviso .ic { flex: none; margin-top: 2px; }
.sp-otras > summary { display: inline-flex; align-items: center; min-height: var(--toque); cursor: pointer; color: var(--acento-texto); font-weight: 600; font-size: var(--t-s); }
.sp-otras > summary::before { content: "▸"; margin-right: 6px; font-size: .8em; }
.sp-otras[open] > summary::before { content: "▾"; }
.sp-opciones { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.sp-opciones label { display: flex; gap: 10px; align-items: flex-start; min-height: var(--toque); padding: 8px 10px; border: 1px solid var(--linea);
                     border-radius: var(--r); cursor: pointer; font-size: var(--t-s); }
.sp-opciones input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.sp-opciones label.no-aplica { opacity: .6; cursor: not-allowed; }
.sp-opciones label:has(input:checked) { border-color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--acento-texto); }
/* Acción principal: en el celular queda siempre a mano, fija arriba de la barra inferior. No cambia de lugar al
   tocar (así el toque no se pierde) y nunca tapa el campo que se escribe: al enfocar un campo, la página lo
   desplaza por encima de la barra (scroll-padding). */
.barra-accion { display: grid; gap: var(--e-2); }
@media (max-width: 1023px) {
  html:has(.reservar) { scroll-padding-bottom: calc(var(--nav-movil, 64px) + 96px + env(safe-area-inset-bottom, 0px)); }
  .reservar .barra-accion { position: sticky; bottom: calc(var(--nav-movil, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 5;
    margin: 0 calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-4); background: linear-gradient(180deg, transparent, var(--fondo) 30%); }
}
/* Barra del celular con el logo de HOST: la sede se acorta (con puntos suspensivos) antes que desbordar. */
.barra-movil .sede-pill { min-width: 0; flex: 0 1 auto; }
.barra-movil .sede-pill .pill-datos { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.barra-movil .espacio { min-width: 0; }
.barra-movil:has(.marca-modulo) { gap: 6px; padding-left: var(--e-3); }
.barra-movil:has(.marca-modulo) .modulos a { padding: 0 10px; }
.barra-movil:has(.marca-modulo) .sede-pill { padding: 0 10px; gap: 6px; }
.ay-salas { display: flex; align-items: center; gap: 8px; }
.ay-salas .logo-host { width: 52px; height: auto; }
.ay-salas .mm-modulo { font: 700 .6875rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .1em; padding: 4px 6px; border-radius: 5px;
  background: var(--host-amarillo); color: var(--host-negro); }
/* 4.13.1 · Avisos junto al dato que hay que corregir (no un «Revisá el horario» genérico). */
.campo-error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: var(--t-s); font-weight: 500; color: var(--error); }
.campo-error .ic { flex: none; margin-top: 2px; }
.campo-error.pendiente { color: var(--tinta-3); font-weight: 400; }
.campo-error[hidden] { display: none; }
.reservar-grilla + .campo-error { margin: -4px 0 var(--e-3); }
/* Clientes y asignar pack */
.buscador-grande { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
.buscador-grande input { flex: 1; min-width: 0; }
.cli-fila { grid-template-columns: minmax(0, 1fr) auto; }
.cli-fila .cf-nombre .chico { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-cupo + .cli-cupo { border-top: 1px solid var(--linea); margin-top: var(--e-3); padding-top: var(--e-3); }
.form-pack { max-width: 720px; }
.pk-paso { border: 0; padding: 0; margin: 0 0 var(--e-4); }
.pk-paso > legend { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tinta); margin-bottom: var(--e-2); }
.pk-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--host-amarillo); color: var(--host-negro);
          font: 700 .8125rem/1 var(--f-titulo); }
.pk-alta { margin-top: var(--e-2); }
.opciones.chicas .opcion { min-height: 44px; }
.pk-mas > summary { font-size: var(--t-s); }
.pk-mas [data-nombre-prop] { font-weight: 600; color: var(--tinta); }
.pk-acciones { justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }
@media (max-width: 600px) {
  .pk-acciones { display: grid; grid-template-columns: 1fr; }
  .pk-acciones .btn[value="1"] { order: -1; }
  .encabezado .en-linea { flex-wrap: wrap; }
}
[data-parecidas] .chip-btn, [data-parecidas-titular] .chip-btn { white-space: normal; text-align: left; max-width: 100%; height: auto; min-height: 44px; }
.reservar { grid-template-columns: minmax(0, 1fr); }
.reservar .campo.responsable { grid-template-columns: minmax(0, 1fr); min-width: 0; }
[data-parecidas] .opciones, [data-parecidas].opciones { grid-template-columns: 1fr; }
#confirmar-reserva { white-space: normal; line-height: 1.2; text-wrap: balance; min-width: 0; }
.reservar .barra-accion { min-width: 0; }

/* =====================================================================================================
   4.14 · Salas simple: Agenda (mes + día), Reservar, Clientes. Menos tarjetas y bordes; el color marca sede,
   selección o estado. Funciona igual en computadora y celular.
   ===================================================================================================== */
/* Navegación: «Reservar» se destaca como acción. */
.menu a.nav-reservar { background: var(--host-negro); color: #fff; font-weight: 600; margin: 4px 0; }
.menu a.nav-reservar .ic { color: var(--host-amarillo); }
.menu a.nav-reservar[aria-current="page"] { background: var(--host-negro); color: #fff; box-shadow: inset 0 0 0 2px var(--acento); }
.nav-movil.n4 { grid-template-columns: repeat(4, 1fr); }
.nav-movil a.nav-reservar .ic { background: var(--host-negro); color: var(--host-amarillo); border-radius: 50%; padding: 5px; width: 32px; height: 32px; }
.nav-movil a.nav-reservar::before { display: none; }

/* Calendar y avisos: una línea discreta. */
.estado-cal { border: 0; background: none; padding: 0; margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-3); gap: 6px var(--e-3); }
.estado-cal > span:first-of-type { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 auto; }
.estado-cal-simulado, .estado-cal.disp-solo_hostos { border: 0; background: none; }
.estado-cal-desconectado { background: none; color: var(--tinta-2); }
.estado-cal.con-problema { border: 1px solid var(--alerta-borde); background: var(--alerta-suave); color: var(--alerta); padding: 8px var(--e-3); border-radius: var(--r); }
.aviso-discreto { margin: 0 0 var(--e-3); }
.aviso-discreto.alerta a { color: var(--alerta); font-weight: 600; }

/* Encabezado de la agenda. */
.agenda-cab { flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); }
.agenda-cab h1 { text-transform: none; }
.agenda-nav { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.agenda-nav .chip-btn { min-height: 40px; }
.agenda-nav .chip-btn[aria-current="date"] { border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.segmentado { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pill); overflow: hidden; margin-left: var(--e-2); }
.segmentado a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: var(--t-s); font-weight: 500; text-decoration: none; color: var(--tinta-2); }
.segmentado a[aria-current="page"] { background: var(--tinta); color: #fff; }

/* Mes + detalle del día. */
.agenda-mes { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .agenda-mes { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
  .dia-panel { position: sticky; top: var(--e-4); } }
.mes-grilla { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; }
.mes-grilla th { font: 600 var(--t-xs)/1 var(--f-texto); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px; text-align: left; }
.mes-grilla .d-c { display: none; }
.mes-grilla td { vertical-align: top; height: 104px; padding: 6px 6px 4px; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); cursor: pointer; position: relative; }
.mes-grilla td:first-child { border-left: 0; }
.mes-grilla td:hover { background: var(--superficie-2); }
.mes-grilla td.fuera { background: var(--superficie-2); }
.mes-grilla td.fuera .mc-num { color: var(--tinta-3); }
.mes-grilla td.pasado .mc-items { opacity: .6; }
.mes-grilla td.elegido { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--acento); }
.mc-num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; font-weight: 600; font-size: var(--t-s); text-decoration: none; color: var(--tinta); }
.mes-grilla td.hoy .mc-num { background: var(--host-negro); color: #fff; }
.mc-estado { float: right; font-size: .6875rem; font-weight: 600; color: var(--alerta); background: var(--alerta-suave); border-radius: var(--r-pill); padding: 2px 6px; margin-top: 4px; }
.mc-items { list-style: none; margin: 4px 0 0; padding: 0; font-size: .75rem; line-height: 1.25; }
.mc-items li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; border-radius: 4px; border-left: 3px solid var(--acento); margin-bottom: 2px; background: var(--superficie-2); }
.mc-items li.cal { border-left-color: var(--tinta-3); color: var(--tinta-2); }
.mc-items li.sel { background: var(--acento-suave); font-weight: 600; }
.mc-items a { text-decoration: none; color: inherit; }
.mc-items .num { font-weight: 600; }
.mc-items .mc-mas { border-left: 0; background: none; color: var(--acento-texto); font-weight: 600; }
.mc-cuenta { display: none; }
@media (max-width: 1023px) {
  .mes-grilla th { text-align: center; padding: 8px 0; }
  .mes-grilla .d-l { display: none; } .mes-grilla .d-c { display: inline; }
  .mes-grilla td { height: 58px; padding: 4px 2px; text-align: center; }
  .mc-num { width: 32px; height: 32px; font-size: var(--t-m); }
  .mc-items, .mc-estado { display: none; }
  .mc-cuenta { display: block; margin: 2px auto 0; width: fit-content; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill);
    background: var(--acento-suave); color: var(--acento-texto); font: 700 .75rem/1.3 var(--f-texto); }
  .mes-grilla td.completo .mc-cuenta { background: var(--alerta-suave); color: var(--alerta); }
  .mes-grilla td.completo .mc-cuenta::after { content: " · lleno"; font-weight: 600; }
}
.dia-panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-l); padding: var(--e-4) var(--e-5); scroll-margin-top: var(--e-4); }
.dia-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.dia-panel-cab h2 { font: 700 var(--t-l)/1.2 var(--f-titulo); }
.dia-panel .sala-dia { padding: 0; border: 0; background: none; box-shadow: none; margin-top: var(--e-3); }
.dia-panel .sala-cab { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); margin: var(--e-2) 0 0; }
.agenda .ag-libre a .ag-txt { font-weight: 500; }
.agenda li.sel a { background: var(--acento-suave); border-radius: var(--r-s); box-shadow: inset 3px 0 0 var(--acento); padding-left: 8px; }
.agenda .ag-accion { border: 0; background: none; padding: 0 4px; color: var(--acento-texto); font-weight: 600; font-size: var(--t-s); }
.agenda .ag-libre a:hover .ag-accion { background: none; color: var(--tinta); text-decoration: underline; }
.dia-completo .franja { margin-top: var(--e-2); }
.dias { margin-bottom: var(--e-3); }

/* Reservar: lo mínimo, sala y sede a la vista. */
.lugar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e-2); margin: 0 0 var(--e-4); font-size: var(--t-s); color: var(--tinta-2); }
.lugar .punto-sede { margin-right: 0; }
.lugar .btn { margin-left: auto; }
.reservar-grilla { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .reservar-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.r-horario { border: 0; padding: 0; margin: 0; min-width: 0; }
.horario { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 6px; }
.horario-a { color: var(--tinta-3); font-size: var(--t-s); }
.horario-dur { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tinta-2); font-weight: 600; min-height: 1.2em; }
.horario-dur:not(:empty)::before { content: "Duración: "; font-weight: 400; color: var(--tinta-3); }
select.recien { animation: recien 1.2s ease-out; }
@keyframes recien { from { box-shadow: 0 0 0 3px var(--acento-anillo); border-color: var(--acento); } to { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { select.recien { animation: none; } }
.reservar-resumen { border: 0; background: none; padding: 0; margin: var(--e-2) 0 var(--e-3); box-shadow: none; }
.sp-horas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); margin: 0 0 var(--e-2); padding: 10px var(--e-3);
  border-radius: var(--r); background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--host-negro); }
.sp-horas.sede-VB { border-left-color: var(--host-cian); } .sp-horas.sede-ORF { border-left-color: var(--host-magenta); }
.sp-bolsa-nombre { font-weight: 600; }
.sp-horas .sp-bolsa-nombre::after { content: " ·"; color: var(--tinta-3); font-weight: 400; }
.sp-sugeridos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--t-s); color: var(--tinta-2); }
.sp-sugeridos .chip-btn { min-height: 40px; }
.sp-otras > summary { min-height: 40px; }

/* Fecha con calendario desplegable. */
.fecha-campo { position: relative; display: flex; align-items: stretch; }
.fecha-campo input { flex: 1; min-width: 0; padding-right: 48px; }
.fecha-abrir { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; border: 0; background: none; color: var(--tinta-2); cursor: pointer; border-radius: var(--r-s); }
.fecha-abrir:hover { background: var(--superficie-3); color: var(--tinta); }
.calendario-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 32px); padding: var(--e-3);
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-l); box-shadow: var(--sombra-3); }
.calendario-pop.a-la-derecha { left: auto; right: 0; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-titulo { font-weight: 600; text-transform: capitalize; }
.cal-nav { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.cal-nav:hover { background: var(--superficie-3); }
.cal-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-tabla th { font: 600 .75rem/1 var(--f-texto); color: var(--tinta-3); padding: 4px 0 6px; }
.cal-tabla td { padding: 1px; text-align: center; }
.cal-tabla button { width: 100%; aspect-ratio: 1; min-height: 38px; border: 0; background: none; border-radius: 50%; font: 500 var(--t-s)/1 var(--f-texto); color: var(--tinta); cursor: pointer; }
.cal-tabla button:hover { background: var(--superficie-3); }
.cal-tabla button.fuera { color: var(--tinta-3); opacity: .6; }
.cal-tabla button.hoy { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.cal-tabla button.sel { background: var(--host-negro); color: #fff; }
.cal-tabla button:focus-visible { outline: none; box-shadow: var(--foco); }
.cal-pie { display: flex; justify-content: flex-end; margin-top: 6px; }

/* Clientes. */
.lista-clientes { list-style: none; margin: var(--e-3) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-clientes li { border-bottom: 1px solid var(--linea); }
.lista-clientes a { display: grid; gap: 2px; padding: 12px 4px; min-height: 56px; text-decoration: none; color: var(--tinta); }
.lista-clientes a:hover { background: var(--superficie-2); }
.lc-horas { font-size: var(--t-s); color: var(--tinta-3); }
.buscador-grande .sr-movil { margin-left: 4px; }
@media (max-width: 600px) { .buscador-grande .sr-movil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.h-seccion { font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--e-2); }
.horas-lista { list-style: none; margin: 0 0 var(--e-2); padding: 0; border-top: 1px solid var(--linea); }
.horas-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--e-3); padding: 12px 0; border-bottom: 1px solid var(--linea); }
.hl-que { font-weight: 500; }
.hl-cuanto strong { font: 700 var(--t-l)/1 var(--f-titulo); }
.mas-detalle { margin-top: var(--e-3); }
.mas-detalle > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--tinta-2); font-size: var(--t-s); font-weight: 500; }
.desglose-fila { padding: var(--e-2) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.lista-simple a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.acciones-cliente { flex-wrap: wrap; }
.h1-enlace { text-decoration: none; color: inherit; }
.h1-enlace:hover { text-decoration: underline; }

/* Detalle de la reserva. */
.reserva-resumen { margin: 0 0 var(--e-4); }
.reserva-resumen p { margin: 0 0 6px; }
.rr-cuando { font-size: var(--t-l); }
.rr-donde { color: var(--tinta-2); }
.rr-horas { font-weight: 500; }
.acciones-reserva { gap: var(--e-2); }
.regla { display: block; padding: 10px var(--e-3); border-radius: var(--r); }
.regla strong { display: block; }
.regla.ok { background: var(--ok-suave); color: var(--ok); }
.regla.alerta { background: var(--alerta-suave); color: var(--alerta); }

/* Asignar horas. */
.form-pack { max-width: 640px; }
.pk-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .pk-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pk-fila > .campo:first-child { grid-column: 1 / -1; } }
.opciones.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opciones.chicas .opcion { min-height: 44px; padding: 10px var(--e-3); flex-direction: row; align-items: center; }
.pk-oficina > summary { font-size: var(--t-s); color: var(--tinta-2); cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.pk-acciones { justify-content: flex-start; flex-direction: row-reverse; }
@media (max-width: 600px) { .pk-acciones { display: grid; grid-template-columns: 1fr; } }
.cupo-hero { background: none; border: 0; padding: 0; margin-bottom: var(--e-4); }
.agenda-nav .chip-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.mes-grilla td { height: 112px; }
.mc-items li a, .mc-items li { display: block; }
.mc-items .num { display: block; font-size: .6875rem; color: var(--tinta-3); font-weight: 600; }
.mc-quien { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.estado-cal > span:first-of-type { display: inline; }
.estado-cal > span:first-of-type .ic { vertical-align: -2px; margin-right: 4px; }
@media (min-width: 1024px) { .agenda-mes { grid-template-columns: minmax(0, 1fr) 320px; } }
.mes-grilla td { height: 120px; }
.mc-quien { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.dia-panel .agenda a { grid-template-columns: 92px minmax(0, 1fr) auto; }
.agenda .ag-meta { display: block; font-size: var(--t-xs); color: var(--tinta-3); font-weight: 400; }
.agenda .ag-txt strong { overflow-wrap: anywhere; }
.fecha-campo input { height: 44px; }
.campo-error.pendiente .ic { display: none; }
.lugar { display: block; }
.lugar .punto-sede { margin-right: 6px; vertical-align: 1px; }
.lugar .btn { margin-left: var(--e-2); min-height: 36px; }
.form-pack .barra-accion.pk-acciones { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--e-2); }
@media (max-width: 600px) { .form-pack .barra-accion.pk-acciones { flex-direction: column; } }
.pk-mas [data-nombre-prop] { font-weight: 600; }
@media (max-width: 600px) { .form-pack .pk-acciones .btn { width: 100%; justify-content: center; } }

/* === 4.16 Insumos ======================================================================== */
.grilla-2 { display: grid; gap: 0 var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.opcional { font-weight: 400; color: var(--tinta-3); }
.h-chica { font-size: var(--t-m); font-weight: 600; margin-bottom: var(--e-3); display: flex; align-items: center; gap: var(--e-2); }
.tabla-envoltura { overflow-x: auto; }
.fila-form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.fila-form input, .fila-form select { flex: 1 1 220px; min-width: 0; }
.espacio { flex: 1; }
.ins-sede { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--e-2); padding: 4px 12px 4px 10px; border-radius: var(--r-pill);
  background: var(--acento-suave); color: var(--tinta-2); font-size: var(--t-s); }
.ins-sede strong { color: var(--tinta); }
.ins-cab { margin-bottom: var(--e-3); }
.ins-acciones .btn { min-height: 48px; }
.ins-secundarias { display: flex; flex-wrap: wrap; gap: 2px var(--e-4); margin: 0 0 var(--e-4); font-size: var(--t-s); }
.ins-secundarias a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--tinta-2); text-decoration: none; }
.ins-secundarias a:hover { color: var(--tinta); text-decoration: underline; }
.ins-secundarias .ic { color: var(--tinta-3); }
.ins-demo .ic { color: var(--tinta-3); }
.ins-filtros { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-bottom: var(--e-4); }
.ins-filtros .segmento { flex: 0 0 auto; min-width: 260px; }
.ins-filtros .segmento .cuenta { min-height: 18px; padding: 0 6px; margin-left: 2px; }
.ins-buscar { flex: 1 1 240px; margin-top: 0; }
.ins-buscar-lista { margin: 0 0 var(--e-3); }
.ins-grupo + .ins-grupo { margin-top: var(--e-5); }
.ins-grupo-t { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--e-2) 2px; font: 600 var(--t-xs)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ins-det { font-weight: 400; color: var(--tinta-3); }
.ins-cat.cat-cafe { background: #f3ece4; color: #7a4f1d; }
.ins-cat.cat-cortesias { background: #fbf1d9; color: #8a6200; }
.ins-cat.cat-cocina { background: #eef2ec; color: #44633a; }
.ins-cat.cat-papel { background: #eef1f6; color: #3e5878; }
.ins-cat.cat-limpieza { background: #e8f4f6; color: #1f6672; }
.ins-cat.cat-bolsas { background: #f3eef6; color: #66457c; }
.ins-cant { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ins-cant strong { font-size: var(--t-l); font-weight: 600; }
.ins-cant .ins-u, .ins-u { font-size: var(--t-s); color: var(--tinta-3); }
.ins-cant.negativo strong { color: var(--error); }
.ins-cant.sin-contar strong { color: var(--tinta-3); }
.ins-filas .fila { min-height: 60px; }
.ins-copiar { margin-bottom: var(--e-4); }
.ins-copiar-cab { display: flex; align-items: center; gap: var(--e-3); }
.ins-copiar-cab h2 { flex: 1; font-size: var(--t-m); }
.ins-copiar textarea { width: 100%; font: 400 var(--t-s)/1.5 var(--f-texto); resize: vertical; background: var(--superficie-2); }
.btn.copiado { color: var(--ok); }

/* Lista para escribir cantidades (uso, entrada, conteo, traslado) */
.ins-mover-fila { flex-wrap: wrap; }
.ins-mover-fila > .cuerpo { cursor: pointer; }
.ins-mover-fila .titulo { white-space: normal; }
.ins-mover-fila.elegido { background: var(--acento-velo, var(--acento-suave)); box-shadow: inset 3px 0 0 var(--acento); }
.ins-mover-fila.no-disponible .fila-icono, .ins-mover-fila.no-disponible .titulo { opacity: .55; }
.ins-mover-fila.con-error { background: var(--error-suave); }
.ins-mover-fila.cambio { background: var(--alerta-suave); }
.ins-campo { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ins-campo .ins-u { min-width: 4.5em; }
.ins-campo > input { width: 84px; min-height: var(--toque); text-align: center; font: 600 var(--t-m)/1 var(--f-texto); }
.ins-err { flex: 1 1 100%; padding-left: 48px; }
.ins-sep { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px var(--e-5) 6px; background: var(--superficie-2); border-top: 1px solid var(--linea);
  font: 600 var(--t-xs)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ins-filas > .ins-sep:first-child { border-top: 0; }
.ins-dif { display: block; font-size: var(--t-s); margin-top: 2px; color: var(--tinta-2); font-weight: 500; }
.ins-dif:empty { display: none; }
.ins-dif.mas { color: var(--ok); } .ins-dif.menos { color: var(--alerta); } .ins-dif.error { color: var(--error); } .ins-dif.igual { color: var(--tinta-3); }
.ins-extra .campo:last-child { margin-bottom: 0; }
.ins-extra details.mas { margin-top: var(--e-2); }
.ins-barra { margin-top: var(--e-4); }
.ins-barra .falta { color: var(--error); }

/* Revisar antes de confirmar */
.ins-revision { max-width: 720px; }
.ins-rev-sede { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--e-3); font-size: var(--t-s); color: var(--tinta-2); }
.ins-rev-lineas { list-style: none; margin: 0 0 var(--e-3); padding: 0; }
.ins-rev-lineas li { display: grid; grid-template-columns: minmax(7em, auto) minmax(0, 1fr); gap: 2px var(--e-3); padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ins-rev-q { font-weight: 700; white-space: nowrap; }
.ins-rev-n { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ins-rev-queda { grid-column: 2; font-size: var(--t-s); color: var(--tinta-3); }
.ins-rev-aviso { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; font-size: var(--t-s); color: var(--alerta); font-weight: 500; }
.ins-rev-lineas li.exceso { background: var(--alerta-suave); margin: 0 calc(-1 * var(--e-3)); padding-inline: var(--e-3); border-radius: var(--r-s); }
.ins-explicacion input { max-width: 520px; }

/* Ficha del artículo, conteo y movimientos */
.ins-ficha-cant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--e-3); margin-bottom: var(--e-4); }
.ins-ficha-et { flex: 1 1 100%; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 600; }
.ins-ficha-cant .ins-cant strong { font-size: var(--t-3xl); font-family: var(--f-titulo); }
.ins-ficha-cant .ins-cant .ins-u { font-size: var(--t-m); }
.ins-ficha-cant .meta { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.meta-art { margin: 4px 0 0; color: var(--tinta-3); font-size: var(--t-s); }
.ins-datos { display: grid; gap: var(--e-3) var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; }
.ins-datos dt { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; }
.ins-datos dd { margin: 2px 0 0; }
.ins-tabla-conteo tr.conflicto td { background: var(--alerta-suave); }
.ins-tabla-conteo tr.no-aplicada td { color: var(--tinta-3); }
.ins-conflicto { display: flex; gap: 6px; margin-top: 4px; font-size: var(--t-s); color: var(--alerta); }
.ins-dif-c.mas, .ins-delta.mas { color: var(--ok); } .ins-dif-c.menos, .ins-delta.menos { color: var(--alerta); }
.ins-conteo-pie { padding: var(--e-4) var(--e-5) var(--e-5); border-top: 1px solid var(--linea); }
.ins-tipo.t-uso { background: #f6efe6; color: #7a4f1d; }
.ins-tipo.t-entrada { background: var(--ok-suave); color: var(--ok); }
.ins-tipo.t-conteo { background: var(--info-suave); color: var(--info); }
.ins-tipo.t-traslado { background: var(--acento-suave); color: var(--acento-texto); }
.ins-tipo.t-correccion { background: var(--alerta-suave); color: var(--alerta); }
.ins-op-t { display: flex; align-items: center; gap: var(--e-3); }
.ins-filtros-grilla { display: grid; gap: 0 var(--e-3); grid-template-columns: 2fr 1fr 1fr 1fr; }
.ins-filtros-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.fila.inactivo .titulo { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--linea-fuerte); }
.ins-unidad, .ins-unidad + fieldset { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.ins-unidad legend, .tarjeta fieldset legend { font-weight: 600; margin-bottom: var(--e-2); padding: 0; }
.tarjeta fieldset { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.ins-no-listos li { flex-wrap: wrap; padding: 8px 0; }
.ins-guia { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.ins-guia .tarjeta + .tarjeta { margin-top: 0; }
.ins-guia h2 { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.ins-guia h2 .ic { color: var(--acento-texto); }
.ins-guia-ideas { margin: 0 0 var(--e-3); }
.ins-guia-ideas div + div { margin-top: var(--e-3); }
.ins-guia-ideas dt { font-weight: 600; }
.ins-guia-ideas dd { margin: 2px 0 0; color: var(--tinta-2); }
.ins-guia-pasos { margin: 0; padding-left: 1.3em; }
.ins-guia-pasos li + li { margin-top: 6px; }
@media (max-width: 599px) {
  .ins-acciones { flex: 1 1 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .ins-acciones .btn { justify-content: center; padding-inline: 8px; }
  .ins-filtros .segmento { flex: 1 1 100%; min-width: 0; }
  .ins-filtros-grilla { grid-template-columns: 1fr 1fr; }
  .ins-filtros-grilla .campo:first-child { grid-column: 1 / -1; }
  .ins-mover-fila > .fila-icono { display: none; }
  .ins-err { padding-left: 0; }
  .ins-sep { padding-inline: var(--e-4); }
  .ins-campo .ins-u { min-width: 0; font-size: var(--t-xs); }
  .ins-tabla-conteo th, .ins-tabla-conteo td { padding: var(--e-2) var(--e-3); }
}
/* Selector de módulos con tres módulos: entra en el lateral sin cortarse. */
.lateral .modulos a { padding: 0 6px; gap: 4px; font-size: var(--t-s); }
.lateral .modulos a .ic { width: 14px; height: 14px; }
.lateral .modulos a .ic { display: none; }
.ins-ceja { margin: 0 0 var(--e-2); display: flex; align-items: center; gap: 6px; }
/* Insumos: columnas de cantidad alineadas y textos largos que no se cortan. */
.ins-mover-fila .etq { white-space: normal; height: auto; min-height: 22px; line-height: 1.3; padding-block: 3px; }
.ins-campo > input { width: 136px; }
@media (max-width: 599px) {
  .ins-campo { flex-direction: column; gap: 2px; align-items: center; width: 124px; }
  .ins-campo .paso button { width: 40px; }
  .ins-campo .paso input { width: 44px; }
  .ins-campo > input { width: 124px; }
  .ins-campo .ins-u { text-align: center; }
  /* Con tres módulos, en el celular el selector y la sede entran sin cortar: el logo se ve en el lateral y en Ingreso. */
  .barra-movil:has(.modulos a:nth-child(3)) .marca-modulo, .barra-movil:has(.modulos a:nth-child(3)) > a:first-child:has(img) { display: none; }
  .barra-movil:has(.modulos a:nth-child(3)) .modulos a { padding: 0 7px; font-size: var(--t-s); }
  .barra-movil:has(.modulos a:nth-child(3)) { gap: 4px; padding-inline: var(--e-3); }
  .barra-movil:has(.modulos a:nth-child(3)) .sede-pill { padding: 0 8px; gap: 5px; }
}

/* === 4.17 Entrada principal y cambio de módulo =========================================== */
.barra-hostos { display: none; }
.lat-modulo { display: flex; align-items: center; gap: 8px; margin: 0 var(--e-2); font: 700 var(--t-xs)/1.2 var(--f-titulo);
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.lat-modulo .ic { width: 16px; height: 16px; color: var(--tinta-3); }
@media (min-width: 1024px) {
  :root { --barra-hostos: 64px; }
  .barra-hostos { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--e-6); height: var(--barra-hostos);
    padding: 0 var(--e-6) 0 var(--e-5); background: var(--superficie); border-bottom: 1px solid var(--linea); }
  .marca-hostos { display: inline-flex; align-items: center; gap: 8px; width: calc(var(--lateral) - var(--e-5) - var(--e-6) + 8px); text-decoration: none; color: var(--tinta); flex: none; }
  .marca-hostos .logo-host { width: 84px; height: auto; display: block; }
  .mh-os { font: 700 12px/1 var(--f-texto); text-transform: uppercase; letter-spacing: .12em; padding: 5px 7px; border-radius: 6px; background: var(--host-negro); color: var(--host-amarillo); }
  .modulos-barra { display: flex; align-items: stretch; gap: 6px; height: 100%; }
  .modulos-barra a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; margin: 10px 0; border-radius: var(--r);
    color: var(--tinta-2); text-decoration: none; font: 500 var(--t-m)/1 var(--f-texto); transition: background-color var(--rapido), color var(--rapido); }
  .modulos-barra a .ic { color: var(--tinta-3); }
  .modulos-barra a:hover { background: var(--superficie-3); color: var(--tinta); }
  .modulos-barra a[aria-current="page"] { background: var(--host-negro); color: #fff; font-weight: 600; }
  .modulos-barra a[aria-current="page"] .ic { color: var(--host-amarillo); }
  .modulos-barra a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -10px; height: 3px; border-radius: 3px 3px 0 0; background: var(--host-amarillo); }
  .lateral { top: var(--barra-hostos); height: calc(100vh - var(--barra-hostos)); }
}
/* Celular: marca, módulo actual con «Cambiar» y sede. */
.marca-movil { display: block; flex: none; }
.marca-movil .logo-host { display: block; width: 52px; height: auto; }
.modulo-actual { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 10px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill); background: var(--superficie); font: inherit; color: var(--tinta); cursor: pointer; flex: none; }
.modulo-actual .ma-nombre { font: 700 var(--t-s)/1 var(--f-titulo); letter-spacing: .02em; }
.modulo-actual .ma-cambiar { padding: 6px 9px; border-radius: var(--r-pill); background: var(--host-negro); color: var(--host-amarillo); font: 600 12px/1 var(--f-texto); }
.modulo-actual.sin-cambio { border: 0; padding-left: 4px; cursor: default; }
.barra-movil { gap: var(--e-2); }
.barra-movil .sede-pill { min-width: 0; }
.barra-movil .sede-pill .pill-datos { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-movil .pill-datos small { display: none; }
.opciones-modulo { display: grid; gap: var(--e-2); }
.opciones-modulo a { display: flex; align-items: center; gap: var(--e-3); min-height: 64px; padding: var(--e-3) var(--e-4); border: 1px solid var(--linea);
  border-radius: var(--r-l); text-decoration: none; color: var(--tinta); background: var(--superficie); }
.opciones-modulo a[aria-current="page"] { border-color: var(--host-negro); box-shadow: inset 0 0 0 1px var(--host-negro); }
.om-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--host-negro); color: var(--host-amarillo); flex: none; }
.om-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.om-txt strong { font-weight: 600; }
.om-txt small { color: var(--tinta-3); font-size: var(--t-s); }
.dos-botones .btn { flex: 1 1 140px; justify-content: center; }
.nav-movil.n3 { grid-template-columns: repeat(3, 1fr); }

/* Entrada principal */
.principal-hostos { max-width: 880px; margin: 0 auto; }
.ph-cab { margin: var(--e-4) 0 var(--e-8); }
.ph-cab .ph-logo { display: block; width: 132px; height: auto; margin-bottom: var(--e-5); }
.ph-cab h1 { font-size: var(--t-3xl); }
.ph-cab p { margin: var(--e-2) 0 0; color: var(--tinta-2); font-size: var(--t-l); }
.ph-modulos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); list-style: none; margin: 0; padding: 0; }
.ph-modulos a { display: flex; align-items: center; gap: var(--e-4); min-height: 128px; padding: var(--e-5) var(--e-6); border-radius: var(--r-xl);
  background: var(--superficie); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); box-shadow: var(--sombra-1);
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido); }
.ph-modulos a:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--host-negro); }
.ph-modulos a:focus-visible { box-shadow: var(--foco); }
.ph-icono { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--host-negro); color: var(--host-amarillo); flex: none; }
.ph-icono .ic { width: 30px; height: 30px; stroke-width: 1.6; }
.ph-txt { flex: 1; display: grid; gap: 4px; }
.ph-txt strong { font: 700 var(--t-xl)/1.15 var(--f-titulo); }
.ph-txt small { color: var(--tinta-2); font-size: var(--t-m); }
.ph-modulos a > .ic { color: var(--tinta-3); }
.ph-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-8); color: var(--tinta-3); font-size: var(--t-s); }
.ph-sede { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 599px) {
  .ph-cab { margin: var(--e-2) 0 var(--e-6); }
  .ph-cab .ph-logo { width: 104px; }
  .ph-cab h1 { font-size: var(--t-2xl); }
  .ph-modulos a { min-height: 96px; padding: var(--e-4); gap: var(--e-3); }
  .ph-icono { width: 52px; height: 52px; border-radius: 14px; }
}
@media (min-width: 1024px) { .solo-movil { display: none !important; } }

/* === 4.17 Recibos ======================================================================== */
.rc-filtros-grilla { display: grid; gap: 0 var(--e-3); grid-template-columns: 2fr 1fr 1fr 1fr; }
.rc-lista .rc-cod { font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.importe.tachado { text-decoration: line-through; color: var(--tinta-3); }
.rc-form { max-width: 760px; }
.rc-persona { position: relative; }
.rc-elegida { display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); padding: 6px 6px 6px 14px; border: 1px solid var(--acento-borde);
  border-radius: var(--r); background: var(--acento-suave); }
.rc-elegida-nombre { font-weight: 600; flex: 0 1 auto; overflow-wrap: anywhere; }
.rc-elegida-nota { flex: 1; font-size: var(--t-s); color: var(--tinta-3); }
.rc-resultados { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--superficie);
  box-shadow: var(--sombra-2); max-height: 280px; overflow-y: auto; }
.rc-resultados button { display: block; width: 100%; min-height: var(--toque); padding: 8px 12px; border: 0; border-radius: var(--r-s); background: none;
  text-align: left; font: inherit; color: var(--tinta); cursor: pointer; }
.rc-resultados button:hover, .rc-resultados button:focus-visible { background: var(--superficie-3); }
.rc-resultados small { display: block; color: var(--tinta-3); font-size: var(--t-xs); }
.rc-resultados .rc-nueva { color: var(--acento-texto); font-weight: 600; }
.rc-sin { padding: 10px 12px; color: var(--tinta-3); font-size: var(--t-s); }
.rc-pesos { position: relative; }
.rc-pesos span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); }
.rc-pesos input { padding-left: 28px; width: 100%; }
.rc-lineas { display: grid; gap: 8px; }
.rc-linea { display: grid; grid-template-columns: minmax(0, 1fr) 84px 140px 120px; gap: 8px; align-items: center; }
.rc-linea-cab { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 500; }
.rc-linea-imp { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.rc-linea-err { grid-column: 1 / -1; }
.rc-lineas-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.rc-total-vivo { margin: 0; }
.rc-medios { grid-auto-columns: minmax(0, 1fr); }
.rc-barra .barra-confirmar-txt strong { color: var(--tinta); }
.rc-previa { max-width: 820px; }
.rc-ver { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .rc-ver { grid-template-columns: minmax(0, 1fr) 300px; } }
.rc-lado { display: grid; gap: var(--e-4); }
.rc-lado .tarjeta + .tarjeta { margin-top: 0; }
@media (max-width: 599px) {
  .rc-filtros-grilla { grid-template-columns: 1fr 1fr; }
  .rc-filtros-grilla .campo:first-child { grid-column: 1 / -1; }
  .rc-linea { grid-template-columns: 1fr 1fr; }
  .rc-linea input:first-of-type { grid-column: 1 / -1; }
  .rc-linea-cab { display: none; }
  .rc-linea-imp { grid-column: 1 / -1; }
  .rc-medios { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
}

/* El recibo en pantalla: mismo contenido que el PDF. */
.recibo-doc { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-2);
  padding: var(--e-6) var(--e-6) var(--e-5); border-top: 6px solid var(--c, var(--host-negro)); color: var(--tinta); font-size: var(--t-s); }
.recibo-doc[data-sede="VB"] { --c: var(--host-cian); }
.recibo-doc[data-sede="ORF"] { --c: var(--host-magenta); }
.rd-marca { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 800 clamp(22px, 4vw, 40px)/1 var(--f-titulo);
  color: rgb(29 29 27 / .08); transform: rotate(-24deg); text-align: center; white-space: nowrap; }
.recibo-doc.anulado .rd-marca { color: rgb(180 35 24 / .14); font-size: clamp(48px, 10vw, 96px); }
.rd-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-5); }
.rd-logo { display: block; width: 150px; height: auto; margin-bottom: var(--e-3); }
.rd-sede p { margin: 0; color: var(--tinta-2); line-height: 1.5; }
.rd-sede strong { color: var(--tinta); }
.rd-num { text-align: right; }
.rd-num h2 { font: 700 var(--t-xl)/1.2 var(--f-titulo); margin: 0; }
.rd-codigo { margin: 4px 0 6px; font-weight: 700; font-size: var(--t-l); color: var(--c, var(--tinta)); font-variant-numeric: tabular-nums; }
.rd-chico { margin: 0; color: var(--tinta-3); font-size: var(--t-xs); line-height: 1.5; }
.rd-rojo { color: var(--error); font-weight: 600; }
.rd-anulado { margin: 0 0 var(--e-4); padding: 10px 12px; border: 1px solid var(--error); border-radius: var(--r-s); background: var(--error-suave); color: var(--error); }
.rd-quien { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-4); padding: var(--e-4); background: var(--superficie-2);
  border-radius: var(--r-s); margin-bottom: var(--e-4); }
.rd-quien > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.rd-quien > div + div { border-left: 1px solid var(--linea); padding-left: var(--e-4); }
.rd-etq { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); font-weight: 600; }
.rd-titular { font-size: var(--t-xl); line-height: 1.25; overflow-wrap: anywhere; }
.rd-concepto { margin: 2px 0 var(--e-4); white-space: pre-line; overflow-wrap: anywhere; }
.rd-tabla { width: 100%; border-collapse: collapse; margin-bottom: var(--e-4); }
.rd-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--linea); }
.rd-tabla td { padding: 8px 4px; border-bottom: 1px solid var(--linea); vertical-align: top; overflow-wrap: anywhere; }
.rd-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-total { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin: 0 0 var(--e-4) auto; max-width: 360px; padding: 12px 16px;
  background: var(--host-negro); color: #fff; border-bottom: 3px solid var(--host-amarillo); border-radius: 4px; }
.rd-total strong { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .recibo-doc { padding: var(--e-5) var(--e-4) var(--e-4); }
  .rd-num { text-align: left; }
  .rd-quien { grid-template-columns: 1fr; }
  .rd-quien > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: var(--e-3); }
  .rd-tabla th:nth-child(3), .rd-tabla td:nth-child(3) { display: none; }
}
@media (max-width: 599px) {
  .barra-confirmar.rc-barra { flex-wrap: wrap; }
  .barra-confirmar.rc-barra .barra-confirmar-txt { flex: 1 1 100%; }
  .barra-confirmar.rc-barra .btn { flex: 1 1 auto; justify-content: center; }
  .barra-confirmar.rc-barra .btn.grande { min-height: 48px; font-size: var(--t-m); }
}

/* --- 4.18 · Inventario: salidas, medidas, lotes, avisos, informes y carteles ------------------------------- */
.ins-tipo-salida { border: 0; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-3); }
.ins-seg label { flex-direction: column; gap: 0; padding: 6px 4px; min-height: 52px; }
.ins-seg label strong { font-size: var(--t-m); font-weight: inherit; }
.ins-seg label small { font-size: var(--t-xs); color: var(--tinta-3); font-weight: 400; }
.ins-destino { display: grid; gap: 6px; }
.ins-destino label { font-weight: 600; font-size: var(--t-s); }
.ins-destino select, .ins-destino input { min-height: var(--toque); }
.buscar-persona { position: relative; }
.buscar-persona .sugerencias { position: absolute; z-index: 20; left: 0; right: 0; list-style: none; padding: 0; margin-top: 4px; box-shadow: 0 6px 20px rgb(29 29 27 / .12); }
.buscar-persona .sugerencias li.sin { padding: var(--e-2) var(--e-3); font-size: var(--t-s); color: var(--tinta-3); }
.ins-medida { min-height: var(--toque); max-width: 13em; font-size: var(--t-s); }
.ins-equiv { flex-basis: 100%; margin: 0; padding-left: 52px; font-size: var(--t-s); color: var(--acento-texto); font-weight: 500; }
.ins-equiv:empty { display: none; }
.ins-mover-fila { flex-wrap: wrap; }
.ins-lotes-entrada { flex-basis: 100%; margin: 4px 0 0 52px; font-size: var(--t-s); }
.ins-lotes-entrada summary { cursor: pointer; color: var(--acento-texto); font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.ins-lote-fila { display: grid; grid-template-columns: 7em 9em minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.ins-lote-fila label { display: grid; gap: 2px; font-size: var(--t-xs); color: var(--tinta-3); }
.ins-lote-fila input { min-height: 38px; font-size: var(--t-s); min-width: 0; }
.ins-rev-med { display: block; font-size: var(--t-s); color: var(--tinta-3); font-weight: 400; }
.ins-rev-lote { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; font-size: var(--t-s); color: var(--tinta-2); }
.ins-rev-dest { display: flex; gap: 6px; align-items: center; margin: 0 0 var(--e-2); font-size: var(--t-s); }
.ins-rev-tipo { color: var(--acento-texto); }
.ins-otro-lote { grid-column: 1 / -1; font-size: var(--t-s); }
.ins-otro-lote summary { cursor: pointer; color: var(--acento-texto); min-height: 32px; display: inline-flex; align-items: center; }
.ins-otro-lote select { margin: 4px 8px 4px 0; min-height: 38px; max-width: 100%; }
.lotes-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.lotes-tabla th, .lotes-tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.lotes-tabla th { font-weight: 600; color: var(--tinta-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .03em; }
.lotes-tabla td.num, .lotes-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lotes-tabla tr.vencido td { background: var(--error-suave, #fdecea); }
.lotes-tabla tr.proximo td { background: var(--alerta-suave); }
.lotes-tabla input { width: 7em; min-height: 38px; text-align: right; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.avisos-venc { list-style: none; margin: 0; padding: 0; }
.avisos-venc li { display: flex; gap: var(--e-3); align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: var(--t-s); }
.avisos-venc li:last-child { border-bottom: 0; }
.aviso-venc { margin-bottom: var(--e-4); }
.aviso-venc a { font-weight: 600; }
.informe-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: var(--e-3); align-items: end; }
.informe-filtros label { display: grid; gap: 4px; font-size: var(--t-s); font-weight: 600; }
.informe-filtros input, .informe-filtros select { min-height: 40px; }
.informe-tabla td small { display: block; color: var(--tinta-3); font-weight: 400; }
.informe-tabla .sep-col { border-left: 1px solid var(--linea); }
.sugerencia { display: grid; gap: 6px; }
.sugerencia h3 { margin: 0; font-size: var(--t-m); }
.sugerencia ul { margin: 0; padding-left: 1.2em; font-size: var(--t-s); color: var(--tinta-2); }
.sugerencia .dato { font-size: var(--t-s); color: var(--tinta-2); }
.cartel-prev { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--e-4); align-items: center; }
.cartel-prev img { width: 160px; height: 160px; image-rendering: pixelated; border: 1px solid var(--linea); border-radius: var(--r-s); background: #fff; }
.qr-rapido { max-width: 34rem; }
.qr-rapido .ins-campo { justify-content: flex-start; }
@media (max-width: 640px) {
  .ins-equiv, .ins-lotes-entrada { padding-left: 0; margin-left: 0; }
  .ins-lote-fila { grid-template-columns: 1fr 1fr; }
  .ins-lote-fila label:last-child { grid-column: 1 / -1; }
  .ins-medida { max-width: 124px; }
  .cartel-prev { grid-template-columns: 1fr; }
  .lotes-tabla th, .lotes-tabla td { padding: 8px 4px; }
}
.aviso-discreto.error a, .aviso-discreto.error .ic { color: var(--error); font-weight: 600; }
.ins-seg label > span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.ins-medida { max-width: 17em; }
@media (max-width: 640px) { .ins-medida { max-width: 124px; } }
.informe-tabla td:first-child { min-width: 13em; }
.informe-filtros .pie-form { align-self: end; margin: 0; padding: 0; border: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- 4.19 · Venta: ¿Para quién?, cortesía visible, confirmación siempre a la vista, «Agregar productos» --------- */
@media (min-width: 1024px) {
  .carrito { top: calc(var(--barra-hostos, 0px) + var(--e-4)); max-height: calc(100dvh - var(--barra-hostos, 0px) - 2 * var(--e-4)); }
}
.carrito .carrito-pie { position: relative; z-index: 2; box-shadow: 0 -6px 16px -12px rgb(29 29 27 / .25); }
.bloque-para { border: 0; margin: var(--e-4) 0 0; padding: 0; min-width: 0; }
.bloque-para legend { padding: 0; margin-bottom: 6px; }
.para-seg label { min-height: 40px; font-size: var(--t-s); }
.bloque-para #persona-panel, .bloque-para #nueva-persona { margin-top: var(--e-3); }
.bloque-cortesia-op { padding-top: var(--e-3); }
.bloque-cortesia-op .check { font-weight: 500; }
.agregar-mas { margin-top: var(--e-3); }

/* --- 4.19 · Informes de Insumos: resumen de un vistazo ------------------------------------------------------ */
.inf-contexto { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--tinta-2); font-size: var(--t-m); }
.inf-periodo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--e-2); margin: 0 0 var(--e-3); }
.inf-mes { font-weight: 600; font-size: var(--t-l); min-width: 9.5em; text-align: center; }
.inf-fechas { margin-left: auto; }
.inf-fechas[open] { flex-basis: 100%; margin-left: 0; }
.inf-fechas summary { cursor: pointer; list-style: none; min-height: 36px; display: inline-flex; align-items: center; }
.inf-fechas form { margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.inf-fechas label { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); }
.inf-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; margin-bottom: var(--e-4); }
.inf-filtros select { min-height: 40px; max-width: 100%; }
.inf-incluye { flex: 1 1 22em; }
.inf-incluye label { font-size: var(--t-s); }
.inf-grupo + .inf-grupo { margin-top: var(--e-5); }
.inf-grupo-t { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); margin: 0 0 4px; }
.inf-lista { list-style: none; margin: 0; padding: 0; }
.inf-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e-3); align-items: baseline; padding: 10px 0 8px; border-bottom: 1px solid var(--linea); }
.inf-lista li:last-child { border-bottom: 0; }
.inf-n { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.inf-n small { display: block; color: var(--tinta-3); font-weight: 400; font-size: var(--t-xs); }
.inf-q { font-weight: 700; font-size: var(--t-m); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.inf-q-lista { white-space: normal; font-weight: 500; font-size: var(--t-s); color: var(--tinta-2); }
.inf-barra { grid-column: 1 / -1; height: 6px; background: var(--superficie-3); border-radius: 3px; overflow: hidden; }
.inf-barra span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.inf-lista.simple .inf-barra { display: none; }
.inf-vacio { display: flex; gap: 6px; align-items: center; color: var(--tinta-2); margin: 0; }
.inf-mas summary { cursor: pointer; }
.inf-descarte .h-chica .tenue { font-weight: 400; }
.qr-sel-filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.qr-sel-filtros .buscador-grande { flex: 1 1 16em; margin: 0; }
.qr-sel-filtros select { min-height: 44px; }
.qr-sel-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: var(--e-2) 0; }
.qr-item { display: flex; align-items: center; gap: var(--e-3); width: 100%; cursor: pointer; min-height: 44px; }
.qr-item input { width: 20px; height: 20px; flex: none; }
.qr-lista .fila:has(input:checked) { background: var(--acento-suave, #eef7fa); }
.inf-filtros select { width: auto; flex: 1 1 12em; }
.inf-filtros .inf-incluye { flex-basis: 100%; }
@media (min-width: 1024px) { .inf-filtros .inf-incluye { flex: 0 1 32em; } }
.inf-lista li > .inf-barra { margin-top: 2px; }
.inf-grupo-t + .inf-lista { margin-top: 0; }
.inf-resumen .ayuda { margin-bottom: var(--e-3); }
/* Pantallas bajas (celular apaisado, zoom grande): nada fijo tapa el catálogo; la barra de navegación queda al final. */
@media (max-width: 1023px) and (max-height: 520px) {
  .venta .catalogo-cab { position: static; }
  .con-barra-carrito .nav-movil { position: static; }
  .con-barra-carrito .barra-carrito { bottom: calc(env(safe-area-inset-bottom) + var(--e-2)); }
  .con-barra-carrito .contenido { padding-bottom: calc(56px + var(--e-6)); }
}
/* Muy poca altura: la hoja ocupa todo, la cabecera se desplaza con el contenido y el pie (total + Confirmar) queda fijo. */
@media (max-width: 1023px) and (max-height: 420px) {
  .carrito[open] { max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; overflow-y: auto; display: block; }
  .carrito[open] .carrito-cuerpo { overflow: visible; }
  .carrito[open] .carrito-pie { position: sticky; bottom: 0; padding-top: var(--e-2); padding-bottom: var(--e-2); }
  .carrito[open] .total-venta .valor { font-size: var(--t-l); }
}