/* ============================================================
   JAPAN ROUTE MASTER — Sistema de diseño "Glacier Nihon"
   Glassmorphism oscuro · Inter · Optimizado para plegables
   ============================================================ */

:root {
  /* Colores base */
  --background: #0a0e1a;
  --on-background: #e0e8f0;
  --surface: #0f1524;
  --on-surface: #e0e8f0;
  --on-surface-variant: #a0b4c4;
  --surface-container-lowest: #0a0e1a;
  --surface-container-low: #111828;
  --surface-container: #141c2e;
  --surface-container-high: #1a2438;
  --surface-container-highest: #202c42;
  --primary: #7dd3fc;
  --primary-fixed: #c8eaff;
  --on-primary: #001f2e;
  --primary-container: #0e4d6e;
  --secondary: #88b4cc;
  --secondary-container: #1a3a4e;
  --tertiary: #c8a0f0;
  --tertiary-container: #3d2060;
  --error: #ff6b6b;
  --outline: #4a6070;
  --outline-variant: #2a3a48;

  /* Tipografía */
  --font: 'Inter', system-ui, sans-serif;

  /* Espaciado */
  --margin: 20px;
  --gutter: 16px;

  /* Safe areas (notch / gestos) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: var(--font);
  background-color: var(--background);
  color: var(--on-background);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Iconos Material Symbols */
.msym {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.msym.fill { font-variation-settings: 'FILL' 1, 'wght' 400; }
.msym.sm { font-size: 18px; }
.msym.xs { font-size: 15px; }
.msym.lg { font-size: 32px; }

/* ---------- Fondo atmosférico ---------- */
.ambient {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px);
}
.orb-cyan {
  top: -18%; left: -12%;
  width: 70vw; height: 70vw;
  background: #7dd3fc; opacity: .09;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-lavender {
  bottom: -20%; right: -12%;
  width: 60vw; height: 60vw;
  background: #c8a0f0; opacity: .06;
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, 4vh) scale(1.15); }
}

/* ---------- Paneles de cristal ---------- */
.glass {
  background: rgba(15, 21, 36, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 211, 252, 0.1);
}
.glass-hi {
  background: rgba(15, 21, 36, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(125, 211, 252, 0.16);
}
.glass-soft {
  background: rgba(188, 199, 222, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Layout de pantalla ---------- */
.screen {
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(72px + var(--safe-top)) var(--margin) calc(110px + var(--safe-bottom));
  animation: fadein .35s ease;
}
.screen.fullbleed { padding: 0; max-width: none; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Al redibujar la misma pantalla no se repite la animación: nada de parpadeos */
#app.sin-anim .screen,
#app.sin-anim .ai-screen { animation: none; }

/* Cabecera fija */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) var(--margin) 10px;
  background: rgba(15, 21, 36, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar h1 {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--primary);
  text-align: center;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .iconbtn { flex: none; }

/* Botón de icono */
.iconbtn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(188, 199, 222, 0.07);
  color: var(--primary);
  cursor: pointer;
  transition: all .2s ease;
}
.iconbtn:active { transform: scale(.92); }
.iconbtn:hover { background: rgba(125, 211, 252, 0.15); }
.iconbtn.ghost { border: none; background: transparent; }

/* Avatar */
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(125, 211, 252, 0.4);
  background: var(--surface-container-high);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--primary);
  flex: none; overflow: hidden;
  cursor: pointer;
}
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Tipografía ---------- */
.display {
  font-size: 34px; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--on-surface);
}
.headline {
  font-size: 22px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--on-surface);
}
.title { font-size: 17px; font-weight: 600; color: var(--on-surface); }
.body { font-size: 15px; line-height: 1.5; color: var(--on-surface); }
.muted { color: var(--on-surface-variant); }
.label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--on-surface-variant);
}
.cyan { color: var(--primary); }
.sakura { color: #ffb2b9; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 50px; padding: 0 22px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all .25s ease;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--primary-fixed);
  color: var(--on-primary);
  box-shadow: 0 0 20px rgba(161, 239, 248, 0.2);
}
.btn-primary:hover { box-shadow: 0 0 28px rgba(161, 239, 248, 0.4); }
.btn-ghost {
  background: rgba(188, 199, 222, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--primary);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-danger {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.3);
  color: var(--error);
}
.btn-block { width: 100%; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 12px; border-radius: 10px; }

