/* ============================================================
   Maesal · Logística — Sistema de diseño
   Dashboard refinado estilo Linear. Neutros fríos + acento índigo.
   ============================================================ */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f6f7f9;
  --ink:       #16181d;
  --ink-2:     #3a3f47;
  --muted:     #767c86;
  --line:      #e6e8ec;
  --line-2:    #eef0f3;

  --accent:      #5e6ad2;
  --accent-2:    #4d58be;
  --accent-soft: #eef0fb;
  --accent-ring: rgba(94,106,210,.26);

  --green:      #16935a;
  --green-soft: #e6f5ee;
  --red:        #d0455c;

  --sh-sm: 0 1px 2px rgba(20,22,28,.05);
  --sh:    0 2px 4px rgba(20,22,28,.04), 0 8px 24px rgba(20,22,28,.07);
  --sh-lg: 0 18px 44px rgba(20,22,28,.14);

  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  --h: 38px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", monospace;
}

* { box-sizing: border-box; }
/* Reserva siempre el hueco de la barra de scroll para que el ancho no baile
   entre pantallas largas (con barra) y cortas (sin barra). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: var(--h); padding: 0 .95rem;
  font: 600 .84rem/1 var(--font); letter-spacing: .005em;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { background: var(--surface-2); border-color: #d6d9df; }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--sh-sm); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 34px; font-size: .95rem; line-height: 1;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-icon svg { width: 17px; height: 17px; }
.btn-icon:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }

/* ---------- Campos ---------- */
/* Los checkboxes se excluyen: el reset (appearance:none, borde, alto) es para
   inputs de texto/selects; en un checkbox borraría el tick nativo y no se vería
   marcado (aunque el estado sí cambie). Ver .ms multi-selección. */
