/* ════════════════════════════════════════════════════════════════════
   ALCO · Logística y Entregas
   Estructura tipo Apple Store: tipografía grande y apretada, mucho aire,
   secciones que alternan blanco y gris muy claro, tarjetas sin borde.
   Los colores siguen siendo los del logotipo real de ALCO.
   ════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* marca ALCO */
  --i50:#f2f3fb; --i100:#e3e5f6; --i200:#c8cbec; --i400:#7377c6;
  --i500:#5054ae; --i600:#40429a; --i700:#363880; --i800:#2c2e66; --i900:#22244d;
  --verde:#0f8f48; --verde-pura:#1bab5b;
  --cian-pura:#2aade1; --magenta:#c4147a; --magenta-pura:#ec1e8f;
  /* los cuatro colores del logo, para usarlos en todo el sitio */
  --logo-indigo:#40429a; --logo-verde:#1bab5b; --logo-cian:#2aade1; --logo-magenta:#ec1e8f;
  --fondo-indigo:#2c2e66; --fondo-noche:#22244d; --fondo-claro:#f2f3fb;

  /* neutros al estilo de la tienda: casi blanco y gris muy claro */
  --blanco:#fff;
  --gris:#f5f5f7;
  --gris-2:#e8e8ed;
  --tinta:#1d1d1f;
  --tinta-2:#6e6e73;
  --tinta-3:#86868b;
  --linea:rgba(0,0,0,.08);

  --acento: var(--i600);
  --ok: var(--verde); --error: var(--magenta);
  --r-card:20px; --r-xl:28px;
  --barra-h:48px;
  --ancho:1020px;
  --ancho-ancho:1240px;
}

* { box-sizing:border-box; }
/* `hidden` siempre gana: sin esto, cualquier regla con display (como el menú
   del usuario, que es flex) lo deja visible aunque esté marcado como oculto */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:70px; -webkit-font-smoothing:antialiased; }
body {
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.01em;
}
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.07; }
p { margin:0; }
a { color:var(--acento); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }

/* ── Barra: delgada, translúcida, como la de la tienda ── */
.barra {
  position:sticky; top:0; z-index:9000; height:var(--barra-h);
  display:flex; align-items:center; gap:22px;
  /* la cuenta y el saldo van pegados al borde derecho de la ventana */
  padding:0 22px 0 max(22px, calc((100vw - var(--ancho-ancho)) / 2));
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linea);
}
.marca { display:flex; align-items:center; gap:10px; }
.marca:hover { text-decoration:none; }
.marca-txt { display:flex; flex-direction:column; line-height:1.2; }
.marca-txt b { font-size:12.5px; font-weight:600; color:var(--tinta); letter-spacing:-.01em; }
.marca-txt small { font-size:10.5px; color:var(--tinta-3); }
.logo { display:block; width:76px; height:20px; flex:none;
  background:url("logo-alco.avif") no-repeat -3px -32px; background-size:83px 83px; }
.logo.chico { width:62px; height:16px; background-position:-2px -26px; background-size:67px 67px; }
.menu { display:flex; gap:6px; margin-left:auto; }
.menu a { font-size:12.5px; font-weight:400; color:var(--tinta); padding:6px 11px; border-radius:7px; opacity:.85; }
.menu a:hover { opacity:1; background:rgba(0,0,0,.04); text-decoration:none; }
.barra-acciones { display:flex; align-items:center; gap:10px; position:relative; margin-left:auto; }
/* con el menú visible, él empuja a la derecha y las acciones van junto a él */
.menu:not([hidden]) + .barra-acciones { margin-left:0; }
#sesion-fuera, #sesion-dentro { display:flex; align-items:center; gap:8px; }
.btn-chico { font-size:13px; padding:6px 15px; }

/* ── Botones: píldora ── */
.btn {
  font:inherit; font-size:14px; font-weight:500; letter-spacing:-.01em;
  border-radius:980px; padding:8px 18px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s, color .2s, border-color .2s, transform .12s, opacity .2s;
}
.btn:active { transform:scale(.97); }
.btn-pri { background:var(--acento); color:#fff; }
.btn-pri:hover { background:var(--i700); }
.btn-sec { background:transparent; color:var(--acento); border-color:rgba(64,66,154,.35); }
.btn-sec:hover { background:rgba(64,66,154,.06); border-color:var(--acento); }
.btn-google { background:#fff; color:var(--tinta); border-color:var(--gris-2); }
.btn-google:hover { border-color:var(--tinta-3); }
.btn-grande { font-size:16px; padding:12px 26px; }
.btn[disabled] { opacity:.4; cursor:default; }
.btn.cargando { color:transparent !important; position:relative; pointer-events:none; }
.btn.cargando::after { content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:girar .7s linear infinite; }
.btn-sec.cargando::after, .btn-google.cargando::after { border-color:var(--gris-2); border-top-color:var(--acento); }
@keyframes girar { to { transform:rotate(360deg); } }

/* enlace con chevron, el recurso favorito de la tienda */
.chev { font-size:17px; font-weight:400; color:var(--acento); display:inline-flex; align-items:center; gap:3px; }
.chev::after { content:'›'; font-size:19px; line-height:1; transform:translateY(-1px); transition:transform .2s; }
.chev:hover { text-decoration:none; }
.chev:hover::after { transform:translate(3px,-1px); }

/* ── Sesión ── */
.usuario { display:flex; align-items:center; gap:7px; background:none; border:none;
  font:inherit; font-size:12.5px; color:var(--tinta); cursor:pointer; padding:4px 6px; border-radius:980px; }
.usuario:hover { background:rgba(0,0,0,.04); }
.usuario img { border-radius:50%; background:var(--gris-2); }
.caret { color:var(--tinta-3); font-size:10px; }
.desplegable { position:absolute; right:0; top:calc(100% + 10px); background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(20px); border:1px solid var(--linea); border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.14); min-width:210px; padding:8px; display:flex; flex-direction:column; }
.desplegable a, .desplegable button { padding:9px 13px; border-radius:10px; font:inherit; font-size:13.5px;
  color:var(--tinta); text-align:left; background:none; border:none; cursor:pointer; }
.desplegable a:hover, .desplegable button:hover { background:var(--gris); text-decoration:none; }

/* ── Portada: texto a la izquierda, mapa a la derecha ── */
.hero { display:grid; grid-template-columns:1fr 520px; gap:48px; align-items:center;
  max-width:var(--ancho-ancho); margin:0 auto; padding:64px 22px 56px; }
.hero-etq { display:inline-block; font-size:17px; font-weight:600; color:var(--verde); margin-bottom:8px; letter-spacing:-.02em; }
.hero h1 { font-size:clamp(38px, 5.2vw, 64px); font-weight:800; letter-spacing:-.035em; color:var(--tinta); }
.hero-sub { font-size:clamp(18px, 1.9vw, 21px); font-weight:400; color:var(--tinta-2);
  letter-spacing:-.02em; line-height:1.35; max-width:30em; margin:18px 0 0; }
.hero-botones { display:flex; gap:28px; flex-wrap:wrap; margin-top:26px; }
.hero-datos { list-style:none; display:flex; gap:42px; flex-wrap:wrap; padding:0; margin:44px 0 0; }
.hero-datos li { display:flex; flex-direction:column; gap:2px; }
.hero-datos b { font-size:34px; font-weight:700; letter-spacing:-.03em; color:var(--i700); font-variant-numeric:tabular-nums; }
.hero-datos span { font-size:13px; color:var(--tinta-3); }

/* ── Mapa de la República (public/mapa-mexico.svg, datos de Natural Earth) ──
   Las animaciones (rutas, camiones, onda del pin) viven dentro del SVG. Aquí
   solo va el marco y la etiqueta de la base, que es HTML para usar la misma
   tipografía de la página. */
.hero-mapa { margin:0; position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(34,36,77,.35), 0 2px 8px rgba(34,36,77,.06); }
.hero-mapa img { width:100%; height:auto; display:block; }

.mapa-etq { position:absolute; transform:translate(-50%, calc(-100% - 38px));
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  padding:8px 14px 9px; border-radius:12px; white-space:nowrap; text-align:left;
  box-shadow:0 8px 24px rgba(34,36,77,.18), 0 1px 2px rgba(34,36,77,.08);
  display:flex; flex-direction:column; line-height:1.2; pointer-events:none;
  animation:etqEntra .6s .3s cubic-bezier(.2,.8,.2,1) both; }
.mapa-etq::after { content:''; position:absolute; left:50%; bottom:-6px; width:12px; height:12px;
  background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:2px; }
.mapa-etq b { font-size:13.5px; font-weight:700; color:var(--i900); letter-spacing:-.02em; }
.mapa-etq span { font-size:11.5px; color:var(--tinta-3); }
@keyframes etqEntra { from { opacity:0; transform:translate(-50%, calc(-100% - 28px)); } }

/* ── Secciones ── */
.seccion { padding:84px 22px; }
.seccion > * { max-width:var(--ancho); margin-inline:auto; }
.seccion-alt { background:var(--gris); }
.seccion-cab { text-align:center; margin-bottom:38px; }
.seccion-cab h2 { font-size:clamp(30px, 4.2vw, 48px); font-weight:700; letter-spacing:-.03em; }
.seccion-cab p { font-size:19px; color:var(--tinta-2); margin-top:10px; letter-spacing:-.02em; }

/* tarjeta sin borde: la profundidad viene del fondo, no de la línea */
.tarjeta { background:var(--blanco); border-radius:var(--r-xl); padding:34px; border:none;
  box-shadow:0 2px 10px rgba(0,0,0,.04); }
.seccion-alt .tarjeta { box-shadow:0 2px 14px rgba(0,0,0,.05); }

/* ── Campos ── */
.campo { display:flex; flex-direction:column; gap:7px; min-width:0; }
.campo > span { font-size:12px; font-weight:500; color:var(--tinta-3); letter-spacing:0; text-transform:none; }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea {
  font:inherit; font-size:17px; padding:13px 16px; border:1px solid var(--gris-2); border-radius:12px;
  background:var(--blanco); color:var(--tinta); width:100%; transition:border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acento); box-shadow:0 0 0 4px rgba(64,66,154,.12); }
