/* ═══════════════════════════════════════════════════════════════════
   FEYFREIGHT — Sistema de diseño
   Compartido por index.html, client-panel.html y admin-panel.html.
   Una sola fuente de verdad: si un color o un espaciado cambia acá,
   cambia en las tres páginas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tipografía de marca ──────────────────────────────────────────
   Rutas relativas, no absolutas: con '/fonts/...' el sitio sólo
   funciona servido desde la raíz del dominio. */
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-thin.woff') format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-book.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-regular.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-medium.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Stolzl';src:url('fonts/stolzl-bold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}

/* IBM Plex servida desde acá, no desde Google.
   Antes las tres paginas la pedian a fonts.googleapis.com: eso bloquea el
   render hasta que responde un tercero, y de paso le manda la IP de cada
   visitante a Google, justo lo contrario de lo que dice nuestra politica de
   privacidad. Son 43 KB en woff2, subset latino.
   La Sans es una fuente variable: un solo archivo cubre 400, 500 y 600. */
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-var.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ── Superficies ──
     Carbón con un leve sesgo cálido, para que el naranja no choque
     contra un gris neutro. Cada nivel es una superficie con función,
     no un degradé decorativo. */
  --ground:#0E0E11;
  --surface:#17171C;
  --surface-2:#1E1E25;
  --surface-3:#25252E;
  --line:#262630;
  --line-2:#35353F;

  /* ── Tinta ── */
  --ink:#F2F0EC;
  --ink-2:#A09C94;
  /* #6E6A63 medía 3.32:1 sobre las superficies oscuras: por debajo del
     mínimo de 4.5:1 para texto chico. Este llega a 4.6:1 y conserva el
     sesgo cálido del gris. */
  --ink-3:#8C877E;

  /* ── Marca ──
     Texto blanco sobre #FF8100 da 2.5:1 y no se lee. Sobre naranja
     va tinta oscura: 7.5:1. */
  --accent:#FF8100;
  --accent-2:#FF9E3A;
  --accent-dim:rgba(255,129,0,.12);
  --accent-line:rgba(255,129,0,.32);
  --on-accent:#1F1200;

  /* ── Semánticos ──
     Separados del acento: el naranja identifica a la marca, estos
     comunican estado. Mezclarlos hace ilegible el estado. */
  --ok:#4ADE80;      --ok-dim:rgba(74,222,128,.12);  --ok-line:rgba(74,222,128,.3);
  --info:#7DB3FF;    --info-dim:rgba(125,179,255,.12); --info-line:rgba(125,179,255,.3);
  --warn:#FBBF24;    --warn-dim:rgba(251,191,36,.12); --warn-line:rgba(251,191,36,.3);
  --danger:#FB7185;  --danger-dim:rgba(251,113,133,.12); --danger-line:rgba(251,113,133,.32);
  --violet:#A78BFA;  --violet-dim:rgba(167,139,250,.14); --violet-line:rgba(167,139,250,.35);

  /* ── Tipografías ── */
  --f-display:'Stolzl','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-ui:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;

  /* ── Escala tipográfica ──
     Razón 1.22. Nada por debajo de 0.8rem (12.8px): medimos que
     los 10-11px del diseño anterior eran ilegibles en el panel. */
  --t-xs:.8rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem;

  /* ── Espaciado ── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:7rem;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-full:999px;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --ancho:1180px;
}

/* ── Base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; line-height:1.12; text-wrap:balance}
h1{font-size:clamp(2.25rem,6vw,var(--t-3xl)); font-weight:700; letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,4vw,var(--t-2xl)); font-weight:700; letter-spacing:-.02em}
h3{font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent-2); text-decoration:none}
a:hover{color:var(--accent)}

/* Un solo anillo de foco en todo el producto. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}

::selection{background:var(--accent-dim); color:var(--ink)}

/* ── Utilidades de composición ───────────────────────────────── */
.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 var(--s5)}
.pila{display:flex; flex-direction:column}
.pila-2{gap:var(--s2)} .pila-3{gap:var(--s3)} .pila-4{gap:var(--s4)}
.pila-5{gap:var(--s5)} .pila-6{gap:var(--s6)}
.fila{display:flex; align-items:center}
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Rótulos de sección ──────────────────────────────────────── */
.section-label{
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3);
}
.section-label::after{content:""; flex:0 0 40px; height:1px; background:var(--accent-line)}
.section-title{margin-bottom:var(--s3)}
.section-sub{color:var(--ink-2); font-size:var(--t-md); max-width:44rem}