/* ---------- Chips ---------- */
.chips {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  /* El último chip se difumina en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
/* Sin degradado cuando todo cabe */
.chips.completo { -webkit-mask-image: none; mask-image: none; }
.chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-surface-variant);
  background: rgba(188, 199, 222, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all .2s ease;
  font-family: var(--font);
}
.chip.active {
  color: var(--primary);
  border-color: rgba(125, 211, 252, 0.5);
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.15);
  background: rgba(125, 211, 252, 0.08);
}

/* ---------- Tarjetas ---------- */
.card {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.card + .card { margin-top: 14px; }
.card-pad { padding: 18px; }

/* Portada de viaje con degradado */
.cover {
  height: 130px;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 14px 16px;
}
.cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,26,.92), rgba(10,14,26,.1));
}
.cover > * { position: relative; z-index: 1; }
.cover .msym.bg {
  position: absolute; right: 12px; top: 10px;
  font-size: 72px; opacity: .18; z-index: 0;
  color: #fff;
}

/* Listas con divisores de hielo */
.icelist > * {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .2s ease;
}
.icelist > *:hover { background: rgba(255, 255, 255, 0.04); }
.icelist > * + * { border-top: 1px solid rgba(125, 211, 252, 0.12); }

/* Icono cuadrado de documento/categoría */
.sqicon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--surface-container);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { padding-left: 2px; }
.input {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  height: 52px;
  border-radius: 12px;
  background: rgba(6, 14, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all .3s ease;
}
.input:focus-within {
  border-color: var(--primary-fixed);
  background: rgba(6, 14, 32, 0.8);
  box-shadow: 0 0 15px rgba(161, 239, 248, 0.15);
}
.input input, .input select, textarea.input, .input textarea {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 15px;
  min-width: 0;
}
.input select option { background: var(--surface-container-high); color: var(--on-surface); }
textarea.input {
  height: auto; min-height: 84px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}
.input input::placeholder, .input textarea::placeholder { color: rgba(160, 180, 196, 0.5); }

/* Checkbox de cristal */
.check {
  width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid rgba(125, 211, 252, 0.4);
  background: rgba(6, 14, 32, 0.5);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  cursor: pointer;
  flex: none;
  transition: all .2s ease;
}
.check.on {
  background: var(--primary-fixed);
  border-color: var(--primary-fixed);
  color: var(--on-primary);
  box-shadow: 0 0 10px rgba(161, 239, 248, 0.35);
}

/* ---------- Navegación inferior ---------- */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-around; align-items: center;
  padding: 10px var(--margin) calc(14px + var(--safe-bottom));
  background: rgba(17, 24, 40, 0.55);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px 22px 0 0;
}
.bottomnav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none;
  color: rgba(160, 180, 196, 0.65);
  font-family: var(--font);
  font-size: 10.5px; font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 12px;
  transition: all .25s ease;
}
.bottomnav button:active { transform: scale(.9); }
.bottomnav button.active {
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.5));
}
.bottomnav button.active .msym { font-variation-settings: 'FILL' 1, 'wght' 400; }
.hidden { display: none !important; }

