/* Jalomi Manager — ESTRUCTURA DE PÁGINA (síntesis 2026-10). Carga en TODAS las
   pantallas que extienden base.html, viejas y migradas:
     barra navy (hamburguesa · logo · buscador único · nombre · engranaje ·
     Mi cuenta) · 5 solapas (escritorio) · lateral de la sección con la acción
     y los contadores, que pasa a RIEL debajo de 1280 px · cajón + velo en el
     celular · barra de abajo del celular con safe-area · hoja "Más".
   Todo va colgado de sus raíces (.topbar, .cuerpo, .lateral, .bottom-nav,
   .mas-sheet, .push-pop) y escribe cada propiedad que app.css pone en los
   elementos sueltos (button, input, details > summary…): así se ve igual en
   una pantalla vieja (con app.css) que en una migrada (con ui.css).
   Los colores salen de tokens.css; acá no hay un solo hex.
   Cortes: ≥ 1280 ancho (lateral abierto) · 901-1279 escritorio (riel) ·
   ≤ 900 celular y tablet (solapas → barra de abajo, lateral → cajón). */

/* ---------- barra de arriba ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-top); background: var(--navy);
  color: var(--navy-tinta); font: 400 var(--t-3)/var(--lh) var(--f-texto); margin: 0; padding: 0;
  box-shadow: none; display: block; }
.topbar :focus-visible { outline: 2px solid var(--foco-sobre-navy); outline-offset: 2px; }
.topbar .ic { width: 20px; height: 20px; max-width: none; max-height: none; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.topbar .top-fila { height: var(--alto-top); display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-4); }
.topbar .marca { display: flex; align-items: center; gap: var(--e-2); color: var(--blanco); text-decoration: none;
  font: 600 var(--t-4)/1 var(--f-cond); letter-spacing: .01em; white-space: nowrap; flex: none; }
.topbar .marca:hover { text-decoration: none; }
.topbar .marca .logo { width: 30px; height: 30px; max-width: 30px; border-radius: var(--r-2); object-fit: cover;
  display: block; flex: none; box-shadow: 0 0 0 1px var(--brillo); }
/* botones de la barra (hamburguesa, engranaje, Mi cuenta): cuadrados de 38 px */
.topbar .btn-top, .topbar .engranaje { position: relative; width: 38px; height: 38px; min-height: 0; flex: none;
  display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--navy-tinta); box-shadow: none; transform: none; cursor: pointer;
  text-decoration: none; font: inherit; line-height: 1; opacity: 1; }
.topbar .btn-top:hover, .topbar .engranaje:hover { background: var(--navy-2); color: var(--blanco); border: 0; }
.topbar .btn-top:active, .topbar .engranaje:active { transform: none; }
.topbar .engranaje.activo { background: var(--navy-3); color: var(--blanco); }
/* el globito de sin leer del ícono de WhatsApp */
.topbar .engranaje .badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--e-punto); color: var(--blanco); font: 700 11px/16px var(--f-cond);
  text-align: center; }
/* puntito en Mi cuenta: hay una versión nueva de la app de escritorio */
.topbar .update-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--e-punto); border: 2px solid var(--navy); }
.topbar .sesion { display: flex; align-items: center; gap: var(--e-1); margin-left: auto; flex: none; }
.topbar .nombre-sesion { font-weight: 500; font-size: var(--t-2); margin-right: var(--e-1); color: var(--blanco);
  max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oculto-v, .topbar .oculto-v { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buscador único (en la barra) ---------- */
.topbar .buscador { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--e-2); height: 36px; padding: 0 var(--e-1) 0 var(--e-3);
  background: var(--navy-2); color: var(--navy-tenue); border: 0; border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--brillo-2); overflow: visible; outline: 0; }
.topbar .buscador:focus-within { background: var(--blanco); color: var(--tinta-3); box-shadow: 0 0 0 2px var(--foco-sobre-navy); outline: 0; }
.topbar .buscador .ic { width: 16px; height: 16px; }
.topbar .buscador input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; box-shadow: none; outline: 0; color: var(--blanco);
  font: 400 var(--t-2)/1 var(--f-texto); -webkit-appearance: none; appearance: none; }
