/* =====================================================================================
   Estilo "Terminal portuaria" (se carga después de tag.css y lo sobreescribe).
   Azul marino del logo TAG + grises acero + naranja de seguridad solo para acciones y alertas.
   Barlow (señalética de transporte) y IBM Plex Mono (contenedores, sellos, bookings, placas).
   Esquinas casi rectas, líneas finas, sin sombras de "plastilina", información densa.
   La hoja del packing list (.pl) conserva su aspecto de Excel.
   Para volver al estilo anterior: quitar terminal.css y la barra lateral de templates/base.html.
   ===================================================================================== */
:root {
  --marino-950: #071430;
  --marino-900: #0A1D4A;
  --marino: #0B2A8A;
  --marino-100: #E7ECF8;
  --acero-950: #16202B;
  --acero-700: #3D4956;
  --acero-500: #5B6776;
  --acero-300: #C3CBD4;
  --acero-200: #DCE1E7;
  --acero-100: #EEF1F4;
  --acero-50: #F5F7F9;
  --naranja: #E35A0B;
  --naranja-900: #B8470A;
  --naranja-100: #FDEBDD;
  --info: #1F5FA6;
  --info-100: #E3EDF8;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --cond: "Barlow Condensed", "Barlow", Arial, sans-serif;

  /* variables de tag.css, redefinidas */
  --azul: var(--marino);
  --azul-2: var(--marino);
  --azul-claro: var(--marino-100);
  --texto: var(--acero-950);
  --suave: var(--acero-500);
  --borde: var(--acero-200);
  --fondo: var(--acero-50);
  --blanco: #fff;
  --verde: #1E7A4C;  --verde-claro: #E2F2E9;
  --ambar: #8F5B00;  --ambar-claro: #FBF0D9;
  --rojo: #B42318;   --rojo-claro: #FBE4E2;
  --morado: var(--info); --morado-claro: var(--info-100);
  --gris-claro: var(--acero-100);
  --radio: 3px; --radio-m: 3px; --radio-s: 2px;
  --clay: none; --clay-s: none; --clay-hundido: none; --clay-azul: none; --clay-verde: none;
}