/* ---------- Modales ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 8, 18, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadein .2s ease;
}
.modal {
  width: 100%; max-width: 520px;
  max-height: 86dvh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: rgba(15, 21, 36, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-bottom: none;
  padding: 10px 22px calc(26px + var(--safe-bottom));
  animation: slideup .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideup {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal .grab {
  width: 44px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  margin: 6px auto 18px;
}

/* ---------- Toasts ---------- */
#toast-root {
  position: fixed; top: calc(14px + var(--safe-top)); left: 0; right: 0;
  z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(15, 21, 36, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(125, 211, 252, 0.25);
  color: var(--on-surface);
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 0 30px rgba(125, 211, 252, 0.12);
  animation: slidedown .3s ease;
  max-width: 88vw;
}
@keyframes slidedown {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------- Splash ---------- */
.splash {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  padding: var(--margin);
}
.splash .logo-wrap {
  position: relative;
  animation: breathe 3s ease-in-out infinite;
}
.splash .logo-wrap::before {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 34px;
  background: linear-gradient(120deg, rgba(125,211,252,.5), rgba(200,160,240,.35));
  filter: blur(22px);
  opacity: .5;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.splash img { position: relative; width: 128px; height: 128px; border-radius: 28px; }
.splash h1 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  text-align: center; color: var(--on-surface); line-height: 1.2;
}
.splash h1 span { display: block; color: var(--primary); }
.progressbar {
  width: min(240px, 60vw); height: 3px;
  border-radius: 4px;
  background: rgba(125, 211, 252, 0.15);
  overflow: hidden;
}
.progressbar > div {
  height: 100%; width: 30%;
  border-radius: 4px;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(125, 211, 252, 0.8);
  animation: loadbar 1.6s ease-in-out infinite;
}
@keyframes loadbar {
  0% { margin-left: -30%; }
  100% { margin-left: 100%; }
}

/* ---------- Login ---------- */
.login {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 34px;
  padding: 44px var(--margin);
  max-width: 480px; margin: 0 auto;
}
.login .brand { text-align: center; }
.login .brand img { width: 96px; height: 96px; border-radius: 24px; margin-bottom: 18px; }
.login .panel {
  width: 100%;
  border-radius: 26px;
  padding: 30px 26px;
}

/* ---------- Feed de vídeos ---------- */
.feed {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed-item {
  height: 100dvh;
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--surface-container-lowest);
}
.feed-item .videobox {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.feed-item .videobox iframe {
  width: 100%; height: 100%;
  border: none;
}
.feed-item .videobox .placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--on-surface-variant);
}
.feed-item .shade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(10,14,26,.9), transparent);
  pointer-events: none;
}
.feed-item .overlay {
  position: relative; z-index: 2;
  padding: 0 var(--margin) calc(96px + var(--safe-bottom));
}
.feed-actions {
  position: absolute; right: 14px; bottom: calc(190px + var(--safe-bottom)); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.feed-actions .act {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--primary); font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.feed-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + var(--safe-top)) var(--margin) 12px;
}

