/* Logística: estilos propios. Va DESPUÉS de marca.css y no redefine --tm-*. */
*{box-sizing:border-box}
body{margin:0;background:var(--tm-cemento);color:var(--tm-tinta);font-family:var(--tm-texto);font-size:15px}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--tm-borde);background:var(--tm-papel);color:var(--tm-tinta);border-radius:var(--tm-radio);padding:6px 12px}
button:hover{border-color:var(--tm-grafito)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--tm-verde);outline-offset:1px}
button.principal{background:var(--tm-verde-oscuro);border-color:var(--tm-verde-oscuro);color:#fff;font-weight:600}
button.chico{padding:4px 10px;font-size:13px}
input,select{border:1px solid var(--tm-borde);border-radius:var(--tm-radio);padding:6px 8px;background:#fff;color:var(--tm-tinta);min-width:0}
.suave{color:var(--tm-suave)}
.espacio{flex:1}
[hidden]{display:none!important}

.franja{display:flex;align-items:center;gap:16px;padding:8px 16px;flex-wrap:wrap}
.franja .logo{width:120px;height:auto}
.franja .titulo{font-family:var(--tm-titulo);font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{background:transparent;border-color:var(--tm-chapa-borde);color:var(--tm-chapa-suave)}
.tab.activa{color:var(--tm-neon-texto);border-color:var(--tm-neon);background:var(--tm-chapa-2)}
.usuario{margin-left:auto;color:var(--tm-chapa-suave);font-size:13px}
.usuario button{background:transparent;color:var(--tm-chapa-texto);border-color:var(--tm-chapa-borde)}

.mensaje{margin:0 16px;min-height:0}
.mensaje:not(:empty){margin-top:10px;padding:8px 12px;background:var(--tm-aviso-fondo);border-left:4px solid var(--tm-aviso);border-radius:var(--tm-radio)}
#modo-prueba{margin:10px 16px 0}
main{padding:12px 16px 40px}
.vista{display:flex;flex-direction:column;gap:12px}
.pad{padding:14px 16px}
.tm-panel h2.tm-plaqueta{margin-bottom:10px}

.login{max-width:380px;margin:40px auto;padding:20px}
.login form{display:flex;flex-direction:column;gap:10px}
.login label{display:flex;flex-direction:column;gap:4px}

/* alta rápida */
.alta{display:flex;flex-wrap:wrap;gap:8px;padding:10px;align-items:center}
.alta [name=lugar]{flex:1 1 220px}
.alta [name=kilos]{width:110px}
.alta-costo{flex-basis:100%;font-size:13px;min-height:18px}

/* avisos */
.avisos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.avisos li{position:relative;padding:8px 12px 8px 26px;background:var(--tm-aviso-fondo);border-radius:var(--tm-radio)}
.avisos li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(-45deg,#E0A100 0 6px,var(--tm-tinta) 6px 12px)}
.avisos li.grave{background:var(--tm-resta-fondo)}
.avisos li.grave::before{background:repeating-linear-gradient(-45deg,var(--tm-resta) 0 6px,var(--tm-tinta) 6px 12px)}
.avisos li b{margin-right:6px}

.barra-semana{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.barra-semana .tm-plaqueta{margin:0}

/* tablero */
.tablero{display:grid;grid-template-columns:220px 1fr;gap:12px;align-items:start}
.pendientes{padding:10px}
.pendientes h3{margin:0 0 8px;font-family:var(--tm-titulo);font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.pendientes .lista{display:flex;flex-direction:column;gap:6px}
.cant{color:var(--tm-suave)}
.semana{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:8px;overflow-x:auto}
.dia{background:var(--tm-papel);border:1px solid var(--tm-borde);border-top:3px solid var(--tm-grafito);border-radius:var(--tm-radio);min-width:0}
.dia.hoy{border-top-color:var(--tm-neon)}
.dia-cabeza{padding:6px 8px;font-weight:700;border-bottom:1px solid var(--tm-linea);text-transform:capitalize}
.carril{padding:6px 8px;border-bottom:1px dashed var(--tm-linea)}
.carril:last-child{border-bottom:0}
.carril-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:13px;font-weight:600}
.costo-dia{font-size:12px;color:var(--tm-suave);margin:2px 0 4px}
.costo-dia .falta{color:var(--tm-aviso)}
.mandar{width:100%;margin-top:6px;font-size:12px;padding:4px 6px}
.mandar.cambio{border-color:var(--tm-aviso);background:var(--tm-aviso-fondo);font-weight:700}
.mandar.enviado{color:var(--tm-verde-oscuro)}
.ops{display:flex;flex-direction:column;gap:5px}
.vacio{font-size:12px;color:var(--tm-suave);padding:2px 0}

/* tarjeta de operación */
.op{display:block;width:100%;text-align:left;padding:6px 8px;border:1px solid var(--tm-linea);border-left:5px solid var(--tm-g2);background:#fff;font-size:13px;line-height:1.3}
.op.carga{border-left-color:var(--tm-g1)}
.op.entrega{border-left-color:var(--tm-g3)}
.op .tipo{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--tm-suave)}
.op .lugar{font-weight:700;display:block}
.op .det{color:var(--tm-grafito);font-size:12px}
.op.hecha{opacity:.65}
.op.hecha .lugar::after{content:" ✓ hecha";font-weight:400;color:var(--tm-verde-oscuro)}
.op.no_se_hizo{opacity:.65;text-decoration:line-through}
.op.marcar{border-color:var(--tm-aviso);background:var(--tm-aviso-fondo)}
.op .num{display:inline-block;min-width:16px;font-weight:700;color:var(--tm-suave)}

/* ficha */
.ficha{max-width:720px;width:calc(100% - 24px);padding:16px;border-radius:var(--tm-radio)}
.ficha::backdrop{background:rgba(22,25,26,.45)}
.ficha-cabeza{display:flex;justify-content:space-between;align-items:center}
.cerrar{font-size:22px;line-height:1;padding:2px 10px}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:12px 0}
.grilla label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--tm-grafito)}
.grilla .ancho{grid-column:1/-1}
.ficha-pie{display:flex;gap:8px;flex-wrap:wrap}

/* tablas */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--tm-suave);border-bottom:2px solid var(--tm-linea-fuerte);padding:6px}
.tabla td{border-bottom:1px solid var(--tm-linea);padding:6px;vertical-align:middle}
.tabla tr:nth-child(even) td{background:var(--tm-zebra)}
.tabla .tm-num{text-align:right}
.tabla tr.total td{background:var(--tm-verde-claro);font-weight:700}
.tabla input{width:100%}
.tabla input[type=number]{max-width:110px}
.tabla input[type=checkbox]{width:auto}
.envolver{overflow-x:auto}
.estado-toca{color:var(--tm-resta);font-weight:700}
.estado-pronto{color:var(--tm-aviso);font-weight:700}
.estado-al-dia{color:var(--tm-verde-oscuro)}
.estado-dormido{color:var(--tm-suave);font-style:italic}
.sello{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;border-radius:var(--tm-radio)}
.sello.real{color:var(--tm-verde-oscuro)}
.sello.estimado{color:var(--tm-suave)}

