:root{
  color-scheme:light dark;
  --bg:#f3f5fb; --surface:#ffffff; --surface-2:#e9edf8;
  --ink:#1c2340; --ink-soft:#4a5278; --ink-faint:#636b90;
  --line:#d3d9ec;
  --accent:#3457d5; --accent-ink:#1c2c6e; --accent-bg:#e3e9fc;
  --public:#2f7d52; --public-bg:#e4f2e9;
  --private:#c23c4f; --private-bg:#fbe7ea;
  --undef:#636b90; --undef-bg:#eceef6;
  /* solo para lo que flota de verdad: panel de detalle, sugerencias, popups */
  --shadow-float: 0 2px 6px rgba(28,35,64,.08), 0 16px 40px -12px rgba(28,35,64,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#10142a; --surface:#171c38; --surface-2:#222850;
    --ink:#eceffb; --ink-soft:#b9bfdc; --ink-faint:#9097b8;
    --line:#343b6b;
    --accent:#7d92ee; --accent-ink:#dbe2ff; --accent-bg:#283062;
    --public:#5cb583; --public-bg:#17301f;
    --private:#e88b96; --private-bg:#3a1c22;
    --undef:#9097b8; --undef-bg:#252b52;
    --shadow-float: 0 2px 6px rgba(0,0,0,.3), 0 16px 40px -12px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
  overflow:hidden;
  display:flex; flex-direction:column;
  -webkit-tap-highlight-color:color-mix(in srgb, var(--accent) 18%, transparent);
}
h1,h2,h3{font-family:'Outfit',system-ui,sans-serif;margin:0;letter-spacing:-.01em;text-wrap:balance}
a,button,input,select,label{touch-action:manipulation}
.num{font-variant-numeric:tabular-nums}

/* ---- foco visible y movimiento reducido ---- */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:3000;
  background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:999px;
  font-weight:600; text-decoration:none; transition:top .15s;
}
.skip-link:focus{top:12px}
.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;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important; animation-duration:0s !important; scroll-behavior:auto !important}
  .peaje-pin:hover, .swap-btn:hover{transform:none !important}
}

/* ---- header ---- */
#header{
  flex:none; z-index:1000;
  background:var(--surface);
  padding:12px 18px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
}
.brand{
  font-size:22px; font-weight:700; letter-spacing:-.015em; color:var(--ink);
  text-decoration:none; margin:0;
}
.brand a{color:inherit; text-decoration:none}
.site-nav{display:flex; gap:4px}
.site-nav a{
  font-weight:600; font-size:15px; color:var(--ink-soft);
  text-decoration:none; padding:8px 14px; border-radius:999px; transition:background .15s,color .15s;
}
.site-nav a:hover{background:var(--surface-2); color:var(--ink)}
.site-nav a[aria-current="page"]{background:var(--accent-bg); color:var(--accent-ink)}

/* ---- toolbar (stats + filtros del mapa/lista) ---- */
#toolbar{
  flex:none; z-index:900;
  background:var(--surface-2);
  padding:10px 18px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
}
.stats{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:baseline;margin:0}
.stat{display:flex;align-items:baseline;gap:6px;line-height:1.2}
.stat b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:14px;color:var(--ink-soft)}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-left:auto}
.select-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border-radius:999px;
  padding:8px 14px; min-width:240px;
}
.select-wrap:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.select-wrap svg{flex:none;color:var(--ink-faint)}
.select-wrap select{
  border:0;outline:none;background-color:var(--surface);color:var(--ink);font-family:inherit;
  font-size:15px;width:100%;cursor:pointer;
}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:0;background:var(--surface);color:var(--ink-soft);
  font-family:inherit;font-weight:600;
  font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:6px;user-select:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.chip:hover{color:var(--ink)}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.list-toggle{display:none}

