/* Concepto: la ruta del Caribe y la guía de carga.
   Arriba, una banda de mar profundo con la carta náutica Florida → Venezuela
   (la ruta marítima, la aérea y los puertos). Abajo, el resultado se lee como la
   etiqueta pegada a la caja: cabecera del color de la marca, perforación, y el
   viaje en seis paradas con su icono. El color de marca solo rellena (cabecera
   de la etiqueta, etapa actual, botón principal, puertos y caja del mapa). */
:root {
  --fondo: #eef2f4;
  --superficie: #ffffff;
  --superficie-2: #f3f6f8;
  --tinta: #0c1f2c;
  --tinta-2: #3d5464;
  --tinta-3: #627687;
  --linea: #d5dee4;
  --linea-fuerte: #a1b2bd;
  --mar: #0b3142;
  --mar-2: #0e3a4e;
  --tierra: #1a5067;
  --tierra-borde: #2e6c86;
  --sobre-mar: #ecf5f8;
  --sobre-mar-2: #a9c5d0;
  --marca: #ffc21a;
  --sobre-marca: #0f1a33;
  --ok: #17734a;
  --ok-fondo: #e2f3e9;
  --error: #b3261e;
  --error-fondo: #fde7e5;
  --velo: rgb(6 20 30 / 0.55);
  --sombra: rgb(12 31 44 / 0.16);
  --placa-logo: transparent;
  --placa-logo-mar: #ffffff;
  --e1: #7c8aa1;
  --e2: #2f7de1;
  --e3: #d98e0b;
  --e4: #8a63d2;
  --e5: #e2622a;
  --e6: #1f9d63;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radio: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #071219;
    --superficie: #0d1d27;
    --superficie-2: #122633;
    --tinta: #e5eef2;
    --tinta-2: #a7bbc6;
    --tinta-3: #7d929e;
    --linea: #1d3441;
    --linea-fuerte: #35515f;
    --mar: #0a2533;
    --mar-2: #0c2b3b;
    --tierra: #15404f;
    --tierra-borde: #25596d;
    --sobre-mar: #e6f0f4;
    --sobre-mar-2: #96b3bf;
    --ok: #62d29b;
    --ok-fondo: #102c1f;
    --error: #ff9188;
    --error-fondo: #3a1614;
    --velo: rgb(0 0 0 / 0.62);
    --sombra: rgb(0 0 0 / 0.5);
    --placa-logo: #ffffff;
    --placa-logo-mar: #ffffff;
    --e1: #95a3b8;
    --e2: #5c9df0;
    --e3: #f0b13a;
    --e4: #a688e6;
    --e5: #f2844f;
    --e6: #3fbf83;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--texto);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.icono { display: block; width: 22px; height: 22px; flex: 0 0 auto; }

.ancho {
  max-width: 1080px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mono { font-family: var(--mono); }
.rotulo {
  display: block;
  font: 600 0.7rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.nota { color: var(--tinta-2); font-size: 0.92rem; }

/* ---------- botones y campos */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font: 600 0.95rem var(--texto);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.principal { background: var(--marca); color: var(--sobre-marca); }
.btn.principal:hover { background: color-mix(in srgb, var(--marca) 88%, var(--tinta)); }
.btn.grande {
  min-height: 56px;
  padding: 0 30px;
  border-width: 2px;
  font: 700 1.3rem var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn.peligro { background: var(--error); border-color: var(--error); color: var(--superficie); }
.btn-texto {
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font: 500 0.92rem var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-texto:hover { color: var(--tinta); }
.fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

input[type="text"], input[type="search"], input[type="tel"], input[type="date"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font: 400 1rem var(--texto);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="date"]:hover, select:hover, textarea:hover { border-color: var(--tinta-3); }
textarea { font: 500 0.86rem/1.55 var(--mono); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
.campo { display: grid; gap: 5px; font-size: 0.9rem; font-weight: 600; min-width: 0; }
.campo small { font-weight: 400; color: var(--tinta-2); }
.formulario { display: grid; gap: 14px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.casilla { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; }
.casilla input { margin-top: 4px; }

.cabecera { background: var(--mar); color: var(--sobre-mar); }
.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-block: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--sobre-mar) 12%, transparent);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}
.logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; border-radius: 6px; }
.logo.subido { background: var(--placa-logo); }
.cabecera .logo { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sobre-mar) 30%, transparent); }
.cabecera .logo.subido { background: var(--placa-logo-mar); padding: 3px; }
.marca-nombre {
  font: 700 1.4rem/1.1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.marca.solo-logo .marca-nombre { display: none; }
.nav { display: flex; gap: 4px; }
.nav a {
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--sobre-mar-2);
}
.nav a:hover { color: var(--sobre-mar); }
.nav a[aria-current="page"] { background: var(--sobre-mar); color: var(--mar); }
.cabecera :focus-visible, .banda-heroe :focus-visible, .pie :focus-visible { outline-color: var(--sobre-mar); }

/* ---------- héroe: buscador y carta náutica */
.banda-heroe { background: var(--mar); color: var(--sobre-mar); }
.heroe-rejilla {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-block: clamp(26px, 6vw, 56px) clamp(48px, 8vw, 84px);
}
@media (min-width: 880px) {
  .heroe-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; }
}
.heroe { display: grid; gap: 16px; min-width: 0; }
.ruta {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 0.72rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-mar-2);
}
.ruta span { white-space: nowrap; }
.ruta i { position: relative; flex: 0 1 84px; min-width: 36px; border-top: 2px dashed color-mix(in srgb, var(--sobre-mar) 55%, transparent); }
.ruta i::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--marca);
  border: 2px solid var(--sobre-mar);
  border-radius: 2px;
}
.heroe h1 {
  font: 700 clamp(2.8rem, 11vw, 4.8rem)/0.92 var(--display);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.heroe > p { max-width: 46ch; color: var(--sobre-mar-2); font-size: 1.05rem; }
.buscar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 18px 40px -22px var(--sombra);
}
.buscar input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 56px;
  padding: 0 14px;
  border: 1.5px solid var(--linea-fuerte);
  font: 600 1.15rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.buscar input:focus { border-color: var(--tinta); }