.field, .filtros input:not([type="checkbox"]), .filtros select {
  width: 100%; height: var(--h); padding: 0 .7rem;
  font: 500 .9rem var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s; appearance: none;
}
.filtros input::placeholder { color: #aab0ba; }
.filtros input:hover, .filtros select:hover { border-color: #d6d9df; }
.field:focus, .filtros input:focus, .filtros select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.filtros select {
  padding-right: 2rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767c86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right .65rem center;
}
/* Campo de fecha (Flatpickr) con icono de calendario */
.date-input {
  cursor: pointer; padding-right: 2.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23767c86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center;
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---------- Cabecera ---------- */
header.top {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: .7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 30;
}
header.top .brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
header.top .logo { height: 40px; width: auto; display: block; }
header.top h1 {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink-2);
  padding-left: 1rem; border-left: 1px solid var(--line); white-space: nowrap;
}
.user { display: flex; align-items: center; gap: .7rem; font-size: .82rem; color: var(--muted); }
.user form { margin: 0; }

/* ---------- Layout ---------- */
main { max-width: 1500px; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .75rem; font-size: .8rem; font-weight: 600;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); transition: all .14s;
}
.chip:hover { border-color: var(--accent); color: var(--accent-2); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Filtros rápidos (chips con recuento) ---------- */
.quick-filters { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.quick-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .55rem; white-space: nowrap; }
.quick-filters .chips { margin-bottom: 0; }
.chip .chip-txt { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 .35rem; border-radius: var(--r-pill); font-size: .7rem; font-weight: 700; background: rgba(20,22,28,.08); color: var(--ink-2); }
.chip:hover .chip-count { background: rgba(94,106,210,.14); color: var(--accent-2); }
.chip.active .chip-count { background: rgba(255,255,255,.28); color: #fff; }

/* ---------- Panel de filtros ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; box-shadow: var(--sh-sm);
}
form.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.filtros .full { grid-column: 1 / -1; display: flex; gap: .6rem; }
.filtros .full input { flex: 1; }
.filtros label {
  display: flex; flex-direction: column; gap: .32rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Barra de acciones ---------- */
.acciones { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .5rem; }
.acciones .hint { font-size: .76rem; color: var(--muted); }
.acciones .hint b { color: var(--ink-2); font-weight: 700; }
.acciones .sel-count { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--accent-2); }
.count { font-size: .8rem; color: var(--muted); margin: .1rem 0 .7rem; }

/* ---------- Tabla ---------- */
.tabla-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow-x: auto; box-shadow: var(--sh-sm);
}
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
thead th {
  background: var(--surface-2); text-align: left; white-space: nowrap;
  padding: .7rem .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
th .sort { color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
th .sort:hover { color: var(--accent-2); }
.arrow { color: var(--accent); font-size: .62rem; }
tbody td { padding: 0 .8rem; height: 46px; white-space: nowrap; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
.ref { font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--ink); }
.estado { font-weight: 600; color: var(--ink); }
.cod-si { display: inline-flex; align-items: center; gap: .25rem; color: var(--green); font-weight: 700; }
.muted { color: var(--muted); }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- Banner "envíos nuevos" ---------- */
#nuevos {
  display: none; background: var(--accent); color: #fff; text-align: center;
  padding: .6rem; font-size: .86rem; font-weight: 600; cursor: pointer;
  letter-spacing: .01em;
}
#nuevos:hover { background: var(--accent-2); }

/* ---------- Layout con menú lateral ---------- */
body.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 216px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { padding: .9rem 1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sidebar-brand img { height: 52px; width: auto; display: block; }
.sidebar-nav { padding: .7rem .55rem; display: flex; flex-direction: column; gap: .18rem; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 600; font-size: .88rem; transition: background .14s, color .14s;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-2); }
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item .badge {
  margin-left: auto; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .06rem .42rem; border-radius: var(--r-pill); min-width: 20px; text-align: center; line-height: 1.35;
}
.nav-item.active .badge { background: var(--accent-2); }
.sidebar-foot { padding: .85rem 1rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.sidebar-foot .who { margin-bottom: .55rem; word-break: break-all; }
.sidebar-foot .btn { width: 100%; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.topbar .tools { display: flex; align-items: center; gap: .6rem; }
.topbar-left { display: flex; align-items: center; gap: .8rem; min-width: 0; }

/* Botón-icono (hamburguesa) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; transition: background .14s, border-color .14s, color .14s;
}
.icon-btn:hover { background: var(--surface-2); border-color: #d6d9df; color: var(--ink); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.sidebar-foot .btn svg { width: 15px; height: 15px; }

/* Sidebar colapsable */
.sidebar { transition: width .18s ease; }
html.sb-collapsed .sidebar { width: 60px; }
html.sb-collapsed .sidebar-brand { padding: .8rem 0; justify-content: center; }
html.sb-collapsed .sidebar-brand img { display: none; }
html.sb-collapsed .sidebar-nav { padding: .7rem .4rem; }
html.sb-collapsed .nav-item { justify-content: center; padding: .55rem 0; position: relative; }
html.sb-collapsed .nav-item > span:not(.badge) { display: none; }
html.sb-collapsed .nav-item .badge { position: absolute; top: 1px; right: 5px; margin: 0; min-width: 16px; font-size: .6rem; padding: .02rem .26rem; }
html.sb-collapsed .sidebar-foot { padding: .7rem .35rem; text-align: center; }
html.sb-collapsed .sidebar-foot .who { display: none; }
html.sb-collapsed .sidebar-foot .btn span { display: none; }
html.sb-collapsed .sidebar-foot .btn { padding: 0; }

/* ---------- Acciones por fila: menú de 3 puntos + modal ---------- */
.acciones-cell { display: flex; align-items: center; gap: .5rem; }

.dropdown {
  position: absolute; z-index: 110; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-lg); padding: .35rem; min-width: 236px; display: none;
}
.dropdown.open { display: block; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border: 0;
  background: none; text-align: left; font: 600 .86rem var(--font); color: var(--ink-2);
  border-radius: var(--r-sm); cursor: pointer; text-decoration: none;
}
.dropdown a:hover, .dropdown button:hover { background: var(--surface-2); color: var(--ink); }
.dropdown svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.dropdown .sep { height: 1px; background: var(--line); margin: .3rem .2rem; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,22,28,.5); display: none;
  align-items: flex-start; justify-content: center; z-index: 100; padding: 3rem 1rem; overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 640px; max-width: 100%; overflow: hidden; }
.modal-head { background: var(--accent); color: #fff; padding: 1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.modal-close { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.modal-body { padding: 1.1rem 1.3rem; max-height: 72vh; overflow-y: auto; }
.prod { display: flex; gap: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .7rem; }
.prod img, .prod .ph { width: 84px; height: 84px; border-radius: var(--r-sm); background: var(--surface-2); flex-shrink: 0; }
.prod img { object-fit: contain; }
.prod .ph { display: grid; place-items: center; color: var(--muted); font-size: 1.4rem; }
.prod dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; font-size: .85rem; align-content: start; }
.prod dt { color: var(--muted); font-weight: 600; }
.prod dd { margin: 0; color: var(--ink-2); }
.modal-empty { text-align: center; color: var(--muted); padding: 2.2rem 1rem; }

/* ---------- Detalle de envío ---------- */
.breadcrumb { font-size: .8rem; color: var(--muted); margin: 0 0 .15rem; }
.breadcrumb a { color: var(--accent-2); }
.detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.detail { display: grid; grid-template-columns: 330px 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.dl { display: flex; flex-direction: column; }
.dl .k { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .75rem; }
.dl .v { font-size: .92rem; color: var(--ink); }
.dl .v.mono { font-family: var(--mono); font-size: .84rem; }
.agency-name { font-weight: 700; font-size: .98rem; color: var(--ink); }
.subtle { font-size: .82rem; color: var(--muted); margin: .25rem 0 .2rem; }
.card-head { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink); margin-bottom: .85rem; }
.card-head svg { width: 18px; height: 18px; color: var(--accent); }
.card-head .mono { margin-left: auto; font-family: var(--mono); font-size: .82rem; color: var(--accent-2); }
.track-item { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-2); }
.track-item:last-child { border-bottom: 0; }
.track-item .when { color: var(--muted); font-size: .84rem; }
.track-item .what { font-weight: 600; color: var(--accent-2); font-size: .86rem; text-align: right; }
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .two-cards { grid-template-columns: 1fr; } }
.addr { font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.addr .who { font-weight: 700; color: var(--ink); }
.addr a { color: var(--accent-2); }
.ref-link { color: var(--accent-2); text-decoration: none; cursor: pointer; }
.ref-link:hover { text-decoration: underline; }

/* ---------- Logos (transportista, PrestaShop, Genei) ---------- */
.carrier-cell { display: inline-flex; align-items: center; gap: .5rem; }
.carrier-logo { width: 26px; height: 26px; object-fit: contain; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 2px; flex: none; }
.ps-logo { width: 15px; height: 15px; object-fit: contain; border-radius: 3px; vertical-align: -2px; margin-right: .38rem; }
.btn-genei { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line-2); padding: .34rem .6rem; }
.btn-genei:hover { border-color: var(--accent); }
.btn-genei img { height: 16px; width: auto; display: block; }
.agency-logo { width: 34px; height: 34px; object-fit: contain; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 3px; flex: none; }
.agency-head { display: flex; align-items: center; gap: .6rem; }

