:root {
  --cal: #EEF0EB;
  --asfalto: #22262B;
  --bordillo: #5F656C;
  --ser-azul: #1F4FB3;
  --ser-verde: #2D7A4B;
  --linea: #D9DCD6;
  --papel: #F7F8F5;
  --busca: #A9AEB4;
  --aviso: #8A4B00;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cal);
  color: var(--asfalto);
  font: 400 17px/1.5 Barlow, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ser-azul); outline-offset: 2px; }

#app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; }
.screen {
  flex: 1; display: flex; flex-direction: column;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}
.screen[hidden] { display: none; }
.grow { flex: 1; min-height: 16px; }
.muted { color: var(--bordillo); }
.small { font-size: 15px; }
.title { font: 600 26px/1.2 Barlow, sans-serif; margin: 0; }
.top { margin: 0; font-size: 16px; color: var(--bordillo); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Planificar */
.search { display: flex; gap: 8px; margin-top: 16px; }
.search input {
  flex: 1; min-width: 0; height: 56px; border-radius: 14px; background: var(--papel);
  border: 2px solid var(--linea); padding: 0 16px; font-size: 18px;
}
.btn-secondary {
  height: 56px; border-radius: 14px; border: 0; padding: 0 18px;
  background: var(--asfalto); color: var(--cal); font-weight: 600;
}
.recent { list-style: none; margin: 20px 0 0; padding: 0; }
.recent button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 14px 0; border-bottom: 2px solid var(--linea); min-height: 56px;
}
.recent li:last-child button { border-bottom: 0; }
.recent b { display: block; font-weight: 600; font-size: 19px; }
.recent span { color: var(--bordillo); font-size: 15px; }
.status { min-height: 1.5em; margin: 12px 0 0; color: var(--bordillo); }
.status.error { color: var(--aviso); }
.radius { display: flex; gap: 8px; margin-top: 8px; }
.radius button {
  flex: 1; height: 52px; border-radius: 12px; border: 0; background: var(--papel);
  font-weight: 600; font-size: 18px;
}
.radius button[aria-checked="true"] { background: var(--asfalto); color: var(--cal); }
.filters { margin-top: 14px; font-size: 16px; color: var(--bordillo); }
.filters summary { cursor: pointer; padding: 6px 0; }
.toggles { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--asfalto); }
.toggle input { width: 22px; height: 22px; accent-color: var(--asfalto); }

.saved { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.saved button {
  min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--linea);
  background: var(--papel); font-weight: 600; font-size: 17px;
}
.saved button.home { background: var(--asfalto); color: var(--cal); border-color: var(--asfalto); }
.saved button.empty { color: var(--bordillo); font-weight: 500; border-style: dashed; }
.saved button.delete { border-color: var(--aviso); color: var(--aviso); }
.links.left { text-align: left; margin-top: 4px; }
.save-panel { display: grid; gap: 8px; margin-top: 8px; }
.save-panel button {
  min-height: 52px; border-radius: 14px; border: 2px solid var(--linea); background: var(--papel);
  font-size: 17px; font-weight: 500;
}

/* Resultado */
.back { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--bordillo); font-size: 16px; min-height: 44px; }
.headline { margin-top: 12px; }
.headline .num { display: block; font: 700 168px/0.82 "Barlow Condensed", sans-serif; letter-spacing: -0.04em; }
.headline .unit { display: block; margin-top: 8px; font: 600 30px/1.1 "Barlow Condensed", sans-serif; }
.headline .door { display: block; font: 700 64px/0.95 "Barlow Condensed", sans-serif; letter-spacing: -0.02em; }
.headline .door-note { display: block; margin-top: 10px; color: var(--bordillo); }
.where { margin: 14px 0 0; font-size: 18px; }
.where .detail { display: block; font-size: 15px; color: var(--bordillo); }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; background: var(--busca); }
.chip.verde { background: var(--ser-verde); }
.chip.azul { background: var(--ser-azul); }
.bars { margin-top: 22px; display: grid; gap: 14px; }
.bar-label { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
.bar-label b { font-weight: 600; }
.bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--linea); }
.bar i { display: block; height: 100%; }
.seg-coche { background: var(--asfalto); }
.seg-buscar { background: var(--busca); }
.seg-andar { background: var(--ser-verde); }
.legend { margin-top: 8px; font-size: 14px; color: var(--bordillo); display: flex; gap: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.cta {
  width: 100%; height: 64px; border: 0; border-radius: 16px; margin-top: 16px;
  background: var(--ser-azul); color: #fff; font: 600 21px Barlow, sans-serif;
}
.cta[disabled] { opacity: 0.6; }
.cta.big { height: 220px; border-radius: 28px; background: var(--asfalto); font: 700 46px/1 "Barlow Condensed", sans-serif; }
.cta.green { background: var(--ser-verde); }
.links { text-align: center; margin: 12px 0 0; color: var(--bordillo); }
.link { background: none; border: 0; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; color: var(--asfalto); min-height: 44px; }
.others { margin: 12px 0 0; padding: 0; list-style: none; }
.others button {
  width: 100%; text-align: left; background: var(--papel); border: 2px solid var(--linea);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; min-height: 56px;
}
.others b { font-weight: 600; }
.credit { font-size: 12px; color: var(--bordillo); text-align: center; margin: 12px 0 0; }
.credit.warn { color: var(--aviso); font-size: 14px; }

/* Trayecto */
.clock { margin: 16px 0 0; font: 700 64px/0.9 "Barlow Condensed", sans-serif; letter-spacing: -0.02em; }
.under-clock { margin: 4px 0 0; }
.facts { margin-top: 16px; display: grid; gap: 6px; font-size: 18px; }
.choices { display: grid; gap: 10px; margin-top: 20px; }
.choices button {
  height: 60px; border-radius: 14px; background: var(--papel); border: 2px solid var(--linea);
  text-align: left; padding: 0 18px; font-size: 19px; font-weight: 500;
}
.choices button:last-child { color: var(--bordillo); }

@media (prefers-reduced-motion: no-preference) {
  .cta, .radius button, .choices button { transition: transform 80ms ease-out; }
  .cta:active, .radius button:active, .choices button:active { transform: scale(0.98); }
}