.buscar input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
.buscar .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .buscar .btn { flex-basis: 100%; } }
.buscar :focus-visible { outline-color: var(--tinta); }

.mapa {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--sobre-mar) 16%, transparent);
  border-radius: 10px;
  background: var(--mar-2);
  overflow: hidden;
}
.mapa svg { display: block; width: 100%; height: auto; }
.m-reticula { fill: none; stroke: color-mix(in srgb, var(--sobre-mar) 9%, transparent); stroke-width: 1; }
.m-grados { font: 500 10px var(--mono); fill: color-mix(in srgb, var(--sobre-mar) 40%, transparent); }
.m-tierra { fill: var(--tierra); stroke: var(--tierra-borde); stroke-width: 1.2; stroke-linejoin: round; }
.m-lago { fill: var(--mar-2); stroke: var(--tierra-borde); stroke-width: 1; }
.m-agua { font: 500 italic 13px var(--texto); letter-spacing: 0.08em; fill: var(--sobre-mar-2); }
.m-pais { font: 700 14px var(--display); letter-spacing: 0.22em; text-transform: uppercase; fill: color-mix(in srgb, var(--sobre-mar) 62%, transparent); }
.m-lugar { font: 600 12px var(--mono); fill: var(--sobre-mar); }
.m-ruta-mar { fill: none; stroke: var(--sobre-mar); stroke-width: 2.6; stroke-dasharray: 8 6; stroke-linecap: round; }
.m-ruta-aire { fill: none; stroke: var(--sobre-mar-2); stroke-width: 1.6; stroke-dasharray: 0.5 6; stroke-linecap: round; }
.m-origen { fill: var(--sobre-mar); stroke: var(--mar); stroke-width: 2.5; }
.m-anillo { fill: none; stroke: var(--sobre-mar); stroke-width: 1.2; }
.m-puerto { fill: var(--marca); stroke: var(--sobre-mar); stroke-width: 2.2; }
.m-caja path { stroke: var(--mar); stroke-width: 1.4; stroke-linejoin: round; }
.m-caja .tapa { fill: color-mix(in srgb, var(--marca) 55%, var(--sobre-mar)); }
.m-caja .frente { fill: var(--marca); }
.m-caja .lado { fill: color-mix(in srgb, var(--marca) 70%, var(--mar)); }
.m-caja .cinta-caja { fill: none; stroke: var(--sobre-marca); stroke-width: 1.4; }
.mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--sobre-mar) 14%, transparent);
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sobre-mar-2);
}
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.mapa-leyenda i { display: inline-block; width: 24px; border-top: 2.5px dashed var(--sobre-mar); }
.mapa-leyenda i.aire { border-top: 2px dotted var(--sobre-mar-2); }
.mapa-leyenda i.puerto { width: 10px; height: 10px; border: 2px solid var(--sobre-mar); border-radius: 50%; background: var(--marca); }
/* En el teléfono, con un resultado en pantalla, la etiqueta manda: el mapa se aparta. */
@media (max-width: 879px) {
  #vista-rastreo:has(#resultado:not(:empty)) .mapa { display: none; }
}