.campo-malo { border-color:var(--error) !important; box-shadow:0 0 0 4px rgba(196,20,122,.1) !important; }
.plaza { font-size:13px; color:var(--tinta-3); min-height:18px; }
.plaza.ok { color:var(--ok); }
.plaza.error { color:var(--error); }
.ayuda { font-size:13.5px; color:var(--tinta-3); margin:0; letter-spacing:-.01em; }
.ayuda.error { color:var(--error); }
.ayuda.ok { color:var(--ok); }
.enlace { background:none; border:none; font:inherit; font-size:14px; color:var(--acento); cursor:pointer; padding:0; }
.enlace:hover { text-decoration:underline; }

/* ── Cotizador ── */
.cotizador { display:flex; flex-direction:column; gap:30px; }
.cot-ruta { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:start; }
.invertir { margin-top:26px; width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid var(--gris-2); background:var(--blanco); cursor:pointer; font-size:18px; color:var(--acento);
  transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .2s; }
.invertir:hover { border-color:var(--acento); transform:rotate(180deg); }
.cot-tipo { display:inline-flex; gap:3px; background:var(--gris); padding:3px; border-radius:980px; align-self:center; }
.seccion-alt .cot-tipo { background:var(--gris-2); }
.tipo { border:none; background:none; font:inherit; font-size:14px; font-weight:500; color:var(--tinta-2);
  padding:8px 20px; border-radius:980px; cursor:pointer; transition:background .2s, color .2s; }
