/* ═══ HOJA DE YARDA (24-sep-2026, Issue #73) ═══
   Va en su propio archivo porque la hoja lleva sus reglas de IMPRESIÓN, y
   `expediente.css` está fuera de lo que esta misión puede tocar. Se carga
   detrás de él. El programa está en `expediente-yarda.js`. */

/* El botón en la barra de la izquierda, pegado a «Leer un BL»: es otra
   operación sobre muchos carros a la vez. Mismo número de orden que BL, y
   como va detrás en el HTML, sale justo debajo. */
@media (min-width:1260px){ .rail-yarda{order:22} }
@media (max-width:1259px){ .rail-yarda{order:9} }

/* ── La ventana ── */
dialog.yarda{width:min(760px,calc(100vw - 24px));max-width:none}
dialog.yarda .db{max-height:min(62vh,640px)}
.yarda-herr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.yarda-herr input[type=text]{flex:1 1 220px;min-width:0}
.yarda-herr select{flex:0 1 230px;min-width:0}
.yarda-grua{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);cursor:pointer;
  flex:1 1 100%}
.yarda-grua input{width:18px;height:18px;margin:0;flex:none}
.yarda-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;position:sticky;
  top:-18px;z-index:1;padding:8px 0;background:var(--panel)}
#yardaCuenta{font-size:13px;color:var(--dim)}
#yardaCuenta b{color:var(--txt)}
.yarda-ojo{color:var(--warn);font-weight:650}

.yarda-dia{margin:6px 0 14px}
.yarda-dia h4{margin:0 0 6px;padding:6px 2px;font-size:13.5px;border-bottom:1px solid var(--line)}
.yarda-dia h4 small{font-weight:500;color:var(--dim);margin-left:6px}
.yarda-dia.sin h4{color:var(--warn)}
.yarda-fila{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:12px;cursor:pointer;
  border:1px solid transparent}
