/* ═══════════════════════════════════════════════════════════════════════════
   RHE — hoja de estilos blaugrana (rediseño 2026-08-04)
   Identidad blaugrana (azul #004D98 · grana #A50044 · oro #EDBB00), la misma
   familia visual que otros proyectos del usuario (facturas-boletas, Sunat
   Buzón), refinada por Claude Design a partir del brief de este proyecto —
   ver design_handoff_rhe/. Sin build step, sin CDN, sin webfonts: solo
   fuentes del sistema. La app vive en una sola pantalla: el documento no
   scrollea, scrollea (si hace falta) el lienzo interior. Preparada para
   móvil (≤760 px): sidebar → barra + drawer.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --azul:        #004D98;
  --azul-tinta:  #0A2A52;
  --azul-suave:  #E8EFF8;
  --grana:       #A50044;
  --grana-hondo: #7A0033;
  --oro:         #EDBB00;

  --papel:  #F4F6FA;
  --lienzo: #FFFFFF;
  --linea:  #DDE3ED;
  --linea2: #EDF1F7;
  --tinta:  #16202E;
  --gris:   #5A6B82;
  --gris2:  #6B7C93;

  --bien:   #0F7A4D;
  --bien-f: #E7F5EE;
  --ojo:    #B45309;
  --ojo-f:  #FDF3E3;
  --mal:    #B3123C;
  --mal-f:  #FDECF1;

  /* Color del TEXTO que va encima del azul y del grana. Son tokens y no
     `#fff` literal porque en tema oscuro esos fondos se aclaran (#4D9BE8,
     #F0578F) y el blanco encima cae a 3.25:1 — por debajo de AA. Ahí el texto
     tiene que oscurecerse, no el fondo: el botón «Emitir en SUNAT» es el que
     más se tiene que leer de toda la app. */
  --sobre-azul:  #FFFFFF;
  --sobre-grana: #FFFFFF;

  --sombra:   0 1px 2px rgba(16,32,56,.06), 0 4px 14px rgba(16,32,56,.05);
  --sombra-f: 0 8px 30px rgba(16,32,56,.14);
  --radio: 12px;

  --ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --datos: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --azul:#4D9BE8; --azul-tinta:#0B1626; --azul-suave:#12263F;
  --grana:#F0578F; --grana-hondo:#C33768; --oro:#F2C742;
  --papel:#0D1520; --lienzo:#141E2C; --linea:#26344A; --linea2:#1D2A3C;
  --tinta:#E8EEF6; --gris:#9BAABF; --gris2:#8496AE;
  --bien:#4ADE9B; --bien-f:#0E2B21; --ojo:#F0B45C; --ojo-f:#2E2113;
  --mal:#FF7A9C;  --mal-f:#33141F;
  /* Sobre los azules y granas CLAROS del tema oscuro, el texto va oscuro. */
  --sobre-azul:#08192B; --sobre-grana:#2B0A16;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sombra-f:0 8px 30px rgba(0,0,0,.5);
} }
:root[data-theme="dark"] {
  --azul:#4D9BE8; --azul-tinta:#0B1626; --azul-suave:#12263F;
  --grana:#F0578F; --grana-hondo:#C33768; --oro:#F2C742;
  --papel:#0D1520; --lienzo:#141E2C; --linea:#26344A; --linea2:#1D2A3C;
  --tinta:#E8EEF6; --gris:#9BAABF; --gris2:#8496AE;
  --bien:#4ADE9B; --bien-f:#0E2B21; --ojo:#F0B45C; --ojo-f:#2E2113;
  --mal:#FF7A9C;  --mal-f:#33141F;
  /* Sobre los azules y granas CLAROS del tema oscuro, el texto va oscuro. */
  --sobre-azul:#08192B; --sobre-grana:#2B0A16;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sombra-f:0 8px 30px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --azul:#004D98; --azul-tinta:#0A2A52; --azul-suave:#E8EFF8;
  --grana:#A50044; --grana-hondo:#7A0033; --oro:#EDBB00;
  --papel:#F4F6FA; --lienzo:#FFFFFF; --linea:#DDE3ED; --linea2:#EDF1F7;
  --tinta:#16202E; --gris:#5A6B82; --gris2:#6B7C93;
  --bien:#0F7A4D; --bien-f:#E7F5EE; --ojo:#B45309; --ojo-f:#FDF3E3;
  --mal:#B3123C;  --mal-f:#FDECF1;
  --sobre-azul:#FFFFFF; --sobre-grana:#FFFFFF;
  --sombra:0 1px 2px rgba(16,32,56,.06), 0 4px 14px rgba(16,32,56,.05);
  --sombra-f:0 8px 30px rgba(16,32,56,.14);
}

