/* Renta 210 — papel de trabajo para la declaración de renta de asalariados.
   La estructura la dan los filetes y el espacio, no las tarjetas.
   Sin radios, sin sombras, sin emojis. */

:root {
  color-scheme: only light;

  /* superficies */
  --papel: #FBFAF7;
  --papel-2: #F3F1EC;
  --papel-3: #FFFFFF;

  /* tinta */
  --tinta: #16171A;
  --tinta-2: #3F434B;
  --tinta-3: #666C78;

  /* filetes: aquí descansa toda la estructura */
  --regla: #CFCBC2;
  --regla-estructural: #A9A396;
  --regla-total: #16171A;

  /* semántica: tres acentos en toda la aplicación */
  --acento: #1B4D3E;
  --acento-tenue: #E8EFEA;
  --observacion: #8A5A12;
  --observacion-tenue: #FBF3E2;
  --advertencia: #8A1F1F;
  --advertencia-tenue: #F6EEEC;

  /* tipografía */
  --f-texto: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-cifra: ui-monospace, "Cascadia Mono", "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --f-titulo: ui-serif, Georgia, "Times New Roman", "Liberation Serif", serif;

  --t-micro: 11px;
  --t-min: 12px;
  --t-aux: 13.5px;
  --t-tabla: 14px;
  --t-base: 15px;
  --t-input: 16px;
  --t-lead: 17px;
  --t-h3: 15px;
  --t-h2: 21px;
  --t-h1: 26px;
  --t-total: 30px;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px;

  --radio: 0;
  --borde-fino: 1px solid var(--regla);
  --borde-estructural: 1.5px solid var(--regla-estructural);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* El atributo `hidden` debe ganarle a cualquier `display` de las clases. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}

/* cifras: toda cantidad, casilla, código y fecha */
.cifra, .num, td.num, .monto, .uvt, .casilla, .codigo {
  font-family: var(--f-cifra);
  font-variant-numeric: tabular-nums;
}

/* ============================ estructura ============================ */
.hoja {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px;
  background: var(--papel);
}
@media (max-width: 759px) { .hoja { padding: 20px 16px 96px; } }

.membrete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); padding-bottom: var(--e-3);
  border-bottom: 3px double var(--regla-total); margin-bottom: var(--e-6);
}
.membrete .marca { font-family: var(--f-titulo); font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.01em; }
.membrete .bajada {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--tinta-3); margin-top: var(--e-1); font-family: var(--f-texto);
}
.membrete .acciones { display: flex; gap: var(--e-4); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 559px) {
  .membrete { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .membrete .acciones { justify-content: flex-start; gap: var(--e-3); }
}

/* índice de pasos: numeración, no barras de color */
.indice { display: flex; flex-wrap: wrap; gap: var(--e-5); margin-bottom: var(--e-6); border-bottom: var(--borde-fino); padding-bottom: var(--e-3); }
.indice .expediente { flex: 1 1 100%; }
@media (max-width: 1199px) {
  .indice .expediente { border-top: var(--borde-fino); padding-top: var(--e-3); }
}
.indice button {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--t-aux); color: var(--tinta-3); display: flex; gap: var(--e-2); align-items: baseline;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.indice button .n { font-family: var(--f-cifra); font-size: var(--t-micro); }
.indice button.activo { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }
.indice button.hecho { color: var(--tinta-2); }
.indice button:hover { color: var(--tinta); }

.paso { display: none; }
.paso.activo { display: block; }

h1.titulo { font-family: var(--f-titulo); font-size: var(--t-h1); line-height: 1.25; font-weight: 600; margin-bottom: var(--e-2); }
h2.seccion {
  font-family: var(--f-titulo); font-size: var(--t-h2); line-height: 1.25; font-weight: 600;
  margin: var(--e-7) 0 var(--e-3); padding-bottom: var(--e-2); border-bottom: var(--borde-estructural);
  display: flex; gap: var(--e-3); align-items: baseline;
}
h2.seccion .n { font-family: var(--f-cifra); font-size: var(--t-min); color: var(--tinta-3); }
h3 { font-size: var(--t-h3); font-weight: 600; margin: var(--e-5) 0 var(--e-2); }
p { max-width: 68ch; }
p + p { margin-top: var(--e-3); }
.lead { font-size: var(--t-lead); color: var(--tinta-2); margin-bottom: var(--e-4); }
.aux { font-size: var(--t-aux); color: var(--tinta-3); }
.aux strong { color: var(--tinta-2); font-weight: 600; }
ul.lista { padding-left: var(--e-5); font-size: var(--t-aux); color: var(--tinta-2); max-width: 68ch; }
ul.lista li { margin-bottom: var(--e-1); }

.rotulo {
  font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tinta-3); font-weight: 600;
}
.casilla { font-size: var(--t-micro); color: var(--tinta-3); white-space: nowrap; }
.uvt { font-size: var(--t-micro); color: var(--tinta-3); }

/* ============================ bandas ============================ */
.banda { border-left: 3px solid var(--tinta-3); padding: var(--e-3) var(--e-4); margin: var(--e-4) 0; background: var(--papel-2); max-width: 74ch; }
.banda .etiqueta { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; display: block; margin-bottom: var(--e-1); }
.banda p { font-size: var(--t-aux); color: var(--tinta-2); max-width: none; }
.banda.nota { border-left-color: var(--tinta-3); background: var(--papel-2); }
.banda.nota .etiqueta { color: var(--tinta-3); }
.banda.verificado { border-left-color: var(--acento); background: var(--acento-tenue); }
.banda.verificado .etiqueta { color: var(--acento); }
.banda.observacion { border-left-color: var(--observacion); background: var(--observacion-tenue); }
.banda.observacion .etiqueta { color: var(--observacion); }
.banda.advertencia { border-left-color: var(--advertencia); background: var(--advertencia-tenue); }
.banda.advertencia .etiqueta { color: var(--advertencia); }