/* ---------- Resumen operativo (colapsable) ---------- */
.resumen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); margin-bottom: 1rem; overflow: hidden; }
.resumen-toggle { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.resumen-toggle:hover { background: var(--surface-2); }
.resumen-toggle .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; flex: none; }
html.resumen-collapsed .resumen-toggle .chev { transform: rotate(-90deg); }
html.resumen-collapsed .resumen-body { display: none; }
.resumen-body { padding: 0 .9rem .9rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; }
.kpi { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); text-decoration: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
a.kpi:hover, button.kpi:not([disabled]):hover { border-color: var(--accent); background: var(--accent-soft); }
.kpi[disabled] { cursor: default; opacity: .5; }
.kpi-n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.kpi-l { font-size: .74rem; color: var(--muted); font-weight: 500; }
.kpi.warn { border-color: rgba(208,69,92,.3); background: rgba(208,69,92,.06); }
.kpi.warn .kpi-n { color: var(--red); }
.kpi.warn.active, button.kpi.active { border-color: var(--red); background: rgba(208,69,92,.13); }
.kpi.cod { grid-column: span 2; background: var(--accent-soft); border-color: var(--accent-ring); cursor: default; }
.kpi.cod .kpi-n { color: var(--accent-2); }
.kpi-cod-head { display: flex; align-items: baseline; gap: .5rem; }
.kpi-cod-break { display: flex; gap: 1.1rem; margin-top: .35rem; font-size: .78rem; color: var(--ink-2); }
.kpi-cod-break b { color: var(--ink); }