/* ── Iconografía ──────────────────────────────────────────────
   SVG trazado, nunca emoji. Los dibujos están en iconos.js; acá va
   sólo cómo se asientan. Un emoji lo dibuja la fuente del sistema:
   no hereda este color ni este peso, y se ve distinto en cada
   sistema operativo sin que podamos corregirlo. */
.ico{flex:0 0 auto; display:block}

/* Placa con el código ISO del país, en lugar de la bandera. Windows
   no trae banderas: donde iba el dibujo mostraba las dos letras, así
   que media parte de los visitantes ya veía esto sin el marco. */
.pais{
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.08em; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.3rem .4rem; line-height:1; display:inline-block; vertical-align:middle;
}

/* Placa de 42 para encabezar una tarjeta. La variante de acento es
   para la opción destacada, una sola por grilla. */
.ico-placa{
  width:42px; height:42px; border-radius:var(--r); display:grid; place-content:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
}
.ico-placa.acento{background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent-2)}

/* Lupa dentro del buscador, como fondo: el campo queda un solo
   elemento y el texto del placeholder no la arrastra al filtrar. */
.table-search,.ms-search input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238C877E' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left .85rem center;
  padding-left:2.6rem;
}

/* ── Botones ──────────────────────────────────────────────────
   El peso visual codifica consecuencia: relleno naranja = la acción
   principal; contorno = secundaria; rojo = destruye algo. */
.btn-primary,.btn-ghost,.btn-track,.btn-new,.mob-btn-main,.mob-btn-sec,.nav-cta{
  font-family:var(--f-ui); font-size:var(--t-sm); font-weight:600;
  border-radius:var(--r); padding:.7rem 1.35rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  border:1px solid transparent; transition:background .18s, border-color .18s, color .18s;
  text-decoration:none; white-space:nowrap; min-height:44px;
}
.btn-primary,.btn-track,.btn-new,.mob-btn-main,.nav-cta{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.btn-primary:hover,.btn-track:hover,.btn-new:hover,.mob-btn-main:hover,.nav-cta:hover{
  background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent);
}
.btn-ghost,.mob-btn-sec{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover,.mob-btn-sec:hover{border-color:var(--ink-3); color:var(--ink); background:var(--surface-2)}
button:disabled,.btn-primary:disabled{opacity:.5; cursor:not-allowed}

/* Acciones dentro de filas y tarjetas */
.btn-action{
  font-family:var(--f-ui); font-size:var(--t-xs); font-weight:500;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.45rem .7rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem;
  transition:color .16s, border-color .16s, background .16s;
}
.btn-action svg{display:block; flex-shrink:0; width:14px; height:14px; color:currentColor}
.btn-action:hover{color:var(--ink); border-color:var(--line-2); background:var(--surface-3)}
.btn-action.primary:hover{color:var(--accent); border-color:var(--accent-line); background:var(--accent-dim)}
.btn-action.success:hover{color:var(--ok); border-color:var(--ok-line); background:var(--ok-dim)}
/* Una accion destructiva tiene que reconocerse antes de tocarla, no
   recien al pasar el mouse: el borde tenue la separa de Ver/Editar sin
   gritar. */
.btn-action.danger{color:var(--danger); border-color:var(--danger-line); background:transparent}
.btn-action.danger:hover{color:var(--danger); border-color:var(--danger-line); background:var(--danger-dim)}
.action-btns{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}

.btn-logout{
  font-family:var(--f-ui); font-size:var(--t-xs); font-weight:500;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.45rem .85rem; cursor:pointer; min-height:36px;
}
.btn-logout:hover{color:var(--ink); border-color:var(--line-2)}

/* ── Formularios ─────────────────────────────────────────────── */
label,.lab{
  display:block; font-size:var(--t-xs); font-weight:600;
  color:var(--ink-2); margin-bottom:.4rem; letter-spacing:.01em;
}
/* Los <button> NO heredan font-family: sin esto caen en el Arial por
   defecto del navegador. Los inputs ya lo tenian; los botones no, y 45
   controles del panel de cliente salian en Arial en vez de IBM Plex Sans.
   Es selector de etiqueta, asi que cualquier clase con su propia
   font-family le sigue ganando. */
button{font-family:var(--f-ui)}

input,select,textarea{
  width:100%; font-family:var(--f-ui); font-size:var(--t-sm); color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.7rem .85rem; min-height:44px;
  transition:border-color .16s, background .16s;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-line); background:var(--surface-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
select{appearance:none; cursor:pointer; padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field,.form-group{margin-bottom:var(--s4)}
input[type=date]{color-scheme:dark}
/* Casilla de aceptacion: el area de toque es toda la fila, no solo el cuadradito. */
.field-check{display:flex; align-items:flex-start; gap:var(--s3); cursor:pointer;
  margin-bottom:var(--s4); font-size:var(--t-sm); color:var(--ink-2); line-height:1.5}
.field-check input[type=checkbox]{flex:none; width:18px; height:18px; margin-top:.1rem;
  accent-color:var(--accent); cursor:pointer; color-scheme:dark}
.field-check a{color:var(--accent); font-weight:600}
.field-check a:hover{text-decoration:underline}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.form-row.full{grid-template-columns:1fr}
.password-hint,.hint{font-size:var(--t-xs); color:var(--ink-3); margin-top:.35rem; display:block}
/* Aclaración dentro de una etiqueta ("Peso (opcional)"): mismo piso de
   tamaño que el resto, sin el peso ni las mayúsculas de la etiqueta. */
.hint-inline{
  font-size:var(--t-xs); font-weight:400; text-transform:none;
  color:var(--ink-2); letter-spacing:0;
}

/* ── Insignias de estado ──────────────────────────────────────
   El color dice el estado; el texto también. Nunca sólo el color. */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-ui); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.02em; padding:.3rem .7rem; border-radius:var(--r-full);
  border:1px solid; white-space:nowrap;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0}
.badge-pending{background:var(--surface-3); color:var(--ink-2); border-color:var(--line-2)}
.badge-received{background:var(--info-dim); color:var(--info); border-color:var(--info-line)}
.badge-transit{background:var(--accent-dim); color:var(--accent-2); border-color:var(--accent-line)}
.badge-customs{background:var(--info-dim); color:var(--info); border-color:var(--info-line)}
.badge-outfordelivery{background:var(--warn-dim); color:var(--warn); border-color:var(--warn-line)}
.badge-ready{background:var(--violet-dim); color:var(--violet); border-color:var(--violet-line)}
.badge-delivered{background:var(--ok-dim); color:var(--ok); border-color:var(--ok-line)}
.badge-admin{background:var(--accent-dim); color:var(--accent-2); border-color:var(--accent-line)}
.badge-client{background:var(--info-dim); color:var(--info); border-color:var(--info-line)}
.status-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--t-xs); font-weight:600; padding:.35rem .8rem;
  border-radius:var(--r-full); border:1px solid;
}
.status-delivered{background:var(--ok-dim); color:var(--ok); border-color:var(--ok-line)}
.status-transit{background:var(--accent-dim); color:var(--accent-2); border-color:var(--accent-line)}
.status-pending{background:var(--surface-3); color:var(--ink-2); border-color:var(--line-2)}

