/* ===========================================================================
 * rectifica.com · Cámara de Rectificadores de la Provincia de Córdoba
 *
 * PALETA — los tres colores del logo de la Cámara, y nada más (25-oct-2026):
 *   naranja = #EB3D00, el del logo
 *   maquina = #24211D, el marrón del logo (barra, pie, cabeceras de tabla)
 *   fondo   = papel claro; panel = blanco
 * Diseñada en CLARO primero, como la hoja de marca que eligió Carlos. La
 * variante oscura existe (marrones) y se cuida igual.
 * Los tokens se declaran TODOS en :root; los bloques de tema solo los
 * redefinen. Ningún componente lleva un color escrito adentro de un @media.
 * ======================================================================== */
:root {
  --maquina:#24211D; --maquina-2:#332F2A; --maquina-3:#4A4540;
  --fondo:#F3F1EE; --panel:#FFFFFF; --panel-2:#E9E5DF;
  --tinta:#24211D; --tinta-2:#4A4540; --tinta-3:#6B655F;
  --borde:#DDD8D0; --borde-fuerte:#24211D;
  --naranja:#EB3D00; --naranja-piso:#FBE3D9;
  --ambar:#9A6A00; --ambar-piso:#FAEDCD;
  --rojo:#B4231F; --rojo-piso:#F8DEDA;
  --verde:#1E7A50; --verde-piso:#DFF0E6;
  --amarillo-piso:#FFF0A6;
  --acero:#8A847D;
  --sombra:0 12px 34px -20px rgba(36,33,29,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --maquina:#1A1816; --maquina-2:#24211D; --maquina-3:#332F2A;
    --fondo:#131110; --panel:#1C1917; --panel-2:#24211D;
    --tinta:#F3F1EE; --tinta-2:#C9C3BB; --tinta-3:#8F887F;
    --borde:#332F2A; --borde-fuerte:#4A4540;
    --naranja:#FF6A33; --naranja-piso:#3A1C0C;
    --ambar:#FFB627; --ambar-piso:#3A2C0A;
    --rojo:#E04236; --rojo-piso:#3A1512;
    --verde:#5FD39A; --verde-piso:#12301F;
    --amarillo-piso:#4A3F0A;
    --acero:#9F988F;
    --sombra:0 14px 40px -18px rgba(0,0,0,.85);
  }
}
:root[data-tema="oscuro"] {
  --maquina:#1A1816; --maquina-2:#24211D; --maquina-3:#332F2A;
  --fondo:#131110; --panel:#1C1917; --panel-2:#24211D;
  --tinta:#F3F1EE; --tinta-2:#C9C3BB; --tinta-3:#8F887F;
  --borde:#332F2A; --borde-fuerte:#4A4540;
  --naranja:#FF6A33; --naranja-piso:#3A1C0C;
  --ambar:#FFB627; --ambar-piso:#3A2C0A;
  --rojo:#E04236; --rojo-piso:#3A1512;
  --verde:#5FD39A; --verde-piso:#12301F;
  --amarillo-piso:#4A3F0A;
  --acero:#9F988F;
  --sombra:0 14px 40px -18px rgba(0,0,0,.85);
}
:root[data-tema="claro"] {
  --maquina:#24211D; --maquina-2:#332F2A; --maquina-3:#4A4540;
  --fondo:#F3F1EE; --panel:#FFFFFF; --panel-2:#E9E5DF;
  --tinta:#24211D; --tinta-2:#4A4540; --tinta-3:#6B655F;
  --borde:#DDD8D0; --borde-fuerte:#24211D;
  --naranja:#EB3D00; --naranja-piso:#FBE3D9;
  --ambar:#9A6A00; --ambar-piso:#FAEDCD;
  --rojo:#B4231F; --rojo-piso:#F8DEDA;
  --verde:#1E7A50; --verde-piso:#DFF0E6;
  --acero:#8A847D;
  --sombra:0 12px 34px -20px rgba(36,33,29,.5);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

.negra { font-family: "Archivo Black", Archivo, Arial, sans-serif; font-weight: 400; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: "Archivo Black", Archivo, Arial, sans-serif; font-weight: 400; font-size: clamp(2.4rem,6vw,4.4rem); line-height:.93; letter-spacing:-.035em; text-transform: uppercase; }
h2 { font-family: "Archivo Black", Archivo, Arial, sans-serif; font-weight: 400; font-size: clamp(1.5rem,3.2vw,2.4rem); line-height:1.02; letter-spacing:-.028em; text-transform: uppercase; }
h3 { font-size: 1.02rem; font-weight: 700; letter-spacing:-.01em; }
p { margin: 0; }
a { color: var(--naranja); }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.eti { font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform: uppercase; color: var(--tinta-3); }
.rotulo { display:inline-block; background: var(--tinta); color: var(--fondo); font-weight:800; font-size:.66rem; letter-spacing:.17em; text-transform: uppercase; padding:.3rem .6rem; }

.marco { width: min(1240px, 100% - 2.6rem); margin-inline: auto; }
@media (max-width:640px){ .marco { width: calc(100% - 1.5rem); } }

/* ---------- BARRA ---------- */
.barra { background: var(--maquina); border-bottom: 3px solid var(--naranja); position: sticky; top:0; z-index:40; }
.barra-in { display:flex; align-items:center; gap:1rem; padding:.7rem 0; }
.logo { display:flex; align-items:center; gap:.7rem; margin-right:auto; text-decoration:none; }
.logo-img { height:40px; width:auto; flex:none; }
.logo-nombre { display:block; font-family:"Arial Black","Archivo Black",Archivo,sans-serif; font-weight:900; font-size:1.25rem; letter-spacing:-.02em; color:#F3F1EE; line-height:1; }
.logo-nombre span { font-family:Archivo,sans-serif; font-weight:400; color:#FF6A33; }
.logo i { display:block; font-style:normal; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#C9C3BB; font-weight:600; margin-top:.3rem; }
.nav { display:flex; gap:.12rem; flex-wrap:wrap; align-items:center; }
.nav a, .nav button { font-family:Archivo,sans-serif; font-size:.79rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:none; border:0; color:#B7C7BF; padding:.5rem .78rem; cursor:pointer; text-decoration:none; }
.nav a:hover, .nav button:hover { color:#F3F1EE; background: var(--maquina-3); }
.nav a[aria-current="page"] { background: var(--naranja); color:#FFFFFF; }
.nav .admin { color:#FF6A33; }
.quien { font-size:.72rem; color:#8F887F; padding-left:.6rem; border-left:1px solid var(--maquina-3); }

.btn { display:inline-block; font-family:Archivo,sans-serif; font-weight:700; font-size:.84rem; letter-spacing:.05em; text-transform:uppercase; background: var(--naranja); color:#FFFFFF; border:0; padding:.75rem 1.35rem; cursor:pointer; text-decoration:none; box-shadow:4px 4px 0 var(--maquina-3); transition:transform .1s ease, box-shadow .1s ease; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--maquina-3); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--maquina-3); }
.btn.hueca { background:transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px currentColor; }
.btn.hueca:hover { background:#FF6A33; color:#17140A; box-shadow: inset 0 0 0 2px #FF6A33; }
.btn.chica { padding:.5rem .9rem; font-size:.76rem; box-shadow:3px 3px 0 var(--maquina-3); }

/* UN BOTON APAGADO TIENE QUE VERSE APAGADO. Sin esto, el «Desactivar» de tu
   propia fila en la pantalla de usuarios se ve igual que los demás, naranja y
   como si anduviera: se aprieta, no pasa nada y parece que el sistema se colgó.
   El `disabled` del HTML ya impedía la acción; lo que faltaba era decirlo. */
.btn[disabled], .btn:disabled {
  background: var(--panel-2); color: var(--tinta-3);
  box-shadow: 3px 3px 0 var(--borde); cursor: not-allowed;
}
.btn[disabled]:hover, .btn:disabled:hover {
  transform: none; box-shadow: 3px 3px 0 var(--borde);
}

/* ---------- PORTADA DEL SISTEMA ----------
   Misma forma que la portada pública de rectifica.com (sitio/index.html): fondo
   claro, la marca B apilada —logo, rectifica.com, el lema— y abajo las dos
   puertas. Hasta la v0.19 era el hero oscuro de septiembre con el corte de
   motor en verde, y Carlos lo vio al entrar: «¿cuándo cambia el formato de la
   página principal a lo que me mostraste?» (26-oct-2026). El dibujo sigue
   viviendo en tecnicos.php, que es donde sirve para buscar. */
.hero { background: var(--panel); color: var(--tinta); padding:3.4rem 0 0; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--borde); }
.hero::before { content:""; position:absolute; inset:-40% -20% auto; height:140%; background:radial-gradient(55% 45% at 50% 35%, rgba(235,61,0,.10), transparent 70%); pointer-events:none; }
.hero-in { position:relative; }
.hero .apilada { display:flex; flex-direction:column; align-items:center; }
.hero .apilada .marca-logo { height:clamp(84px, 12vw, 128px); filter:drop-shadow(0 14px 26px rgba(36,33,29,.22)); animation:aparece .9s cubic-bezier(.2,.8,.2,1) both; }
.hero .apilada .nombre { font-family:"Arial Black","Archivo Black",Archivo,sans-serif; font-weight:900; font-size:clamp(44px, 7.5vw, 88px); letter-spacing:-.03em; line-height:1; margin-top:18px; color:var(--tinta); animation:aparece .9s .15s cubic-bezier(.2,.8,.2,1) both; }
.hero .apilada .nombre span { font-family:Archivo,Arial,sans-serif; font-weight:400; color:var(--naranja); }
.hero .apilada .sub { font-size:clamp(11px, 1.3vw, 13px); letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-3); margin-top:12px; animation:aparece .9s .3s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 { color:var(--tinta); font-size:clamp(1.3rem, 2.6vw, 1.9rem); max-width:26ch; margin:1.8rem auto .8rem; animation:aparece .9s .45s cubic-bezier(.2,.8,.2,1) both; }
.hero .bajada { color:var(--tinta-2); font-size:1.04rem; max-width:54ch; margin:0 auto; animation:aparece .9s .6s cubic-bezier(.2,.8,.2,1) both; }
.hero .acciones { display:flex; gap:.8rem; margin:1.6rem auto 2.4rem; flex-wrap:wrap; justify-content:center; animation:aparece .9s .75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aparece { from{opacity:0; transform:translateY(12px) scale(.97)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .hero .apilada .marca-logo, .hero .apilada .nombre, .hero .apilada .sub, .hero h1, .hero .bajada, .hero .acciones { animation:none; } }

.tira { background: var(--naranja); color:#FFFFFF; font-weight:800; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; padding:.5rem 0; margin-top:0; overflow:hidden; }
.tira-in { display:flex; gap:2.2rem; white-space:nowrap; width:max-content; animation:corre 40s linear infinite; }
@keyframes corre { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- LAS DOS GRANDES OPCIONES ---------- */
.puertas { display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media (max-width:820px){ .puertas { grid-template-columns:1fr; } }
.puerta { display:block; text-decoration:none; color:#FFFFFF; padding:2.2rem 1.8rem; position:relative; overflow:hidden; transition:filter .15s ease; }
.puerta:hover { filter:brightness(1.06); }
.puerta.a { background:#FF6A33; }
.puerta.b { background:#FF5C1A; }
.puerta .num { font-family:"Archivo Black",sans-serif; font-size:.8rem; letter-spacing:.14em; opacity:.6; }
.puerta h2 { margin:.5rem 0 .7rem; }
.puerta p { font-size:.95rem; font-weight:500; max-width:44ch; }
.puerta .flecha { font-family:"Archivo Black",sans-serif; font-size:1.6rem; margin-top:1.1rem; display:block; }
.puerta .llave { position:absolute; top:1rem; right:1.2rem; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.18); padding:.2rem .5rem; }

/* ---------- CIFRAS ---------- */
.cifras { display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:780px){ .cifras { grid-template-columns:repeat(2,1fr); } }
.cifra { padding:1.6rem 1.3rem; color:#FFFFFF; }
.cifra:nth-child(1){ background:var(--maquina); }
.cifra:nth-child(2){ background:#FF6A33; }
.cifra:nth-child(3){ background:#FF5C1A; }
.cifra:nth-child(4){ background:#E04236; color:#FDF0EE; }
.cifra b { display:block; font-family:"Archivo Black",sans-serif; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.cifra span { display:block; margin-top:.55rem; font-size:.8rem; font-weight:600; line-height:1.25; }

/* ---------- SECCIONES ---------- */
.seccion { padding:3.2rem 0; }
.seccion-cab { max-width:60ch; margin-bottom:1.8rem; }
.seccion-cab p { color: var(--tinta-2); margin-top:.9rem; }
.rejilla-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:880px){ .rejilla-3 { grid-template-columns:1fr; } }
.tarjeta { background: var(--panel); border:2px solid var(--borde); padding:1.4rem; display:grid; gap:.65rem; align-content:start; }
.tarjeta .num { font-family:"Archivo Black",sans-serif; font-size:2.2rem; line-height:.8; letter-spacing:-.04em; }
.tarjeta.n { border-color:var(--naranja); } .tarjeta.n .num { color:var(--naranja); }
.tarjeta.a { border-color:var(--ambar); }   .tarjeta.a .num { color:var(--ambar); }
.tarjeta.r { border-color:var(--rojo); }    .tarjeta.r .num { color:var(--rojo); }
.tarjeta p { color:var(--tinta-2); font-size:.92rem; }

/* ---------- FORMULARIOS ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], select, textarea {
  font-family:Archivo,sans-serif; font-size:.92rem; background:var(--panel); color:var(--tinta);
  border:2px solid var(--borde-fuerte); padding:.6rem .75rem; width:100%;
}
input:focus, select:focus, textarea:focus { border-color:var(--naranja); outline:none; }
label { display:grid; gap:.28rem; }
.caja { background:var(--panel); border:2px solid var(--borde-fuerte); padding:1.6rem; box-shadow:var(--sombra); }
.angosto { max-width:420px; margin:2.8rem auto; }

.aviso { padding:.8rem 1rem; font-size:.88rem; font-weight:500; margin-bottom:1.2rem; border-left:5px solid; }
.aviso.ok    { background:var(--verde-piso);  color:var(--verde);  border-color:var(--verde); }
.aviso.error { background:var(--rojo-piso);   color:var(--rojo);   border-color:var(--rojo); }
.aviso.aviso { background:var(--ambar-piso);  color:var(--ambar);  border-color:var(--ambar); }

/* ---------- TABLAS ---------- */
.tabla-caja { overflow-x:auto; border:2px solid var(--borde-fuerte); background:var(--panel); }
table { border-collapse:collapse; width:100%; font-size:.87rem; }
thead th { font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-align:left; padding:.7rem .85rem; background:var(--maquina); color:#D9D3CB; white-space:nowrap; }
tbody td { padding:.55rem .85rem; border-top:1px solid var(--borde); vertical-align:top; }
tbody tr.sub td { background:var(--maquina-2); color:#ECE8E2; font-weight:700; }
tbody tr.mo td:first-child { color:var(--ambar); font-weight:600; }
tbody tr.rep td:first-child { color:var(--naranja); font-weight:600; }

/* EL RENGLON QUE NO SE PUDO VALORIZAR SE VE, NO SE ESCONDE.
   Se atenúa el número —no hay número— pero el trabajo sigue leyéndose con su
   descripción y su cantidad: el que arma el presupuesto tiene que saber que el
   motor lo lleva aunque la Cámara todavía no confirmó el precio. Un renglón
   borrado haría un presupuesto que parece completo y no lo está. */
tbody tr.revisar td { background: var(--ambar-piso); }
tbody tr.revisar td:first-child { color: var(--ambar); }
.falta { color: var(--ambar); font-style: italic; font-weight: 600; }
.por-que { font-size: .74rem; color: var(--tinta-2); margin-top: .15rem; line-height: 1.3; }
.por-que b { color: var(--tinta); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.der { text-align:right; }

.pastilla { font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.14rem .42rem; white-space:nowrap; background:var(--ambar-piso); color:var(--ambar); }
.pastilla.diesel { background:var(--naranja-piso); color:var(--naranja); }

/* EL SEMAFORO DE STOCK DE CRAC. Verde cuando lo tenían al cargar la lista,
   apagado cuando no. El «sin stock» va en gris y no en rojo a propósito: no es
   un error ni una alarma, es un dato que además envejece —vale para el día en
   que se subió la lista, no para hoy—. En rojo, media tabla gritaría. */
.pastilla.stock-hay { background:var(--verde-piso); color:var(--verde); }
.pastilla.stock-no  { background:var(--panel-2);    color:var(--tinta-3); }

/* ---------- PIE ---------- */
.pie { background:var(--maquina); color:#C9C3BB; padding:2.4rem 0; margin-top:3rem; border-top:3px solid var(--naranja); }
.pie-fila { display:flex; gap:2rem; justify-content:space-between; flex-wrap:wrap; }
.fuente { font-size:.78rem; color:var(--tinta-3); margin-top:1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ===========================================================================
 * EL CORTE DE MOTOR Y LAS PANTALLAS DE CONSULTA
 *
 * Esto faltaba entero en la v0.1 y el síntoma fue un RECTÁNGULO NEGRO en la
 * portada. La causa: cada pieza del dibujo lleva encima una zona invisible
 * para poder tocarla, y **el relleno por defecto de una figura SVG es negro**.
 * Sin `.zona { fill: transparent }` esas zonas se pintan y tapan el motor.
 *
 * Un SVG sin CSS no queda «sin estilo»: queda NEGRO. No es lo mismo que un
 * div sin clase.
 * ======================================================================== */

.corte { width: 100%; max-width: 380px; height: auto; display: block; }

/* La zona que se toca: invisible, pero clickeable. */
.zona { fill: transparent; }

.pz { cursor: pointer; }
.pz .relleno { transition: fill .16s ease; }
.pz .linea { stroke: var(--acero); stroke-width: 2; fill: none; }
.pz:hover .relleno { fill: var(--naranja); }
.pz.viva .relleno { fill: var(--ambar); }
.pz:hover .linea, .pz.viva .linea { stroke: var(--tinta); }
.pz text { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; fill: var(--tinta-3); letter-spacing: .04em; }
.pz:hover text { fill: var(--naranja); }
.pz.viva text { fill: var(--ambar); }
.guia { stroke: var(--borde-fuerte); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }

/* --- BUSCADORES Y LISTAS --- */
.buscador { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.buscador input[type="text"] { flex: 1 1 240px; }
.buscador select { flex: 0 1 auto; width: auto; min-width: 12rem; }

.lista-res { background: var(--panel); }
.res { display: flex; gap: .7rem; align-items: center; width: 100%; text-align: left;
       background: none; border: 0; cursor: pointer; padding: .6rem .85rem;
       font-family: Archivo, sans-serif; font-size: .86rem; color: var(--tinta); text-decoration: none; }
.res:hover { background: var(--panel-2); }
.res[aria-selected="true"] { background: var(--naranja); color: #FFFFFF; }
.res[aria-selected="true"] .pastilla { background: rgba(0,0,0,.2); color: #FFFFFF; }

.filtros { display: flex; gap: .4rem; flex-wrap: wrap; }

/* --- LAS DOS COLUMNAS DE LAS CONSULTAS ---
   `tres` es buscador + ficha; `dos` es el dibujo + los campos de la pieza. */
.tres { display: grid; grid-template-columns: 290px 1fr; gap: 1.8rem; align-items: start; }

/* EL CORTE A UNA COLUMNA SE ADELANTO DE 1000 A 1130 px, Y NO ES CAPRICHO.
   Carlos eligió CUATRO columnas de campos, y para que sean cuatro de verdad
   —no «cuatro si entran»— la hoja necesita unos 770 px. Con el buscador de
   290 px al lado, la hoja llega a 770 recién cuando la ventana pasa de 1130.
   Entre 1000 y 1130 el buscador le comía el ancho y la hoja caía a tres.
   Adelantando el corte, abajo de 1130 la hoja ocupa el ancho entero y las
   cuatro columnas se sostienen hasta 810 px de ventana. */
@media (max-width: 1130px) { .tres { grid-template-columns: 1fr; } }
.dos { display: grid; grid-template-columns: 330px 1fr; gap: 1.8rem; align-items: start; }
@media (max-width: 1080px) { .dos { grid-template-columns: 1fr; } }

/* LA ETIQUETA ARRIBA, EL VALOR ABAJO. Y esta regla FALTABA: cuando la ficha
   pasó a armarse con una función, se perdió el `display:grid` que cada campo
   traía escrito a mano, y la etiqueta y el valor quedaron uno al lado del otro
   pegados —«ALTURA DE CAMISA0,025 a 0,122 mm»—. Se veía en pantalla y mi
   chequeo de «clase usada sin definir» no lo agarró, porque `.campo` SÍ
   aparecía en el CSS: aparecía como `.campo .v`. */
.campo { display: grid; gap: .1rem; align-content: start; }
/* El acomodo automático queda para los PANELES DEL DIBUJO, que traen cuatro o
   cinco campos en una columna angosta: ahí fijar un número dejaría huecos. */
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .9rem 1.2rem; }

/* ===========================================================================
 * LA HOJA VA A LO LARGO: UN CAMPO POR RENGLON. (22-sep-2026)
 *
 * Antes iba en CUATRO COLUMNAS FIJAS, elegido por Carlos el 9-sep-2026 mirando
 * la ficha del Cummins Serie C. Usándola pidió lo contrario:
 *   «El diseño de los datos tecnicos no me convence y hay que poner un poco
 *    más a lo largo y no a lo ancho, porque total tengo lugar al pedo en una
 *    hoja.»
 * Y estaba medido de su lado: con cuatro columnas el Cummins impreso ocupa
 * 126 mm de los 281 de la carilla y deja MAS DE LA MITAD de la hoja en blanco.
 * El ancho era lo escaso —columnas de 21 caracteres— y el alto lo que sobraba.
 *
 * La forma es la de la ficha vieja de FACRA que él mismo pasó de ejemplo
 * (`CUMMINS 6C.html`, etiqueta, dos puntos, valor, uno abajo del otro), con
 * una diferencia: ahí cada valor arrancaba donde terminaba su etiqueta, así
 * que la hoja se leía como un párrafo. Acá la etiqueta ocupa una columna fija
 * y TODOS los datos arrancan en la misma vertical.
 *
 * MEDIDO ANTES DE DEJARLO, con las fichas reales y el papel de verdad:
 *   - la ficha con MAS campos de todo el corpus (Nissan YD 22 dti 16V, 38 de
 *     44; no hay ninguna con más) ocupa 239 mm de 281: entra en una carilla;
 *   - impreso con Chrome, `/Count 1` en las probadas, incluida esa;
 *   - ninguna de las 25 etiquetas se parte en dos renglones;
 *   - ningún valor de los que van en renglón se parte.
 * Se mide con `herramientas/probar_hoja.php`, que arma hojas reales desde el
 * JSON usando ESTE css y la misma función de la pantalla.
 * ======================================================================== */
/* LA HOJA VA SOBRE BLANCO, NO SOBRE EL FONDO DE LA PAGINA.
 *
 * Carlos, 23-sep-2026: *«si bien el dato está en negrita, la leyenda de lo que
 * es está en gris, sobre un fondo medio gris amarronado... no se ve mucho»*.
 *
 * Y estaba medido de su lado: la etiqueta daba **3,09 de contraste** contra el
 * fondo de la página (#77857D sobre #F3F1EE), con letra de 9,9 px. Para texto
 * de ese tamaño el mínimo legible es 4,5. El valor, en cambio, daba 13,47: por
 * eso se leía el número y no lo que era.
 *
 * Dos cambios, y los dos hacían falta. Este es el primero: la hoja tiene su
 * propio fondo, del color del papel. Además de subir el contraste de todo lo
 * que hay adentro, es lo que la hoja es — la ficha que se imprime y se le da
 * al taller. */
.hoja-datos {
  background: var(--panel);
  border: 1px solid var(--borde);
  padding: 1.1rem 1.3rem;
}

.hoja-datos .campos { display: block; padding-bottom: .9rem; }

/* El renglón. El aire sale de la medición: sobraban 68 mm en la ficha más
   cargada y se usan ~38 en que los renglones respiren, que es exactamente lo
   que pedía «tengo lugar al pedo en una hoja». Quedan ~30 de colchón. */
.hoja-datos .campo {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px dotted var(--borde);
  break-inside: avoid;
}
.hoja-datos .campo:last-child { border-bottom: 0; }

/* LA ETIQUETA EN UNA COLUMNA FIJA Y EL DATO JUSTO DESPUES.
   Carlos, 22-sep-2026: «me queda muy lejos una parte de la otra... que esté
   mas a la izquierda el dato». La primera versión mandaba el valor contra el
   margen derecho —alineado entre sí, bueno para comparar números— pero en una
   hoja de 190 mm eso deja hasta 15 cm entre la etiqueta y su dato.
   El 24 % sale de la etiqueta más larga del catálogo: «Diámetro aloj. bancada»
   y «Altura de válvula adm.», de 22 caracteres, que miden ~36 mm a 6,6 pt
   contra los ~45 que da el 24 % de los 190 mm útiles. */
/* Y EL SEGUNDO CAMBIO: LA ETIQUETA, UN TONO MAS OSCURA.
 *
 * `.eti` usa `--tinta-3`, que es el gris más claro de la paleta y está pensado
 * para texto suelto de 11 px o más. Acá es de 9,9 px, en versalitas y con
 * letter-spacing, que es lo más difícil de leer que hay. Con `--tinta-2` sobre
 * el blanco de la hoja, el contraste pasa de 3,09 a más de 7.
 *
 * La jerarquía no se pierde: el valor sigue siendo más grande, en mono y casi
 * negro. Lo que se arregla es que la etiqueta se LEA, no que compita. */
.hoja-datos .campo .eti {
  flex: 0 0 24%; display: flex; align-items: baseline; gap: .45rem;
  color: var(--tinta-2);
}

/* La guía punteada va del final del texto de la etiqueta al borde de su
   columna: une la etiqueta con su dato y nada más. */
.hoja-datos .campo .eti::after {
  content: ""; flex: 1 1 auto; height: 0;
  border-bottom: 1px dotted var(--borde-fuerte); opacity: .3;
  transform: translateY(-.18em);
}

/* `min-width: 0` para que un valor largo sin espacios —hay uno de 41
   caracteres, el del Komatsu 155— no ensanche su caja y empuje la grilla. */
.hoja-datos .campo .v { flex: 1 1 auto; text-align: left; min-width: 0; }

/* UNA FRASE NO ES UNA MEDIDA y se lee como frase: la etiqueta arriba y el
   texto abajo, a todo el ancho. Son el 0,8 % de los valores (270 de 33.853,
   de 46 caracteres para arriba) y el más largo llega a 103. Quién lleva esta
   clase lo decide `inc/hoja_ficha.php`, que es donde está el porqué con los
   números del corpus. */
.hoja-datos .campo.completo { display: block; padding: .38rem 0; }
.hoja-datos .campo.completo .eti { display: block; margin-bottom: .1rem; }
.hoja-datos .campo.completo .eti::after { display: none; }
.hoja-datos .campo.completo .v { display: block; word-break: break-word; }

/* La clase `.ancho` —«ocupá dos de las cuatro columnas»— se sacó junto con la
   grilla: `hoja_ficha.php` ya no la pone y acá no hay ninguna regla que la
   mire. Se anota para el que la busque en una hoja vieja. */

/* En el teléfono la columna fija de la etiqueta deja el dato en una franja de
   pocos centímetros, así que ahí sí conviene la etiqueta arriba. */
@media (max-width: 560px) {
  .hoja-datos .campo { display: block; }
  .hoja-datos .campo .eti { display: block; margin-bottom: .1rem; }
  .hoja-datos .campo .eti::after { display: none; }
}

/* La jerarquía la hace la tipografía y no una regla de colores: la etiqueta
   chica y gris, el número grande. Es lo que pidió Carlos: «tantos numeros te
   pierden, tiene que estar bien claro». */
.campo .eti { font-size: .62rem; letter-spacing: .1em; line-height: 1.25; }

.cab-pieza { background: var(--maquina); color: #F3F1EE; padding: 1rem 1.2rem;
             margin-bottom: 1.3rem; border-left: 6px solid var(--naranja); }
.cab-pieza .eti { color: var(--ambar); }

/* ===========================================================================
 * LA FICHA: LAS DOS VISTAS Y LA IMPRESION
 * ======================================================================== */

.acciones-ficha { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.nombre-motor { font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.025em; margin-top: .2rem; }

/* Los siete paneles viven todos en la página; se ve uno solo. `hidden` lo pone
   el javascript, y el reset del navegador ya lo respeta. */
.panel-pieza[hidden] { display: none; }

/* --- la hoja completa, en los cuatro apartados de FACRA --- */
.grupo { border-top: 1px solid var(--borde); }
.grupo:first-of-type { border-top: 0; }
.grupo-cab { display: flex; align-items: center; gap: .6rem; padding: .7rem 0; }
.grupo-cab .cinta { width: 5px; height: 17px; flex: none; }
.grupo-cab h3 { font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.grupo-cab .cuantos { margin-left: auto; font-size: .72rem; color: var(--tinta-3); font-weight: 600; }
.grupo .campos { padding-bottom: 1.2rem; }

.campo .v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 1rem; font-weight: 600; line-height: 1.28; word-break: break-word; }
.campo .v.vacio { color: var(--tinta-3); font-family: Archivo, sans-serif; font-style: italic; font-weight: 400; font-size: .88rem; }

/* Las observaciones son del motor entero: van en las dos vistas. */
.obs { margin-top: 1.6rem; border-left: 5px solid var(--ambar); background: var(--ambar-piso); padding: .9rem 1.1rem; }
.obs .eti { color: var(--ambar); margin-bottom: .35rem; }
.obs p { font-size: .92rem; margin: 0 0 .35rem; }

/* ===========================================================================
 * IMPRESION — se imprime LA FICHA, no la pantalla.
 *
 * Con los colores puestos, que es como Carlos los quiere: por defecto el
 * navegador saca los fondos para no gastar tinta, y sin `print-color-adjust`
 * las cintas de color y los recuadros salen en blanco.
 *
 * Y con la paleta clara a la fuerza: los tokens cambian solos con el modo
 * oscuro del sistema, y en papel no hay modo oscuro. Sin esto, imprimir desde
 * una máquina en oscuro daría tinta clara sobre fondo blanco.
 * ======================================================================== */
/* ===========================================================================
 * IMPRESION — LA FICHA ENTERA EN UNA SOLA CARILLA.
 *
 * Carlos, 9-sep-2026: «tendria que poder imprimirse en una sola hoja porque
 * cuando uno se la da a taller impresa, es mas dificil dos hojas».
 *
 * SE IMPRIME SIEMPRE LA HOJA COMPLETA, esté la pantalla en «por pieza» o en
 * «hoja completa». El que la lleva al taller recibe siempre el mismo papel, sin
 * tener que acordarse de cambiar de vista antes de apretar imprimir.
 *
 * PARA QUE ENTRE EN UNA CARILLA, medido sobre el caso peor de las 1.660 fichas
 * —24 de los 25 campos cargados, tabla de junta de 5 renglones y observaciones
 * de 206 caracteres—: cuatro columnas de campos, cuerpo de 8,6 pt y encabezados
 * de apartado en una línea. Con eso sobra medio A4.
 *
 * Y CON LOS COLORES PUESTOS. Por defecto el navegador saca los fondos para no
 * gastar tinta: sin `print-color-adjust` las cintas de color de cada apartado y
 * el recuadro de observaciones salen en blanco, y la hoja pierde la estructura
 * que la hace leíble de un pantallazo.
 *
 * La paleta clara va a la fuerza porque los tokens cambian con el modo oscuro
 * del sistema, y en papel no hay modo oscuro.
 * ======================================================================== */
@media print {
  :root, :root:not([data-tema="oscuro"]) {
    --fondo:#FFFFFF; --panel:#FFFFFF; --panel-2:#F4F2EA;
    --tinta:#24211D; --tinta-2:#47584F; --tinta-3:#6E7C75;
    --borde:#C9C5B8; --borde-fuerte:#24211D;
    --maquina:#24211D; --maquina-2:#332F2A; --maquina-3:#4A4540;
    --naranja:#C93400; --naranja-piso:#FBE4D8;
    --ambar:#8A5E00; --ambar-piso:#FBF1D8;
    --rojo:#A81E1A; --rojo-piso:#FAE3E0;
    --verde:#1B6B46; --verde-piso:#E3F1E8;
    --acero:#5C6E67;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background:#FFF !important; }
  body { font-size: 8.6pt; line-height: 1.34; }

  @page { size: A4 portrait; margin: 11mm 10mm; }

  /* fuera todo lo que no es la ficha */
  .barra, .pie, .tira, .solo-pantalla { display: none !important; }
  .marco, .seccion { width: auto !important; padding: 0 !important; margin: 0 !important; }
  .tres, .dos { display: block !important; }
  .solo-impresion { display: block !important; }
  .corte { display: none !important; }

  /* el encabezado: el nombre del motor, chico pero primero */
  .cab-pieza { background: var(--maquina) !important; color:#FFF !important;
               padding: .32rem .5rem !important; margin-bottom: .35rem !important;
               border-left-width: 4px !important; }
  .cab-pieza .eti { font-size: 6.6pt !important; letter-spacing: .12em; }
  .nombre-motor { font-size: 12.5pt !important; margin-top: 0 !important; }

  /* los cuatro apartados, en una línea cada encabezado */
  .grupo { border-top: 1px solid var(--borde) !important; }
  .grupo-cab { padding: .2rem 0 !important; gap: .4rem !important; }
  .grupo-cab .cinta { height: 10px !important; width: 4px !important; }
  .grupo-cab h3 { font-size: 7.2pt !important; letter-spacing: .1em; }
  .grupo-cab .cuantos { font-size: 6.6pt !important; }

  /* EN EL PAPEL, LA HOJA NO LLEVA NI MARCO NI RELLENO. En pantalla los tiene
     para despegarse del fondo de la página; acá el margen lo da `@page`, y el
     relleno le comería 2,6 cm de ancho y otro tanto de alto a una A4 que está
     medida al milímetro. */
  .hoja-datos { background: none !important; border: 0 !important; padding: 0 !important; }

  /* UN CAMPO POR RENGLON, igual que en la pantalla: la hoja impresa y la
     pantalla tienen que mostrar la MISMA ficha. Los paneles del dibujo, que
     usan `.campos` sin `.hoja-datos`, siguen con su grilla automática. */
  .hoja-datos .campos { display: block !important; padding-bottom: .35rem !important; }

  /* El renglón respira `.22rem` y no `.1`: es ~1 mm por renglón, 38 mm en la
     ficha más cargada, dentro de los 68 que sobraban. Con esto la peor ficha
     del corpus ocupa 239 mm de los 281 de la carilla. */
  .hoja-datos .campo {
    display: flex !important; padding: .22rem 0 !important;
    border-bottom: 1px dotted var(--borde) !important;
  }
  .hoja-datos .campo.completo { display: block !important; }

  .campo .eti { font-size: 6.6pt !important; letter-spacing: .07em; line-height: 1.15; }
  .campo .v { font-size: 8.4pt !important; line-height: 1.2; }
  .campo .v.vacio { font-size: 7.4pt !important; }

  /* La letra se deja en los 8,4 pt ya medidos: agrandarla achica los
     caracteres que entran a lo ancho y vuelve a partir los valores largos. */

  /* la tabla de junta, compacta */
  .junta-bloque { padding-bottom: .35rem !important; }
  .junta-bloque .eti { font-size: 6.4pt !important; margin-bottom: .15rem; }
  .tabla-caja { border-width: 1px !important; }
  table { font-size: 7.6pt !important; }
  th { padding: .16rem .3rem !important; font-size: 6.2pt !important; }
  td { padding: .14rem .3rem !important; }

  .obs { margin-top: .4rem !important; padding: .35rem .5rem !important;
         border-left-width: 4px !important; }
  .obs .eti { font-size: 6.4pt !important; margin-bottom: .1rem; }
  .obs p { font-size: 7.6pt !important; margin-bottom: .12rem; }

  .aviso { padding: .3rem .5rem !important; font-size: 7.4pt !important; margin-bottom: .3rem !important; }
  .fuente { font-size: 6.4pt !important; margin-top: .4rem !important; }

  /* NADA SE PARTE. Si algo no entra, es mejor saberlo que recibir media tabla
     en la segunda hoja. */
  .grupo, .obs, .tabla-caja, .campo, .cab-pieza { break-inside: avoid; page-break-inside: avoid; }
  .grupo-cab { break-after: avoid; page-break-after: avoid; }
  thead { display: table-header-group; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- LA BASE COMPARTIDA DE REPUESTOS (26-oct-2026) ---------- */
.rep-valter { font-size:.8rem; color:var(--tinta-3); margin-top:.15rem; }
.cat-panel .cat-fuente { font-family:Archivo,sans-serif; font-weight:500; font-size:.78rem; color:var(--tinta-3); letter-spacing:0; text-transform:none; margin-left:.4rem; }
.cat-puente { margin:.2rem 0 .9rem; font-size:.95rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.cat-flecha { color:var(--naranja); font-weight:800; }
.cat-cuerpo { display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; }
@media (min-width:760px){ .cat-cuerpo.con-dibujo, .cat-cuerpo:has(.cat-dibujo-abrir) { grid-template-columns:1fr minmax(180px, 320px); } }
.cat-datos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.45rem 1.2rem; margin:0; }
.cat-datos > div { border-bottom:1px dotted var(--borde); padding-bottom:.3rem; }
.cat-datos > div.ancho { grid-column:1 / -1; }
.cat-datos dt { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2); font-weight:700; }
.cat-datos dd { margin:0; font-size:.92rem; }
.cat-dibujo { width:100%; height:auto; border:1px solid var(--borde); background:#fff; }
.cat-eq-t { font-size:.85rem; color:var(--tinta-2); margin:.8rem 0 .3rem; }
.cat-eq { display:flex; flex-wrap:wrap; gap:.4rem; }
.cat-eq-uno { font-size:.8rem; background:var(--panel-2); padding:.15rem .5rem; text-decoration:none; color:var(--tinta); }
.cat-otro-sin { color:var(--tinta-3); border-bottom:1px dotted var(--tinta-3); }
.cat-vacio { opacity:.92; }
.ayuda { color:var(--tinta-2); font-size:.92rem; max-width:70ch; }
.rep-fotos { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:.8rem; }
.rep-fotos img { width:100%; height:auto; border:1px solid var(--borde); }
.rep-fotos figcaption { font-size:.8rem; color:var(--tinta-2); margin-top:.3rem; }

/* =========================================================================
   EL BUSCADOR DE REPUESTOS, CON LA FORMA DE GONTERO (26-oct-2026)
   Carlos: «copiá el formato de búsqueda de Gontero en repuestos». Allá son
   cuatro renglones —Buscar con la cámara; Código y Rubro; Descripción y Marca;
   el botón— con el fondo alternado, que es lo que separa a la vista. El tinte
   acá es --panel-2 (el beige de la paleta), así sigue al tema claro/oscuro.
   ========================================================================= */
.filtros-fila { display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-end;
                padding:.55rem .7rem; margin:0 0 .4rem; border:1px solid var(--borde); }
.filtros-fila.fila-tinte { background:var(--panel-2); }
.filtros-fila.fila-clara { background:var(--panel); }
.filtros-fila:last-of-type { margin-bottom:1rem; border:0; padding-left:0; padding-right:0; }
.filtros-fila .campo { display:grid; gap:.25rem; margin:0; }
.filtros-fila .campo .eti { font-size:.62rem; }
.filtros-fila input[type="text"], .filtros-fila select { font-size:.88rem; padding:.45rem .6rem; }
.filtros-fila .junto { display:flex; gap:.35rem; }
.filtros-fila .junto select { width:auto; flex:0 0 auto; }
.filtros-fila .junto input[type="text"] { flex:1 1 auto; min-width:0; }
.btn.icono { padding:.45rem .7rem; font-size:1rem; box-shadow:none; }
.tabla-compacta { font-size:.82rem; }
.tabla-compacta td, .tabla-compacta th { padding:.42rem .6rem; }
.tabla-compacta .rep-valter { font-size:.72rem; }
.rep-tag { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
           padding:.1rem .35rem; border:1px solid var(--borde); color:var(--tinta-3); }

/* --- El lector de código de barras (traído de Gontero) -------------------
   Pantalla completa a propósito: se usa parado frente a un estante, con la
   tablet en una mano, y un recuadro chico obliga a apuntar con precisión. */
.barras-caja { position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.86);
               display:flex; align-items:center; justify-content:center; padding:12px; }
.barras-marco { width:100%; max-width:620px; background:var(--panel); overflow:hidden;
                border:2px solid var(--borde-fuerte); box-shadow:0 18px 50px rgba(0,0,0,.5); }
.barras-titulo { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:12px 14px; font-weight:700; background:var(--maquina); color:#F3F1EE; }
.barras-cerrar { background:transparent; border:0; color:#F3F1EE; font-size:30px; line-height:1;
                 cursor:pointer; min-width:44px; min-height:44px; }
.barras-video { display:block; width:100%; max-height:62vh; background:#000; object-fit:cover; }
.barras-pie { padding:10px 14px; font-size:.9rem; color:var(--tinta-3); }

/* --- Las fotos de los talleres en la ficha del repuesto ------------------ */
.rep-fotos figure { margin:0; border:1px solid var(--borde); background:var(--panel); }
.rep-fotos img { display:block; width:100%; height:180px; object-fit:cover; background:var(--panel-2); }
.rep-fotos figcaption { padding:.45rem .55rem; font-size:.78rem; color:var(--tinta-2); display:grid; gap:.2rem; }
.rep-fotos .firma { color:var(--tinta-3); font-size:.72rem; }
.rep-fotos form { display:inline; }
.rep-fotos .quitar { background:none; border:0; color:var(--rojo); font-size:.72rem; font-weight:700;
                     cursor:pointer; padding:0; text-transform:uppercase; letter-spacing:.06em; }
.foto-subir { display:grid; gap:.7rem; grid-template-columns:1fr; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--borde); }
@media (min-width:720px) { .foto-subir { grid-template-columns:1fr 1fr auto; align-items:end; } }

/* VOLVER AL RENGLON (Carlos, 26-oct-2026: «cuando vuelvo, vuelvo arriba. Quiero
   volver al renglón desde donde vengo»). Cada renglón de la lista lleva id="r<id>"
   y la ficha vuelve a «#r<id>»: el navegador lo pone a la vista y :target lo
   resalta. El scroll-margin deja lugar para la barra pegada arriba. */
tbody tr[id] { scroll-margin-top: 7rem; }
/* LAS CONSULTADAS (26-oct-2026): la última en amarillo, las anteriores en verde,
   «para no volver a entrar». Las marcas viven en la sesión (ver repuestos.php). */
tbody tr.visto td { background: var(--verde-piso); }
tbody tr.ultimo td { background: var(--amarillo-piso); box-shadow: inset 4px 0 0 var(--ambar); }
.muestra { display:inline-block; width:1.1em; height:.8em; vertical-align:-.05em; border:1px solid var(--borde); margin-right:.3em; }
.muestra.visto { background: var(--verde-piso); }
.muestra.ultimo { background: var(--amarillo-piso); }

/* LA COLUMNA «CATALOGO» DE LA LISTA (26-oct-2026): con dibujo, o solo ficha. */
/* Solo el ícono, SIN fondo verde: Carlos, 26-oct: «en verde se confunde con el HAY
   de la columna de stock». La ficha sin dibujo va en texto chico y gris. */
.cat-dibujo { font-size: 1.05rem; line-height: 1; }
/* (26-oct, más tarde: «QUE NO DIGA NADA EN LETRAS») ni cartelito ni «ficha»: solo el ícono. */

/* EL FORMULARIO DE LA FICHA (26-oct-2026): los campos de cada apartado en una
   grilla que se adapta; cada uno con su etiqueta, la misma que la hoja. */
.ficha-campos { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.8rem 1rem; }
.ficha-campos textarea { grid-column: 1 / -1; font: inherit; padding:.55rem .7rem; border:2px solid var(--borde); background:var(--panel); color:var(--tinta); resize:vertical; }
.ficha-campos textarea:focus { border-color:var(--naranja); outline:none; }
.ficha-form .tabla-compacta input[type="text"] { width:100%; min-width:0; padding:.35rem .5rem; font-size:.85rem; }

/* EL MEMBRETE DE LO IMPRESO (26-oct-2026): la empresa del usuario arriba, grande,
   y «un servicio de la Cámara…» debajo, chico. En pantalla no se ve. */
.membrete { display:none; }
@media print {
  .membrete { display:block !important; border-bottom:2px solid var(--maquina); margin:0 0 .45rem; padding:0 0 .25rem; }
  .membrete-empresa { font-family:"Archivo Black", Archivo, sans-serif; font-size:15pt; letter-spacing:-.02em; text-transform:uppercase; color:var(--maquina); }
  .membrete-camara { font-size:7.4pt; color:var(--tinta-2); margin-top:.1rem; }
}

/* EL PRESUPUESTO EN UNA SOLA HOJA (26-oct-2026). Carlos: «al imprimir se me va a varias
   páginas algunos». Medido en rectifica.com con las reglas de impresión aplicadas a 190 mm:
   el Citroën 3 CV (56 renglones, el más largo del corpus) medía 800 mm, 13 mm por renglón,
   porque la columna de la descripción quedaba en 187 px de 718 y cada renglón se partía en
   cuatro o cinco líneas, y los renglones en revisión llevan debajo su explicación. En papel:
   la descripción se lleva el 46 % del ancho, la letra baja a 7 pt, el relleno a lo mínimo,
   y la explicación de cada renglón en revisión no va (el aviso de arriba ya dice cuántos
   son y «a confirmar / no suma» queda en el renglón). Objetivo: 56 renglones en 275 mm. */
@media print {
  .tabla-pres { font-size: 7pt !important; table-layout: fixed; width: 100%; }
  .tabla-pres th, .tabla-pres td { padding: .05rem .2rem !important; line-height: 1.15; vertical-align: top; }
  /* la cabecera y los avisos del presupuesto, compactos: en el papel el renglón manda */
  .nombre-motor { font-size: 12.5pt !important; margin-top: 0 !important; }
  .cab-pieza { margin-bottom: .3rem !important; }
  .cab-pieza + .aviso, .aviso + .aviso { margin-top: 0 !important; }
  .membrete { margin-bottom: .3rem !important; }
  .membrete-empresa { font-size: 13pt !important; }
  /* !important porque los <th> traen el ancho de pantalla escrito en el style=: sin
     esto la descripción seguía en 172 px de 718 (medido) y los renglones en dos líneas. */
  .tabla-pres th:nth-child(1), .tabla-pres td:nth-child(1) { width: 13% !important; }
  .tabla-pres th:nth-child(2), .tabla-pres td:nth-child(2) { width: 45% !important; }
  .tabla-pres th:nth-child(3), .tabla-pres td:nth-child(3) { width: 8% !important; }
  .tabla-pres th:nth-child(4), .tabla-pres td:nth-child(4) { width: 6% !important; }
  .tabla-pres th:nth-child(5), .tabla-pres td:nth-child(5) { width: 14% !important; }
  .tabla-pres th:nth-child(6), .tabla-pres td:nth-child(6) { width: 14% !important; }
  .tabla-pres .por-que { display: none !important; }
  .tabla-pres .pastilla { font-size: 5.6pt !important; padding: .02rem .2rem !important; }
  .tabla-pres .eti { font-size: 5.8pt !important; }
  .tabla-pres tbody tr { break-inside: avoid; page-break-inside: avoid; }
  /* un renglón nunca mide más que su texto: el borde y el fondo no suman alto */
  .tabla-pres td { border-bottom-width: 1px !important; }
}

/* EL LOGO EN EL MEMBRETE (26-oct-2026): a la izquierda, chico, y la empresa al lado. */
.membrete.con-logo { display:none; }
@media print {
  .membrete.con-logo { display:flex !important; align-items:center; gap:.5rem; }
  .membrete-logo { height: 15mm; max-width: 42mm; object-fit: contain; }
}