/* ============================================================
   Trip Planner · base.css
   Sistema de diseño "washi claro + kanji rojo a pincel"
   Tokens claro/oscuro · tipografía · seigaiha · Shell · componentes
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Papel de arroz + tinta sumi + bermellón 朱 */
  --paper:      #E8E7E2;   /* fondo gris (estilo landing Japan) */
  --paper-2:    #E4E2DD;   /* panel/relieve */
  --paper-3:    #D9D6CF;   /* hover / relieve */
  --paper-ink:  #FFFFFF;   /* tarjeta blanca */
  --surface:    #FFFFFF;   /* chrome: cabecera + sidebar */

  --sumi:       #201C16;   /* tinta principal */
  --sumi-2:     #4A443A;   /* secundario */
  --sumi-3:     #7A7264;   /* terciario / apagado */

  --shu:        #CB2E24;   /* bermellón acento */
  --shu-deep:   #A32118;
  --shu-wash:   rgba(203,46,36,.10);

  /* Acentos japoneses para estados */
  --matsu:      #3E7A5E;   /* verde pino → incluido / contratado */
  --matsu-wash: rgba(62,122,94,.12);
  --ai:         #345A7E;   /* añil → traslados */
  --ai-wash:    rgba(52,90,126,.12);
  --yamabuki:   #C79212;   /* oro yamabuki → bonos / destacado */
  --yamabuki-wash: rgba(199,146,18,.14);

  --line:       rgba(32,28,22,.14);
  --line-soft:  rgba(32,28,22,.08);
  --shadow:     0 1px 2px rgba(32,28,22,.06), 0 8px 24px rgba(32,28,22,.08);
  --shadow-lg:  0 2px 6px rgba(32,28,22,.10), 0 18px 46px rgba(32,28,22,.16);

  --seigaiha-ink: rgba(40,40,48,.045);

  /* Tipografía */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-body:    "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brush:   "Yuji Syuku", "Zen Old Mincho", serif;
  --font-mincho:  "Zen Old Mincho", "Yu Mincho", serif;

  /* Métricas */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --gap: 16px;
  --topbar-h: 60px;
  --sidenav-w: 232px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="dark"] {
  --paper:      #17130F;
  --paper-2:    #201B16;
  --paper-3:    #2A241D;
  --paper-ink:  #241E18;
  --surface:    #201B16;

  --sumi:       #EFE7D6;
  --sumi-2:     #C6BBA6;
  --sumi-3:     #8E8472;

  --shu:        #EE6547;
  --shu-deep:   #C6482F;
  --shu-wash:   rgba(238,101,71,.14);

  --matsu:      #6FB48F;
  --matsu-wash: rgba(111,180,143,.16);
  --ai:         #7FA8CC;
  --ai-wash:    rgba(127,168,204,.15);
  --yamabuki:   #E6B84A;
  --yamabuki-wash: rgba(230,184,74,.16);

  --line:       rgba(239,231,214,.16);
  --line-soft:  rgba(239,231,214,.08);
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg:  0 2px 8px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.6);
  --seigaiha-ink: rgba(127,168,204,.05);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--sumi);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; border-radius: 4px; }

/* ---------- Seigaiha (patrón de olas) ----------
   Fondo a toda página retirado: recargaba demasiado.
   La receta queda como utilidad .seigaiha para detalles pequeños puntuales. */
.seigaiha-bg { display: none; }
.seigaiha {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 100%, transparent 32%, var(--seigaiha-ink) 33%, var(--seigaiha-ink) 37%, transparent 38%, transparent 44%, var(--seigaiha-ink) 45%, var(--seigaiha-ink) 49%, transparent 50%, transparent 56%, var(--seigaiha-ink) 57%, var(--seigaiha-ink) 61%, transparent 62%);
  background-size: 56px 28px;
}

/* ---------- Shell ---------- */
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidenav-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "top  top"
    "side main";
  transition: grid-template-columns .24s var(--ease);
}
.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__brand {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0;
}
.brand__mark {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; line-height: 1; color: var(--shu); letter-spacing: 1px;
}
.brand__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.brand__title { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sumi-2); white-space: nowrap; }
.brand__sub { font-size: 11.5px; color: var(--sumi-3); font-weight: 500; }

.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  background: var(--paper-2); border: 1px solid var(--line);
  transition: transform .15s var(--ease), background .15s;
}
.pill:hover { transform: translateY(-1px); }
.pill__jp { font-family: var(--font-brush); font-size: 15px; }
.pill--gold { background: var(--yamabuki-wash); border-color: color-mix(in srgb, var(--yamabuki) 40%, transparent); color: color-mix(in srgb, var(--yamabuki) 65%, var(--sumi)); }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line);
  color: var(--sumi); transition: transform .15s var(--ease), background .15s;
}
.icon-btn:hover { transform: translateY(-1px); background: var(--paper-3); }

.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: inline; }
.theme-toggle { font-size: 18px; }