/* ---------- Timeline itinerario ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 1.5px;
  background: linear-gradient(to bottom, rgba(125,211,252,.5), rgba(125,211,252,.08));
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before {
  content: '';
  position: absolute; left: -23px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.7);
}
.tl-item.dim::before { background: var(--outline); box-shadow: none; }

/* ---------- Utilidades ---------- */
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 4px; }
.grow { flex: 1; min-width: 0; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 34px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.tag-cyan { background: var(--primary); color: var(--on-primary); }
.tag-glass { background: rgba(188,199,222,.08); border: 1px solid rgba(255,255,255,.12); color: var(--on-surface); }
.tag-pink { background: rgba(255,178,185,.15); border: 1px solid rgba(255,178,185,.3); color: #ffb2b9; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--on-surface-variant);
}
.empty .msym { font-size: 46px; opacity: .5; margin-bottom: 12px; }

/* Estado de sincronización */
.syncdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--outline); flex: none;
}
.syncdot.on { background: #6ddd81; box-shadow: 0 0 8px rgba(109, 221, 129, 0.7); }
.syncdot.err { background: var(--error); box-shadow: 0 0 8px rgba(255, 107, 107, 0.6); }

/* ---------- Mapa ---------- */
.map-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: calc(78px + var(--safe-bottom));
}
#mapa {
  position: absolute; inset: 0;
  background: var(--surface-container-lowest);
}
.map-chips {
  position: absolute; z-index: 500;
  top: calc(62px + var(--safe-top)); left: 0; right: 0;
  display: flex; gap: 8px;
  padding: 0 var(--margin) 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.map-chips::-webkit-scrollbar { display: none; }
.map-chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.map-chips.completo { -webkit-mask-image: none; mask-image: none; }
.map-chips .chip {
  background: rgba(15, 21, 36, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.map-footer {
  position: absolute; z-index: 500;
  left: var(--margin); right: var(--margin); bottom: 14px;
  border-radius: 14px;
  max-width: 520px; margin: 0 auto;
}
.map-pin {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: rgba(15, 21, 36, 0.92);
  border: 2px solid var(--pin, #7dd3fc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--pin, #7dd3fc) 45%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--pin, #7dd3fc);
}
.map-pin .msym { transform: rotate(45deg); }
.leaflet-container { font-family: var(--font); background: #0a0e1a; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: rgba(15, 21, 36, 0.95);
  color: var(--on-surface);
  border: 1px solid rgba(125, 211, 252, 0.25);
  backdrop-filter: blur(16px);
  border-radius: 12px;
}
.leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; }
.map-pop b { font-size: 14.5px; }
.map-pop .pop-sub { color: var(--on-surface-variant); font-size: 12px; margin-top: 2px; }
.map-pop .pop-nota { color: var(--on-surface-variant); font-size: 12.5px; margin-top: 6px; }
.map-pop a { color: var(--primary); display: inline-block; margin-top: 8px; font-weight: 600; }
.leaflet-control-attribution {
  background: rgba(10, 14, 26, 0.7) !important;
  color: var(--on-surface-variant) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--secondary) !important; }
.leaflet-bar a {
  background: rgba(15, 21, 36, 0.9) !important;
  color: var(--primary) !important;
  border-color: rgba(125, 211, 252, 0.2) !important;
}

/* ---------- Sugerencias de búsqueda ---------- */
.sugerencias {
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(6, 14, 32, 0.75);
  border: 1px solid rgba(125, 211, 252, 0.18);
  max-height: 220px; overflow-y: auto;
}
.sug {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: none; border: none;
  color: var(--on-surface);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
}
.sug + .sug { border-top: 1px solid rgba(125, 211, 252, 0.1); }
.sug:hover { background: rgba(125, 211, 252, 0.09); }

.mini-select {
  flex: none;
  background: rgba(6, 14, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 8px;
}
.mini-select option { background: var(--surface-container-high); }

/* Reservas dentro del itinerario */
.tl-item.tl-book::before {
  background: var(--pin, #7dd3fc);
  box-shadow: 0 0 10px var(--pin, #7dd3fc);
  width: 11px; height: 11px; left: -24px;
}

/* ---------- Capturas (feed tipo Instagram) ---------- */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (min-width: 700px) { .shot-grid { grid-template-columns: repeat(4, 1fr); } }
.shot-cell {
  position: relative;
  aspect-ratio: 1;
  border: none; padding: 0;
  background: var(--surface-container);
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;
}
.shot-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-cell:active img { opacity: .7; }
.shot-badge {
  position: absolute; top: 5px; right: 5px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.shot-feed { display: flex; flex-direction: column; gap: 16px; }
.shot-post { border-radius: 16px; overflow: hidden; }
.shot-img {
  width: 100%;
  max-height: 62vh;
  object-fit: cover;
  display: block;
  background: var(--surface-container-lowest);
}

/* Campos pequeños dentro de listas de confirmación */
.mini-input {
  background: rgba(6, 14, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 13.5px;
  padding: 7px 9px;
  width: 100%;
  min-width: 0;
}
.mini-input:focus { outline: none; border-color: var(--primary-fixed); }

/* Filas de datos en la ficha de una reserva */
.datos { padding: 4px 0 6px; }
.dato-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 16px;
}
.dato-row + .dato-row { border-top: 1px solid rgba(125, 211, 252, 0.1); }

/* ---------- Zonas del planificador ---------- */
.zona-card {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.zona-head {
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  background: none; border: none;
  color: var(--on-surface);
  font-family: var(--font);
  cursor: pointer;
}
.zona-flecha { transition: transform .25s ease; }
.zona-card.abierta .zona-flecha { transform: rotate(180deg); }
.zona-body { display: none; }
.zona-card.abierta .zona-body { display: block; }
.zona-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
}
.zona-item .msym.xs { vertical-align: -2px; }

/* ---------- Asistente IA (chat a pantalla completa) ---------- */
.ai-screen {
  position: fixed;
  top: calc(56px + var(--safe-top));
  left: 0; right: 0;
  bottom: calc(74px + var(--safe-bottom));
  display: flex; flex-direction: column;
  max-width: 520px; margin: 0 auto;
}
@media (min-width: 700px) { .ai-screen { max-width: 1080px; } }
.ai-lista {
  flex: 1;
  overflow-y: auto;
  padding: 14px var(--margin) 6px;
  -webkit-overflow-scrolling: touch;
}
.ai-barra {
  flex: none;
  padding: 8px var(--margin) 10px;
  background: rgba(15, 21, 36, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(125, 211, 252, 0.12);
}
.ai-bubble-user {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px 16px 4px 16px;
  background: var(--primary-container);
  color: #eaf7ff;
  font-size: 14.5px; line-height: 1.5;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.ai-bubble-model {
  max-width: 90%;
  padding: 12px 15px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--on-surface);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.ai-bubble-model b { color: var(--primary); }

/* ---------- Calculadora ---------- */
.calc-display {
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
}
.calc-big {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--on-surface); line-height: 1.1;
  word-break: break-all;
}
.calc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.calc-key {
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(188, 199, 222, 0.07);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 20px; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.calc-key:active { transform: scale(.94); background: rgba(125, 211, 252, 0.16); }
.calc-key.accion { color: var(--primary); font-size: 17px; }

/* ============================================================
   PLEGABLES — Galaxy Z Flip 7 / Honor Magic V2
   ============================================================ */

/* Pantallas muy alargadas (Z Flip 7 abierto ≈ 21.9:9) */
@media (min-aspect-ratio: 9/20) and (max-width: 500px) {
  .screen { padding-left: 18px; padding-right: 18px; }
}

/* Pantalla externa pequeña / mitad plegada vertical */
@media (max-height: 500px) and (orientation: landscape) {
  .screen { max-width: 900px; padding-bottom: 80px; }
  .bottomnav { border-radius: 0; padding-bottom: 8px; }
  .login { flex-direction: row; gap: 44px; max-width: 860px; }
  .login .brand { flex: 1; }
  .login .panel-wrap { flex: 1.2; }
}

/* Honor Magic V2 desplegado (interior ~ tablet cuadrada 2344×2156) */
@media (min-width: 700px) {
  .screen { max-width: 1080px; padding-left: 44px; padding-right: 44px; }
  .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .grid-2col .card + .card { margin-top: 0; }
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 22px; border-bottom: 1px solid rgba(125, 211, 252, 0.18); }
  .feed-item .videobox { max-width: 480px; margin: 0 auto; }
}

/* Flex Mode (dispositivo medio plegado en horizontal — clase puesta por JS
   con la Device Posture API): el contenido sube a la mitad superior */
html.flex-mode .screen {
  min-height: 50dvh;
  padding-bottom: calc(50dvh + 20px);
}
html.flex-mode .bottomnav {
  bottom: auto;
  top: 50dvh;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 8px 16px;
  left: 0; right: 0;
}
html.flex-mode .feed-item .videobox {
  align-items: flex-start;
}
html.flex-mode .feed-item .videobox iframe { height: 50dvh; }
html.flex-mode .feed-item .overlay { padding-bottom: calc(52dvh + 10px); }

/* ---------- Comidas ---------- */
.food-grid { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 700px) {
  .food-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
.food-card {
  display: flex; align-items: stretch;
  border-radius: 14px; overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.food-card:active { transform: scale(.985); }
.food-img {
  width: 108px; flex: none;
  object-fit: cover;
  background: var(--surface-container);
}
.food-sinfoto {
  display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant); opacity: .45;
}
.food-sinfoto .msym { font-size: 34px; }
.estrellas { display: flex; gap: 2px; }
.estrella {
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: rgba(255,255,255,.18);
  padding: 0 2px;
  transition: color .15s ease, transform .15s ease;
}
.estrella.on { color: #ffd28a; }
.estrella:active { transform: scale(1.25); }

/* ---------- Mapa: segunda fila de filtros y capa de reservas ---------- */
.map-chips-2 { top: calc(106px + var(--safe-top)); }
.map-chips-2 .chip { font-size: 10.5px; padding: 6px 12px; }
.map-toggle {
  position: absolute; z-index: 500;
  right: 12px; top: calc(150px + var(--safe-top));
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,21,36,.85);
  backdrop-filter: blur(14px);
  color: var(--on-surface-variant);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.map-toggle.on {
  color: var(--primary);
  border-color: rgba(125,211,252,.45);
  box-shadow: 0 0 14px rgba(125,211,252,.2);
}
.map-pin.hecho { opacity: .45; }
.map-pin.reserva {
  width: 36px; height: 36px;
  border-radius: 12px;
  transform: none;
  border-width: 2.5px;
}
.map-pin.reserva .msym { transform: none; }

/* ============================================================
   "TU DÍA" — línea del día generada
   ============================================================ */
.hoy-cabecera { position: relative; overflow: hidden; }
.hoy-cabecera::after {
  content: '';
  position: absolute; top: -60%; right: -30%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125,211,252,.16), transparent 70%);
  pointer-events: none;
}
.hoy-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
}
.hoy-stats > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hoy-stats b { font-size: 17px; font-weight: 700; color: var(--on-surface); }
.hoy-stats span:last-child {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-surface-variant);
}

.hoy-linea { position: relative; padding-left: 52px; }
.hoy-linea::before {
  content: '';
  position: absolute; left: 20px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(125,211,252,.55), rgba(125,211,252,.28) 60%, rgba(125,211,252,.05));
}
.hoy-item { position: relative; margin-bottom: 10px; }
.hoy-item::before {
  content: '';
  position: absolute; left: -37px; top: 18px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,14,26,1), 0 0 12px rgba(125,211,252,.8);
}
.hoy-hora {
  position: absolute; left: -52px; top: 34px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--primary);
  width: 46px;
}
.hoy-card {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.9,.3,1), border-color .16s ease;
}
.hoy-card:active { transform: scale(.98); }
.hoy-traslado {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0 9px 2px;
  font-size: 11.5px;
  color: var(--on-surface-variant);
  opacity: .8;
}
.hoy-traslado .msym { opacity: .75; }

/* ---------- Votos del grupo ---------- */
.voto {
  flex: none;
  display: inline-flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(188, 199, 222, 0.06);
  color: var(--on-surface-variant);
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.9,.3,1);
}
.voto:active { transform: scale(1.18); }
.voto.mio { color: #ffb2b9; border-color: rgba(255,178,185,.45); background: rgba(255,178,185,.1); }
.voto.todos {
  color: #ffb2b9;
  border-color: rgba(255,178,185,.75);
  box-shadow: 0 0 12px rgba(255,178,185,.28);
}

/* ---------- Barra de presupuesto ---------- */
.barra-presupuesto {
  height: 8px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.barra-presupuesto > div {
  height: 100%; border-radius: 6px;
  transition: width .6s cubic-bezier(.2,.9,.3,1);
}

/* ============================================================
   PULIDO GENERAL — que se sienta fluida
   ============================================================ */

/* Las tarjetas entran escalonadas, no todas de golpe */
#app:not(.sin-anim) .zona-card,
#app:not(.sin-anim) .food-card,
#app:not(.sin-anim) .hoy-item,
#app:not(.sin-anim) .card {
  animation: entrada .32s cubic-bezier(.2,.9,.3,1) backwards;
}
#app:not(.sin-anim) .zona-card:nth-child(1),
#app:not(.sin-anim) .hoy-item:nth-child(1) { animation-delay: .02s; }
#app:not(.sin-anim) .zona-card:nth-child(2),
#app:not(.sin-anim) .hoy-item:nth-child(2) { animation-delay: .05s; }
#app:not(.sin-anim) .zona-card:nth-child(3),
#app:not(.sin-anim) .hoy-item:nth-child(3) { animation-delay: .08s; }
#app:not(.sin-anim) .zona-card:nth-child(4),
#app:not(.sin-anim) .hoy-item:nth-child(4) { animation-delay: .11s; }
#app:not(.sin-anim) .zona-card:nth-child(n+5),
#app:not(.sin-anim) .hoy-item:nth-child(n+5) { animation-delay: .13s; }
@keyframes entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Respuesta física al tocar */
.chip:active { transform: scale(.94); }
.zona-item:active { background: rgba(125, 211, 252, 0.07); }
.check { transition: transform .18s cubic-bezier(.2,.9,.3,1), background .18s ease; }
.check:active { transform: scale(1.22); }
.check.on { animation: marcado .32s cubic-bezier(.2,.9,.3,1); }
@keyframes marcado {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Quien prefiera menos movimiento, que no lo tenga */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Primeros pasos ---------- */
.pasos .paso {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  background: none; border: none;
  color: var(--on-surface);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: opacity .2s ease, transform .15s ease;
}
.pasos .paso + .paso { border-top: 1px solid rgba(125, 211, 252, 0.1); }
.pasos .paso:active { transform: scale(.985); }
.pasos .paso.hecho { opacity: .42; cursor: default; }
.paso-icono {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200, 160, 240, 0.14);
  color: var(--tertiary);
}
.paso.hecho .paso-icono { background: rgba(109, 221, 129, 0.16); color: #6ddd81; }