.topbar .buscador:focus-within input { color: var(--tinta); }
.topbar .buscador input::placeholder { color: var(--navy-tenue); opacity: 1; }
.topbar .buscador:focus-within input::placeholder { color: var(--tinta-3); }
.topbar .buscador input:focus, .topbar .buscador input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.topbar .buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.topbar .buscador kbd { font: 500 var(--t-1)/1 var(--f-mono); color: var(--navy-tenue); border: 1px solid var(--navy-3);
  border-radius: var(--r-1); padding: 3px 5px; margin-right: var(--e-1); background: transparent; }
.topbar .buscador:focus-within kbd { display: none; }
/* lo que /buscar no reconoció: cuelga debajo de la caja, sin correr la página */
.topbar .busca-aviso { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-pop);
  display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);
  background: var(--d-fondo); color: var(--d-tinta); border: 1px solid var(--d-punto); border-radius: var(--r-2);
  box-shadow: var(--sombra-pop); font: 500 var(--t-2)/1.4 var(--f-texto); white-space: normal; }
.topbar .busca-aviso .ic { width: 16px; height: 16px; margin-top: 1px; }
.topbar .busca-aviso span { flex: 1; min-width: 0; }
.topbar .busca-cerrar { width: 28px; height: 28px; min-height: 0; flex: none; display: grid; place-items: center; margin: -4px 0;
  padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--d-tinta);
  font: 400 20px/1 var(--f-texto); cursor: pointer; box-shadow: none; transform: none; }
.topbar .busca-cerrar:hover { background: var(--blanco-92); }

/* ---------- solapas (5, solo escritorio) ---------- */
.topbar .solapas { display: flex; gap: 2px; height: var(--alto-solapas); align-items: flex-end;
  padding: 0 var(--e-4); margin: 0; overflow: hidden; }
.topbar .solapa { display: flex; align-items: center; gap: var(--e-2); height: 36px; min-height: 0; padding: 0 var(--e-4);
  border: 0; border-radius: var(--r-2) var(--r-2) 0 0; color: var(--navy-tenue); background: transparent;
  font: 500 var(--t-3)/1 var(--f-cond); letter-spacing: .01em; white-space: nowrap; text-decoration: none; flex: none; }
.topbar .solapa:hover { color: var(--blanco); background: var(--navy-2); text-decoration: none; }
.topbar .solapa.activa { background: var(--fondo); color: var(--navy); font-weight: 600; }
.topbar .solapa .ic { width: 17px; height: 17px; }

/* ---------- Mi cuenta (popover) ---------- */
.push-menu { position: relative; display: inline-flex; }
.push-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-pop); width: 260px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--e-2) var(--e-3) var(--e-3);
  background: var(--plancha); color: var(--tinta); border: var(--linea-2); border-radius: var(--r-3);
  box-shadow: var(--sombra-pop); font: 400 var(--t-2)/1.4 var(--f-texto); text-align: left; }
/* OJO: el display de arriba PISA el [hidden] del navegador; sin esta regla el
   menú queda ABIERTO para siempre tapando la pantalla (bug real 2026-07-28) */
.push-pop[hidden], .push-pop [hidden] { display: none; }
.push-pop p { margin: 0; font-size: var(--t-2); color: var(--tinta-2); line-height: 1.35; }
.push-pop .pop-quien { padding: var(--e-1) 0 var(--e-2); color: var(--tinta); font-size: var(--t-3); }
.push-pop .pop-tit { display: flex; align-items: center; gap: var(--e-2); color: var(--tinta); margin-bottom: 2px; }
.push-pop .ic { width: 16px; height: 16px; color: var(--tinta-3); }
.push-pop hr { border: 0; border-top: var(--linea); margin: var(--e-2) 0; }
.push-pop .detalle { color: var(--tinta-3); font-size: var(--t-1); }
.push-pop .detalle .ic { width: 14px; height: 14px; color: var(--o-punto); vertical-align: -2px; }
.push-pop form.inline { display: flex; margin: 0; }
.push-pop button.link { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; min-height: 32px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
  color: var(--navy-3); font: 600 var(--t-2)/1.2 var(--f-texto); text-decoration: underline;
  text-decoration-color: var(--filete-2); text-underline-offset: 3px; cursor: pointer; text-align: left; }
