/* Intela KARDEX — sistema visual (doc "Diseño de UX", 20/10/2026).
   Un solo juego de componentes. Colores con significado: azul/espacio = acción,
   verde = entró/propio, ámbar = atención, rojo = no entró/rechazado, rayado = sombra.
   El color del espacio llega en --esp / --esp-suave desde base.html. */

:root {
  --tinta: #14181F;
  --tinta-2: #3A4350;
  --gris: #5B6573;
  --borde: #DCE1E8;
  --borde-2: #C9D0DA;
  --fondo: #EEF1F5;
  --blanco: #FFFFFF;
  --verde: #1E8E4E; --verde-suave: #E4F4EA; --verde-tinta: #17693A;
  --ambar: #B7791F; --ambar-suave: #FDF1DD; --ambar-tinta: #6B4508;
  --rojo: #C2382F;  --rojo-suave: #FBE6E4;  --rojo-tinta: #8E2A22;
  --azul: #3A63B8;  --azul-suave: #E6EDFA;  --azul-tinta: #274A8E;
  --esp: #1F5FD1; --esp-suave: #E3ECFB;
  --radio: 12px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --texto: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.45; }
a { color: var(--esp); }
a:hover { filter: brightness(0.85); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 26px; } h2 { font-size: 21px; } h3 { font-size: 17px; } h4 { font-size: 15px; }
.mono, code, .codigo { font-family: var(--mono); }
.num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chico { font-size: 13px; color: var(--gris); }