/* ============================ formularios ============================ */
.campo { margin-bottom: var(--e-3); }
.campo > label, .campo .et { display: block; font-size: var(--t-aux); color: var(--tinta-2); margin-bottom: var(--e-2); font-weight: 600; }
.campo input[type="text"], .campo select, .campo input[type="file"] {
  width: 100%; padding: 9px 10px; border: var(--borde-fino); border-radius: var(--radio);
  font-family: var(--f-cifra); font-size: var(--t-input); color: var(--tinta);
  background: var(--papel-3); font-variant-numeric: tabular-nums;
}
.campo select { font-family: var(--f-texto); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--acento); outline-offset: -2px; border-color: var(--acento); }
.campo .pista { font-size: var(--t-aux); color: var(--tinta-3); margin-top: var(--e-2); max-width: 68ch; }
.campo .prefijo { position: relative; }
.campo .prefijo input { padding-left: 22px; }
.campo .prefijo::before { content: "$"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-family: var(--f-cifra); font-size: var(--t-aux); }
/* No todo renglon es plata: un porcentaje con signo de pesos se lee mal y
   se digita peor. El sufijo va a la derecha, donde uno lo espera. */
.campo .prefijo.pct::before { content: none; }
.campo .prefijo.pct input { padding-left: 10px; padding-right: 26px; }
.campo .prefijo.pct::after { content: "%"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-family: var(--f-cifra); font-size: var(--t-aux); }
.rejilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-5); }
@media (max-width: 759px) { .rejilla2 { grid-template-columns: 1fr; } }

.opciones { display: flex; flex-wrap: wrap; }
.opciones label {
  border: var(--borde-fino); margin-left: -1px; padding: 8px 14px; cursor: pointer;
  font-size: var(--t-aux); color: var(--tinta-2); background: var(--papel-3); -webkit-user-select: none; user-select: none;
}
.opciones label:first-child { margin-left: 0; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label:has(input:checked) { background: var(--tinta); color: var(--papel-3); border-color: var(--tinta); position: relative; z-index: 1; }
.opciones label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 1px; z-index: 2; }

.marcar { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-aux); color: var(--tinta-2); cursor: pointer; }
.marcar input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--acento); flex: none; }

.sesion { font-family: var(--f-cifra); font-size: var(--t-micro); color: var(--acento); align-self: center; }
.pie-legal {
  max-width: 960px; margin: var(--e-8) auto 0; padding: var(--e-4) 40px var(--e-6);
  border-top: var(--borde-fino); display: flex; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; font-size: var(--t-min); color: var(--tinta-3);
}
.pie-legal a { color: var(--tinta-2); }
@media (max-width: 759px) { .pie-legal { padding: var(--e-4) 16px 96px; } }

#panel-nube { max-width: 74ch; margin-bottom: var(--e-6); }
.acciones-nube { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

.indice-legal { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); margin: var(--e-4) 0 var(--e-6); padding-bottom: var(--e-3); border-bottom: var(--borde-fino); font-size: var(--t-aux); }
.indice-legal a { color: var(--tinta-2); text-decoration: none; }
.indice-legal a:hover { color: var(--acento); text-decoration: underline; }

.aceptacion { border-top: var(--borde-fino); max-width: 74ch; }
.aceptacion .marcar.opcional { background: var(--papel-2); padding-left: var(--e-3); padding-right: var(--e-3); }
.aceptacion .marcar.opcional span strong { text-transform: uppercase; font-size: var(--t-min); letter-spacing: 0.08em; color: var(--tinta-3); margin-right: var(--e-1); }
.aceptacion .marcar input:disabled { opacity: 0.4; }
.aceptacion .marcar:has(input:disabled) { color: var(--tinta-3); }
.aceptacion .marcar { padding: var(--e-3) 0; border-bottom: var(--borde-fino); align-items: flex-start; }
.aceptacion .marcar:has(input:checked) { color: var(--tinta); }
#portada { max-width: 74ch; }
#portada .aux { color: var(--tinta-3); }

/* ============================ botones ============================ */
.btn {
  font: inherit; font-size: var(--t-aux); font-weight: 600; cursor: pointer;
  border: var(--borde-estructural); border-radius: var(--radio);
  padding: 9px 18px; background: var(--papel-3); color: var(--tinta);
}
.btn:hover { background: var(--papel-2); }
.btn.principal { background: var(--tinta); color: var(--papel-3); border-color: var(--tinta); }
.btn.principal:hover { background: #000; }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.enlace {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-aux);
  color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enlace:hover { color: var(--acento); }

.pie-nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  margin-top: var(--e-7); padding-top: var(--e-4); border-top: var(--borde-estructural);
}
.pie-nav .estado { font-size: var(--t-min); color: var(--tinta-3); }

/* ============================ relación de soportes ============================ */
.folios { border-top: var(--borde-estructural); margin-top: var(--e-4); }
.folio { border-bottom: var(--borde-fino); padding: var(--e-4) 0; }
.folio.recibido { background: linear-gradient(to right, var(--acento-tenue) 0 3px, transparent 3px); padding-left: var(--e-3); }
.folio.pendiente { background: linear-gradient(to right, var(--observacion) 0 3px, transparent 3px); padding-left: var(--e-3); }
.folio.noaplica { padding-left: var(--e-3); }
.folio.noaplica .cabecera, .folio.noaplica .mando { color: var(--tinta-3); }
.folio.noaplica h3, .folio.noaplica .nombre { color: var(--tinta-2); }

.folio .cabecera { display: grid; grid-template-columns: 54px 1fr auto; gap: var(--e-3); align-items: baseline; }
@media (max-width: 559px) { .folio .cabecera { grid-template-columns: 54px 1fr; } .folio .sello { grid-column: 2; } }
.folio .codigo { font-size: var(--t-min); color: var(--tinta-3); font-weight: 600; }
.folio .nombre { font-size: var(--t-base); font-weight: 600; line-height: 1.3; }
.folio .expide { font-size: var(--t-aux); color: var(--tinta-3); margin-top: 2px; }
.folio .obligatorio { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--advertencia); margin-left: var(--e-2); font-family: var(--f-texto); }