/* ══ Base: la app ES el viewport ══════════════════════════════════════════ */
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; overflow:hidden; font-family:var(--ui); font-size:13.5px;
  line-height:1.45; background:var(--papel); color:var(--tinta);
  -webkit-font-smoothing:antialiased; }
a { color:var(--azul); }
a:hover { color:var(--grana); }
svg { display:block; }

.app { display:flex; height:100dvh; background:var(--papel); }

/* ══ Sidebar ══════════════════════════════════════════════════════════════ */
.side { width:216px; flex:0 0 216px; background:var(--azul-tinta); color:#fff;
  display:flex; flex-direction:column; position:relative; z-index:30; }
.side::after { content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--azul),var(--grana)); }
.marca { display:flex; align-items:center; gap:10px; padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.10); }
.marca .sig { width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg,var(--azul),var(--grana));
  display:grid; place-items:center; font-weight:800; font-size:12.5px;
  color:#fff; letter-spacing:-.02em; }
.marca b { font-size:13px; display:block; letter-spacing:-.01em; line-height:1.25; }
.marca span { font-size:10.5px; color:rgba(255,255,255,.62); }
.marca .txt { flex:1; min-width:0; }
.menu { padding:10px 9px; flex:1; overflow-y:auto; }
.menu .rotulo { font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.62); margin:13px 10px 5px; font-weight:600; }
.menu .rotulo:first-child { margin-top:2px; }
.menu a, .menu button { display:flex; width:100%; align-items:center; gap:10px;
  padding:7px 10px; border-radius:8px; text-decoration:none; border:0;
  background:none; font:inherit; text-align:left; cursor:pointer;
  color:rgba(255,255,255,.80); font-size:13px; margin-bottom:1px; }
.menu a:hover, .menu button:hover { background:rgba(255,255,255,.07); color:#fff; }
.menu .act { background:#fff; color:var(--azul-tinta); font-weight:650; }
.menu .act svg { color:var(--grana); }
.menu svg { width:16px; height:16px; flex-shrink:0; stroke-width:1.7; }
.side .pie { padding:11px 14px; font-size:10.5px; color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.10); line-height:1.45; }

/* Botón hamburguesa y velo del drawer: solo existen en móvil */
.abre-menu { display:none; }
.velo-menu { display:none; }

/* ══ Cabecera y lienzo ════════════════════════════════════════════════════ */
.cuerpo { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.barra { background:var(--lienzo); border-bottom:1px solid var(--linea);
  padding:10px 20px; display:flex; align-items:center; gap:14px; flex-shrink:0; }
.barra h1 { font-size:16px; letter-spacing:-.02em; font-weight:680; margin:0; }
.barra .der { margin-left:auto; display:flex; align-items:center; gap:9px; }
.ident { display:flex; align-items:center; gap:7px; font-size:11.5px;
  color:var(--gris); background:var(--papel); border:1px solid var(--linea);
  padding:4px 10px; border-radius:99px; white-space:nowrap; }
.ident .ruc { font-family:var(--datos); color:var(--tinta); font-weight:600; }
/* Texto informativo en la cabecera. Distinto de `.ident`, que es QUIÉN eres:
   esto es una nota sobre la pantalla, y no lleva el marco de pastilla. */
.leyenda { font-size:11.5px; color:var(--gris); white-space:nowrap; }
.lienzo { flex:1; min-height:0; overflow:auto; padding:14px 20px 18px;
  display:flex; flex-direction:column; gap:12px; }

/* ══ Tarjetas ═════════════════════════════════════════════════════════════ */
.caja { background:var(--lienzo); border:1px solid var(--linea);
  border-radius:var(--radio); padding:13px 16px; box-shadow:var(--sombra); }
.caja > header { display:flex; align-items:baseline; gap:10px; margin-bottom:3px; }
.caja h2 { font-size:13.5px; font-weight:670; letter-spacing:-.01em; margin:0; }
.caja .sub { font-size:12px; color:var(--gris); margin:0 0 10px; max-width:74ch; }
.caja .accion-cab { margin-left:auto; font-size:12px; color:var(--azul);
  text-decoration:none; font-weight:600; white-space:nowrap; }

/* ══ Cifras ═══════════════════════════════════════════════════════════════ */
.cifras { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; }
.cifra { background:var(--lienzo); border:1px solid var(--linea);
  border-radius:var(--radio); padding:11px 14px; box-shadow:var(--sombra);
  position:relative; overflow:hidden; }
.cifra::before { content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--azul); }
.cifra.g::before { background:var(--grana); }
.cifra.o::before { background:var(--oro); }
.cifra.v::before { background:var(--bien); }
.cifra .rot { font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris); font-weight:600; }
.cifra .val { font-family:var(--datos); font-size:22px; font-weight:600;
  letter-spacing:-.03em; margin-top:4px; font-variant-numeric:tabular-nums;
  line-height:1.1; }