/* ---------- cáscara ---------- */
.barra { background: var(--tinta); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 24px; }
.barra a { color: #fff; text-decoration: none; }
.barra .marca { font-weight: 700; font-size: 16px; white-space: nowrap; }
.espacios { position: relative; }
.espacios summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 8px; background: var(--esp); color: #fff; white-space: nowrap; }
.espacios summary::-webkit-details-marker { display: none; }
.espacios-fijo { font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 8px; background: var(--esp); color: #fff; white-space: nowrap; }
.espacios[open] summary { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.espacios .menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(20,24,31,0.18); padding: 6px; display: flex; flex-direction: column; }
.espacios .menu a { color: var(--tinta); padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.espacios .menu a:hover { background: var(--fondo); filter: none; }
.espacios .menu .punto { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.buscador { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; background: #2A313C; border-radius: 10px; padding: 0 14px; height: 42px; margin: 0; }
.buscador input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; padding: 0; height: 40px; }
.buscador input::placeholder { color: #AEB6C2; }
.buscador kbd { font-family: var(--mono); font-size: 12px; color: #AEB6C2; border: 1px solid #4A5462; border-radius: 4px; padding: 0 6px; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #C9D0DA; white-space: nowrap; }
.usuario button { background: transparent; border: 1px solid #4A5462; color: #fff; padding: 4px 10px; font-size: 13px; border-radius: 6px; }

.franja { padding: 7px 24px; font-size: 13.5px; font-weight: 600; }
.franja.sombra { background-color: #D9DEE5; background-image: repeating-linear-gradient(135deg, rgba(20,24,31,0.06) 0 10px, transparent 10px 20px); color: #2A313C; }
.franja.propio { background: var(--verde-suave); color: var(--verde-tinta); }

.pestanas { background: #fff; border-bottom: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 2px; padding: 0 16px; }
.pestanas a { padding: 13px 14px 11px; font-size: 15px; font-weight: 500; color: var(--tinta-2); text-decoration: none; border-bottom: 3px solid transparent; }
.pestanas a:hover { color: var(--tinta); filter: none; }
.pestanas a.activa { font-weight: 700; color: var(--tinta); border-bottom-color: var(--esp); }

main { max-width: 1392px; margin: 0 auto; padding: 24px; }
@media (max-width: 640px) { main { padding: 16px; } .barra { padding: 10px 16px; } .franja { padding: 7px 16px; } }

/* ---------- componentes ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 16px; }
.tarjeta > h3:first-child, .tarjeta > h2:first-child { margin-top: 0; }
.rotulo { font-size: 12.5px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; }
.grande { font-family: var(--mono); font-size: 32px; font-weight: 700; line-height: 1.1; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; }
.flash.error { background: var(--rojo-suave); color: var(--rojo-tinta); }
.flash.info { background: var(--esp-suave); color: var(--tinta); }
.flash.ok { background: var(--verde-suave); color: var(--verde-tinta); }
.flash.aviso { background: var(--ambar-suave); color: var(--ambar-tinta); }

.chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: var(--fondo); color: var(--tinta-2); }
.chip.ok, .chip.autorizado, .chip.propio, .chip.cerrado { background: var(--verde-suave); color: var(--verde-tinta); }
.chip.aviso, .chip.borrador, .chip.abierto { background: var(--ambar-suave); color: var(--ambar-tinta); }
.chip.error, .chip.anulado, .chip.devuelto, .chip.no_autorizado { background: var(--rojo-suave); color: var(--rojo-tinta); }
.chip.sombra { background: #D9DEE5; color: #2A313C; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid #EEF1F5; padding: 10px 12px; text-align: left; font-size: 14.5px; vertical-align: top; }
th { font-size: 12px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.04em; background: #F6F7F9; border-bottom: 1px solid var(--borde); }
tr:hover td { background: #FAFBFC; }
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.tabla-caja table th:first-child, .tabla-caja table td:first-child { padding-left: 16px; }

input, select, textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--borde-2); border-radius: 8px; background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--esp); outline-offset: 0; border-color: var(--esp); }
label { font-weight: 500; }
button, .boton { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; background: var(--esp); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
button:hover, .boton:hover { filter: brightness(0.92); }
button.secundario, .boton.secundario { background: #fff; color: var(--tinta); border-color: var(--borde-2); }
button.peligro, .boton.peligro { background: var(--rojo); }
button.grande, .boton.grande { padding: 0 28px; height: 56px; font-size: 18px; border-radius: 12px; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- estación (pantalla de planta) ---------- */
.escaneo { display: flex; align-items: center; gap: 12px; height: 64px; border: 2px solid var(--esp); border-radius: 12px; padding: 0 18px; background: #fff; min-width: 0; }
.escaneo input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--mono); font-size: 22px; padding: 0; }
.peso-grande { font-family: var(--mono); font-size: 112px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

/* Estación de alta (terminado, tela cruda): orden a la izquierda, peso al centro, rollos a la derecha. */
.estacion { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.estacion.dos { grid-template-columns: 340px minmax(0, 1fr); }
@media (max-width: 1180px) { .estacion, .estacion.dos { grid-template-columns: 1fr; } }
.estacion > * { min-width: 0; }
.dato { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.dato > span:first-child { color: var(--gris); }
.dato select { max-width: 60%; }
.avance { height: 14px; border-radius: 7px; background: #E3E8EF; overflow: hidden; }
.avance > span { display: block; height: 100%; background: var(--esp); border-radius: 7px; }
.avance.lleno > span { background: var(--ambar); }
.avance.pasado > span { background: var(--rojo); }
.peso { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.peso input { font-family: var(--mono); font-size: 112px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; width: 100%; max-width: 6.2ch; text-align: right; border: none; border-bottom: 3px solid var(--borde-2); border-radius: 0; padding: 0 0 4px; background: transparent; }
.peso input:focus { outline: none; border-bottom-color: var(--esp); }
.peso .unidad { font-size: 40px; font-weight: 600; color: var(--gris); }
@media (max-width: 640px) { .peso input { font-size: 72px; } }
.segmentos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmentos label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borde-2); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; min-height: 44px; }
.segmentos label:has(input:checked) { border-color: var(--esp); background: var(--esp-suave); }
.segmentos input[type=radio] { accent-color: var(--esp); }
button.segunda[aria-pressed=true] { background: var(--ambar-suave); color: var(--ambar-tinta); border: 2px solid var(--ambar); }
button.enorme { width: 100%; height: 88px; font-size: 28px; border-radius: 14px; justify-content: center; }
button.enorme kbd { font-family: var(--mono); font-size: 16px; padding: 3px 10px; border-radius: 6px; background: rgba(0,0,0,0.22); }
.estado-estacion { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14.5px; padding: 12px 20px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
.estado-estacion .ok::before, .estado-estacion .aviso::before, .estado-estacion .error::before, .estado-estacion .apagado::before { content: "●"; margin-right: 6px; }
.estado-estacion .ok::before { color: var(--verde); }
.estado-estacion .aviso::before { color: var(--ambar); }
.estado-estacion .error::before { color: var(--rojo); }
.estado-estacion .apagado::before { color: var(--borde-2); }
.recien { background: var(--verde-suave); }

/* Tira de pasos (recepción de hilo, despacho). */
.pasos { list-style: none; margin: 0; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pasos li { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--gris); }
.pasos li .n { width: 28px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid var(--borde-2); }
.pasos li.hecho { font-weight: 600; color: var(--verde-tinta); }
.pasos li.hecho .n { background: var(--verde-suave); border-color: transparent; }
.pasos li.actual { font-weight: 700; color: var(--tinta); }
.pasos li.actual .n { background: var(--esp); border-color: var(--esp); color: #fff; }
.pasos li.raya { width: 28px; height: 2px; background: var(--borde-2); }

/* Elegir entre tarjetas (radio): proveedores, estaciones. */
.eleccion { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.eleccion label { display: flex; flex-direction: column; gap: 2px; border: 2px solid var(--borde); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-height: 64px; justify-content: center; background: #fff; }
.eleccion label:has(input:checked) { border-color: var(--esp); background: var(--esp-suave); }
.eleccion input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.eleccion label:has(input:focus-visible) { outline: 2px solid var(--esp); outline-offset: 2px; }
.eleccion .titulo { font-weight: 700; font-size: 15.5px; }
.eleccion .sub { font-size: 13px; color: var(--gris); }
.modos { display: flex; flex-wrap: wrap; gap: 10px; }
.modos label { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; height: 60px; border: 2px solid var(--borde-2); border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; background: #fff; text-align: center; padding: 0 12px; }
.modos label:has(input:checked) { border-color: var(--esp); background: var(--esp-suave); font-weight: 700; }
.modos input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.modos label:has(input:focus-visible) { outline: 2px solid var(--esp); outline-offset: 2px; }
input.cifra { height: 88px; border-width: 2px; border-radius: 12px; padding: 0 20px; font-family: var(--mono); font-size: 48px; font-weight: 700; text-align: right; width: 100%; }
.total-caja { background: var(--fondo); border-radius: 12px; padding: 20px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
@media (max-width: 640px) { input.cifra { font-size: 34px; height: 68px; } }

/* Feedback de escaneo: en las pantallas con campo de escaneo o de estación el cartel es grande (regla 7). */
main:has(.escaneo) .flash, main:has(.estacion) .flash { font-size: 18px; padding: 16px 20px; }
main:has(.escaneo) .flash.error, main:has(.estacion) .flash.error { border-left: 6px solid var(--rojo); }
main:has(.escaneo) .flash.ok, main:has(.estacion) .flash.ok { border-left: 6px solid var(--verde); }

/* Tablero en columnas (partidas de tintorería). */
.tablero { display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 16px; min-width: 1240px; align-items: start; }
.tablero-caja { overflow-x: auto; padding-bottom: 8px; }
.columna { display: flex; flex-direction: column; gap: 12px; }
.columna > header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.columna > header .nombre { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.columna > .ayuda { font-size: 12.5px; color: var(--gris); padding: 0 4px; margin-top: -8px; min-height: 2.9em; }
.ficha-chica { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; color: var(--tinta); text-decoration: none; }
.ficha-chica.activa { border: 2px solid var(--esp); }
.ficha-chica.apagada { background: #FAFBFC; }

/* Resultado del conteo: tres columnas con su color (faltan rojo, sobran ámbar, peso azul). */
.resultado { border-top: 5px solid var(--borde-2); }
.resultado.rojo { border-top-color: var(--rojo); } .resultado.rojo .rotulo { color: var(--rojo-tinta); }
.resultado.ambar { border-top-color: var(--ambar); } .resultado.ambar .rotulo { color: var(--ambar-tinta); }
.resultado.azul { border-top-color: var(--azul); } .resultado.azul .rotulo { color: var(--azul-tinta); }

/* Ficha (lote; después OFT, despacho y comprobante): encabezado con código grande, chips y acciones; historia en línea de tiempo. */
.ficha-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 24px; padding: 24px 28px; }
.ficha-titulo { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 420px; }
.codigo-grande { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.ficha-sub { font-size: 20px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { font-size: 14px; padding: 4px 10px; border-radius: 8px; text-decoration: none; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.acciones .boton.grande { height: 48px; font-size: 15px; padding: 0 18px; }
.ficha-cuerpo { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-start; }
.ficha-cuerpo > :first-child { flex: 2 1 560px; min-width: 0; }
.ficha-cuerpo > :nth-child(2) { flex: 1 1 320px; min-width: 0; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { position: relative; padding: 0 0 20px 30px; }
.linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 7px; background: var(--esp); box-sizing: border-box; }
.linea-tiempo li::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: 2px; width: 2px; background: var(--borde); }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo li.sale::before { background: #9AA3AF; }
.linea-tiempo li.anulado { color: var(--gris); }
.linea-tiempo li.anulado .hito-titulo { text-decoration: line-through; }
.linea-tiempo li.pendiente::before { background: transparent; border: 2px dashed #9AA3AF; }
.linea-tiempo li.pendiente .hito-titulo { color: var(--gris); }
.hito-titulo { font-weight: 600; }
.etq-caja { overflow-x: auto; max-width: 100%; }
.fila-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.fila-form select { flex: 1 1 160px; min-width: 0; width: 100%; }
.fila-form input.copias { width: 72px; }
@media (max-width: 640px) { .codigo-grande { font-size: 28px; } .ficha-sub { font-size: 17px; } .ficha-cabeza { padding: 20px; } }
/* Relacionados de una ficha: pares "qué → link" en una columna angosta. */
.relacionados { display: flex; flex-direction: column; gap: 0; margin: 0; }
.relacionados > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EEF1F5; min-width: 0; }
.relacionados > div:last-child { border-bottom: none; }
.relacionados dt { color: var(--gris); font-size: 14px; }
.relacionados dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.ficha-lado { display: flex; flex-direction: column; }
.ride-marco { width: 100%; height: 1100px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; display: block; }
@media (max-width: 640px) { .ride-marco { height: 720px; } }
th.num { font-family: var(--texto); white-space: normal; }
.tabla-caja td.mono { white-space: nowrap; }

/* ---------- ítem 17: lo que antes iba en style="" ----------
   Componentes de armado (fila, pila, tarjeta con tabla) y unas pocas utilidades con nombre.
   Regla: si un valor depende del dato (ancho de una barra, color de un espacio) queda inline; lo demás vive acá. */
.con-tabla { padding: 0; overflow: hidden; }
.tarjeta-titulo { padding: 16px 20px; }
.tarjeta-pie { padding: 12px 20px; }
.cabeza-tarjeta { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.desliza { overflow-x: auto; max-width: 100%; }
.dentro { margin: 0 20px 20px; }
h1 small, h2 small, h3 small, .bajada { font-weight: 400; font-size: 14px; color: var(--gris); }
.fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
.fila.junta { gap: 8px; }
.fila.ancha { gap: 16px; }
.fila.arriba { align-items: flex-start; }
.fila.abajo { align-items: flex-end; }
.fila.separada { justify-content: space-between; }
.fila > input:not([type=checkbox]):not([type=radio]), .fila > select { min-width: 0; max-width: 100%; }
.pila { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pila.junta { gap: 8px; }
.pares { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 8px; align-items: center; }
.pares > * { min-width: 0; }
.chico-sin-gris { font-size: 13px; }
.boton-mini, button.boton-mini { padding: 4px 10px; font-size: 13px; }
form.en-linea, .en-linea { display: inline; }
.entera { flex-basis: 100%; }
.encoge { min-width: 0; }
.crece { flex: 1 1 0; min-width: 0; }
.crece-180 { flex: 1 1 180px; min-width: 0; width: 100%; }
.crece-200 { flex: 1 1 200px; min-width: 0; }
.crece-320 { flex: 1 1 320px; min-width: 0; }
.crece-360 { flex: 1 1 360px; min-width: 0; }
.crece-520 { flex: 2 1 520px; min-width: 0; }
.fijo { flex: none; }
.empuja { margin-left: auto; }
.flota-der { float: right; }

.der { text-align: right; } .izq { text-align: left; } .medio { text-align: center; }
.sin-margen { margin: 0; }
.arriba-0 { margin-top: 0; } .arriba-2 { margin-top: 2px; } .arriba-4 { margin-top: 4px; } .arriba-6 { margin-top: 6px; }
.arriba-8 { margin-top: 8px; } .arriba-12 { margin-top: 12px; } .arriba-16 { margin-top: 16px; }
.abajo-0 { margin-bottom: 0; } .abajo-8 { margin-bottom: 8px; } .abajo-12 { margin-bottom: 12px; } .abajo-16 { margin-bottom: 16px; }
.liviano { font-weight: 400; } .medio-peso { font-weight: 500; } .fuerte { font-weight: 600; } .negrita { font-weight: 700; }
.letra-12 { font-size: 12px; } .letra-13 { font-size: 13px; } .letra-14 { font-size: 14px; } .letra-15 { font-size: 15px; }
.letra-16 { font-size: 16px; } .letra-17 { font-size: 17px; } .letra-18 { font-size: 18px; } .letra-20 { font-size: 20px; }
.letra-22 { font-size: 22px; } .letra-24 { font-size: 24px; } .letra-28 { font-size: 28px; } .letra-11 { font-size: 11px; }
.txt-gris { color: var(--gris) !important; } .txt-tinta { color: var(--tinta) !important; } .txt-tinta-2 { color: var(--tinta-2) !important; }
.txt-rojo { color: var(--rojo-tinta) !important; } .txt-esp { color: var(--esp) !important; } .txt-verde { color: var(--verde-tinta) !important; }
.txt-tenue { color: var(--borde-2) !important; }
.fondo-ambar { background: var(--ambar-suave); } .fondo-esp { background: var(--esp-suave); }
.fondo-rojo { background: var(--rojo-suave); } .fondo-verde { background: #F2FAF5; }
.renglones { white-space: pre-line; } .sin-cortar { white-space: nowrap; } .corta-todo { overflow-wrap: anywhere; }
.apretado { line-height: 1; } .sin-raya { text-decoration: none; } .mano { cursor: pointer; } .alto-44 { min-height: 44px; }
/* Anchos de campo: nunca más que su caja. */
.ancho-64, .ancho-90, .ancho-120, .ancho-180, .ancho-240, .ancho-320 { max-width: 100%; }
.ancho-28 { width: 28px; } .ancho-64 { width: 64px; } .ancho-90 { width: 90px; } .ancho-120 { width: 120px; } .ancho-180 { width: 180px; }
.ancho-240 { width: 240px; } .ancho-320 { width: 320px; }
.ancho-total { width: 100%; } button.ancho-total, .boton.ancho-total { justify-content: center; }
.ancho-520 { max-width: 520px; } .ancho-max { max-width: 100%; } .ancho-640 { max-width: 640px; }

/* Armado de página y de tarjeta. */
.a-la-derecha { justify-content: flex-end; }
.fila.muy-ancha { gap: 16px 24px; }
.fila.base { align-items: baseline; }
.pila.ancha { gap: 16px; } .pila.amplia { gap: 24px; } .pila.sin-hueco { gap: 0; }
.pila.al-final { align-items: flex-end; }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.tarjeta.encabezado { align-items: flex-end; }
.encabezado.abajo { align-items: flex-end; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.dos-columnas > * { min-width: 0; }
.grilla-360 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.alinea-arriba { align-items: start; }
.tarjeta.holgada { padding: 24px; } .tarjeta.compacta { padding: 12px; }
.lateral { flex: 0 1 360px; min-width: 0; background: #F6F7F9; }
.pie-gris { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13.5px; padding: 12px 20px; border-top: 1px solid var(--borde); background: #F9FAFB; }
.con-linea { border-bottom: 1px solid var(--borde); } .con-linea-arriba { border-top: 1px solid var(--borde); }
.separador { border-top: 1px solid var(--borde); padding-top: 14px; }
.recuadro { font-size: 15px; margin-top: 4px; padding: 10px 12px; background: var(--fondo); border-radius: 8px; min-height: 20px; overflow-wrap: anywhere; }
.vacio { padding: 14px 16px; border: 1px dashed var(--borde-2); border-radius: 12px; }
.aire { padding: 24px 0; }
.px-4 { padding: 0 4px; }
.sin-marco { border: none; padding: 0; margin: 0; min-width: 0; }
.solo-arriba { align-self: flex-start; }
.caja-login { max-width: 360px; margin: 60px auto; }
.lista-alta { max-height: 560px; overflow: auto; }
.pasos.con-raya { border-bottom: 1px solid var(--borde); }

/* Renglones: una tarjeta por cosa (bandejas) y una línea por cosa dentro de una tarjeta. */
.tarjeta.renglon { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; padding: 16px 20px; margin-bottom: 10px; }
a.tarjeta.renglon { text-decoration: none; color: var(--tinta); }
.tarjeta.renglon.activa { border: 2px solid var(--esp); }
.renglon-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--fondo); font-size: 14.5px; min-width: 0; }
.renglon-lista > * { min-width: 0; }
summary.ver-mas { padding: 12px 20px; cursor: pointer; font-weight: 600; color: var(--esp); }
.sin-vineta { list-style: none; } .sin-vineta::-webkit-details-marker { display: none; }
.subrayado { text-decoration: underline; }

/* Inicio: tira de kilos por etapa (el color del borde lo pone cada etapa). */
.tira-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tira-etapas > a { display: block; padding: 18px 20px; border-top: 5px solid var(--borde-2); border-right: 1px solid #EEF1F5; text-decoration: none; color: var(--tinta); }

/* Cifras grandes: un tamaño por escalón. */
.grande.m { font-size: 28px; } .grande.l { font-size: 38px; } .grande.xl { font-size: 56px; line-height: 1; } .grande.xxl { font-size: 88px; line-height: 1; }
@media (max-width: 640px) { .grande.l { font-size: 28px; } .grande.xl { font-size: 40px; } .grande.xxl { font-size: 64px; } }
.por { font-size: 44px; color: var(--gris); padding-bottom: 14px; }
.chip.contador { font-size: 15px; vertical-align: middle; }

/* Campos. */
.campo-grande { font-size: 22px; padding: 10px 12px; }
.campo-kg { height: 64px; width: 140px; max-width: 100%; font-size: 22px; text-align: right; }
.escaneo.mediano { height: 56px; }
.escaneo input.texto { font-family: var(--texto); font-size: 19px; }
input.tocado { border: 2px solid var(--ambar); font-weight: 700; }
.mayusculas { text-transform: uppercase; }
.alto-52 { height: 52px; } .alto-88 { height: 88px; }
.lista-cajas { margin: 0; padding-left: 28px; columns: 4 140px; font-size: 15px; }
.avance.fino { height: 10px; }
.avance.completo > span { background: var(--verde); }
.col-barra { width: 36%; }
table.min-560 { min-width: 560px; } table.min-720 { min-width: 720px; }
pre.xml { white-space: pre-wrap; font-size: 12px; overflow-wrap: anywhere; }

/* Permisos (/admin/usuarios). */
th.vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.inactivo { color: #9AA3AF; text-decoration: line-through; }

/* ---------- ítem 18: celular (360 px) ----------
   Bandejas y fichas: nada se sale de la pantalla. Una tabla ancha se desliza dentro de su caja
   (nunca la página entera); los campos y los bloques de armado se encogen. Las estaciones no son para celular. */
@media (max-width: 640px) {
  main table { display: block; overflow-x: auto; max-width: 100%; }
  .tabla-caja table, .desliza table { display: table; }
  .grilla { grid-template-columns: minmax(0, 1fr); }
  .tarjeta { padding: 16px; }
  .con-tabla { padding: 0; }
  input, select, textarea { max-width: 100%; }
  .ancho-320, .ancho-240 { width: 100%; }
  td.mono, td > a.mono, td > .mono { white-space: nowrap; }
}

/* ---------- Tablas: una fila = una línea (05/11/2026) ----------
   Las celdas no se cortan en varias líneas: la tabla se desliza dentro de su caja si no entra. Un texto largo
   (descripción de la OFT, nombre del producto) se corta con «…» y el texto completo queda al pasar el mouse
   (lo arma base.html). Para una celda que SÍ tiene que envolver: clase `envuelve`. */
main th, main td { white-space: nowrap; }
main td.envuelve, main td .envuelve { white-space: normal; }
main td > .corte { display: block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.tabla-scroll { overflow-x: auto; max-width: 100%; }
main td form.en-linea + form.en-linea, main td .acciones > * + * { margin-left: 6px; }
main td button { padding: 5px 12px; }
th, td { padding: 9px 12px; }
.tramos { display: flex; flex-wrap: wrap; gap: 4px 6px; max-width: 760px; }
.tramos .chip { font-weight: 500; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fondo); border-radius: 8px; padding: 10px 12px; }

/* Estaciones de impresión: tarjetas en vez de una tabla de 7 columnas. */
.estaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.estacion-tarjeta { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.estacion-tarjeta.conectada { border-color: var(--verde); box-shadow: inset 4px 0 0 var(--verde); }
.estacion-tarjeta .cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.estacion-tarjeta .nombre { font-weight: 700; font-size: 16px; }
.estacion-tarjeta .acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.estacion-tarjeta .acciones button, .estacion-tarjeta .acciones .boton { padding: 6px 12px; font-size: 14px; }
.punto-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.punto-estado::before { content: ""; width: 9px; height: 9px; border-radius: 5px; background: var(--borde-2); }
.punto-estado.ok { color: var(--verde-tinta); } .punto-estado.ok::before { background: var(--verde); }
.punto-estado.aviso { color: var(--ambar-tinta); } .punto-estado.aviso::before { background: var(--ambar); }
.punto-estado.apagado { color: var(--gris); }

/* Instalar una estación: tres pasos numerados y el estado del agente en vivo arriba. */
.pasos-instalacion { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.pasos-instalacion > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
.pasos-instalacion .numero { width: 36px; height: 36px; border-radius: 18px; background: var(--esp); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.pasos-instalacion p { margin: 6px 0 12px; max-width: 72ch; }
.pasos-instalacion ul { margin: 8px 0 0; padding-left: 18px; }
.pasos-instalacion li li { margin-bottom: 4px; }
.estado-instalacion { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 14px; border-radius: 10px; background: var(--fondo); min-width: 180px; }
.estado-instalacion.ok { background: var(--verde-suave); }
.estado-instalacion .punto-estado { font-size: 16px; }
.enlace-estacion { font-family: var(--mono); font-size: 14px; background: var(--fondo); border-radius: 8px; padding: 9px 12px; overflow-wrap: anywhere; }
details > summary { cursor: pointer; }
.codigo-grande { display: inline-flex; flex-direction: column; gap: 4px; padding: 12px 18px; border-radius: 12px; background: var(--esp-suave); margin-top: 4px; }
.codigo-grande .mono { font-size: 44px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.codigo-entrada { font-family: var(--mono); font-size: 32px; text-align: center; letter-spacing: 0.2em; }