/* Barra lateral */
.sidenav {
  grid-area: side;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 16px 12px 24px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.navlink {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 10px; border: 0; background: none;
  width: 100%; text-align: left; color: var(--sumi-2); font-weight: 600; font-size: 14.5px;
  transition: background .14s, color .14s;
}
.navlink:hover { background: var(--paper-2); color: var(--sumi); }
.navlink.is-active { background: var(--shu-wash); color: var(--shu); }
.navlink.is-active .navlink__jp { color: var(--shu); }
.navlink__jp { font-family: var(--font-mincho); font-weight: 600; font-size: 20px; width: 26px; text-align: center; color: var(--sumi-3); line-height: 1; }
.navlink__badge { margin-left: auto; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px; background: var(--shu); color: #fff; }
.navlink__sep { margin: 10px 12px 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sumi-3); font-weight: 700; }

/* ---------- Sidebar plegable ---------- */
.nav-toggle { flex: none; margin-right: 2px; }
.nav-toggle__arrow { transition: transform .24s var(--ease); transform-origin: 15.5px 12px; }
:root.nav-collapsed .nav-toggle__arrow { transform: rotate(180deg); }

:root.nav-collapsed .shell { --sidenav-w: 68px; }
:root.nav-collapsed .sidenav { padding: 16px 8px 24px; align-items: center; overflow-x: hidden; }

:root.nav-collapsed .navlink {
  width: 48px; justify-content: center; gap: 0; padding: 11px 0; position: relative;
}
:root.nav-collapsed .navlink__label { display: none; }
:root.nav-collapsed .navlink__jp { width: auto; font-size: 21px; }
:root.nav-collapsed .navlink__badge {
  position: absolute; top: 2px; right: 0; margin: 0;
  min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px;
  box-shadow: 0 0 0 2px var(--surface);
}
/* los rótulos de sección se vuelven una simple línea divisoria */
:root.nav-collapsed .navlink__sep {
  width: 24px; height: 1px; margin: 12px auto 8px; padding: 0;
  background: var(--line); font-size: 0; overflow: hidden;
}
:root.nav-collapsed .navlink__sep:first-child { display: none; }

/* el rótulo vertical decorativo no cabe en el rail */
:root.nav-collapsed .deco--left { display: none; }

/* Contenido */
.app {
  grid-area: main;
  padding: clamp(18px, 3vw, 34px) clamp(16px, 3vw, 40px) 96px;
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;   /* centra el contenido cuando sobra ancho */
  animation: fade .32s var(--ease);
}
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Rótulos verticales decorativos (izquierda / derecha) */
.deco {
  position: fixed; z-index: 5; pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.deco__word {
  writing-mode: vertical-rl; text-orientation: sideways;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(26px, 2.2vw, 38px); letter-spacing: .02em; color: var(--sumi);
}
.deco__kanji {
  writing-mode: vertical-rl; font-family: var(--font-mincho);
  font-size: 17px; letter-spacing: .18em; color: var(--sumi-2);
}
.deco__spark { color: var(--shu); font-size: 15px; writing-mode: vertical-rl; letter-spacing: .1em; }
.deco--left  { left: 0; width: var(--sidenav-w); bottom: 30px; }
.deco--left .deco__word { transform: rotate(180deg); } /* lee de abajo a arriba */
.deco--right { right: 0; width: 54px; top: calc(var(--topbar-h) + 46px); }
/* deja hueco a la derecha para que el rótulo no pise el contenido */
@media (min-width: 1101px) { .app { padding-right: 66px; } }
@media (max-width: 1100px) { .deco { display: none; } }

/* Barra inferior (oculta en escritorio) */
.bottomnav { display: none; }

/* ---------- Responsive: móvil / tablet ---------- */
@media (max-width: 880px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "top" "main";
  }
  .topbar__brand { position: static; left: auto; height: auto; }
  .brand__sub { display: none; }
  .sidenav { display: none; }
  .nav-toggle { display: none; }
  :root.nav-collapsed .shell { --sidenav-w: 0px; }
  .app { padding-bottom: 88px; }

  .bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    justify-content: space-around; align-items: stretch;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .bnav {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: 0; background: none; color: var(--sumi-3); font-size: 11px; font-weight: 700;
    border-radius: 10px; position: relative;
  }
  .bnav__jp { font-family: var(--font-mincho); font-weight: 600; font-size: 21px; line-height: 1; }
  .bnav.is-active { color: var(--shu); }
  .bnav__badge { position: absolute; top: 2px; right: 22%; min-width: 15px; height: 15px; padding: 0 3px;
    font-size: 9px; font-weight: 800; display: grid; place-items: center; border-radius: 999px; background: var(--shu); color:#fff; }
}
@media (max-width: 420px) {
  .brand__title { font-size: 15px; }
  .pill--gold { padding: 8px 12px; }
}

/* ============================================================
   Componentes compartidos
   ============================================================ */

/* Encabezado de pantalla */
.screen-head { margin-bottom: 22px; }
.screen-head__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--shu);
  margin-bottom: 8px;
}
.screen-head__kicker .jp { font-family: var(--font-brush); font-size: 16px; letter-spacing: 0; }
.screen-head h1 { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.02; }
.screen-head__sub { color: var(--sumi-2); margin-top: 8px; max-width: 62ch; font-size: 15px; }