/* ── Códigos de tracking ──────────────────────────────────────
   Monoespaciada y cifras tabulares: son para comparar carácter a
   carácter, no para leer corrido. */
.code,.client-code,.result-id,.sc-code,.cid{
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.code{font-size:var(--t-sm); color:var(--accent-2)}
.client-code{
  font-size:var(--t-xs); color:var(--accent-2); cursor:pointer;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  padding:.25rem .55rem; border-radius:var(--r-sm); display:inline-block;
}
.client-code:hover{background:rgba(255,129,0,.2)}

/* ── Tablas ───────────────────────────────────────────────────── */
/* Antes la tabla se comprimia hasta que los 5 botones de accion se
   apilaban en 5 lineas y cada fila pasaba de 58px a 221px: entraban 3
   envios donde entran doce. Con un ancho minimo la fila se mantiene en
   una linea y, si no entra, scrollea la tabla —no la pagina—. Por debajo
   de 768px no aplica: ahi el panel ya cambia a tarjetas. */
.table-wrap{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow-x:auto; overflow-y:hidden;
}
table{border-collapse:collapse; width:100%; font-size:var(--t-sm)}
.table-wrap table{min-width:70rem}
/* La columna de acciones se lleva exactamente lo que miden sus botones
   (width:1% le dice a la tabla "encogete a tu contenido") y nowrap impide
   que se apilen. El resto de las columnas se reparte el sobrante.
   Probe dejarla fija a la derecha con position:sticky para que no se
   corte: no sirve. Mide 434px de los ~694 visibles, asi que tapaba
   Origen, Destino, Peso y Estado. Mejor que la tabla scrollee. */
.table-wrap thead th:last-child,
.table-wrap tbody td:last-child{width:1%; white-space:nowrap}
.action-btns{flex-wrap:nowrap}
@media (max-width:768px){ .table-wrap table{min-width:0} }
thead th{
  font-family:var(--f-ui); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:var(--s3) var(--s4);
  background:var(--surface-2); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .14s}
tbody tr:hover{background:var(--surface-2)}
td .cc-name{color:var(--ink); font-weight:500}
td .cc-none{color:var(--ink-3); font-style:italic; font-size:var(--t-xs)}
.loading{padding:var(--s7) var(--s4); text-align:center; color:var(--ink-3); font-size:var(--t-sm)}

/* ── Tarjetas de envío en móvil ──────────────────────────────── */
.mob-cards{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s3)}
.mob-ship-card{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
.mob-card-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}
.mob-card-top .code{font-size:var(--t-sm); font-weight:500}
.mob-card-client{font-size:var(--t-sm); color:var(--ink)}
.mob-card-client .cc-none{color:var(--ink-3); font-style:italic}
.mob-card-route{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--ink-2); flex-wrap:wrap}
.mob-arrow{color:var(--accent)}
.mob-card-meta{display:flex; gap:var(--s3); font-size:var(--t-xs); color:var(--ink-3); flex-wrap:wrap}
.mob-card-actions{display:flex; gap:var(--s2); flex-wrap:wrap; padding-top:var(--s2); border-top:1px solid var(--line)}

