/* ---------- tema (colores idénticos a japon.html, una sola declaración) ---------- */
[hidden] { display: none !important; }  /* que ningún display: de clase le gane al atributo */
:root {
  color-scheme: light dark;
  --paper:       light-dark(#faf7f1, #17141c);
  --paper-2:     light-dark(#f1ece2, #201c26);
  --ink:         light-dark(#241f1c, #ebe4dc);
  --ink-soft:    light-dark(#6e6459, #a49a8e);
  --line:        light-dark(#e2dacc, #37313f);
  --shu:         light-dark(#b23a2a, #e0705c);
  --shu-soft:    light-dark(#f4e0da, #3d221d);
  --ai:          light-dark(#2f4a6e, #8fb0d9);
  --ai-soft:     light-dark(#dde5f0, #1f2a38);
  --matcha:      light-dark(#6d7d52, #a3b585);
  --matcha-soft: light-dark(#e4e8d8, #262e1e);
  --gold:        light-dark(#a07c2e, #c9a55a);
  --card:        light-dark(#ffffff, #201c26);
}
/* toggle manual: fija el esquema y light-dark() responde solo */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: "Segoe UI", "Avenir Next", system-ui, sans-serif; line-height: 1.55; margin: 0; padding: 0 20px 80px; }
.wrap { max-width: 1060px; margin: 0 auto; }

/* ---------- barra de días (sticky) ---------- */
.day-nav { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); margin: 0 -20px 16px; padding: 8px 12px; scrollbar-width: none; }
.day-nav::-webkit-scrollbar { display: none; }
.day-nav a { flex: 0 0 auto; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft); border-radius: 999px; padding: 5px 11px; font: 700 12px "Segoe UI", system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.day-nav a.on { background: var(--shu); color: #fff; border-color: var(--shu); }
h2, h3 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; text-wrap: balance; }
h2 { font-size: 25px; margin: 0 0 4px; font-weight: 500; }
.intro { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 20px; max-width: 80ch; }
a { color: var(--shu); }

/* ---------- día ---------- */
.day { margin-top: 22px; scroll-margin-top: 54px; }
.day-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 5px; }
.day-head h3 { margin: 0; font-size: 17.5px; font-weight: 600; }
.day-head .note { color: var(--ink-soft); font-size: 13.5px; font-style: italic; }
.day-head .anchor { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* ---------- pasos (una fila por hora) ---------- */
.steps { margin: 6px 0 0; padding: 0; list-style: none; }
/* solo las filas directas: los li de .fork y .plan-grid anidados NO son filas */
.steps > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; scroll-margin-top: 58px; }
.steps > li.flash { animation: row-flash 1.8s ease-out 1; }
@keyframes row-flash { 0%, 55% { background: var(--shu-soft); } 100% { background: transparent; } }
/* pasos solo-mapa: presentes en el DOM (proyección 1:1 del YAML), no se ven */
.steps li.hidden-summary { display: none; }
.title .icon { font-style: normal; }
.steps .time { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 2px; white-space: nowrap; letter-spacing: .06em; font-weight: 600; }
.steps .time.fixed { color: var(--shu); }
.steps .time .to, .steps .time .from, .steps .time .warn, .steps .duration[data-derived] { display: none; }
.option > .steps { display: none; }   /* sub-pasos de opción (ida/lugar/regreso): solo el mapa */   /* horario/duración derivados: solo los muestra el mapa */
.steps b { font-weight: 600; }
.steps .transit { color: var(--ink-soft); }

/* ---------- options: tiers de comida Y planes en paralelo ----------
   Mismo markup (ul.options > li), como en el YAML son la misma clave.
   Un li CON sub-.steps (:has) es un plan-tarjeta; sin ellos, un tier-cajita. */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
/* angosto: carrusel horizontal (touch + arrastre de mouse), nunca apilar */
@media (max-width: 900px) {
  .options, .options:has(> li > .steps) { display: flex; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
  .options::-webkit-scrollbar { display: none; }
  .options > li { flex: 0 0 auto; min-width: 64%; max-width: 85%; scroll-snap-align: center; }
  .options > li:has(> .steps) { min-width: 86%; max-width: 86%; }
}
.options > li { font-size: 13px; border-radius: 4px; padding: 6px 10px; }
.options > li > b:first-child { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: block; }
/* tiers hoja: color por tier; cualquier otro tier (🏮 barrio) = neutro punteado */
.options > li[data-tier] { background: var(--paper-2); border: 1px dashed var(--line); }
.options > li[data-tier] > b:first-child { color: var(--ink-soft); }
.options > li[data-tier="Take"] { background: var(--matcha-soft); border: none; }
.options > li[data-tier="Take"] > b:first-child { color: var(--matcha); }
.options > li[data-tier="Ai"] { background: var(--ai-soft); border: none; }
.options > li[data-tier="Ai"] > b:first-child { color: var(--ai); }
.options > li[data-tier="Shu"] { background: var(--shu-soft); border: none; }
.options > li[data-tier="Shu"] > b:first-child { color: var(--shu); }
/* respaldo por POSICIÓN para viajes cuyos tiers no se llamen Take/Ai/Shu
   (mismo resultado en este viaje; los selectores por nombre mandan) */
.options > li[data-tier]:nth-of-type(1):not([data-tier="Take"]):not([data-tier="Ai"]):not([data-tier="Shu"]) { background: var(--matcha-soft); border: none; }
.options > li[data-tier]:nth-of-type(2):not([data-tier="Take"]):not([data-tier="Ai"]):not([data-tier="Shu"]) { background: var(--ai-soft); border: none; }
.options > li[data-tier]:nth-of-type(3):not([data-tier="Take"]):not([data-tier="Ai"]):not([data-tier="Shu"]) { background: var(--shu-soft); border: none; }
/* planes anidados: tarjetas grandes, acento por posición */
.options:has(> li > .steps) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.options > li:has(> .steps) { font-size: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; }
.options > li:has(> .steps) > b:first-child { font-size: 13.5px; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 2px; }
.options > li:has(> .steps):nth-child(1) { background: light-dark(#f4eefa, #2a2233); }
.options > li:has(> .steps):nth-child(1) b { color: light-dark(#7b4fa6, #c9a9e6); }
.options > li:has(> .steps):nth-child(2) { background: light-dark(#fff6df, #2e2712); }
.options > li:has(> .steps):nth-child(2) b { color: light-dark(#a1750a, #e0c072); }
.options > li:has(> .steps):nth-child(n+3) { background: light-dark(#fdeef3, #301b24); }
.options > li:has(> .steps):nth-child(n+3) b { color: light-dark(#c2537c, #e79bbb); }
.options .steps > li { grid-template-columns: 52px minmax(0, 1fr); font-size: 13px; padding: 4px 0; }

/* ---------- links a modal + chips de línea ---------- */
.modal-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
.modal-link:hover { color: var(--shu); }
.line-chip { display: inline-block; min-width: 15px; height: 15px; border-radius: 50%; background: var(--lc); color: #fff; font-size: 10px; font-weight: 800; text-align: center; line-height: 15px; margin-right: 3px; font-style: normal; vertical-align: -2px; padding: 0 2px; }
.line-chip.dot { width: 11px; min-width: 11px; height: 11px; vertical-align: -1px; padding: 0; }

/* ---------- modales (contenido) ---------- */
.modal h3 { margin: 0 0 8px; font-size: 18px; }
.modal .h3-range { font-weight: 400; color: var(--ink-soft); }
.modal img { max-width: 100%; border-radius: 6px; margin: 0 0 10px; display: block; }
.modal p { margin: 0 0 8px; font-size: 14px; }
.modal-note { color: var(--ink-soft); font-size: 13px; }
.modal-note .src-tag { opacity: .55; font-size: 11px; }
.intro .red { color: var(--shu); }
.modal-btn { display: inline-block; margin-top: 4px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); border-radius: 6px; padding: 6px 14px; font: 600 13px "Segoe UI", system-ui, sans-serif; text-decoration: none; }

/* ---------- modal de línea (banner, frecuencia, ride, estaciones, frase) ---------- */
.line-banner { background: var(--lc); color: #fff; border-radius: 10px; padding: 14px 12px; text-align: center; margin-bottom: 12px; }
.line-banner .jp { font-size: 26px; font-weight: 700; line-height: 1.2; }
.badge-row { margin-top: 8px; }
.badge { display: inline-block; background: #fff; color: var(--lc); border-radius: 50%; min-width: 30px; height: 30px; line-height: 30px; font-weight: 800; font-size: 15px; padding: 0 3px; }
.modal .freq { margin: -4px 0 12px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.modal .freq.has-src { margin-bottom: 2px; }
.freq-src { text-align: center; margin: 0 0 12px; }
.freq-src a { color: var(--ink-soft); opacity: .7; font-size: 11px; }
.ride { display: flex; justify-content: space-between; gap: 8px; background: var(--paper-2); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.ride .arrow { align-self: center; color: var(--ink-soft); }
.ride .arr { text-align: right; }
.ride .stn { color: var(--ink-soft); }
.modal .platform { margin: 0 0 8px; }
.platform .sign { font-size: 17px; }
.modal .reverse { margin: 0 0 10px; }
.stations { border-left: 3px solid var(--lc); padding-left: 10px; margin: 0 0 12px; }
.station { padding: 3px 0; }
.station .romaji { color: var(--ink-soft); font-size: 12px; }
.station-code { display: inline-block; min-width: 26px; border-radius: 9px; background: var(--lc); color: #fff; font-size: 10px; font-weight: 800; text-align: center; line-height: 15px; height: 15px; margin-right: 3px; vertical-align: -2px; padding: 0 2px; }
.phrase { background: var(--paper-2); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.phrase .jp { font-size: 19px; line-height: 1.6; }
.phrase .romaji { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.phrase .gloss { font-size: 12px; margin-top: 4px; }

/* ---------- overlay del modal (dialog nativo) ---------- */
dialog.overlay { border: none; background: var(--card); color: var(--ink); border-top: 5px solid var(--shu); border-radius: 8px; width: min(520px, calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 50px rgba(0,0,0,.35); padding: 22px 24px; }
dialog.overlay::backdrop { background: rgba(0,0,0,.45); }
.overlay-close { position: absolute; top: 8px; right: 12px; border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; }

/* ---------- pestañas de la app (a las demás secciones del PWA familiar) ---------- */
.app-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 2px; }
.app-tabs a { text-decoration: none; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12px; white-space: nowrap; }
.app-tabs a:hover { color: var(--ink); border-color: var(--ink-soft); }
.app-tabs a.on { color: var(--shu); border-color: var(--shu); font-weight: 700; }

/* ⚙️ configuración (cfg.js) */
.cfg-toggle { position: fixed; right: 12px; top: 12px; z-index: 1100; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.28); font-size: 17px; cursor: pointer; }
.cfg-menu { position: fixed; right: 60px; top: 12px; z-index: 1200; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.3); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cfg-menu button { border: none; background: none; color: var(--ink); font-size: 13px; padding: 6px 10px; text-align: left; cursor: pointer; border-radius: 6px; }
.cfg-menu button:hover { background: var(--paper-2); }