/* ---------- la guía (resultado): etiqueta de carga */
#resultado:not(:empty) { position: relative; margin-top: -36px; margin-bottom: 48px; }
.guia {
  background: var(--superficie);
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  box-shadow: 0 24px 48px -30px var(--sombra);
  overflow: hidden;
}
.guia > * { padding: 18px clamp(16px, 4vw, 30px); }
.guia > * + * { border-top: 1px solid var(--linea); }
.guia-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  background: var(--marca);
  color: var(--sobre-marca);
}
.guia-cabeza .rotulo { color: inherit; }
.guia-numero {
  display: block;
  font: 600 clamp(1.5rem, 6.5vw, 2.3rem)/1.15 var(--mono);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.barras { flex: 0 0 auto; height: 44px; max-width: 100%; color: inherit; }
.guia > .guia-ruta { border-top: 0; }
.guia-ruta {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(56px, 1fr) minmax(0, auto);
  align-items: end;
  gap: 14px;
}
.guia-ruta strong {
  display: block;
  font: 700 clamp(1.15rem, 4.6vw, 1.6rem)/1.1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.ruta-destino { text-align: right; }
@media (max-width: 559px) {
  .guia-ruta { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 10px; }
}
.flecha {
  position: relative;
  height: 2px;
  margin-bottom: 0.65em;
  background: repeating-linear-gradient(90deg, var(--tinta) 0 6px, transparent 6px 11px);
}
.flecha::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  border-left: 9px solid var(--tinta);
  border-block: 5px solid transparent;
}
.flecha-tipo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  padding: 0 6px;
  background: var(--superficie);
  color: var(--tinta);
}
.flecha-tipo .icono { width: 24px; height: 24px; }
.flecha-tipo > span {
  position: absolute;
  top: calc(100% + 2px);
  font: 600 0.64rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta-2);
}
/* Perforación: la línea por donde se despega la etiqueta. */
.guia > .guia-estado { position: relative; border-top: 2px dashed var(--linea-fuerte); }
.guia-estado::before, .guia-estado::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  background: var(--fondo);
}
.guia-estado::before { left: -11px; }
.guia-estado::after { right: -11px; }
.guia-estado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px 18px;
  padding-block: 24px 22px;
}
.estado-icono {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: var(--marca);
  color: var(--sobre-marca);
}
.estado-icono .icono { width: 30px; height: 30px; }
.estado-texto { display: grid; gap: 6px; min-width: 0; }
.estado-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.guia-estado h2 {
  font: 700 clamp(1.9rem, 7.6vw, 2.9rem)/0.98 var(--display);
  text-transform: uppercase;
}
.estado-texto > p { color: var(--tinta-2); }
.etapa-n {
  padding: 2px 9px;
  border: 1.5px solid var(--tinta);
  border-radius: 999px;
  font: 600 0.74rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.estado-texto > p.actualizado { font-size: 0.88rem; color: var(--tinta-2); }
.sello {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 12px;
  border: 2.5px solid var(--ok);
  border-radius: 4px;
  color: var(--ok);
  font: 700 1.25rem/1.2 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
@media (min-width: 640px) {
  .guia-estado { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sello { grid-column: auto; align-self: center; margin-right: 6px; font-size: 1.5rem; transform: rotate(-8deg); }
}

/* El viaje: seis paradas */
.guia-viaje { padding-block: 22px 24px; background: var(--superficie-2); }
.pasos { list-style: none; padding: 0; display: grid; }
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: 18px;
}
.paso:last-child { padding-bottom: 0; }
.paso::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 42px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--linea-fuerte) 0 5px, transparent 5px 10px);
}
.paso:last-child::before { display: none; }
.paso.hecho::before { left: 19.5px; width: 3px; background: var(--tinta); }
.punto {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta-3);
}
.paso.hecho .punto { border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--superficie); }
.paso.actual .punto {
  border: 2px solid var(--tinta);
  background: var(--marca);
  color: var(--sobre-marca);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--marca) 28%, transparent);
}
.palomita {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid var(--superficie-2);
  border-radius: 50%;
  background: var(--ok);
  color: var(--superficie);
}
.palomita .icono { width: 11px; height: 11px; stroke-width: 3.2; }
.paso-texto { min-width: 0; padding-top: 2px; }
.paso-nombre { display: block; font-weight: 600; line-height: 1.25; }
.paso.pendiente .paso-nombre { font-weight: 500; color: var(--tinta-3); }
.paso-fecha { display: block; font: 500 0.76rem/1.6 var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.aqui {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--tinta);
  color: var(--superficie);
  font: 600 0.66rem/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (min-width: 760px) {
  .pasos { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
  .paso { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 0 12px 0 0; }
  .paso::before {
    left: 50px;
    right: 8px;
    top: 20px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 5px, transparent 5px 10px);
  }
  .paso.hecho::before { left: 50px; top: 19.5px; width: auto; height: 3px; background: var(--tinta); }
}

.guia-datos { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.guia-datos dd { font-weight: 600; font-size: 1.05rem; }
.historial { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 12px; }
.historial li { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 2px 14px; }
.historial time { font: 500 0.8rem/1.9 var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.historial strong { display: block; font-weight: 600; }
.historial-detalle { display: block; font-size: 0.92rem; color: var(--tinta-2); }
/* En la guía pública el historial es una bitácora con su línea */
.historial.bitacora { gap: 0; }
.historial.bitacora li > div { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--linea); min-width: 0; }
.historial.bitacora li:last-child > div { border-left-color: transparent; padding-bottom: 0; }
.historial.bitacora li > div::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tinta-3);
  border-radius: 50%;
  background: var(--superficie);
}
.historial.bitacora li:first-child > div::before { border-color: var(--tinta); background: var(--tinta); }
@media (max-width: 480px) {
  .historial li { grid-template-columns: minmax(0, 1fr); }
  .historial.bitacora time { padding-left: 22px; border-left: 2px solid var(--linea); line-height: 1.6; }
}
.contacto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.guia > .contacto { background: var(--superficie-2); }

