/* ===================================================================================
   Viajes — design system
   One stylesheet for every trip page. Colours come only from the tokens on :root;
   each trip overrides them inline (see docs/design-system.md). Do not add colours here.
   =================================================================================== */

:root {
  --paper:#E7ECEA; --surface:#F7F9F8; --sea:#E0E7E7; --land:#B4C5BB; --land-2:#CFD9D3;
  --ink:#182524; --muted:#5A6C6B; --faint:#8A9997; --line:#C2CECB; --hair:#D2DBD8;
  --accent:#B44F35; --accent-soft:#D8B6A7; --accent-ink:#8E3D28; --todo:#94752B;
  --display:"Libre Caslon Display","Iowan Old Style",Georgia,serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0F1615; --surface:#18211F; --sea:#151F20; --land:#2B3A37; --land-2:#1F2B29;
    --ink:#E2E9E6; --muted:#93A6A3; --faint:#6E807E; --line:#2C3936; --hair:#24302E;
    --accent:#DE7855; --accent-soft:#4A2E23; --accent-ink:#E89273; --todo:#D9B45C;
  }
}
:root[data-theme="dark"] {
  --paper:#0F1615; --surface:#18211F; --sea:#151F20; --land:#2B3A37; --land-2:#1F2B29;
  --ink:#E2E9E6; --muted:#93A6A3; --faint:#6E807E; --line:#2C3936; --hair:#24302E;
  --accent:#DE7855; --accent-soft:#4A2E23; --accent-ink:#E89273; --todo:#D9B45C;
}

/* ---- base ------------------------------------------------------------------------ */
* { box-sizing:border-box; }
body { background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:15.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  /* mata el zoom por doble toque; el pellizco lo corta el script de layout.ts.
     El mapa se pone `touch-action:none` por su cuenta cuando está ampliado. */
  touch-action:manipulation; }
.wrap { max-width:1320px; margin:0 auto; padding-inline:24px; padding-block:44px 64px; }
@media (max-width:640px) { .wrap { padding-inline:18px; padding-block:32px 48px; } }

.eyebrow { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
h1 { font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,6vw,4rem);
  line-height:1.02; margin:0; letter-spacing:-.015em; text-wrap:balance; }

.stats { display:flex; flex-wrap:wrap; gap:0; margin-top:34px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat { flex:1 1 130px; padding:16px 20px 15px; border-left:1px solid var(--hair); }
.stat:first-child { border-left:0; padding-left:0; }
.stat-v { font-family:var(--mono); font-size:1.45rem; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.stat-l { font-size:12px; color:var(--faint); letter-spacing:.04em; margin-top:2px; }

.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); gap:56px;
  margin-top:38px; align-items:start; }
@media (max-width:980px) { .cols { grid-template-columns:1fr; gap:44px; } }

.mapwrap { position:sticky; top:20px; order:2; }
.mainline { min-width:0; order:1; }
.mainline .track { margin-top:30px; }
.mainline .car:first-child { margin-top:0; }
@media (max-width:980px) { .mapwrap { position:static; order:-1; } }
.mapbox { position:relative; }
.map { display:block; width:100%; height:auto; max-height:calc(100vh - 150px);
  border:1px solid var(--line); border-radius:3px; background:var(--sea);
  user-select:none; -webkit-user-select:none; }
