/* La paleta vive en estas variables (app.js lee de aquí los colores del mapa).
   Móvil primero: todo está pensado para 360-430 px de ancho; el escritorio (≥900 px) se adapta al final. */
:root{
  --bg:#0b0d11; --ink:#f4f1ea; --mut:#8b919c; --acc:#ffb020; --win:#5dfc8d; --bad:#ff5a4d;
  --card:#12151bf2; --line:#ffffff1a; --campo:#ffffff0f;
  --tierra:#11141a; --agua:#07090c; --via:#252b36; --sombra:#000000; --luz:#3a4352; --neutro:#6b7380;
  --punta:#ffffff; --sobre-acc:#141005; --sobre-win:#06140c; --halo:0.6; --sombra-ui:#0008;
  --toque:48px; --r:18px;
  --sup:env(safe-area-inset-top,0px); --inf:env(safe-area-inset-bottom,0px);
}
/* Estilo 1, «claro y limpio»: el principal desde 2026-11-12. El oscuro de :root sale con ?tema=oscuro */
:root[data-tema=claro]{
  --bg:#f5f4f0; --ink:#15171c; --mut:#6b7079; --acc:#2563eb; --win:#0e9f55; --bad:#e5484d;
  --card:#fffffff7; --line:#0f172a14; --campo:#0f172a0a;
  --tierra:#ecebe6; --agua:#cfdbe6; --via:#ffffff; --sombra:#a9a49a; --luz:#ffffff; --neutro:#737a85;
  --punta:#15171c; --sobre-acc:#ffffff; --sobre-win:#ffffff; --halo:0.18; --sombra-ui:#0f172a1f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
[hidden]{display:none!important}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib{font:10px/1.2 system-ui!important;opacity:.55;background:transparent!important}
.maplibregl-ctrl-attrib a{color:var(--mut)!important}
.mono{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.velo{position:absolute;inset:0;pointer-events:none;transition:opacity .6s;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 94%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 150px,transparent 230px)}
body.inicio .velo{background:color-mix(in srgb,var(--bg) 55%,transparent)}

/* ---------- Pantalla inicial ---------- */
#form{position:absolute;left:0;right:0;top:0;z-index:5;background:var(--card);
  border-radius:0 0 26px 26px;padding:calc(18px + var(--sup)) 16px 16px;box-shadow:0 18px 50px var(--sombra-ui);
  display:flex;flex-direction:column;gap:12px}