/* ── Estados vacíos y de error ────────────────────────────────
   Distintos a propósito: "todavía no hay nada" no es lo mismo que
   "no pude traerlo". El diseño anterior los confundía. */
.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  padding:var(--s8) var(--s4); text-align:center; color:var(--ink-3);
}
.empty-state .ico{color:var(--ink-3); opacity:.7; margin-bottom:var(--s2)}
.empty-state h3{font-size:var(--t-md); color:var(--ink-2); font-weight:600}
.empty-state p{font-size:var(--t-sm); color:var(--ink-3); max-width:28rem}
.estado-error{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  padding:var(--s7) var(--s4); text-align:center;
}
.estado-error strong{font-family:var(--f-display); font-size:var(--t-md); color:var(--ink); font-weight:600}
.estado-error span{font-size:var(--t-sm); color:var(--ink-2); max-width:34rem}
.estado-error::before{
  content:""; width:38px; height:38px; border-radius:50%;
  background:var(--danger-dim); border:1px solid var(--danger-line);
}

/* ── Acordeón de preguntas ───────────────────────────────────
   Vivía en el <style> de la vidriera. Ahora lo usan también las
   páginas por origen, así que es parte del sistema. <details> nativo:
   abre y cierra sin una línea de JavaScript. */
.faq-lista{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s6);
           max-width:52rem}
.faq-item{background:var(--surface); border:1px solid var(--line);
          border-radius:var(--r); overflow:hidden}
.faq-item[open]{border-color:var(--line-2)}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s5); cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:var(--t-base); font-weight:500;
  min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; flex:none; font-family:var(--f-mono); font-size:var(--t-lg);
  color:var(--accent); line-height:1; transition:transform .2s;
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--accent-2)}
.faq-item summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.faq-item p{padding:0 var(--s5) var(--s5); color:var(--ink-2);
            font-size:var(--t-sm); line-height:1.65; margin:0}

/* ── Línea de tiempo del envío ────────────────────────────────
   La columna vertical es el recorrido; cada punto, un hecho con
   fecha. Lo cumplido va sólido, lo pendiente atenuado. */
.timeline{display:flex; flex-direction:column; padding-top:var(--s2)}
.t-step,.event-item{position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--s4); padding-bottom:var(--s5)}
.t-step:last-child,.event-item:last-child{padding-bottom:0}
.t-line,.event-line{
  position:absolute; left:6px; top:16px; bottom:-4px;
  width:1px; background:var(--line-2);
}
.t-step:last-child .t-line,.event-item:last-child .event-line{display:none}
.t-dot,.event-dot{
  width:13px; height:13px; border-radius:50%; margin-top:4px;
  border:2px solid var(--ground); background:var(--line-2);
  z-index:1; display:grid; place-content:center; font-size:8px; color:var(--ground);
}
.t-dot.done,.event-dot{background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim)}
.t-dot.active{background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.t-dot.inactive{background:var(--line-2)}
.t-event,.event-desc{font-size:var(--t-sm); font-weight:500; color:var(--ink); margin-bottom:.2rem}
.t-location,.event-loc{font-size:var(--t-xs); color:var(--ink-2)}
.t-date,.event-date{font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); margin-top:.15rem}
/* El icono baja a 14 y se alinea con la primera línea, no con el
   bloque: si la ubicación ocupa dos renglones el pin queda arriba. */
