/* ===========================================================================
 * ClinkWebWhs - estilos comunes (look OAMC Air Cargo: acentos azul corporativo)
 * ========================================================================= */
:root {
  --blue: #0080ff;          /* rgb(0,128,255) usado en los totales FoxPro */
  --blue-d: #0064c8;
  --blue-l: #75baff;        /* rgb(117,186,255) lbStation */
  --green: #008000;
  --red: #ff0000;
  --gray: #dcdcdc;          /* rgb(220,220,220) marca de agua */
  /* Naranja: reservado al peso que se está capturando (Pallet Control). Es el
     único color cálido de la paleta, para que ese dato no se confunda con los
     pesos calculados, que van en azul. */
  --orange: #ff8c00;
  --orange-d: #c46a00;
  --orange-l: #ffc98a;
  --pink: #fab1bb;          /* página general dispatch */
  --bg: #eef2f7;
  --panel: #ffffff;
  --line: #cfd8e3;
  --text: #1c2733;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 13px;
}
a { color: var(--blue-d); }

/* Barra de título tipo OAMC */
.titlebar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #ffffff, #e7eef7);
  border-bottom: 2px solid var(--blue);
  padding: 8px 14px;
}
.titlebar .logo { width: 40px; height: 40px; border-radius: 6px; background: var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; }
.titlebar h1 { font-size: 18px; margin: 0; letter-spacing: .5px; }
.titlebar .sub { color: #5a6b7b; font-size: 12px; }
.titlebar .spacer { flex: 1; }
/* Círculo de la báscula/puerta. min-width en vez de width fijo: con un valor corto
   ("01") se ve igual que siempre, y con uno largo (una puerta con nombre) se estira
   a píldora en vez de desbordar y solaparse con lo de al lado. */
.titlebar .station {
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 34px; color: var(--blue-l);
  background: #fff; border: 3px solid var(--blue-l); border-radius: 28px;
  min-width: 56px; width: auto; padding: 0 10px; height: 56px; flex: 0 0 auto;
  white-space: nowrap; display: flex; align-items: center; justify-content: center;
}
/* Número de recibo: TEXTO delante del círculo de la báscula. No usa .station (ese
   círculo de 56px es para la báscula: con 8-10 dígitos el número desbordaba y se
   solapaba). Ancho automático y sin encogerse, para no volver a pisar nada. */
.titlebar .recno {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1;
  white-space: nowrap; flex: 0 0 auto; margin-right: 4px;
}
.titlebar .recno .lbl {
  font-size: 10px; color: #5a6b7b; text-transform: uppercase; letter-spacing: .06em;
}
.titlebar .recno .val {
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 30px;
  color: var(--blue); letter-spacing: 1px;
}
.titlebar .whs { font-family: Impact, sans-serif; color: var(--blue); font-size: 18px;
  white-space: nowrap; flex: 0 0 auto; }
.titlebar .userbox { display:flex; align-items:center; gap:8px; color:#3a4a5a; font-weight:600; }
.titlebar .userbox #userName { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Botones */
.btn {
  border: 1px solid var(--blue-d); background: var(--blue); color: #fff;
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--blue-d); }
.btn.sec { background: #fff; color: var(--blue-d); }
.btn.sec:hover { background: #eef5ff; }
.btn.warn { background: #b00020; border-color: #8a0019; }
.btn.gray { background: #6b7785; border-color: #55606c; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Toolbar/ribbon */
.ribbon { display: flex; gap: 6px; padding: 6px 14px; background: #f4f8fd; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ribbon .btn { display: flex; align-items: center; gap: 6px; }

/* Layout */
.container { padding: 12px 14px 60px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.panel h2 { margin: 0 0 10px; font-size: 14px; color: var(--blue-d); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .grid3,.grid4 { grid-template-columns: repeat(2,1fr); } }

/* Campos */
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 11px; color: #5a6b7b; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
/* Bloque "Selección y Búsqueda": 2 columnas con colocación explícita por fila. */
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; font-size: 13px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-l); border-color: var(--blue); }
.field input[readonly], .field input:disabled { background: #f0f3f7; color: #44535f; }
textarea { resize: vertical; min-height: 48px; }

/* Tabla / grid de datos */
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
table.grid th { background: #e9f1fb; color: var(--blue-d); position: sticky; top: 0; }
table.grid td.num, table.grid th.num { text-align: right; }
table.grid tr.total td { background: #eaf7ea; color: var(--green); font-weight: 700; }
table.grid td.diff-neg { color: var(--red); font-weight: 700; }
table.grid td.remarks { color: var(--red); }
table.grid tr.sel { background: #d9ecff; }
table.grid input, table.grid select { width: 100%; border: 1px solid var(--line); padding: 3px 4px; font-size: 12.5px; }
/* Columnas numéricas del grid de detalle: el valor del input alineado a la derecha
   (las celdas de solo texto ya se alinean por td.num). */
#detail td.num input { text-align: right; }
/* Los input[type=number] imponen un min-width intrínseco (por los spinners) que
   sobresale de la columna en table-layout:fixed y saca una barra horizontal.
   min-width:0 los deja obedecer el ancho de su columna. */
#detail input, #detail select { min-width: 0; }
.grid-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
/* El grid de detalle tiene anchos fijos que cuadran al 100%; el redondeo sub-píxel
   de los % (11 columnas) saca una barra horizontal espuria. Se oculta solo la
   horizontal (la vertical sigue para muchos renglones). */
.detail-wrap { overflow-x: hidden; }

/* Íconos semáforo dispatch */
.ico { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; }
.ico.box { background: #b9c4d0; }
.ico.turn { background: #f0ad4e; }
.ico.box-ready { background: var(--green); }
.ico.box-plus { background: #1565c0; }
.ico.box-partial { background: #e53935; }
.ico.boxemail { background: #6a1b9a; }

/* Totales inferiores (azul OAMC) */
/* Rótulo "qué se está recibiendo": va DENTRO de la barra de tabs, pegado a la
   derecha, para no robarle altura a la forma. Por eso el valor baja de 36px a 24px
   y la fila se alinea con los tabs. */
.tabs .receiving { margin-left: auto; display: flex; gap: 22px; align-items: flex-end; }
.tabs .receiving > span { display: flex; flex-direction: column; line-height: 1; }
.receiving .lbl {
  font-size: 10px; color: #5a6b7b; text-transform: uppercase; letter-spacing: .06em;
}
.receiving .val {
  font-family: Impact, "Arial Narrow", sans-serif; font-size: 24px; line-height: 1;
  color: var(--blue); letter-spacing: 1px; white-space: nowrap;
}

/* Totales: cada valor en su propia tarjeta, para que no se vean apiñados. */
.totals { display: flex; gap: 12px; flex-wrap: wrap; }
.totals .t {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 110px; min-width: 110px; gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #ffffff, #f2f6fb);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 39, 51, .06);
}
.totals .t b { color: var(--blue); font-size: 22px; line-height: 1.1; }
.totals .t span {
  font-size: 11px; color: #5a6b7b; text-transform: uppercase; letter-spacing: .04em;
}
.counter { font-family: Impact, sans-serif; font-size: 30px; color: var(--blue-d); }

/* Estado serie */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #aaa; margin-right: 5px; }
.dot.on { background: var(--green); }
.dot.read { background: var(--blue); animation: pulse 1s infinite; }
.dot.err { background: var(--red); }
@keyframes pulse { 50% { opacity: .3; } }

/* Marca de agua destino */
.watermark { font-family: Arial, sans-serif; font-weight: 800; color: var(--gray); font-size: 64px; line-height: 1; }
.void-stamp { color: var(--red); font-weight: 800; transform: rotate(-20deg); font-size: 42px; border: 4px solid var(--red); padding: 4px 16px; display: inline-block; }

/* Turno */
.turn-no { font-size: 30px; color: var(--red); font-weight: 800; text-align: center; }

/* Toast */
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(60px);
  background: #222; color: #fff; padding: 10px 18px; border-radius: 6px; opacity: 0; transition: .3s; z-index: 9999; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: #b00020; }
.toast.ok { background: #1b7a30; }
/* Aviso: la acción SÍ se hizo, pero hay algo que atender después (p.ej. la guía
   quedó retenida y además está cargada a un vuelo del que hay que bajarla). El
   ámbar la distingue del verde de "todo listo" y del rojo de "falló". El ancho
   máximo es porque estos mensajes llevan datos y no caben en una línea. */
.toast.warn { background: #a35b00; max-width: min(680px, 92vw); line-height: 1.35; text-align: center; }

/* Log de báscula */
.scale-log { width: 100%; height: 150px; font-family: Consolas, monospace; font-size: 13px; }
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-bg.show { display: flex; }
.modal { background: #fff; border-radius: 8px; padding: 18px; min-width: 360px; max-width: 92vw; }
.modal h3 { margin: 0 0 12px; color: var(--blue-d); }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-end; }
.tab { padding: 6px 12px; border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; cursor: pointer; background: #eef3f9; }
.tab.active { background: #fff; font-weight: 700; color: var(--blue-d); }
.tabpage { display: none; } .tabpage.active { display: block; }
.hint { font-size: 11px; color: #7a8794; }
.badge { background: var(--blue); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; }

/* Leyenda de íconos del detalle */
.legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px;
  font-size: 11.5px; color: #44535f; background: #f4f8fd; border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend .hint { margin-left: auto; }

/* Menú contextual (clic derecho en el detalle) */
.ctx-menu { position: fixed; z-index: 2000; min-width: 200px; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  display: none; padding: 4px; }
.ctx-menu.show { display: block; }
.ctx-item { padding: 7px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ctx-item:hover { background: #eef5ff; color: var(--blue-d); }