/* ============================================================
   Electric Route Simulator · sistema de diseño común
   Un único lenguaje visual para la landing y las tres apps.
   ============================================================ */

:root{
  /* Superficies claras (apps) */
  --bg-0:#FFFFFF;
  --bg-1:#F7F9FA;
  --bg-2:#EFF3F5;
  --bg-3:#E4EAEE;

  /* Superficies oscuras (hero, pies, acentos) */
  --night-0:#07141C;
  --night-1:#0C1F2A;
  --night-2:#12303E;
  --night-3:#1B4354;

  /* Líneas */
  --line:#DDE4E9;
  --line-soft:#EAEFF2;

  /* Tinta */
  --ink-0:#0B1F2A;
  --ink-1:#4A5C6A;
  --ink-2:#586C78;   /* 5,5:1 sobre blanco y 4,9:1 sobre los grises claros (antes #5F7480, 4,4:1 sobre gris) */
  --ink-3:#586C78;   /* indicador «n/d»: 5,5:1 (antes #6B7C87, 4,3:1) */

  /* Acento */
  --teal:#0EA89A;
  --teal-bright:#3FD9C6;
  --teal-dim:#DEF4F1;
  --teal-deep:#03211E;
  --teal-line:#8FD9D1;
  --teal-ink:#08766C;  /* teal para TEXTO: 5,5:1 sobre blanco (el --teal da 2,96:1) */

  /* Semánticos */
  --amber:#B9740A;
  --amber-dim:#FBF0DC;
  --red:#C23B3B;
  --red-dim:#FBE9E9;

  /* Tipografía */
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* Forma y profundidad */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(11,31,42,.05);
  --sh-2:0 4px 16px rgba(11,31,42,.07);
  --sh-3:0 14px 44px rgba(11,31,42,.11);
  --sh-glow:0 10px 40px rgba(14,168,154,.20);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}

html{
  background:var(--bg-0);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;}
img,svg{max-width:100%;}

::selection{background:var(--teal-dim); color:var(--teal-deep);}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink-0);
  margin:0;
  line-height:1.15;
  letter-spacing:-0.015em;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-ink);
  margin:0 0 14px;
}

.lead{
  color:var(--ink-1);
  font-size:17px;
  line-height:1.65;
  max-width:62ch;
}

.mono{font-family:var(--font-mono);}

/* ---------- Cabecera ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 30px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}

/* Variante translúcida sobre el hero oscuro.
   Sigue siendo sticky: al pasar a fixed salía del flujo y, al quitarse la
   clase, el documento pegaba un salto de unos 56 px. */