.t-location,.t-date,.event-loc,.event-date{display:flex; align-items:flex-start; gap:var(--s2)}
.t-location .ico,.t-date .ico,.event-loc .ico,.event-date .ico{margin-top:.1em; color:var(--ink-3)}

/* ── Tarjeta de resultado de rastreo ─────────────────────────── */
.result-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5); text-align:left;
}
.result-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); padding-bottom:var(--s4); margin-bottom:var(--s4);
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.result-id{font-size:var(--t-lg); color:var(--ink); font-weight:500}
.result-sub{font-size:var(--t-xs); color:var(--ink-3); margin-top:.15rem}
.result-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:var(--s4); margin-bottom:var(--s5);
}
.meta-label{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.25rem;
}
.meta-val{font-size:var(--t-sm); color:var(--ink)}
.result-ext{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s3) var(--s4); margin-bottom:var(--s5);
}
.ext-line,.ext{display:flex; gap:var(--s3); font-size:var(--t-sm); color:var(--ink-2); padding:.15rem 0}
.ext-line b{color:var(--ink-3); font-weight:600; min-width:5rem}
.ext-line span{font-family:var(--f-mono); color:var(--accent-2)}

/* ── Modales ──────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,5,7,.78);
  backdrop-filter:blur(3px); display:none;
  align-items:center; justify-content:center; padding:var(--s4); z-index:200;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--sombra);
  width:100%; max-width:34rem; max-height:88vh; overflow-y:auto;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5); border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--surface); z-index:1;
}
.modal-head h3{font-size:var(--t-md)}
.modal-body{padding:var(--s5)}
.modal-foot{
  display:flex; gap:var(--s3); justify-content:flex-end;
  padding:var(--s5); border-top:1px solid var(--line); flex-wrap:wrap;
}
.modal-close{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-2); width:36px; height:36px; cursor:pointer; font-size:var(--t-md);
  display:grid; place-content:center;
}
.modal-close:hover{color:var(--ink); border-color:var(--line-2)}
.section-divider{
  font-family:var(--f-ui); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  padding-top:var(--s5); margin-bottom:var(--s3);
  border-top:1px solid var(--line);
}

/* ── Aviso flotante ───────────────────────────────────────────── */
/* Esconderlo solo con translateY(120%) no alcanzaba: vacio el aviso mide 26px
   (nada mas que el padding), asi que 120% son 31px y queda a 24px del borde
   de abajo — sobresalian 19px como un cuadradito gris en todas las pantallas.
   Con opacity + visibility no depende de cuanto mida el texto. */
.toast{
  position:fixed; bottom:var(--s5); left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--surface-3); color:var(--ink); border:1px solid var(--line-2);
  border-radius:var(--r); padding:var(--s3) var(--s5); font-size:var(--t-sm);
  box-shadow:var(--sombra); z-index:300; max-width:90vw;
  display:flex; align-items:center; gap:var(--s3);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .28s ease, opacity .28s ease, visibility 0s linear .28s;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .28s ease, opacity .28s ease, visibility 0s;
}
/* El borde de 1px era la única diferencia entre "salió bien" y "falló":
   a ese grosor el color no se lee. El icono lo dice sin depender de él. */
.toast.ok{border-color:var(--ok-line)}      .toast.ok .ico{color:var(--ok)}
.toast.warn{border-color:var(--warn-line)}  .toast.warn .ico{color:var(--warn)}
.toast.err{border-color:var(--danger-line)} .toast.err .ico{color:var(--danger)}

/* Dato de contacto con su icono al lado, en el modal de notificación. */
.dato-contacto{display:inline-flex; align-items:center; gap:var(--s2); margin-right:var(--s4)}