@media (max-width:980px) { .map { max-height:none; } }
.sea-bg { fill:var(--sea); }
.land { fill:var(--land); stroke:var(--line); stroke-width:1; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; }
.land-far { fill:var(--land-2); stroke:none; }
.route { fill:none; stroke:var(--accent); stroke-width:2.8; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.route-halo { fill:none; stroke:var(--sea); stroke-width:7; stroke-linecap:round;
  stroke-linejoin:round; opacity:.9; vector-effect:non-scaling-stroke; }
.mk { fill:var(--accent); stroke:var(--sea); stroke-width:2; vector-effect:non-scaling-stroke; }
.mk-hero { fill:var(--accent-ink); }
:root[data-theme="dark"] .mk-hero { fill:var(--accent-ink); }
.mknum { fill:var(--sea); font-family:var(--mono); font-weight:600; }
.mklab { fill:var(--ink); font-family:var(--body); font-weight:600;
  paint-order:stroke; stroke:var(--sea); stroke-width:3.5px; stroke-linejoin:round; }
.mksub { fill:var(--muted); font-family:var(--mono); letter-spacing:.06em;
  paint-order:stroke; stroke:var(--sea); stroke-width:3px; stroke-linejoin:round; }
.wp { fill:var(--sea); stroke:var(--muted); stroke-width:1.7; vector-effect:non-scaling-stroke; }
.wplab { fill:var(--muted); font-family:var(--body); font-style:italic;
  paint-order:stroke; stroke:var(--sea); stroke-width:3px; stroke-linejoin:round; }
.badge { fill:var(--accent); }
.badge-t { fill:var(--paper); font-family:var(--mono); font-weight:600; letter-spacing:.02em; }
:root[data-theme="dark"] .badge-t { fill:#0F1615; }

.map .mk, .map .mknum, .map .mklab, .map .mksub, .map .wp, .map .wplab,
.map .badge, .map .badge-t, .map .route, .map .route-halo, .focusring {
  transition:opacity .34s ease; }
.map.live .mk, .map.live .mknum, .map.live .mklab, .map.live .mksub { opacity:.2; }
.map.live .wp, .map.live .wplab { opacity:.14; }
.map.live .badge, .map.live .badge-t { opacity:0; }
.map.live .route { opacity:.18; }
.map.live .route-halo { opacity:.3; }
.map.live .on { opacity:1; }
.map.live .route-halo.on { opacity:.9; }
.focusring { fill:none; stroke:var(--accent); stroke-width:1.6; opacity:0;
  vector-effect:non-scaling-stroke;
  transition:opacity .3s ease, cx .5s cubic-bezier(.4,0,.2,1), cy .5s cubic-bezier(.4,0,.2,1); }
.focusring.on { opacity:.7; }
@media (max-width:980px) { .map.live .mk, .map.live .mknum, .map.live .mklab, .map.live .mksub,
  .map.live .wp, .map.live .wplab, .map.live .badge, .map.live .badge-t,
  .map.live .route, .map.live .route-halo { opacity:1; }
  .focusring { display:none; } }

.zoom { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.zoom button { width:34px; height:34px; border:0; background:var(--surface); color:var(--ink);
  font-family:var(--mono); font-size:16px; line-height:1; cursor:pointer; display:grid;
  place-items:center; padding:0; }
.zoom button:hover:not(:disabled) { background:var(--accent); color:var(--paper); }
.zoom button:disabled { color:var(--faint); cursor:default; }
.zoom button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.zoom .zreset { font-size:12px; }
.map-cap { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em;
  margin:12px 0 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.track { position:relative; padding-left:44px; }
.track::before { content:""; position:absolute; left:15px; top:14px; bottom:28px; width:2px;
  background:var(--accent-soft); }
.stop { position:relative; padding:2px 0 4px; }
.stop-mark { position:absolute; left:-44px; top:1px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:var(--paper);
  font-family:var(--mono); font-size:13px; font-weight:600; box-shadow:0 0 0 5px var(--paper); }
.stop-mark-end { background:var(--ink); font-size:14px; }
.stop-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.stop h3 { font-family:var(--display); font-weight:400; font-size:1.85rem; margin:0;
  letter-spacing:-.01em; line-height:1.15; }
.stop-nights { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--accent-soft);
  border-radius:2px; padding:2px 8px; white-space:nowrap; }
:root[data-theme="dark"] .stop-nights { color:var(--accent); }
.stop-dates { font-family:var(--mono); font-size:12.5px; color:var(--faint); margin:7px 0 0;
  letter-spacing:.02em; }
.arrow { color:var(--accent); }

.leg { position:relative; padding:22px 0; }
.leg::before { content:""; position:absolute; left:-29px; top:0; bottom:0; width:2px;
  background:repeating-linear-gradient(var(--accent) 0 4px, transparent 4px 9px); }
.stop-end::after { content:""; position:absolute; left:-32px; top:38px; bottom:-8px; width:8px;
  background:var(--paper); }
.stop-start::before { content:""; position:absolute; left:-32px; top:-14px; height:18px; width:8px;
  background:var(--paper); }
.leg-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--mono);
  font-size:12px; letter-spacing:.03em; }
.leg-road { color:var(--ink); font-weight:600; background:var(--surface);
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; }
.leg-dot { color:var(--faint); }
.leg-time, .leg-dist { color:var(--muted); font-variant-numeric:tabular-nums; }
.leg-stops { margin:10px 0 0; font-size:13.5px; color:var(--ink); display:flex; gap:9px;
  align-items:baseline; flex-wrap:wrap; }
.leg-stops span { font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.leg-note { margin:7px 0 0; font-size:13.5px; color:var(--faint); max-width:54ch; }
.stops-k { margin:13px 0 0; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.stops { list-style:none; margin:7px 0 0; padding:0; max-width:54ch; }
.stops li { position:relative; padding:5px 0; font-size:13.5px; color:var(--ink); }
.stops li::before { content:""; position:absolute; left:-32px; top:9px; box-sizing:border-box;
  width:8px; height:8px; border-radius:50%; background:var(--paper); border:1.5px solid var(--accent); }
.stops small { display:block; margin-top:2px; font-family:var(--mono); font-size:11px;
  color:var(--muted); letter-spacing:0; }
.stops-end { margin:9px 0 0; padding-left:0; font-family:var(--mono); font-size:11px;
  color:var(--muted); }
.stops-end b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.stops li.locked::before { background:var(--accent); border-color:var(--accent); }
.hrs { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:8px; }
.hrs b { display:inline-flex; align-items:baseline; gap:6px; font-weight:400; }
.hrs em { font-family:var(--mono); font-size:10.5px; font-weight:600; font-style:normal;
  letter-spacing:.04em; color:var(--paper); background:var(--accent); padding:2px 6px;
  border-radius:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hrs i { font-style:normal; font-size:12px; color:var(--muted); white-space:nowrap; }
.tide-link { display:inline-block; margin-top:9px; font-family:var(--mono); font-size:11px;
  font-weight:600; letter-spacing:.06em; color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid var(--accent-soft); padding-bottom:1px; }
.tide-link:hover { border-bottom-color:var(--accent); }
.tide-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:1px; }
.leg-warn .leg-road { border-color:var(--accent); color:var(--accent-ink); }
:root[data-theme="dark"] .leg-warn .leg-road { color:var(--accent); }
.leg-warn .leg-note { color:var(--accent-ink); }
:root[data-theme="dark"] .leg-warn .leg-note { color:var(--accent); }
.car { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
  margin-top:18px; padding:14px 18px; border:1px solid var(--line); border-radius:2px;
  background:var(--surface); }
.car-k { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper); background:var(--ink); border-radius:2px;
  padding:3px 8px; }
.car-i { display:flex; flex-direction:column; gap:1px; min-width:0; }
.car-i dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); }
.car-i dd { margin:0; font-family:var(--mono); font-size:12.5px; color:var(--ink); }

