/* Tienda Móvil San Juan — panel
   Negro, blanco y celeste del logo. Saira para títulos y cifras, Golos Text para leer.
   La raya celeste que sale del título es la del logo. El ticket es papel térmico. */

:root {
  --negro: #000;
  --tinta: #14181d;
  --gris: #5b6672;
  --gris-cla: #8a94a0;
  --linea: #d9dee4;
  --fondo: #eef1f4;
  --papel: #fff;
  --celeste: #3f9bd8;
  --celeste-osc: #1b6fa8;
  --celeste-cla: #e8f3fb;
  --ok: #1b7f4e;   --ok-cla: #e3f4eb;
  --mal: #c0362c;  --mal-cla: #fbe9e7;
  --av: #a8690a;   --av-cla: #fcf1dc;
  --tit: 'Saira', 'Segoe UI', sans-serif;
  --txt: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  --tic: 'Saira Semi Condensed', 'Saira', sans-serif;
  --r: 7px;
  --lado: 244px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.45 var(--txt); }
h1, h2, h3, p { margin: 0; }
a { color: var(--celeste-osc); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Armazón ---------- */
.lado { position: fixed; inset: 0 auto 0 0; width: var(--lado); background: var(--negro); color: #fff; display: flex; flex-direction: column; z-index: 30; overflow-y: auto; }
.lado-logo { display: block; padding: 18px 16px 10px; }
.lado-logo img { display: block; width: 100%; height: auto; }
.lado nav { padding: 6px 10px 16px; flex: 1; }
.lado-grupo { margin: 16px 10px 6px; font: 500 12px/1 var(--tit); color: #7d8894; letter-spacing: .02em; }
.lado a.it { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r); color: #c3ccd6; text-decoration: none; font: 500 15px/1.2 var(--tit); position: relative; white-space: nowrap; }
.lado a.it:hover { color: #fff; background: #15191e; }
.lado a.it.on { color: #fff; background: #15191e; }
.lado a.it.on::before { content: ''; position: absolute; left: -10px; top: 50%; width: 14px; height: 2px; background: var(--celeste); }
.lado a.it.on .ico { color: var(--celeste); }
.lado a.it .cuenta { margin-left: auto; background: var(--celeste); color: #000; font: 600 12px/1 var(--tit); padding: 3px 6px; border-radius: 9px; }
.lado-pie { padding: 12px 16px 16px; border-top: 1px solid #1d2228; font-size: 13px; color: #8a94a0; }
.lado-pie b { display: block; color: #fff; font: 500 14px/1.3 var(--tit); }
.lado-pie a { color: #8a94a0; }

.cuerpo { margin-left: var(--lado); min-height: 100vh; display: flex; flex-direction: column; }
.arriba { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: var(--papel); border-bottom: 1px solid var(--linea); min-height: 56px; }
.arriba .menu-btn { display: none; }
.sucs { display: flex; gap: 4px; background: var(--fondo); padding: 3px; border-radius: 9px; overflow-x: auto; scrollbar-width: none; }
.sucs::-webkit-scrollbar { display: none; }
.sucs a, .sucs span { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 6px; font: 500 14px/1.2 var(--tit); color: var(--gris); text-decoration: none; white-space: nowrap; }
.sucs a:hover { color: var(--tinta); }
.sucs .on { background: var(--negro); color: #fff; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #b8c0c9; flex: none; }
.punto.ab { background: #2fb673; }
.arriba .der { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gris); }
.banda-demo { background: var(--av-cla); color: #6b4406; font-size: 13px; padding: 6px 28px; border-bottom: 1px solid #efdcb4; }

.pagina { padding: 24px 28px 48px; width: 100%; max-width: 1480px; }
.cab { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cab h1 { font: 600 26px/1.15 var(--tit); letter-spacing: -.01em; }
.cab .raya { flex: 1; min-width: 40px; height: 2px; background: linear-gradient(90deg, var(--celeste), rgba(63, 155, 216, 0)); clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%); }
.cab .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.sub { color: var(--gris); font-size: 14px; margin: -12px 0 20px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel); color: var(--tinta); font: 600 14px/1.2 var(--tit); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { border-color: #b9c1ca; background: #f7f9fa; }
.btn.pri { background: var(--celeste); border-color: var(--celeste); color: #000; }
.btn.pri:hover { background: #55a9e0; border-color: #55a9e0; }
.btn.osc { background: var(--negro); border-color: var(--negro); color: #fff; }
.btn.osc:hover { background: #20252b; }
.btn.pel { color: var(--mal); }
.btn.pel:hover { background: var(--mal-cla); border-color: #e9b7b1; }
.btn.liso { border-color: transparent; background: transparent; color: var(--celeste-osc); padding-left: 8px; padding-right: 8px; }
.btn.liso:hover { background: var(--celeste-cla); }
.btn.ch { padding: 6px 10px; font-size: 13px; }
.btn.gr { padding: 14px 20px; font-size: 17px; }
.btn.ancho { width: 100%; }
.btn:disabled, .btn.espera { opacity: .55; cursor: default; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; }

/* ---------- Formularios ---------- */
.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font: 500 13px/1.3 var(--tit); color: var(--gris); margin-bottom: 5px; }
.campo small { display: block; color: var(--gris); font-size: 12.5px; margin-top: 4px; }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=date], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #c5ccd4; border-radius: var(--r); background: var(--papel); min-height: 40px; }
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--celeste); outline-offset: 0; border-color: var(--celeste); }
input.plata, input.n { text-align: right; font: 500 15px/1.2 var(--tit); font-variant-numeric: tabular-nums; }
.f2, .f3, .f4 { display: grid; gap: 0 14px; }
.f2 { grid-template-columns: 1fr 1fr; }
.f3 { grid-template-columns: repeat(3, 1fr); }
.f4 { grid-template-columns: repeat(4, 1fr); }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros .crece { flex: 1; min-width: 220px; }
.llave { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.llave:last-child { border-bottom: 0; }
.llave input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: #c5ccd4; position: relative; flex: none; margin: 1px 0 0; cursor: pointer; transition: background .15s; }
.llave input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.llave input:checked { background: var(--celeste); }
.llave input:checked::after { transform: translateX(16px); }
.llave b { display: block; font: 500 14.5px/1.3 var(--tit); }
.llave small { color: var(--gris); font-size: 13px; }

/* ---------- Bloques ---------- */
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 9px; margin-bottom: 18px; }
.panel-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 13px 18px; border-bottom: 1px solid var(--linea); }
.panel-cab h2 { font: 600 16px/1.2 var(--tit); }
.panel-cab .der { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gris); }
.panel-cpo { padding: 16px 18px; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.mitades { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tercios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* Tira de cifras: una sola pieza con celdas, no fichas sueltas */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--papel); border: 1px solid var(--linea); border-radius: 9px; margin-bottom: 18px; overflow: hidden; }
.cifras > div { padding: 14px 18px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: 0 -1px -1px 0; }
.cifras span { display: block; font-size: 13px; color: var(--gris); }
.cifras b { display: block; font: 600 clamp(18px, 1.55vw, 23px)/1.25 var(--tit); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.cifras small { color: var(--gris); font-size: 12.5px; }
.cifras .ok b { color: var(--ok); } .cifras .mal b { color: var(--mal); } .cifras .av b { color: var(--av); }

/* Tablas */
.tabla-env { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { text-align: left; font: 500 12.5px/1.2 var(--tit); color: var(--gris); padding: 10px 14px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 10px 14px; border-bottom: 1px solid #e8ecf0; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover td { background: #f6f9fb; }
.tabla .n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td.n { font-family: var(--tit); font-weight: 500; }
.tabla tfoot td { border-top: 1px solid var(--linea); border-bottom: 0; font-weight: 600; }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla tr.tachada td { color: var(--gris-cla); text-decoration: line-through; }
.gris { color: var(--gris); }
.chico { font-size: 13px; }
.fuerte { font-weight: 600; }
.cifra { font-family: var(--tit); font-weight: 600; font-variant-numeric: tabular-nums; }
.c-ok { color: var(--ok); } .c-mal { color: var(--mal); } .c-av { color: var(--av); }

.chip { display: inline-block; padding: 3px 9px; border-radius: 11px; font: 500 12.5px/1.3 var(--tit); background: #e9edf1; color: #46505b; white-space: nowrap; }
.chip.ok { background: var(--ok-cla); color: #12613b; }
.chip.av { background: var(--av-cla); color: #7b4d07; }
.chip.mal { background: var(--mal-cla); color: #96281f; }
.chip.inf { background: var(--celeste-cla); color: #155a89; }

.vacio { padding: 40px 20px; text-align: center; color: var(--gris); }
.vacio b { display: block; font: 600 16px/1.3 var(--tit); color: var(--tinta); margin-bottom: 4px; }
.vacio .btn { margin-top: 14px; }
.nota { padding: 11px 14px; border-radius: var(--r); background: var(--celeste-cla); color: #124b72; font-size: 14px; margin-bottom: 16px; }
.nota.av { background: var(--av-cla); color: #6b4406; }
.nota.mal { background: var(--mal-cla); color: #8a241c; }

/* Pestañas */
.segm { display: inline-flex; gap: 3px; background: #e2e6eb; padding: 3px; border-radius: 9px; margin-bottom: 16px; flex-wrap: wrap; }
.segm a, .segm button { border: 0; background: transparent; padding: 7px 14px; border-radius: 6px; font: 500 14px/1.2 var(--tit); color: var(--gris); cursor: pointer; text-decoration: none; }
.segm .on { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(20, 24, 29, .12); }

/* Barras de reporte */
.barras { display: grid; gap: 9px; }
.barras .b { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; gap: 12px; align-items: center; font-size: 14.5px; }
.barras .b i { display: block; height: 9px; border-radius: 5px; background: var(--celeste); min-width: 2px; }
.barras .b .pista { background: #e8ecf0; border-radius: 5px; }
.barras .b em { font: 500 14.5px/1 var(--tit); font-style: normal; font-variant-numeric: tabular-nums; }

/* Lista de concepto e importe */
.cuenta-l { display: grid; gap: 0; }
.cuenta-l > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.cuenta-l > div:last-child { border-bottom: 0; }
.cuenta-l b { font: 600 15px/1.3 var(--tit); font-variant-numeric: tabular-nums; }
.cuenta-l .tot { border-top: 2px solid var(--tinta); border-bottom: 0; margin-top: 4px; padding-top: 10px; font-weight: 600; }
.cuenta-l .tot b { font-size: 19px; }

/* ---------- Ventana ---------- */
dialog.modal { border: 0; border-radius: 11px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); color: var(--tinta); }
dialog.modal.ancha { width: min(860px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .5); }
.modal-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--papel); z-index: 1; }
.modal-cab h2 { font: 600 18px/1.2 var(--tit); }
.modal-cab .cerrar { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 4px; color: var(--gris); border-radius: 6px; }
.modal-cab .cerrar:hover { background: var(--fondo); color: var(--tinta); }
.modal-cpo { padding: 18px 20px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--linea); position: sticky; bottom: 0; background: var(--papel); }

.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; }
.aviso { background: var(--negro); color: #fff; padding: 12px 16px; border-radius: var(--r); font-size: 14.5px; max-width: 360px; border-left: 4px solid var(--celeste); animation: sube .18s ease-out; }
.aviso.ok { border-left-color: #2fb673; }
.aviso.mal { border-left-color: #e2574c; }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Ticket (papel térmico) ---------- */
.ticket-env, .v-lado { filter: drop-shadow(0 2px 5px rgba(20, 24, 29, .13)); }   /* la sombra va en el envoltorio: la máscara del ticket la recortaría */
.ticket { background: #fff; font-family: var(--tic); padding: 18px 18px 26px; position: relative;
  --d: 9px; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--d) 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--d) 100%; }
.ticket h2 { font: 600 17px/1.2 var(--tit); }
.ticket .corte { border-top: 1px dashed #9aa3ad; margin: 12px 0; }
.ticket .ren { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 15px; }
.ticket .ren b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket .total { display: flex; justify-content: space-between; align-items: baseline; font: 700 30px/1.1 var(--tit); font-variant-numeric: tabular-nums; margin-top: 6px; }
.ticket .total span { font: 600 15px/1 var(--tit); }

/* ---------- Vender ---------- */
.vender { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 22px; align-items: start; }
.v-busca { display: flex; gap: 10px; margin-bottom: 12px; }
.v-q { flex: 1; position: relative; display: block; }
.v-q .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gris); }
.v-q input { padding: 13px 14px 13px 44px; font-size: 17px; min-height: 52px; border-radius: 9px; }
.v-lista { display: flex; flex-direction: column; justify-content: center; position: relative; min-width: 150px; }
.v-lista span { position: absolute; top: 6px; left: 12px; font: 500 11.5px/1 var(--tit); color: var(--gris); pointer-events: none; }
.v-lista select { min-height: 52px; padding: 20px 11px 6px; border-radius: 9px; font: 600 15px/1.2 var(--tit); }
.v-res { max-height: calc(100vh - 230px); overflow-y: auto; }
.v-prod { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 14px; align-items: center; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid #e8ecf0; background: transparent; text-align: left; cursor: pointer; }
.v-prod:last-child { border-bottom: 0; }
.v-prod:hover, .v-prod:focus-visible { background: var(--celeste-cla); }
.v-nom b { display: block; font-weight: 500; font-size: 15.5px; }
.v-nom small, .v-stk small { display: block; color: var(--gris); font-size: 12.5px; }
.v-stk { text-align: right; }
.v-stk small { margin-top: 3px; }
.v-stk small i { display: inline-block; width: 10px; }
.v-stk small b { font-weight: 600; color: var(--tinta); }
.v-pre { font: 600 18px/1 var(--tit); text-align: right; font-variant-numeric: tabular-nums; }

.v-lado { position: sticky; top: 76px; }
.v-lado .segm { display: flex; margin-bottom: 14px; }
.v-lado .segm button { flex: 1; }
.v-quien > span { display: block; font: 500 13px/1.3 var(--tit); color: var(--gris); margin-bottom: 7px; }
.v-vends { display: flex; flex-wrap: wrap; gap: 6px; }
.v-vends button { border: 1px solid #c5ccd4; background: #fff; border-radius: 18px; padding: 6px 13px; font: 500 14.5px/1.2 var(--tit); cursor: pointer; }
.v-vends button:hover { border-color: var(--tinta); }
.v-vends button.on { background: var(--negro); border-color: var(--negro); color: #fff; }
.v-vacio { color: var(--gris); font-size: 14.5px; text-align: center; padding: 18px 0; }
.v-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 22px; gap: 8px; align-items: center; padding: 6px 0; }
.v-inom { font-size: 14.5px; line-height: 1.25; }
.v-inom small { display: block; color: var(--gris); font-size: 12.5px; }
.v-item > b { text-align: right; font: 600 15px/1 var(--tit); font-variant-numeric: tabular-nums; }
.v-cant { display: flex; align-items: center; border: 1px solid #c5ccd4; border-radius: 6px; overflow: hidden; }
.v-cant button { border: 0; background: #f2f4f6; width: 28px; height: 30px; cursor: pointer; font-size: 17px; line-height: 1; }
.v-cant button:hover { background: #e2e6eb; }
.v-cant input { width: 36px; min-height: 30px; padding: 0; border: 0; border-radius: 0; text-align: center; font: 600 14.5px/1 var(--tit); }
.v-item.dev > b, .v-item.dev .v-inom em { color: var(--mal); }
.v-inom em { font: 600 12px/1.3 var(--tit); font-style: normal; display: block; }
.v-inom input { width: 86px; min-height: 26px; padding: 2px 6px; font-size: 13px; display: inline-block; }
.v-quita { border: 0; background: transparent; color: var(--gris-cla); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.v-quita:hover { color: var(--mal); }
.v-cliente { position: relative; }
.v-sug { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); box-shadow: 0 8px 22px rgba(20, 24, 29, .14); overflow: hidden; }
.v-sug button { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: #fff; padding: 9px 12px; text-align: left; cursor: pointer; font-size: 14.5px; }
.v-sug button:hover { background: var(--celeste-cla); }
.v-sug small { color: var(--gris); }
.v-medios { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.v-medios button { display: flex; justify-content: space-between; align-items: center; gap: 6px; border: 1px solid #c5ccd4; background: #fff; border-radius: var(--r); padding: 9px 11px; font: 500 14px/1.2 var(--tit); cursor: pointer; text-align: left; }
.v-medios button:hover { border-color: var(--tinta); }
.v-medios button.on { background: var(--celeste); border-color: var(--celeste); color: #000; }
.v-medios button.on small { color: #000; }
.v-medios small { font: 600 12.5px/1 var(--tit); white-space: nowrap; }
.v-comb { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--gris); cursor: pointer; }
.v-comb input { width: 16px; height: 16px; accent-color: var(--celeste-osc); }
.v-combcpo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--gris); }
.v-combcpo input, .v-combcpo select { margin-top: 4px; }
.v-desc { display: grid; grid-template-columns: minmax(0, 1fr) 104px 58px; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--gris); }
.v-desc select { min-width: 0; }
@media (max-width: 1100px) {
  .vender { grid-template-columns: 1fr; }
  .v-lado { position: static; }
  .v-res { max-height: 46vh; }
}
@media (max-width: 560px) {
  .v-prod { grid-template-columns: minmax(0, 1fr) auto; }
  .v-stk { grid-column: 1; grid-row: 2; text-align: left; }
  .v-pre { grid-column: 2; grid-row: 1 / span 2; }
  .v-busca { flex-direction: column; }
}

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
.ingreso-marca { background: var(--negro); display: grid; place-items: center; padding: 40px; position: relative; overflow: hidden; }
.ingreso-marca img { width: min(560px, 90%); height: auto; position: relative; }
.ingreso-form { display: grid; place-items: center; padding: 32px 24px; background: var(--papel); }
.ingreso-form form { width: min(340px, 100%); }
.ingreso-form h1 { font: 600 27px/1.15 var(--tit); margin-bottom: 6px; }
.ingreso-form p { color: var(--gris); margin-bottom: 24px; }

/* ---------- Pantallas chicas ---------- */
@media (max-width: 1100px) {
  .dos { grid-template-columns: minmax(0, 1fr); }
  .tercios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lado { transform: translateX(-100%); transition: transform .2s; }
  body.menu-ab .lado { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .cuerpo { margin-left: 0; }
  .arriba { padding: 8px 14px; }
  .arriba .menu-btn { display: inline-flex; border: 0; background: transparent; padding: 6px; cursor: pointer; }
  .arriba .der .nom { display: none; }
  .banda-demo { padding: 6px 14px; }
  .pagina { padding: 18px 14px 40px; }
  .cab h1 { font-size: 22px; }
  .mitades { grid-template-columns: minmax(0, 1fr); }
  .f3, .f4 { grid-template-columns: 1fr; }
  .ingreso { grid-template-columns: 1fr; grid-template-rows: 190px 1fr; }
  .cifras > div { padding: 12px 14px; }
  .cifras b { font-size: 20px; }
}
@media (max-width: 560px) {
  .f2 { grid-template-columns: 1fr; }
  .tabla th, .tabla td { padding: 9px 10px; }
  .avisos { left: 12px; right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Impresión ---------- */
@media print {
  .lado, .arriba, .banda-demo, .no-imp, .avisos { display: none !important; }
  .cuerpo { margin: 0; }
  .pagina { padding: 0; max-width: none; }
  body { background: #fff; }
  .panel { border: 0; }
}