.no-encontrada {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 18px;
  padding: 22px clamp(16px, 4vw, 30px);
  background: var(--superficie);
  border: 2px dashed var(--tinta-3);
  border-radius: 4px;
  box-shadow: 0 24px 48px -30px var(--sombra);
}
.ne-icono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1.5px dashed var(--tinta-3);
  border-radius: 8px;
  color: var(--tinta-2);
}
.ne-icono .icono { width: 28px; height: 28px; }
.ne-texto { display: grid; gap: 10px; min-width: 0; }
.no-encontrada h2 { font: 700 1.8rem/1.05 var(--display); text-transform: uppercase; }
.no-encontrada p { max-width: 60ch; }
.no-encontrada .contacto { grid-column: 1 / -1; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea); }

/* ---------- etapas del viaje */
.etapas { padding-block: 44px 60px; background: var(--superficie); border-top: 1px solid var(--linea); }
.etapas h2, .panel-cabeza h1, .bloque h2 {
  font: 700 1.6rem/1.1 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.etapas h2 { font-size: clamp(1.9rem, 6vw, 2.5rem); }
.etapas ol {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  display: grid;
}
.etapas li {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 2px;
  padding-bottom: 24px;
}
.etapas li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 54px;
  bottom: 4px;
  border-left: 2px dashed var(--linea-fuerte);
}
.etapas li:last-child { padding-bottom: 0; }
.etapas li:last-child::before { display: none; }
.etapa-icono {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--tinta);
}
.etapas li:last-child .etapa-icono { background: var(--marca); color: var(--sobre-marca); border-width: 2px; }
.etapa-icono .icono { width: 26px; height: 26px; }
.etapas li > span:not(.etapa-icono) { font: 600 0.72rem/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); }
.etapas li strong { font: 700 1.3rem/1.15 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.etapas li p { font-size: 0.95rem; color: var(--tinta-2); }
@media (min-width: 760px) {
  .etapas ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
  .etapas li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-bottom: 0; }
  .etapa-icono { grid-row: auto; margin-bottom: 10px; }
  .etapas li::before { left: 62px; right: -16px; top: 24px; bottom: auto; border-left: 0; border-top: 2px dashed var(--linea-fuerte); }
  .etapas li:nth-child(3n)::before { display: none; }
}