body {
  font: 15px/1.45 "Barlow", "Segoe UI", Arial, sans-serif;
  color: var(--acero-950);
  background: var(--acero-50);
}
a { color: var(--marino); font-weight: 600; }
h1 { font: 700 1.6rem/1.15 "Barlow", sans-serif; letter-spacing: -.01em; }
h2 { font: 700 .82rem var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--acero-700); margin: 0 0 12px; }
h3 { font: 700 .78rem var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--acero-700); }
.mono, code { font-family: var(--mono); font-size: .93em; letter-spacing: 0; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ---------- estructura: barra lateral + contenido ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.contenido { min-width: 0; }
.lateral {
  background: var(--marino-950); color: #C9D3E6; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 30;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; }
.marca .placa-logo { background: #fff; border-radius: 2px; padding: 6px 9px; display: grid; place-items: center; }
.marca img { height: 22px; display: block; }
.marca small { display: block; font: 600 10px/1.25 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #8FA0C2; }
.lateral nav { padding: 8px 0; flex: 1; overflow-y: auto; }
.lateral .grupo { font: 600 10.5px var(--cond); letter-spacing: .16em; text-transform: uppercase; color: #6F80A6; padding: 16px 20px 6px; }
.lateral nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 20px; color: #C9D3E6; text-decoration: none;
  font-weight: 500; border-left: 3px solid transparent;
}
.lateral nav a svg.i { opacity: .85; }
.lateral nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.lateral nav a.on { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--naranja); font-weight: 600; }
.cuenta { padding: 14px 20px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.cuenta b { display: block; color: #fff; font-weight: 600; }
.cuenta span { display: block; color: #8FA0C2; margin-bottom: 10px; }
.cuenta form { margin: 0; }
.cuenta .salir {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #C9D3E6; border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px; padding: 5px 10px; font: 600 13px "Barlow", sans-serif; cursor: pointer;
}
.cuenta .salir:hover { color: #fff; border-color: rgba(255,255,255,.4); }

.superior {
  height: 56px; background: #fff; border-bottom: 1px solid var(--acero-200); display: flex; align-items: center;
  gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.buscar {
  display: flex; align-items: center; gap: 8px; flex: 0 1 480px; border: 1px solid var(--acero-300);
  border-radius: 3px; padding: 0 10px; height: 36px; background: var(--acero-50); margin: 0;
}
.buscar svg.i { width: 16px; height: 16px; color: var(--acero-500); }
.buscar input { border: 0; background: transparent; box-shadow: none; padding: 0; height: 34px; font-weight: 500; }
.buscar input:focus { background: transparent; }
.buscar:focus-within { border-color: var(--marino); background: #fff; }
.superior .fecha { margin-left: auto; font: 500 13px var(--mono); color: var(--acero-500); white-space: nowrap; }
.menu-movil { display: none; background: none; border: 0; padding: 6px; color: var(--acero-950); cursor: pointer; }
.menu-movil svg.i { width: 24px; height: 24px; }
.velo { display: none; }

main, body.ancho-total main { max-width: none; margin: 0; padding: 22px 28px 60px; }
.head { margin-bottom: 18px; align-items: flex-end; }
.head h1 { margin: 0; }

/* ---------- tarjetas / paneles ---------- */
.card { background: #fff; border: 1px solid var(--acero-200); border-radius: 3px; padding: 16px 18px; margin-bottom: 18px; }
details.card > summary::before { content: "+ "; color: var(--marino); }
details.card[open] > summary::before { content: "− "; }
.grid { gap: 18px; }

/* indicadores (antes "kpis"): franja tipo tablero de terminal */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin-bottom: 18px;
  background: #fff; border: 1px solid var(--acero-200); border-radius: 3px;
}
.kpi { border-radius: 0; border-left: 1px solid var(--acero-200); padding: 11px 16px; box-shadow: none; background: transparent; }
.kpi:first-child { border-left: 0; }
.kpi:hover { transform: none; background: var(--acero-50); }
.kpi b { font: 600 1.6rem/1.2 var(--mono); color: var(--acero-950); }
.kpi span { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--acero-500); }
.kpi.alerta { background: var(--naranja-100); }
.kpi.alerta b { color: var(--naranja); }

dl.datos dt { font: 600 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--acero-500); padding-top: 3px; }
dl.datos dd { font-weight: 600; }

/* ---------- tablas tipo manifiesto ---------- */
.tabla-wrap { border-radius: 0; background: #fff; box-shadow: none; padding: 0; border: 1px solid var(--acero-200); }
.card .tabla-wrap { margin: 0 -1px; }
.card[style*="padding:0"] .tabla-wrap, .card[style*="padding: 0"] .tabla-wrap { border: 0; border-top: 1px solid var(--acero-200); }
table { font-size: .88rem; border-collapse: collapse; }
th {
  background: var(--acero-100); font: 600 11px var(--cond); letter-spacing: .1em; text-transform: uppercase;
  color: var(--acero-700); padding: 8px 10px; border-bottom: 1px solid var(--acero-300);
}
td { padding: 8px 10px; border-bottom: 1px solid var(--acero-200); }
tbody tr:nth-child(even) td { background: #FAFBFC; }
tr.clic:hover td, tbody tr:hover td { background: var(--marino-100); }
tr.clic:hover td:first-child, tr.clic:hover td:last-child { border-radius: 0; }
td.num, th.num { font-family: var(--mono); font-size: .92em; }
th.num { font-family: var(--cond); font-size: 11px; }
tfoot td { background: var(--acero-100); border-top: 1px solid var(--acero-300); font-weight: 700; }
tr.grupo-hoja td { background: var(--acero-100) !important; color: var(--marino); font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
tr.grupo-hoja td b, tr.grupo-hoja td .mono { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
tr.subtotal-hoja td { font-weight: 700; border-bottom: 1px solid var(--acero-300); }
table.panel { font-size: .8rem; }

/* ---------- estatus: barra de color a la izquierda, sin píldoras ---------- */
.badge {
  border-radius: 0 2px 2px 0; padding: 2px 8px 2px 7px; border-left: 3px solid; box-shadow: none;
  font: 600 12px "Barlow", sans-serif; letter-spacing: 0;
  background: var(--acero-100); color: var(--acero-700); border-left-color: var(--acero-500);
}
.badge.BORRADOR { background: var(--acero-100); color: var(--acero-700); border-left-color: var(--acero-500); }
.badge.ENVIADA { background: var(--marino-100); color: var(--marino); border-left-color: var(--marino); }
.badge.PROGRAMADA { background: var(--info-100); color: var(--info); border-left-color: var(--info); }
.badge.EN_PROCESO { background: var(--ambar-claro); color: var(--ambar); border-left-color: #D9A21B; }
.badge.COMPLETADA { background: var(--verde-claro); color: var(--verde); border-left-color: var(--verde); }
.badge.CANCELADA { background: var(--rojo-claro); color: var(--rojo); border-left-color: var(--rojo); }
table.panel .badge { font-size: 11.5px; padding: 1px 7px 1px 6px; }

/* número de contenedor como viene pintado (ISO 6346): MSKU 123456 5 */
.cntr { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.cntr b { font-weight: 600; }
.cntr i { font-style: normal; border: 1px solid currentColor; padding: 0 3px; margin-left: 2px; border-radius: 1px; }

/* ---------- formularios ---------- */
label { font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--acero-700); margin-bottom: 5px; }
input, select, textarea {
  border: 1px solid var(--acero-300); border-radius: 3px; background: #fff; box-shadow: none;
  font: 500 15px "Barlow", sans-serif; padding: 8px 10px; color: var(--acero-950);
}
select { padding-right: 34px; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { border-color: var(--marino); outline: 2px solid var(--marino-100); outline-offset: 0; background-color: #fff; }
input[type=checkbox] { border: 0; accent-color: var(--marino); }
input[type=file] { border: 0; padding: 4px 0; font-size: 14px; }
.campo.error input, .campo.error select, td.error input { border-color: var(--rojo); }
.errorlist { font-weight: 600; }
.campo .ayuda, .campo > .small { font-size: .8rem; }
.filtros { align-items: end; }
.card.filtros { padding: 12px 16px; background: var(--acero-50); }

/* ---------- botones ---------- */
.btn {
  border: 1px solid var(--acero-300); border-radius: 3px; background: #fff; color: var(--acero-950);
  font: 600 14px "Barlow", sans-serif; padding: 0 14px; height: 36px; box-shadow: none; transition: background .12s, border-color .12s;
}
.btn:hover { transform: none; color: var(--acero-950); border-color: var(--acero-500); background: var(--acero-50); }
.btn:active { transform: none; box-shadow: none; }
.btn svg.i { width: 16px; height: 16px; }
/* azul marino: acciones normales de avance */
.btn.primario { background: var(--marino); border-color: var(--marino); color: #fff; box-shadow: none; }
.btn.primario:hover { background: var(--marino-900); border-color: var(--marino-900); color: #fff; filter: none; }
/* naranja de seguridad: la acción principal de una pantalla (se usa con moderación) */
.btn.accion { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.btn.accion:hover { background: var(--naranja-900); border-color: var(--naranja-900); color: #fff; }
.btn.exito { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: none; }
.btn.exito:hover { filter: none; background: #176039; color: #fff; }
.btn.peligro { color: var(--rojo); border-color: #E8B4AF; }
.btn.peligro:hover { background: var(--rojo-claro); }
.btn.chico { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 2px; }
.btn.grande { height: 56px; font-size: 1.08rem; border-radius: 4px; }
.btn[disabled] { opacity: .45; filter: none; }

/* chips de filtro (método) como control segmentado */
.chip { border-radius: 0; border: 1px solid var(--acero-300); margin-left: -1px; height: 32px; padding: 0 12px; font: 600 13px "Barlow", sans-serif; background: #fff; color: var(--acero-700); }
.metodos .chip:first-of-type { border-radius: 3px 0 0 3px; }
.metodos .chip:last-of-type { border-radius: 0 3px 3px 0; }
.chip.on { background: var(--marino); border-color: var(--marino); color: #fff; position: relative; }
.panel-filtros .metodos { gap: 0; }
.panel-filtros .metodos .small { margin-right: 8px; font: 600 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- mensajes y avisos ---------- */
.msgs li, .aviso { border-radius: 0 3px 3px 0; box-shadow: none; border-left: 4px solid; padding: 10px 14px; font-weight: 600; }
.msgs li { background: var(--marino-100); color: var(--marino); border-left-color: var(--marino); }
.msgs li.success { background: var(--verde-claro); color: var(--verde); border-left-color: var(--verde); }
.msgs li.error { background: var(--rojo-claro); color: var(--rojo); border-left-color: var(--rojo); }
.msgs li.warning { background: var(--ambar-claro); color: var(--ambar); border-left-color: #D9A21B; }
.aviso { background: var(--naranja-100); color: #6B2A05; border-left-color: var(--naranja); }
.aviso-booking { background: var(--naranja-100); color: #6B2A05; border-left: 4px solid var(--naranja); }

/* ---------- fotos ---------- */
.foto { border-radius: 3px; border: 1px solid var(--acero-200); box-shadow: none; padding: 0; }
.foto img { border-radius: 0; }
.foto .pie { padding: 8px 10px; }

/* ---------- patio (celular): alto contraste, botones grandes ---------- */
.etapas { gap: 6px; }
.etapas label {
  border-radius: 3px; border: 2px solid var(--acero-300); background: #fff; box-shadow: none; padding: 11px 14px;
  font: 700 14px "Barlow", sans-serif; letter-spacing: 0; text-transform: none; color: var(--acero-950);
}
.etapas input:checked + label { background: var(--marino); border-color: var(--marino); color: #fff; box-shadow: none; }
.progreso { border-radius: 0; height: 8px; background: var(--acero-200); box-shadow: none; }
.progreso div { background: var(--naranja); border-radius: 0; }
.op-lista { gap: 10px; }
.op-item { border-radius: 3px; border: 1px solid var(--acero-300); box-shadow: none; padding: 14px 16px 14px 20px; }
.op-item::before { width: 5px; background: var(--marino); }
.op-item:hover { transform: none; border-color: var(--marino); }
.op-item b { font-family: var(--mono); font-weight: 600; }

/* ---------- hoja del packing list: igual al Excel, solo sin sombras ---------- */
.pl-wrap { border-radius: 3px; box-shadow: none; border: 1px solid var(--acero-200); }
.pl-cargar { border-radius: 3px; background: var(--marino-100); border-left: 4px solid var(--marino); }
.pl-tab { border-radius: 3px 3px 0 0; }
.pl-tab.activa { color: var(--marino); box-shadow: inset 0 -3px 0 var(--naranja); }

/* ---------- espera con el logo ---------- */
.cargando { background: rgba(7, 20, 48, .55); backdrop-filter: none; }
.cargando-caja { border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.cargando-logo::before { border-color: var(--acero-200); border-top-color: var(--naranja); }
.cargando-barra, .cargando-barra div { border-radius: 0; }
.cargando-barra div { background: var(--naranja); }

/* ---------- historial ---------- */
ul.bitacora { list-style: none; padding: 0; margin: 0; }
ul.bitacora li { position: relative; padding: 0 0 12px 22px; font-size: .9rem; border: 0; }
ul.bitacora li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px; background: var(--marino); border-radius: 50%; }
ul.bitacora li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--acero-300); }
ul.bitacora li:last-child::after { display: none; }
ul.bitacora .muted { font-family: var(--mono); font-size: .82rem; }

/* ---------- login ---------- */
.login { background: var(--marino-950); }
.login .card { border-radius: 4px; border: 0; padding: 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login img { width: 150px; }
.login .franja { height: 4px; background: var(--naranja); margin: -30px -28px 24px; border-radius: 4px 4px 0 0; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(7,20,48,.45); z-index: 25; }
  .menu-movil { display: inline-flex; }
  .superior { padding: 0 12px; gap: 8px; }
  .superior .fecha { display: none; }
  main, body.ancho-total main { padding: 16px 12px 60px; }
  .btn.grande { height: 60px; }
}

/* La hoja del packing list conserva sus propias etiquetas (no las de formulario en mayúsculas). */
.pl label { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin: 0; }
.pl .pl-quitar { font-size: .68rem; color: #888; }

/* ---------- recepción / descarga por camión ---------- */
.paso h2 { display: flex; align-items: center; gap: 10px; }
.num-paso { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--acero-500); border-radius: 50%; font: 700 12px var(--mono); color: var(--acero-700); letter-spacing: 0; }
.paso.hecho .num-paso { background: var(--verde); border-color: var(--verde); color: #fff; }
table.conteo td { vertical-align: middle; }
table.conteo input { width: 92px; padding: 6px 8px; text-align: right; font-family: var(--mono); }
table.conteo input[name$="nota_recepcion"] { width: 100%; min-width: 140px; text-align: left; font-family: "Barlow", sans-serif; }
table.conteo tr.con-diferencia td { background: var(--naranja-100) !important; }
.dif { color: var(--naranja-900); font-family: var(--mono); }
.ok-txt { color: var(--verde); font-family: var(--mono); }