/* Estética común de toda la web (portada, login y guías de día).
   Misma paleta y tipografía que la página del viaje a Japón. */
:root{
  --ink:#14171a; --ink-soft:#4a5158; --ground:#eef0ed; --card:#f7f8f6;
  --indigo:#26456e; --indigo-soft:#7d93b3; --celadon:#5f7f67; --vermilion:#b8422c;
  --rule:rgba(20,23,26,.14); --land:#dde2dc;
  --serif:"Shippori Mincho",Georgia,serif;
  --sans:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --trip-bg:var(--ground); --trip-ink:var(--ink); --trip-soft:var(--ink-soft); --trip-rule:var(--rule); --trip-accent:var(--indigo);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e6e8e4; --ink-soft:#9aa3a9; --ground:#13161a; --card:#1a1e23;
    --indigo:#93b0d8; --indigo-soft:#55688a; --celadon:#8fae95; --vermilion:#e07a63;
    --rule:rgba(230,232,228,.16); --land:#262c33; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e6e8e4; --ink-soft:#9aa3a9; --ground:#13161a; --card:#1a1e23;
  --indigo:#93b0d8; --indigo-soft:#55688a; --celadon:#8fae95; --vermilion:#e07a63;
  --rule:rgba(230,232,228,.16); --land:#262c33; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65;
  padding-bottom:env(safe-area-inset-bottom,0)}
h1,h2,h3{font-family:var(--serif); font-weight:700; letter-spacing:-.012em}
a{color:inherit}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
.wrap{max-width:66rem; margin:0 auto; padding:0 1.25rem}

/* barra superior (comparte estilos con trip-tabs.css) */
.brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--serif); font-weight:700; font-size:1.0625rem; padding:.85rem 0}
.brand svg{width:24px; height:24px; color:var(--indigo)}
.linkbtn{appearance:none; background:none; border:0; font:inherit; font-size:.875rem; color:var(--ink-soft); cursor:pointer; padding:.5rem 0; min-height:40px}
.linkbtn:hover{color:var(--ink)}

/* portada */
.hero{padding:3.5rem 0 1rem}
.eyebrow{margin:0 0 .5rem; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
h1{font-size:clamp(2.75rem,9vw,4.4rem); line-height:1.02; margin:0}
h1 em{font-style:normal; color:var(--vermilion)}
.hero p.lede{max-width:36rem; color:var(--ink-soft); margin:.9rem 0 0; font-size:1.0625rem}

.label{font-family:var(--serif); font-size:1.9rem; margin:3.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule)}