.cifra .pie { font-size:11px; color:var(--gris2); margin-top:2px; }

/* ══ Tablas ═══════════════════════════════════════════════════════════════ */
.tabla { width:100%; border-collapse:collapse; }
.envoltura-tabla { overflow-x:auto; margin:0 -16px; padding:0 16px; }
.tabla th { font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gris); font-weight:650; text-align:left; padding:7px 9px;
  border-bottom:1px solid var(--linea); white-space:nowrap; }
.tabla td { padding:8px 9px; border-bottom:1px solid var(--linea2);
  font-size:12.5px; vertical-align:middle; }
.tabla tbody tr:last-child td { border-bottom:none; }
.tabla tbody tr:hover td { background:var(--papel); }
.tabla .num { text-align:right; font-family:var(--datos);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tabla .fuerte { font-weight:650; }
.tabla tfoot td { padding:8px 9px; border-top:2px solid var(--linea);
  font-size:12px; font-weight:650; background:var(--papel); }
.tenue { color:var(--gris2); }
.dos-lineas b { display:block; font-size:12.5px; font-weight:600; }
.dos-lineas span { font-size:11px; color:var(--gris); }

/* Estado por FORMA además de color: franja + pastilla con texto */
.tabla td.franja { border-left:3px solid transparent; padding-left:11px; }
tr.est-emitido  td.franja { border-left-color:var(--bien); }
tr.est-borrador td.franja { border-left-color:var(--gris2); }
tr.est-incierto td.franja { border-left-color:var(--ojo); }
tr.est-error    td.franja { border-left-color:var(--mal); }

.pilla { display:inline-flex; align-items:center; gap:5px; font-size:10.5px;
  padding:2px 8px; border-radius:99px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; }
.pilla .punto { width:5px; height:5px; border-radius:50%; background:currentColor; }
.pilla.ok  { background:var(--bien-f); color:var(--bien); border-color:color-mix(in srgb,var(--bien) 25%,transparent); }
.pilla.esp { background:var(--papel);  color:var(--gris); border-color:var(--linea); }
.pilla.avi { background:var(--ojo-f);  color:var(--ojo);  border-color:color-mix(in srgb,var(--ojo) 25%,transparent); }
.pilla.err { background:var(--mal-f);  color:var(--mal);  border-color:color-mix(in srgb,var(--mal) 25%,transparent); }

/* ══ Botones ══════════════════════════════════════════════════════════════ */
.btn { font:inherit; font-size:13px; font-weight:600; padding:7px 14px;
  border-radius:8px; border:1px solid transparent; cursor:pointer;
  background:var(--azul); color:var(--sobre-azul); display:inline-flex;
  align-items:center;
  justify-content:center; gap:7px; text-decoration:none; white-space:nowrap; }
.btn:hover { filter:brightness(1.08); color:var(--sobre-azul); }
.btn:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
.btn.sec { background:var(--lienzo); color:var(--tinta); border-color:var(--linea); }
.btn.sec:hover { border-color:var(--azul); color:var(--azul);
  background:var(--azul-suave); filter:none; }
.btn.emitir { background:var(--grana); color:var(--sobre-grana); }
.btn.emitir:hover { background:var(--grana-hondo); filter:none;
  color:var(--sobre-grana); }
.btn.chico { font-size:12px; padding:4px 10px; }
.btn svg { width:15px; height:15px; stroke-width:1.9; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.icono-btn { width:28px; height:28px; border-radius:7px; border:1px solid var(--linea);
  background:var(--lienzo); color:var(--gris); display:inline-grid;
  place-items:center; cursor:pointer; }
.icono-btn:hover { color:var(--azul); border-color:var(--azul); background:var(--azul-suave); }
.icono-btn svg { width:15px; height:15px; stroke-width:1.8; }

/* ══ Foco visible ═════════════════════════════════════════════════════════
   Sin esto, quien navega con el teclado tabula A CIEGAS por el menú y por los
   botones de icono (borrar un borrador, quitar una cuota). En una app donde
   un botón emite un documento irreversible, no saber dónde está el cursor no
   es una molestia: es un riesgo. `:focus-visible` y no `:focus` para que el
   anillo no aparezca al hacer clic con el mouse. */
.icono-btn:focus-visible,
.buscador-limpiar:focus-visible,
.abre-menu:focus-visible,
.velo-menu:focus-visible {
  outline:2px solid var(--azul); outline-offset:2px; }
/* En el sidebar el fondo es azul oscuro: el anillo azul no se vería. */
.menu a:focus-visible, .menu button:focus-visible, .boton-tema:focus-visible {
  outline:2px solid #fff; outline-offset:-2px; }
/* La tarjeta entera se marca cuando el radio de adentro toma el foco: el
   input real es diminuto y el usuario mira la tarjeta, no el círculo. */
.opcion:has(input:focus-visible) { outline:2px solid var(--azul); outline-offset:2px; }

/* Filtros segmentados con conteo */
.segmentos { display:flex; gap:6px; flex-wrap:wrap; }

/* ══ Formularios ══════════════════════════════════════════════════════════ */
.campo { display:flex; flex-direction:column; gap:4px; }
.campo > label { font-size:11.5px; font-weight:620; color:var(--tinta); }
.campo .ayuda { font-size:11px; color:var(--gris); line-height:1.4; }
.campo input, .campo select {
  font:inherit; font-size:13px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--linea); background:var(--lienzo); color:var(--tinta);
  width:100%; }
.campo input:focus, .campo select:focus { outline:2px solid var(--azul);
  outline-offset:-1px; border-color:var(--azul); }
.campo input::placeholder { color:var(--gris2); }
.fila { display:flex; gap:10px; flex-wrap:wrap; }
.fila > * { flex:1; min-width:140px; }
.exige { font-size:9px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grana); font-weight:700; margin-left:5px; }

/* Grupo de radios con nombre accesible. Es un <fieldset> para que el lector
   de pantalla anuncie la PREGUNTA antes de las opciones — con un <label>
   suelto, quien no ve la pantalla escuchaba «Trabajo independiente / Dieta de
   directorio» sin saber nunca qué se le estaba preguntando. El navegador le
   pone borde y márgenes propios: se anulan para que se vea igual que antes. */
.grupo { border:0; margin:0; padding:0; min-width:0; }
.grupo > legend { padding:0; font-size:11.5px; font-weight:620; color:var(--tinta); }

.opciones { display:flex; gap:8px; flex-wrap:wrap; }
.opcion { flex:1; min-width:170px; display:flex; gap:8px; align-items:flex-start;
  padding:9px 11px; border:1px solid var(--linea); border-radius:10px;
  background:var(--lienzo); cursor:pointer; }
.opcion:hover { border-color:var(--azul); }
.opcion input { margin:2px 0 0; accent-color:var(--azul); }
.opcion b { display:block; font-size:12.5px; font-weight:640; }
.opcion span { display:block; font-size:11px; color:var(--gris); line-height:1.35; }
.opcion.marcada { border-color:var(--azul); background:var(--azul-suave);
  box-shadow:inset 0 0 0 1px var(--azul); }
.opcion.compacta { min-width:110px; flex:0 1 auto; padding:8px 13px; }

/* ══ Avisos ═══════════════════════════════════════════════════════════════ */
.avisos { display:flex; gap:8px; padding:8px 11px; border-radius:9px;
  font-size:12px; line-height:1.4; align-items:flex-start; }
.avisos svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; stroke-width:2; }
.avisos.ok  { background:var(--bien-f); color:var(--bien); }
.avisos.avi { background:var(--ojo-f);  color:var(--ojo); }
.avisos.err { background:var(--mal-f);  color:var(--mal); }
.avisos b { font-weight:670; }