.push-pop button.link:hover { color: var(--tinta); background: none; text-decoration-color: currentColor; }
.push-pop a.item { display: flex; align-items: center; gap: var(--e-2); min-height: 36px; color: var(--accion);
  font-weight: 600; font-size: var(--t-3); text-decoration: none; }
.push-pop a.item:hover { color: var(--accion-hover); }

/* ---------- cuerpo: lateral + contenido ---------- */
.cuerpo { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); align-items: stretch;
  min-height: calc(100vh - var(--alto-shell)); margin: 0;
  /* el lateral es blanco hasta abajo aunque el contenido sea corto */
  background: linear-gradient(90deg, var(--plancha) calc(var(--lateral) - 1px), var(--filete) calc(var(--lateral) - 1px),
    var(--filete) var(--lateral), transparent var(--lateral)); }
.cuerpo.sin-lateral { grid-template-columns: minmax(0, 1fr); background: none; }
/* width 100%: con margin auto (el centrado de app.css) un ítem de grilla
   deja de estirarse y crece hasta el ancho mínimo de su contenido; así queda
   del ancho de su columna, como cuando .cuerpo era flex */
.cuerpo > main { min-width: 0; width: 100%; }

/* ---------- lateral de la sección ---------- */
.lateral { position: sticky; top: var(--alto-shell); align-self: start; height: calc(100vh - var(--alto-shell));
  overflow: auto; overscroll-behavior: contain; background: var(--plancha); border-right: var(--linea);
  padding: var(--e-3) var(--e-3) var(--e-5); z-index: var(--z-lateral); display: block;
  font: 400 var(--t-3)/var(--lh) var(--f-texto); color: var(--tinta); }
.lateral .ic { width: 18px; height: 18px; max-width: none; max-height: none; flex: none; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lateral .lat-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--e-1) var(--e-2); }
.lateral .lat-cab .rot, .lateral .menu-grupo { font: 600 var(--t-1)/1.2 var(--f-cond); text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta-3); }
.lateral .menu-bloque { border-top: var(--linea); margin: 0; padding: 0; }
.lateral .menu-bloque:first-of-type { border-top: 0; }
.lateral .menu-titulo { list-style: none; display: flex; align-items: center; gap: var(--e-2); min-height: 44px;
  margin: 0; padding: 0 var(--e-1); border-radius: var(--r-2); cursor: pointer; color: var(--tinta);
  font: 600 var(--t-3)/1.2 var(--f-texto); }
.lateral .menu-titulo::-webkit-details-marker { display: none; }
.lateral .menu-titulo:hover { background: var(--plancha-2); color: var(--tinta); }
.lateral .menu-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.lateral .menu-titulo { padding-top: var(--e-1); padding-bottom: var(--e-1); }
/* el nombre del bloque pasa a 2 líneas antes que cortarse: con el contador al
   lado, «Ingresos de proveedor» quedaba «Ingresos de pr… 102» */