/* ---------- Franja de resumen (Pendientes / Facturas) ---------- */
.sumband { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); padding: .55rem .9rem; margin-bottom: 1rem; font-size: .86rem; flex-wrap: wrap; }
.sumband-toggle { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer; font: 700 .68rem var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0; white-space: nowrap; }
.sumband-toggle .chev { width: 14px; height: 14px; transition: transform .15s; }
html.sumband-collapsed .sumband-toggle .chev { transform: rotate(-90deg); }
html.sumband-collapsed .sumband-body { display: none; }
.sumband-body { display: flex; align-items: center; gap: .35rem .75rem; flex-wrap: wrap; color: var(--ink-2); }
.sm-item b { color: var(--ink); font-weight: 700; }
.sm-item.warn b { color: var(--red); }
.sm-item.cod b { color: var(--green); }
.sm-sep { color: var(--line-2); font-weight: 700; }
.sm-goto { cursor: pointer; text-decoration: none; }
.sm-goto:hover { text-decoration: underline; }
/* Resalte de la fila al ir al "más antiguo" */
tr.row-flash > td { animation: rowflash 2.4s ease-out; }
@keyframes rowflash { 0%, 15% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ---------- Sello de última sincronización ---------- */
.sync-sello { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); padding: 0 .35rem; white-space: nowrap; }
.sync-sello .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.sync-sello.run .dot { background: var(--accent); animation: sello-pulse 1s ease-in-out infinite; }
.sync-sello.err { color: var(--red); font-weight: 600; }
.sync-sello.err .dot { background: var(--red); }
@keyframes sello-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Chip de incidencias ---------- */
.chip.warn { border-color: rgba(208,69,92,.35); color: var(--red); }
.chip.warn.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- Escaneo ---------- */
.scan-form { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .5rem; height: var(--h); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.scan-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.scan-form svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.scan-form input { border: 0; outline: 0; background: none; font: inherit; width: 168px; color: var(--ink); }

/* ---------- Multi-selección (checkbox dropdown) ---------- */
.ms { position: relative; }
.ms-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; text-align: left; }
.ms-toggle b { font-weight: 600; color: var(--accent-2); }
.ms-toggle > svg { color: var(--muted); flex: none; transition: transform .15s; }
.ms.open .ms-toggle > svg { transform: rotate(180deg); }
.ms-pop { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-lg); padding: .5rem; }
.ms.open .ms-pop { display: block; }
.ms-search { width: 100%; height: 34px; padding: 0 .6rem; margin-bottom: .4rem; border: 1px solid var(--line); border-radius: var(--r-xs); font: 500 .88rem var(--font); background: var(--surface-2); color: var(--ink); }
.ms-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.ms-tools { display: flex; gap: .4rem; margin-bottom: .4rem; }
.ms-tools button { flex: 1; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-xs); font: 600 .74rem var(--font); color: var(--ink-2); cursor: pointer; }
.ms-tools button:hover { border-color: var(--accent); color: var(--accent-2); }
.ms-opts { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
/* .ms-opt es un <label> dentro de .filtros; hay que anular el estilo de .filtros label. */
.ms .ms-opt { display: flex; flex-direction: row; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: var(--r-xs); cursor: pointer; font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.ms .ms-opt:hover { background: var(--surface-2); }
.ms .ms-opt input { flex: none; width: 16px; height: 16px; margin: 0; }
.ms .ms-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms .ms-count { font-size: .72rem; font-weight: 700; color: var(--muted); background: rgba(20,22,28,.06); border-radius: var(--r-pill); padding: 0 .4rem; min-width: 18px; text-align: center; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600; padding: .6rem 1rem; border-radius: var(--r-sm); box-shadow: var(--sh-lg); z-index: 200; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Duplicados ---------- */
tr.dup > td { background: rgba(208,69,92,.06); }
tr.dup > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.dup-badge { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--red); background: rgba(208,69,92,.12); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
table.only-dups tbody tr:not(.dup) { display: none; }

/* ---------- Login (body.auth) ---------- */
body.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(1000px 460px at 50% -8%, var(--accent-soft), transparent 62%), var(--bg);
}
.auth .card {
  width: 340px; max-width: 100%; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.2rem 2rem; box-shadow: var(--sh-lg);
}
.auth .logo { display: block; width: 150px; max-width: 70%; margin: 0 auto 1.1rem; }
.auth h1 { font-size: 1rem; font-weight: 600; text-align: center; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 1.6rem; }
.auth label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.auth .row { margin-bottom: 1rem; }
.auth input {
  width: 100%; height: 42px; padding: 0 .8rem; font: 500 .95rem var(--font);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.auth input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.auth .btn { width: 100%; height: 44px; margin-top: .4rem; font-size: .92rem; }
.auth .error { color: var(--red); font-size: .84rem; text-align: center; margin: .9rem 0 0; }

/* ---------- Flatpickr — tematizado al sistema ---------- */
.flatpickr-calendar {
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg);
  font-family: var(--font); padding: .3rem; width: auto;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding-top: .3rem; align-items: center; }
.flatpickr-current-month { font-size: .92rem; font-weight: 700; color: var(--ink); }
.flatpickr-current-month .numInputWrapper:hover { background: var(--surface-2); }
.flatpickr-monthDropdown-months { font-weight: 700; }
span.flatpickr-weekday { color: var(--muted); font-weight: 700; font-size: .72rem; }
.flatpickr-day { color: var(--ink-2); border-radius: var(--r-xs); font-weight: 500; height: 36px; line-height: 36px; }

/* ============================================================
   Responsive — tablet y móvil
   Todo aditivo dentro de @media: el escritorio NO cambia.
   ============================================================ */

/* ---- Tablet y phones: márgenes más ceñidos + scroll táctil ---- */
@media (max-width: 900px) {
  main { padding: 1.1rem 1rem 3rem; }
  .topbar { padding: .7rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .topbar .tools { flex-wrap: wrap; }
  header.top { padding: .7rem 1rem; flex-wrap: wrap; }
  .panel { padding: 1rem; }
  .tabla-wrap { -webkit-overflow-scrolling: touch; }
  /* La tabla ancha debe scrollear dentro de su tarjeta, no estirar la página:
     main es un flex-item que hay que dejar encoger bajo el ancho de su contenido. */
  .content > main { min-width: 0; max-width: 100%; }
}

/* ---- Phones: el menú lateral se convierte en barra de pestañas inferior ---- */
@media (max-width: 640px) {
  /* Sidebar → barra fija abajo, en fila */
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; flex-direction: row; align-items: stretch;
    border-right: 0; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(20,22,28,.08); z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* barra de inicio del iPhone */
  }
  html.sb-collapsed .sidebar { width: 100%; }        /* neutraliza el colapsado de escritorio */
  .sidebar-brand { display: none; }                  /* logo + toggle: no aplican en móvil */
  .sidebar-nav { flex-direction: row; flex: 1; padding: .25rem; gap: .15rem; }
  .nav-item {
    position: relative; flex: 1; flex-direction: column; justify-content: center; text-align: center;
    gap: .12rem; padding: .45rem .2rem; font-size: .62rem; min-width: 0;
  }
  html.sb-collapsed .nav-item { padding: .45rem .2rem; }
  html.sb-collapsed .nav-item > span:not(.badge) { display: block; }   /* mostrar etiquetas */
  .nav-item svg { width: 21px; height: 21px; }
  .nav-item span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-item .badge { position: absolute; top: 2px; right: 20%; margin: 0; min-width: 15px; font-size: .58rem; padding: .02rem .24rem; }
  /* Pie: solo el botón de salir (icono) a la derecha */
  .sidebar-foot { display: flex; align-items: center; padding: .25rem .35rem; border-top: 0; border-left: 1px solid var(--line); }
  .sidebar-foot .who { display: none; }
  .sidebar-foot form { display: flex; }
  .sidebar-foot .btn { width: auto; height: 46px; padding: 0 .85rem; }
  .sidebar-foot .btn span { display: none; }

  /* Hueco para que la barra fija (y el safe-area) no tapen el contenido */
  main { padding: 1rem .7rem calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

  /* Topbar compacto y con envoltura */
  .topbar { padding: .55rem .8rem; flex-wrap: wrap; gap: .45rem; }
  .topbar h1 { font-size: .95rem; }
  .topbar .tools { flex-wrap: wrap; gap: .4rem; }
  .btn-genei span { display: none; }                 /* solo el logo de Genei */
  .sync-sello { font-size: .72rem; }

  .panel { padding: .85rem; }

  /* Búsqueda del filtro y escaneo a ancho completo */
  .filtros .full { flex-wrap: wrap; }
  .filtros .full input { flex: 1 1 100%; }
  .filtros .full .btn { flex: 1; }
  .scan-form { flex: 1 1 100%; }
  .scan-form input { width: 100%; }

  /* Inputs a 16px para evitar el zoom automático de iOS al enfocar */
  .filtros input, .filtros select, .field, .scan-form input, .auth input { font-size: 16px; }

  /* Modal y productos ceñidos */
  .modal-backdrop { padding: 1rem .5rem; }
  .prod { gap: .7rem; padding: .7rem; }
  .prod img, .prod .ph { width: 64px; height: 64px; }

  /* Detalle: acciones cómodas */
  .detail-actions .btn { flex: 1 1 auto; }
}
.flatpickr-day:hover { background: var(--surface-2); border-color: transparent; }
.flatpickr-day.today { border-color: var(--accent); color: var(--accent-2); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #c3c7cf; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--ink-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }

/* ---------- Catálogo / inventario ---------- */
.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.subnav-item { padding: .5rem .9rem; font: 600 .9rem var(--font); color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav-item.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.subnav-item.disabled { color: var(--muted); cursor: default; }
.subnav-item em { font-style: normal; font-size: .68rem; background: var(--surface-2); border-radius: var(--r-pill); padding: 0 .35rem; margin-left: .25rem; color: var(--muted); }
.cat-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-xs); background: var(--surface-2); vertical-align: middle; }
.cat-thumb.ph { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.stock-badge { display: inline-block; padding: .12rem .5rem; border-radius: var(--r-pill); font: 700 .72rem var(--font); white-space: nowrap; }
.st-ok { background: rgba(22,163,74,.12); color: #15803d; }
.st-low { background: rgba(217,119,6,.14); color: #b45309; }
.st-out { background: rgba(220,38,38,.12); color: #b91c1c; }
tr.row-inactive > td { opacity: .5; }

/* Catálogo: ancho completo (pero sin desbordar el contenedor: la tabla ancha
   hace scroll dentro de .tabla-wrap, no empuja el main). */
main.wide { width: 100%; max-width: 100%; }
main.wide .tabla-wrap { max-width: 100%; }
.col-name { min-width: 280px; }
.prod-detail { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.prod-media { position: sticky; top: 1rem; }
.prod-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.prod-img.ph { display: flex; align-items: center; justify-content: center; font-size: 64px; }
.prod-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.prod-thumbs img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); }
.prod-head { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.prod-info .two-cards { margin-bottom: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.kv dt { font-size: .78rem; color: var(--muted); font-weight: 600; align-self: center; }
.kv dd { margin: 0; font-size: .9rem; color: var(--ink); }
.var-chip { display: inline-block; background: var(--surface-2); border-radius: var(--r-pill); padding: .1rem .55rem; margin: 0 .3rem .3rem 0; font-size: .8rem; }
.prod-desc { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 720px) { .prod-detail { grid-template-columns: 1fr; } .prod-media { position: static; max-width: 320px; } }

/* Paginación del catálogo */
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; flex-wrap: wrap; }
.pager-info { font-size: .85rem; color: var(--muted); }
.pager-off { opacity: .45; pointer-events: none; }

/* Ajuste de stock (ficha de producto) + modal de confirmación */
.ajuste-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .9rem; }
.ajuste-grid > label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ajuste-grid .aj-full { grid-column: 1 / -1; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.3rem; border-top: 1px solid var(--line); }
.aj-preview { font-size: 1.05rem; }
.aj-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin-top: .9rem; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .ajuste-grid { grid-template-columns: 1fr; } }

.mov-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); margin-right: .25rem; vertical-align: middle; }

/* Input de fotos del ajuste: el botón nativo sigue el diseño (botón secundario) */
.ajuste-grid input[type="file"] { font: 500 .82rem var(--font); color: var(--muted); }
.ajuste-grid input[type="file"]::file-selector-button {
  height: 34px; padding: 0 .85rem; margin-right: .6rem;
  font: 600 .8rem var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.ajuste-grid input[type="file"]::file-selector-button:hover { background: var(--surface-2); border-color: #d6d9df; }

/* Buscador del catálogo con sugerencias (autocompletar) */
.search-wrap { position: relative; flex: 1; }
.search-suggest { display: none; position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-lg); max-height: 380px; overflow-y: auto; }
.sg-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.sg-item:last-child { border-bottom: 0; }
.sg-item:hover { background: var(--surface-2); }
.sg-item img, .sg-ph { width: 38px; height: 38px; flex: none; object-fit: cover; border-radius: var(--r-xs); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.sg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-empty { padding: .75rem; color: var(--muted); font-size: .85rem; }
/* Cuando .sg-item es un <button> (sugerencias de cliente, sin imagen). */
button.sg-item { width: 100%; text-align: left; background: none; border-width: 0 0 1px 0; border-style: solid; border-color: var(--line-2); font: inherit; cursor: pointer; }
/* Tablas compactas dentro del detalle de pedido (envíos y productos). */
.mini-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mini-table th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.mini-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.mini-table tbody tr:last-child td { border-bottom: 0; }
.mini-table tfoot td { padding: .5rem .5rem; border-top: 1px solid var(--line); }
.mini-table .num { text-align: right; white-space: nowrap; }
.mini-table .thumb-cell { width: 44px; }
.mini-table .thumb-cell .cat-thumb, .mini-table .thumb-cell .sg-ph { width: 34px; height: 34px; }
/* Sub-texto (email del cliente) bajo el nombre en las tablas. */
.cust-sub { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* SKU de almacén: barra de acción, badges y previsualización de generación. */
.wh-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 1rem; padding: .55rem .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.wh-info { font-size: .9rem; color: var(--ink); }
.wh-multi { font-size: .78rem; color: var(--accent-2); cursor: help; }
.wh-preview { font-size: .9rem; max-height: 46vh; overflow-y: auto; }
.wh-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wh-chip { font-size: .78rem; padding: .18rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.wh-chip b { color: var(--ink); }
.wh-msg { font-size: .8rem; margin-left: .5rem; }
.wh-msg.ok { color: var(--ok, #16794c); }
.wh-msg.err { color: var(--danger, #c0392b); }