/* ---------- panel */
.vista-panel-ancho { padding-block: 8px 56px; }
.panel-cabeza { display: grid; gap: 4px; padding-block: 22px 16px; }
.panel-cabeza h1 { font-size: 2.2rem; }
.pestanas { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--linea-fuerte); margin-bottom: 18px; }
.pestanas button {
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: 600 0.98rem var(--texto);
  color: var(--tinta-2);
  white-space: nowrap;
  cursor: pointer;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.seccion-panel { display: grid; gap: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  font: 500 0.88rem var(--texto);
  cursor: pointer;
}
.chip:hover { border-color: var(--tinta-3); }
.chip b { font: 600 0.8rem var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.chip[aria-pressed="true"] b { color: inherit; }
.punto-e, .insignia::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--tinta-3));
}
.e1 { --c: var(--e1); } .e2 { --c: var(--e2); } .e3 { --c: var(--e3); }
.e4 { --c: var(--e4); } .e5 { --c: var(--e5); } .e6 { --c: var(--e6); }
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--tinta-3)) 15%, var(--superficie));
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.herramientas { display: flex; flex-wrap: wrap; gap: 10px; }
.herramientas input { flex: 1 1 240px; min-width: 0; }

.tabla-caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font: inherit; font-size: 0.93rem; }
.tabla th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
  text-align: left;
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  white-space: nowrap;
}
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover, .tabla tr.marcada { background: var(--superficie-2); }
.tabla tr.marcada td:first-child { box-shadow: inset 3px 0 0 var(--tinta); }
.tabla input[type="checkbox"], .casilla input { width: 18px; height: 18px; accent-color: var(--tinta); }
.c-check { width: 42px; }
.c-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.enlace-guia {
  padding: 4px 0;
  border: 0;
  background: none;
  font: 600 0.92rem var(--mono);
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.enlace-guia:hover { text-decoration-color: currentColor; }
.vacio { padding: 28px 16px; text-align: center; color: var(--tinta-2); }
@media (max-width: 720px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tr { position: relative; padding: 12px 12px 12px 46px; border-bottom: 1px solid var(--linea); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td { padding: 1px 0; border: 0; }
  .tabla tr.marcada td:first-child { box-shadow: none; }
  .tabla tr.marcada { box-shadow: inset 3px 0 0 var(--tinta); }
  .tabla td.c-check { position: absolute; left: 14px; top: 16px; width: auto; }
  .tabla td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-size: 0.82rem; color: var(--tinta-3); }
}

.masivo {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--mar);
  color: var(--sobre-mar);
  box-shadow: 0 16px 36px -18px var(--sombra);
}
.masivo strong { flex: 1 1 100%; font-size: 0.92rem; }
.masivo select { flex: 1 1 200px; width: auto; }
.masivo input { flex: 2 1 200px; width: auto; }
.masivo .btn { border-color: var(--sobre-mar); }
.masivo .btn-texto { color: var(--sobre-mar); }
.masivo :focus-visible { outline-color: var(--sobre-mar); }