.sello { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; display: inline-flex; align-items: center; gap: var(--e-2); white-space: nowrap; }
.sello::before { content: ""; width: 8px; height: 8px; display: inline-block; }
.sello.recibido { color: var(--acento); }
.sello.recibido::before { background: var(--acento); }
.sello.pendiente { color: var(--observacion); }
.sello.pendiente::before { border: 1.5px solid var(--observacion); }
.sello.noaplica { color: var(--tinta-3); }
.sello.noaplica::before { border: 1.5px solid var(--tinta-3); background: repeating-linear-gradient(45deg, var(--tinta-3) 0 1px, transparent 1px 3px); }
.sello.sindeclarar { color: var(--tinta-3); }
.sello.sindeclarar::before { border: 1.5px dotted var(--tinta-3); }

.folio .mando { margin-top: var(--e-3); margin-left: 54px; }
@media (max-width: 559px) { .folio .mando { margin-left: 0; } }
.folio .cuerpo { margin-top: var(--e-4); margin-left: 54px; }
@media (max-width: 559px) { .folio .cuerpo { margin-left: 0; } }

/* ficha del documento: cuatro filas regladas */
.ficha { border-top: var(--borde-fino); font-size: var(--t-aux); margin-bottom: var(--e-4); }
.ficha .fila { display: grid; grid-template-columns: 168px 1fr; gap: var(--e-4); padding: 7px 0; border-bottom: var(--borde-fino); }
@media (max-width: 559px) { .ficha .fila { grid-template-columns: 1fr; gap: 2px; } }
.ficha .fila > dt { color: var(--tinta-3); font-weight: 600; }
.ficha .fila > dd { color: var(--tinta-2); max-width: 68ch; }

.captura { border-top: var(--borde-estructural); padding-top: var(--e-3); }
.captura .titulillo { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); font-weight: 600; margin-bottom: var(--e-3); }

/* ---- adjuntar soportes: zona de arrastre ---- */
.adjunto { margin-top: var(--e-4); }
.adjunto input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.soltar {
  border: 1.5px dashed var(--regla-estructural);
  background: var(--papel-3);
  padding: var(--e-4) var(--e-4);
  display: flex; align-items: center; gap: var(--e-4);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.soltar:hover { background: var(--papel-2); border-color: var(--tinta-3); }
.soltar:focus-within { outline: 2px solid var(--acento); outline-offset: -2px; }
.soltar.encima { background: var(--acento-tenue); border-color: var(--acento); border-style: solid; }
.soltar .bandeja {
  width: 34px; height: 42px; flex: none; position: relative;
  border: 1.5px solid var(--tinta-3); border-top-right-radius: 9px;
  background: var(--papel-3);
  transition: transform 140ms ease, border-color 140ms ease;
}
/* la esquina doblada del papel, dibujada con bordes */
.soltar .bandeja::before {
  content: ""; position: absolute; top: -1px; right: -1px;
  border-width: 0 0 10px 10px; border-style: solid;
  border-color: transparent transparent var(--tinta-3) transparent;
}
.soltar .bandeja::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 20px;
  border-top: 1.5px solid var(--tinta-3);
  box-shadow: 0 6px 0 -0.5px var(--tinta-3);
}
.soltar:hover .bandeja { transform: translateY(-2px); }
.soltar.encima .bandeja { border-color: var(--acento); transform: translateY(-3px); }
.soltar.encima .bandeja::before { border-bottom-color: var(--acento); }
.soltar.encima .bandeja::after { border-top-color: var(--acento); box-shadow: 0 6px 0 -0.5px var(--acento); }
.soltar .texto { font-size: var(--t-aux); color: var(--tinta-2); }
.soltar .texto b { font-weight: 600; color: var(--tinta); display: block; }
.soltar .texto span { color: var(--tinta-3); }

.piezas { list-style: none; margin-top: var(--e-3); border-top: var(--borde-fino); }
.pieza {
  display: grid; grid-template-columns: 40px 1fr auto auto; gap: var(--e-3);
  align-items: center; padding: var(--e-2) 0; border-bottom: var(--borde-fino);
  animation: entra 180ms ease;
}
@keyframes entra { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pieza .miniatura {
  width: 40px; height: 40px; border: var(--borde-fino); background: var(--papel-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--f-cifra); font-size: 9px; color: var(--tinta-3); text-transform: uppercase;
}
.pieza .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.pieza .nombre { font-size: var(--t-aux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pieza .peso { font-family: var(--f-cifra); font-size: var(--t-micro); color: var(--tinta-3); white-space: nowrap; }
.pieza .quitar { font-size: var(--t-min); }
.adjunto .nota-memoria { font-size: var(--t-micro); color: var(--tinta-3); margin-top: var(--e-2); }

/* ---- carga masiva y lector de documentos ---- */
.carga-total { margin: var(--e-5) 0 var(--e-6); }
.carga-total .soltar { border-width: 2px; }
#carga-resumen { margin-top: var(--e-2); }
#carga-pendientes .asignar {
  display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--e-3); padding-top: var(--e-3); border-top: var(--borde-fino);
}
#carga-pendientes .asignar .nombre { font-weight: 600; }
#carga-pendientes select { max-width: 340px; }

/* ---- visor de previsualizacion ---- */
#visor {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(22, 23, 26, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#visor[hidden] { display: none; }
#visor .visor-marco {
  background: var(--papel, #fff); width: min(1100px, 96vw); height: min(860px, 92vh);
  display: flex; flex-direction: column; box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
#visor .visor-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-3) var(--e-4); border-bottom: var(--borde-fino);
}
#visor .visor-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#visor .visor-cuerpo { flex: 1; overflow: auto; background: var(--papel-2); }
#visor .visor-cuerpo iframe { width: 100%; height: 100%; border: 0; }
#visor .visor-cuerpo img { max-width: 100%; display: block; margin: 0 auto; }
#visor .visor-cuerpo pre {
  padding: var(--e-4); font-size: var(--t-aux); white-space: pre-wrap;
  font-family: ui-monospace, monospace;
}

