/* =====================================================================================
   Estilo "Data-centric claro" (modelo 3, elegido el 2026-10-09).
   Se carga después de tag.css y terminal.css y cambia solo lo que difiere:
   casi todo blanco, azul TAG como único color, más aire, estatus con punto, IBM Plex Sans.
   Para volver al estilo "Terminal portuaria": quitar claro.css de base.html y login.html.
   ===================================================================================== */
:root {
  --sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --cond: var(--sans);                 /* sin letra condensada: etiquetas en Plex Sans */
  --acero-950: #1A2230;
  --acero-700: #3D4652;
  --acero-500: #6B7584;
  --acero-300: #DDE2E8;
  --acero-200: #EEF1F4;
  --acero-100: #F4F6F9;
  --acero-50: #FAFBFC;
  --naranja: #0B2A8A;                  /* el acento también es azul TAG (un solo color) */
  --naranja-900: #0A1D4A;
  --naranja-100: #EEF2FC;
  --radio: 6px; --radio-m: 6px; --radio-s: 4px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
}

body { font-family: var(--sans); background: var(--acero-50); color: var(--acero-950); }
h1 { font: 600 1.6rem/1.2 var(--sans); }
h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: .1em; }
label { font-family: var(--sans); font-weight: 600; letter-spacing: .06em; }
.btn, input, select, textarea, .chip, .cuenta .salir { font-family: var(--sans); }