.site-header.over-hero{
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.site-header.over-hero .brand-name{color:#fff;}
.site-header.over-hero .brand-name em{color:var(--teal-bright);}
.site-header.over-hero .nav-link{color:rgba(255,255,255,.72);}
.site-header.over-hero .nav-link:hover{color:#fff; background:rgba(255,255,255,.10);}
.site-header.over-hero .nav-link.active{color:#fff; background:rgba(255,255,255,.14);}
.site-header.over-hero .lang-toggle{border-color:rgba(255,255,255,.26);}
.site-header.over-hero .lang-toggle button{background:transparent; color:rgba(255,255,255,.66);}
.site-header.over-hero .lang-toggle button.active{background:rgba(255,255,255,.92); color:var(--night-0);}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark{
  width:30px; height:30px;
  flex-shrink:0;
  display:block;
}
.brand-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  letter-spacing:-0.02em;
  color:var(--ink-0);
  white-space:nowrap;
  transition:color .4s var(--ease);
}
.brand-name em{font-style:normal; color:var(--teal-ink);}

.header-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links{display:flex; gap:2px; flex-wrap:wrap;}

.nav-link{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  color:var(--ink-1);
  text-decoration:none;
  padding:8px 13px;
  border-radius:var(--r-sm);
  border:none;
  background:transparent;
  cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-link:hover{color:var(--ink-0); background:var(--bg-2);}
.nav-link.active{color:var(--teal-ink); background:var(--teal-dim);}

.lang-toggle{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-left:6px;
  flex-shrink:0;
  transition:border-color .4s var(--ease);
}
.lang-toggle button{
  background:var(--bg-0);
  border:none;
  color:var(--ink-2);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  padding:7px 10px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lang-toggle button.active{background:var(--teal-ink); color:#fff;}

/* ---------- Botones ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--teal);
  color:var(--teal-deep);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:12px 20px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sh-glow); background:#12BAAA;}
.btn:active{transform:translateY(0);}

.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink-1);}
.btn--ghost:hover{background:transparent; border-color:var(--teal); color:var(--teal-ink); box-shadow:none;}

.btn--onDark{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.btn--onDark:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); box-shadow:none;}

.btn--lg{padding:15px 26px; font-size:15px;}
.btn--sm{padding:9px 14px; font-size:13px;}
.btn--block{display:flex; width:100%;}

.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(3px);}

/* ---------- Estructura ---------- */

.wrap{max-width:1120px; margin:0 auto; padding:0 30px;}
.wrap--narrow{max-width:820px;}
.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--alt{background:var(--bg-1); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}

.section-head{max-width:64ch; margin-bottom:46px;}
.section-head h2{font-size:32px; margin-bottom:14px;}
.section-head p{color:var(--ink-1); font-size:16.5px; margin:0;}

/* ---------- Tarjetas ---------- */

.card{
  background:var(--bg-0);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--sh-1);
}

.grid{display:grid; gap:22px;}
.grid--3{grid-template-columns:repeat(auto-fit, minmax(280px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit, minmax(320px,1fr));}

/* ---------- Pie ---------- */

.site-footer{
  background:var(--night-0);
  color:rgba(255,255,255,.72);
  padding:56px 0 34px;
  font-size:13.5px;
}
.site-footer .wrap{display:grid; gap:34px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.site-footer h4{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  margin:0 0 14px;
}
.site-footer a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  display:block;
  padding:4px 0;
  transition:color .25s var(--ease);
}
.site-footer a:hover{color:var(--teal-bright);}
.site-footer .brand-name{color:#fff;}
.site-footer .brand-name em{color:var(--teal-bright);}
.site-footer p{color:rgba(255,255,255,.55); margin:12px 0 0; font-size:13px; line-height:1.65;}
.footer-base{
  border-top:1px solid rgba(255,255,255,.09);
  margin-top:40px;
  padding-top:22px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:rgba(255,255,255,.62);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:space-between;
}

/* ---------- Píldoras y etiquetas ---------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-2);
  background:var(--bg-0);
  white-space:nowrap;
}
.pill--teal{color:var(--teal-ink); border-color:var(--teal-line); background:var(--teal-dim);}
.pill--amber{color:var(--amber); border-color:#E8CFA0; background:var(--amber-dim);}
.pill--onDark{color:rgba(255,255,255,.80); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.07);}

.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}

/* ---------- Puerta de acceso ---------- */

.gate{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(160deg,#081820 0%, #0C2430 55%, #103343 100%);
}
.gate__card{
  width:100%;
  max-width:396px;
  background:rgba(255,255,255,.97);
  border-radius:var(--r-xl);
  padding:38px 34px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  animation:gate-in .55s var(--ease-out) both;
}
@keyframes gate-in{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
.gate__card h1{font-size:21px; margin-bottom:7px;}
.gate__card .sub{color:var(--ink-2); font-size:13.5px; margin:0 0 26px;}
.gate__card label{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:7px;
}
.gate__card input{
  width:100%;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--ink-0);
  font-family:var(--font-body);
  font-size:14.5px;
  padding:11px 13px;
  margin-bottom:17px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.gate__card input:focus{outline:none; border-color:var(--teal); background:var(--bg-0);}
.gate__err{color:var(--red); font-size:13px; min-height:19px; margin-top:10px;}
.gate__hint{
  border-top:1px solid var(--line-soft);
  margin-top:18px;
  padding-top:15px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.65;
  color:var(--ink-2);
}
.gate__back{
  display:inline-block;
  margin-top:14px;
  font-size:13px;
  color:var(--ink-2);
  text-decoration:none;
}
.gate__back:hover{color:var(--teal-ink);}

/* ---------- Buscador de direcciones ---------- */

.geo-wrap{position:relative;}
.geo-list{
  position:absolute;
  top:calc(100% + 5px);
  left:0; right:0;
  z-index:50;
  background:var(--bg-0);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--sh-3);
  max-height:252px;
  overflow-y:auto;
  display:none;
}
.geo-list.show{display:block;}
.geo-item{
  padding:9px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--line-soft);
  line-height:1.35;
}
.geo-item:last-child{border-bottom:none;}
.geo-item:hover, .geo-item.sel{background:var(--teal-dim);}
.geo-item b{display:block; color:var(--ink-0); font-size:13.5px; font-weight:600;}
.geo-item span{display:block; color:var(--ink-2); font-size:11.5px; margin-top:2px;}
.geo-empty{padding:11px 12px; font-size:12.5px; color:var(--ink-2);}

/* ---------- Estado de Open Charge Map ---------- */

.ocm-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.5;
  color:var(--ink-2);
  background:var(--bg-1);
  border-top:1px solid var(--line-soft);
  padding:9px 32px;
}
.ocm-bar b{color:var(--ink-0);}
.ocm-bar.warn{background:var(--amber-dim); color:var(--amber); border-top-color:#E8CFA0;}
.ocm-bar.warn b{color:var(--amber);}
.ocm-bar .ocm-ok{color:var(--teal-ink);}
/* En uso normal la barra solo muestra el recuento; los ajustes se despliegan. */
.ocm-bar .ocm-mas{
  font-family:var(--font-mono); font-size:11px; background:none; border:0;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:0; margin-left:auto;
}
.ocm-bar .ocm-mas:hover{color:var(--teal-ink);}
.ocm-acciones{display:none; gap:8px; align-items:center; flex-wrap:wrap;}
.ocm-acciones.show{display:flex;}
.ocm-bar .ocm-recorte{color:var(--ink-2);}
.ocm-btn{
  font-family:var(--font-mono);
  font-size:11px;
  background:var(--bg-0);
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 10px;
  color:var(--ink-1);
  text-decoration:none;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.ocm-btn:hover{border-color:var(--teal); color:var(--teal-ink);}
.ocm-key{display:none; align-items:center; gap:8px; width:100%; margin-top:4px;}
.ocm-key.show{display:flex;}
.ocm-key input{
  flex:1; min-width:180px;
  font-family:var(--font-mono);
  font-size:12px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg-0);
  color:var(--ink-0);
}
.ocm-key input:focus{outline:none; border-color:var(--teal);}

@media (max-width:860px){
  .ocm-bar{padding:9px 20px;}
}

/* ---------- Disponibilidad en vivo ---------- */

.ev-vivo{color:var(--teal-ink); font-weight:600;}
.ev-nd{color:var(--ink-3); font-weight:600;}
.ocm-recorte{color:var(--ink-2);}
.ev-pend{color:var(--ink-3); font-style:italic;}

/* ---------- Aparición al hacer scroll ---------- */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none;}

/* ---------- Utilidades ---------- */

.center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.muted{color:var(--ink-2);}
.small{font-size:13px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------- Responsive ---------- */

@media (max-width:860px){
  .site-header{padding:11px 18px;}
  .nav-link{font-size:13px; padding:7px 10px;}
  .wrap{padding:0 20px;}
  .section{padding:68px 0;}
  .section-head h2{font-size:26px;}
  .section-head{margin-bottom:34px;}
}

@media (max-width:560px){
  .brand-name{font-size:14px;}
  /* En el móvil la navegación va en el menú desplegable (menu.js). */
  .site-header{padding:10px 16px;}
  .card{padding:22px;}
}

/* La cabecera es fija: sin esto, al saltar desde el menú el título de la
   sección quedaba escondido detrás de ella. */
section[id], div[id]{scroll-margin-top:72px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
  .reveal{opacity:1; transform:none;}
}

/* ---------- Preferencias de redes de recarga ---------- */

.redes-capa{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,26,36,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:redesEntra .18s var(--ease);
}
@keyframes redesEntra{from{opacity:0}to{opacity:1}}
.redes-caja{
  position:relative;
  background:var(--bg-0);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(6,26,36,.3);
  width:min(560px,100%);
  max-height:86vh;
  overflow:auto;
  padding:30px 30px 22px;
}
.redes-caja h2{font-family:var(--font-display); font-size:20px; margin:0 0 8px;}
.redes-sub{font-size:13px; line-height:1.55; color:var(--ink-1); margin:0 0 10px;}
.redes-aviso{color:var(--ink-2); font-size:12px;}
.redes-x{
  position:absolute; top:14px; right:16px;
  background:none; border:0; font-size:24px; line-height:1;
  color:var(--ink-2); cursor:pointer; padding:4px 8px; border-radius:8px;
}
.redes-x:hover{color:var(--ink-0); background:var(--bg-1);}
.redes-lista{margin:16px 0 4px; border-top:1px solid var(--line-soft);}
.redes-fila{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 2px; border-bottom:1px solid var(--line-soft);
}
.redes-nombre{font-size:14px; color:var(--ink-0); overflow-wrap:anywhere;}
.redes-estrellas{display:flex; gap:2px; flex-shrink:0;}
.redes-e{
  background:none; border:0; cursor:pointer; padding:2px 3px;
  font-size:17px; line-height:1; color:#9AAAB4;   /* estrella apagada: visible (antes 1,3:1) */
  transition:color .12s var(--ease), transform .12s var(--ease);
}
.redes-e:hover{transform:scale(1.18);}
.redes-e.on{color:var(--teal-ink);}
.redes-vacio{font-size:13px; color:var(--ink-2); padding:14px 0;}
.redes-pie{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px;}

@media (max-width:560px){
  .redes-caja{padding:24px 18px 18px;}
  .redes-fila{flex-direction:column; align-items:flex-start; gap:6px;}
}

/* La fila ganadora de la tabla de velocidades */
tr.fila-mejor td{background:var(--teal-dim); font-weight:600;}
tr.fila-mejor td:first-child{border-radius:6px 0 0 6px;}
tr.fila-mejor td:last-child{border-radius:0 6px 6px 0; color:var(--teal-ink);}

/* ---------- Perfil ---------- */

.perfil-caja{width:min(460px,100%);}
.perfil-motivo{background:var(--teal-dim); color:var(--ink-0); padding:10px 12px; border-radius:9px;}
.perfil-campo{margin:18px 0 6px;}
.perfil-campo label{
  display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px;
}
.perfil-campo input{
  width:100%; padding:11px 13px; font-size:15px; font-family:var(--font-body);
  border:1px solid var(--line); border-radius:10px; background:var(--bg-1); color:var(--ink-0);
}
.perfil-campo input:focus{outline:none; border-color:var(--teal); background:var(--bg-0);}
.perfil-campo input.campo-mal{border-color:var(--red);}
.perfil-lista{margin-top:14px; border-top:1px solid var(--line-soft);}
.perfil-fila{display:flex; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px;}
.perfil-fila span{color:var(--ink-2);}

/* Saludo y contador en la cabecera */
.perfil-chip{
  font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-1);
  background:var(--bg-1); border:1px solid var(--line-soft); border-radius:99px;
  padding:5px 12px; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.perfil-chip:hover{border-color:var(--teal); color:var(--teal-ink);}
.perfil-chip b{color:var(--ink-0);}

/* Estrella de vehículo favorito */
.fav-btn{
  background:none; border:0; cursor:pointer; padding:2px 6px;
  font-size:17px; line-height:1; color:#7A8B96;   /* 3,5:1: se ve que hay un botón */
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.fav-btn:hover{transform:scale(1.15); color:var(--teal-ink);}
.fav-btn.on{color:var(--teal-ink);}

/* Desplegable de la tabla de velocidades */
details.vel-caja{margin-top:26px; border-top:1px solid var(--line-soft); padding-top:16px;}
details.vel-caja > summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink-0); list-style:none; display:flex; align-items:center; gap:8px;
}
details.vel-caja > summary::-webkit-details-marker{display:none;}
details.vel-caja > summary::before{content:'▸'; color:var(--teal-ink); transition:transform .2s var(--ease);}
details.vel-caja[open] > summary::before{transform:rotate(90deg);}
details.vel-caja > summary .vel-pista{font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--ink-2);}

tr.fila-tuya td{background:var(--bg-1);}
tr.fila-tuya td:first-child{box-shadow:inset 3px 0 0 var(--ink-2);}

/* Tiempos de recarga de referencia, bajo la curva de carga */
#curve-tiempos{margin-top:8px}
.ct-linea{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.ct-item{white-space:nowrap}
.ct-item b{color:var(--ink);font-weight:600}
.ct-nota{margin-top:5px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.ct-nota b{color:var(--ink)}

/* Efecto de la temperatura, bajo el mando de temperatura */
#temp-efecto{margin-top:6px;font-size:12px;line-height:1.55;color:var(--ink-3)}
#temp-efecto b{color:var(--ink);font-weight:600}

/* Formulario de perfil: registro e inicio de sesión */
.perfil-dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.perfil-dos{grid-template-columns:1fr}}
.perfil-pista{margin:2px 0 10px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.perfil-error{min-height:18px;margin:2px 0 8px;font-size:13px;line-height:1.45;color:#B3261E;font-weight:600}
.perfil-caja input[type="password"],
.perfil-caja input[type="email"]{width:100%;box-sizing:border-box}

/* ---------- Cargadores del mapa ----------
   Cada punto dice tres cosas:
   · tamaño: lo grande que es la estación (conectores CCS2; sin CCS2, mangueras):
     pequeña (1-2), mediana (3-4), grande (más de 4);
   · color: potencia máxima: clara por debajo de 50 kW, media de 50 a 149,
     oscura de 150 kW en adelante;
   · halo: cuántos cargadores hay alrededor que no se dibujan para no tapar
     este: unos pocos, bastantes (5+), muchos (20+). */
.g-cargador{
  box-sizing:border-box; border-radius:50%;
  background:#8FD1C8; border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(6,26,36,.30);
  cursor:pointer; transition:transform .12s ease;
}
.g-cargador--s{width:9px; height:9px;}
.g-cargador--m{width:13px; height:13px;}
.g-cargador--l{width:17px; height:17px; border-width:2px;}
.g-cargador--media{background:#21A597;}
.g-cargador--alta{background:#0B5F57;}
.g-cargador--d1{box-shadow:0 0 0 3px rgba(14,168,154,.22), 0 1px 2px rgba(6,26,36,.30);}
.g-cargador--d2{box-shadow:0 0 0 6px rgba(14,168,154,.22), 0 1px 2px rgba(6,26,36,.30);}
.g-cargador--d3{box-shadow:0 0 0 10px rgba(14,168,154,.22), 0 1px 2px rgba(6,26,36,.30);}
.g-cargador:hover{transform:scale(1.35);}

/* Leyenda del mapa */
.leyenda-mapa{position:absolute; left:12px; bottom:30px; z-index:3; background:rgba(255,255,255,.95); border:1px solid var(--line-soft);
  border-radius:10px; box-shadow:0 6px 18px rgba(9,26,34,.16); padding:9px 26px 10px 12px; font-size:11.5px; color:var(--ink-1);
  display:flex; flex-direction:column; gap:6px; transition:left .38s cubic-bezier(.4,0,.2,1);}
.stage-mapa.cajon-abierto .leyenda-mapa{left:calc(var(--w-izq) + 14px);}
.leyenda-mapa .lf{display:flex; align-items:center; gap:7px; white-space:nowrap;}
.leyenda-mapa .lt{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); min-width:44px;}
.leyenda-mapa .g-cargador{display:inline-block; cursor:default; flex-shrink:0;}
.leyenda-mapa .lx{position:absolute; top:3px; right:5px; border:none; background:none; color:var(--ink-3); font-size:14px; cursor:pointer; line-height:1;}
.leyenda-mapa[hidden]{display:none;}
.leyenda-abrir{position:absolute; left:12px; bottom:30px; z-index:3; background:rgba(255,255,255,.95); border:1px solid var(--line-soft);
  border-radius:16px; padding:5px 11px; font-size:11.5px; color:var(--ink-1); cursor:pointer; box-shadow:0 4px 12px rgba(9,26,34,.14);}
.stage-mapa.cajon-abierto .leyenda-abrir{left:calc(var(--w-izq) + 14px);}
.leyenda-abrir[hidden]{display:none;}
@media(max-width:640px){ .leyenda-mapa, .leyenda-abrir{bottom:auto; top:10px;} }

/* Logo con «SIMULATOR» debajo */
.brand-logo{height:54px; width:auto; display:block; --logo-ink:var(--ink-0); --logo-teal:var(--teal); overflow:visible;}
.site-header.over-hero .brand-logo, .site-footer .brand-logo{--logo-ink:#fff; --logo-teal:var(--teal-bright);}
@media (max-width:560px){ .brand-logo{height:46px;} }

/* Buscador de redes favoritas */
.redes-busca{position:relative; margin:14px 0 0; display:flex; align-items:center; gap:10px;}
.redes-buscar{flex:1; min-width:0; font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-0,#fff); color:var(--ink-0);}
.redes-buscar:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:transparent;}
.redes-cuenta{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap;}
.redes-fila[hidden]{display:none;}
.redes-vacio{margin:14px 2px; font-size:13.5px; color:var(--ink-2);}


/* ============================================================
   Auditoría UX · octubre 2026
   ============================================================ */

/* Enlace para saltar directamente al contenido con el teclado */
.saltar{position:absolute; left:12px; top:-60px; z-index:200; background:var(--ink-0); color:#fff; padding:10px 14px; border-radius:var(--r-sm); font-weight:600; text-decoration:none;}
.saltar:focus{top:10px;}

/* Tablas anchas: se desplazan dentro de su caja y no estiran la página */
.tabla-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tabla-scroll > table{min-width:100%;}

/* Botón de menú (pantallas estrechas) */
.menu-btn{display:none;}
.menu-btn__barras{display:inline-flex; flex-direction:column; gap:3px;}
.menu-btn__barras i{display:block; width:16px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s var(--ease), opacity .2s;}
.menu-abierto .menu-btn__barras i:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-abierto .menu-btn__barras i:nth-child(2){opacity:0;}
.menu-abierto .menu-btn__barras i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

@media (max-width:860px){
  .site-header{padding:10px 16px; gap:10px;}
  .header-right{flex-wrap:nowrap; gap:8px;}
  .menu-btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--bg-0); color:var(--ink-0); font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer;}
  .site-header.over-hero .menu-btn{background:transparent; border-color:rgba(255,255,255,.4); color:#fff;}
  .site-header .nav-links{display:none !important; position:absolute; top:100%; left:0; right:0; flex-direction:column; flex-wrap:nowrap; gap:2px;
    padding:8px 12px 14px; background:var(--bg-0); border-bottom:1px solid var(--line); box-shadow:var(--sh-3);}
  .site-header.menu-abierto .nav-links{display:flex !important;}
  .site-header.menu-abierto .nav-links .nav-link,
  .site-header.over-hero.menu-abierto .nav-links .nav-link{display:flex; align-items:center; min-height:46px; padding:10px 12px; font-size:16px; color:var(--ink-1); background:transparent;}
  .site-header.menu-abierto .nav-links .nav-link.active{color:var(--teal-ink); background:var(--teal-dim);}
  .site-header .nav-links > *{display:flex !important;}
  .site-header .nav-links{max-width:none;}
  .site-header .perfil-chip{order:9; margin:6px 0 0; justify-content:center; min-height:44px; font-size:13px; border-radius:var(--r-sm);}
  .lang-toggle{margin-left:0;}
  .lang-toggle button{padding:10px 11px;}
}

/* En el móvil, los campos con letra de menos de 16 px hacen que Safari (iPhone)
   amplíe la página al tocarlos y haya que deshacer el zoom a mano. */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{font-size:16px !important;}
  .fav-btn{padding:10px 10px; margin:-8px -4px;}
  .curve-expand{min-width:36px; min-height:36px;}
  .lx, #leyenda-x{min-width:32px; min-height:32px;}
}

/* Pantallas de 360–400 px: logo, idioma y menú tienen que caber en una línea. */
@media (max-width:400px){
  .site-header{padding:10px 12px;}
  .brand-logo{height:40px !important;}
  .menu-btn{padding:0 11px !important;}
  .menu-btn__txt{display:none;}
  .lang-toggle button{padding:10px 9px;}
}

/* ============================================================
   Consentimiento, páginas legales, preferencias y beta (oct. 2026)
   ============================================================ */
.interruptor{display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; position:relative;}
.interruptor input{position:absolute; opacity:0; width:1px; height:1px;}
.interruptor__pista{position:relative; width:38px; height:22px; border-radius:22px; background:#C5CFD6; transition:background .2s; flex:none;}
.interruptor__pista::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.interruptor input:checked + .interruptor__pista{background:#0EA89A;}
.interruptor input:checked + .interruptor__pista::after{transform:translateX(16px);}
.interruptor input:focus-visible + .interruptor__pista{outline:2px solid #0EA89A; outline-offset:2px;}

/* Tarjeta en el hueco del mapa hasta que se activa Google Maps */
.consent-mapa{display:flex; align-items:center; justify-content:center; padding:20px; background:
  radial-gradient(circle at 30% 20%, rgba(14,168,154,.10), transparent 55%), repeating-linear-gradient(45deg, var(--bg-1) 0 14px, var(--bg-2) 14px 28px);}
.consent-tarjeta{max-width:440px; background:var(--bg-0); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 18px 50px rgba(11,31,42,.16); padding:24px 24px 18px; text-align:left;}
.consent-ico{width:46px; height:46px; border-radius:12px; background:var(--teal-dim); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.consent-tarjeta h2{font-family:var(--font-display); font-size:19px; margin:0 0 8px; color:var(--ink-0);}
.consent-tarjeta p{font-size:14px; line-height:1.6; color:var(--ink-1); margin:0 0 14px;}
.consent-botones{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.consent-si{background:var(--teal-ink); color:#fff; border:none; border-radius:10px; padding:12px 18px; font-weight:600; font-size:15px; cursor:pointer; min-height:44px;}
.consent-si:hover{background:#065E56;}
.consent-botones a{color:var(--teal-ink); font-size:14px; font-weight:500;}
.consent-tarjeta .consent-nota{font-size:12.5px; color:var(--ink-2); margin:12px 0 0;}
@media (max-width:760px){
  .consent-mapa{padding:12px; align-items:flex-start; overflow:auto;}
  .consent-tarjeta{padding:18px 16px 14px;}
  .consent-tarjeta h2{font-size:17px;}
  .consent-tarjeta p{font-size:13.5px; margin-bottom:10px;}
  .consent-ico{display:none;}
}
.consent-caja{width:min(520px,100%);}
.consent-grupo{border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px; margin:12px 0;}
.consent-fila{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14.5px; cursor:default;}
label.consent-fila{cursor:pointer;}
.consent-grupo p{font-size:13px; line-height:1.55; color:var(--ink-1); margin:8px 0 0;}
.consent-fijo{font-size:12px; color:var(--teal-ink); background:var(--teal-dim); border-radius:20px; padding:3px 10px; white-space:nowrap;}
.consent-mas{font-size:13px; margin:10px 0 0;}
.consent-mas a{color:var(--teal-ink);}
.geo-activar{margin-left:4px; border:1px solid var(--teal); background:var(--bg-0); color:var(--teal-ink); border-radius:7px; padding:4px 9px; font:inherit; font-weight:600; cursor:pointer;}

/* Columna «Legal» del pie */
.site-footer .pie-legal a[data-ajustes-cookies]{cursor:pointer;}

/* «Beta» solo junto al simulador de camiones */
.nav-links a[href="camiones.html"]::after, .site-footer a[href="camiones.html"]::after, .app-card[href="camiones.html"] h3::after{
  content:"Beta"; display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:2px; background:#FFF1D6; color:#7A4B00; border:1px solid #F2D49B;}
.site-footer a[href="camiones.html"]::after{background:rgba(255,241,214,.14); color:#FFD58A; border-color:rgba(255,213,138,.35);}
.app-card[href="camiones.html"] h3::after{vertical-align:4px;}

/* Mis preferencias */
.perfil-ventajas{margin:4px 0 6px; padding-left:20px; font-size:13.5px; line-height:1.6; color:var(--ink-1);}
.perfil-h3{font-family:var(--font-display); font-size:15px; margin:18px 0 6px;}
.perfil-rutas{list-style:none; margin:0 0 6px; padding:0; max-height:240px; overflow:auto; border-top:1px solid var(--line-soft);}
.perfil-rutas li{display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid var(--line-soft);}
.perfil-rutas li > div{flex:1; min-width:0;}
.perfil-rutas b{display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.perfil-rutas span{display:block; font-size:12px; color:var(--ink-2);}
.perfil-ruta-abrir{border:1px solid var(--teal); background:var(--bg-0); color:var(--teal-ink); border-radius:8px; padding:7px 12px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; min-height:36px;}
.perfil-ruta-borrar{border:none; background:none; color:var(--ink-2); font-size:20px; width:36px; height:36px; border-radius:8px; cursor:pointer;}
.perfil-ruta-borrar:hover{background:var(--bg-2); color:var(--red);}

/* Con el cajón del coche abierto, la tarjeta se centra en el trozo de mapa que queda a la vista. */
@media (min-width:641px){ .stage-mapa.cajon-abierto .consent-mapa{padding-left:calc(var(--w-izq, 440px) + 34px);} }
.stage-mapa:has(.consent-mapa) .leyenda-mapa, .stage-mapa:has(.consent-mapa) .leyenda-abrir{display:none;}

/* ============================================================
   Simulador: mejoras de uso (simulador-ux.js)
   ============================================================ */
/* Resumen: coste, acciones, navegar, disponibilidad */
.rs-coste{font-size:12.5px; color:var(--ink-1); background:var(--bg-1); border-radius:8px; padding:8px 10px; margin:-6px 0 14px; line-height:1.5;}
.rs-coste b{font-family:var(--font-mono); color:var(--ink-0);}
.rs-coste span{color:var(--ink-2);}
.rs-acciones{display:flex; gap:6px; margin-bottom:10px;}
.rs-acciones button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:6px 8px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg-0); color:var(--ink-0); font-family:var(--font-display); font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap;}
.rs-acciones button:hover{border-color:var(--teal); color:var(--teal-ink);}
.rs-acc{margin-top:6px;}
details.navegar{display:inline-block; position:relative;}
details.navegar > summary{list-style:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer; padding:5px 10px; min-height:32px; border-radius:8px;
  border:1px solid var(--teal); color:var(--teal-ink); background:var(--bg-0); font-family:var(--font-display); font-weight:600; font-size:12px;}
details.navegar > summary::-webkit-details-marker{display:none;}
details.navegar[open] > summary{background:var(--teal-dim);}
.navegar-menu{position:absolute; z-index:30; left:0; top:calc(100% + 4px); min-width:160px; background:var(--bg-0); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 30px rgba(9,26,34,.18); padding:4px; display:flex; flex-direction:column;}
.navegar-menu a{display:block; padding:9px 12px; border-radius:7px; color:var(--ink-0); text-decoration:none; font-size:13.5px; min-height:20px;}
.navegar-menu a:hover, .navegar-menu a:focus-visible{background:var(--bg-2);}
.td-nav{margin-top:6px; font-family:var(--font-body);}
.ev-hueco:empty{display:none;}
.ev-punto{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:1px;}
.ev-punto--si{background:#16A34A;} .ev-punto--no{background:var(--red);}
.rs-det .ev-sin{display:none;}

/* Resaltado cruzado */
.rs-lista li.resaltada{background:var(--teal-dim); border-radius:8px; box-shadow:0 0 0 6px var(--teal-dim);}
#reporte tr.resaltada td{background:var(--teal-dim);}
.tp.resaltada{border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,168,154,.18);}
.gauge-flag.resaltada{background:var(--teal-ink) !important; color:#fff !important; z-index:3;}
.marker-parada{transition:transform .15s;}
.marker-parada.resaltada{transform:scale(1.3); box-shadow:0 0 0 4px rgba(14,168,154,.35), 0 2px 6px rgba(0,0,0,.3);}
.marker-fantasma{width:22px; height:22px; border-radius:50%; border:2px solid #fff; background:#8A9AA5; color:#fff; font:700 11px/1 var(--font-mono);
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; padding:0; opacity:.9;}
.marker-fantasma:hover, .marker-fantasma:focus-visible{background:var(--ink-1); opacity:1; outline:none; transform:scale(1.15);}

/* Controles del mapa */
.mapa-ctrl{position:absolute; right:10px; bottom:104px; z-index:4; display:flex; flex-direction:column; gap:6px;}
.mapa-ctrl button{width:40px; height:40px; border:none; border-radius:8px; background:#fff; color:#3C4043; box-shadow:0 1px 4px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
.mapa-ctrl button:hover{color:var(--ink-0); background:#F4F6F7;}
.mapa-ctrl button[aria-pressed="true"]{background:var(--teal-ink); color:#fff;}
.mapa-ctrl button:disabled{opacity:.45; cursor:default;}
.mapa-ctrl .ic-cerrar{display:none;}
.pantalla-completa .mapa-ctrl .ic-abrir{display:none;} .pantalla-completa .mapa-ctrl .ic-cerrar{display:inline;}
.stage-mapa:has(.consent-mapa) .mapa-ctrl{display:none;}
@media (max-width:900px){ .mapa-ctrl{top:10px; bottom:auto;} }
.stage-mapa.pantalla-completa{position:fixed !important; inset:0; z-index:60; height:auto !important; min-height:0 !important;}
html.con-mapa-completo, html.con-mapa-completo body{overflow:hidden;}
.modo-anadir #map, .modo-anadir #map *{cursor:crosshair !important;}
#map.sobre-ruta, #map.sobre-ruta *{cursor:grab;}
.arrastre-ruta{width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--teal-ink); box-shadow:0 2px 6px rgba(0,0,0,.35); transform:translateY(8px);}
.menu-mapa{display:flex; flex-direction:column; gap:4px; padding:2px; min-width:170px;}
.menu-mapa button{text-align:left; border:none; background:var(--bg-1); border-radius:7px; padding:9px 11px; font:inherit; font-size:13.5px; cursor:pointer; color:var(--ink-0);}
.menu-mapa button:hover{background:var(--teal-dim);}

/* Hoja inferior (móvil) */
.rs-asa{display:none;}
@media (max-width:900px){
  .resumen-mapa{left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:auto !important; max-height:none !important;
    border-radius:16px 16px 0 0; transition:height .26s cubic-bezier(.2,.8,.2,1); animation:hojaEntra .3s cubic-bezier(.2,.8,.2,1);}
  .resumen-mapa.arrastrando{transition:none;}
  .rs-asa{display:flex; justify-content:center; align-items:center; width:100%; height:22px; flex:none; border:none; background:none; padding:0; cursor:grab; touch-action:none;}
  .rs-asa span{width:40px; height:5px; border-radius:3px; background:#C5CFD6;}
  .resumen-mapa .rs-cab{touch-action:none; padding-top:4px;}
  .resumen-mapa[data-hoja="asomada"] .rs-cuerpo, .resumen-mapa[data-hoja="asomada"] .rs-pie{visibility:hidden;}
}
@keyframes hojaEntra{from{transform:translateY(40px); opacity:0;} to{transform:none; opacity:1;}}

/* Editor en dos pasos (móvil) */
.pasos-ruta{display:none;}
.paso-2{display:none;}
.paso-siguiente{display:none;}
.panel-ruta.en-pasos .pasos-ruta{display:flex; gap:6px; position:sticky; top:0; z-index:3; background:var(--bg-0); padding:4px 0 10px; margin-top:-6px;}
.pasos-ruta button{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1.5px solid var(--line); border-radius:10px; background:var(--bg-0);
  font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-1); cursor:pointer;}
.pasos-ruta button span{display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; background:var(--bg-2); font-size:12px;}
.pasos-ruta button[aria-selected="true"]{border-color:var(--teal); background:var(--teal-dim); color:var(--ink-0);}
.pasos-ruta button[aria-selected="true"] span{background:var(--teal-ink); color:#fff;}
.panel-ruta.en-pasos[data-paso-activo="2"] [data-paso="1"]{display:none !important;}
.panel-ruta.en-pasos[data-paso-activo="1"] .paso-2{display:none !important;}
.panel-ruta.en-pasos[data-paso-activo="2"] .paso-2{display:flex; flex-direction:column; gap:14px;}
.panel-ruta.en-pasos[data-paso-activo="1"] .paso-siguiente{display:block; min-height:44px;}
.paso2-coche{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg-1);}
.p2c-txt{flex:1; min-width:0;}
.p2c-txt span{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);}
.p2c-txt b{display:block; font-size:15px; color:var(--ink-0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.paso2-coche .btn-secundario{width:auto; min-height:40px;}
.p2c-elegir{background:var(--teal-ink); color:#fff; border:none; border-radius:9px; padding:10px 14px; font-family:var(--font-display); font-weight:600; font-size:13.5px; cursor:pointer; min-height:44px;}

/* Paradas en tarjetas (móvil) */
.paradas-tarjetas{display:none;}
@media (max-width:640px){
  .tabla-paradas{display:none;}
  .paradas-tarjetas{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
}
.tp{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg-0); transition:border-color .15s, box-shadow .15s;}
.tp-cab{display:flex; align-items:flex-start; gap:10px;}
.tp-n{flex:none; width:26px; height:26px; border-radius:50%; background:var(--teal); color:#04211E; font:700 12px/26px var(--font-mono); text-align:center;}
.tp-n--dest{background:#D9480F; color:#fff;} .tp-n--desc{background:var(--amber); color:#fff;} .tp-n--fin{background:#0B2733; color:#fff; font-size:11px;}
.tp-nom{min-width:0;}
.tp-nom b{display:block; font-size:14px; line-height:1.35; color:var(--ink-0);}
.tp-nom span{display:block; font-size:12px; color:var(--ink-2); margin-top:1px;}
.tp-datos{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:10px 0 0;}
.tp-datos span{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);}
.tp-datos b{font-family:var(--font-mono); font-size:13.5px; color:var(--ink-0);}
.tp-datos b .ev-hueco, .tp-datos b [data-ev-lat]{font-weight:600;}
.tp-linea{font-size:13.5px; color:var(--ink-1); margin-top:8px;}
.tp-pie{margin-top:10px;}
.tp--fin{border-color:#F0C4C4; background:#FFF7F7;}

/* Barra de acciones del informe */
.rep-barra{display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 20px;}
.rep-accion{display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:7px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg-0);
  color:var(--ink-0); font-family:var(--font-display); font-weight:600; font-size:13px; cursor:pointer;}
.rep-accion:hover{border-color:var(--teal); color:var(--teal-ink);}
.rep-plegar{margin-left:auto; color:var(--ink-2); font-weight:500;}
.metric-precio{font-size:14px;}
.impresion-cab{display:none;}

/* Informe al lado del mapa (≥1440 px) */
@media (min-width:1440px){
  #principal.informe-lateral{display:grid; grid-template-columns:minmax(0,1fr) min(600px, 34vw); grid-template-rows:auto auto auto;}
  #principal.informe-lateral > .stage{grid-column:1; grid-row:1;}
  #principal.informe-lateral > #reporte{grid-column:2; grid-row:1; height:min(calc(100svh - 118px), 760px); min-height:480px; overflow-y:auto;
    border-top:none; border-left:1px solid var(--line-soft); padding:22px 24px 30px; box-sizing:border-box; outline:none;}
  #principal.informe-lateral > .map-attrib-extra, #principal.informe-lateral > .ocm-bar{grid-column:1 / span 2;}
  #principal.informe-lateral > #reporte .metrics-grid{grid-template-columns:repeat(2,1fr);}
}

/* Impresión: solo el informe, limpio */
@media print{
  .site-header, .site-footer, .stage, .map-attrib-extra, .ocm-bar, .saltar, .calculando, .opc-modal, .curva-modal, .rep-barra, .excl-toast,
  details.navegar, .td-nav, .rs-acciones, #rs-reabrir, .paradas-tarjetas, .aviso-desfasado button{display:none !important;}
  body{background:#fff !important;}
  #principal, #principal.informe-lateral{display:block !important;}
  #reporte{display:block !important; height:auto !important; overflow:visible !important; border:none !important; padding:0 !important;}
  .tabla-paradas{display:block !important;}
  .tabla-scroll{overflow:visible !important;}
  table{page-break-inside:auto;} tr{page-break-inside:avoid;}
  .impresion-cab{display:block; border-bottom:2px solid #0B1F2A; margin-bottom:18px; padding-bottom:10px;}
  .impresion-cab .ic-marca{font-family:var(--font-display); font-weight:700; color:#08766C;}
  .impresion-cab h2{margin:4px 0; font-size:20px;}
  .impresion-cab p{margin:2px 0; font-size:12px; color:#333;}
  .plan-card{break-inside:avoid;}
  a{color:inherit; text-decoration:none;}
}
.rs-det .ev-hueco{display:block;}
.rs-acciones--cuerpo{display:none; margin:14px 0 0;}
@media (max-width:900px){
  .rs-acciones--pie{display:none;}
  .rs-acciones--cuerpo{display:flex;}
  .stage-mapa:has(.resumen-mapa:not([hidden])) .drawer-toggle--izq.closed{display:none;}
  .pasos-ruta button{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px;}
}
#principal.informe-lateral .rep-barra{gap:6px;}
#principal.informe-lateral .rep-accion{padding:6px 10px; font-size:12.5px; min-height:36px;}
.rep-plegar{border-style:dashed;}
.stage-mapa.pantalla-completa{z-index:1000; background:var(--bg-1);}
@media (max-width:900px){ .stage-mapa:has(.resumen-mapa[data-hoja="llena"]) .mapa-ctrl{display:none;} }
/* En la columna lateral el ancho es de móvil grande: tarjetas en vez de tabla. */
@media (min-width:1440px){
  #principal.informe-lateral .tabla-paradas{display:none;}
  #principal.informe-lateral .paradas-tarjetas{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:18px;}
}
.tp-datos b{white-space:nowrap;}
@media print{ #principal.informe-lateral .tabla-paradas{display:block !important;} #principal.informe-lateral .paradas-tarjetas{display:none !important;} }

/* Aviso de cookies (consentimiento.js) */
.aviso-cookies{position:fixed; left:16px; right:16px; bottom:16px; z-index:9500; display:flex; justify-content:center; pointer-events:none;}
.aviso-cookies__caja{pointer-events:auto; width:min(860px,100%); display:flex; align-items:center; gap:20px; background:#0B1F2A; color:#fff;
  border-radius:14px; padding:16px 20px; box-shadow:0 18px 50px rgba(0,0,0,.35);}
.aviso-cookies__txt{flex:1; min-width:0;}
.aviso-cookies__txt b{font-family:var(--font-display); font-size:15px;}
.aviso-cookies__txt p{margin:4px 0 0; font-size:13px; line-height:1.55; color:rgba(255,255,255,.82);}
.aviso-cookies__botones{display:flex; align-items:center; gap:16px; flex:none;}
.aviso-cookies__botones a{color:#6FE6D6; font-size:13.5px;}
.aviso-cookies__si{background:#3FD9C6; color:#04211E; border:none; border-radius:10px; padding:11px 22px; font-weight:700; font-size:14.5px; cursor:pointer; min-height:44px;}
.aviso-cookies__si:hover{background:#6FE6D6;}
.aviso-cookies__si:focus-visible{outline:3px solid #fff; outline-offset:2px;}
@media (max-width:640px){
  .aviso-cookies{left:8px; right:8px; bottom:8px;}
  .aviso-cookies__caja{flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px;}
  .aviso-cookies__botones{justify-content:space-between;}
  .aviso-cookies__si{flex:1;}
}
@media print{ .aviso-cookies{display:none !important;} }
.rs-bajo-minimo{font-size:12.5px; line-height:1.45; color:#7A4B0B; background:#FFF4E0; border:1px solid #F1D3A1; border-radius:8px; padding:8px 10px; margin:8px 40px 2px 0;}
.aviso-margen--bajo{color:#B3261E; font-weight:700;}
.aviso-bajo-minimo{color:#7A4B0B !important;}
.rs-det .ev-hueco.ev-sin{display:none;}
@media (min-width:901px){ .stage-mapa:has(.resumen-mapa:not([hidden])) .mapa-ctrl{right:calc(min(340px, 100% - 28px) + 26px);} }

/* Informe: en qué se va el tiempo y la energía */
.gv{margin:6px 0 26px;}
.gv .rep-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.gv-total{font-family:var(--font-mono); font-size:14px; color:var(--ink-1); font-weight:600;}
.gv-barra{display:flex; gap:2px; height:22px; margin:6px 0 10px;}
.gv-barra span{min-width:3px; height:100%;}
.gv-barra span:first-child{border-radius:4px 0 0 4px;} .gv-barra span:last-child{border-radius:0 4px 4px 0;}
.gv-barra span:only-child{border-radius:4px;}
.gv-leyenda{list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:6px 18px;}
.gv-leyenda li{display:grid; grid-template-columns:12px 1fr auto auto; align-items:center; gap:8px; font-size:13px; color:var(--ink-1);}
.gv-leyenda i{width:12px; height:12px; border-radius:3px;}
.gv-leyenda b{font-family:var(--font-mono); color:var(--ink-0); font-weight:600;}
.gv-leyenda em{font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); min-width:3.2em; text-align:right;}
.gv-sub{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:4px 0 6px;}
.gv-linea{display:flex; gap:2px; height:30px;}
.gv-linea span{display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; font-family:var(--font-mono); font-size:11px;}
.gv-tramo{background:#E3F4F2; color:#06544C; border-bottom:3px solid #0fa596;}
.gv-parada{background:#FDF0D2; color:#6B4700; border-bottom:3px solid #eda100; font-weight:700; cursor:default; min-width:4px;}
.gv-linea span:first-child{border-radius:4px 0 0 4px;} .gv-linea span:last-child{border-radius:0 4px 4px 0;}
.gv-parada.resaltada{background:#eda100; color:#2B1D00;}
.gv-linea-pie{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-2); margin:5px 0 12px;}
.gv-como{margin-top:8px;}
.gv-como summary{cursor:pointer; font-size:13px; color:var(--teal-ink); font-weight:500;}
.gv-como .hint{margin:8px 0 0 !important;}
.ge{display:flex; flex-direction:column; gap:8px; margin:8px 0 16px;}
.ge-fila{display:grid; grid-template-columns:minmax(150px, 34%) 1fr 104px; align-items:center; gap:12px;}
.ge-et b{display:block; font-size:13.5px; color:var(--ink-0); font-weight:600;}
.ge-et span{display:block; font-size:11.5px; color:var(--ink-2); line-height:1.35;}
.ge-pista{position:relative; height:16px;}
.ge-cero{position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--line);}
.ge-bar{position:absolute; top:0; bottom:0; background:#0fa596; border-radius:0 4px 4px 0; min-width:2px;}
.ge-fila--neg .ge-bar{background:#9AA8B1; border-radius:4px 0 0 4px;}
.ge-val{text-align:right;}
.ge-val b{display:block; font-family:var(--font-mono); font-size:13px; color:var(--ink-0);}
.ge-val em{font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-2);}
.precal{color:var(--ink-2); font-weight:400;}
@media (max-width:640px){
  .ge-fila{grid-template-columns:1fr 92px; grid-template-areas:"et val" "pista pista"; gap:4px 10px;}
  .ge-et{grid-area:et;} .ge-val{grid-area:val;} .ge-pista{grid-area:pista; height:12px;}
  .gv-leyenda{grid-template-columns:1fr;}
}
.gv-leyenda{grid-template-columns:repeat(auto-fill, minmax(240px, 320px));}
@media (max-width:640px){ .gv-leyenda{grid-template-columns:1fr;} .gv-leyenda li{grid-template-columns:12px 1fr auto auto;} }

/* Informe en capítulos plegables */
.caps{display:flex; flex-direction:column; gap:12px; margin:8px 0 18px;}
details.cap{border:1px solid var(--line); border-radius:14px; background:var(--bg-0); box-shadow:0 1px 2px rgba(11,31,42,.04); overflow:hidden;}
details.cap > summary{list-style:none; display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; min-height:44px;}
details.cap > summary::-webkit-details-marker{display:none;}
details.cap > summary:hover{background:var(--bg-1);}
details.cap > summary:focus-visible{outline:2px solid var(--teal-ink); outline-offset:-2px; border-radius:14px;}
.cap-ico{flex:none; width:40px; height:40px; border-radius:11px; background:var(--teal-dim); color:var(--teal-ink); display:flex; align-items:center; justify-content:center;}
.cap-tit{flex:1; min-width:0;}
.cap-tit b{display:block; font-family:var(--font-display); font-size:16px; color:var(--ink-0); line-height:1.3;}
.cap-tit span{display:block; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); margin-top:3px; line-height:1.45;}
.cap-accion{flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:20px; border:1.5px solid var(--teal); color:var(--teal-ink);
  font-family:var(--font-display); font-weight:600; font-size:13px; background:var(--bg-0);}
.cap-accion svg{transition:transform .2s;}
.cap-ocultar{display:none;}
details.cap[open] > summary{border-bottom:1px solid var(--line-soft); background:var(--bg-1);}
details.cap[open] .cap-accion{background:var(--teal-dim);}
details.cap[open] .cap-accion svg{transform:rotate(180deg);}
details.cap[open] .cap-ver{display:none;} details.cap[open] .cap-ocultar{display:inline;}
.cap-cuerpo{padding:18px 18px 8px;}
.cap-cuerpo > .gv{margin-top:0;}
.cap-cuerpo .vel-caja{margin:0;}
@media (max-width:640px){
  details.cap > summary{padding:14px; gap:10px;}
  .cap-ico{width:34px; height:34px;}
  .cap-tit b{font-size:15px;}
  .cap-accion{padding:6px 9px;}
  .cap-ver, .cap-ocultar{display:none !important;}
  .cap-cuerpo{padding:14px 14px 6px;}
}
@media print{ details.cap > summary .cap-accion{display:none;} details.cap{break-inside:auto; box-shadow:none;} }

/* Leyendas de tiempo y energía en tabla, con separadores */
.gv-tabla{width:100%; border-collapse:collapse; margin:4px 0 16px; font-size:13px;}
.gv-tabla th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); text-align:left; padding:6px 10px; border-bottom:1.5px solid var(--line);}
.gv-tabla td{padding:9px 10px; border-bottom:1px solid var(--line-soft); color:var(--ink-1); font-family:var(--font-body);}
.gv-tabla th:nth-child(n+2), .gv-tabla td:nth-child(n+2){text-align:right; white-space:nowrap; font-family:var(--font-mono);}
.gv-tabla td:nth-child(2){color:var(--ink-0); font-weight:600;}
.gv-tabla td i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:9px; vertical-align:-1px;}
.gv-tabla tr.gv-tabla-total td{border-top:1.5px solid var(--line); border-bottom:none; font-weight:700; color:var(--ink-0);}
.ge-fila--total{border-top:1.5px solid var(--line); padding-top:8px;}
.gv-tabla{max-width:680px;}

/* Cifras clave del informe en tarjetas */
#plan-detalle .metrics-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:22px;}
#plan-detalle .metric{display:flex; align-items:flex-start; gap:14px; background:var(--bg-0); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 1px 2px rgba(11,31,42,.04);}
#plan-detalle .metric--prin{background:linear-gradient(150deg,#F2FBFA,#E3F4F2); border-color:#BFE7E2;}
#plan-detalle .metric-ico{flex:none; width:40px; height:40px; border-radius:11px; background:var(--teal-dim); color:var(--teal-ink); display:flex; align-items:center; justify-content:center;}
#plan-detalle .metric-txt{min-width:0;}
#plan-detalle .metric-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); margin:2px 0 4px;}
#plan-detalle .metric-value{font-family:var(--font-display); font-size:26px; font-weight:700; line-height:1.15; color:var(--ink-0); letter-spacing:-.01em;}
#plan-detalle .metric-value small{font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink-2); letter-spacing:0;}
#plan-detalle .metric-nota{font-size:12.5px; color:var(--ink-2); margin-top:4px; line-height:1.4;}
#plan-detalle .metric-value .metric-precio{font-size:16px; font-weight:600;}
@media (max-width:1000px){
  #plan-detalle .metrics-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* el tiempo total ocupa la fila entera y, si queda una tarjeta suelta al
     final, también; así no quedan huecos */
  #plan-detalle .metric--prin, #plan-detalle .metric:last-child:nth-child(even){grid-column:1 / -1;}
}
@media (max-width:640px){
  #plan-detalle .metrics-grid{gap:8px;}
  #plan-detalle .metric{position:relative; display:block; padding:12px;}
  #plan-detalle .metric-ico{position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:8px;}
  #plan-detalle .metric-ico svg{width:15px; height:15px;}
  #plan-detalle .metric-label{padding-right:30px; min-height:26px;}
  #plan-detalle .metric-value{font-size:21px;}
  #plan-detalle .metric-value small{font-size:12px;}
  #plan-detalle .metric-nota{font-size:11.5px;}
  #plan-detalle .metric--prin .metric-value{font-size:26px;}
}
@media print{ #plan-detalle .metric{box-shadow:none;} }

/* Vehículo en ventana emergente (móvil, ≤900 px) */
.veh-cab, .veh-pie, .veh-fondo{display:none;}
@media (max-width:900px){
  #drawer-toggle-izq{display:none !important;}
  .panel-drawer--izq.panel-drawer--ventana{
    position:fixed; top:auto; left:0; right:0; bottom:0; width:auto; max-width:640px; margin:0 auto;
    max-height:min(88svh, 760px); border-radius:18px 18px 0 0; z-index:1200;
    box-shadow:0 -10px 40px rgba(7,24,32,.28); transform:translateY(0);
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .panel-drawer--izq.panel-drawer--ventana.closed{transform:translateY(105%); visibility:hidden; transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s;}
  .panel-drawer--ventana .drawer-hero, .panel-drawer--ventana #step1-t{display:none;}
  .panel-drawer--ventana .drawer-scroll{padding:6px 18px 12px; overscroll-behavior:contain;}
  .panel-drawer--ventana .veh-cab{display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 12px 10px 18px; border-bottom:1px solid var(--line-soft); flex:none;}
  .panel-drawer--ventana .veh-cab::before{content:""; position:absolute; top:6px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:var(--line);}
  .panel-drawer--ventana .veh-cab b{font-family:var(--font-display); font-size:17px; color:var(--ink-0);}
  .veh-x{width:40px; height:40px; border:none; border-radius:10px; background:var(--bg-2); color:var(--ink-1); font-size:24px; line-height:1; cursor:pointer;}
  .panel-drawer--ventana .veh-pie{display:block; flex:none; padding:10px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-soft); background:var(--bg-0);}
  .veh-listo{width:100%; border:none; border-radius:10px; padding:13px; background:var(--teal); color:var(--teal-deep);
    font-family:var(--font-display); font-weight:700; font-size:15px; cursor:pointer;}
  .veh-fondo{display:block; position:fixed; inset:0; z-index:1190; background:rgba(7,24,32,.45);}
  .veh-fondo[hidden]{display:none;}
  html.veh-ventana, html.veh-ventana body{overflow:hidden;}
}

/* Móvil con la ruta calculada: solo el mapa (simulador-ux.js, apartado 13) */
.barra-resultado, .inf-cab, .inf-fondo{display:none;}
@media (max-width:900px){
  html.modo-resultado #panel-ruta, html.modo-resultado .map-attrib-extra, html.modo-resultado .ocm-bar{display:none !important;}
  /* El resumen breve sobre el mapa no se usa en el móvil (ni al cambiar la ruta). */
  #resumen-mapa, #rs-reabrir{display:none !important;}
  html.modo-resultado .stage-mapa{height:calc(100svh - var(--alto-cab, 64px)); min-height:420px;}
  html.modo-resultado #reporte{display:none;}
  html.modo-resultado .barra-resultado{display:flex; gap:8px; position:absolute; left:10px; right:62px;
    bottom:calc(16px + env(safe-area-inset-bottom)); z-index:7;}
  .barra-resultado button{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 12px;
    border-radius:12px; font-family:var(--font-display); font-weight:700; font-size:14.5px; cursor:pointer; white-space:nowrap;
    box-shadow:0 6px 20px rgba(7,24,32,.22);}
  .barra-resultado .br-cambiar{background:var(--bg-0); color:var(--ink-0); border:1px solid var(--line);}
  .barra-resultado .br-informe{background:var(--teal); color:var(--teal-deep); border:1px solid transparent;}

  html.modo-resultado.informe-movil #reporte.show{display:block; position:fixed; z-index:1300; left:6px; right:6px; bottom:0;
    top:calc(8px + env(safe-area-inset-top)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--bg-0); border:none; border-radius:16px 16px 0 0; padding:0 16px 40px; box-shadow:0 -10px 40px rgba(7,24,32,.3);}
  html.informe-movil .inf-fondo{display:block; position:fixed; inset:0; z-index:1290; background:rgba(7,24,32,.5);}
  html.informe-movil, html.informe-movil body{overflow:hidden;}
  html.informe-movil .inf-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:5;
    margin:0 -16px 14px; padding:12px 12px 12px 18px; background:var(--bg-0); border-bottom:1px solid var(--line-soft);}
  html.informe-movil .inf-cab b{font-family:var(--font-display); font-size:17px; color:var(--ink-0);}
  .inf-x{width:40px; height:40px; border:none; border-radius:10px; background:var(--bg-2); color:var(--ink-1); font-size:24px; line-height:1; cursor:pointer;}
}

/* «Mi posición» en el buscador de cada punto */
.geo-item.geo-mipos b{display:inline-flex; align-items:center; gap:7px; color:var(--teal-ink);}
.geo-item.geo-mipos.sel, .geo-item.geo-mipos:hover{background:var(--teal-dim);}
/* Botón «Mi ubicación» del mapa mientras busca */
.yo-boton.buscando svg{animation:yo-pulso 1s ease-in-out infinite;}
@keyframes yo-pulso{50%{opacity:.35;}}
/* Paso 1 completo: «Siguiente» en verde */
.paso-siguiente.listo{background:var(--teal) !important; border-color:var(--teal) !important; color:var(--teal-deep) !important; font-weight:700;
  box-shadow:0 6px 18px rgba(14,168,154,.28);}

/* Ventanas (preferencias, redes, curva de carga, opciones) por encima de la
   ventana del vehículo y del informe del móvil: antes la de «tu nombre»
   (★) se abría detrás. */
.redes-capa{z-index:1400;}
.curva-modal, .opc-modal{z-index:1400 !important;}

/* «Salir» junto al saludo del menú */
.perfil-salir{background:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-family:var(--font-body); font-size:13px;
  color:var(--ink-1); cursor:pointer;}
.perfil-salir:hover{border-color:#C0392B; color:#C0392B;}
.perfil-salir[hidden]{display:none;}
.perfil-salir-btn{color:#B23A2B !important;}

/* Paradas de recarga del plan: más grandes y en otro color que los
   cargadores del mapa, para que destaquen */
.marker-parada{width:36px !important; height:36px !important; background:#0B1F2A !important; border:3px solid #fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.35) !important;}
.marker-parada .marker-parada-icon{font-size:18px;}
.marker-parada .marker-parada-num{width:19px; height:19px; font-size:11px; bottom:-6px; right:-6px; background:#EB6834;}
.marker-parada.descanso{background:#B7791F !important;}
@media (max-width:900px){
  .marker-parada{width:42px !important; height:42px !important;}
  .marker-parada .marker-parada-icon{font-size:21px;}
  .marker-parada .marker-parada-num{width:22px; height:22px; font-size:12.5px;}
  /* Móvil: el informe solo se ve en su ventana; el contador de cargadores
     bajo el mapa, fuera */
  html:not(.informe-movil) #reporte{display:none !important;}
  .ocm-bar{display:none !important;}
}
@media (max-width:860px){
  .site-header .perfil-chip{display:flex; align-items:center;}
  .site-header .perfil-salir{order:10; margin:6px 0 0; min-height:44px; border-radius:var(--r-sm); font-size:14px; font-weight:600;
    display:flex; align-items:center; justify-content:center; color:#B23A2B; border-color:#F0C9C2;}
}

/* Móvil: sin el botón de mapa a pantalla completa (el mapa ya ocupa la pantalla) */
@media (max-width:900px){ #ctrl-completo{display:none !important;} }

/* Texto para buscadores bajo el simulador y la calculadora (seo_textos.py) */
.seo-info{max-width:860px; margin:0 auto; padding:48px 24px 64px; color:var(--ink-1); font-size:15.5px; line-height:1.7;}
.seo-info h2{font-family:var(--font-display); font-size:clamp(20px,2.4vw,24px); color:var(--ink-0); margin:34px 0 10px; letter-spacing:-.01em;}
.seo-info h2:first-child{margin-top:0;}
.seo-info p{margin:0 0 12px;}
.seo-info ol, .seo-info ul{padding-left:22px; margin:0 0 12px;}
.seo-info li{margin:4px 0;}
.seo-info a{color:var(--teal-ink);}
.seo-faq{border:1px solid var(--line); border-radius:12px; background:var(--bg-0); margin:8px 0; padding:0 16px;}
.seo-faq summary{cursor:pointer; padding:13px 0; font-weight:600; color:var(--ink-0); list-style:none; position:relative; padding-right:28px;}
.seo-faq summary::-webkit-details-marker{display:none;}
.seo-faq summary::after{content:"+"; position:absolute; right:2px; top:9px; font-size:22px; color:var(--teal-ink); font-weight:400;}
.seo-faq[open] summary::after{content:"−";}
.seo-faq p{margin:0 0 14px;}
.seo-sim{border-top:1px solid var(--line-soft);}
@media (max-width:900px){ html.modo-resultado .seo-info{display:none;} .seo-info{padding:36px 18px 48px;} }
@media print{ .seo-info{display:none;} }

/* Paquete público: camiones en construcción (build_publicar.py) */
.nav-links a[href="camiones.html"]::after, .site-footer a[href="camiones.html"]::after{content:"Pronto";}
html[lang="en"] .nav-links a[href="camiones.html"]::after, html[lang="en"] .site-footer a[href="camiones.html"]::after{content:"Soon";}

/* Paquete público: sin la línea de datos de cargadores bajo el mapa (build_publicar.py) */
.map-attrib-extra{display:none !important;}