/* ── Accesibilidad transversal ───────────────────────────────── */
@media (pointer:coarse){
  .btn-action,.btn-logout,.modal-close,
  a.nav-cta,.sidebar-nav a,button[aria-label],
  .nav-logo,.demo-codes code,.nav-links a,.mob-nav a,footer nav a,
  .hid-copy,.wh-copy,.btn-search,.cost-btn,.tr-close,.mob-sidebar-close{
    min-height:44px; min-width:44px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .action-btns,.mob-card-actions{gap:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
@media print{
  .noprint{display:none!important}
}

/* ── Tarjeta de envío del panel de cliente ───────────────────
   Es la unidad que más mira un cliente: código arriba a la izquierda
   —lo que compara contra el mail del proveedor— y estado a la derecha. */
.shipment-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4);
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); cursor:pointer; text-align:left;
  transition:border-color .16s, background .16s;
}
.shipment-card:hover{border-color:var(--line-2); background:var(--surface-2)}
.shipment-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.sc-code{font-family:var(--f-mono); font-size:var(--t-sm); color:var(--ink); margin-bottom:.35rem}
.sc-ext{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:.35rem}
.sc-ext span{font-size:var(--t-xs); color:var(--ink-3)}
.sc-ext b{color:var(--ink-2); font-weight:600}
.sc-route{font-size:var(--t-sm); color:var(--ink-2); margin-bottom:.2rem}
.sc-service{font-size:var(--t-xs); color:var(--ink-3)}
.sc-right{display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2); flex-shrink:0}
.sc-eta{font-size:var(--t-xs); color:var(--accent-2); white-space:nowrap}

/* ── Trackings reportados (panel admin) ──────────────────────── */
.rep-cid{font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-3); margin-top:.15rem}
.rep-ok{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:var(--t-xs); font-weight:600; color:var(--ok);
}

/* ── Inicial del cliente en la tabla de usuarios ─────────────── */
.user-avatar{
  display:inline-grid; place-content:center; width:28px; height:28px;
  border-radius:50%; background:var(--accent-dim); border:1px solid var(--accent-line);
  color:var(--accent-2); font-size:var(--t-xs); font-weight:600;
  margin-right:var(--s3); flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════════
   CASCARÓN DE PANEL
   Compartido por client-panel.html y admin-panel.html: misma gramática
   de navegación en los dos, para que moverse de uno a otro no confunda.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pantalla de acceso ─────────────────────────────────────── */
/* El script alterna estas pantallas con style.display inline; el CSS
   sólo fija el estado inicial. Sin esto arrancan las tres visibles. */
#auth-screen,#register-screen,#forgot-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--s5); background:var(--ground);
}
#register-screen,#forgot-screen{display:none}
#panel{display:none}
#auth-screen::before,#register-screen::before,#forgot-screen::before{
  content:""; position:fixed; top:-20%; left:50%; transform:translateX(-50%);
  width:44rem; height:34rem; border-radius:50%;
  background:radial-gradient(circle, rgba(255,129,0,.07), transparent 65%);
  pointer-events:none;
}
.auth-card{
  position:relative; width:100%; max-width:25rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s7) var(--s6); box-shadow:var(--sombra);
}
.auth-logo{text-align:center; margin-bottom:var(--s6)}
.auth-logo img{height:44px; width:auto; margin:0 auto}
.auth-title{font-size:var(--t-xl); margin-bottom:var(--s2); text-align:center}
.auth-sub{font-size:var(--t-sm); color:var(--ink-2); text-align:center; margin-bottom:var(--s6)}
.auth-error{
  display:none; background:var(--danger-dim); border:1px solid var(--danger-line);
  border-radius:var(--r-sm); padding:var(--s3) var(--s4);
  font-size:var(--t-sm); color:var(--ink); margin-bottom:var(--s4);
}
.auth-back,.reg-link{
  display:block; text-align:center; font-size:var(--t-sm);
  color:var(--ink-2); margin-top:var(--s4);
}
.auth-back:hover,.reg-link:hover{color:var(--accent-2)}
.reg-link a{font-weight:600; cursor:pointer}
/* Los dos paneles usan .btn-login para el botón principal de acceso. */
.btn-login{
  width:100%; margin-top:var(--s2);
  font-family:var(--f-ui); font-size:var(--t-sm); font-weight:600;
  background:var(--accent); color:var(--on-accent);
  border:1px solid var(--accent); border-radius:var(--r);
  padding:.75rem 1.3rem; min-height:48px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  transition:background .18s, border-color .18s;
}
.btn-login:hover:not(:disabled){background:var(--accent-2); border-color:var(--accent-2)}
.btn-login:disabled{opacity:.55; cursor:not-allowed}
.phone-row{display:grid; grid-template-columns:7.5rem 1fr; gap:var(--s3)}