.leg-depart { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--paper); background:var(--accent); border-radius:2px;
  padding:3px 8px; }

.stay { margin-top:14px; border:1px solid var(--line); border-radius:3px;
  background:var(--surface); max-width:56ch; overflow:hidden; }
.stay-body { padding:14px 16px; }
.stay-pic { display:block; width:100%; aspect-ratio:2 / 1; object-fit:cover;
  border-bottom:1px solid var(--line); background:var(--sea); }
.stay-name { font-family:var(--display); font-size:1.16rem; margin:0; }
.stay-addr { margin:5px 0 0; font-size:13px; color:var(--muted); }
.stay-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px 18px; margin:13px 0 0; }
.stay-meta div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.stay-meta dt { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.stay-meta dd { margin:0; font-family:var(--mono); font-size:12.5px; color:var(--ink);
  overflow-wrap:anywhere; }
.stay-note { margin:13px 0 0; font-size:13px; color:var(--accent-ink); }
:root[data-theme="dark"] .stay-note { color:var(--accent); }
.stay-todo { margin:12px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); border:1px dashed var(--line);
  border-radius:2px; padding:7px 12px; display:inline-block; }

.pay-wrap { overflow-x:auto; }
table.pay { width:100%; border-collapse:collapse; min-width:560px; }
table.pay th { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); text-align:left; padding:0 14px 9px 0;
  border-bottom:1px solid var(--line); }