@media (max-width:900px){
  .tablero{grid-template-columns:1fr}
  .semana{grid-template-columns:1fr}
  .franja .logo{width:90px}
}
@media (max-width:520px){
  main{padding:10px 10px 30px}
  .alta>*{flex:1 1 45%}
  .alta [name=lugar]{flex-basis:100%}
}

.hoja{width:100%;margin-top:4px;font-size:12px;padding:4px 6px}

/* ---------- hoja de viaje: solo existe en papel ---------- */
.hoja-viaje{display:none}
@media print{
  body.imprimiendo-hoja>*:not(#hoja-viaje){display:none!important}
  body.imprimiendo-hoja{background:#fff}
  body.imprimiendo-hoja #hoja-viaje{display:block;font-size:12.5px;color:#000;page:vertical}
}
@page vertical{size:A4 portrait;margin:10mm}
.hv-cabeza{display:flex;gap:5mm;align-items:center;margin-bottom:2mm}
.hv-logo{width:24mm;height:auto}
.hv-titulo{font-family:var(--tm-titulo);font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.hv-datos{margin-top:1.5mm;display:flex;gap:6mm;flex-wrap:wrap;align-items:flex-end}
.hv-regla{margin:0 0 2.5mm;padding:1.5mm 3mm;border:1.5px solid #000;font-weight:600}
.hv-pie,.otras{margin:3mm 0 0}
/* Colores de las cintas físicas (no son colores de marca). El nombre del color va siempre escrito. */
.bloque{border:1.5px solid #000;border-left:6mm solid #777;padding:1.5mm 3mm 2mm;margin-bottom:2.5mm;break-inside:avoid}
.bloque.color-rojo{border-left-color:#D32F2F}
.bloque.color-azul{border-left-color:#1E5BB8}
.bloque.color-verde{border-left-color:#2E7D32}
.bloque.color-amarillo{border-left-color:#F2C200}
.bloque-cabeza{display:flex;align-items:baseline;gap:4mm;border-bottom:1px solid #000;padding-bottom:1.5mm;margin-bottom:2mm}
.letra{font-family:var(--tm-titulo);font-size:26px;line-height:1}
.color{font-weight:700;letter-spacing:.06em}
.prov{font-size:17px;font-weight:700}
.hora{margin-left:auto}
.bloque .nota{margin-bottom:1.5mm;font-style:italic}
.fila{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2mm 5mm;margin-top:2mm}
.fila b{min-width:20mm;font-size:11px;letter-spacing:.05em}
.palotes{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:1mm}
.palotes th,.palotes td{border:1.2px solid #000;padding:1mm;font-size:11px;text-align:center}
.palotes thead th{font-weight:700}
.palotes tbody th{width:24mm;text-align:left;font-size:11px;line-height:1.15}
.palotes tbody th small{font-weight:400;font-size:9px}
.palotes td{height:11mm}
.marca-caja{display:inline-flex;align-items:center;gap:1.5mm}
.caja{display:inline-block;width:5mm;height:5mm;border:1.5px solid #000}
.dato{display:inline-flex;align-items:flex-end;gap:1.5mm}
.campo{display:inline-block;height:6mm;border-bottom:1.2px solid #000}

@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;font-size:11px}
  .tabs,.usuario,#alta,#avisos,#modo-prueba,.mensaje,.barra-semana button,.mandar,#pendientes:has(.lista:empty){display:none!important}
  main{padding:0}
  .tablero{grid-template-columns:160px 1fr}
  .semana{grid-template-columns:repeat(6,1fr);overflow:visible}
  .op{break-inside:avoid}
}
@media (prefers-reduced-motion:no-preference){
  .op,.mandar,button{transition:border-color .15s ease,background-color .15s ease}
}