.yarda-fila:hover{background:var(--panel2)}
.yarda-fila.on{background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.yarda-fila input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.yarda-vin6{flex:none;min-width:84px;font:800 20px/1.15 ui-monospace,Consolas,monospace;letter-spacing:.5px;color:var(--txt)}
.yarda-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.yarda-info small{color:var(--dim);overflow-wrap:anywhere}
.yarda-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.yarda-chips span{padding:2px 7px;border-radius:7px;background:var(--panel2);color:var(--dim);font-size:11.5px}
/* ⚠️ La letra de las chapas lleva un 20 % del color del texto del tema (FIX 1,
   revisión de Codex del 24-sep-2026). Con el rojo, el naranja y el verde puros
   sobre su propio fondo claro no llegaban a 4,5:1 —3,96 el rojo en «Claro»,
   4,11 el verde en «Papel»—, y con letra de 11,5 px eso no se lee de pie en la
   yarda. En los temas claros el texto es casi negro y oscurece el color; en los
   oscuros es casi blanco y lo aclara: el mismo cambio sirve para los cinco. El
   peor caso queda en 5,15:1. Lo mide una prueba, tema por tema. */
.yarda-chips .cobro-no{background:color-mix(in srgb,var(--bad) 13%,var(--panel));color:color-mix(in srgb,var(--bad) 80%,var(--txt))}
.yarda-chips .cobro-medio{background:color-mix(in srgb,var(--warn) 13%,var(--panel));color:color-mix(in srgb,var(--warn) 80%,var(--txt))}
.yarda-chips .cobro-ok{background:color-mix(in srgb,var(--ok) 13%,var(--panel));color:color-mix(in srgb,var(--ok) 80%,var(--txt))}
.yarda-chips .yarda-grua-chip{color:var(--warn)}
/* ⛔ El expediente (FIX 2, 24-sep-2026). Va la PRIMERA chapa de la fila.
   FIX 3 (José: «colores fuertes, sin tonos pastel»): fondo SÓLIDO, el mismo en
   los cinco temas, con letra blanca y en negrita. Verde oscuro y rojo oscuro a
   propósito: con blanco encima pasan de 6,5:1, y lo mide la prueba. El símbolo
   y la palabra van siempre, así que tampoco dependen del color. */
.yarda-chips .yarda-exp-ok{background:#0b6b34;color:#ffffff;font-weight:800;font-size:12.5px;border:2px solid #0b6b34}
.yarda-chips .yarda-exp-no{background:#a8201a;color:#ffffff;font-weight:900;font-size:12.5px;
  border:2px solid #ffffff;outline:2px solid #a8201a}
.yarda-falta{background:color-mix(in srgb,var(--bad) 7%,var(--panel));color:color-mix(in srgb,var(--bad) 60%,var(--txt));font-size:11.5px;
  padding:3px 7px;border-radius:7px;margin-top:2px;overflow-wrap:anywhere}

@media (max-width:700px){
  .yarda-herr select{flex:1 1 100%}
  .yarda-acc button{flex:1 1 auto}
  #yardaCuenta{flex:1 1 100%}
  .yarda-vin6{min-width:72px;font-size:17px}
  dialog.yarda .db{max-height:calc(100dvh - 190px)}
}

/* ── La hoja impresa ──
   FIX 3 (José, 24-sep-2026): se lee DE PIE, en la yarda, con sol, lluvia o las
   manos sucias. Por eso:
   · carta HORIZONTAL, solo para esta hoja (`@page yarda`); la factura y los
     demás papeles siguen con el `@page` de siempre, en `expediente.css`;
   · letra de palo; los últimos 6 del VIN son lo más grande de cada carro;
   · nada se entiende solo por el color. Cada estado tiene su SÍMBOLO, su
     PALABRA y su estilo de BORDE —sencillo para ✓ LISTO, doble y grueso para
     ⛔ NO MONTAR, a rayas para ⚠ REVISAR PAPELES—, así que en blanco y negro y
     sin «imprimir fondos» se distinguen igual. El color va en la letra y el
     borde, que se imprimen siempre; el fondo es un extra;
   · los colores de la letra pasan de 7:1 sobre blanco (lo mide una prueba). */
@page yarda{size:letter landscape;margin:9mm 10mm}
/* ⛔ ✓ ⚠ ✕ ↔ como SÍMBOLOS de texto, en el color de la letra, y no como emoji
   de colores: el ⛔ de color, en una impresora en blanco y negro, se quedaba en
   un círculo gris claro (medido en el PDF pasado a gris). */
#printArea .yarda-hoja{page:yarda;font-family:Arial,Helvetica,"Segoe UI Symbol",sans-serif;font-size:10pt;color:#000;
  font-variant-emoji:text}
.yarda-hoja .yh-cab{margin-bottom:6px}
.yarda-hoja h2{margin:0;font-size:20pt;letter-spacing:2px;text-align:left}
.yarda-hoja .yh-meta{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 26px;margin-top:4px;font-size:11pt}
.yarda-hoja .yh-raya{display:inline-block;width:62mm;border-bottom:1.5px solid #000;height:1em;vertical-align:bottom}
.yarda-hoja .yh-raya.corta{width:30mm}
.yarda-hoja .yh-leyenda{margin:6px 0 0;font-size:10pt;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.yarda-hoja .yh-leyenda span{font-weight:bold;border:1.5px solid #000;padding:1px 6px}
.yarda-hoja .yh-nota{margin:4px 0 0;font-size:9pt}
.yarda-hoja .yh-tabla{width:100%;border-collapse:collapse;table-layout:fixed}
.yarda-hoja thead{display:table-header-group}
.yarda-hoja .yh-tabla th{font-size:9pt;text-transform:uppercase;letter-spacing:.4px;text-align:left;
  border-bottom:2px solid #000;padding:3px 5px}
/* El aviso de arriba de CADA página (va dentro del `<thead>`). */
.yarda-hoja .yh-tabla th.yh-th-aviso{text-transform:none;letter-spacing:0;padding:0 0 5px}
.yarda-hoja .yh-rep{font-size:9pt;font-weight:bold;margin-bottom:3px}
.yarda-hoja .yh-aviso{border:3px double #a8201a;color:#8a1510;padding:5px 9px;font-size:12pt;font-weight:900}
.yarda-hoja .yh-tabla td{padding:5px;vertical-align:top;overflow-wrap:anywhere}
.yarda-hoja .yh-tabla tr{break-inside:avoid;page-break-inside:avoid}
/* Cada carro son dos renglones dentro de su `<tbody>`: los dos van juntos a la
   misma hoja de papel (FIX 2). */
.yarda-hoja .yh-unidad{break-inside:avoid;page-break-inside:avoid}
.yarda-hoja .yh-datos td{padding-bottom:3px}
.yarda-hoja .yh-controles td{border-bottom:2px solid #000;padding-top:2px;padding-bottom:7px}
/* La columna del estado baja por los dos renglones; la raya de abajo es la del
   carro entero. */
.yarda-hoja .yh-exp{border-bottom:2px solid #000}
/* Los anchos, en el <colgroup> (ver el comentario en el JS). Suman 175 mm; los
   ~84 que quedan de los 259 mm útiles de la carta horizontal son para el
   estado, para que «⛔ NO MONTAR · FALTAN N» quepa en una sola línea. */
.yarda-hoja .yh-c-n{width:9mm}
.yarda-hoja .yh-c-vin{width:52mm}
.yarda-hoja .yh-c-carro{width:50mm}
.yarda-hoja .yh-c-fecha{width:32mm}
.yarda-hoja .yh-c-cobro{width:32mm}
.yarda-hoja .yh-n{white-space:nowrap;font-size:12pt;font-weight:bold}
.yarda-hoja td small{display:block;font-size:9pt;margin-top:2px}
/* Lo primero que busca el ojo: los últimos 6 del VIN, como en el parabrisas. */
.yarda-hoja .yh-vin6{display:block;font:bold 28pt/1 Consolas,"Courier New",monospace;letter-spacing:2px}
.yarda-hoja .yh-vin small{font-family:Consolas,"Courier New",monospace;font-size:9pt;word-break:break-all}
.yarda-hoja .yh-vin u{font-weight:bold}
/* Segundo nivel: el carro. */
.yarda-hoja .yh-carro b{display:block;font-size:13pt}
.yarda-hoja .yh-fecha b,.yarda-hoja .yh-cobro b{font-size:11pt}
.yarda-hoja .yh-fecha .yh-puerto{font-size:10pt}
.yarda-hoja .yh-fecha i{font-style:italic}
/* Tercer nivel, pero grande: ¿se puede montar? (expediente Y pago). */
.yarda-hoja .yh-estado{padding:4px 7px}
.yarda-hoja .yh-estado span{display:block;font-size:9pt;font-weight:bold;margin-top:2px}
/* El motivo del NO MONTAR (expediente, pago o los dos), debajo de la señal. */
.yarda-hoja .yh-motivo{display:block;font-size:11pt;font-weight:900;margin-top:1px}
.yarda-hoja .yh-sep{display:none}
.yarda-hoja .yh-listo{border:2px solid #0b6b34;color:#0b5a2c}
.yarda-hoja .yh-listo b{font-size:14pt;font-weight:900}
.yarda-hoja .yh-nomontar-caja{border:5px double #a8201a;color:#8a1510;background:#fde8e6}
.yarda-hoja .yh-nomontar-caja b{font-size:14pt;font-weight:900}
.yarda-hoja .yh-incompleto td:first-child{border-left:5px solid #000}
/* El renglón de lo que se marca a mano: las casillas y los papeles del carro.
   La observación va en la columna del estado, debajo del recuadro. */
.yarda-hoja .yh-fila-controles{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:stretch}
.yarda-hoja .yh-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.yarda-hoja .yh-cas{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11pt;font-weight:bold}
/* La casilla: un cuadrado de 6 mm, dibujado con borde para que salga en
   cualquier impresora. El «☐» va dentro, con letra de tamaño cero: está para
   quien lea el texto, no para el papel (en transparente se seguía viendo un
   cuadradito dentro del cuadrado en el PDF). */
.yarda-hoja .yh-caja{display:inline-block;width:6mm;height:6mm;border:2px solid #000;font-style:normal;
  overflow:hidden;font-size:0;flex:none}
.yarda-hoja .yh-sim{font-style:normal;font-size:12pt}
.yarda-hoja .yh-nomontar{border:2.5px solid #a8201a;color:#8a1510;padding:2px 6px;font-weight:900}
.yarda-hoja .yh-papeles{border:2px dashed #7a4a00;color:#5c3700;background:#fff4c2;padding:3px 8px}
.yarda-hoja .yh-papeles b{font-size:10.5pt;font-weight:900}
.yarda-hoja .yh-papeles .yh-cas{color:#000}
.yarda-hoja .yh-obs-caja{display:flex;align-items:flex-end;gap:5px;margin-top:9px;font-size:10pt;font-weight:bold}
.yarda-hoja .yh-obs{display:block;flex:1;border-bottom:1.5px dotted #000;height:1.2em}
@media print{
  /* Con «gráficos de fondo» encendido en el diálogo de imprimir, el fondo del
     tema oscuro salía debajo de la tabla. Solo cuando lo que se imprime es
     esta hoja: los demás papeles no se tocan. */
  html:has(#printArea .yarda-hoja),html:has(#printArea .yarda-hoja) body{background:#fff!important;color-scheme:light}
  /* ⚠️ Sin esto, la hoja salía con una PRIMERA PÁGINA EN BLANCO (medido en el
     PDF, 24-sep-2026): al pasar de la página de siempre a la `yarda`, el
     navegador cambia de hoja. Con todo el documento en `yarda` mientras se
     imprime esta hoja, no hay cambio y no hay página vacía. La factura y los
     demás papeles no llevan `.yarda-hoja` y no se enteran. */
  html:has(#printArea .yarda-hoja),html:has(#printArea .yarda-hoja) body,
  #printArea:has(.yarda-hoja){page:yarda}
}