table.pay th.num, table.pay td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.pay td { padding:13px 14px 13px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
table.pay td.what { font-size:14.5px; }
table.pay td.what small { display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:3px; }
table.pay td.num { font-family:var(--mono); font-size:13.5px; white-space:nowrap; }
table.pay td.when { font-size:13px; color:var(--muted); }
table.pay tr.total td { border-bottom:0; border-top:2px solid var(--ink); padding-top:15px;
  font-weight:600; }
table.pay tr.total td.num { font-size:1.2rem; color:var(--accent-ink); }
:root[data-theme="dark"] table.pay tr.total td.num { color:var(--accent); }
.pill { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; border-radius:2px; padding:3px 8px; white-space:nowrap; }
.pill-ok { color:var(--muted); border:1px solid var(--line); }
.pill-due { color:var(--paper); background:var(--accent); }
.pill-part { color:var(--accent-ink); border:1px solid var(--accent); }
:root[data-theme="dark"] .pill-part { color:var(--accent); }
.pay-note { margin:20px 0 0; font-size:13.5px; color:var(--muted); max-width:64ch; }
.sum { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:26px 0 0;
  background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.sum > div { background:var(--surface); padding:15px 16px; }
.sum dt { margin:0 0 7px; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.sum dd { margin:0; font-family:var(--mono); font-size:1.05rem; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink); }
.sum small { display:block; margin-top:6px; font-family:var(--body); font-size:11.5px;
  font-weight:400; color:var(--muted); }
.sum > div.grand { background:var(--ink); }
.sum > div.grand dt { color:var(--paper); opacity:.55; }
.sum > div.grand dd { color:var(--paper); font-size:1.3rem; }
.sum > div.grand small { color:var(--paper); opacity:.6; }
@media (max-width:620px) { .sum { grid-template-columns:1fr; } }

.section { margin-top:72px; }
.todo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 52px; }
@media (max-width:760px) { .todo-grid { grid-template-columns:1fr; } }
.todo-col h3 { margin:24px 0 0; padding-bottom:11px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--todo); }
.todo-col ul { list-style:none; margin:0; padding:0; }
.todo-col li { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:13px 0; border-bottom:1px solid var(--hair); }
.todo-col ul:last-of-type li:last-child { border-bottom:0; }
.todo-col li::before { content:""; width:7px; height:7px; margin-top:8px; border-radius:1px;
  background:var(--todo); }
.todo-t { font-size:14.5px; color:var(--ink); }
.todo-w { display:block; margin-top:4px; font-family:var(--mono); font-size:11px;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.todo-col li.done::before { background:none; box-shadow:inset 0 0 0 1px var(--line); }
.todo-col li.done .todo-t { color:var(--faint); }
.todo-t a { color:inherit; text-decoration:none;
  border-bottom:1px solid var(--accent-soft); padding-bottom:1px; }
.todo-t a:hover { border-bottom-color:var(--accent); }
.todo-t a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:1px; }
.todo-t a::after { content:"\00a0\2197"; font-family:var(--mono); font-size:10px; color:var(--accent);
  border:0; }
.sec-head { display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--line);
  padding-bottom:12px; margin-bottom:26px; }
.sec-head h2 { font-family:var(--display); font-weight:400; font-size:1.7rem; margin:0;
  letter-spacing:-.01em; }
.sec-head span { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.1em;
  text-transform:uppercase; }

.bar { display:flex; gap:3px; height:62px; }
.seg { background:var(--seg); border-radius:2px; flex-basis:0; min-width:0; display:flex;
  flex-direction:column; justify-content:flex-end; padding:7px 8px; overflow:hidden;
  container-type:inline-size; }
