/* =====================================================================
   TCV · Registro de Instalaciones — hoja de estilos única
   Mobile-first. Tema oscuro alineado al logotipo (#161C24).
   ===================================================================== */

:root{
  --bg:        #0e1319;
  --bg-2:      #161c24;
  --surface:   #1b232d;
  --surface-2: #212b37;
  --line:      #2c3846;
  --line-soft: #232d39;

  --txt:       #e8edf3;
  --txt-2:     #9dabbb;
  --txt-3:     #6b7a8c;

  --acc:       #3b9eff;
  --acc-dark:  #2277d1;
  --acc-soft:  rgba(59,158,255,.14);

  --ok:        #35c98a;
  --ok-soft:   rgba(53,201,138,.14);
  --warn:      #f0b429;
  --warn-soft: rgba(240,180,41,.14);
  --bad:       #f45b5b;
  --bad-soft:  rgba(244,91,91,.14);

  --r:   10px;
  --r-s: 7px;
  --sp:  16px;

  --shadow: 0 2px 10px rgba(0,0,0,.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  color:var(--txt);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ------------------------------------------------------------ layout */
/* Encabezado y navegación viajan juntos en un único bloque pegajoso,
   así la barra de secciones nunca queda tapada por el logo al hacer scroll. */
.barra-superior{ position:sticky; top:0; z-index:40; background:var(--bg-2); }

.encabezado{
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px; min-width:0;
}
.encabezado img{ height:26px; width:auto; display:block; border-radius:4px; flex:0 0 auto; }
.encabezado .titulo{ font-size:14.5px; font-weight:600; letter-spacing:.2px; line-height:1.2; min-width:0; }
.encabezado .titulo small{ display:block; font-weight:400; font-size:10.5px; color:var(--txt-3); letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.encabezado .der{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
@media (max-width:520px){
  .encabezado .usuario-chip span:not(.avatar){ display:none; }
  .encabezado .usuario-chip{ padding:4px; }
}

.usuario-chip{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 6px; font-size:13px; color:var(--txt-2);
}
.avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:.5px;
}

.nav{
  background:var(--bg-2); border-bottom:1px solid var(--line);
  display:flex; gap:2px; overflow-x:auto; padding:0 8px;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  flex:0 0 auto; padding:11px 14px; font-size:14px; color:var(--txt-2);
  border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none;
}
.nav a:hover{ color:var(--txt); }
.nav a.activo{ color:var(--acc); border-bottom-color:var(--acc); font-weight:600; }

.contenido{ max-width:1180px; margin:0 auto; padding:var(--sp) 14px 90px; }
.contenido.ancho{ max-width:1720px; }

/* ------------------------------------------------------------ tipografía */
h1{ font-size:20px; margin:0 0 4px; font-weight:650; letter-spacing:-.2px; }
h2{ font-size:16px; margin:0 0 10px; font-weight:600; }
.sub{ color:var(--txt-2); font-size:13.5px; margin:0 0 18px; }

/* ------------------------------------------------------------ tarjetas */
.tarjeta{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:14px; overflow:hidden;
}
.tarjeta > .cab{
  padding:12px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--surface-2);
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-2);
}
.tarjeta > .cab .n{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center; font-size:11px; font-weight:700;
}
.tarjeta > .cuerpo{ padding:14px; }

/* plegable */
details.tarjeta > summary{
  padding:12px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-2);
}
details.tarjeta > summary::-webkit-details-marker{ display:none; }
details.tarjeta > summary::after{ content:"▾"; margin-left:auto; color:var(--txt-3); transition:transform .15s; }
details.tarjeta[open] > summary::after{ transform:rotate(180deg); }
details.tarjeta > summary .n{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center; font-size:11px; font-weight:700;
}

/* ------------------------------------------------------------ formularios */
.grilla{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){
  .grilla.c2{ grid-template-columns:1fr 1fr; }
  .grilla.c3{ grid-template-columns:1fr 1fr 1fr; }
  .grilla.c4{ grid-template-columns:repeat(4,1fr); }
}
.ancho-total{ grid-column:1/-1; }

.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo > label{ font-size:12px; font-weight:600; color:var(--txt-2); text-transform:uppercase; letter-spacing:.5px; }
.campo .ayuda{ font-size:12px; color:var(--txt-3); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=time], input[type=tel], input[type=email],
input[type=search], select, textarea{
  width:100%; padding:11px 12px; font-size:16px; font-family:inherit;
  color:var(--txt); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-s);
  outline:none; transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft);
}
input::placeholder, textarea::placeholder{ color:var(--txt-3); }
textarea{ resize:vertical; min-height:80px; }
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239dabbb' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
input[readonly]{ background:var(--surface-2); color:var(--txt-2); }
.mono{ font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; letter-spacing:1.5px; text-transform:uppercase; }

/* botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 16px; font-size:14.5px; font-weight:600; font-family:inherit;
  border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--surface-2); color:var(--txt);
  cursor:pointer; text-decoration:none; transition:filter .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ filter:brightness(1.12); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.primario{ background:var(--acc); border-color:var(--acc); color:#04121f; }
.btn.exito{ background:var(--ok); border-color:var(--ok); color:#052316; }
.btn.peligro{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.btn.fantasma{ background:transparent; }
.btn.chico{ padding:7px 11px; font-size:13px; }
.btn.bloque{ width:100%; }

.acciones{ display:flex; flex-wrap:wrap; gap:10px; }

/* barra fija de guardar en el celular */
.barra-fija{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(22,28,36,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
}
.barra-fija .btn{ flex:1; }
.barra-fija .estado-guardado{ font-size:12px; color:var(--txt-3); }

/* ------------------------------------------------------------ escáner */
.campo-escaneable{ position:relative; }
.campo-escaneable input{ padding-right:52px; }
/* El botón se ancla al alto del input (no al del bloque), porque debajo
   del input va la línea de validación y si no queda descolgado. */
.btn-camara{
  position:absolute; right:5px; top:27px;
  width:38px; height:38px; border-radius:var(--r-s);
  background:var(--acc-soft); border:1px solid var(--acc); color:var(--acc);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.campo-escaneable:not(:has(> label)) .btn-camara{ top:5px; }
.btn-camara svg{ width:19px; height:19px; }

.validacion{ font-size:12.5px; display:flex; align-items:flex-start; gap:6px; min-height:17px; }
.validacion.ok  { color:var(--ok); }
.validacion.warn{ color:var(--warn); }
.validacion.bad { color:var(--bad); }

/* visor de cámara */
.escaner-fondo{
  position:fixed; inset:0; z-index:100; background:#000;
  display:none; flex-direction:column;
}
.escaner-fondo.abierto{ display:flex; }
.escaner-video{ position:relative; flex:1; overflow:hidden; background:#000; }
.escaner-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.escaner-marco{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.escaner-guia{
  border:2px solid rgba(255,255,255,.95); border-radius:8px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.5);
  /* Ajustado a la chapa Mercosur (33 x 13 cm ≈ 2.5:1): cuanto más pegado al
     borde de la patente, menos texto de alrededor le entra al OCR. */
  width:82%; max-width:440px; aspect-ratio:2.6/1;
  transition:aspect-ratio .2s, width .2s;
}
.escaner-guia.alto{ aspect-ratio:3/1; }
/* La cédula es una tarjeta: recuadro apaisado tipo carnet. */
.escaner-guia.tarjeta-guia{ aspect-ratio:1.6/1; width:88%; max-width:560px; }
.escaner-ayuda{
  position:absolute; left:0; right:0; top:14px; text-align:center;
  color:#fff; font-size:13.5px; padding:0 20px; text-shadow:0 1px 4px #000;
}
.escaner-lectura{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  color:#fff; font-size:22px; font-weight:700; letter-spacing:3px;
  font-family:ui-monospace, Menlo, Consolas, monospace; text-shadow:0 1px 6px #000;
  min-height:28px;
}
.escaner-barra{
  background:var(--bg-2); border-top:1px solid var(--line);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
}
.escaner-barra .btn{ flex:1; }
.escaner-modo{
  display:flex; gap:6px; padding:10px 14px; background:var(--bg-2); border-top:1px solid var(--line-soft);
  overflow-x:auto;
}
.escaner-modo button{
  flex:1 0 auto; padding:8px 12px; font-size:13px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--txt-2); cursor:pointer;
}
.escaner-modo button.activo{ background:var(--acc-soft); border-color:var(--acc); color:var(--acc); font-weight:600; }
.escaner-progreso{
  height:3px; background:var(--line); overflow:hidden;
}
.escaner-progreso i{ display:block; height:100%; width:0; background:var(--acc); transition:width .2s; }

/* candidatos OCR */
.candidatos{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 12px; background:var(--bg-2); }
.candidatos button{
  padding:8px 12px; border-radius:var(--r-s); border:1px solid var(--line);
  background:var(--surface); color:var(--txt); font-family:ui-monospace,Menlo,monospace;
  letter-spacing:2px; font-size:15px; cursor:pointer;
}
.candidatos button:hover{ border-color:var(--acc); }

/* ------------------------------------------------------------ check list */
.tabla-check{ width:100%; border-collapse:collapse; font-size:14px; }
.tabla-check th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--txt-3); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line);
}
.tabla-check td{ padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tabla-check tr:last-child td{ border-bottom:none; }
.tabla-check td.item{ color:var(--txt); }
.tabla-check input[type=text]{ padding:7px 9px; font-size:14px; }

.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; }
.seg label{
  position:relative; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--txt-2); background:var(--bg-2); border-right:1px solid var(--line);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.seg label:last-child{ border-right:none; }
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg input:focus-visible + span{ outline:2px solid var(--acc); }
.seg label:has(input:checked){ background:var(--acc-soft); color:var(--acc); }
.seg label:has(input[value="B"]:checked),
.seg label:has(input[value="SI"]:checked),
.seg label:has(input[value="OK"]:checked){ background:var(--ok-soft); color:var(--ok); }
.seg label:has(input[value="R"]:checked),
.seg label:has(input[value="OBSERVADO"]:checked){ background:var(--warn-soft); color:var(--warn); }
.seg label:has(input[value="D"]:checked),
.seg label:has(input[value="DANADO"]:checked){ background:var(--bad-soft); color:var(--bad); }