/* Tarjeta */
.card {
  background: var(--paper-ink); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 18px; position: relative; overflow: hidden;
}
.card--flat { background: var(--paper-2); box-shadow: none; }

/* Rejilla utilitaria */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cols { display: grid; gap: var(--gap); grid-template-columns: var(--cl, 1fr) var(--cr, 1fr); align-items: start; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--sumi);
  transition: transform .14s var(--ease), background .14s, box-shadow .14s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--shu); border-color: var(--shu); color: #fff; box-shadow: 0 6px 18px var(--shu-wash); }
.btn--primary:hover { background: var(--shu-deep); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
/* Día marcado a mano como ya planificado: el botón se queda encendido */
.btn--done {
  background: var(--yamabuki-wash);
  border-color: color-mix(in srgb, var(--yamabuki) 55%, transparent);
  color: color-mix(in srgb, var(--yamabuki) 70%, var(--sumi));
}
.btn--block { width: 100%; }

/* Etiquetas de estado */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--paper-3); color: var(--sumi-2);
}
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tag--included { background: var(--matsu-wash); color: var(--matsu); }
.tag--own      { background: var(--shu-wash); color: var(--shu); }
.tag--transfer { background: var(--ai-wash); color: var(--ai); }
.tag--gap      { background: var(--shu-wash); color: var(--shu); border: 1px dashed color-mix(in srgb, var(--shu) 45%, transparent); }
.tag--full     { background: var(--matsu-wash); color: var(--matsu); }
.tag--hotel    { background: var(--ai-wash); color: var(--ai); }
.tag--goshuin  { background: var(--yamabuki-wash); color: color-mix(in srgb, var(--yamabuki) 70%, var(--sumi)); }
.tag--planned  { background: var(--yamabuki-wash); color: color-mix(in srgb, var(--yamabuki) 70%, var(--sumi)); }
.tag--free     { background: var(--paper-3); color: var(--sumi-3); }

/* Meter / barra */
.meter { height: 10px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.meter__fill { height: 100%; background: linear-gradient(90deg, var(--shu), var(--yamabuki)); border-radius: 999px; }

/* Los kanji pierden los trazos finos en negrita: siempre en regular, aunque el
   texto que los rodea vaya en 800 (títulos, etiquetas, kickers de pantalla). */
.brand__mark, .pill__jp, .rule__jp, .empty__jp, .kanji-stamp, .kanji-inline,
.screen-head__kicker .jp, .screen-head__kicker.is-jp,
.stat__jp, .auth__jp, .goshuin-panel__jp, .goshuin-drop__jp,
.hotel-card__jp, .place-card__jp, .city-card__jp, .deco__kanji { font-weight: 400; }
/* Kanji suelto delante de un texto (títulos de Reservas, líneas de Presupuesto) */
.kanji-inline { font-family: var(--font-brush); font-weight: 400; margin-right: 8px; }

/* Sello / marca de agua kanji decorativa */
.kanji-stamp {
  position: absolute; font-family: var(--font-brush); color: var(--shu);
  opacity: .08; pointer-events: none; user-select: none; line-height: 1;
  font-size: 160px; right: -10px; bottom: -34px;
}

/* Divisor con kanji */
.rule { display: flex; align-items: center; gap: 14px; color: var(--sumi-3); margin: 26px 0 16px; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule__jp { font-family: var(--font-brush); font-size: 15px; }

/* Estado vacío */
.empty { text-align: center; padding: 46px 20px; color: var(--sumi-3); }
.empty__jp { font-family: var(--font-brush); font-size: 46px; color: var(--shu); opacity: .5; }

/* Chip filtro */
.chip {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--sumi-2);
  transition: background .14s;
}
.chip.is-active { background: var(--sumi); color: var(--paper); border-color: var(--sumi); }

/* Migas / volver */
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--sumi-2); font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.backlink:hover { color: var(--shu); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--sumi); color: var(--paper); padding: 12px 20px; border-radius: 12px;
  font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); z-index: 100;
  opacity: 0; transition: opacity .2s, transform .2s var(--ease); pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 880px) { .toast { bottom: 84px; } }

/* Aviso de modo local (el backend no responde: contenido de ejemplo, sin guardar) */
.offline-bar {
  /* En flujo normal, encima del shell: la topbar de dentro sigue siendo la sticky */
  position: relative; z-index: 50;
  background: var(--shu); color: #fff;
  padding: 9px 16px; text-align: center;
  font-size: 13.5px; line-height: 1.35; font-weight: 500;
  box-shadow: var(--shadow-lg);
}
.offline-bar b { font-weight: 800; }