.seg-n { font-family:var(--mono); font-size:15px; font-weight:600; color:#fff; line-height:1; }
.seg-name { font-size:11px; color:rgba(255,255,255,.86); white-space:nowrap; margin-top:3px;
  letter-spacing:.01em; display:none; }
@container (min-width:96px) { .seg-name { display:block; } }
@media (max-width:720px) { .bar { height:46px; } }
.bar-scale { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px;
  color:var(--faint); margin-top:9px; letter-spacing:.04em; }

@media (max-width:620px) {
  .car { display:grid; grid-template-columns:1fr; gap:12px; padding:15px 16px; }
  .car-k { justify-self:start; }
}

@media (max-width:620px) {
  .stats { display:grid; grid-template-columns:1fr 1fr; }
  .stat { flex:none; border-left:0; border-top:1px solid var(--hair);
    padding:14px 0 13px; }
  .stat:nth-child(odd) { padding-right:16px; }
  .stat:nth-child(even) { padding-left:16px; border-left:1px solid var(--hair); }
  .stat:nth-child(-n+2) { border-top:0; }
  .stat:last-child { grid-column:1 / -1; border-left:0; padding-left:0; }
}

/* separators orphan onto their own line when the row wraps */
@media (max-width:620px) {
  .leg-dot { display:none; }
  .leg-line { gap:8px 14px; }
}

/* the table's most useful column sat off-screen behind a sideways scroll */
@media (max-width:620px) {
  .pay-wrap { overflow-x:visible; }
  table.pay { min-width:0; }
  table.pay thead { display:none; }
  table.pay tbody { display:block; }
  table.pay tr { display:grid; grid-template-columns:1fr auto; gap:0 14px;
    padding:16px 0; border-bottom:1px solid var(--hair); }
  table.pay td { display:block; border:0; padding:0; }
  table.pay td.what { grid-column:1; grid-row:1; }
  table.pay td.num { grid-column:2; grid-row:1; text-align:right; }
  table.pay td:nth-child(3) { grid-column:2; grid-row:2; justify-self:end; margin-top:7px; }
  table.pay td.when { grid-column:1 / -1; grid-row:3; margin-top:10px; }
  table.pay tr.total { border-bottom:0; border-top:2px solid var(--ink); padding-top:16px; }
  table.pay tr.total td { border-top:0; padding-top:0; }
  table.pay tr.total td:nth-child(3) { display:none; }
  table.pay tr.total td.when { margin-top:7px; font-weight:400; }
}

.snap { margin:14px 0 0; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--surface);
  border:1px solid var(--line); border-radius:2px; padding:8px 13px; line-height:1; }
:root[data-theme="dark"] .snap { color:var(--accent); }
.snap:hover:not(:disabled) { background:var(--accent); color:var(--paper); border-color:var(--accent); }
:root[data-theme="dark"] .snap:hover:not(:disabled) { color:var(--surface); }
.snap:disabled { color:var(--faint); cursor:default; }
.snap:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.snap svg { width:13px; height:15px; flex:none; }
.snap svg rect { fill:none; stroke:currentColor; stroke-width:1.4; }
.snap svg line { stroke:currentColor; stroke-width:1.4; }
.snapshot, .snapshot * { transition:none !important; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ---- additions from the Paris–Colmar and Japan pages ---------------------------- */
.lede { margin:18px 0 0; font-size:16.5px; color:var(--muted); max-width:62ch; }
.lede b { color:var(--ink); font-weight:600; }
.mk-end { fill:var(--ink); }
.wp-stop { fill:var(--accent); stroke:var(--sea); stroke-width:2; }
.wplab-stop { fill:var(--ink); font-style:normal; font-weight:600; }
.stops-plain li::before { content:none; }
.leg-fare { color:var(--muted); font-variant-numeric:tabular-nums; }
.tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); border:1px dashed var(--line); border-radius:2px; padding:2px 6px; }
.stop-mark-end { font-size:14px; }
/* text that sits on an accent/ink block must use the page background, which is dark
   in dark mode — so read it from --paper instead of hard-coding */
:root[data-theme="dark"] .leg-depart, :root[data-theme="dark"] .car-k,
:root[data-theme="dark"] .pill-due, :root[data-theme="dark"] .stop-mark-end { color:var(--paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-t { fill:var(--paper); }
}
:root[data-theme="dark"] .badge-t { fill:var(--paper); }
:root[data-theme="dark"] .sum > div.grand dt,
:root[data-theme="dark"] .sum > div.grand dd,
:root[data-theme="dark"] .sum > div.grand small { color:var(--paper); }

/* ---- app chrome: top bar shared by every page ------------------------------------ */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1320px; margin:0 auto; padding:10px 24px 0; font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
@media (max-width:640px) { .topbar { padding-inline:18px; } }
.topbar a { color:var(--ink); text-decoration:none; font-weight:600; }
.topbar a:hover { color:var(--accent); }
.topbar a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:1px; }
/* A la derecha solo dos iconos: cartera y cuenta. Salir vive dentro de la cuenta, que
   es donde se va a mirar cuando se quiere salir, y así la barra no ofrece por error la
   acción más destructiva junto a la navegación. 44px de lado, el mínimo táctil. */
.topbar .tnav { display:flex; align-items:center; gap:2px; margin-right:-10px; }
.topbar .tnav a { display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; color:var(--muted);
  transition:background .16s ease, color .16s ease; }