body:not(.inicio) #form{display:none}
#form h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:-4px 0 2px;text-wrap:balance}
.rutas{display:flex;align-items:stretch;gap:10px}
.eje{flex:none;width:14px;display:flex;flex-direction:column;align-items:center;padding:22px 0}
.pto{width:10px;height:10px;border-radius:50%;border:2.5px solid var(--ink);flex:none}
.pto.fin{border-radius:3px;background:var(--acc);border-color:var(--acc)}
.linea{flex:1;width:2px;margin:4px 0;background:repeating-linear-gradient(var(--mut) 0 3px,transparent 3px 7px)}
.campos{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.campo{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.campo input{width:100%;height:52px;background:var(--campo);border:1.5px solid transparent;border-radius:14px;padding:0 14px;font-size:17px;outline:none;appearance:none;-moz-appearance:textfield}
.campo input::-webkit-inner-spin-button,.campo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.campo input:focus{border-color:var(--acc);background:transparent}
.campo input::placeholder{color:var(--mut)}
.icono{flex:none;align-self:center;width:var(--toque);height:var(--toque);border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--ink)}
.icono:active{transform:scale(.94)}
.sug{position:absolute;left:0;right:0;top:100%;margin-top:6px;list-style:none;max-height:min(330px,52vh);overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;z-index:20;box-shadow:0 20px 50px var(--sombra-ui)}
.sug:empty{display:none}
.sug li{padding:12px 14px;min-height:var(--toque);cursor:pointer;font-size:16px;line-height:1.2;border-top:1px solid var(--line)}
.sug li:first-child{border-top:0}
.sug li small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.sug li:hover,.sug li.on{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--campo);border-radius:14px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:grid;place-items:center;height:44px;border-radius:11px;font-weight:600;font-size:15.5px;color:var(--mut);cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--card);color:var(--ink);box-shadow:0 2px 8px var(--sombra-ui)}
.seg input:focus-visible+span{outline:2px solid var(--acc)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unidad{position:relative;display:block}
.unidad em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mut);font-size:15px;pointer-events:none}
.unidad input{padding-right:58px}
.ayuda{font-size:13px;line-height:1.35;color:var(--mut);margin-top:-2px}
#btn{position:relative;height:56px;margin-top:2px;background:var(--acc);color:var(--sobre-acc);border:0;border-radius:16px;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
#btn:active{transform:scale(.985)}
#btn .rueda{display:none;border-color:color-mix(in srgb,var(--sobre-acc) 35%,transparent);border-top-color:var(--sobre-acc)}
#btn.cargando{cursor:wait}
#btn.cargando .rueda{display:block}
#btn.cargando #btn-txt{font-weight:600;font-size:15px}
.enlace{background:none;border:0;color:var(--mut);font-size:14px;text-decoration:underline;text-underline-offset:3px;min-height:40px;padding:0 6px}
.enlace:hover{color:var(--ink)}
.error{color:var(--bad);font-size:14.5px;line-height:1.3;font-weight:600}
.rueda{width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--acc);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- Resultado: cabecera ---------- */
#ui{position:absolute;inset:0;pointer-events:none}
.arriba{position:absolute;left:0;right:0;top:0;padding:calc(10px + var(--sup)) 16px 0}
.ruta{pointer-events:auto;display:flex;align-items:center;gap:8px;height:44px;max-width:100%;padding:0 14px 0 8px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 6px 20px var(--sombra-ui);font-size:14.5px}
.ruta svg{flex:none}
.r-txt{display:flex;align-items:center;gap:7px;min-width:0}
.r-txt b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.r-txt i{flex:none;width:16px;height:2px;background:var(--acc);border-radius:2px}
.ruta .mono{padding-left:8px;border-left:1px solid var(--line);white-space:nowrap}
.num{margin-top:12px;display:flex;align-items:flex-start;gap:4px;line-height:.8}
.num b{font-size:64px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.num sup{font-size:26px;font-weight:800;margin-top:4px;color:var(--acc)}
.lema{margin-top:8px;font-size:13.5px;line-height:1.28;max-width:300px;color:color-mix(in srgb,var(--ink) 75%,transparent)}
.lema b{color:var(--ink)}
.extremo{font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 5px var(--tierra),0 0 5px var(--tierra),0 0 5px var(--tierra);transform:translateY(-14px);pointer-events:none;white-space:nowrap}

/* ---------- Hoja inferior: tres alturas (baja, media, alta), sin velo, el mapa sigue usable ---------- */
.hoja{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 64px - var(--sup));z-index:10;
  background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -10px 40px var(--sombra-ui);backdrop-filter:blur(14px);
  transform:translateY(calc(100% - var(--vis,0px)));transition:transform .45s cubic-bezier(.2,.9,.2,1);display:flex;flex-direction:column;touch-action:none}