/* ---- layout ---- */
#main{
  flex:1; min-height:0;
  display:flex; position:relative;
}
#sidebar{
  width:340px; flex:none; background:var(--surface);
  display:flex; flex-direction:column; overflow:hidden;
}
.sidebar-count{padding:14px 18px 6px; font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.list{flex:1; overflow-y:auto; padding:4px 8px 8px; overscroll-behavior:contain}
.list-item{
  width:100%; text-align:left; font:inherit; color:inherit; background:transparent; border:0;
  padding:10px 10px; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  transition:background .15s;
}
.list-item:hover{background:var(--surface-2)}
.list-item.active{background:var(--accent-bg)}
.li-top{display:flex; align-items:center; gap:8px}
.li-dot{width:8px;height:8px;border-radius:50%;flex:none}
.li-name{font-weight:600; font-size:15px; min-width:0; overflow-wrap:anywhere}
.li-sub{font-size:13px; color:var(--ink-soft); padding-left:16px; overflow-wrap:anywhere}
.li-price{font-size:13px; color:var(--ink-soft); padding-left:16px; font-variant-numeric:tabular-nums}

#map{flex:1; height:100%}
#map.leaflet-container{background:var(--bg)}

/* leaflet marker styling via divIcon */
.peaje-pin{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transition: transform .1s;
}
.peaje-pin:hover{ transform: scale(1.12); transform-origin: bottom center; }
.marker-cluster-peajes{
  background:var(--surface); border:2px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.marker-cluster-peajes span{
  font-weight:700; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.popup{font-family:'Outfit',sans-serif;font-size:14px;min-width:180px;color:#1c2340}
.popup-name{font-weight:700;font-size:16px}
.popup-op{color:#4a5278;margin:2px 0 6px}
.popup-price{font-weight:600;font-variant-numeric:tabular-nums}
.popup-km{color:#4a5278;font-size:13px;margin-top:4px}

/* ---- detail sheet ---- */
.detail-sheet{
  position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw;
  background:var(--surface); box-shadow:var(--shadow-float);
  z-index:2000; overflow-y:auto; overscroll-behavior:contain; padding:22px 22px 32px;
}
.close-btn{
  position:absolute; top:14px; right:14px; border:0; background:var(--surface-2);
  width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
}
.close-btn:hover{background:var(--accent-bg); color:var(--accent-ink)}
.d-badge{
  font-weight:600; font-size:13px; padding:4px 12px; border-radius:999px;
  display:inline-block; margin-top:6px;
}
.d-badge.invias{background:var(--public-bg);color:var(--public)}
.d-badge.concesion{background:var(--private-bg);color:var(--private)}
.d-badge.pordefinir{background:var(--undef-bg);color:var(--undef)}
.d-name{font-size:24px;font-weight:700;letter-spacing:-.015em;margin-top:10px;padding-right:40px}
.d-route{color:var(--ink-soft);font-size:15px;line-height:1.5;margin-top:6px}
.d-op{font-size:15px;color:var(--ink-soft);margin-top:10px}
.d-op b{color:var(--ink);font-weight:600}
.tariff-table{width:100%;border-collapse:collapse;font-size:15px;margin-top:18px}
.tariff-table th{
  text-align:left;font-size:13px;color:var(--ink-soft);font-weight:600;
  padding-bottom:6px;border-bottom:1px solid var(--line);
}
.tariff-table td{padding:7px 0;border-bottom:1px solid var(--line)}
.tariff-table td:last-child, .tariff-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.tariff-table td:last-child{font-weight:600}
.tariff-table tr:last-child td{border-bottom:none}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;font-size:15px;margin:18px 0 0}
.meta-grid dt{color:var(--ink-soft);font-size:13px;margin-bottom:2px}
.meta-grid dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ficha-link{
  display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;margin-top:20px;
  color:var(--accent-ink);background:var(--accent-bg);
  padding:9px 16px;border-radius:999px;text-decoration:none;transition:background .15s;
}
.ficha-link:hover{background:color-mix(in srgb, var(--accent) 28%, var(--surface))}

/* mobile */
@media (max-width: 820px){
  #header{padding:10px 14px; gap:6px 16px}
  .brand{font-size:19px}
  .site-nav a{padding:7px 11px; font-size:14px}
  #toolbar{padding:8px 14px; gap:8px}
  .stats{gap:4px 14px}
  .stat b{font-size:16px}
  .stat span{font-size:13px}
  .controls{margin-left:0; width:100%}
  .select-wrap{flex:1; min-width:0}
  .chips{flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none; overscroll-behavior-x:contain}
  .chips::-webkit-scrollbar{display:none}
  .list-toggle{
    display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px;
    background:var(--ink); color:var(--surface); font:inherit; font-weight:600; font-size:14px;
    padding:9px 14px; cursor:pointer; flex:none;
  }
  #sidebar{
    display:none; position:absolute; inset:0; width:auto; z-index:1100;
  }
  body.show-list #sidebar{display:flex}
}

/* ============ páginas de contenido (Ruta, Dashboard, Acerca) ============ */
body.content-page{ overflow-y:auto; overflow-x:hidden; display:block; }
.page{ max-width:1080px; margin:0 auto; padding:40px 20px 72px; display:flex; flex-direction:column; gap:28px; }
.page-head{ display:flex; flex-direction:column; gap:10px; }
.page-head h1{ font-size:clamp(30px,4.4vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.page-head p{ color:var(--ink); font-size:17px; line-height:1.6; max-width:62ch; margin:0; }
.section-head{ display:flex; flex-direction:column; gap:8px; padding-top:16px; }
.section-head h2{ font-size:clamp(24px,3vw,30px); font-weight:700; letter-spacing:-.015em; }
.section-head p{ color:var(--ink); font-size:16px; line-height:1.6; max-width:65ch; margin:0; }

.card{
  background:var(--surface); border-radius:14px; padding:22px 24px;
}
.card h2{ font-size:19px; font-weight:700; margin-bottom:4px; }
.card .card-sub{ color:var(--ink-soft); font-size:14px; line-height:1.45; margin:0 0 16px; }
.page-foot{ text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6; padding-top:8px; margin:0; }
.page-foot a{ color:inherit; }

.source-list{ display:flex; flex-direction:column; gap:30px; margin-top:6px; }
.source-card{ display:flex; flex-direction:column; gap:10px; }
.source-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.source-name{ font-size:18px; font-weight:700; margin:0; }
.source-tag{
  font-weight:600; font-size:13px; padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.source-tag.primary{ background:var(--accent-bg); color:var(--accent-ink); }
.source-tag.support{ background:var(--surface-2); color:var(--ink-soft); }
.source-desc{ color:var(--ink); font-size:16px; line-height:1.6; margin:0; max-width:66ch; }
.source-desc a{ color:inherit; }
.source-meta{ display:flex; flex-wrap:wrap; gap:14px 28px; font-size:15px; margin:4px 0 0; }
.source-meta dt{ color:var(--ink-soft); font-size:13px; margin-bottom:2px; }
.source-meta dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.source-link{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:600;
  color:var(--accent-ink); background:var(--accent-bg); padding:8px 16px; border-radius:999px; text-decoration:none;
  transition:background .15s;
}
.source-link:hover{ background:color-mix(in srgb, var(--accent) 28%, var(--surface)); }

.steps{ display:flex; flex-direction:column; gap:22px; margin:0; padding:0; list-style:none; counter-reset:step; }
.steps > li{ display:flex; gap:16px; counter-increment:step; }
ol.steps > li::before{
  content:counter(step);
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent-bg); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
ul.steps > li::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--private); margin-top:9px;
}
.step-body b{ display:block; font-size:17px; margin-bottom:4px; }
.step-body p{ color:var(--ink); font-size:16px; line-height:1.6; margin:0; max-width:66ch; }

/* dashboard */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.kpi{
  background:var(--surface); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.kpi b{ font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi span{ font-size:14px; color:var(--ink-soft); line-height:1.35; }
.chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-grid .card{ min-width:0; }
.chart-grid canvas{ max-width:100%; }
.rank-list{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
.rank-row{ display:flex; align-items:center; gap:12px; padding:8px 0; font-size:15px; }
.rank-btn{
  width:100%; text-align:left; font:inherit; color:inherit; background:transparent; border:0;
  cursor:pointer; border-radius:10px; margin:0; padding:8px 10px; transition:background .15s;
}
.rank-btn:hover{ background:var(--surface-2); }
.rank-pos{ color:var(--ink-soft); font-size:14px; width:20px; flex:none; font-variant-numeric:tabular-nums; }
.rank-name{ flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.rank-sub{ display:block; color:var(--ink-soft); font-size:13px; font-weight:400; margin-top:1px; }
.rank-val{ font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rank-row-muted .rank-name{ color:var(--ink-soft); }
.rank-row-muted .rank-val{ font-weight:400; font-size:13px; color:var(--ink-soft); white-space:normal; text-align:right; max-width:120px; }
.bar-row{ display:flex; align-items:center; gap:12px; font-size:14px; padding:5px 0; }
.bar-label{ width:170px; flex:none; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; background:var(--surface-2); border-radius:999px; height:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background:var(--accent); }
.bar-val{ width:40px; text-align:right; flex:none; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.bar-val.wide{ width:72px; }

@media (max-width:760px){
  .page{ padding-top:28px; }
  .chart-grid{ grid-template-columns:1fr; }
  .bar-label{ width:110px; }
}

/* ============ calculador de ruta ============ */
.route-form{ display:flex; flex-direction:column; gap:16px; margin:0; }
.route-inputs{
  display:grid; grid-template-columns:1fr auto 1fr auto auto; gap:10px; align-items:end;
}
.autocomplete, .cat-select{ position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; }
.autocomplete label, .cat-select label{
  font-size:14px; font-weight:600; color:var(--ink-soft); line-height:1.2;
}
.autocomplete input, .cat-select select{
  height:44px; box-sizing:border-box;
  border:1px solid var(--line); background-color:var(--surface-2); border-radius:10px; padding:0 14px;
  font-family:inherit; font-size:16px; color:var(--ink); min-width:0;
  transition:border-color .15s, background-color .15s;
}
.autocomplete input::placeholder{ color:var(--ink-faint); }
.cat-select select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636b90' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:36px; cursor:pointer;
}
.autocomplete input:focus, .cat-select select:focus{ border-color:var(--accent); background-color:var(--surface); }
.ac-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
  background:var(--surface); border-radius:12px; box-shadow:var(--shadow-float);
  max-height:280px; overflow-y:auto; overscroll-behavior:contain; padding:6px; margin:0; list-style:none;
}
.ac-item{ padding:9px 10px; border-radius:8px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; font-size:15px; }
.ac-item:hover, .ac-item[aria-selected="true"]{ background:var(--surface-2); }
.ac-item b{ font-weight:600; min-width:0; }
.ac-item span{ color:var(--ink-soft); font-size:14px; white-space:nowrap; }
.ac-empty{ padding:10px; color:var(--ink-soft); font-size:15px; }
.swap-btn{
  flex:none; align-self:end; width:44px; height:44px; border-radius:50%; border:0; background:var(--surface-2);
  color:var(--ink-soft); font-size:17px; cursor:pointer; transition:background .15s,transform .15s;
}
.swap-btn:hover{ background:var(--accent-bg); color:var(--accent-ink); transform:rotate(180deg); }
.calc-btn{
  align-self:end; height:44px; box-sizing:border-box;
  font-family:inherit; font-weight:700; font-size:16px; color:#fff; background:var(--accent);
  border:0; border-radius:999px; padding:0 24px; cursor:pointer; white-space:nowrap;
  transition:background .15s, transform .1s;
}
@media (prefers-color-scheme: dark){ .calc-btn{ color:#10142a; } }
.calc-btn:hover{ background:color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.calc-btn:active{ transform:scale(.98); }
.calc-btn:disabled{ opacity:.6; cursor:progress; }
.route-status{ font-size:15px; color:var(--ink-soft); margin:0; }
.route-status:empty{ display:none; }
.route-status.error{ color:var(--private); font-weight:600; }
.avoid-tolls{
  display:flex; align-items:center; gap:8px; font-size:15px; color:var(--ink);
  cursor:pointer; width:fit-content; user-select:none;
}
.avoid-tolls input{ width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }

#resultsWrap{ display:flex; flex-direction:column; gap:20px; }
#resultsWrap[hidden]{ display:none; }
.route-note{
  margin:0; padding:12px 16px; font-size:15px; line-height:1.55; color:var(--ink);
  background:var(--accent-bg); border-radius:12px;
}
.route-note a{ color:inherit; }
.route-grid{ grid-template-columns:1.4fr 1fr; align-items:stretch; }
.map-card{ padding:0; overflow:hidden; }
#routeMap{ height:460px; width:100%; }
#tollsList{ max-height:420px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }

.route-options{ display:flex; gap:10px; flex-wrap:wrap; }
.route-options[hidden]{ display:none; }
.route-option{
  flex:1 1 200px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  background:var(--surface); border:2px solid transparent; border-radius:14px; padding:12px 16px;
  font-family:inherit; color:var(--ink); transition:border-color .15s, background .15s;
}
.route-option:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.route-option[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-bg); }
.route-option-label{ font-weight:700; font-size:16px; }
.route-option-stats{ font-size:14px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.route-option-badges{ display:flex; gap:5px; flex-wrap:wrap; min-height:22px; }
.route-badge{
  font-weight:600; font-size:13px; color:var(--accent-ink);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border-radius:999px; padding:2px 9px;
}

@media (max-width:900px){
  .route-inputs{ grid-template-columns:1fr; }
  .swap-btn{ align-self:center; transform:rotate(90deg); }
  .swap-btn:hover{ transform:rotate(270deg); }
  .calc-btn{ width:100%; }
  .route-grid{ grid-template-columns:1fr; }
  #routeMap{ height:320px; }
}

/* destinos de salto (main, filtros) reciben foco por script: sin anillo */
[tabindex="-1"]:focus{outline:none}
.leaflet-bar a{font-family:'Outfit',system-ui,sans-serif}
.chip-n{font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
.list-empty{padding:16px 10px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.list-empty p{margin:0;font-size:15px;line-height:1.5}
.list-empty .source-link{border:0;cursor:pointer;font-family:inherit}