/* ── Estructura del panel ───────────────────────────────────── */
.panel-main{display:grid; grid-template-columns:15rem 1fr; min-height:100vh}
.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  padding:var(--s5) 0; display:flex; flex-direction:column; gap:var(--s2);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar > .auth-logo,.sidebar-logo{padding:0 var(--s5) var(--s5); margin:0}
.sidebar-logo img{height:32px}
.sidebar-section{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
  padding:var(--s4) var(--s5) var(--s2);
}
.sidebar-nav{display:flex; flex-direction:column}
.sidebar-link{
  display:flex; align-items:center; gap:var(--s3);
  padding:.7rem var(--s5); font-size:var(--t-sm); font-weight:500;
  color:var(--ink-2); border-left:2px solid transparent; min-height:44px;
  transition:color .15s, background .15s, border-color .15s;
}
.sidebar-link:hover{color:var(--ink); background:var(--surface-2)}
.sidebar-link.active{
  color:var(--accent-2); background:var(--accent-dim); border-left-color:var(--accent);
}
.sidebar-icon{width:18px; height:18px; flex-shrink:0; display:grid; place-content:center; font-size:1rem}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s6); border-bottom:1px solid var(--line);
  background:var(--ground); position:sticky; top:0; z-index:50;
}
.topbar-left{display:flex; align-items:center; gap:var(--s3)}
.topbar-center{display:flex; align-items:center; justify-content:center; flex:1}
.topbar-center img{height:30px}
.topbar-right{display:flex; align-items:center; gap:var(--s3)}
.user-chip{
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-sm); color:var(--ink-2);
}

/* min-width:0 es obligatorio: como item de grilla, su min-width:auto por
   defecto le impide achicarse por debajo de su contenido, y entonces la
   tabla ancha empujaba la PAGINA entera a scrollear en horizontal. */
.panel-content{padding:var(--s6); max-width:78rem; min-width:0}
.page{display:none}
.page.active{display:block; animation:aparecer .22s ease}
@keyframes aparecer{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.page-title{font-size:var(--t-xl); margin-bottom:var(--s2)}
.page-sub{font-size:var(--t-sm); color:var(--ink-2); margin-bottom:var(--s6)}

/* ── Tarjetas de indicador ──
   Números grandes sólo donde la cifra es el dato. La que exige acción
   (listo para retirar) se resalta únicamente cuando hay algo. */
/* Son siempre 4 tarjetas. Con auto-fit quedaban 1 sola columna en el
   celular (cuatro pantallas de scroll para cuatro numeros) y 3+1 huerfana
   entre 560 y 751px. Con 2 o 4 fijas nunca queda una sola en su fila. */
.stats-row{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s4); margin-bottom:var(--s6);
}
@media (min-width:52rem){ .stats-row{grid-template-columns:repeat(4,1fr)} }
.stat-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s4) var(--s5);
}
.stat-val{
  font-family:var(--f-display); font-size:var(--t-xl); font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;
}
.stat-lbl{font-size:var(--t-xs); color:var(--ink-2); margin-top:.3rem}
.stat-ready.tiene{
  border-color:var(--violet-line); background:var(--violet-dim);
}
.stat-ready.tiene .stat-val{color:var(--violet)}

/* ── Encabezado de tabla con buscador ── */
.table-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap;
}
.table-search,.ms-search{max-width:24rem; flex:1; min-width:14rem}
.table-header span{font-size:var(--t-xs); color:var(--ink-2); white-space:nowrap}

/* ── Navegación móvil del panel ─────────────────────────────── */
.mob-menu-btn{
  display:none; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); width:44px; height:44px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.mob-menu-btn span{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px}
.mob-sidebar-overlay{
  position:fixed; inset:0; background:rgba(5,5,7,.7); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:150;
}
.mob-sidebar-overlay.is-open{opacity:1; pointer-events:auto}
.mob-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:min(82vw,17rem);
  background:var(--surface); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .28s ease; z-index:160;
  display:flex; flex-direction:column; overflow-y:auto;
}
/* "is-open", no "open": es la clase que agregan los tres paneles. Con
   "open" el boton ejecutaba la funcion pero el menu no se movia nunca. */
.mob-sidebar.is-open{transform:translateX(0)}
/* Las tres rayas se cruzan en X, igual que en la home. */
.mob-menu-btn span{transition:transform .25s, opacity .2s}
.mob-menu-btn.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.mob-menu-btn.is-open span:nth-child(2){opacity:0}
.mob-menu-btn.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mob-sidebar-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);
}
.mob-sidebar-top img{height:28px}
.mob-sidebar-top span{font-family:var(--f-display); font-weight:700; color:var(--accent)}
.mob-sidebar-close{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink-2); width:44px; height:44px; cursor:pointer;
}
.mob-sidebar-links{display:flex; flex-direction:column; padding:var(--s3) 0}