/* ---- diálogo en pantalla (reemplaza confirm/prompt nativos) ---- */
.dialogo {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(22, 23, 26, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dialogo-marco {
  background: var(--papel, #fff); max-width: 560px; width: 100%;
  padding: var(--e-5); box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.dialogo-texto { font-size: var(--t-aux); color: var(--tinta-2); margin: var(--e-3) 0 var(--e-4); max-width: none; }
.dialogo-campo { width: 100%; font: inherit; padding: var(--e-2) var(--e-3); margin-bottom: var(--e-4); }
.dialogo-botones { display: flex; gap: var(--e-3); }
.dialogo .btn.plano { background: transparent; color: var(--tinta); border: var(--borde-fino); }

/* ---- asistente flotante ---- */
/* Secundario a propósito: el negro sólido es de la acción que avanza
   (Continuar). Un flotante igual de negro leía como el siguiente paso. */
#asistente-boton {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  background: var(--papel-3); color: var(--tinta);
  border: var(--borde-estructural); padding: 11px 18px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14); border-radius: 999px;
}
#asistente-boton:hover { background: var(--papel-2); }
#asistente-boton:hover { transform: translateY(-1px); }
#asistente {
  position: fixed; right: 24px; bottom: 76px; z-index: 85;
  width: min(420px, calc(100vw - 32px)); max-height: min(560px, 70vh);
  background: var(--papel, #fff); border: var(--borde-fino);
  box-shadow: 0 18px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column;
}
#asistente[hidden] { display: none; }
#asistente .asistente-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--e-3) var(--e-4); border-bottom: var(--borde-fino);
}
#asistente .charla { flex: 1; overflow: auto; padding: var(--e-3) var(--e-4); min-height: 140px; }
#asistente .globo {
  font-size: var(--t-aux); line-height: 1.5; padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-2); white-space: pre-wrap; max-width: 92%;
}
#asistente .globo.mio { background: var(--acento-tenue); margin-left: auto; }
#asistente .globo.suyo { background: var(--papel-2); }
#asistente .asistente-pie { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-2); border-top: var(--borde-fino); }
#asistente textarea { flex: 1; resize: none; font: inherit; font-size: var(--t-aux); padding: var(--e-2); }
#asistente .asistente-nota { margin: 0 var(--e-4) var(--e-3); font-size: var(--t-micro); }

/* Renglon diligenciado desde un archivo: color distintivo para que la
   revision se concentre ahi y lo pendiente quede a la vista. */
input.defuente { background: var(--acento-tenue); border-color: var(--acento); }
.folio .disparo { margin-top: var(--e-4); display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap; }
.nota-lector { border-left: 3px solid var(--acento); padding-left: var(--e-3); margin-bottom: var(--e-4); }
/* Las notas del lector corren a lo ancho del folio: el tope tipografico de
   68ch es para prosa larga, no para avisos en una fila de 1500px. */
.nota-lector .aux { margin: 0 0 4px; max-width: none; }
#carga-pendientes p, #carga-resumen, .folio .disparo .aux { max-width: none; }
/* Dentro de la herramienta, el ancho lo manda la columna, no el tope de
   68ch: la pantalla se aprovecha completa. */
.hoja.con-riel .paso p,
.hoja.con-riel .paso .banda,
.hoja.con-riel .paso dd,
.hoja.con-riel .paso .ficha .fila dd,
.hoja.con-riel .paso .campo .pista,
.hoja.con-riel .paso ul.lista { max-width: none; }
@media (max-width: 559px) {
  .soltar { flex-direction: column; text-align: center; gap: var(--e-3); }
  .pieza { grid-template-columns: 32px 1fr auto; }
  .pieza .peso { grid-column: 2; }
}

/* panel del expediente */
.con-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }

.expediente { position: sticky; top: var(--e-4); border-top: var(--borde-estructural); padding-top: var(--e-3); font-size: var(--t-aux); }

.expediente .titulillo { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); font-weight: 600; margin-bottom: var(--e-3); }
.expediente .conteo { font-family: var(--f-cifra); font-size: var(--t-h2); line-height: 1; margin-bottom: var(--e-1); }
.expediente .conteo small { font-family: var(--f-texto); font-size: var(--t-aux); color: var(--tinta-3); }
.expediente ol { list-style: none; margin: var(--e-3) 0; border-top: var(--borde-fino); }
.expediente li { border-bottom: var(--borde-fino); }
.expediente li button { width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; font: inherit; font-size: var(--t-min); cursor: pointer; color: var(--tinta-2); display: flex; justify-content: space-between; gap: var(--e-2); align-items: center; }
.expediente li button:hover { color: var(--tinta); }
.expediente li .cod { font-family: var(--f-cifra); color: var(--tinta-3); }
/* Lo resuelto se atenua y lo pendiente resalta: el ojo va solo a lo que falta. */
.expediente button.recibido .cod { color: var(--tinta-3); }
.expediente button.pendiente .cod { color: var(--observacion); font-weight: 600; }
.expediente .punto { width: 8px; height: 8px; flex: none; }
.expediente .punto.recibido { background: var(--acento); }
.expediente .punto.pendiente { border: 1.5px solid var(--observacion); }
.expediente .punto.noaplica { border: 1.5px solid var(--tinta-3); }
.expediente .punto.sindeclarar { border: 1.5px dotted var(--tinta-3); }

/* barra móvil de estado */
.barra-movil { display: none; }
@media (max-width: 759px) {
  .barra-movil {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    height: 44px; align-items: center; justify-content: space-between; gap: var(--e-3);
    padding: 0 16px; background: var(--papel-3); border-top: var(--borde-estructural);
    font-size: var(--t-min); cursor: pointer;
    /* ahora es un <button>: fuera el traje nativo */
    border-left: 0; border-right: 0; border-bottom: 0;
    font-family: inherit; color: inherit; text-align: left; width: 100%;
  }
  .barra-movil .izq { font-family: var(--f-cifra); color: var(--tinta-2); }
  .barra-movil .der { font-family: var(--f-cifra); font-weight: 600; }
}