.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.bloque {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.bloque h2 { font-size: 1.35rem; }
.bloque h2:not(:first-child) { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--linea); }
.columnas-csv { display: grid; gap: 0; font-size: 0.92rem; }
.columnas-csv > div { padding-block: 9px; border-top: 1px solid var(--linea); }
.columnas-csv > div:first-child { border-top: 0; padding-top: 0; }
.columnas-csv dt { font: 600 0.84rem var(--mono); }
.columnas-csv dd { color: var(--tinta-2); }
.caja-error {
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error);
  font-weight: 500;
  font-size: 0.93rem;
}
.revision-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.revision-cabeza strong { font-size: 1.05rem; }
.resultado-fila { font-weight: 600; white-space: nowrap; }
.resultado-fila.ok { color: var(--ok); }
.resultado-fila.error { color: var(--error); }
.resultado-fila.neutro { color: var(--tinta-3); }
.fila-color { display: flex; align-items: center; gap: 12px; }
.fila-color input[type="color"] {
  width: 56px;
  height: 42px;
  padding: 3px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
}
.fila-color code { font: 500 0.9rem var(--mono); text-transform: uppercase; }
.logo-muestra {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 16px;
  border: 1.5px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie-2);
}
.logo-muestra img { max-height: 76px; max-width: 100%; border-radius: 6px; }
.logo-muestra img.subido { background: var(--placa-logo); }