@media (max-width:920px){
  .panel-main{grid-template-columns:1fr}
  .sidebar{display:none}
  .mob-menu-btn{display:flex}
  .panel-content{padding:var(--s5) var(--s4)}
  .topbar{padding:var(--s3) var(--s4)}
}

/* ═══ Páginas por origen ═══════════════════════════════════════
   China, Estados Unidos y Europa comparten estructura: encabezado
   con vuelta al inicio, hero, tarjetas de a dos, pasos numerados,
   aviso y cierre. ══════════════════════════════════════════════ */
.pg-top{display:flex; align-items:center; justify-content:space-between;
        gap:var(--s4); padding:var(--s5) 0; margin-bottom:var(--s6)}
.pg-top img{height:34px; width:auto}
.pg-top a.volver{font-size:var(--t-sm); color:var(--ink-2)}
.pg-top a.volver:hover{color:var(--ink)}

.pg-hero{max-width:44rem; padding-bottom:var(--s8)}
.pg-hero h1{font-size:var(--t-3xl); margin:var(--s3) 0 var(--s4)}
.pg-lead{color:var(--ink-2); font-size:var(--t-md); line-height:1.6; margin-bottom:var(--s6)}
.pg-btns{display:flex; gap:var(--s3); flex-wrap:wrap}

.pg-cards{display:grid; grid-template-columns:1fr; gap:var(--s4);
          margin-bottom:var(--s8)}
@media (min-width:52rem){ .pg-cards{grid-template-columns:1fr 1fr} }
.pg-card{background:var(--surface); border:1px solid var(--line);
         border-radius:var(--r-lg); padding:var(--s5)}
.pg-card h3{font-size:var(--t-lg); margin-bottom:var(--s3)}
.pg-card p{color:var(--ink-2); font-size:var(--t-sm); line-height:1.65}
/* La tarjeta del argumento principal se distingue por el borde, no por un
   tamaño distinto: si fuera más grande rompería la grilla de a dos. */
.pg-card.destacada{border-color:var(--accent-line); background:var(--accent-dim)}

.pg-pasos{list-style:none; counter-reset:paso; display:flex;
          flex-direction:column; gap:var(--s4); margin-bottom:var(--s8)}
.pg-pasos li{counter-increment:paso; display:flex; gap:var(--s4);
             align-items:flex-start; color:var(--ink-2); font-size:var(--t-sm);
             line-height:1.65}
.pg-pasos li::before{
  content:counter(paso); flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--accent-dim); color:var(--accent-2); border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:600;
}
.pg-pasos b{color:var(--ink)}

.pg-aviso{background:var(--surface-2); border:1px solid var(--line);
          border-radius:var(--r); padding:var(--s5); margin-bottom:var(--s8);
          color:var(--ink-2); font-size:var(--t-sm); line-height:1.65}
.pg-aviso b{color:var(--ink)}

.pg-cierre{text-align:center; padding:var(--s7) var(--s5) var(--s8);
           border-top:1px solid var(--line)}
.pg-cierre h2{font-size:var(--t-2xl); margin-bottom:var(--s3)}
.pg-cierre p{color:var(--ink-2); font-size:var(--t-sm); margin-bottom:var(--s5)}
.pg-cierre .pg-btns{justify-content:center}

/* ── Pie de las paginas publicas ──
   Estaba solo en el <style> de index.html. Al sumarlo a las tres paginas de
   origen hacia falta en los cuatro lados, asi que vive aca.
   Lo cargan solo las paginas que tienen <footer>: los paneles no tienen.
   Terms y Privacy no cargan esta hoja, tienen su propio tema claro. */
footer{
  border-top:1px solid var(--line); padding:var(--s5) var(--s5) var(--s8);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--s3); font-size:var(--t-xs); color:var(--ink-3); margin-top:var(--s8);
}
footer img{height:26px; width:auto; opacity:.75}
footer nav{display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center}
footer nav a{color:var(--ink-3)}
footer nav a:hover{color:var(--ink-2)}
.foot-dir{color:var(--ink-3); font-size:var(--t-xs)}

/* ── Saltar al contenido ──
   Oculto hasta que recibe el foco con Tab. Quien navega con teclado o lector
   de pantalla tenia que recorrer la barra entera en cada pagina antes de
   llegar al texto. No usa display:none ni visibility:hidden porque entonces
   tampoco seria enfocable. */
.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:200;
  background:var(--accent); color:var(--on-accent);
  padding:.7rem 1.1rem; border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
}
/* literal, no var(): es lo primero que se pinta y no depende de
   que los tokens ya esten resueltos */
.skip-link:focus{top:1rem}
main{display:block}