/* ============================ tablas contables ============================ */
/* Las tablas se desplazan dentro de su propio marco: la página nunca lo hace. */
.tabla-marco { overflow-x: auto; margin: var(--e-3) 0; }
.tabla-marco table.contable { min-width: 520px; }
table.contable { width: 100%; border-collapse: collapse; font-size: var(--t-tabla); line-height: 1.35; }
table.contable th { text-align: left; font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); font-weight: 600; padding: 7px 10px; border-bottom: var(--borde-estructural); }
table.contable th.num, table.contable td.num { text-align: right; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.contable td { padding: 7px 10px; border-bottom: var(--borde-fino); vertical-align: top; }
table.contable td:first-child, table.contable th:first-child { padding-left: 0; }
table.contable td:last-child, table.contable th:last-child { padding-right: 0; }
table.contable tr.grupo td { background: var(--papel-2); font-weight: 600; font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.06em; }
table.contable tr.detalle td { color: var(--tinta-3); font-size: var(--t-aux); }
table.contable tr.detalle td:first-child { padding-left: var(--e-4); }
table.contable tr.subtotal td { border-top: var(--borde-estructural); border-bottom: none; font-weight: 600; }
table.contable tr.total td { border-top: 3px double var(--regla-total); border-bottom: 3px double var(--regla-total); font-weight: 600; font-size: var(--t-base); }
table.contable td .uvt { display: block; }
table.contable tr.zebra:nth-child(even) td { background: var(--papel-2); }

.gran-total { border-top: 3px double var(--regla-total); border-bottom: 3px double var(--regla-total); padding: var(--e-4) 0; margin: var(--e-5) 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; }
.gran-total .et { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.gran-total .valor { font-family: var(--f-cifra); font-size: var(--t-total); font-variant-numeric: tabular-nums; font-weight: 600; }
.gran-total .valor.favor { color: var(--acento); }
.gran-total .valor.pagar { color: var(--advertencia); }

/* identificación del papel de trabajo */
.identificacion { border-top: var(--borde-estructural); border-bottom: var(--borde-fino); margin: var(--e-5) 0; }
.identificacion .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 559px) { .identificacion .fila { grid-template-columns: 1fr; } }
.identificacion .par { display: grid; grid-template-columns: 168px 1fr; gap: var(--e-3); padding: 7px 10px 7px 0; border-bottom: var(--borde-fino); font-size: var(--t-aux); }
.identificacion .par dt { color: var(--tinta-3); }
.identificacion .par dd { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }

/* medidor del límite: filetes, no colores de semáforo */
.limite { margin: var(--e-4) 0 var(--e-7); position: relative; }
.limite .via { display: flex; height: 26px; border: var(--borde-fino); }
.limite .tramo { border-right: 1px solid var(--papel); min-width: 2px; }
.limite .tramo.gratis { background: var(--acento); }
.limite .tramo.gasto { background: var(--tinta-3); }
.limite .tramo.ahorro { background: var(--observacion); }
.limite .tramo.perdido { opacity: 0.34; }
.limite .tramo.libre { background: repeating-linear-gradient(45deg, var(--regla) 0 1px, transparent 1px 5px); }
.limite .marca { position: absolute; top: -6px; bottom: -22px; border-left: 1.5px solid var(--tinta); }
.limite .marca span { position: absolute; bottom: 0; left: 5px; font-family: var(--f-cifra); font-size: var(--t-micro); background: var(--papel); padding-right: 3px; white-space: nowrap; }
.limite .marca.hacia-dentro span { left: auto; right: 5px; padding-right: 0; padding-left: 3px; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--t-min); color: var(--tinta-2); margin-top: var(--e-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; display: inline-block; }
.leyenda i.gratis { background: var(--acento); }
.leyenda i.gasto { background: var(--tinta-3); }
.leyenda i.ahorro { background: var(--observacion); }
.leyenda i.perdido { background: var(--observacion); opacity: 0.34; }

/* observaciones numeradas */
.observaciones { border-top: var(--borde-estructural); }
.obs { border-bottom: var(--borde-fino); padding: var(--e-4) 0 var(--e-4) var(--e-4); border-left: 3px solid var(--tinta-3); margin-bottom: 0; }
.obs.verificado { border-left-color: var(--acento); }
.obs.observacion { border-left-color: var(--observacion); }
.obs.advertencia { border-left-color: var(--advertencia); }
.obs .encabezado { display: flex; gap: var(--e-3); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--e-2); }
.obs .num { font-family: var(--f-cifra); font-size: var(--t-min); color: var(--tinta-3); }
.obs .etiqueta { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.obs.verificado .etiqueta { color: var(--acento); }
.obs.observacion .etiqueta { color: var(--observacion); }
.obs.advertencia .etiqueta { color: var(--advertencia); }
.obs.nota .etiqueta { color: var(--tinta-3); }
.obs .referencia { font-family: var(--f-cifra); font-size: var(--t-micro); color: var(--tinta-3); }
.obs .titulo { font-size: var(--t-base); font-weight: 600; margin-bottom: var(--e-2); }
.obs .cuerpo { font-size: var(--t-aux); color: var(--tinta-2); }
.obs .condiciones { font-size: var(--t-aux); color: var(--tinta-3); margin-top: var(--e-2); }
.obs .efecto { margin-top: var(--e-3); font-size: var(--t-aux); display: flex; gap: var(--e-2); align-items: baseline; }
.obs .efecto .v { font-family: var(--f-cifra); font-weight: 600; font-size: var(--t-base); }

/* comparador de escenarios */
table.escenarios td.num, table.escenarios th.num { text-align: right; }
table.escenarios tr.diferencia td { border-top: var(--borde-estructural); font-weight: 600; }

/* verificaciones */
.verificacion { border-bottom: var(--borde-fino); padding: var(--e-3) 0; display: grid; grid-template-columns: 120px 1fr; gap: var(--e-4); font-size: var(--t-aux); }
@media (max-width: 559px) { .verificacion { grid-template-columns: 1fr; gap: var(--e-1); } }
.verificacion .dictamen { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.verificacion.ok .dictamen { color: var(--acento); }
.verificacion.falta .dictamen { color: var(--observacion); }
.verificacion.grave .dictamen { color: var(--advertencia); }

.advertencia-fija {
  border-left: 3px solid var(--advertencia);
  background: var(--advertencia-tenue);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-aux); color: var(--tinta-2);
  margin: var(--e-3) 0 0; max-width: 74ch;
}

/* nota al pie y cierre */
/* El pie normativo llena el ancho disponible en columnas de lectura comoda,
   en vez de amontonarse en una franja angosta a la izquierda. */
.notas-pie { margin-top: var(--e-7); padding-top: var(--e-3); border-top: var(--borde-fino); font-size: var(--t-micro); color: var(--tinta-3); max-width: none; columns: 44ch 3; column-gap: var(--e-7); column-rule: var(--borde-fino); }
.notas-pie .rotulo { column-span: all; }
.notas-pie p { break-inside: avoid; }
.notas-pie p + p { margin-top: var(--e-2); }
.firma { margin-top: var(--e-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7); max-width: 620px; }
@media (max-width: 559px) { .firma { grid-template-columns: 1fr; gap: var(--e-6); } }
.firma .linea { border-top: 1px solid var(--tinta); padding-top: var(--e-2); font-size: var(--t-min); color: var(--tinta-3); }

/* marca de cotejo dibujada en CSS: no depende de ninguna fuente */
.marca-cruce { display: inline-block; width: 11px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: var(--e-2); }

/* ============================ impresión ============================ */
@media print {
  @page { margin: 18mm 16mm 20mm; }
  :root { --papel: #fff; --papel-2: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .no-imprimir, .indice, .pie-nav, .barra-movil, .membrete .acciones, .expediente { display: none !important; }
  .paso { display: none !important; }
  .paso.imprimible { display: block !important; }
  .con-panel { display: block; }
  .hoja { max-width: 100%; padding: 0; }
  h2.seccion { break-after: avoid; page-break-after: avoid; }
  table.contable, .obs, .folio, .gran-total, .identificacion { break-inside: avoid; page-break-inside: avoid; }
  .tabla-marco { overflow: visible; }
  .tabla-marco table.contable { min-width: 0; }
  table.contable tr.grupo td { background: transparent; border-top: var(--borde-fino); }
  .banda { background: transparent !important; border-left-width: 3px; }
  .limite .tramo.gratis { background: #444; }
  .limite .tramo.gasto { background: #999; }
  .limite .tramo.ahorro { background: #bbb; }
  .limite .tramo.perdido { background: repeating-linear-gradient(45deg, #999 0 1px, #fff 1px 4px); opacity: 1; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

.entregables { border-top: var(--borde-estructural); margin-top: var(--e-7); padding-top: var(--e-4); }
.entregables h3 { margin-top: 0; }

/* portada: tres hechos de un vistazo en vez de cinco secciones de texto */
.tarjetas-inicio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin: var(--e-5) 0; }
@media (max-width: 759px) { .tarjetas-inicio { grid-template-columns: 1fr; gap: var(--e-3); } }
.tarjetas-inicio > div { border-top: var(--borde-estructural); padding-top: var(--e-3); }
.tarjetas-inicio strong { display: block; font-size: var(--t-aux); margin-bottom: var(--e-1); }
.tarjetas-inicio span { font-size: var(--t-aux); color: var(--tinta-3); }

/* triaje: casillas en dos columnas para verlas todas sin bajar */
.triaje { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1) var(--e-5); margin: var(--e-3) 0; max-width: none; }
@media (max-width: 759px) { .triaje { grid-template-columns: 1fr; } }
.triaje .marcar { padding: var(--e-2) 0; border-bottom: var(--borde-fino); }

html { scrollbar-gutter: stable; }
html, body { width: 100%; max-width: 100%; }

/* ============================================================
   PANTALLAS ANCHAS
   El pliego nacio con 960 px porque un documento se lee mejor en
   columna estrecha. Eso sigue siendo cierto para la PROSA — que se
   queda topada en 68ch — pero no para las tablas, los folios ni la
   barra del limite, donde cada pixel es informacion. Aqui se ensancha
   lo que gana al ensancharse, y solo eso.
   Cortes en 1200 / 1400 / 1700: por debajo de 1200 el riel lateral
   dejaria la columna principal MAS estrecha que hoy.
   ============================================================ */

/* Medida de lo que se escapo del tope global: son <div> y <span>, no <p>. */
.obs .cuerpo, .obs .condiciones { max-width: 68ch; }
.verificacion > span:last-child { max-width: 68ch; }

@media screen and (min-width: 1200px) {
  /* Fluido, no un tope fijo: el pliego toma el ancho que haya y deja un
     margen proporcional. Con un max-width fijo, cualquier cosa que
     estreche el documento —zoom, barra lateral, escalado del sistema—
     deja franjas vacias que no se recuperan. */
  .hoja { max-width: none; width: min(100% - 24px, 2200px); padding-left: var(--e-3); padding-right: var(--e-3); }
  .pie-legal { max-width: none; width: min(100% - 40px, 2200px); padding-left: var(--e-6); padding-right: var(--e-6); }

  /* Riel lateral con las etapas. El nav ya es hijo directo de .hoja:
     basta colocarlo en la primera columna. El :has evita que la portada
     —donde el nav va oculto— se parta en dos columnas. */
  .hoja.con-riel {
    display: grid;
    grid-template-columns: clamp(200px, 15%, 300px) minmax(0, 1fr);
    column-gap: var(--e-7);
    align-items: start;
  }
  .hoja.con-riel > .membrete { grid-column: 1 / -1; }
  .hoja.con-riel > .indice {
    grid-column: 1; grid-row: 2 / span 99;
    position: sticky; top: var(--e-4); align-self: start;
    display: flex; flex-direction: column; align-items: stretch;
    /* nowrap: con wrap, el expediente que no cabia en la altura saltaba
       a una SEGUNDA columna angosta y truncada dentro del riel */
    flex-wrap: nowrap;
    border-top: var(--borde-estructural); border-bottom: 0;
    padding-top: var(--e-3); margin: 0;
    max-height: calc(100vh - var(--e-7)); overflow-y: auto; overflow-x: hidden;
  }
  .hoja.con-riel > .indice .expediente { flex: 0 0 auto; }
  /* El expediente, bajo las etapas: aprovecha el espacio del riel. */
  .hoja.con-riel > .indice .expediente {
    margin-top: var(--e-6); border-top: var(--borde-estructural);
    padding-top: var(--e-3);
  }
  .hoja.con-riel > .indice button {
    text-align: left; padding: var(--e-2) 0;
    border-bottom: var(--borde-fino);
  }
  .hoja.con-riel > .paso,
  .hoja.con-riel > section { grid-column: 2; }

  /* El pie de navegacion cierra la lectura: va al final de la columna
     principal. Sin esta regla la rejilla lo coloca sola en el riel, donde
     ni cabe —el rotulo y el boton se parten en varias lineas— ni tiene
     sentido narrativo: se sale del hilo justo cuando hay que avanzar. */
  .hoja.con-riel > .pie-nav {
    grid-column: 2; grid-row: auto;
    margin-top: var(--e-6);
  }
  /* El filete cierra la columna entera —alineado con todo lo de arriba—
     y el mando se agrupa a la derecha, que es donde se busca continuar. */
  .pie-nav { justify-content: flex-end; gap: var(--e-4); }
  .pie-nav .estado { margin-right: auto; }

  /* Los folios usan el ancho completo: el expediente ya no compite con
     ellos, vive bajo las etapas en el riel izquierdo. */
  .con-panel { grid-template-columns: minmax(0, 1fr); }

  /* Lo que NO gana al ensancharse: un rotulo y su cifra a un metro de
     distancia dejan de leerse como un par. */
  .gran-total, .firma { max-width: 940px; }
  .tarjetas-inicio { max-width: 1100px; }
}

@media screen and (min-width: 1400px) {
  /* Cada observacion y cada verificacion ya es una unidad autonoma
     numerada: teselarlas no rompe ninguna secuencia de lectura.
     align-items:start es obligatorio, o el filete de color se estira. */
  .observaciones, .verificaciones {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: var(--e-4) var(--e-6); align-items: start;
  }
  .identificacion .fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .triaje { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los folios en rejilla. Container query y no media query: el ancho real
   de esta columna depende de si el panel del expediente sigue al lado,
   y una consulta al viewport se equivocaria.
   El contenedor va en el PADRE: un elemento no puede consultar el suyo. */
#paso-1 .con-panel > .col-folios { container: pliego / inline-size; }
@container pliego (min-width: 820px) {
  .folios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-6); }
  /* El folio que se esta diligenciando ocupa el ancho completo: sus campos
     ya se reparten en dos columnas y encogerlo los volveria a apilar. */
  .folios > .folio:has(.cuerpo:not([hidden])) { grid-column: 1 / -1; }
}
@container pliego (min-width: 1180px) {
  .folios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* La impresion es un entregable, no un modo degradado: toda rejilla
   nueva se deshace aqui. Es la omision mas facil y la que se detecta
   mas tarde, al exportar el PDF. */
@media print {
  .hoja, .hoja.con-riel { display: block; max-width: none; }
  .observaciones, .verificaciones, .folios { display: block; }
  .gran-total, .pie-nav, .firma { max-width: none; }
}

/* ============================================================
   REPLICA DEL FORMULARIO 210
   No es una tabla de transcripcion: es el formulario. Bandas de
   seccion, casillas en recuadro con su numero arriba a la izquierda
   y las cifras alineadas a la derecha en monoespaciado, como en el
   impreso de la DIAN. Quien lo tenga abierto al lado reconoce cada
   casilla sin traducir nada.
   ============================================================ */
.f210 { border: 1.5px solid var(--tinta); margin-top: var(--e-4); background: var(--papel); }

.f210-cabecera {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--e-4); padding: var(--e-3) var(--e-4);
  border-bottom: 1.5px solid var(--tinta);
}
.f210-sello {
  border: 1.5px solid var(--tinta); padding: var(--e-1) var(--e-3);
  font-family: var(--f-cifra); font-size: var(--t-h2); line-height: 1.1; font-weight: 700;
}
.f210-titulo { display: flex; flex-direction: column; gap: 2px; }
.f210-titulo strong { font-size: var(--t-aux); line-height: 1.3; max-width: 62ch; }
.f210-titulo span { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-3); }
.f210-anio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.f210-anio .rot { font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); }
.f210-anio .val { font-family: var(--f-cifra); font-size: var(--t-h3); border: 1px solid var(--tinta); padding: 2px var(--e-2); }

.f210-banda {
  background: var(--tinta); color: var(--papel);
  font-size: var(--t-min); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
  padding: var(--e-2) var(--e-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
}
.f210-banda .ayuda {
  text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7;
  font-size: var(--t-min);
}

/* La matriz de la cedula general: cuatro columnas de renta por filas de
   concepto. Es la firma visual del 210 — sin ella, cualquier
   transcripcion parece una factura. */
.f210-matriz { width: 100%; border-collapse: collapse; font-size: var(--t-min); }
.f210-matriz thead th {
  background: var(--papel-2); border-bottom: 1.5px solid var(--tinta);
  border-right: 1px solid var(--regla);
  padding: var(--e-2) var(--e-2); text-align: center; vertical-align: bottom;
  font-size: var(--t-min); font-weight: 600; line-height: 1.25;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-2);
  min-width: 132px;
}
.f210-matriz thead th.concepto { text-align: left; min-width: 240px; }
.f210-matriz tbody th {
  text-align: left; font-weight: 400; color: var(--tinta-2);
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-2);
  border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
  line-height: 1.3;
}
.f210-matriz tr.fuerte th { font-weight: 600; color: var(--tinta); }
.f210-celda {
  border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
  padding: var(--e-1) var(--e-2) var(--e-2);
  vertical-align: top; position: relative;
}
.f210-celda .f210-num {
  display: block; float: left;
  font-family: var(--f-cifra); font-size: 10px; font-weight: 700;
  border: 1px solid var(--tinta-3); color: var(--tinta-3);
  padding: 0 3px; line-height: 1.4; margin-right: var(--e-2);
}
.f210-celda .f210-val {
  display: block; text-align: right; font-family: var(--f-cifra);
  font-size: var(--t-aux); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--tinta-3); padding-top: 2px; min-height: 20px;
}
.f210-celda.fuerte .f210-val { font-weight: 700; border-bottom-width: 1.5px; }
.f210-celda.cero .f210-val { color: var(--tinta-3); }
.f210-celda.fuera .f210-fuera {
  display: block; text-align: right; font-size: 10px; font-style: italic; color: var(--tinta-3);
}
/* Celda bloqueada: la ley no admite ese cruce. En el impreso va sombreada. */
.f210-bloq {
  background: repeating-linear-gradient(135deg, var(--papel-2), var(--papel-2) 4px, var(--papel) 4px, var(--papel) 8px);
  border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
}
.f210-casilla.fuerte .f210-val { font-weight: 700; border-bottom-width: 1.5px; }

.f210-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-top: 1px solid var(--tinta-3);
}
.f210-casilla {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto;
  gap: 0 var(--e-2); align-content: start;
  padding: var(--e-2) var(--e-3);
  border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla);
  min-height: 62px;
}
.f210-num {
  grid-row: 1 / span 2; align-self: start;
  font-family: var(--f-cifra); font-size: var(--t-min); font-weight: 700;
  border: 1px solid var(--tinta-3); text-align: center; padding: 1px 0;
  color: var(--tinta-2);
}
.f210-rot { font-size: var(--t-min); line-height: 1.3; color: var(--tinta-2); }
.f210-val {
  grid-column: 2; font-family: var(--f-cifra); font-size: var(--t-base);
  text-align: right; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--tinta-3); padding-top: 2px;
}
.f210-casilla.cero .f210-val { color: var(--tinta-3); }
.f210-nota { grid-column: 2; font-size: var(--t-min); color: var(--tinta-3); margin-top: 2px; }
.f210-casilla.vacia { background: var(--papel-2); }
.f210-fuera {
  grid-column: 2; font-size: var(--t-min); color: var(--tinta-3);
  font-style: italic; padding-top: 2px;
}