.hoja.arrastre{transition:none}
.asa{flex:none;height:26px;display:grid;place-items:center;cursor:grab}
.asa i{width:40px;height:5px;border-radius:9px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.cuerpo{flex:1;min-height:0;overflow:hidden;padding:0 16px calc(16px + var(--inf))}
.hoja[data-nivel=alta] .cuerpo{overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.perfil .cab{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
canvas{display:block;width:100%;height:46px}
.ejes{display:flex;justify-content:space-between;margin-top:4px}
.ficha{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.f-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.quien{min-width:0}
.ficha h2{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mun{font-size:13.5px;line-height:1.3;color:var(--mut);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ahorro{text-align:right;flex:none;line-height:.9;padding-top:14px}
.ahorro b{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--win);font-variant-numeric:tabular-nums;white-space:nowrap}
.ahorro b.mal{color:var(--bad)}
.ahorro .mono{display:block;margin-top:6px}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.datos div{background:var(--campo);border-radius:12px;padding:10px 10px 9px}
.datos b{display:block;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.datos .mono{font-size:9.5px}
.aviso{margin-top:10px;font-size:14px;font-weight:600;color:var(--win)}
.aviso.no{color:var(--bad)}
.botones{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.boton{display:flex;align-items:center;justify-content:center;height:var(--toque);border-radius:14px;background:var(--ink);color:var(--bg);font-weight:700;font-size:15.5px;text-decoration:none;border:0}
.boton.sec{background:var(--campo);color:var(--ink)}
.boton:active{transform:scale(.985)}
.extra{margin-top:18px;display:flex;flex-direction:column;gap:18px}
.bloque{display:flex;flex-direction:column;gap:8px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;touch-action:pan-x}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px;padding:0 15px;border-radius:99px;font-size:14px;font-weight:600;background:var(--campo);border:1px solid transparent;color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg)}
.lista{list-style:none;display:flex;flex-direction:column}
.lista button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 0;min-height:56px}
.lista li:first-child button{border-top:0}
.lista .n{font-weight:700;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .s{grid-column:1;font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista .p{grid-row:1/3;grid-column:2;text-align:right;font-variant-numeric:tabular-nums}
.lista .p b{display:block;font-size:16px}
.lista .p small{font-size:12.5px;font-weight:600}
.lista .ok{color:var(--win)} .lista .no{color:var(--bad)} .lista .m{color:var(--mut)}
.lista button.on .n{color:var(--acc)}
.acciones{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:6px}

/* ---------- Marcadores del mapa ---------- */
.cabeza{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 45%,transparent),0 0 26px 8px var(--acc);pointer-events:none}
.gana{position:relative;width:20px;height:20px;border-radius:50%;background:var(--win);border:3px solid #fff;box-shadow:0 0 18px 2px var(--win);pointer-events:none}
.gana:before,.gana:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--win);animation:onda 1.8s ease-out infinite}
.gana:after{animation-delay:.9s}
.gana.mal{background:var(--bad);box-shadow:0 0 18px 2px var(--bad)}
.gana.mal:before,.gana.mal:after{border-color:var(--bad)}
@keyframes onda{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.precio{font:700 13px 'JetBrains Mono',monospace;padding:5px 8px;border-radius:9px;background:var(--win);color:var(--sobre-win);transform:translateY(-20px);white-space:nowrap;box-shadow:0 6px 20px var(--sombra-ui);pointer-events:none}
.precio.mal{background:var(--bad)}

/* Ficha flotante: solo con ratón (en táctil, los datos van en la hoja) */
#tip{position:absolute;z-index:30;pointer-events:none;min-width:210px;max-width:270px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 18px 50px var(--sombra-ui);font-size:13.5px;line-height:1.35}
#tip h3{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
#tip .sub{color:var(--mut);font-size:12.5px;margin-bottom:8px}
#tip .p{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#tip .p small{font-size:13px;font-weight:600;color:var(--mut)}
#tip .l{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
#tip .l b{font-variant-numeric:tabular-nums;white-space:nowrap}
#tip .ok{color:var(--win)} #tip .no{color:var(--bad)}

/* Con la hoja subida, la cabecera se encoge para dejar más mapa a la vista */

body[data-nivel=media] .lema,body[data-nivel=alta] .lema{display:none}
body[data-nivel=media] .num b,body[data-nivel=alta] .num b{font-size:40px}
body[data-nivel=media] .num sup,body[data-nivel=alta] .num sup{font-size:18px}

/* ---------- Pantallas bajas (iPhone SE y similares) ---------- */
@media (max-height:700px){
  #form{gap:10px}
  #form h1{font-size:24px}
  .ayuda{display:none}
  .num b{font-size:52px}
}

/* ---------- Escritorio: formulario centrado y panel a la izquierda ---------- */
@media (min-width:900px){
  body[data-nivel] .lema{display:block} body[data-nivel] .num b{font-size:96px} body[data-nivel] .num sup{font-size:34px}
  #form{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:440px;border-radius:28px;padding:26px 24px 20px}
  #form h1{font-size:34px}
  .velo{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent) 0,transparent 520px)}
  .arriba{left:24px;right:auto;top:24px;width:420px;padding:0}
  .num b{font-size:96px}
  .num sup{font-size:34px}
  .lema{font-size:15px;max-width:360px}
  .hoja{left:24px;right:auto;bottom:24px;width:420px;height:auto;max-height:calc(100% - 290px);border-radius:24px;transform:none;transition:opacity .4s;touch-action:auto}
  .asa{display:none}
  .cuerpo{overflow-y:auto;padding-top:16px}
  canvas{height:60px}
}