.tipo.activo { background:var(--blanco); color:var(--tinta); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.cot-bultos-cab { display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.cot-bultos-cab h3 { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.tabla-env { overflow-x:auto; margin:0 -6px; padding:0 6px; }
#tabla-bultos { width:100%; min-width:680px; border-collapse:separate; border-spacing:0 6px; }
#tabla-bultos select { padding:10px 10px; font-size:15px; border-radius:10px; }
#tabla-bultos th { text-align:left; font-size:12px; font-weight:500; color:var(--tinta-3); padding:0 8px 2px; }
#tabla-bultos td { padding:0 4px; }
#tabla-bultos input { padding:10px 12px; font-size:15px; text-align:right; border-radius:10px; }
.quitar-bulto { background:none; border:none; color:var(--tinta-3); font-size:18px; cursor:pointer;
  padding:4px 8px; border-radius:50%; transition:background .2s, color .2s; }
.quitar-bulto:hover:not([disabled]) { background:rgba(196,20,122,.1); color:var(--magenta); }
.quitar-bulto[disabled] { opacity:.25; cursor:default; }
.cot-pie { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }

/* ── Tarifas ── */
.resultados-cot { max-width:var(--ancho); margin:34px auto 0; }
.cargando-bloque { display:flex; align-items:center; justify-content:center; gap:11px;
  color:var(--tinta-3); font-size:16px; padding:46px; }
.spinner { width:17px; height:17px; flex:none; border:2px solid var(--gris-2); border-top-color:var(--acento);
  border-radius:50%; animation:girar .7s linear infinite; }
.tarifas { display:grid; grid-template-columns:repeat(auto-fill, minmax(238px,1fr)); gap:16px; }
.tarifa { background:var(--blanco); border-radius:var(--r-card); padding:24px 22px;
  display:flex; flex-direction:column; gap:2px; position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.05); transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; }
.tarifa:hover { transform:translateY(-4px); box-shadow:0 12px 34px rgba(0,0,0,.1); }
.tarifa.mejor { box-shadow:0 0 0 2px var(--verde-pura), 0 2px 10px rgba(0,0,0,.05); }
.tarifa.mejor:hover { box-shadow:0 0 0 2px var(--verde-pura), 0 12px 34px rgba(0,0,0,.1); }
.tarifa.mejor::before { content:'Más barata'; position:absolute; top:14px; right:16px;
  background:var(--verde); color:#fff; font-size:11px; font-weight:500; letter-spacing:-.01em;
  padding:3px 10px; border-radius:980px; }
.tarifa-paq { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.tarifa-serv { font-size:13px; color:var(--tinta-3); }
.tarifa-precio { font-size:34px; font-weight:700; letter-spacing:-.035em; color:var(--i700);
  line-height:1.05; margin-top:14px; font-variant-numeric:tabular-nums; }
.tarifa-iva { font-size:12.5px; color:var(--tinta-3); }
.tarifa-dias { font-size:13.5px; color:var(--tinta-2); margin-top:8px; }
.mensaje { padding:20px 24px; border-radius:var(--r-card); font-size:16px;
  background:var(--gris); color:var(--tinta-2); letter-spacing:-.01em; }
.seccion-alt .mensaje { background:var(--blanco); }
.mensaje.error { background:rgba(196,20,122,.07); color:var(--magenta); }
.mensaje.ok { background:rgba(15,143,72,.08); color:var(--verde); }

/* ── Buscadores (cobertura, rastreo) ── */
.buscador-cp { display:flex; gap:14px; align-items:flex-end; max-width:520px; margin:0 auto; }
.buscador-cp .campo { flex:1; }
.cobertura-res { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.cob-dato { background:var(--blanco); border-radius:var(--r-card); padding:22px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.05); }
.cob-dato b { display:block; font-size:21px; font-weight:600; letter-spacing:-.025em; }
.cob-dato span { font-size:13px; color:var(--tinta-3); }
.lista-colonias { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; justify-content:center; }
.lista-colonias span { background:var(--blanco); border-radius:980px; padding:5px 14px; font-size:13px; color:var(--tinta-2); }
.seccion-alt .lista-colonias span { background:var(--gris-2); }
#resultado-cobertura, #resultado-rastreo { max-width:var(--ancho); margin:0 auto; }

/* ── Mosaico de beneficios ── */
.mosaico { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; max-width:var(--ancho-ancho); }
.tile { background:var(--gris); border-radius:var(--r-xl); padding:44px 34px; text-align:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1); }
.tile:hover { transform:translateY(-5px); }
.tile .ico { font-size:40px; line-height:1; display:block; margin-bottom:16px; }
.tile h3 { font-size:23px; font-weight:700; letter-spacing:-.025em; margin-bottom:8px; }
.tile p { font-size:15px; color:var(--tinta-2); letter-spacing:-.01em; }
.tile.oscuro { background:var(--i900); color:#fff; }
.tile.oscuro h3 { color:#fff; }
.tile.oscuro p { color:rgba(255,255,255,.7); }

/* ═════════ Portada con la paleta del logo ═════════
   Índigo de las letras "alco" para los fondos oscuros, y el verde, cian y magenta
   de los tres cuadros del logo como acentos sólidos. Sin brillos ni degradados:
   bloques de color, como el propio logo. Formularios y resultados siguen en
   tarjetas blancas. */
.portada { --logo-indigo:#40429a; --logo-verde:#1bab5b; --logo-cian:#2aade1; --logo-magenta:#ec1e8f;
  --fondo-indigo:#2c2e66; --fondo-noche:#22244d; --fondo-claro:#f2f3fb; background:#fff; }

/* colores por elemento */
.portada .c-verde { --c:var(--logo-verde); }
.portada .c-cian { --c:var(--logo-cian); }
.portada .c-magenta { --c:var(--logo-magenta); }
.portada .c-indigo { --c:var(--logo-indigo); }

/* fondos de sección */
.sec-indigo { background:var(--fondo-indigo); }
.sec-noche { background:var(--fondo-noche); }
.sec-clara { background:var(--fondo-claro); }
.sec-blanca { background:#fff; }
.sec-indigo .seccion-cab h2, .sec-noche .seccion-cab h2, .sec-indigo .cta-caja h2 { color:#fff; }
.sec-indigo .seccion-cab p, .sec-noche .seccion-cab p, .sec-indigo .hero-sub { color:rgba(255,255,255,.72); }
.sec-indigo .ayuda, .sec-noche .ayuda { color:rgba(255,255,255,.6); }
.sec-indigo .ayuda a, .sec-noche .ayuda a { color:#fff; text-decoration:underline; }
.portada .tarjeta .ayuda { color:var(--tinta-3); }
.portada .seccion-cab.izq { text-align:left; max-width:var(--ancho-ancho); }
.portada .seccion-cab.izq p { max-width:620px; }
.portada .hero-etq { color:var(--logo-verde); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.sec-noche .hero-etq { color:#4fd18b; }
.portada .resultados-cot .seccion-cab h3 { color:var(--tinta); }

/* franja tricolor del logo */
.franja-alco { display:grid; grid-template-columns:3fr 1fr 1fr 1fr; height:6px; }
.franja-alco i:nth-child(1) { background:var(--logo-indigo); }
.franja-alco i:nth-child(2) { background:var(--logo-verde); }
.franja-alco i:nth-child(3) { background:var(--logo-cian); }
.franja-alco i:nth-child(4) { background:var(--logo-magenta); }

/* portada */
.hero-oscuro { background:var(--fondo-indigo); }
.hero-oscuro .hero { padding-bottom:64px; }
.portada .hero h1 { color:#fff; }
.portada .hero-sub { color:rgba(255,255,255,.75); }
.portada .hero-datos { border-top:1px solid rgba(255,255,255,.15); padding-top:22px; }
.portada .hero-datos b { color:#fff; }
.portada .hero-datos li:nth-child(1) b { color:#7fe0aa; }
.portada .hero-datos li:nth-child(2) b { color:#8fd6f3; }
.portada .hero-datos span { color:rgba(255,255,255,.62); }
.portada .chev { color:#fff; }
.portada .hero .btn-pri { background:var(--logo-verde); }
.portada .hero .btn-pri:hover { background:#0f8f48; }
.portada .hero-mapa { box-shadow:0 18px 40px -18px rgba(17,18,46,.6); border-radius:22px; }

/* recorrido: persona · centro de distribución · casa, unidos por línea punteada */
.recorrido { display:flex; align-items:flex-start; margin-top:34px; max-width:470px; }
.rec-paso { display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; width:84px; text-align:center; }
.rec-ico { width:56px; height:56px; border-radius:14px; background:var(--c); display:flex; align-items:center; justify-content:center; }
.rec-ico svg { width:32px; height:32px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.rec-paso small { color:rgba(255,255,255,.75); font-size:12.5px; line-height:1.25; }
/* la línea punteada avanza despacio hacia la derecha, como el paquete */
.rec-linea { flex:1; height:3px; margin-top:27px; min-width:30px;
  background-image:radial-gradient(circle, rgba(255,255,255,.7) 1.4px, transparent 1.6px);
  background-size:10px 3px; background-repeat:repeat-x; animation:avanza 1.2s linear infinite; }
@keyframes avanza { to { background-position:10px 0; } }

/* lo que se puede mandar */
.banda-tipos { background:#fff; border-bottom:1px solid var(--linea); padding:26px 22px;
  display:flex; align-items:center; gap:28px; max-width:var(--ancho-ancho); margin:0 auto; }
.banda-tipos > p { margin:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-3); flex:none; }
.tipos-paquete { list-style:none; margin:0; padding:0; display:flex; flex:1; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tipos-paquete li { display:flex; align-items:center; gap:10px; }
.tipos-paquete svg { width:30px; height:30px; fill:none; stroke:var(--c); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tipos-paquete span { font-size:15px; font-weight:600; color:var(--tinta); }

/* servicios */
.serv-principal { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; max-width:var(--ancho-ancho);
  border-radius:20px; overflow:hidden; }
.serv-grande { background:var(--fondo-indigo); padding:34px 30px 30px; border-top:5px solid var(--c); }
.serv-grande + .serv-grande { border-left:1px solid rgba(255,255,255,.08); }
/* el cuadro del ícono imita los cuadros de color del logo */
.ico-cuadro { width:52px; height:52px; border-radius:12px; background:var(--c); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.ico-cuadro svg { width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.serv-grande h3 { color:#fff; font-size:24px; font-weight:800; letter-spacing:-.025em; margin-bottom:8px; }
.serv-grande p { color:rgba(255,255,255,.75); font-size:15.5px; line-height:1.5; margin:0 0 16px; }
.serv-grande ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.serv-grande li { color:#fff; font-size:14px; padding-left:18px; position:relative; }
.serv-grande li::before { content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:2px; background:var(--c); }

.serv-abajo { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; margin-top:44px; max-width:var(--ancho-ancho); align-items:start; }
.modalidades h3, .serv-extra-tit { color:#fff; font-size:18px; font-weight:700; margin-bottom:12px; }
.modalidades table { width:100%; border-collapse:collapse; font-size:14.5px; }
.modalidades th { text-align:left; color:rgba(255,255,255,.55); font-weight:500; font-size:12.5px; padding:0 0 8px; }
.modalidades td { color:#fff; padding:11px 0; border-top:1px solid rgba(255,255,255,.12); }
.modalidades td:nth-child(2) { color:#4fd18b; font-weight:700; width:40px; text-align:center; }
.serv-extra { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:20px; }
.serv-extra li { display:flex; gap:14px; align-items:flex-start; }
.serv-extra svg { width:28px; height:28px; flex:none; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.serv-extra .t-verde { stroke:#4fd18b; } .serv-extra .t-cian { stroke:#6fcff2; } .serv-extra .t-magenta { stroke:#ff6fb8; }
.serv-extra b { display:block; color:#fff; font-size:16px; }
.serv-extra span { color:rgba(255,255,255,.65); font-size:14px; }

/* cómo funciona */
.pasos { list-style:none; padding:0; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); max-width:var(--ancho-ancho); }
.pasos li { padding:0 24px 0 0; border-top:3px solid var(--gris-2); padding-top:18px; }
.pasos li:nth-child(1) { border-top-color:var(--logo-indigo); }
.pasos li:nth-child(2) { border-top-color:var(--logo-verde); }
.pasos li:nth-child(3) { border-top-color:var(--logo-cian); }
.pasos li:nth-child(4) { border-top-color:var(--logo-magenta); }
.pasos li span { display:block; font-size:13px; font-weight:700; color:var(--tinta-3); margin-bottom:6px; }
.pasos b { display:block; color:var(--tinta); font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:4px; }
.pasos p { color:var(--tinta-2); font-size:15px; margin:0; }

/* beneficios: renglones con el color del logo a la izquierda */
.portada .mosaico { grid-template-columns:repeat(2, 1fr); gap:0; border-top:1px solid rgba(255,255,255,.12); }
.portada .tile { background:transparent; border-radius:0; text-align:left; padding:28px 28px 28px 0; display:grid;
  grid-template-columns:52px 1fr; column-gap:18px; border-bottom:1px solid rgba(255,255,255,.12); }
.portada .tile:hover { transform:none; }
.portada .tile .ico { grid-row:span 2; width:52px; height:52px; border-radius:12px; background:var(--c); display:flex; align-items:center; justify-content:center; margin:0; }
.portada .tile .ico svg { width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.portada .tile h3 { color:#fff; font-size:19px; margin-bottom:4px; }
.portada .tile p { color:rgba(255,255,255,.68); font-size:15px; }

/* llamado final */
.cta-final { padding-bottom:0; }
.cta-final .cta-caja { padding-bottom:70px; }
.cta-final .btn-pri { background:var(--logo-verde); }
.cta-final .btn-pri:hover { background:#0f8f48; }

/* barra superior en el índigo del logo (en todo el sitio) */
.barra { background:var(--i900, #22244d); border-bottom:none; }
.barra .marca-txt b { color:#fff; }
.barra .marca-txt small { color:rgba(255,255,255,.6); }
.barra .logo { background-color:#fff; border-radius:5px; box-shadow:0 0 0 4px #fff; }
.barra .menu a { color:#fff; }
.barra .menu a:hover { background:rgba(255,255,255,.1); }
.barra .usuario { color:#fff; }
.barra .usuario:hover { background:rgba(255,255,255,.1); }
.barra .caret { color:rgba(255,255,255,.6); }
.barra .saldo-barra { background:rgba(255,255,255,.1); }
.barra .saldo-etq { color:rgba(255,255,255,.6); }
.barra .saldo-barra b { color:#fff; }
.barra .saldo-mas { background:var(--verde-pura); }
.barra .btn-pri { background:var(--verde-pura); }
.barra .btn { white-space:nowrap; }

/* ── Llamado final ── */
.cta { background:var(--gris); }
.cta-caja { text-align:center; max-width:700px; margin:0 auto; background:transparent; box-shadow:none; padding:0; }
.cta-caja h2 { font-size:clamp(30px,4.2vw,46px); letter-spacing:-.03em; }
.cta-lista { list-style:none; padding:0; margin:30px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; text-align:left; }
.cta-lista li { font-size:15px; color:var(--tinta-2); padding:16px 18px 16px 44px; position:relative;
  background:var(--blanco); border-radius:16px; letter-spacing:-.01em; }
.cta-lista li::before { content:'✓'; position:absolute; left:18px; top:16px; color:var(--verde); font-weight:700; }
.cta-lista b { color:var(--tinta); font-weight:600; }

/* ── Panel del cliente ── */
/* Mismo lenguaje que la portada: banda índigo del logo con la franja tricolor
   (índigo, verde, cian, magenta) como borde, y el contenido sobre el fondo claro */
#panel-cliente { background:var(--fondo-claro); min-height:calc(100vh - var(--barra-h)); }
.tabs { display:flex; gap:2px; overflow-x:auto; background-color:var(--fondo-indigo);
  background-image:linear-gradient(to right, var(--logo-indigo) 0 55%, var(--logo-verde) 55% 70%, var(--logo-cian) 70% 85%, var(--logo-magenta) 85% 100%);
  background-size:100% 4px; background-position:bottom; background-repeat:no-repeat;
  padding:0 max(22px, calc((100vw - var(--ancho-ancho)) / 2)) 4px; position:sticky; top:var(--barra-h); z-index:8000; }
.tab { border:none; background:none; font:inherit; font-size:14px; font-weight:500; color:rgba(255,255,255,.72);
  padding:15px 16px 13px; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; letter-spacing:-.01em; }
.tab:hover { color:#fff; }
.tab.activa { color:#fff; font-weight:600; border-bottom-color:var(--logo-verde); }
.tab-admin { color:#8fd6f3; }
.panel-cuerpo { max-width:var(--ancho-ancho); margin:0 auto; padding:40px 22px 90px; }

/* ═════════ Esqueletos de carga (esqueleto.js) ═════════
   Bloques sombreados con la forma de lo que viene. La franja de luz usa
   background-attachment:fixed, así que es UNA sola franja que cruza la pantalla y
   pasa sobre todos los bloques a la vez. Cada bloque aparece un poco después que
   el anterior (--i), como si fueran cargando uno por uno. */
.esq-bloque.cargando-bloque { display:block; padding:0; color:inherit; font-size:inherit; }
.esq { display:block; border-radius:8px; opacity:0;
  background-color:#e3e5f2;
  background-image:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%);
  background-size:200vw 100%; background-attachment:fixed; background-repeat:no-repeat;
  animation:esqAparece .35s ease forwards, esqLuz 1.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * 70ms), 0s; }
@keyframes esqAparece { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes esqLuz { from { background-position:-100vw 0; } to { background-position:100vw 0; } }
.esq-tarjeta { background:#fff; border-radius:var(--r-xl); padding:30px; border:1px solid rgba(64,66,154,.08);
  display:flex; flex-direction:column; gap:20px; }
.esq-chica { padding:22px; gap:10px; border-radius:20px; }
.esq-fila { display:grid; gap:16px; }
.esq-2 { grid-template-columns:1fr 1fr; }
.esq-4 { grid-template-columns:80px 1.4fr 1.4fr 1fr; }
.esq-5 { grid-template-columns:repeat(5, 1fr); }
.esq-campo { display:flex; flex-direction:column; gap:7px; }
.esq-etq { height:11px; width:45%; }
.esq-input { height:46px; border-radius:12px; }
.esq-pildora { height:40px; width:330px; max-width:100%; border-radius:980px; }
.esq-boton { height:48px; width:180px; border-radius:980px; }
.esq-centro { display:flex; justify-content:center; }
.esq-sub { height:16px; width:120px; }
.esq-linea { height:14px; }
.esq-fina { height:10px; }
.esq-titulo { height:18px; width:55%; }
.esq-h2 { height:30px; width:280px; max-width:70%; border-radius:10px; }
.esq-cifra { height:26px; width:60%; }
.esq-20 { width:20%; } .esq-30 { width:30%; } .esq-40 { width:40%; } .esq-45 { width:45%; } .esq-50 { width:50%; }
.esq-60 { width:60%; } .esq-80 { width:80%; }
.esq-cab { display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.esq-rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.esq-pie { display:flex; gap:14px; margin-top:8px; padding-top:12px; border-top:1px solid var(--linea); }
.esq-renglon { display:flex; align-items:center; gap:18px; background:#fff; border-radius:16px; padding:18px 22px;
  border:1px solid rgba(64,66,154,.08); margin-bottom:8px; }
.esq-chip { width:90px; height:22px; border-radius:980px; flex:none; }
.esq-col { flex:1; display:flex; flex-direction:column; gap:8px; }
.esq-der { align-items:flex-end; flex:none; width:130px; }
.esq-precio { width:90px; height:18px; } .esq-precio-2 { width:60px; }
.esq-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:20px; }
.esq-kpi { padding:18px; gap:12px; border-radius:16px; }
.esq-filtros { grid-template-columns:2fr 1fr 1fr 1fr; margin-bottom:16px; }

/* Modo esqueleto sobre el marcado REAL: no cambia tamaños, márgenes ni rellenos.
   Solo oculta las letras, quita bordes y sombras de los campos y los rellena con el
   sombreado; las tarjetas y renglones que los contienen se quedan como son. */
.esq-modo.cargando-bloque { display:block; padding:0; color:inherit; font-size:inherit; justify-content:normal; }
.esq-modo { pointer-events:none; user-select:none; }
.esq-modo :is(input, select, textarea, button, summary, h1, h2, h3, p, b, small, code, li, label > span, .pn-etq,
  .chip-etapa, .chip-fijo, .tarifa-paq, .tarifa-serv, .tarifa-precio, .tarifa-dias, .cob-dato span, .lista-colonias span,
  .adm-kpi span, .sel-elegido, .sel-buscar) {
  color:transparent !important; border-color:transparent !important; box-shadow:none !important; text-shadow:none !important;
  background-color:#e3e5f2 !important;
  background-image:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%) !important;
  background-size:200vw 100% !important; background-attachment:fixed !important; background-repeat:no-repeat !important;
  border-radius:8px; opacity:0;
  animation:esqAparece .35s ease forwards, esqLuz 1.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * 45ms), 0s; }
/* el texto de adentro de un texto ya sombreado no se sombrea otra vez */
.esq-modo :is(b, small, h3, p, li, code) :is(b, small, span, code) { background:none !important; animation:none; opacity:1; }
.esq-modo :is(input, select, textarea)::placeholder { color:transparent; }
.esq-modo :is(svg, img, input[type=checkbox]) { visibility:hidden; }
.esq-modo input[type=checkbox] { visibility:visible; }
.esq-modo :is(.btn-pri, .tipo.activo) { background-color:#d7daec !important; }
.esq-modo .tarifa.mejor::before { visibility:hidden; }
/* los textos en línea se sombrean renglón por renglón; los de bloque como barra */
.esq-modo :is(b, small, code) { -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* esqueletos de la portada */
.esq-centrado { align-items:center; }
.esq-h3 { height:22px; width:320px; max-width:80%; }
.esq-tarifas { display:grid; grid-template-columns:repeat(auto-fill, minmax(238px, 1fr)); gap:16px; }
.esq-tarifas .esq-tarjeta { gap:10px; min-height:150px; }
.esq-precio-grande { height:30px; width:55%; margin-top:10px; border-radius:10px; }
.esq-70 { width:70%; }
.esq-cobertura { margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.esq-dato { align-items:center; padding:22px; gap:10px; border-radius:var(--r-card); }
.esq-pildoras { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; justify-content:center; }
.esq-pildora-chica { height:26px; border-radius:980px; }
.esq-evento { display:flex; align-items:center; gap:12px; }
.esq-punto { width:12px; height:12px; border-radius:50%; flex:none; }
#resultado-rastreo .esq-tarjeta, #resultado-cobertura .esq-bloque { margin-top:20px; }
/* sobre el índigo de la portada, el esqueleto va en blanco translúcido */
.hero-oscuro .esq { background-color:rgba(255,255,255,.14);
  background-image:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 60%); }
.esq-dato.esq { display:inline-block; width:110px; height:34px; vertical-align:middle; }
#dato-paq .esq-dato { width:40px; }
/* el mapa mientras se descarga: su mismo marco, sombreado y con la franja de luz */
.hero-mapa.cargando { aspect-ratio:640 / 470;
  background-color:rgba(255,255,255,.08);
  background-image:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
  background-size:200vw 100%; background-attachment:fixed; background-repeat:no-repeat; animation:esqLuz 1.6s ease-in-out infinite; }
.hero-mapa.cargando img, .hero-mapa.cargando .mapa-etq { opacity:0; }
.hero-mapa img { transition:opacity .4s ease; }

/* Arranque con sesión recordada: esqueleto del panel en lugar de la portada */
#esq-inicial { display:none; }
html.con-sesion #esq-inicial { display:block; background:var(--fondo-claro); min-height:calc(100vh - var(--barra-h)); }
html.con-sesion #publico, html.con-sesion .pie { display:none !important; }
html.con-sesion #sesion-fuera, html.con-sesion #menu-publico { visibility:hidden; }
.esq-tabs .tab { cursor:default; }

/* cada sección lleva un cuadro de color del logo junto al título */
.panel-cuerpo .pn-cab h2, .panel-cuerpo > .seccion-cab h2 { color:var(--fondo-noche); }
.panel-cuerpo .pn-cab h2::before, .panel-cuerpo > .seccion-cab h2::before {
  content:''; display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:12px;
  vertical-align:.12em; background:var(--c-vista, var(--logo-indigo)); }
.panel-cuerpo[data-vista="cotizar"], .panel-cuerpo[data-vista="direcciones"] { --c-vista:var(--logo-verde); }
.panel-cuerpo[data-vista="cotizaciones"], .panel-cuerpo[data-vista="articulos"] { --c-vista:var(--logo-cian); }
.panel-cuerpo[data-vista="guias"], .panel-cuerpo[data-vista="facturacion"] { --c-vista:var(--logo-magenta); }
.panel-cuerpo .tarjeta { box-shadow:0 1px 3px rgba(34,36,77,.06); border:1px solid rgba(64,66,154,.08); }
.panel-cuerpo .pn-fila, .panel-cuerpo .pn-tarifa { border:1px solid rgba(64,66,154,.08); }
.panel-cuerpo .btn-pri { background:var(--logo-indigo); }
.panel-cuerpo #pc-generar.btn-pri, .panel-cuerpo .pn-exito .btn-pri { background:var(--logo-verde); }
.panel-cuerpo #pc-generar.btn-pri:hover, .panel-cuerpo .pn-exito .btn-pri:hover { background:#0f8f48; }
.panel-cuerpo .pn-vacio { border:1px dashed rgba(64,66,154,.25); background:#fff; }

/* ── Configuración del sistema (solo el creador) ── */
/* las pestañas de administración en el cian del logo, para distinguirlas sobre el índigo */
.tab-admin.activa { color:#fff; border-bottom-color:var(--logo-cian); }
.sistema-lista { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px; }
.cred { display:flex; flex-direction:column; gap:14px; padding:26px; }
.cred-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cred-cab h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.cred-cab select { width:auto; font-size:13.5px; padding:7px 10px; }
.cred .campo > span { font-size:12.5px; }
.cred input { font-size:15px; padding:11px 13px; }
.cred input::placeholder { color:var(--tinta-3); font-size:13.5px; }
.cred-botones { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:4px; }
.cred-aviso { flex:1; min-width:100%; }
.cred-huella code { font-family:ui-monospace, Consolas, monospace; font-size:12px; background:var(--gris); padding:1px 6px; border-radius:5px; color:var(--tinta); }
.cred-pasos { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:4px; }
.cred-pasos li { font-size:12.5px; line-height:1.4; color:var(--tinta-2); word-break:break-word; }
.cred-pasos li.ok { color:var(--ok); }
.cred-pasos li.error { color:var(--error); }
.cred-migrar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 26px; margin-bottom:20px; border:1px solid rgba(64,66,154,.25); }
.cred-migrar .cred-aviso { flex-basis:100%; }
.cred-migrar .cred-aviso:empty { display:none; }

/* ── Pie: letra chica y gris, como la de la tienda ── */
.pie { background:var(--fondo-noche); padding:40px 22px 28px; font-size:12px; color:rgba(255,255,255,.6); }
.pie-cols { max-width:var(--ancho-ancho); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px;
  padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12); }
.pie-cols > div { display:flex; flex-direction:column; gap:8px; }
.pie-cols b { font-size:12px; font-weight:600; color:#fff; }
.pie-cols a, .pie-cols p { font-size:12px; color:rgba(255,255,255,.6); margin:0; }
.pie-cols a:hover { color:#fff; text-decoration:underline; }
.pie .logo.chico { background-color:#fff; border-radius:4px; box-shadow:0 0 0 4px #fff; margin:4px 0 6px 4px; }
.pie-legal { max-width:var(--ancho-ancho); margin:18px auto 0; font-size:12px; color:rgba(255,255,255,.45); }

/* ── Aviso flotante ── */
.aviso { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:9500;
  background:rgba(29,29,31,.92); backdrop-filter:blur(20px); color:#fff; font-size:15px;
  padding:14px 24px; border-radius:980px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  max-width:min(620px,92vw); letter-spacing:-.01em; }
.aviso.error { background:rgba(196,20,122,.95); }
.aviso.ok { background:rgba(15,143,72,.95); }

/* ── Ventana de acceso ── */
.acceso { border:none; border-radius:var(--r-xl); padding:40px 36px 30px; width:min(420px, calc(100vw - 32px));
  box-shadow:0 30px 80px rgba(0,0,0,.25); color:var(--tinta); }
.acceso::backdrop { background:rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.acceso[open] { animation:aparecer .22s cubic-bezier(.4,0,.2,1); }
@keyframes aparecer { from { opacity:0; transform:translateY(10px) scale(.98); } }
.acceso h2 { font-size:28px; font-weight:700; letter-spacing:-.03em; text-align:center; }
.acceso > .ayuda { text-align:center; margin:6px 0 24px; font-size:15px; }
.acceso-cerrar { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none;
  background:var(--gris); color:var(--tinta-2); cursor:pointer; font-size:14px; }
.acceso-cerrar:hover { background:var(--gris-2); }
.acceso-google { width:100%; }
.acceso-o { display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--tinta-3); font-size:13px; }
.acceso-o::before, .acceso-o::after { content:''; flex:1; height:1px; background:var(--gris-2); }
#acceso-form { display:flex; flex-direction:column; gap:14px; }
.acceso-olvide { align-self:flex-end; font-size:13px; margin-top:-4px; }
.acceso-enviar { width:100%; margin-top:4px; }
#acceso-aviso:empty { display:none; }
.acceso-cambiar { text-align:center; margin-top:20px; font-size:14px; color:var(--tinta-2); }

/* ── Registro de la cuenta ── */
#registro { background:var(--fondo-claro); }
.registro-cuerpo { max-width:860px; margin:0 auto; padding:40px 20px 80px; }
/* encabezado del registro: la misma banda índigo con franja tricolor de la portada */
.reg-cab { text-align:left; margin-bottom:24px; background-color:var(--fondo-indigo); color:#fff; border-radius:22px;
  padding:34px 34px 38px; overflow:hidden;
  background-image:linear-gradient(to right, var(--logo-indigo) 0 55%, var(--logo-verde) 55% 70%, var(--logo-cian) 70% 85%, var(--logo-magenta) 85% 100%);
  background-size:100% 6px; background-position:bottom; background-repeat:no-repeat; }
.reg-cab .hero-etq { color:#4fd18b; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.reg-cab h1 { font-size:clamp(30px, 4.4vw, 44px); font-weight:800; letter-spacing:-.035em; line-height:1.08; color:#fff; }
.reg-cab p:last-child { font-size:17px; color:rgba(255,255,255,.75); margin-top:10px; letter-spacing:-.015em; }
.reg-seccion h2 span { background:var(--logo-indigo); }
.reg-seccion:nth-of-type(2) h2 span { background:var(--logo-verde); }
.reg-seccion:nth-of-type(3) h2 span { background:var(--logo-cian); }
.reg-seccion:nth-of-type(4) h2 span { background:var(--logo-magenta); }
.reg-form { display:flex; flex-direction:column; gap:18px; }
.reg-seccion { display:flex; flex-direction:column; gap:18px; }
.reg-seccion h2 { font-size:21px; font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:12px; }
.reg-seccion h2 span { width:28px; height:28px; border-radius:8px; color:#fff;
  font-size:14px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.reg-sub { font-size:15px; font-weight:600; color:var(--tinta-2); margin-top:4px; }
.reg-check { display:flex; align-items:flex-start; gap:10px; font-size:15px; cursor:pointer; line-height:1.45; }
.reg-check input { width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--acento); }
.reg-final { display:flex; flex-direction:column; gap:14px; padding:10px 6px 0; }
.reg-privacidad { padding:14px 16px; border-radius:14px; border:1px solid transparent; }
.reg-privacidad.campo-malo { background:rgba(196,20,122,.05); }
.reg-botones { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.mayus { text-transform:uppercase; }

/* ── Panel del cliente: vistas ── */
.pn-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.pn-cab h2 { font-size:32px; font-weight:700; letter-spacing:-.03em; }
.pn-cab p { font-size:17px; color:var(--tinta-2); margin-top:6px; max-width:640px; letter-spacing:-.01em; }
.pn-vacio { text-align:center; padding:56px 20px; background:var(--blanco); border-radius:var(--r-xl); display:flex; flex-direction:column; align-items:center; gap:16px; }
.pn-vacio p { color:var(--tinta-3); font-size:17px; margin:0; }
.pn-rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.pn-dir { padding:24px; display:flex; flex-direction:column; gap:6px; }
.pn-dir-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pn-dir-cab h3 { font-size:18px; font-weight:600; letter-spacing:-.02em; }
.pn-marcas { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.pn-dir-quien { font-size:14px; color:var(--tinta-2); margin:0; }
.pn-dir-linea { font-size:15px; margin:0; }
.pn-botones { display:flex; gap:16px; flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:1px solid var(--linea); }
.enlace.peligro { color:var(--magenta); }
.chip-fijo, .chip-auto, .chip-etapa { font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:980px; white-space:nowrap; }
.chip-fijo.origen { background:rgba(64,66,154,.1); color:var(--acento); }
.chip-fijo.destino { background:rgba(42,173,225,.14); color:#0a6f99; }
.chip-auto { background:var(--gris); color:var(--tinta-2); font-weight:500; }
.pn-rfc { font-size:15px; font-weight:600; letter-spacing:.04em; }

.pn-form { margin-bottom:24px; display:flex; flex-direction:column; gap:18px; }
.pn-form h3 { font-size:20px; font-weight:600; letter-spacing:-.02em; }
.pn-campos { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.pn-campos .ancho-2 { grid-column:span 2; }
.pn-campos .ancho-3 { grid-column:1 / -1; }
.pn-checks { display:flex; gap:22px; flex-wrap:wrap; font-size:15px; }
.pn-checks label, .pn-check-seguro { display:flex; align-items:center; gap:8px; cursor:pointer; }
.pn-check-seguro { margin-top:10px; font-size:15px; }
.pn-botones-form { display:flex; justify-content:flex-end; gap:10px; }

/* cotizar */
.pn-cot { display:flex; flex-direction:column; gap:26px; }
.pn-ruta { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:start; }
.pn-punto { display:flex; flex-direction:column; gap:8px; min-width:0; }
.pn-etq { font-size:12px; font-weight:500; color:var(--tinta-3); }
.pn-tabla-bultos { width:100%; min-width:720px; border-collapse:separate; border-spacing:0 6px; }
.pn-tabla-bultos th { text-align:left; font-size:12px; font-weight:500; color:var(--tinta-3); padding:0 8px 2px; }
.pn-tabla-bultos td { padding:0 4px; }
.pn-tabla-bultos input { padding:10px 12px; font-size:15px; border-radius:10px; }
.pn-tabla-bultos input[type=number] { text-align:right; }
.pn-res-cab { margin:30px 0 14px; }
.pn-res-cab h3 { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.pn-tarifas { display:flex; flex-direction:column; gap:8px; }
.pn-tarifa { display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:18px;
  background:var(--blanco); border-radius:16px; padding:16px 22px; cursor:pointer;
  border:2px solid transparent; box-shadow:0 1px 6px rgba(0,0,0,.04); transition:border-color .2s; }
.pn-tarifa:hover { border-color:rgba(64,66,154,.25); }
.pn-tarifa.elegida { border-color:var(--acento); }
.pn-tarifa.mejor .pn-t-precio::before { content:'Más barata'; font-size:11px; font-weight:600; color:var(--verde);
  background:rgba(15,143,72,.1); padding:2px 8px; border-radius:980px; margin-right:10px; vertical-align:middle; }
.pn-tarifa input { width:18px; height:18px; accent-color:var(--acento); }
.pn-t-paq { display:flex; flex-direction:column; min-width:0; }
.pn-t-paq small, .pn-t-fuente, .pn-t-dias { font-size:13px; color:var(--tinta-3); }
.pn-t-precio { font-size:20px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.pn-generar { margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.pn-generar:empty { display:none; }
.pn-cot-pie { flex-direction:column; gap:10px; }
.pn-cot-botones { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%; }
#pc-gen-aviso:empty { display:none; }
.pn-exito { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.pn-exito p { margin:0; color:var(--tinta-2); }

/* listas */
.pn-lista { display:flex; flex-direction:column; gap:8px; }
.pn-fila { display:flex; align-items:center; gap:20px; background:var(--blanco); border-radius:16px; padding:16px 22px; box-shadow:0 1px 6px rgba(0,0,0,.04); }
.pn-fila-ppal { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.pn-fila-ppal small, .pn-fila-precio small { font-size:13px; color:var(--tinta-3); }
.pn-fila-precio { display:flex; flex-direction:column; align-items:flex-end; }
.pn-fila-precio b { font-size:18px; }
.pn-filtros { margin-bottom:18px; }
.pn-filtros small { color:var(--tinta-3); margin-left:3px; }
.pn-guias { display:flex; flex-direction:column; gap:12px; }
.pn-guia { padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.pn-guia-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pn-guia-cab > div { display:flex; flex-direction:column; gap:2px; }
.pn-guia-cab small { font-size:13px; color:var(--tinta-3); }
.pn-num { font-size:18px; font-weight:600; letter-spacing:.02em; }
.e-gen { background:var(--gris); color:var(--tinta-2); }
.e-rec { background:rgba(64,66,154,.1); color:var(--acento); }
.e-tra { background:rgba(42,173,225,.14); color:#0a6f99; }
.e-ent { background:rgba(15,143,72,.1); color:var(--verde); }
.e-inc { background:rgba(236,30,143,.1); color:var(--magenta); }
.e-can { background:var(--gris); color:var(--tinta-3); text-decoration:line-through; }
.pn-guia-extra:empty { display:none; }
.pn-guia-extra .cargando-bloque { padding:18px; justify-content:flex-start; }
.pn-rastreo { background:var(--gris); border-radius:14px; padding:16px 18px; font-size:15px; }
.pn-rastreo ol { margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.pn-rastreo small { color:var(--tinta-3); margin-right:6px; }
.pn-reco { display:grid; grid-template-columns:1.4fr .7fr .7fr auto; gap:12px; align-items:end; background:var(--gris); border-radius:14px; padding:16px; }
.pn-reco .ayuda { grid-column:1 / -1; }

/* selector de origen / destino */
.selector { position:relative; }
.sel-lista { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:var(--blanco);
  border:1px solid var(--linea); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.14); padding:6px;
  max-height:360px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.sel-op { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%;
  background:none; border:none; border-radius:10px; padding:9px 12px; font:inherit; cursor:pointer; color:var(--tinta); }
.sel-op:hover, .sel-op:focus { background:var(--gris); outline:none; }
.sel-op b { font-size:14.5px; font-weight:600; }
.sel-op small { font-size:12.5px; color:var(--tinta-3); }
.sel-accion { border-top:1px solid var(--linea); border-radius:0 0 10px 10px; }
.sel-accion + .sel-accion { border-top:none; border-radius:10px; }
.sel-accion b { color:var(--acento); }
.sel-nada { padding:8px 12px; }
.sel-elegido { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  border:1px solid var(--gris-2); border-radius:12px; padding:12px 14px; min-height:52px; }
.sel-elegido > div:first-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sel-elegido b { font-size:15.5px; }
.sel-elegido small { font-size:13px; color:var(--tinta-3); }
.sel-elegido.solo-cp { border-style:dashed; }
.sel-acciones { display:flex; gap:12px; flex:none; }

/* bultos del panel */
.pn-bultos { display:flex; flex-direction:column; gap:10px; }
.pn-bulto { border:1px solid var(--linea); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.pn-bulto-a { display:grid; grid-template-columns:80px 1.4fr 1.4fr 1fr; gap:10px; }
.pn-bulto-b { display:grid; grid-template-columns:repeat(5, 1fr) auto; gap:10px; align-items:end; }
.pn-bulto .campo > span { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pn-bulto input, .pn-bulto select { padding:10px 12px; font-size:15px; border-radius:10px; }
.pn-bulto .quitar-bulto { margin-bottom:6px; }
.chip-nivel { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:980px; white-space:nowrap; }
.chip-nivel.permitido { background:rgba(15,143,72,.1); color:var(--verde); }
.chip-nivel.restringido { background:#fff3cd; color:#7a5a00; }
.chip-nivel.prohibido { background:rgba(196,20,122,.1); color:var(--magenta); }
.chip-nivel.sin { background:var(--gris); color:var(--tinta-3); }
.aviso-peligro { font-size:13.5px; line-height:1.45; padding:10px 14px; border-radius:12px; margin:8px 0 0; }
.aviso-peligro.restringido { background:#fff8e1; color:#6b4f00; }
.aviso-peligro.prohibido { background:rgba(196,20,122,.07); color:var(--magenta); }
.aviso-peligro.permitido { background:rgba(15,143,72,.07); color:var(--verde); }
#pc-peligro .ayuda { margin-top:8px; }

/* editores en ventana (dirección, artículo) */
.editor-dir { border:none; border-radius:var(--r-xl); padding:34px 32px 26px; width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 40px); box-shadow:0 30px 80px rgba(0,0,0,.25); color:var(--tinta); }
.editor-dir::backdrop, .mapa-dlg::backdrop { background:rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.editor-dir[open], .mapa-dlg[open] { animation:aparecer .22s cubic-bezier(.4,0,.2,1); }
.editor-dir form { display:flex; flex-direction:column; gap:16px; }
.editor-dir h2, .mapa-dlg h2 { font-size:24px; font-weight:700; letter-spacing:-.03em; }
.ed-mapa { align-self:flex-start; }
.ed-ubicada:empty { display:none; }
.ed-guardar { display:flex; flex-direction:column; gap:12px; padding-top:4px; border-top:1px solid var(--linea); }
.ed-aviso:empty { display:none; }

/* mapa */
.mapa-dlg { border:none; border-radius:var(--r-xl); padding:30px 30px 24px; width:min(980px, calc(100vw - 32px));
  max-height:calc(100vh - 40px); box-shadow:0 30px 80px rgba(0,0,0,.25); color:var(--tinta);
  display:none; flex-direction:column; gap:14px; }
.mapa-dlg[open] { display:flex; }
.mapa-buscar { display:flex; gap:10px; }
.mapa-buscar input { flex:1; }
.mapa-tip { margin-top:-4px; }
.mapa-cuerpo { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; min-height:340px; }
.mapa-lienzo { border-radius:16px; overflow:hidden; background:var(--gris); min-height:340px; }
.mapa-lienzo.sin-mapa { display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; }
.mapa-res { display:flex; flex-direction:column; gap:6px; overflow:auto; max-height:380px; }
.mapa-res .cargando-bloque { padding:20px; }
.mapa-op { display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--blanco); border:1px solid var(--gris-2);
  border-radius:12px; padding:10px 12px; font:inherit; cursor:pointer; color:var(--tinta); }
.mapa-op:hover { border-color:var(--acento); }
.mapa-op.activa { border-color:var(--acento); box-shadow:0 0 0 3px rgba(64,66,154,.12); }
.mapa-op b { font-size:14px; font-weight:500; }
.mapa-op small { font-size:12px; }
.mapa-op small.exacta { color:var(--verde); }
.mapa-op small.aprox { color:#7a5a00; }
.mapa-elegido:empty { display:none; }
.mapa-elegido { background:var(--gris); border-radius:14px; padding:12px 16px; }
.mapa-elegido p { margin:2px 0 0; }
.mapa-elegido code, .ed-ubicada code, .pn-dir code { font-family:ui-monospace, Consolas, monospace; font-size:12px; }

/* catálogo de artículos */
.pn-filtro-art { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.pn-filtro-art input { flex:1; min-width:220px; }
.art-ref { margin-top:28px; padding:22px 26px; }
.art-ref summary { cursor:pointer; font-size:16px; }
.art-ref[open] summary { margin-bottom:12px; }
.art-tabla { width:100%; min-width:760px; border-collapse:collapse; font-size:13.5px; margin:12px 0; }
.art-tabla th { text-align:left; font-size:12px; font-weight:500; color:var(--tinta-3); padding:8px; border-bottom:1px solid var(--gris-2); }
.art-tabla td { padding:10px 8px; border-bottom:1px solid var(--linea); vertical-align:top; }
.art-tabla small { color:var(--tinta-3); }

/* convenio y solicitud de envío */
.pn-t-nota { display:block; font-size:11.5px; color:#7a5a00; }
.pn-manual { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pn-manual .campo { width:190px; }
.e-sol { background:#fff3cd; color:#7a5a00; }

/* guías: selección, manifiesto y recolección en grupo */
.pn-guias-barra { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.pn-guias-barra .pn-filtros { margin-bottom:0; }
.pn-sel-acciones { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pn-sel-todas { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; }
.pn-sel-info { margin:4px 0 14px; }
.pn-guia-check { display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.pn-guia-check input { width:18px; height:18px; margin-top:3px; accent-color:var(--acento); }
.pn-guia.sel { box-shadow:0 0 0 2px var(--acento); }
.pn-reco-varias:empty { display:none; }
.pn-reco-varias { margin-bottom:14px; }
.pn-reco-caja { padding:20px 22px; display:flex; flex-direction:column; gap:10px; }
.pn-reco-caja h3 { font-size:17px; font-weight:600; }

/* modalidad y servicios adicionales */
.chip-modalidad { display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:980px;
  background:rgba(42,173,225,.12); color:#0a6f99; white-space:nowrap; }
.pn-extras { margin-top:12px; border:1px solid var(--linea); border-radius:14px; padding:12px 16px; }
.pn-extras summary { cursor:pointer; font-weight:600; font-size:15px; }
.pn-extras summary .ayuda { font-weight:400; margin-left:6px; }
.pn-extras[open] { display:flex; flex-direction:column; gap:12px; }
.pn-extras-ops { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:8px 16px; margin-top:10px; font-size:14.5px; }
.pn-extras-ops label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.pn-extras-ops input { width:17px; height:17px; accent-color:var(--acento); }
.adm-servicios { font-size:12.5px; color:#0a6f99; }
.adm-interno { color:#7a5a00 !important; }

/* saldo en la barra superior */
.saldo-barra { display:flex; align-items:center; gap:7px; background:var(--gris); border-radius:980px; padding:3px 4px 3px 12px; }
.saldo-etq { font-size:11.5px; color:var(--tinta-3); }
.saldo-barra b { font-size:13.5px; letter-spacing:-.01em; }
.saldo-mas { width:24px; height:24px; border-radius:50%; border:none; background:var(--acento); color:#fff;
  font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.saldo-mas:hover { background:var(--i700); }
/* ventana de recarga */
.dlg-saldo { width:min(620px, calc(100vw - 32px)); display:none; flex-direction:column; gap:16px; }
.dlg-saldo[open] { display:flex; }
.dlg-saldo .cargando-bloque { padding:30px; }
.dlg-saldo-cab { text-align:center; display:flex; flex-direction:column; gap:4px; }
.dlg-saldo-cab span { color:var(--tinta-3); font-size:14px; }
.dlg-saldo-cab b { font-size:40px; letter-spacing:-.03em; }
.dlg-saldo .pn-recarga { border-top:1px solid var(--linea); padding:16px 0 0; }
.dlg-saldo .pn-movs summary { cursor:pointer; margin-bottom:8px; }
.dlg-saldo .pn-fila { padding:10px 14px; }

/* saldo */
.pn-saldo { display:grid; grid-template-columns:1fr 2fr; gap:16px; margin-bottom:20px; align-items:start; }
.pn-saldo-total { padding:26px; display:flex; flex-direction:column; gap:6px; }
.pn-saldo-total span { color:var(--tinta-3); font-size:14px; }
.pn-saldo-total b { font-size:38px; letter-spacing:-.03em; }
.pn-recarga { padding:24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.pn-recarga h3 { font-size:18px; font-weight:600; }
.pn-recarga .campo { width:220px; }
.pn-montos { display:flex; gap:6px; flex-wrap:wrap; }
.pn-montos .tipo { background:var(--gris); }
.pn-montos .tipo.activo { background:var(--acento); color:#fff; }
.pn-movs { margin-top:18px; }
.pn-movs h3 { font-size:17px; font-weight:600; margin-bottom:10px; }
.pn-fila-precio b.neg { color:var(--magenta); }
.pn-fila-precio b.pos { color:var(--verde); }
.pn-saldo-linea { font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin:0; }
.pn-saldo-linea.falta { color:var(--magenta); }
.adm-saldo { font-size:12.5px; }
.adm-clientes { display:flex; flex-direction:column; margin-top:12px; }
.adm-cliente { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--linea); }
.adm-cliente small { display:block; color:var(--tinta-3); font-size:12px; }
#rc-resultado:empty { display:none; }
#rc-resultado { margin-bottom:18px; }

/* pagos */
.pn-pago { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.pn-pago-ops { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pn-pago-op { display:flex; align-items:center; gap:6px; border:2px solid var(--gris-2); border-radius:980px; padding:8px 16px;
  font-size:14px; cursor:pointer; background:var(--blanco); }
.pn-pago-op input { accent-color:var(--acento); }
.pn-pago-op.elegida { border-color:var(--acento); }
.pn-transfer { text-align:left; display:flex; flex-direction:column; gap:10px; width:100%; max-width:560px; }
.pn-transfer dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; }
.pn-transfer dt { color:var(--tinta-3); font-size:14px; }
.pn-transfer dd { margin:0; font-weight:600; }
.pn-transfer code { font-size:15px; letter-spacing:.04em; }
.pn-pedidos { margin-bottom:20px; display:flex; flex-direction:column; gap:10px; }
.pn-pedidos h3 { font-size:17px; font-weight:600; }
.pn-pedido { padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.pn-pedido .pn-transfer { max-width:none; }
.adm-pedidos { padding:20px 22px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px; border:1px solid #f1d58a; }
.adm-pedidos h3 { font-size:17px; font-weight:600; }
.adm-pedido { display:grid; grid-template-columns:1.6fr 1fr auto; gap:14px; align-items:center; padding-top:10px; border-top:1px solid var(--linea); }
.adm-pedido small { display:block; color:var(--tinta-3); font-size:12px; }
.adm-pedido > div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* tablero del administrador */
.adm-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:20px; }
.adm-kpi { background:var(--blanco); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; box-shadow:0 1px 6px rgba(0,0,0,.04);
  border-top:4px solid var(--logo-indigo); }
.adm-kpi:nth-child(2) { border-top-color:var(--logo-cian); }
.adm-kpi:nth-child(3) { border-top-color:var(--logo-verde); }
.adm-kpi:nth-child(4) { border-top-color:var(--logo-magenta); }
.adm-kpi:nth-child(5) { border-top-color:var(--logo-verde); }
.adm-kpi span { font-size:12.5px; color:var(--tinta-3); }
.adm-kpi b { font-size:24px; letter-spacing:-.02em; }
.adm-kpi small { font-size:12px; color:var(--tinta-3); }
.adm-kpi.alerta { background:#fff8e1; }
.adm-kpi.alerta b { color:#7a5a00; }
.adm-kpi.ok b { color:var(--verde); }
.adm-filtros { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.adm-filtros input { flex:1; min-width:220px; }
.adm-filtros select { width:auto; }
.adm-tabla { width:100%; min-width:980px; border-collapse:separate; border-spacing:0 8px; }
.adm-tabla th { text-align:left; font-size:12px; font-weight:500; color:var(--tinta-3); padding:0 12px; }
.adm-tabla td { background:var(--blanco); padding:14px 12px; vertical-align:top; font-size:13.5px; }
.adm-tabla td:first-child { border-radius:14px 0 0 14px; width:34px; }
.adm-tabla td:last-child { border-radius:0 14px 14px 0; width:110px; }
.adm-tabla tr.adm-pendiente td { background:#fffaeb; }
.adm-usuario, .adm-guia, .adm-api { display:table-cell; }
.adm-usuario > *, .adm-guia > *, .adm-api > * { display:block; margin-bottom:3px; }
.adm-tabla small { color:var(--tinta-3); font-size:12px; }
.adm-medidas { margin:2px 0 4px; padding-left:16px; font-size:12px; color:var(--tinta-2); }
.adm-wa { display:inline-block !important; font-size:12px; font-weight:600; color:#fff !important; background:#25d366;
  padding:2px 10px; border-radius:980px; margin-left:4px; text-decoration:none !important; }
.adm-api dl { display:grid; grid-template-columns:auto auto; gap:2px 12px; margin:6px 0 0; font-size:12.5px; }
.adm-api dt { color:var(--tinta-3); }
.adm-api dd { margin:0; font-weight:600; text-align:right; }
.adm-api dd.neg { color:var(--magenta); }
.adm-contactos { margin-top:24px; padding:20px 24px; }
.adm-contactos summary { cursor:pointer; }
.adm-contactos form { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.adm-contacto { display:grid; grid-template-columns:180px 1fr 200px; gap:10px; align-items:center; }
.adm-contactos .btn { align-self:flex-start; }

/* interruptor de recurrente */
.pn-switch { position:relative; width:44px; height:26px; flex:none; cursor:pointer; }
.pn-switch input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:1; }
.pn-switch span { position:absolute; inset:0; background:var(--gris-2); border-radius:980px; transition:background .2s; }
.pn-switch span::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.pn-switch input:checked + span { background:var(--verde-pura); }
.pn-switch input:checked + span::after { transform:translateX(18px); }

/* ── Responsivo ── */
@media (max-width:860px) {
  .pn-campos { grid-template-columns:1fr 1fr; }
  .pn-tarifa { grid-template-columns:auto 1fr auto; }
  .pn-t-dias, .pn-t-fuente { grid-column:2; }
}
@media (max-width:1040px) {
  .hero { grid-template-columns:1fr; gap:28px; text-align:center; }
  .hero-sub { margin-inline:auto; }
  .hero-botones, .hero-datos { justify-content:center; }
  .recorrido { margin-inline:auto; }
  .hero-mapa { max-width:480px; margin-inline:auto; order:-1; }
  .serv-principal { grid-template-columns:1fr; }
  .serv-grande + .serv-grande { border-left:none; }
  .serv-abajo { grid-template-columns:1fr; }
  .pasos { grid-template-columns:repeat(2, 1fr); row-gap:26px; }
  .portada .mosaico { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .menu { display:none; }
  .menu:not([hidden]) + .barra-acciones { margin-left:auto; }
  .pie-cols { grid-template-columns:1fr 1fr; }
  .seccion { padding:60px 20px; }
  .hero { padding:40px 20px; }
  .hero-datos { gap:30px; margin-top:34px; }
  .hero-datos b { font-size:28px; }
}
@media (max-width:620px) {
  .marca-txt { display:none; }
  .tarjeta { padding:24px 18px; border-radius:22px; }
  .cot-ruta { grid-template-columns:1fr; gap:14px; }
  .invertir { margin:2px auto; }
  .cot-pie .btn { width:100%; }
  .buscador-cp { flex-direction:column; align-items:stretch; }
  .pie-cols { grid-template-columns:1fr; }
  .pn-campos { grid-template-columns:1fr; }
  .pn-campos .ancho-2 { grid-column:auto; }
  .pn-ruta { grid-template-columns:1fr; gap:14px; }
  .pn-reco { grid-template-columns:1fr 1fr; }
  .pn-fila { flex-wrap:wrap; }
  .pn-botones-form .btn { flex:1; }
  .reg-botones { flex-direction:column-reverse; align-items:stretch; }
  .pn-bulto-a { grid-template-columns:70px 1fr; }
  .esq-2, .esq-4 { grid-template-columns:1fr; }
  .esq-5 { grid-template-columns:1fr 1fr; }
  .esq-filtros { grid-template-columns:1fr; }
  .adm-contacto { grid-template-columns:1fr; }
  .pn-saldo { grid-template-columns:1fr; }
  .banda-tipos { flex-direction:column; align-items:flex-start; gap:14px; }
  .tipos-paquete { display:grid; grid-template-columns:repeat(2, 1fr); width:100%; }
  .barra { gap:12px; padding:0 14px; }
  .barra .btn-chico { padding:6px 11px; font-size:12px; }
  .barra-acciones, #sesion-fuera, #sesion-dentro { gap:6px; }
  .pasos { grid-template-columns:1fr; }
  .saldo-etq { display:none; }
  #u-nombre { display:none; }
  .adm-pedido { grid-template-columns:1fr; }
  .pn-bulto-b { grid-template-columns:repeat(2, 1fr); }
  .mapa-cuerpo { grid-template-columns:1fr; }
  .mapa-lienzo { min-height:260px; }
  .mapa-buscar { flex-direction:column; }
  .editor-dir, .mapa-dlg { padding:28px 18px 20px; }
  .acceso { padding:34px 22px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .spinner, .btn.cargando::after, .mapa-etq, .rec-linea { animation:none; }
  .esq, .hero-mapa.cargando, .esq-modo * { animation:none !important; opacity:1 !important; }
  .invertir:hover, .tarifa:hover, .tile:hover { transform:none; }
  .chev:hover::after { transform:translateY(-1px); }
}