@media (max-width: 559px) {
  .f210-cabecera { grid-template-columns: auto 1fr; }
  .f210-anio { grid-column: 1 / -1; align-items: flex-start; }
  .f210-rejilla { grid-template-columns: 1fr; }
}
@media print {
  .tabla-marco { overflow: visible !important; }
  .f210-matriz { font-size: 8pt; }
  .f210-matriz thead th { min-width: 0; }
  .f210 { break-inside: auto; }
  .f210-banda { background: var(--tinta) !important; color: var(--papel) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .f210-casilla { break-inside: avoid; }
}

.folio .adjunto { margin-bottom: var(--e-4); }

/* La apertura tesela sus preguntas cortas de a dos en pantallas anchas:
   una sola columna dejaba medio monitor en blanco. El triaje y el
   encuadre siguen a lo ancho porque ya reparten por dentro. */
@media screen and (min-width: 1400px) {
  .apertura-rejilla {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-8); align-items: start;
  }
  .apertura-rejilla > .ancho { grid-column: 1 / -1; }
}
.bloque-apertura { min-width: 0; }

/* ---- puerta de identificación ---- */
.btn-google {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #dadce0; color: #3c4043;
  font: inherit; font-weight: 600; font-size: var(--t-aux);
  padding: 10px 16px; cursor: pointer;
}
.btn-google:hover { background: #f8f9fa; border-color: #c6c9cc; }
.btn-google svg { flex: 0 0 auto; }

.puerta-cuerpo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e-6) var(--e-7); margin-top: var(--e-5);
}
.puerta-via { border-top: var(--borde-estructural); padding-top: var(--e-3); }
.puerta-via .campo { max-width: 420px; }
.aviso-malo { color: var(--advertencia); }