/* ---------- barra lateral blanca ---------- */
.lateral { background: #fff; color: var(--acero-700); border-right: 1px solid var(--acero-200); }
.marca { border-bottom-color: var(--acero-200); }
.marca .placa-logo { padding: 4px 2px; }
.marca small { color: var(--acero-500); font-family: var(--sans); }
.lateral .grupo { color: var(--acero-500); font-family: var(--sans); }
.lateral nav a { color: var(--acero-700); }
.lateral nav a:hover { background: var(--acero-50); color: var(--acero-950); }
.lateral nav a.on { background: #EEF2FC; color: var(--marino); border-left-color: var(--marino); }
.cuenta { border-top-color: var(--acero-200); }
.cuenta b { color: var(--acero-950); }
.cuenta span { color: var(--acero-500); }
.cuenta .salir { color: var(--acero-700); border-color: var(--acero-300); border-radius: 4px; }
.cuenta .salir:hover { color: var(--marino); border-color: var(--marino); }
.superior { border-bottom-color: var(--acero-200); }
.buscar { border-color: var(--acero-300); border-radius: 6px; }

main, body.ancho-total main { padding: 28px 36px 60px; }

/* ---------- tarjetas, indicadores ---------- */
.card { border-color: var(--acero-200); border-radius: 8px; box-shadow: var(--sombra); padding: 18px 20px; }
.card.filtros { background: #fff; }
.kpis { background: transparent; border: 0; gap: 14px; }
.kpi { background: #fff; border: 1px solid var(--acero-200) !important; border-radius: 8px; box-shadow: var(--sombra); padding: 14px 18px; }
.kpi:hover { background: var(--acero-50); }
.kpi b { font: 600 1.75rem/1.2 var(--sans); }
.kpi span { font-family: var(--sans); }
.kpi.alerta { background: #fff; }
.kpi.alerta b { color: var(--marino); }

/* ---------- tablas ---------- */
.tabla-wrap { border-color: var(--acero-200); border-radius: 8px; }
.card .tabla-wrap { border-radius: 6px; }
th { background: #fff; color: var(--acero-500); font: 600 11px var(--sans); letter-spacing: .08em; padding: 12px; border-bottom-color: var(--acero-300); }
td { padding: 12px; border-bottom-color: var(--acero-200); }
tbody tr:nth-child(even) td { background: transparent; }
tr.clic:hover td, tbody tr:hover td { background: var(--acero-50); }
th.num { font-family: var(--sans); }
tfoot td { background: var(--acero-50); border-top-color: var(--acero-300); }
tr.grupo-hoja td { background: #fff !important; color: var(--marino); font: 600 11px var(--sans); letter-spacing: .1em; border-top: 1px solid var(--acero-200); }
table.panel th, table.panel td { padding: 9px 10px; }

/* ---------- estatus: punto de color + texto ---------- */
.badge {
  background: transparent !important; border-left: 0; border-radius: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--sans);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge.BORRADOR { color: #7A8494; }
.badge.ENVIADA { color: var(--marino); }
.badge.PROGRAMADA { color: #2F6FB5; }
.badge.EN_PROCESO { color: #B07800; }
.badge.COMPLETADA { color: var(--verde); }
.badge.CANCELADA { color: var(--rojo); }
table.panel .badge { font-size: 12.5px; padding: 0; }

/* ---------- botones ---------- */
.btn { border-radius: 6px; border-color: var(--acero-300); }
.btn.chico { border-radius: 5px; }
.btn.grande { border-radius: 8px; }
.btn.accion, .btn.primario { background: var(--marino); border-color: var(--marino); color: #fff; }
.btn.accion:hover, .btn.primario:hover { background: var(--marino-900); border-color: var(--marino-900); }
.chip { font-family: var(--sans); }
.metodos .chip:first-of-type { border-radius: 6px 0 0 6px; }
.metodos .chip:last-of-type { border-radius: 0 6px 6px 0; }
.panel-filtros .metodos .small { font-family: var(--sans); }

/* ---------- mensajes y avisos: suaves, sin naranja ---------- */
.msgs li, .aviso { border-radius: 6px; border-left-width: 3px; }
.aviso, .aviso-booking { background: #FDF6E7; color: #7A5200; border-left-color: #D9A21B; }
.pl-cargar { border-radius: 6px; background: #EEF2FC; border-left: 3px solid var(--marino); }
table.conteo tr.con-diferencia td { background: #FDF6E7 !important; }
.dif { color: #B07800; }

/* ---------- formularios ---------- */
input, select, textarea { border-color: var(--acero-300); border-radius: 6px; }
input:focus, select:focus, textarea:focus { outline-color: #DCE4F8; }

/* ---------- patio, fotos, pasos ---------- */
.etapas label { border-radius: 6px; border-width: 1px; }
.op-item { border-radius: 8px; border-color: var(--acero-200); box-shadow: var(--sombra); }
.op-item::before { width: 4px; }
.foto { border-radius: 6px; overflow: hidden; }
.progreso div { background: var(--marino); }
.num-paso { border-width: 1.5px; font-family: var(--sans); }
.pl-tab.activa { box-shadow: inset 0 -3px 0 var(--marino); }

/* ---------- espera ---------- */
.cargando { background: rgba(250, 251, 252, .8); }
.cargando-caja { border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .12); border: 1px solid var(--acero-200); }
.cargando-logo::before { border-top-color: var(--marino); }
.cargando-barra div { background: var(--marino); }

/* ---------- historial ---------- */
ul.bitacora li::before { width: 8px; height: 8px; }

/* ---------- login claro ---------- */
.login { background: var(--acero-50); }
.login .card { border: 1px solid var(--acero-200); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .08); }
.login .franja { background: var(--marino); border-radius: 10px 10px 0 0; }

@media (max-width: 900px) {
  main, body.ancho-total main { padding: 18px 14px 60px; }
  body.menu-abierto .velo { background: rgba(26, 34, 48, .35); }
}

/* ---------- agenda del día (patio) y fichas técnicas ---------- */
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.agenda h3 { margin: 0 0 8px; }
.lista-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-agenda a { display: block; padding: 8px 10px; border: 1px solid var(--acero-200); border-radius: 6px; text-decoration: none; color: var(--acero-950); font-weight: 500; }
.lista-agenda a:hover { border-color: var(--marino); background: #F7F9FE; }
.lista-agenda .small { display: block; margin-top: 2px; }
.ficha { border-left: 3px solid var(--marino); }
.pl-metodo { margin-bottom: 14px; max-width: 520px; }

.elegir-cliente { display: block; text-decoration: none; color: var(--acero-950); }
.elegir-cliente:hover { border-color: var(--marino); }
.elegir-cliente b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
details.otras-fotos > summary b { display: inline-flex; align-items: center; gap: 8px; }

/* Patio: módulos (Descargas / Consolidación / Puerto) y pantallas paso a paso */
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.modulo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--acero-950); margin: 0; }
.modulo:hover { border-color: var(--marino); }
.modulo > .i { width: 28px; height: 28px; color: var(--marino); flex: none; }
.modulo b { display: block; font-size: 1.05rem; }
.modulo .small { display: block; }
.cuenta-mod { margin-left: auto; text-align: right; font: 600 1.8rem/1 var(--mono); color: var(--marino); }
.cuenta-mod small { display: block; font: 500 .72rem var(--sans); color: var(--acero-500); margin-top: 4px; }
.modulo-sub { font-size: .95rem; margin: 18px 0 8px; color: var(--acero-700); }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.pasos a { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--acero-200); border-radius: 6px;
  background: var(--blanco, #fff); text-decoration: none; color: var(--acero-700); font-size: .9rem; min-width: 0; }
.pasos a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasos a.hecho .num-paso { background: var(--verde); border-color: var(--verde); color: #fff; }
.pasos a.hecho .num-paso .i { width: 14px; height: 14px; }
.pasos a.actual { border-color: var(--marino); box-shadow: inset 0 -3px 0 var(--marino); color: var(--acero-950); font-weight: 600; }
.pasos-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 0 18px; }
@media (max-width: 560px) {
  .pasos a { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: .78rem; text-align: center; }
  .pasos-nav .btn.grande { flex: 1; }
}
.pasos-nav .btn.grande { margin-left: auto; }

/* Tipo de solicitud: descarga de full / consolidación */
.elegir-tipo { display: grid; gap: 6px; text-decoration: none; color: var(--acero-950); margin: 0; }
.elegir-tipo:hover { border-color: var(--marino); }
.elegir-tipo > .i { width: 30px; height: 30px; color: var(--marino); }
.elegir-tipo b { font-size: 1.1rem; }
.tipo-op { font-family: var(--sans); letter-spacing: 0; }
.elegir-descarga { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.elegir-descarga > input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.elegir-descarga > span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.elegir-descarga:has(input:checked) { border-color: var(--marino); box-shadow: inset 0 0 0 1px var(--marino); }

/* Resguardo de contenedores */
.resumen-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 10px; margin-bottom: 14px; }
.resumen-res .card { margin: 0; padding: 12px 14px; text-decoration: none; color: var(--acero-950); display: grid; gap: 2px; }
.resumen-res .card:hover { border-color: var(--marino); }
.resumen-res b { font: 600 1.6rem/1 var(--mono); color: var(--marino); }
.resumen-res span { font-size: .78rem; color: var(--acero-500); }
.resumen-res .alerta-amarilla b { color: #B54708; }
.resumen-res .alerta-roja { border-color: #F3B3AD; }
.resumen-res .alerta-roja b { color: #B42318; }
.semaforo { font-size: .85rem; white-space: nowrap; }
/* Liberación del resguardo: oficina autoriza la salida cuando el cliente paga */
.liberacion { border-radius: 8px; padding: 10px 12px; font-size: .92rem; }
.liberacion.ok { background: #ECFDF3; border: 1px solid #ABEFC6; }
.liberacion.pendiente { background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D; }
.liberacion .datos { margin: 6px 0 0; }
.liberacion form { margin-top: 8px; }
.form-liberar { margin-top: 12px; }
.form-liberar .btn { margin-top: 10px; }
.semaforo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--verde); vertical-align: 1px; }
.semaforo.por-vencer { color: #B54708; font-weight: 600; }
.semaforo.por-vencer::before { background: #F79009; }
.semaforo.vencido { color: #B42318; font-weight: 600; }
.semaforo.vencido::before { background: #D92D20; }

/* Flujo del embarque en 6 pasos */
.flujo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.flujo-paso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px; text-decoration: none; color: var(--acero-700);
  border-right: 1px solid var(--acero-200); min-width: 0; }
.flujo-paso:last-child { border-right: 0; }
.flujo-paso:hover { background: #F4F6FA; }
.flujo-paso .num-paso { flex: none; }
.flujo-txt { display: grid; gap: 2px; min-width: 0; }
.flujo-txt b { font-size: .86rem; color: var(--acero-950); }
.flujo-txt small { font-size: .74rem; color: var(--acero-500); }
.flujo-paso.hecho .num-paso { background: var(--verde); border-color: var(--verde); color: #fff; }
.flujo-paso.hecho .num-paso .i { width: 13px; height: 13px; }
.flujo-paso.actual { background: #EEF2FB; box-shadow: inset 0 -3px 0 var(--marino); }
.flujo-paso.actual .num-paso { background: var(--marino); border-color: var(--marino); color: #fff; }
.flujo-paso.pendiente { opacity: .7; }
@media (max-width: 900px) { .flujo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flujo-paso:nth-child(3n) { border-right: 0; } .flujo-paso:nth-child(-n+3) { border-bottom: 1px solid var(--acero-200); } }
.paso-menu { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor;
  font: 600 .72rem var(--mono); flex: none; }
.paso-mod { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marino); color: #fff;
  font: 600 1rem var(--mono); flex: none; }

/* Captura en vista "tabla" (PL tipo Construplaza): una tabla continua, un renglón por lista de empaque */
.pl-t { font-size: .82rem; min-width: 1180px; border-top-width: 0; }
.pl-t.pl-t-cab { border-top-width: 3px; }
.pl-t + .pl-t, #pl-hojas[data-vista="tabla"] .pl-t { margin-top: -1px; }
.pl-t td { padding: 2px 4px; }
.pl-t-titulo { font-size: 1.25rem; font-weight: 700; text-align: left !important; padding: 8px 10px !important; }
.pl-t-cliente { float: right; display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 400; }
.pl-t-cliente select { width: 240px; }
.pl-t .pl-k { font-weight: 700; text-align: left; }
.pl-t tr.pl-th td { font-weight: 700; background: #F2F2F2; font-size: .78rem; }
.pl-t tr.pl-item { height: auto; }
.pl-t tr.pl-item textarea { min-height: 2.6em; height: 2.6em; }
.pl-t td.u { background: #FAFBFD; font-weight: 700; }
.pl-t td.u input { font-weight: 700; text-align: center; }
.pl-t tr.pl-u td.pl-u-tit { text-align: left; background: #EEF2FC; font-size: .78rem; padding: 3px 8px; }
.pl-t tr.pl-u td.pl-u-tit .btn { padding: 2px 8px; margin-left: 6px; }
.pl-t .pl-quitar { margin-top: 0; }
.pl-t .izq { text-align: left; }
.pl-t-total td { font-weight: 700; background: #F2F2F2; }
#pl-hojas[data-vista="tabla"] ~ .pl-tabs, #pl-tabs:has(+ #pl-hojas[data-vista="tabla"]) #pl-pestanas { display: none; }
.pl-t td.u.amarillo { background: #ffff00; }
.pl-tabs-abajo { margin: 10px 0 0; }
/* PL en tabla tal cual el Excel: una sola tabla, sin franjas entre renglones; acciones en un margen fuera del formato */
.pl.pl-t { min-width: 1500px; font-size: .8rem; border: 0; }
.pl-t td { border: 1px solid #111; }
.pl-t td.acc { border: 0 !important; background: transparent !important; vertical-align: middle; padding: 0 4px 0 0; }
.pl-t thead tr:first-child td:not(.acc) { border-top: 2px solid #111; }
.pl-t tr.pl-u { height: 0; }
.pl-t tr.pl-u td { vertical-align: middle; }
.pl-t tr.pl-item { height: auto; }
.pl-t tr.pl-item textarea { height: 2.5em; min-height: 2.5em; }
.pl-t td.so { font-weight: 700; }
.pl-grupo + .pl-grupo td.so { border-top: 0; }
.pl-grupo ~ .pl-grupo td.so .pl-espejo { visibility: hidden; }  /* SO combinado a lo largo de toda la tabla */
.pl-grupo.quitada { display: none; }
.pl-t td.u.falta { background: #ffff00; }
.pl-t td.u { background: transparent; }
.acc-btn { display: block; width: 24px; height: 22px; margin: 2px 0; padding: 0; border: 1px solid var(--acero-300, #c8cdd5);
  border-radius: 4px; background: #fff; color: var(--marino); font: 700 14px/1 var(--sans, sans-serif); cursor: pointer; opacity: .55; }
.pl-grupo:hover .acc-btn { opacity: 1; }
.acc-btn.quitar { color: #B42318; }
.pl-quitar-p { float: right; opacity: .45; }
.pl-quitar-p:hover { opacity: 1; }
.pl-t tfoot td:not(.acc) { font-weight: 700; background: #F2F2F2; border-top: 2px solid #111; }

/* ---------------------------------------------------------------- Viajes de choferes */
.flujo.flujo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .flujo.flujo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.viaje-chofer .vc-enc { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.viaje-chofer .vc-ruta { font-size: 1.15rem; margin: 2px 0; text-transform: none; letter-spacing: 0; color: var(--acero-950); }
.viaje-chofer .vc-notas { background: #F4F6FA; border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; font-size: .92rem; }
.viaje-chofer .flujo { margin-bottom: 12px; }
.avanzar { display: grid; gap: 8px; }
.avanzar input[type=text] { width: 100%; }
.avanzar-foto { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--acero-200); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: .92rem; color: var(--acero-700); }
.avanzar-foto { flex-wrap: wrap; }
.avanzar-foto input { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; font-size: .85rem; }
.viaje-chofer { overflow: hidden; }
.viaje-chofer .vc-enc > div { min-width: 0; }
.flujo.flujo-3 .flujo-paso { min-width: 0; }
.avanzar-btn { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; }
table.ajustes input, table.ajustes select { width: 100%; }
table.ajustes td.num input { text-align: right; }
@media (max-width: 560px) {
  .flujo.flujo-3 .flujo-paso { padding: 10px 6px; gap: 6px; }
  .flujo.flujo-3 .flujo-txt b { font-size: .78rem; }
}