/* ══ Pantalla de emisión ══════════════════════════════════════════════════ */
.emisor { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:12px;
  align-items:start; }
.col-form { display:flex; flex-direction:column; gap:12px; min-width:0; }
.resumen { position:sticky; top:0; display:flex; flex-direction:column; gap:12px; }
.totales { display:grid; grid-template-columns:1fr auto; gap:5px 14px;
  font-variant-numeric:tabular-nums; margin:0; }
.totales dt { font-size:12px; color:var(--gris); }
.totales dd { font-family:var(--datos); font-size:13px; text-align:right; margin:0; }
.totales .resta { color:var(--grana); }
.totales .granTotal { border-top:1px solid var(--linea); padding-top:7px;
  font-weight:700; font-size:15.5px; color:var(--azul); }
.totales dt.granTotal { font-size:12px; font-weight:650; color:var(--tinta); }
.acciones { display:flex; flex-direction:column; gap:7px; }

.pasos { display:flex; flex-direction:column; }
.paso { display:flex; gap:9px; align-items:flex-start; padding:4px 0;
  font-size:11.5px; color:var(--gris); position:relative; }
.paso .marca-paso { width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--linea); background:var(--lienzo); display:grid;
  place-items:center; margin-top:1px; z-index:1; }
.paso:not(:last-child)::before { content:''; position:absolute; left:6.5px;
  top:17px; bottom:-3px; width:1.5px; background:var(--linea); }