/* -------------------------------------------- solapas de mes (como el Excel) */
.solapas{
  display:flex; gap:3px; overflow-x:auto; padding:4px 0 0;
  border-bottom:1px solid var(--line); scrollbar-width:none; align-items:flex-end;
}
.solapas::-webkit-scrollbar{ display:none; }
.solapas a{
  flex:0 0 auto; padding:8px 13px; font-size:13px; font-weight:600;
  color:var(--txt-3); text-decoration:none; white-space:nowrap;
  background:var(--bg-2); border:1px solid var(--line); border-bottom:none;
  border-radius:7px 7px 0 0; position:relative; top:1px;
}
.solapas a:hover{ color:var(--txt); text-decoration:none; }
.solapas a.vacio{ opacity:.42; }
.solapas a.activo{
  background:var(--surface); color:var(--acc); opacity:1;
  border-color:var(--line); box-shadow:inset 0 2px 0 var(--acc);
}
.solapas .selector-anio{
  width:auto; min-width:92px; margin-left:auto; padding:6px 34px 6px 11px;
  font-size:13px; flex:0 0 auto; align-self:center;
}

/* -------------------------------------------- tabla estilo planilla */
.tabla-envoltorio.planilla table.lista{ min-width:1090px; font-size:13px; }
.tabla-envoltorio.planilla td, .tabla-envoltorio.planilla th{ padding:8px 9px; }
.tabla-envoltorio.planilla a.falta{
  font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:var(--warn); border-bottom:1px dotted var(--warn); text-decoration:none; font-family:var(--font);
}
.tabla-envoltorio.planilla a.falta:hover{ text-decoration:none; opacity:.8; }
.tabla-envoltorio.planilla th{ text-align:center; }
.tabla-envoltorio.planilla thead tr.grupo th{
  background:var(--surface); border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.7px;
}
.tabla-envoltorio.planilla thead tr.grupo th[colspan]{ color:var(--acc); }
.tabla-envoltorio.planilla th, .tabla-envoltorio.planilla td{
  border-right:1px solid var(--line-soft);
}
.tabla-envoltorio.planilla th:last-child, .tabla-envoltorio.planilla td:last-child{ border-right:none; }
.tabla-envoltorio.planilla td.obs{
  white-space:normal; min-width:210px; max-width:330px; color:var(--txt-2);
}
.tabla-envoltorio.planilla td.centro{ text-align:center; }
tr.fila-desinst td{ background:rgba(244,91,91,.06); }
tr.fila-desinst td:nth-child(4){ color:var(--bad); }

input.grande{ font-size:19px; letter-spacing:2.5px; font-weight:600; padding-top:12px; padding-bottom:12px; }
.campo-escaneable input.grande + .validacion + .btn-camara,
.campo-escaneable input.grande ~ .btn-camara{ top:29px; height:42px; }

.solo-movil{ display:none; }
@media (max-width:759px){
  .solo-movil{ display:flex; }
  .solo-escritorio{ display:none !important; }
}

/* ------------------------------------------------------------ listados */
.filtros{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:14px; }
@media (min-width:760px){ .filtros{ grid-template-columns:2fr 1fr 1fr 1fr auto; align-items:end; } }