/* ---------- diálogos y avisos */
.dialogo {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  box-shadow: 0 30px 70px -30px var(--sombra);
}
.dialogo::backdrop { background: var(--velo); }
.dialogo.chico { width: min(420px, calc(100vw - 24px)); padding: 20px; }
.dialogo.chico p { margin-bottom: 16px; }
.dialogo.chico .fila-botones { justify-content: flex-end; }
.dlg-cabeza {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
}
.dlg-cabeza h2 { font: 700 1.5rem/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.dlg-cerrar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.dlg-cerrar:hover { border-color: var(--tinta); }
.dlg-cuerpo { display: grid; gap: 22px; padding: 18px; }
.dlg-cuerpo h3 { font: 700 1.2rem/1.1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.dlg-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dlg-seccion { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linea); }
.historial.admin li { grid-template-columns: 7.4rem minmax(0, 1fr) auto; align-items: start; }
.historial.admin .btn-texto { min-height: 28px; font-size: 0.84rem; }
@media (max-width: 480px) {
  .historial.admin li { grid-template-columns: minmax(0, 1fr) auto; }
  .historial.admin time { grid-column: 1 / -1; }
}
details > summary { cursor: pointer; font-weight: 600; }
details[open] > summary { margin-bottom: 14px; }

.avisos {
  position: fixed;
  inset: auto 0 calc(16px + env(safe-area-inset-bottom, 0px)) 0;
  width: fit-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.aviso {
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--superficie);
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 12px 30px -14px var(--sombra);
}
.aviso.error { background: var(--error); }

.pie { background: var(--mar); color: var(--sobre-mar-2); font-size: 0.86rem; }
.pie .ancho { padding-block: 22px calc(30px + env(safe-area-inset-bottom, 0px)); }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.pie a { color: var(--sobre-mar-2); text-underline-offset: 3px; }
.pie .js-lema::before { content: " · "; }
.pie a:hover { color: var(--sobre-mar); }

/* ---------- añadidos de la versión publicada */
.no-encontrada .btn { justify-self: start; }
#resultado[aria-busy="true"] { opacity: 0.6; }

/* Cabecera del panel: quién entró y sus acciones */
.sesion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sesion-nombre { padding-right: 6px; font-size: 0.9rem; color: var(--sobre-mar-2); overflow-wrap: anywhere; }
.sesion-nombre strong { color: var(--sobre-mar); font-weight: 600; }
.sesion a, .sesion button {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--sobre-mar) 30%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--sobre-mar);
  font: 600 0.9rem var(--texto);
  text-decoration: none;
  cursor: pointer;
}
.sesion a:hover, .sesion button:hover { border-color: var(--sobre-mar); }
.sesion button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Entrada al panel y cambio de clave */
.acceso { display: grid; place-items: start center; padding-block: clamp(28px, 8vw, 72px) 64px; }
.acceso .bloque { width: min(440px, 100%); padding: clamp(20px, 5vw, 28px); box-shadow: 0 24px 48px -30px var(--sombra); }
.acceso h1 { font: 700 2rem/1.05 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.acceso .btn.principal { width: 100%; }
.ayuda-clave { padding: 12px 14px; border-radius: var(--radio); background: var(--superficie-2); font-size: 0.93rem; color: var(--tinta-2); }
.caja-aviso { padding: 12px 14px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie-2); font-size: 0.93rem; }

/* Lista de envíos */
.tabla-caja[aria-busy="true"] .tabla { opacity: 0.55; }
.vacio .fila-botones { justify-content: center; margin-top: 12px; }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.paginacion span { font-size: 0.92rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  #tabla-usuarios tr, #tabla-revision tr { padding-left: 12px; }
}
.historial-autor { display: block; font: 500 0.76rem/1.6 var(--mono); color: var(--tinta-3); }
.peligro-zona { display: grid; gap: 10px; }

/* Usuarios */
.usuario-estado { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--ok-fondo);
  color: var(--ok);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta.apagada { background: var(--superficie-2); color: var(--tinta-3); }
.etiqueta.pendiente { background: color-mix(in srgb, var(--e3) 18%, var(--superficie)); color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 0 12px; }
.acciones .btn-texto { min-height: 32px; font-size: 0.88rem; }
.clave-temporal {
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border: 2px dashed var(--tinta);
  border-radius: var(--radio);
  background: var(--superficie-2);
  color: var(--tinta);
  font: 600 1.5rem var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Página 404 */
.pagina-404 { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.pagina-404 .bloque { width: min(440px, 100%); justify-items: start; }
.pagina-404 h1 { font: 700 2.4rem/1 var(--display); text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  /* El único momento animado: al abrir una guía, la ruta se traza hasta la etapa actual. */
  .paso.hecho::before { animation: trazo 0.4s ease-out both; animation-delay: calc(var(--k, 0) * 110ms + 120ms); }
  .paso.actual .punto { animation: llega 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--k, 0) * 110ms + 160ms); }
  @keyframes trazo { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes llega { from { transform: scale(0.7); box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 0%, transparent); } }
}