.lateral .menu-titulo-txt { flex: 1; min-width: 0; white-space: normal; overflow: hidden; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.lateral .menu-flecha { width: 15px; height: 15px; color: var(--tinta-3); transition: transform .15s; }
.lateral .menu-bloque[open] > .menu-titulo .menu-flecha { transform: rotate(180deg); }
/* abierto, los números ya se ven ítem por ítem: el total y el rojo del
   encabezado solo van con el bloque CERRADO (y en el riel) */
.lateral .menu-bloque[open] > .menu-titulo .menu-total,
.lateral .menu-bloque[open] > .menu-titulo .menu-err { display: none; }
.lateral .menu-bloque-cuerpo { padding: var(--e-1) 0 var(--e-3); }
.lateral .menu-accion { display: flex; align-items: center; justify-content: center; gap: var(--e-2); height: var(--b-2);
  margin: var(--e-1) 0 var(--e-3); padding: 0 var(--e-3); border: 1px solid var(--navy); border-radius: var(--r-2);
  background: var(--plancha); color: var(--navy); box-shadow: none; text-decoration: none;
  font: 600 var(--t-2)/1 var(--f-texto); }
.lateral .menu-accion:hover { background: var(--navy); color: var(--blanco); text-decoration: none; }
.lateral .menu-accion .ic { width: 16px; height: 16px; }
.lateral .menu-grupo { padding: var(--e-2) var(--e-2) var(--e-1); }
.lateral .menu-item { display: flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: 0 var(--e-2);
  border-radius: var(--r-2); color: var(--tinta-2); text-decoration: none; font: 400 var(--t-2)/1.25 var(--f-texto); }
.lateral .menu-item:hover { background: var(--plancha-2); color: var(--tinta); text-decoration: none; }
.lateral .menu-item.activo { background: var(--accion-suave); color: var(--navy); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--navy); border-radius: 0 var(--r-2) var(--r-2) 0; }
.lateral .menu-item .ic { width: 15px; height: 15px; color: var(--tinta-3); }
.lateral .menu-item.activo .ic { color: var(--navy); }
.lateral .menu-item .txt { flex: 1; min-width: 0; }
.lateral .menu-ayuda { margin: 0; padding: var(--e-2) var(--e-2) 0; font: 400 var(--t-1)/1.4 var(--f-texto); color: var(--tinta-3); }
/* contadores: el color de su estado (paleta única, tokens.css) */
.lateral .badge { --ff: var(--q-fondo); --ft: var(--q-tinta); min-width: 22px; height: 20px; padding: 0 6px; flex: none;
  border-radius: var(--r-1); display: inline-grid; place-items: center; background: var(--ff); color: var(--ft);
  font: 600 var(--t-1)/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.lateral .badge.h { --ff: var(--h-fondo); --ft: var(--h-tinta); }
.lateral .badge.d { --ff: var(--d-fondo); --ft: var(--d-tinta); }
.lateral .badge.c { --ff: var(--c-fondo); --ft: var(--c-tinta); }
.lateral .badge.o { --ff: var(--o-fondo); --ft: var(--o-tinta); }
.lateral .badge.e { --ff: var(--e-punto); --ft: var(--blanco); }
.velo-lat { display: none; }

/* ---------- RIEL (escritorio, lateral plegado): íconos + contadores ---------- */
@media (min-width: 901px) {
  body.lat-cerrado .cuerpo:not(.sin-lateral) { grid-template-columns: var(--riel) minmax(0, 1fr);
    background: linear-gradient(90deg, var(--plancha) calc(var(--riel) - 1px), var(--filete) calc(var(--riel) - 1px),
      var(--filete) var(--riel), transparent var(--riel)); }
  body.lat-cerrado .lateral { padding: var(--e-2); overflow-x: hidden; }
  body.lat-cerrado .lateral .lat-cab, body.lat-cerrado .lateral .menu-bloque-cuerpo,
  body.lat-cerrado .lateral .menu-flecha { display: none; }
  body.lat-cerrado .lateral .menu-titulo { justify-content: center; position: relative; padding: 0; min-height: 48px; }
  /* en el riel el nombre del bloque sigue estando para el lector de pantalla
     (el summary además lleva title para el mouse) */
  body.lat-cerrado .lateral .menu-titulo-txt { display: block; position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.lat-cerrado .lateral .menu-titulo .ic { width: 20px; height: 20px; }
  body.lat-cerrado .lateral .menu-bloque[open] > .menu-titulo .menu-total,
  body.lat-cerrado .lateral .menu-bloque[open] > .menu-titulo .menu-err,
  body.lat-cerrado .lateral .menu-total, body.lat-cerrado .lateral .menu-err {
    display: inline-grid; position: absolute; right: -2px; min-width: 20px; height: 18px; padding: 0 4px; }
  body.lat-cerrado .lateral .menu-total { top: 2px; }
  body.lat-cerrado .lateral .menu-err { bottom: 2px; }
}

/* ---------- barra de abajo (celular) y hoja "Más" ---------- */
.bottom-nav, .mas-sheet { display: none; }

/* ---------- celular y tablet (≤ 900) ---------- */
@media (max-width: 900px) {
  :root { --alto-shell: calc(var(--alto-top) + 52px); }
  /* NINGÚN desborde horizontal puede agrandar el layout viewport (corría la
     barra de abajo fuera de pantalla). `clip` no crea scroll container: el
     sticky de la barra de arriba sigue andando. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  .topbar .top-fila { height: auto; flex-wrap: wrap; row-gap: 7px; padding: 7px var(--e-2) var(--e-2); gap: 7px var(--e-2); }
  .topbar .nombre-sesion, .topbar .buscador kbd, .topbar .solapas { display: none; }
  /* el buscador baja a su propia fila, a todo el ancho */
  .topbar .buscador { order: 9; flex: 1 0 100%; max-width: none; height: 44px; margin: 0 var(--e-1); }
  .topbar .buscador input { font-size: var(--t-campo-cel); }
  .topbar .btn-top, .topbar .engranaje { width: 44px; height: 38px; }
  /* el mínimo descuenta la barra de abajo: el body ya le deja su lugar con
     padding-bottom, y sumar los dos daba 60 px de scroll vacío en toda
     pantalla corta (403, /remitos sin nada, /pedidos…) */
  .cuerpo, .cuerpo:not(.sin-lateral) { grid-template-columns: minmax(0, 1fr); background: none;
    min-height: calc(100vh - var(--alto-shell) - var(--nav-abajo) - env(safe-area-inset-bottom)); }
  @supports (height: 100dvh) {
    .cuerpo, .cuerpo:not(.sin-lateral) {
      min-height: calc(100dvh - var(--alto-shell) - var(--nav-abajo) - env(safe-area-inset-bottom)); }
  }
  /* el lateral es un cajón que abre la hamburguesa */
  .lateral { position: fixed; top: 0; left: 0; bottom: 0; height: auto; align-self: stretch; width: min(84vw, 320px); z-index: 60;
    padding-top: var(--e-4); transform: translateX(-102%); transition: transform .2s, visibility .2s; box-shadow: var(--sombra-pop);
    visibility: hidden; }
  body.lat-abierto .lateral { transform: none; visibility: visible; }
  body.lat-abierto .velo-lat { display: block; position: fixed; inset: 0; z-index: 55; background: var(--velo); }
  .lateral .menu-item, .lateral .menu-titulo { min-height: 44px; }
  /* barra de abajo: el pulgar vive abajo en una PWA */
  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed;
    left: 0; right: 0; bottom: 0; z-index: var(--z-top); margin: 0; padding: 0 0 env(safe-area-inset-bottom);
    height: calc(var(--nav-abajo) + env(safe-area-inset-bottom)); background: var(--navy); box-shadow: none;
    font: 500 var(--t-1)/1 var(--f-cond); }
  .bottom-nav a, .bottom-nav .nav-mas { position: relative; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-width: 0; height: var(--nav-abajo); min-height: 0; margin: 0; padding: 0 2px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; cursor: pointer;
    color: var(--navy-tenue); text-decoration: none; font: 500 var(--t-1)/1 var(--f-cond); letter-spacing: .02em; }
  .bottom-nav a span, .bottom-nav .nav-mas span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a:hover, .bottom-nav .nav-mas:hover { color: var(--blanco); background: transparent; text-decoration: none; }
  .bottom-nav a.activo, .bottom-nav .nav-mas.activo { color: var(--blanco); }
  .bottom-nav a.activo::before, .bottom-nav .nav-mas.activo::before { content: ""; position: absolute; top: 0; left: 26%;
    right: 26%; height: 3px; background: var(--foco-sobre-navy); border-radius: 0 0 2px 2px; }
  .bottom-nav .ic { width: 22px; height: 22px; max-width: none; max-height: none; vertical-align: middle;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav :focus-visible { outline: 2px solid var(--foco-sobre-navy); outline-offset: -3px; }
  /* lo que espera de la sección (preparar, decidir, con error): el mismo
     aviso que da el riel del escritorio, colgado del ícono */
  .bottom-nav .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 20px; height: 18px; padding: 0 4px;
    border-radius: var(--r-1); display: inline-grid; place-items: center; max-width: none; overflow: visible;
    background: var(--d-fondo); color: var(--d-tinta); font: 600 var(--t-1)/1 var(--f-cond);
    font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .bottom-nav .badge.h { background: var(--h-fondo); color: var(--h-tinta); }
  .bottom-nav .badge.e { background: var(--e-punto); color: var(--blanco); }
  /* que el contenido no muera abajo de la barra */
  body:has(.bottom-nav) { padding-bottom: calc(var(--nav-abajo) + env(safe-area-inset-bottom)); }
  /* hojita de "Más": tapa la pantalla con velo, la lista arriba de la barra */
  .mas-sheet.visible { display: block; position: fixed; inset: 0; z-index: calc(var(--z-top) - 1); background: var(--velo); }
  .mas-sheet .mas-lista { position: absolute; left: var(--e-2); right: var(--e-2);
    bottom: calc(var(--nav-abajo) + env(safe-area-inset-bottom) + var(--e-2)); padding: var(--e-1);
    background: var(--plancha); border: var(--linea-2); border-radius: var(--r-3); box-shadow: var(--sombra-pop); }
  .mas-sheet .mas-lista a { display: flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: 0 var(--e-3);
    border-radius: var(--r-2); color: var(--tinta); text-decoration: none; font: 600 var(--t-3)/1.2 var(--f-texto); }
  .mas-sheet .mas-lista a:active, .mas-sheet .mas-lista a.activo { background: var(--accion-suave); color: var(--navy); }
  .mas-sheet .mas-lista .ic { width: 20px; height: 20px; max-width: none; max-height: none; color: var(--tinta-3);
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .push-pop { position: fixed; top: calc(var(--alto-top) - 4px); right: var(--e-2); width: min(300px, calc(100vw - 2 * var(--e-2))); }
}

/* ---------- pantallas MIGRADAS (body.ui2, sin app.css): las piezas globales
   de base.html que en las viejas dibuja app.css ---------- */
body.ui2 dialog.modal { border: var(--linea-2); border-radius: var(--r-3); padding: 0; max-width: 420px; width: 92vw;
  box-shadow: var(--sombra-pop); color: var(--tinta); background: var(--plancha); }
body.ui2 dialog.modal::backdrop { background: var(--velo); }
body.ui2 dialog.modal .modal-cuerpo { padding: var(--e-5) var(--e-5) var(--e-4); }
body.ui2 dialog.modal p { margin: 0 0 var(--e-4); font-size: var(--t-3); line-height: 1.5; }
body.ui2 dialog.modal .modal-acciones { display: flex; gap: var(--e-2); }
body.ui2 dialog.modal .modal-acciones button { flex: 1; height: var(--b-1); border-radius: var(--r-2); border: var(--linea-2);
  background: var(--plancha); color: var(--tinta); font: 500 var(--t-3)/1 var(--f-texto); cursor: pointer; }
body.ui2 dialog.modal .modal-acciones button:hover { background: var(--plancha-2); }
body.ui2 dialog.modal .modal-acciones button.principal { background: var(--accion); border-color: var(--accion);
  color: var(--blanco); font-weight: 600; }
body.ui2 dialog.modal .modal-acciones button.principal:hover { background: var(--accion-hover); }
/* centrado con left/right + margin auto y width max-content: con left:50% +
   translate el ancho disponible era media pantalla y en el celular el
   aviso se partía en 4 renglones angostos. Arriba del diálogo común (70). */
body.ui2 .toast { position: fixed; left: var(--e-4); right: var(--e-4); margin: 0 auto; width: max-content;
  bottom: var(--e-5); z-index: 80;
  max-width: min(560px, calc(100vw - 2 * var(--e-4))); padding: var(--e-3) var(--e-4); background: var(--navy);
  color: var(--blanco); border-radius: var(--r-3); box-shadow: var(--sombra-pop); font: 500 var(--t-2)/1.35 var(--f-texto);
  text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
body.ui2 .toast.visible { opacity: 1; }
@media (max-width: 900px) {
  body.ui2 .toast { bottom: calc(var(--nav-abajo) + 76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .lateral, .lateral .menu-flecha { transition: none; }
}

/* ---------- impresión: solo el contenido ---------- */
@media print {
  .topbar, .lateral, .velo-lat, .bottom-nav, .mas-sheet { display: none !important; }
  .cuerpo { display: block; background: none; }
  body { padding-bottom: 0; }
}