.tabla-envoltorio{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
table.lista{ width:100%; border-collapse:collapse; font-size:14px; min-width:760px; }
table.lista th{
  position:sticky; top:0; background:var(--surface-2); z-index:1;
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--txt-2); font-weight:650; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.lista td{ padding:10px 12px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
table.lista tr:last-child td{ border-bottom:none; }
table.lista tbody tr:hover{ background:var(--surface-2); }

/* tarjetas de lista para celular */
.lista-movil{ display:grid; gap:10px; }
.item-movil{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; display:block; color:inherit; text-decoration:none;
}
.item-movil:hover{ border-color:var(--acc); text-decoration:none; }
.item-movil .fila1{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.item-movil .patente{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; font-weight:700; letter-spacing:2px;
}
.item-movil .meta{ font-size:12.5px; color:var(--txt-2); }
@media (min-width:760px){ .lista-movil{ display:none; } }
@media (max-width:759px){ .tabla-envoltorio{ display:none; } }

/* ------------------------------------------------------------ etiquetas */
.eti{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:650;
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
  background:var(--surface-2); color:var(--txt-2); border:1px solid var(--line);
}
.eti.ok  { background:var(--ok-soft);   color:var(--ok);   border-color:transparent; }
.eti.warn{ background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.eti.bad { background:var(--bad-soft);  color:var(--bad);  border-color:transparent; }
.eti.info{ background:var(--acc-soft);  color:var(--acc);  border-color:transparent; }

/* ------------------------------------------------------------ avisos */
.aviso{
  padding:11px 14px; border-radius:var(--r-s); font-size:14px; margin-bottom:14px;
  border:1px solid;
  /*
   * Bloque, no flex: con `display:flex` cada <strong>, <em>, <code> o <a>
   * del texto se convierte en un ítem y el mensaje se parte en columnas.
   * Un aviso es un párrafo, así que se deja fluir como tal.
   */
  display:block; line-height:1.5;
}
.aviso > form{ margin-top:9px; }
.aviso code{ font-size:12.5px; }
.aviso.ok  { background:var(--ok-soft);   border-color:var(--ok);   color:var(--ok); }
.aviso.warn{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
.aviso.bad { background:var(--bad-soft);  border-color:var(--bad);  color:var(--bad); }
.aviso.info{ background:var(--acc-soft);  border-color:var(--acc);  color:var(--acc); }

/* ------------------------------------------------------------ métricas */
.metricas{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
@media (min-width:760px){ .metricas{ grid-template-columns:repeat(4,1fr); } }
.metrica{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px;
}
.metrica .valor{ font-size:26px; font-weight:700; line-height:1.1; }
.metrica .etiqueta{ font-size:11.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.6px; margin-top:4px; }

/* ------------------------------------------------------------ fotos */
.fotos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.fotos figure{ margin:0; position:relative; }
.fotos img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-s); border:1px solid var(--line); display:block; }
.fotos figcaption{ font-size:10.5px; color:var(--txt-3); margin-top:3px; text-align:center; }
.fotos .quitar{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.72); color:#fff; border:none; cursor:pointer; font-size:13px; line-height:1;
}

/* firma */
.firma-caja{ border:1px dashed var(--line); border-radius:var(--r-s); background:#fff; }
.firma-caja canvas{ display:block; width:100%; height:150px; touch-action:none; border-radius:var(--r-s); }

/* login */
.login-envoltorio{ min-height:100dvh; display:grid; place-items:center; padding:24px 18px; }
.login-caja{ width:100%; max-width:380px; }
.login-logo{ text-align:center; margin-bottom:22px; }
.login-logo img{ width:104px; height:auto; border-radius:12px; }

/* impresión */
@page{ size:A4 portrait; margin:8mm 9mm; }

@media print{
  .encabezado,.nav,.barra-fija,.acciones,.no-imprimir,.metricas,.filtros,.solapas,
  .aviso{ display:none !important; }
  body{ background:#fff; color:#000; }
  .contenido{ padding:0; max-width:none; }
  a{ color:#000; text-decoration:none; }
  .tarjeta{ border-color:#999; background:#fff; break-inside:avoid; }
  .tarjeta > .cab, details.tarjeta > summary{ background:#eee; color:#000; }
  details.tarjeta > summary::after{ display:none; }
  .txt-2,.txt-3{ color:#444; }
}

/*
 * Ficha en una sola hoja A4.
 *
 * La ficha de una instalación tiene más de cien campos posibles y casi ninguno
 * se llena entero. La clave para que entre en una carilla es esconder los que
 * quedaron vacíos —marcados con .vacio desde PHP— y apretar tipografía y
 * márgenes. Se activa poniendo la clase `hoja-a4` en el <body>.
 */
@media print{
  .hoja-a4{ font-size:7.4pt; line-height:1.22; }
  .hoja-a4 .encabezado-impreso{ display:flex !important; }

  .hoja-a4 h1{ font-size:12pt; margin:0 0 1mm; }
  .hoja-a4 .sub{ font-size:6.8pt; margin:0 0 1.5mm; }

  /*
   * A propósito se deja que una tarjeta se parta entre páginas: con
   * `break-inside: avoid` una lista larga salta entera a la hoja siguiente y
   * deja un tercio de la primera en blanco, que es justo lo que hay que evitar.
   * Lo que no se puede partir es cada ítem suelto.
   */
  .hoja-a4 .tarjeta{ margin:0 0 1.4mm; border-radius:0; box-shadow:none; break-inside:auto; }
  .hoja-a4 .tarjeta > .cab, .hoja-a4 details.tarjeta > summary{ break-after:avoid; }
  .hoja-a4 .campo, .hoja-a4 .item-check, .hoja-a4 table.lista tr{ break-inside:avoid; }
  .hoja-a4 .tarjeta > .cab,
  .hoja-a4 details.tarjeta > summary{
    padding:0.7mm 1.6mm; font-size:7pt; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  }
  .hoja-a4 .tarjeta > .cab .n, .hoja-a4 details.tarjeta > summary .n{
    width:3.4mm; height:3.4mm; min-width:3.4mm; font-size:5.6pt; line-height:3.4mm; border-radius:0.7mm;
  }
  .hoja-a4 .tarjeta > .cuerpo, .hoja-a4 details.tarjeta > .cuerpo{ padding:1.2mm 1.6mm; }

  /* Cuatro columnas fijas: en papel no hay pantalla angosta que valga. */
  .hoja-a4 .grilla,
  .hoja-a4 .grilla.c2, .hoja-a4 .grilla.c3, .hoja-a4 .grilla.c4{
    grid-template-columns:repeat(4,1fr); gap:0.9mm 3mm;
  }
  .hoja-a4 .campo{ gap:0.2mm; }
  .hoja-a4 .campo > label{ font-size:5.6pt; letter-spacing:.2px; color:#666; }
  .hoja-a4 .campo .ayuda{ display:none; }
  .hoja-a4 .campo.vacio{ display:none; }        /* lo que no se cargó, no ocupa papel */

  .hoja-a4 table.lista td, .hoja-a4 table.lista th,
  .hoja-a4 .tabla-check td, .hoja-a4 .tabla-check th{
    padding:0.4mm 1.2mm; font-size:6.6pt; border-color:#ddd;
  }
  .hoja-a4 .eti{ padding:0 0.8mm; font-size:6pt; border-radius:0.6mm; }
  /* En papel el espaciado de la fuente mono hace parecer que la patente
     tiene espacios (AI 200 WY). Se afloja para que se lea corrido. */
  .hoja-a4 .mono{ letter-spacing:0.2px; }

  /* Estado del vehículo y accesorios: en tres columnas, si no comen media hoja. */
  .hoja-a4 .rejilla-check{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 3mm; }
  .hoja-a4 .rejilla-check .item-check{
    font-size:6.2pt; padding:0.15mm 0; gap:1.2mm; border-bottom:1px dotted #ddd; align-items:baseline;
  }
  .hoja-a4 .rejilla-check .item-check .obs{ font-size:5.8pt; }

  .hoja-a4 .fotos{ display:none; }              /* no entran, y se ven en pantalla */
  .hoja-a4 .firmas img{ max-height:12mm; }
  .hoja-a4 .pie{ padding:1.5mm 0 0; font-size:5.8pt; }
}

.oculto{ display:none !important; }
.txt-2{ color:var(--txt-2); }
.txt-3{ color:var(--txt-3); }
.chico{ font-size:12.5px; }
.centro{ text-align:center; }
.pie{ text-align:center; color:var(--txt-3); font-size:12px; padding:26px 0 10px; }


/* Lista de chequeos en rejilla: se usa en la ficha impresa y en pantalla. */
.rejilla-check{ display:grid; grid-template-columns:1fr; gap:0 18px; }
@media (min-width:700px){ .rejilla-check{ grid-template-columns:1fr 1fr; } }
.rejilla-check .item-check{
  display:flex; align-items:baseline; gap:8px;
  padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px;
}
.rejilla-check .item-check .nombre{ flex:1; min-width:0; }
.rejilla-check .item-check .obs{ color:var(--txt-3); font-size:12px; }
.encabezado-impreso{ display:none; align-items:center; gap:4mm; margin-bottom:2mm; }
.encabezado-impreso img{ height:9mm; }
.encabezado-impreso .datos{ font-size:6.4pt; color:#444; line-height:1.3; }
.encabezado-impreso .datos strong{ font-size:8pt; color:#000; display:block; }