/* ---- portada y puerta en pantallas anchas ----
   Son las dos primeras pantallas y las que mas espacio desperdiciaban:
   toda la explicacion cabia en una columna de 600 px sobre un monitor de
   1920. Aqui la portada se reparte en dos columnas —el argumento a la
   izquierda, la aceptacion y lo legal a la derecha— y las tres tarjetas
   respiran. La medida de la prosa se respeta: lo que se ensancha son las
   COLUMNAS, no las lineas de texto. */
@media screen and (min-width: 1200px) {
  /* La portada nace con max-width: 74ch (linea 203) porque en columna
     unica esa es la medida legible. En dos columnas el tope debe soltarse
     del CONTENEDOR y aplicarse a cada columna, no al conjunto. */
  #portada, #puerta { max-width: none; }
  #panel-nube { max-width: none; }
  #portada, #puerta {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    column-gap: var(--e-8);
    align-items: start;
  }
  #portada > .titulo, #portada > .lead,
  #puerta > .titulo, #puerta > .lead { grid-column: 1 / -1; }
  #portada > .lead, #puerta > .lead { max-width: 78ch; }
  #portada > .aceptacion .marcar span { max-width: 62ch; }
  #portada > .tarjetas-inicio { grid-column: 1; max-width: none; }
  #portada > .preg { grid-column: 1; }
  #portada > .aceptacion, #portada > p { grid-column: 2; }
  #portada > .aceptacion { max-width: none; margin-top: var(--e-5); grid-row: 3 / span 2; }
  .tarjetas-inicio { gap: var(--e-6); }

  #puerta > .puerta-cuerpo {
    grid-column: 1; margin-top: var(--e-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #puerta > .banda, #puerta > p.aux { grid-column: 2; }
}
@media screen and (min-width: 1600px) {
  .tarjetas-inicio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Misma puerta, en pequeño: para el folio que se diligencia a mano. */
.soltar.compacto { padding: var(--e-2) var(--e-3); border-style: dotted; }
.soltar.compacto .texto { font-size: var(--t-min); }