.paso.hecho { color:var(--tinta); }
.paso.hecho .marca-paso { background:var(--bien); border-color:var(--bien); }
.paso.hecho .marca-paso svg { width:8px; height:8px; color:#fff; stroke-width:3.4; }
.paso.hecho:not(:last-child)::before { background:var(--bien); }
.paso.activo { color:var(--azul); font-weight:640; }
.paso.activo .marca-paso { border-color:var(--azul); border-width:2px; }
.paso .t { font-family:var(--datos); font-size:10px; color:var(--gris2);
  margin-left:auto; padding-left:8px; }

.medidor-lineal { height:6px; border-radius:99px; background:var(--linea2);
  overflow:hidden; }
.medidor-lineal > i { display:block; height:100%; border-radius:99px;
  background:var(--azul); }

/* Barra de acción fija inferior: solo en móvil */
.barra-emitir-movil { display:none; }

/* ══ Medidor de límite anual ══════════════════════════════════════════════ */
.limite { display:grid; grid-template-columns:minmax(0,1fr) 235px; gap:20px;
  align-items:center; }
.termometro { position:relative; padding:22px 0 26px; }
.riel { height:20px; border-radius:6px; background:var(--linea2);
  border:1px solid var(--linea); overflow:hidden; position:relative; }
.relleno { height:100%; display:flex; }
.relleno i { display:block; height:100%; }
.relleno .propio { background:var(--azul); }
.relleno .quinta { background:repeating-linear-gradient(135deg,
  var(--azul) 0 5px, color-mix(in srgb,var(--azul) 62%,#fff) 5px 10px); }
.limite.riesgo .relleno .propio { background:var(--ojo); }
.limite.riesgo .relleno .quinta { background:repeating-linear-gradient(135deg,
  var(--ojo) 0 5px, color-mix(in srgb,var(--ojo) 62%,#fff) 5px 10px); }
.limite.excedido .relleno .propio { background:var(--mal); }
.limite.excedido .relleno .quinta { background:repeating-linear-gradient(135deg,
  var(--mal) 0 5px, color-mix(in srgb,var(--mal) 62%,#fff) 5px 10px); }
.hito { position:absolute; top:9px; bottom:12px; width:2px;
  background:var(--tinta); opacity:.55; }
.hito::after { content:attr(data-rot); position:absolute; top:-15px; left:50%;
  transform:translateX(-50%); white-space:nowrap; font-size:9.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gris);
  font-weight:650; }
.hito.al-borde::after { left:auto; right:0; transform:none; }
.marcas-mes { display:flex; margin-top:6px; }
.marcas-mes span { flex:1; text-align:center; font-size:9px; color:var(--gris2);
  font-family:var(--datos); letter-spacing:-.02em; }
.marcas-mes span.pasado { color:var(--gris); font-weight:600; }
.marcas-mes span.actual { color:var(--azul); font-weight:700; }
.lectura .cabeza { font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris); font-weight:650; }
.lectura .grande { font-family:var(--datos); font-size:26px; font-weight:600;
  letter-spacing:-.035em; margin:2px 0; font-variant-numeric:tabular-nums; }
.lectura .de { font-size:12px; color:var(--gris); }
.lectura .de b { font-family:var(--datos); color:var(--tinta); }
.desglose { margin-top:11px; display:grid; gap:6px; }
.desglose div { display:flex; align-items:center; gap:8px; font-size:11.5px;
  color:var(--gris); }
.desglose .mu { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.desglose .mu.p { background:var(--azul); }
.desglose .mu.q { background:repeating-linear-gradient(135deg,
  var(--azul) 0 4px, color-mix(in srgb,var(--azul) 62%,#fff) 4px 8px); }
.limite.riesgo .desglose .mu.p { background:var(--ojo); }
.limite.riesgo .desglose .mu.q { background:repeating-linear-gradient(135deg,
  var(--ojo) 0 4px, color-mix(in srgb,var(--ojo) 62%,#fff) 4px 8px); }
.desglose b { margin-left:auto; font-family:var(--datos); color:var(--tinta);
  font-variant-numeric:tabular-nums; }

/* ══ Modal de confirmación ════════════════════════════════════════════════ */
.velo-modal { position:fixed; inset:0; background:rgba(10,20,35,.55);
  display:grid; place-items:center; padding:20px; z-index:50; }
.modal { background:var(--lienzo); border-radius:14px; width:100%; max-width:580px;
  max-height:calc(100dvh - 40px); display:flex; flex-direction:column;
  box-shadow:var(--sombra-f); overflow:hidden; border:1px solid var(--linea); }
.modal header { padding:14px 18px 11px; border-bottom:1px solid var(--linea);
  flex-shrink:0; }
.modal header .aviso-irrev { display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grana); font-weight:700; margin-bottom:5px; }
.modal header h3 { font-size:16px; letter-spacing:-.02em; margin:0; }
.modal header p { font-size:12px; color:var(--gris); margin:4px 0 0; max-width:62ch; }
.modal .lienzo-previa { padding:12px 18px; background:var(--papel);
  border-bottom:1px solid var(--linea); overflow:auto; min-height:0; }
.recibo-previa { background:#fff; border:1px solid #DDE3ED; border-radius:8px;
  padding:14px 16px; font-size:11.5px; color:#16202E; }
.recibo-previa .sello { font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:#B3123C; border:1px dashed #B3123C;
  padding:3px 8px; border-radius:4px; display:inline-block; margin-bottom:10px;
  white-space:nowrap;
  font-weight:700; }
.recibo-previa .emisor-linea { font-weight:700; font-size:12.5px; color:#0A2A52; }
.recibo-previa dl { display:grid; grid-template-columns:auto 1fr; gap:3px 14px;
  margin:8px 0; }
.recibo-previa dt { color:#5A6B82; }
.recibo-previa dd { color:#16202E; margin:0; }
.recibo-previa .importes { border-top:1px solid #DDE3ED; margin-top:8px;
  padding-top:8px; display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  font-family:var(--datos); font-variant-numeric:tabular-nums; }
.recibo-previa .importes .neto { font-weight:700; font-size:13px; color:#0A2A52;
  border-top:1px solid #DDE3ED; padding-top:6px; }
.modal footer { padding:11px 18px; display:flex; gap:8px;
  justify-content:flex-end; align-items:center; flex-shrink:0; }
.modal footer .izq { margin-right:auto; font-size:11px; color:var(--gris); }

/* ══ Móvil (≤760 px): barra superior + drawer + acción inferior ═══════════ */
@media (max-width:760px) {
  .app { flex-direction:column; }
  .side { width:100%; flex:0 0 auto; flex-direction:row; align-items:center; }
  .side::after { height:2px; }
  .marca { border-bottom:none; flex:1; padding:10px 12px; }
  .abre-menu { display:inline-grid; place-items:center; width:38px; height:38px;
    margin-right:10px; border:1px solid rgba(255,255,255,.45); border-radius:9px;
    background:none; color:#fff; cursor:pointer; flex-shrink:0; }
  .abre-menu svg { width:18px; height:18px; stroke-width:2; }
  .side .pie { display:none; }
  .menu { position:fixed; top:0; left:0; bottom:0; width:min(280px,84vw);
    background:var(--azul-tinta); z-index:60; padding:14px 12px;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:var(--sombra-f); overflow-y:auto; }
  .app.menu-abierto .menu { transform:none; }
  .velo-menu { position:fixed; inset:0; background:rgba(10,20,35,.5);
    z-index:55; border:0; padding:0; cursor:pointer; }
  .app.menu-abierto .velo-menu { display:block; }
  .menu a, .menu button { padding:11px 12px; font-size:14.5px; }
  .barra { padding:9px 14px; flex-wrap:wrap; gap:8px; }
  .lienzo { padding:12px 14px 16px; }
  .ident { display:none; }
  /* Excepción: en la pantalla de emisión el RUC se ve SIEMPRE. Es con lo que
     vas a firmar un documento irreversible; ocultarlo en el celular para
     ganar espacio es justo el ahorro que no conviene hacer. */
  .ident.ident-siempre { display:inline-flex; font-size:11px; }
  .emisor { grid-template-columns:1fr; }
  .resumen { position:static; }
  .limite { grid-template-columns:1fr; }
  .opcion { min-width:140px; }
  /* Objetivos táctiles de 44 px, que es la recomendación real. El bloque decía
     «≥44 px» y dejaba los botones de icono en 38: el rótulo prometía algo que
     el código no cumplía. */
  .btn { padding:11px 16px; min-height:44px; }
  .btn.chico { padding:8px 12px; min-height:36px; }
  .icono-btn { width:44px; height:44px; }
  .abre-menu { width:44px; height:44px; }
  .campo input, .campo select { padding:11px 12px; font-size:16px; }

  /* Las dos acciones que van a SUNAT quedan siempre a mano: la segura al lado
     de la irreversible, no al final de un formulario largo. */
  .barra-emitir-movil { display:flex; position:sticky; bottom:-18px;
    margin:2px -14px -16px; padding:10px 14px
    calc(10px + env(safe-area-inset-bottom)); background:var(--lienzo);
    border-top:1px solid var(--linea); align-items:center; gap:12px; z-index:20; }
  .barra-emitir-movil .neto { font-family:var(--datos); font-weight:700;
    font-size:16px; color:var(--azul); font-variant-numeric:tabular-nums; }
  .barra-emitir-movil .rot { font-size:10px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--gris); font-weight:650; }
  .barra-emitir-movil .acciones-movil { margin-left:auto; display:flex;
    gap:8px; flex-shrink:0; }
}
@media (min-width:761px) {
  .velo-menu { display:none !important; }
}
/* Pantallas medianas: el carril baja antes que en el mockup original */
@media (min-width:761px) and (max-width:1010px) {
  .emisor { grid-template-columns:minmax(0,1fr) 260px; }
  .limite { grid-template-columns:1fr; gap:12px; }
}

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