.topbar .tnav a:hover { background:var(--land-2); color:var(--ink); }
.topbar .wordmark { display:flex; align-items:center; gap:10px; }
.topbar .wordmark i { width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.wrap.page { padding-top:36px; }

/* ---- home ------------------------------------------------------------------------ */
.trips { list-style:none; margin:40px 0 0; padding:0; display:grid; gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
.trip { border:1px solid var(--line); border-radius:3px; background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease; }
.trip:hover { border-color:var(--accent); }
.trip a.cover { display:block; color:inherit; text-decoration:none; }
.trip a.cover:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.trip-map { display:block; width:100%; aspect-ratio:2 / 1; object-fit:cover; background:var(--sea);
  border-bottom:1px solid var(--line); }
.trip-map svg { display:block; width:100%; height:100%; }
.trip-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.trip-eyebrow { display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.trip h2 { font-family:var(--display); font-weight:400; font-size:1.55rem; margin:0; letter-spacing:-.01em; line-height:1.15; }
.trip-meta { margin:4px 0 0; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.02em; }
.trip-stats { display:flex; flex-wrap:wrap; gap:0 18px; margin:8px 0 0; padding-top:12px; border-top:1px solid var(--hair); }
.trip-stats div { display:flex; flex-direction:column; }
.trip-stats b { font-family:var(--mono); font-size:1.05rem; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.trip-stats small { font-size:11px; color:var(--faint); letter-spacing:.04em; }
.status { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px; padding:3px 8px; white-space:nowrap; }
.status-upcoming { color:var(--paper); background:var(--accent); }
.status-past { color:var(--muted); border:1px solid var(--line); }
.status-planning { color:var(--todo); border:1px dashed var(--todo); }
.empty { margin:40px 0 0; font-size:14px; color:var(--faint); max-width:54ch; }

/* ---- pantalla de bloqueo (login y cambio de PIN) ----------------------------------
   Teclado numérico al estilo del desbloqueo del móvil: seis puntos que se llenan y una
   botonera 3x4. Sin campo de texto: el PIN viaja en un input oculto que rellena pin.js.
   Los botones son de 64px (>=44px, el mínimo táctil) y todo el color sale de tokens. */
/* La pantalla de bloqueo se clava al trozo de pantalla que de verdad se ve.
   iOS NO encoge el viewport de CSS al abrir el teclado (100vh sigue midiendo la
   pantalla entera), así que una tarjeta centrada en 100vh queda debajo de las teclas.
   `--vvh` y `--vv-top` los pone pin.js desde visualViewport.

   Va `position:fixed` a propósito: así el documento no tiene alto que scrollear y el
   navegador no puede desplazar la página para "enseñar" el campo enfocado, que es de
   donde salía el salto. Si aun así no cupiera, scrollea esta caja, no la página. */
.lock { position:fixed; left:0; right:0; top:var(--vv-top, 0px);
  height:var(--vvh, 100dvh); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  padding:24px 24px 32px; box-sizing:border-box; }

/* Con el teclado arriba queda la mitad de alto: se quita lo prescindible. */
.kb .lock { padding:12px 24px; }
.kb .lock-card .eyebrow, .kb .lock-foot { display:none; }
.kb .lock-card h1 { font-size:1.6rem; }
.kb .lock-prompt { margin-top:14px; }

.lock-card { width:min(100%, 330px); text-align:center; }
.lock-card .eyebrow { justify-content:center; }
.lock-card h1 { font-size:clamp(1.7rem, 4.5vw, 2.1rem); margin:.15em 0 0; }

/* pantalla 1: el nombre. Mismo vocabulario que el teclado — todo centrado, todo
   redondo — para que las dos pantallas se lean como una sola cosa. */
.lock-user { margin:18px 0 0; display:grid; gap:12px; }
.lock-input { width:100%; box-sizing:border-box; padding:15px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:17px; text-align:center;
  transition:border-color .16s ease; }
.lock-input::placeholder { color:var(--faint); }
.lock-input:focus { outline:none; border-color:var(--ink); }

.btn { width:100%; padding:14px 20px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:15px; font-weight:500;
  transition:background .16s ease, color .16s ease; }
.btn:hover { background:transparent; color:var(--ink); }

/* el campo de respaldo sin JS, que no necesita ser bonito pero sí legible */
.field { display:grid; gap:6px; text-align:left; }
.field label { font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); }
.field input { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:4px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:16px; }

/* pantalla 2: de quién se pide el PIN. Es el propio nombre el que sirve para volver
   —una ficha que se quita— en vez de un enlace suelto debajo del teclado. */
.lock-as { margin:20px 0 0; display:inline-flex; align-items:center; gap:9px;
  max-width:100%; box-sizing:border-box; padding:5px 6px 5px 14px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  transition:border-color .16s ease, color .16s ease; }
.lock-as b { font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lock-as i { flex:none; display:grid; place-items:center; width:19px; height:19px;
  border-radius:50%; background:var(--land-2); color:var(--muted); font-style:normal;
  font-family:var(--body); font-size:13px; line-height:1;
  transition:background .16s ease, color .16s ease; }
.lock-as:hover { border-color:var(--faint); color:var(--ink); }
.lock-as:hover i { background:var(--land); color:var(--ink); }

.lock-prompt { margin:24px 0 0; font-size:14px; color:var(--muted); min-height:1.2em; }

/* los seis puntos */
.dots { margin:16px 0 0; display:flex; gap:15px; justify-content:center; }
.dots i { width:12px; height:12px; border-radius:50%; border:1.4px solid var(--faint);
  background:transparent; transition:background .14s ease, border-color .14s ease, transform .14s ease; }
.dots i.on { background:var(--ink); border-color:var(--ink); transform:scale(1.12); }
.lock.bad .dots { animation:shake .42s cubic-bezier(.36,.07,.19,.97); }
.lock.bad .dots i { border-color:var(--accent); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
@media (prefers-reduced-motion:reduce) {
  .lock.bad .dots { animation:none; }
  .dots i, .pad button { transition:none; }
}

.lock-err { margin:14px 0 0; font-size:13px; color:var(--accent-ink); min-height:1.2em; }
:root[data-theme="dark"] .lock-err { color:var(--accent); }

/* la botonera */
.pad { margin:22px 0 0; display:grid; grid-template-columns:repeat(3, 64px);
  gap:16px; justify-content:center; }
.pad button { width:64px; height:64px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:25px; font-weight:400; line-height:1;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  transition:background .12s ease, transform .12s ease; }
.pad button:hover { background:var(--land-2); }
.pad button:active { background:var(--land); transform:scale(.94); }
.pad button:disabled { opacity:.35; cursor:default; }
.pad button:disabled:hover { background:var(--surface); }
.pad .ghost { border-color:transparent; background:transparent; font-size:13px; color:var(--muted); }
.pad .ghost:hover { background:transparent; color:var(--ink); }
.pad .ghost:active { background:transparent; }

.lock-foot { margin:26px 0 0; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em; }
.lock-foot button { border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:var(--faint); text-decoration:underline; text-underline-offset:3px; }
.lock-foot button:hover { color:var(--ink); }

/* sin JS el teclado no sirve: enseñamos un campo normal */
.nojs { margin:22px 0 0; display:grid; gap:12px; }
.lock-card form.js-on .nojs { display:none; }

/* ---- cuenta -----------------------------------------------------------------------
   Página de perfil: PIN, sesiones abiertas y salir. Columna estrecha porque todo es
   texto corto y una lista; a ancho completo se leería fatal. */
.cuenta { max-width:560px; padding-block:40px 64px; }
.cuenta h1 { font-size:clamp(2rem,5vw,2.6rem); margin:.1em 0 0; }

.bloque { margin:40px 0 0; padding:24px 0 0; border-top:1px solid var(--hair); }
.bloque h2 { font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--muted); margin:0; }
.nota { margin:10px 0 0; font-size:14px; color:var(--muted); max-width:52ch; }

.aviso { margin:20px 0 0; padding:11px 14px; border-radius:4px; font-size:14px;
  background:var(--accent-soft); color:var(--accent-ink); }
:root[data-theme="dark"] .aviso { color:var(--accent); }

/* la lista de sesiones */
.ses { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:1px;
  background:var(--hair); border:1px solid var(--hair); border-radius:5px; overflow:hidden; }
.ses li { display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:14px 16px; background:var(--surface); }
.ses li.yo { background:var(--land-2); }
.ses-que { min-width:0; }
.ses-tit { margin:0; font-size:14.5px; font-weight:600; }
.ses-sub { margin:3px 0 0; font-size:13px; color:var(--muted); }
.ses-ip { margin:2px 0 0; font-family:var(--mono); font-size:11px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chip { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px;
  background:var(--accent); color:var(--paper); font-family:var(--mono); font-size:9.5px;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }
:root[data-theme="dark"] .chip { color:var(--paper); }

.btn-mini { flex:none; padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-family:var(--body); font-size:13px;
  transition:border-color .16s ease, color .16s ease; }
.btn-mini:hover { border-color:var(--accent); color:var(--accent-ink); }
:root[data-theme="dark"] .btn-mini:hover { color:var(--accent); }

/* En esta página los botones no ocupan todo el ancho: no son la acción única. */
.cuenta .btn { width:auto; display:inline-block; margin-top:18px; text-decoration:none; }
.btn-linea { background:transparent; color:var(--ink); }
.btn-linea:hover { background:var(--ink); color:var(--paper); }


@media (max-width:520px) {
  .ses li { flex-direction:column; align-items:stretch; gap:10px; }
  .btn-mini { width:100%; }
}

/* la tabla de permisos (solo la ve quien administra) */
.acl { width:100%; border-collapse:collapse; margin:18px 0 0; }
.acl th, .acl td { padding:10px 8px; border-bottom:1px solid var(--hair); }
.acl thead th { font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); border-bottom-color:var(--line); text-align:left; }
.acl thead th:not(:first-child) { text-align:center; width:78px; }
.acl tbody th { text-align:left; font-weight:400; }
.acl tbody th b { display:block; font-size:14.5px; font-weight:600; }
.acl tbody th span { display:block; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.acl td { text-align:center; }
.acl input[type="checkbox"] { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.acl tbody tr:last-child th, .acl tbody tr:last-child td { border-bottom:0; }

/* ---- cartera ----------------------------------------------------------------------
   Tarjetas de programas de lealtad. Cada una es una ficha con su número grande en mono,
   como la tarjeta física que sustituye. El formulario va dentro de un <details>: se
   edita en el sitio y sin JavaScript. */
.cartera { max-width:640px; padding-block:40px 64px; }
.cartera h1 { font-size:clamp(2rem,5vw,2.6rem); margin:.1em 0 0; }
.cartera > .nota { margin-top:14px; }

.tarjetas { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.tarjeta { padding:18px 18px 16px; border:1px solid var(--line); border-radius:7px;
  background:var(--surface); }
/* Un filete de color arriba para distinguir de un vistazo hotel de vuelo. */
.tarjeta { border-top:3px solid var(--line); }
.tarjeta.k-hotel { border-top-color:var(--accent); }
.tarjeta.k-aerolinea { border-top-color:var(--todo); }

.t-cab { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.t-prog { margin:0; font-family:var(--display); font-size:1.3rem; }
.t-num { margin:8px 0 0; font-family:var(--mono); font-size:15px; letter-spacing:.08em;
  color:var(--ink); }

.t-datos { display:flex; gap:26px; margin:14px 0 0; flex-wrap:wrap; }
.t-datos div { margin:0; }
.t-datos dt { font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); }
.t-datos dd { margin:2px 0 0; font-size:19px; font-weight:600; }

.t-pie { margin:14px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-nota { margin:6px 0 0; font-size:13.5px; color:var(--muted); }
.t-comp { margin:10px 0 0; font-size:12.5px; color:var(--faint); font-style:italic; }

/* el editor, plegado */
.weditar, .wnueva { margin-top:14px; }
.wnueva { margin-top:26px; }
.weditar > summary, .wnueva > summary { cursor:pointer; font-size:13.5px; color:var(--muted);
  list-style:none; display:inline-block; padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); }
.weditar > summary::-webkit-details-marker, .wnueva > summary::-webkit-details-marker { display:none; }
.weditar > summary:hover, .wnueva > summary:hover { border-color:var(--faint); color:var(--ink); }
.weditar[open] > summary, .wnueva[open] > summary { margin-bottom:14px; }

.wform { display:grid; gap:12px; }
.wf { display:grid; gap:5px; }
.wf span { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); }
.wf input, .wf select { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:4px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; }
.wf input:focus, .wf select:focus { outline:2px solid var(--accent); outline-offset:1px; }

.wshare { margin:2px 0 0; padding:12px 14px; border:1px solid var(--hair); border-radius:5px; }
.wshare legend { padding:0 6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); }
.wshare label { display:flex; align-items:center; gap:9px; font-size:14.5px; }
.wshare input { width:20px; height:20px; accent-color:var(--accent); }

.wacc { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cartera .btn { width:auto; margin-top:4px; }

@media (min-width:560px) { .wform { grid-template-columns:1fr 1fr; }
  .wform > .wshare, .wform > .wacc { grid-column:1 / -1; } }