/* color de cada viaje (trip.json: accent y, opcional, accentDark) */
.feature,.trip{--accent:var(--accent-l, var(--indigo))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .feature,:root:not([data-theme="light"]) .trip{--accent:var(--accent-d, color-mix(in oklab, var(--accent-l, #26456e) 45%, #fff))}
}
:root[data-theme="dark"] .feature,:root[data-theme="dark"] .trip{--accent:var(--accent-d, color-mix(in oklab, var(--accent-l, #26456e) 45%, #fff))}

/* viaje destacado */
.feature{display:block; text-decoration:none; margin-top:2rem; background:var(--card); border:1px solid var(--rule); border-top:3px solid var(--accent);
  border-radius:2px; padding:1.5rem 1.25rem 1.4rem; transition:border-color .2s, box-shadow .2s}
@media (min-width:640px){.feature{padding:2rem 2.25rem 1.9rem}}
.feature:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); box-shadow:0 10px 30px -20px rgba(0,0,0,.35)}
.feature .grid{display:grid; grid-template-columns:1fr; gap:1.25rem}
@media (min-width:720px){.feature .grid{grid-template-columns:1fr auto; align-items:end}}
.feature .kicker{font-size:.875rem; color:var(--celadon); font-weight:500; margin:0 0 .2rem}
.feature h2{font-size:clamp(2.4rem,8vw,3.6rem); line-height:1.02; margin:0}
.feature .dates{margin:.45rem 0 0; color:var(--accent); font-family:var(--serif); font-size:1.15rem}
.feature .sum{margin:.7rem 0 0; max-width:36rem; color:var(--ink-soft)}
.count{border-top:2px solid var(--vermilion); padding-top:.5rem; min-width:9rem}
.count b{display:block; font-family:var(--serif); font-weight:700; font-size:clamp(2.6rem,9vw,3.6rem); line-height:1; font-variant-numeric:tabular-nums}
.count span{font-size:.9375rem; color:var(--ink-soft)}
.go{display:inline-flex; gap:.4rem; align-items:center; margin-top:1.25rem; font-size:.9375rem; color:var(--accent);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom:1px}
.go::after{content:"→"; transition:transform .2s}
.feature:hover .go::after,.trip:hover .go::after{transform:translateX(4px)}

/* ruta: las paradas unidas como en el mapa */
.route{list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem 0; font-size:.875rem; color:var(--ink-soft)}
.route li{display:flex; align-items:center}
.route li::before{content:""; width:8px; height:8px; border-radius:50%; border:2px solid var(--accent); background:var(--card); margin-right:.4rem; flex:none}
.route li:not(:last-child)::after{content:""; width:1.1rem; height:2px; background:var(--accent); opacity:.55; margin:0 .4rem}

/* lista */
.trips{list-style:none; margin:.5rem 0 0; padding:0}
.trip{display:grid; grid-template-columns:1fr auto; gap:.25rem 1.5rem; padding:1.4rem 0; border-top:1px solid var(--rule); text-decoration:none; align-items:baseline}
.trips li:first-child .trip{border-top:none}
@media (min-width:640px){.trip{grid-template-columns:9.5rem 1fr auto}}
.trip .when{grid-column:1 / -1; font-family:var(--serif); color:var(--accent); font-variant-numeric:tabular-nums}
@media (min-width:640px){.trip .when{grid-column:auto}}
.trip h3{font-size:1.45rem; line-height:1.2; margin:0}
.trip h3 small{font-family:var(--sans); font-weight:400; font-size:.9375rem; color:var(--ink-soft); margin-left:.45rem; letter-spacing:0}
.trip p{margin:.2rem 0 0; color:var(--ink-soft); font-size:.9375rem}
.trip .st{font-size:.875rem; color:var(--celadon); white-space:nowrap}
.trip:hover h3{color:var(--accent)}
.empty{color:var(--ink-soft); padding:1.5rem 0; max-width:36rem}
.empty code{font-size:.875rem; background:var(--card); border:1px solid var(--rule); padding:.05rem .35rem; border-radius:2px}

footer.foot{margin-top:4rem; padding:1.5rem 0 4rem; border-top:1px solid var(--rule); color:var(--ink-soft); font-size:.875rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem}

/* login */
.login-body{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:1.5rem 1.25rem}
.login{width:min(24rem,100%)}
.login p{color:var(--ink-soft); margin:.8rem 0 1.8rem}
.login form{display:grid; gap:.9rem}
.login label span{display:block; font-size:.875rem; color:var(--ink-soft); margin-bottom:.3rem}
.login input[type=password]{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--rule);
  border-radius:2px; padding:.7rem .8rem; min-height:46px}
.login input[type=password]:focus{outline:2px solid var(--indigo); outline-offset:0; border-color:transparent}
.btn{appearance:none; font:inherit; font-size:.9375rem; cursor:pointer; min-height:44px; border-radius:2px;
  border:1px solid var(--indigo); background:var(--indigo); color:var(--ground); padding:.55rem 1rem}
.btn:hover{filter:brightness(1.08)}
.err{color:var(--vermilion); font-size:.9375rem; margin:0}
.err:empty{display:none}
.waves{display:block; width:100%; height:auto; color:var(--indigo-soft); margin-top:2.5rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}