@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Superficies */
  --bg: #eef2fd;
  --surface: #ffffff;
  --surface-tint: #f2f4fd;
  --border: #e4e8f7;
  --text: #171a33;
  --muted: #7b81a3;
  --muted-dark: #565c80;
  --overlay-bg: #151733; /* fondo oscuro dedicado para overlays (PIN, modales) */

  /* Marca — azul→índigo con degradado (igual que el diseño de referencia) */
  --brand: #6c5ce7;
  --brand-deep: #4c3fd6;
  --brand-light: #8b7bff;
  --brand-soft: rgba(108, 92, 231, 0.12);
  --brand-navy: #171a33;
  --grad-brand: linear-gradient(100deg, #3f8ef7 0%, #7367f5 100%);

  /* Colores por categoría (cada sección, su color) */
  --cat-flights: #3b82f6;
  --cat-flights-a: #7cb0fb;
  --cat-hotels: #14b8a6;
  --cat-hotels-a: #5ed9cb;
  --cat-itinerary: #6c5ce7;
  --cat-itinerary-a: #a79bff;
  --cat-transport: #f97316;
  --cat-transport-a: #fdba74;
  --cat-reservations: #ef4444;
  --cat-reservations-a: #fca5a5;
  --cat-expenses: #f59e0b;
  --cat-expenses-a: #fcd34d;
  --cat-checklist: #22c55e;
  --cat-checklist-a: #86efac;
  --cat-calendar: #5c7cfa;
  --cat-map: #06b6d4;

  /* Tipos de actividad del itinerario, como en la maqueta
     (Museo = cian, Restaurante = coral, Monumento = índigo, ...) */
  --tag-sight: #2fb8c4;
  --tag-sight-soft: #c7f0f2;
  --tag-food: #f3703a;
  --tag-food-soft: #fdd9cc;
  --tag-monument: #6c5ce7;
  --tag-monument-soft: #e4dcff;
  --tag-lodging: #d9822b;
  --tag-lodging-soft: #f7ddb8;
  --tag-nature: #2ea86b;
  --tag-nature-soft: #cdf0dc;
  --tag-shopping: #d94f8c;
  --tag-shopping-soft: #f8d3e4;
  --tag-other: #5c7cfa;
  --tag-other-soft: #dbe3ff;

  --teal: #14b8a6;
  --rose: #ef4444;

  /* Categorías de gastos — paleta propia y deliberada (no reutiliza
     --cat-*/--tag-* de otras secciones) para que las 6 se distingan
     claramente entre sí en el donut de "Por categoría"; antes Comida
     y Transporte compartían prácticamente el mismo naranja. */
  --exp-transporte: #f97316;
  --exp-transporte-soft: #fed7aa;
  --exp-comida: #ec4899;
  --exp-comida-soft: #fbcfe8;
  --exp-alojamiento: #14b8a6;
  --exp-alojamiento-soft: #99f6e4;
  --exp-ocio: #6c5ce7;
  --exp-ocio-soft: #ddd6fe;
  --exp-compras: #ef4444;
  --exp-compras-soft: #fecaca;
  --exp-otros: #64748b;
  --exp-otros-soft: #e2e8f0;

  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;

  --radius-card: 22px;
  --radius-card-sm: 18px;
  --radius-sheet: 30px;
  --radius-btn: 16px;
  --shadow-card: 0 10px 30px rgba(23, 26, 51, 0.07);
  --shadow-brand: 0 10px 24px rgba(92, 79, 220, 0.32);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Fondo "atmósfera": foto de cielo con nubes (generada, con grano
     fotográfico incluido en la propia imagen — ver img/bg-sky-*.webp). */
  --atmos-bg-image: url("../img/bg-sky-light.webp");
  /* Halo sutil detrás del texto que va directo sobre el fondo
     "atmósfera" (sin tarjeta debajo, p. ej. "Mis viajes"): en tema
     claro el cielo es claro y el texto oscuro puede perder contraste
     ahí. En tema oscuro no hace falta, así que va vacío. */
  --text-halo: 0 1px 3px rgba(255, 255, 255, 0.65), 0 2px 18px rgba(255, 255, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14132b;
    --surface: #1e1c3d;
    --surface-tint: #272451;
    --border: #322f5c;
    --text: #f3f1ff;
    --muted: #a5a3c9;
    --muted-dark: #8785b3;
    --overlay-bg: #0d0c22;

    --atmos-bg-image: url("../img/bg-sky-dark.webp");
    --text-halo: none;
  }
}

/* Tema elegido a mano desde Ajustes → Tema (anula el automático del
   sistema). Sin el atributo data-theme, la app sigue el tema del
   sistema como hasta ahora. */
:root[data-theme="dark"] {
  --bg: #10122a;
  --surface: #1b1e3d;
  --surface-tint: #252950;
  --border: #2f3460;
  --text: #f1f2ff;
  --muted: #a2a7ce;
  --muted-dark: #8b90bb;
  --overlay-bg: #0b0d1f;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);

  --atmos-bg-image: url("../img/bg-sky-dark.webp");
  --text-halo: none;
}

:root[data-theme="light"] {
  --bg: #eef2fd;
  --surface: #ffffff;
  --surface-tint: #f2f4fd;
  --border: #e4e8f7;
  --text: #171a33;
  --muted: #7b81a3;
  --muted-dark: #565c80;
  --overlay-bg: #151733;
  --shadow-card: 0 10px 30px rgba(23, 26, 51, 0.07);

  --atmos-bg-image: url("../img/bg-sky-light.webp");
  --text-halo: 0 1px 3px rgba(255, 255, 255, 0.65), 0 2px 18px rgba(255, 255, 255, 0.45);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  height: 100%;
}

/* ============================================================
   FONDO "ATMÓSFERA"
   Capa fija detrás de #app: una foto de cielo con nubes (generada por
   ruido fractal suavizado, no dibujada a mano) con grano fotográfico
   ya integrado en la propia imagen — img/bg-sky-light.webp (tema
   claro, atardecer) / img/bg-sky-dark.webp (tema oscuro, noche).
   Estática a propósito (sin animación), pesa unos pocos KB cada una.
   No captura clics ni afecta el layout.
   ============================================================ */

.atmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: var(--atmos-bg-image);
  background-size: cover;
  background-position: center;
  background-color: var(--bg);
}

body {
  overscroll-behavior-y: none;
  position: relative;
  overflow-x: hidden;
}

/* Las manchas de color decorativas de antes fueron reemplazadas por el
   fondo "atmósfera" (.atmos-bg, más abajo), que cumple el mismo
   papel de dar vida a las pantallas anchas sin interferir con el
   contenido. */

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a { color: inherit; }

::selection {
  background: var(--brand);
  color: #fff;
}

.icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
}

.stat-icon {
  color: var(--accent, var(--brand));
  margin-right: 5px;
  width: 15px;
  height: 15px;
}

.panel-icon {
  color: var(--accent, var(--brand));
  margin-right: 7px;
  width: 17px;
  height: 17px;
}

/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
  padding: calc(16px + var(--safe-top)) 20px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, var(--bg) 72%, rgba(238, 242, 253, 0));
}

.topbar .icon-btn {
  flex-shrink: 0;
}

.topbar-titles {
  flex: 1;
  min-width: 0;
}

.topbar-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 2px 6px rgba(32, 31, 61, 0.05);
}

.icon-btn:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(232, 114, 42, 0.18);
}
.icon-btn:active { transform: scale(0.94); }

.icon-btn.logged-in {
  position: relative;
  border-color: var(--cat-hotels);
}
.icon-btn.logged-in::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat-hotels);
  border: 2px solid var(--surface);
}

/* ============================================================
   CONTENIDO
   ============================================================ */

.view {
  flex: 1;
  padding: 4px 20px 110px;
}

.view.no-tabbar { padding-bottom: 40px; }

.section-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin: 22px 0 10px;
}

.section-title:first-child { margin-top: 6px; }

/* ============================================================
   TARJETAS DE ELEMENTOS (vuelos, hoteles, itinerario...)
   Estilo "Wanderlog": tarjeta redondeada + insignia de color por
   categoría en vez del billete de embarque anterior.
   ============================================================ */

.ticket {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(32, 31, 61, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(32, 31, 61, 0.1);
  }
}

/* Colores por categoría: cada una define su propio degradado */
.ticket.cat-flights      { --accent-a: var(--cat-flights-a);      --accent-b: var(--cat-flights);      --accent: var(--cat-flights); }
.ticket.cat-hotels       { --accent-a: var(--cat-hotels-a);       --accent-b: var(--cat-hotels);       --accent: var(--cat-hotels); }
.ticket.cat-itinerary    { --accent-a: var(--cat-itinerary-a);    --accent-b: var(--cat-itinerary);    --accent: var(--cat-itinerary); }
.ticket.cat-transport    { --accent-a: var(--cat-transport-a);    --accent-b: var(--cat-transport);    --accent: var(--cat-transport); }
.ticket.cat-checklist    { --accent-a: var(--cat-checklist-a);    --accent-b: var(--cat-checklist);    --accent: var(--cat-checklist); }
.ticket.cat-reservations { --accent-a: var(--cat-reservations-a); --accent-b: var(--cat-reservations); --accent: var(--cat-reservations); }
.ticket.cat-expenses     { --accent-a: var(--cat-expenses-a);     --accent-b: var(--cat-expenses);     --accent: var(--cat-expenses); }

.ticket-stub {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-card-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-a, var(--brand)), var(--accent-b, var(--brand-deep)));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  color: #fff;
  overflow: hidden;
}

.ticket-stub .stub-icon {
  display: flex;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.ticket-stub .icon-svg {
  width: 30px;
  height: 30px;
}

.ticket-stub.has-photo {
  background: var(--surface-tint);
}

.ticket-stub img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-fade-in 0.4s ease;
}

.stub-date {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border-radius: 10px;
  padding: 2px 8px;
  display: flex;
  gap: 3px;
  align-items: baseline;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.stub-day {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.stub-month {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
}

/* El talón perforado ya no se usa visualmente, se deja oculto por si
   quedara algún resto en el DOM. */
.ticket-divider { display: none; }

.ticket-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.ticket-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.ticket-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, var(--teal));
  flex-shrink: 0;
}

.ticket-meta {
  font-size: 13px;
  color: var(--muted-dark);
  margin: 3px 0 0;
  line-height: 1.5;
}

.ticket-meta .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-tint);
  padding: 1px 6px;
  border-radius: 6px;
}

.ticket-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ticket-actions button {
  border: none;
  background: var(--surface-tint);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 10px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.ticket-actions button:hover { background: var(--brand-soft); color: var(--brand-deep); }
.ticket-actions button:active { transform: scale(0.95); }

.ticket-actions button.danger {
  background: rgba(250, 82, 82, 0.1);
  color: var(--rose);
}
.ticket-actions button.danger:hover { background: rgba(250, 82, 82, 0.18); }

.ticket.done { opacity: 0.55; }
.ticket.done .ticket-title { text-decoration: line-through; }

.ticket.compact { align-items: center; padding: 10px 14px; }
.ticket.compact .ticket-stub {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(116, 184, 22, 0.14);
  box-shadow: none;
}

/* ============================================================
   ARRASTRAR Y SOLTAR (itinerario, checklist)
   ============================================================ */

.drag-handle {
  flex-shrink: 0;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
  cursor: grab;
  touch-action: none;
  align-self: center;
}

.drag-ghost { opacity: 0.4; }

.sortable-chosen { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }

/* ============================================================
   MAPA
   ============================================================ */

.map-pin {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
}

.leaflet-popup-tip { background: var(--surface); }

/* ============================================================
   BOTONES
   ============================================================ */

.btn {
  border: none;
  border-radius: var(--radius-btn);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

@media (hover: hover) {
  .btn:hover { filter: brightness(1.05); }
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(232, 114, 42, 0.3);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
@media (hover: hover) {
  .btn-secondary:hover { border-color: var(--brand); color: var(--brand-deep); }
}

.btn-danger {
  background: rgba(250, 82, 82, 0.12);
  color: var(--rose);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

.fab {
  position: fixed;
  right: max(20px, calc((100vw - 560px) / 2 + 20px));
  bottom: calc(90px + var(--safe-bottom));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  border: none;
  font-size: 26px;
  box-shadow: 0 12px 26px rgba(232, 114, 42, 0.4);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .fab:hover { transform: translateY(-2px) scale(1.03); }
}
.fab:active { transform: scale(0.95); }

/* ============================================================
   TARJETAS DE RESUMEN / DASHBOARD
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.stat-card {
  --accent: var(--brand);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-sm);
  padding: 14px 14px 14px 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--accent);
}
@media (hover: hover) {
  .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(32,31,61,0.1); }
}
.stat-card:active { transform: scale(0.97); }

.stat-card[data-nav="flights"] { --accent: var(--cat-flights); }
.stat-card[data-nav="hotels"] { --accent: var(--cat-hotels); }
.stat-card[data-nav="itinerary"] { --accent: var(--cat-itinerary); }
.stat-card[data-nav="transport"] { --accent: var(--cat-transport); }
.stat-card[data-nav="expenses"] { --accent: var(--cat-expenses); }

.stat-card-discover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  aspect-ratio: 5 / 4;
  padding: 10px;
}
.stat-card-discover::before {
  width: 100%;
  height: 5px;
  top: 0; left: 0; right: 0; bottom: auto;
}
.stat-card-discover-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* .stat-card.stat-card-discover (dos clases en el mismo elemento, no
   un descendiente) para que esto gane con seguridad frente a la regla
   genérica .stat-card .stat-label de más abajo — antes empataban en
   especificidad y ganaba esa por venir después en el archivo, dejando
   "Descubre" en gris apagado (casi invisible sobre la foto oscura). */
.stat-card.stat-card-discover .stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.stat-card-discover-photo {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.stat-card-discover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 16, 33, 0.1), rgba(15, 16, 33, 0.6));
}
.stat-card-discover-photo .stat-card-discover-icon {
  /* ya hay una foto real de fondo: se oculta la ilustración de relleno */
  display: none;
}
.stat-card.stat-card-discover-photo .stat-label {
  position: relative;
  z-index: 1;
  color: #fff;
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--muted);
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--accent);
}

.panel {
  --accent: var(--brand);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px 16px 16px 20px;
  margin-top: 14px;
  overflow: hidden;
}
.panel[data-nav]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--accent);
}
.panel[data-nav="map"] { --accent: var(--cat-map); }
.panel[data-nav="expenses"] { --accent: var(--cat-expenses); }
.panel[data-nav="checklist"] { --accent: var(--cat-checklist); }
.panel[data-nav="calendar"] { --accent: var(--cat-calendar); }

.panel[data-nav] { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  .panel[data-nav]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(32,31,61,0.1); }
}
.panel[data-nav]:active { transform: scale(0.99); }

.panel h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  margin: 0 0 10px;
  font-weight: 700;
}

.progress-track {
  background: var(--surface-tint);
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--cat-itinerary));
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-fill.over { background: var(--rose); }

.agenda-line {
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  gap: 8px;
}
.agenda-line:last-child { border-bottom: none; }

.today-banner {
  background: linear-gradient(120deg, var(--cat-itinerary), var(--brand));
  color: #fff;
  border-radius: var(--radius-card-sm);
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 18px rgba(232, 114, 42, 0.25);
}

/* ============================================================
   FORMULARIOS / MODAL
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 54, 0.55);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: modal-fade-in 0.22s ease both;
}

.modal-sheet {
  background: var(--surface);
  border-top-left-radius: var(--radius-sheet);
  border-top-right-radius: var(--radius-sheet);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 10px 20px calc(28px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  animation: modal-slide-up 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modal-fade-in {
  from { background: rgba(23, 20, 54, 0); }
  to { background: rgba(23, 20, 54, 0.55); }
}

@keyframes modal-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 8px auto 14px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 16px;
}

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
}

/* <input type="date"> trae su propio layout interno (segmentos
   dd/mm/aaaa + icono de calendario) que en iOS Safari puede ignorar
   width:100% y quedarse con un ancho mínimo de contenido propio, además
   de imponer su propio alto nativo por encima del resto de campos.
   appearance:none apaga ese estilo nativo de la plataforma (Safari
   sigue abriendo el selector de fecha al tocar el campo, solo deja de
   dibujar su propio "cromado") para que padding/height/width de aquí
   sean los que de verdad se apliquen, y así el campo quede del mismo
   alto que el resto de líneas del formulario en cualquier navegador. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  height: 46px;
  box-sizing: border-box;
}
.field input[type="date"]::-webkit-date-and-time-value {
  width: 100%;
  text-align: left;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.field textarea { min-height: 80px; resize: vertical; }

.field-row {
  display: grid;
  /* minmax(0, 1fr) en vez de un simple 1fr: así la pista del grid
     queda anclada a 0 como mínimo de verdad. Con solo 1fr, un
     <input type="date"> (con su propio ancho mínimo de contenido
     para "dd/mm/aaaa" + icono de calendario) puede seguir forzando
     su columna a crecer más de la cuenta en algunos motores (visto
     en iOS Safari), rompiendo la simetría de la fila. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.field-row > .field {
  min-width: 0;
  max-width: 100%;
}

/* Separador "o con tu email" entre el botón de Google y el
   formulario de email/contraseña, en la pantalla de inicio de
   sesión. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  font: inherit;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.field-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

/* Interruptor deslizable on/off (p. ej. activar el PIN en Ajustes →
   Seguridad), en vez de un simple botón. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.switch-row-label {
  font-size: 14.5px;
  font-weight: 600;
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 27px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--border, #ccc);
  border-radius: 999px;
  transition: background 0.2s ease;
  pointer-events: none;
}

.switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-track {
  background: var(--brand);
}

.switch input:checked + .switch-track::before {
  transform: translateX(19px);
}

.switch input:disabled + .switch-track {
  opacity: 0.5;
}

.switch input:disabled {
  cursor: not-allowed;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* ============================================================
   VENTANA DE CUMPLEAÑOS — a diferencia del resto de hojas (que suben
   desde abajo, como un gesto de móvil), esta aparece centrada y con
   una aparición suave, más como un momento especial que como un
   formulario más.
   ============================================================ */

.birthday-overlay { align-items: center; }

.birthday-sheet {
  text-align: center;
  max-width: 380px;
  border-radius: var(--radius-sheet);
  border-top: none;
  animation: birthday-sheet-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.birthday-hero {
  position: relative;
  overflow: hidden;
  margin: -10px -20px 0;
  padding: 34px 24px 28px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--radius-sheet) var(--radius-sheet) 28px 28px;
}

.birthday-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.birthday-confetti span {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 1.7s ease-in both;
}
.birthday-confetti span:nth-child(1) { left: 8%;  background: #ffd166; animation-delay: 0.05s; }
.birthday-confetti span:nth-child(2) { left: 24%; background: #ff8b7f; animation-delay: 0.2s; }
.birthday-confetti span:nth-child(3) { left: 44%; background: #06d6a0; animation-delay: 0s; }
.birthday-confetti span:nth-child(4) { left: 62%; background: #ffd166; animation-delay: 0.3s; }
.birthday-confetti span:nth-child(5) { left: 80%; background: #ff8b7f; animation-delay: 0.12s; }
.birthday-confetti span:nth-child(6) { left: 93%; background: #06d6a0; animation-delay: 0.25s; }

.birthday-emoji {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 auto 6px;
  filter: drop-shadow(0 8px 14px rgba(23, 20, 54, 0.25));
  animation: birthday-pop 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.birthday-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 10px;
}

.birthday-sub {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.92;
  margin: 0;
}

@keyframes birthday-sheet-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes birthday-pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes confetti-fall {
  0% { top: -12px; opacity: 1; transform: rotate(0deg); }
  100% { top: 130px; opacity: 0; transform: rotate(200deg); }
}

/* ============================================================
   SELECTOR DE APP DE MAPAS ("¿con qué app abrirlo?")
   ============================================================ */

.maps-app-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}

.maps-app-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card-sm);
  padding: 13px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
}
.maps-app-option:active { background: var(--brand-soft); transform: scale(0.99); }
@media (hover: hover) {
  .maps-app-option:hover { border-color: var(--brand); }
}

.maps-app-option-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.maps-app-option-label { flex: 1; }

.maps-app-option .icon-svg:last-child { color: var(--muted); width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   CONVERSOR DE MONEDA — 5 accesos rápidos + buscador de cualquier
   otra moneda del mundo.
   ============================================================ */

.currency-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.currency-chip {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted-dark);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 999px;
}
.currency-chip:active { transform: scale(0.95); }
.currency-chip.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.currency-search-results:empty { display: none; }
.currency-search-results {
  margin-top: 6px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.currency-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}
.currency-result:last-child { border-bottom: none; }
.currency-result:active { background: var(--brand-soft); }
.currency-result-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.currency-result-empty {
  padding: 12px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
}

.currency-selected {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

/* ============================================================
   LISTA DE VIAJES (home) — tarjetas tipo postal, un color por viaje
   ============================================================ */

.trip-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(32, 31, 61, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .trip-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(32, 31, 61, 0.14); }
}
.trip-card:active { transform: scale(0.99); }

.trip-card-art {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  overflow: hidden;
}

.trip-card-art-icon {
  position: relative;
  z-index: 1;
  display: flex;
}
.trip-card-art-icon .icon-svg {
  width: 38px;
  height: 38px;
}

.trip-card-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-fade-in 0.4s ease;
}

.trip-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 19, 43, 0) 45%, rgba(20, 19, 43, 0.28) 100%);
}

.trip-countdown-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #201f3d;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.trip-countdown-badge.is-today {
  background: linear-gradient(135deg, #ffd43b, #fab005);
  color: #402c00;
}

@keyframes photo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.trip-card.trip-color-1 .trip-card-art { background: linear-gradient(135deg, var(--cat-flights-a), var(--cat-flights)); }
.trip-card.trip-color-2 .trip-card-art { background: linear-gradient(135deg, var(--cat-hotels-a), var(--cat-hotels)); }
.trip-card.trip-color-3 .trip-card-art { background: linear-gradient(135deg, var(--cat-itinerary-a), var(--cat-itinerary)); }
.trip-card.trip-color-4 .trip-card-art { background: linear-gradient(135deg, var(--cat-transport-a), var(--cat-transport)); }
.trip-card.trip-color-5 .trip-card-art { background: linear-gradient(135deg, var(--cat-reservations-a), var(--cat-reservations)); }
.trip-card.trip-color-6 .trip-card-art { background: linear-gradient(135deg, var(--cat-checklist-a), var(--cat-checklist)); }

.trip-card .trip-dest {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  padding: 16px 18px 0;
}

.trip-card .trip-name {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 10px;
  padding: 0 18px;
}

.trip-card .trip-dates {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-tint);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  margin: 0 18px 16px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  text-shadow: var(--text-halo);
}

.empty-state .emoji { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   CALENDARIO
   ============================================================ */

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-header .cal-month {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.cal-dow { font-size: 10.5px; color: var(--muted); padding-bottom: 4px; }

.cal-day {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  background: var(--surface-tint);
  border: 1px solid transparent;
  position: relative;
}

.cal-day.empty { background: transparent; }
.cal-day.today { border-color: var(--brand); background: var(--brand-soft); }
.cal-day .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand);
  margin-top: 3px;
}
.cal-day.in-range { background: var(--brand-soft); }

.cal-agenda-day {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 6px;
}

/* ============================================================
   MISC
   ============================================================ */

.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pill-row button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-dark);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.pill-row button:active { transform: scale(0.96); }

.pill-row button.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.toast {
  position: fixed;
  bottom: calc(24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--overlay-bg);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  text-align: center;
  animation: toast-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.toast.toast-leaving {
  animation: toast-out 0.2s ease both;
}

@keyframes toast-in {
  from { transform: translate(-50%, 12px) scale(0.94); opacity: 0; }
  to { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translate(-50%, 0) scale(1); opacity: 1; }
  to { transform: translate(-50%, 6px) scale(0.96); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-leaving { animation: none; }
}

.hidden { display: none !important; }

/* ============================================================
   DESCUBRE (tarjetas de lugares/alojamiento sugeridos)
   ============================================================ */

.discover-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.discover-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--brand-soft);
}

.discover-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.discover-info {
  flex: 1;
  min-width: 0;
}

.discover-name {
  font-weight: 600;
  font-size: 13.5px;
  margin: 0 0 2px;
}

.discover-summary {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.discover-add {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  background: var(--brand-soft);
  font-size: 15px;
}

.discover-add:disabled {
  opacity: 0.6;
}

/* ============================================================
   SPLASH DE BIENVENIDA (logo + mensaje, ~1s al abrir la app)
   ============================================================ */

/* .splash-screen-base es la clase compartida (además del id, que solo
   lleva el splash original de index.html): installReturnSplash() en
   app.js clona ese splash para volver a mostrarlo cada vez que la app
   regresa de segundo plano, pero SIN id (para que la regla de más
   abajo, pensada solo para el arranque, no lo apague también a él —
   ver el comentario ahí). */
#splash-screen,
.splash-screen-base {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#splash-screen.splash-hide,
.splash-screen-base.splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Si el <head> detecta que esto es una recarga dentro de la misma
   sesión (no el primer arranque real), oculta el splash al instante
   por CSS — evita que llegue a pintarse ni un frame mientras el JS
   del final del body decide si lo retira del DOM. Deliberadamente
   solo por id (no por .splash-screen-base): esta clase de "recarga
   dentro de la sesión" se queda puesta en <html> el resto de la
   sesión una vez que ocurre una, y si alcanzara también a los clones
   de installReturnSplash (ver arriba), esos jamás volverían a
   mostrarse en focus por el resto de la sesión. */
html.tp-skip-splash #splash-screen {
  display: none;
}

/* Foto de fondo del splash: alterna entre las 7 maravillas del mundo
   en cada apertura real de la app (la rotación vive en el script del
   <head> de index.html, que también pone la url() aquí antes del
   primer pintado). Un degradado oscuro por encima mantiene legible
   el logo y el texto sin importar los colores de la foto de turno. */
.splash-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.splash-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 14, 30, 0.55) 0%,
    rgba(10, 14, 30, 0.2) 38%,
    rgba(10, 14, 30, 0.32) 64%,
    rgba(10, 14, 30, 0.78) 100%
  );
}

/* Logo del splash: el mismo motivo de marca que el logo del header
   (avión de papel trazando una ruta punteada hasta el destino), pero
   aquí de verdad "vuela": recorre la curva de un extremo al otro de
   forma continua (con offset-path, no a saltos entre posiciones
   fijas), consumiendo cada punto de la ruta a su paso, hasta llegar
   al destino, que se ilumina justo entonces — un ciclo de ~1.8s,
   calculado para completarse justo antes de que el splash se
   desvanezca. El avión mismo es un avioncito de papel de dos tonos
   (como el icono de "enviar" de cualquier app de mensajería), no una
   flecha de cursor. */
.splash-mark {
  position: relative;
  z-index: 1;
  width: 116px;
  height: 116px;
  border-radius: 28px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 36px rgba(22, 33, 62, 0.28);
  animation: splash-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    splash-glow 1.8s ease-in-out 0.5s infinite;
}

.splash-svg { width: 68px; height: 68px; overflow: visible; }

.splash-dest {
  transform-origin: 78px 24px;
  animation: splash-dest-cycle 1.8s ease-in-out 0.1s infinite;
}

/* Posición de reserva para navegadores sin soporte de offset-path
   (motion path): el avión se queda quieto en el punto de partida en
   vez de no tener transform en absoluto (mal posicionado). Con
   soporte, el bloque @supports de más abajo la sustituye por el
   vuelo real. */
.splash-plane {
  transform: translate(20px, 74px) rotate(-66deg) scale(0.55);
  transform-origin: 0 0;
}

@supports (offset-path: path("M0 0")) {
  .splash-plane {
    offset-path: path("M20 74 Q 40 30, 78 24");
    offset-rotate: auto;
    offset-distance: 0%;
    transform: scale(0.55);
    animation: splash-plane-fly 1.8s linear 0.1s infinite backwards;
  }
}

.splash-tag {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  margin: 0;
  letter-spacing: 0.01em;
  animation: fade-up-in 0.5s ease 0.15s both;
}

@keyframes splash-pop {
  0% { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes splash-glow {
  0%, 100% { box-shadow: 0 16px 36px rgba(22, 33, 62, 0.28); transform: scale(1); }
  50% { box-shadow: 0 22px 50px rgba(108, 92, 231, 0.55); transform: scale(1.035); }
}

/* offset-distance recorre el 0%-100% de la curva de forma continua y
   lineal en el tiempo (el navegador interpola sobre la curva real,
   no entre paradas discretas) — de ahí que ya no haga falta ninguna
   lista de posiciones/ángulos intermedios: offset-rotate:auto orienta
   el avión solo, siguiendo la tangente en cada instante. */
@keyframes splash-plane-fly {
  0% { offset-distance: 0%; opacity: 1; }
  90% { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Sincronizado con splash-plane-fly (mismo delay y duración, mismo
   90% de llegada): el destino "se ilumina" justo cuando el avión
   llega, en vez de brillar todo el rato sin motivo. */
@keyframes splash-dest-cycle {
  0%, 76% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  90% { transform: scale(1.4); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

/* Los 6 puntitos de la ruta: cada uno se "consume" (parpadea y
   desaparece) justo cuando el avión pasa por su posición en la curva,
   en vez de quedarse ahí todo el ciclo. Los porcentajes están
   calculados a partir de la posición de cada punto a lo largo de la
   misma curva que sigue el avión (offset-distance), multiplicada por
   el 90% del ciclo que dura el vuelo. */
.splash-dot {
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0.1s;
}
.splash-dot-1 { transform-origin: 24.18px 65.58px; animation-name: splash-dot-1; }
.splash-dot-2 { transform-origin: 31.13px 54.38px; animation-name: splash-dot-2; }
.splash-dot-3 { transform-origin: 38.88px 44.88px; animation-name: splash-dot-3; }
.splash-dot-4 { transform-origin: 47.45px 37.1px; animation-name: splash-dot-4; }
.splash-dot-5 { transform-origin: 55.53px 31.73px; animation-name: splash-dot-5; }
.splash-dot-6 { transform-origin: 63.52px 27.92px; animation-name: splash-dot-6; }

@keyframes splash-dot-1 {
  0%, 5% { opacity: 1; transform: scale(1); }
  9% { opacity: 1; transform: scale(1.7); }
  13%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes splash-dot-2 {
  0%, 18% { opacity: 1; transform: scale(1); }
  22% { opacity: 1; transform: scale(1.7); }
  26%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes splash-dot-3 {
  0%, 31% { opacity: 1; transform: scale(1); }
  36% { opacity: 1; transform: scale(1.7); }
  40%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes splash-dot-4 {
  0%, 45% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.7); }
  54%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes splash-dot-5 {
  0%, 57% { opacity: 1; transform: scale(1); }
  61% { opacity: 1; transform: scale(1.7); }
  65%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes splash-dot-6 {
  0%, 68% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1.7); }
  76%, 100% { opacity: 0; transform: scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-mark,
  .splash-plane,
  .splash-dest,
  .splash-dot,
  .splash-tag {
    animation: none;
  }
  /* Sin la animación de vuelo (ni el soporte de offset-path aplicado
     por el @supports de más arriba), el avión usa su posición de
     reserva de siempre. Los puntos, al no tener animación, se quedan
     en su opacidad normal (1) — vuelven a verse todos como la ruta
     completa estática de antes. */
  .splash-plane {
    offset-path: none;
    transform: translate(20px, 74px) rotate(-66deg) scale(0.55);
  }
}

/* ============================================================
   BIENVENIDA (primer uso) — 3 pantallas, una sola vez.
   Carrusel horizontal con scroll-snap nativo (sin librería): se
   puede avanzar deslizando o con el botón. Por encima de la
   pantalla de bienvenida (z-index 999) para que quede oculta detrás
   mientras esta se desvanece, y aparezca justo después sin salto.
   ============================================================ */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: fade-up-in 0.3s ease both;
  transition: opacity 0.24s ease;
}

.onboarding-overlay.is-leaving { opacity: 0; }

.onboarding-skip {
  position: absolute;
  top: calc(16px + var(--safe-top));
  right: 16px;
  z-index: 1;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 10px;
}
.onboarding-skip:active { opacity: 0.6; }

.onboarding-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.onboarding-track::-webkit-scrollbar { display: none; }

.onboarding-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(64px + var(--safe-top)) 32px 40px;
  gap: 14px;
  overflow-y: auto;
}

/* Formulario de registro de la última pantalla (Google + email):
   mismo ancho que el texto de las demás pantallas, para que se sienta
   parte del mismo carrusel y no un formulario aparte. */
.onboarding-auth-form {
  width: 100%;
  max-width: 320px;
  text-align: left;
  margin-top: 4px;
}
.onboarding-auth-form .btn { margin-top: 10px; }
.onboarding-auth-form .btn:first-child { margin-top: 0; }
.onboarding-auth-form .field { margin-bottom: 10px; }

.onboarding-slide h1 {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  margin: 8px 0 0;
  line-height: 1.25;
}

.onboarding-slide p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

.onboarding-mark {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand);
}
.onboarding-mark .icon-svg { width: 46px; height: 46px; }

.onboarding-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 280px;
}
.onboarding-icon-chip {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-card-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.onboarding-icon-chip .icon-svg { width: 24px; height: 24px; }

.onboarding-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.onboarding-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--radius-card-sm);
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--muted-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.onboarding-chip .icon-svg { width: 22px; height: 22px; }
.onboarding-chip:active { transform: scale(0.96); }
.onboarding-chip.is-selected {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: var(--brand-soft);
}

.onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px calc(28px + var(--safe-bottom));
}
.onboarding-footer.is-hidden { display: none; }

.onboarding-dots {
  display: flex;
  gap: 6px;
}
.onboarding-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s ease, transform 0.2s ease;
}
.onboarding-dot.is-active {
  background: var(--brand);
  transform: scale(1.3);
}

.onboarding-next {
  min-width: 128px;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-track { scroll-behavior: auto; }
  .onboarding-overlay { animation: none; }
}

/* ============================================================
   PANTALLA DE ARRANQUE
   ============================================================ */

.boot-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 16px;
  color: var(--muted);
  text-align: center;
  padding: 0 30px;
}

.boot-badge {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 10px 24px rgba(232, 114, 42, 0.35);
  animation: boot-float 2.2s ease-in-out infinite;
}

.boot-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: boot-spin 0.8s linear infinite;
}

@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ============================================================
   ANIMACIÓN DE ENTRADA ESCALONADA
   El contenido de cada pantalla aparece con un ligero fundido en
   vez de aparecer de golpe. Se limita a los primeros elementos
   visibles para no complicar la hoja de estilos.
   ============================================================ */

.view > * {
  animation: fade-up-in 0.36s ease both;
}
.view > *:nth-child(1) { animation-delay: 0.02s; }
.view > *:nth-child(2) { animation-delay: 0.06s; }
.view > *:nth-child(3) { animation-delay: 0.1s; }
.view > *:nth-child(4) { animation-delay: 0.14s; }
.view > *:nth-child(5) { animation-delay: 0.18s; }
.view > *:nth-child(6) { animation-delay: 0.22s; }
.view > *:nth-child(7) { animation-delay: 0.26s; }
.view > *:nth-child(8) { animation-delay: 0.3s; }
.view > *:nth-child(n+9) { animation-delay: 0.32s; }

@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TRANSICIONES DESLIZANTES ENTRE PANTALLAS
   Usa la View Transitions API nativa: al navegar "hacia adelante"
   (abrir un viaje, entrar en una sección) el contenido nuevo entra
   desde la derecha; al ir "atrás" entra desde la izquierda, como en
   iOS/Android. En navegadores sin soporte no pasa nada raro: el
   cambio es instantáneo, igual que antes.
   ============================================================ */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-nav-dir="forward"]::view-transition-old(root) { animation-name: tp-slide-out-left; }
:root[data-nav-dir="forward"]::view-transition-new(root) { animation-name: tp-slide-in-right; }
:root[data-nav-dir="back"]::view-transition-old(root) { animation-name: tp-slide-out-right; }
:root[data-nav-dir="back"]::view-transition-new(root) { animation-name: tp-slide-in-left; }

@keyframes tp-slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes tp-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-25%); opacity: 0; }
}
@keyframes tp-slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes tp-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(25%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ============================================================
   DESLIZAR PARA RECARGAR (pull-to-refresh)
   Círculo fijo en la parte superior que gira según lo que arrastras
   y, al pasar el umbral, gira a velocidad constante mientras recarga.
   ============================================================ */

.ptr-indicator {
  position: fixed;
  top: calc(6px + var(--safe-top));
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(32, 31, 61, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  transform: translate(-50%, -60px);
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.ptr-indicator.ptr-visible {
  opacity: 1;
}

.ptr-indicator .ptr-ring {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--brand);
}

.ptr-indicator.ptr-spinning .ptr-ring {
  animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* --- Lista vertical de viajes ("Ver todos") --- */
.trip-list { display: grid; gap: 12px; }
.trip-list .trip-card { margin: 0; }
.trip-list .trip-card-art { height: 132px; }
.trip-list .trip-meta { flex-direction: row; gap: 14px; }

/* --- Banner "Descubre" del resumen --- */
.discover-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--text);
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.discover-banner.has-photo { color: #fff; border-color: transparent; }
.discover-banner.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(10, 18, 40, 0.85), rgba(10, 18, 40, 0.4));
}
.discover-banner-inner b {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.discover-banner-inner small {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 3px;
}
.discover-banner-go { margin-left: auto; opacity: 0.8; }

/* --- Anillo de gastos por categoría --- */
.donut { flex-shrink: 0; }

/* ============================================================
   ============================================================
   CAPA DE REDISEÑO  ·  "Viajoo" (maqueta de referencia)
   Hero con foto, tarjetas blancas muy redondeadas, acentos
   índigo/violeta, chips de día y barra inferior con botón
   central. Va al final del archivo para poder ajustar los
   componentes anteriores sin tocarlos.
   ============================================================
   ============================================================ */

/* ---------- Tipografía general ---------- */

.topbar-title,
.section-title,
.modal-title,
.trip-card .trip-dest,
.ticket-title,
.panel h3 {
  letter-spacing: -0.015em;
}

.section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
  /* Halo invisible sobre superficies blancas/de tarjeta (el color
     casi coincide con ellas); solo se nota donde este título va
     directo sobre el fondo "atmósfera" sin tarjeta debajo (p. ej.
     "Mis viajes" en el inicio), que es justo donde hace falta. */
  text-shadow: var(--text-halo);
}

/* ---------- HERO (cabecera con foto) ---------- */

.hero {
  position: relative;
  margin: 0 0 6px;
  padding: calc(18px + var(--safe-top)) 20px 22px;
  overflow: hidden;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background: linear-gradient(135deg, #2b2f6b, #4b4fae);
  color: #fff;
  isolation: isolate;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: photo-fade-in 0.5s ease;
}

/* Ilustración decorativa fija del hero de la home — a propósito NO
   depende de los datos del usuario (ni foto de un viaje guardado ni
   nada dinámico), solo el motivo de ruta punteada + avión del logo,
   como un detalle en la esquina en vez de una imagen de fondo. */
.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  max-width: 230px;
  height: auto;
  aspect-ratio: 200 / 140;
  z-index: -2;
  opacity: 0.9;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12, 14, 40, 0.55) 0%, rgba(12, 14, 40, 0.25) 45%, rgba(12, 14, 40, 0.78) 100%);
}

.hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.hero-brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
}

.hero-brand-tag {
  font-size: 11.5px;
  margin: 1px 0 0;
  opacity: 0.8;
}

.hero .icon-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.hero .icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.hero .icon-btn.logged-in { border-color: var(--cat-hotels-a); }
.hero .icon-btn.logged-in::after { border-color: rgba(255, 255, 255, 0.5); }

.hero-greeting {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin: 16px 0 14px;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.hero-greeting-q {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.85;
}

.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 11px 16px;
  backdrop-filter: blur(10px);
  margin-bottom: 14px;
}

.hero-search svg { opacity: 0.85; flex-shrink: 0; }

.hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

/* Lista de sugerencias del autocompletar (bajo el buscador). Vacía
   = sin altura, no empuja nada; con resultados, una mini tarjeta
   flotante en el mismo lenguaje translúcido que el buscador. */
.search-suggestions:empty { display: none; }
.search-suggestions {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  overflow: hidden;
  margin: -6px 0 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  animation: fade-up-in 0.18s ease both;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion .stat-icon { color: var(--brand); flex-shrink: 0; }
.search-suggestion span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggestion:active { background: var(--brand-soft); }
@media (hover: hover) {
  .search-suggestion:hover { background: var(--brand-soft); }
}
.hero-search input::placeholder { color: rgba(255, 255, 255, 0.75); }

.hero-cta {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-brand);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.hero-cta:active { transform: scale(0.98); }
@media (hover: hover) { .hero-cta:hover { filter: brightness(1.06); } }

/* Fila de la CTA principal ("Nuevo viaje") + un acceso rápido
   secundario a su lado (p. ej. el conversor de moneda), en vez de
   apilar dos botones a lo ancho uno debajo del otro. */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-cta-row .hero-cta { flex: 1; }

.hero-quick-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hero-quick-btn .icon-svg { width: 20px; height: 20px; }
.hero-quick-btn:active { transform: scale(0.95); }
@media (hover: hover) {
  .hero-quick-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
}

/* Botón "Planificar viaje con IA" — CTA propia entre la búsqueda y
   "Mis viajes", con el mismo lenguaje visual que el resto de la app
   (degradado de marca, esquinas grandes, sombra suave). */
.ai-plan-cta {
  width: 100%;
  border: none;
  border-radius: var(--radius-card);
  background: var(--grad-brand);
  color: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  margin: 2px 0 20px;
  box-shadow: var(--shadow-brand);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, filter 0.15s ease;
}
/* Dentro del hero (justo debajo del buscador) no hace falta el
   margen inferior de 20px pensado para cuando iba suelta contra
   --bg: el propio padding del hero ya cierra el espacio. */
.hero .ai-plan-cta { margin: 0; }
.ai-plan-cta::after {
  /* Un halo suave, como un "destello" de IA, en la esquina —
     puramente decorativo, sin depender de ninguna imagen externa. */
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.ai-plan-cta:active { transform: scale(0.98); }
@media (hover: hover) { .ai-plan-cta:hover { filter: brightness(1.06); } }

.ai-plan-cta-art {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  backdrop-filter: blur(4px);
}

.ai-plan-cta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-plan-cta-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.ai-plan-cta-text span {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.ai-plan-cta-arrow {
  flex-shrink: 0;
  opacity: 0.85;
}
.ai-plan-cta-arrow .icon-svg { width: 18px; height: 18px; }

/* Accesos rápidos de reserva externa (pestaña Reservas): hotel/vuelo
   en Booking.com, actividades en Civitatis. Tarjetas más pequeñas que
   .ai-plan-cta a propósito — son 3 juntas, no una sola destacada. */
.quickbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 2px 0 20px;
}
.quickbook-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  text-align: center;
}
.quickbook-tile:active { transform: scale(0.96); }
@media (hover: hover) { .quickbook-tile:hover { filter: brightness(0.97); } }
.quickbook-tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: color-mix(in srgb, var(--tile-color, var(--brand)) 15%, transparent);
}
.quickbook-tile-label {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.quickbook-tile-sub {
  font-size: 10px;
  color: var(--muted);
}

/* Hero de un viaje concreto (detalle) */

.hero-trip { padding-bottom: 26px; }

.hero-trip-status {
  display: inline-block;
  background: var(--cat-hotels);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-top: 26px;
  box-shadow: 0 6px 14px rgba(20, 184, 166, 0.35);
}

.hero-trip-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  margin: 8px 0 6px;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero-trip-meta {
  font-size: 13px;
  margin: 0;
  opacity: 0.92;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Fila de estadísticas flotante bajo el hero */

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: -42px 0 10px;
  position: relative;
  z-index: 5;
}

.hero-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-sm);
  padding: 11px 6px 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease;
}
.hero-stat:active { transform: scale(0.96); }

.hero-stat .hs-icon {
  color: var(--accent, var(--brand));
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.hero-stat .hs-icon .icon-svg { width: 17px; height: 17px; }

.hero-stat .hs-label {
  font-size: 10.5px;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}

.hero-stat .hs-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

/* ---------- Topbar más discreta (pantallas internas) ---------- */

.topbar { padding-top: calc(14px + var(--safe-top)); }

.topbar-eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  font-size: 11.5px;
  font-weight: 600;
}

.topbar-title { font-size: 22px; font-weight: 800; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.icon-btn:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.2);
}

/* ---------- Tarjetas de viaje (inicio) ---------- */

.trip-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}

.trip-card-art { height: 132px; }

.trip-card-art::after {
  background: linear-gradient(180deg, rgba(14, 16, 40, 0) 40%, rgba(14, 16, 40, 0.45) 100%);
}

.trip-countdown-badge {
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-deep);
  border-radius: 999px;
  font-weight: 700;
}
.trip-countdown-badge.is-today {
  background: var(--grad-brand);
  color: #fff;
}

.trip-card .trip-dest { font-size: 19px; font-weight: 800; padding-top: 14px; }
.trip-card .trip-name { font-size: 12.5px; }

.trip-card .trip-dates {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-dark);
  background: var(--surface-tint);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- Tarjetas de elemento ---------- */

.ticket {
  border-radius: var(--radius-card);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  padding: 13px;
}

.ticket-stub { border-radius: var(--radius-card-sm); }

.ticket-stub.has-photo { box-shadow: 0 6px 14px rgba(23, 26, 51, 0.15); }

.stub-date { border-radius: 999px; }
.stub-day, .stub-month { font-family: var(--font-body); font-weight: 700; }

.ticket-title { font-size: 16px; font-weight: 700; }

.ticket-amount {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 800;
}

.ticket-meta .mono {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}

.ticket-actions button {
  border-radius: 999px;
  padding: 7px 13px;
  background: var(--surface-tint);
}
.ticket-actions button:hover { background: var(--brand-soft); color: var(--brand-deep); }

/* Etiqueta de categoría de color (Museo, Restaurante, Monumento…) */

.tag-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--brand)) 15%, transparent);
  color: var(--accent, var(--brand));
  margin-top: 4px;
}

/* ---------- Botones ---------- */

.btn { border-radius: 999px; padding: 14px 18px; }

.btn-primary {
  background: var(--grad-brand);
  box-shadow: var(--shadow-brand);
}

.btn-secondary { border-radius: 999px; }
@media (hover: hover) {
  .btn-secondary:hover { border-color: var(--brand); color: var(--brand-deep); }
}

.fab {
  background: var(--grad-brand);
  box-shadow: var(--shadow-brand);
  font-size: 28px;
}

/* ---------- Tarjetas de resumen / paneles ---------- */

.stat-card {
  border-radius: var(--radius-card-sm);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.stat-card::before {
  left: 0; top: auto; bottom: 0; right: 0;
  width: auto;
  height: 4px;
  background: var(--accent);
  opacity: 0.9;
}
.stat-card-discover::before { height: 4px; top: auto; bottom: 0; }

.stat-card .stat-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.stat-card .stat-value { font-size: 25px; font-weight: 800; color: var(--text); }

.panel {
  border-radius: var(--radius-card);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-top: 12px;
}
.panel[data-nav]::before {
  left: 0; top: 0; bottom: auto; right: 0;
  width: auto;
  height: 4px;
}
.panel h3 { font-size: 15px; font-weight: 800; }

.progress-track { border-radius: 999px; }
.progress-fill { background: var(--grad-brand); }

.today-banner {
  background: var(--grad-brand);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-brand);
}

/* ---------- Chips (días del itinerario, filtros) ---------- */

.pill-row {
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.pill-row::-webkit-scrollbar { display: none; }

.pill-row button {
  flex-shrink: 0;
  border-radius: 16px;
  padding: 9px 15px;
  font-size: 12.5px;
  background: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  line-height: 1.25;
}

.pill-row button.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.modal-sheet {
  border-top-left-radius: var(--radius-sheet);
  border-top-right-radius: var(--radius-sheet);
}

/* ---------- Barra inferior de navegación ---------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 9px 6px calc(8px + var(--safe-bottom));
  box-shadow: 0 -8px 26px rgba(23, 26, 51, 0.08);
}

.tabbar button {
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.tabbar button:active { transform: scale(0.92); }
.tabbar button .icon-svg { width: 21px; height: 21px; }

.tabbar button.active { color: var(--brand); }

.tabbar button.tab-center {
  position: relative;
  color: #fff;
  font-size: 0;
  gap: 0;
}
.tabbar button.tab-center span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand);
  margin-top: -30px;
  border: 4px solid var(--surface);
}

.view.has-tabbar { padding-bottom: calc(104px + var(--safe-bottom)); }

/* Con barra inferior, el botón flotante sube para no solaparse */
.has-tabbar ~ #fab-slot .fab { bottom: calc(104px + var(--safe-bottom)); }

/* ---------- Estado vacío ---------- */

.empty-state .emoji { font-size: 44px; }
.empty-state p { font-size: 14px; }

/* ---------- Pie de marca del inicio ---------- */

.home-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  padding: 22px 0 6px;
}
.home-footer strong {
  font-family: var(--font-display);
  color: var(--muted-dark);
  font-weight: 800;
}

/* ============================================================
   ============================================================
   CAPA DE REDISEÑO 2  ·  fidelidad estricta a la maqueta
   Carrusel de viajes, próximos eventos, chips de día del
   itinerario y timeline con iconos de categoría.
   ============================================================
   ============================================================ */

/* ---------- Encabezado de sección con "Ver todos" ---------- */

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 12px;
}
.section-title-row .section-title { margin: 0; }

.btn-icon-inline {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon-inline:active { transform: scale(0.94); }

.see-all {
  border: none;
  background: transparent;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
}
.see-all .icon-svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.see-all.expanded .icon-svg { transform: rotate(90deg); }

/* ---------- Carrusel horizontal de viajes ---------- */

.trip-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-overflow-scrolling: touch;
}
.trip-carousel::-webkit-scrollbar { display: none; }
.trip-carousel .trip-card {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  margin-bottom: 0;
}
.trip-carousel.expanded {
  flex-wrap: wrap;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.trip-carousel.expanded .trip-card { width: 100%; }

.trip-meta-row {
  display: flex;
  gap: 12px;
  padding: 0 16px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.trip-meta-row span { display: flex; align-items: center; gap: 4px; }
.trip-meta-row .stat-icon { width: 13px; height: 13px; margin: 0; color: var(--muted); }

.trip-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 16px;
}
.trip-progress-row .progress-track { flex: 1; height: 6px; margin: 0; }
.trip-progress-row span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-dark);
  flex-shrink: 0;
}

/* ---------- Próximos eventos ---------- */

.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-card-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.event-row:active { transform: scale(0.98); }

.event-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-icon .icon-svg { width: 19px; height: 19px; }

.event-body { flex: 1; min-width: 0; }
.event-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

.event-chevron { color: var(--muted); flex-shrink: 0; }
.event-chevron .icon-svg { width: 16px; height: 16px; }

/* ---------- Logo del hero (avión + ruta hasta el destino) ---------- */

.hero-logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.hero-logo .icon-svg { width: 21px; height: 21px; }

.hero-avatar { font-size: 18px; }

/* ============================================================
   ITINERARIO — chips de día + timeline con iconos de categoría
   ============================================================ */

.day-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -20px 16px;
  padding: 2px 20px 4px;
  -webkit-overflow-scrolling: touch;
}
.day-chip-row::-webkit-scrollbar { display: none; }

.day-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 9px 14px;
  text-align: center;
  min-width: 64px;
  box-shadow: var(--shadow-card);
}
.day-chip .dc-num { display: block; font-size: 12.5px; font-weight: 800; color: var(--text); }
.day-chip .dc-date { display: block; font-size: 10px; font-weight: 600; color: var(--muted); margin-top: 1px; }

.day-chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.day-chip.active .dc-num,
.day-chip.active .dc-date { color: #fff; }

.day-banner {
  position: relative;
  height: 96px;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  color: #fff;
  background: linear-gradient(135deg, #2b2f6b, #4b4fae);
}
.day-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.day-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 30, 0.05) 30%, rgba(10, 12, 30, 0.75) 100%);
}
.day-banner-title { font-size: 15.5px; font-weight: 800; margin: 0; }
.day-banner-sub {
  font-size: 12px;
  margin: 3px 0 0;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 5px;
}
.day-banner-sub .icon-svg { width: 13px; height: 13px; }

.timeline {
  position: relative;
}

.tl-row {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  position: relative;
}
.tl-row:last-child { padding-bottom: 4px; }

.tl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 26px;
}
.tl-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.tl-dot .icon-svg { width: 10px; height: 10px; }
.tl-line {
  flex: 1;
  width: 2px;
  background: var(--border);
  margin-top: 2px;
}
.tl-row:last-child .tl-line { display: none; }

.tl-content { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.tl-info { flex: 1; min-width: 0; }
.tl-time { font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 0; }
.tl-title { font-size: 14.5px; font-weight: 700; margin: 2px 0 4px; }
.tl-addr { font-size: 12px; color: var(--muted); margin: 3px 0 0; }

.tl-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-tint);
}

/* Fila de acciones (Mapa/Editar/Eliminar) de cada actividad del
   itinerario: más compacta que .ticket-actions normal (hoteles,
   vuelos...) porque aquí puede haber varias tarjetas seguidas en muy
   poco espacio vertical. */
.tl-actions {
  margin-top: 5px;
  gap: 5px;
}
.tl-actions button {
  padding: 5px 9px;
  font-size: 11px;
}

.tl-menu {
  color: var(--muted);
  flex-shrink: 0;
  padding: 4px;
  margin-left: 2px;
}
.tl-menu .icon-svg { width: 15px; height: 15px; }

/* ============================================================
   GASTOS — segmentado, total, donut y lista reciente
   ============================================================ */

.segmented {
  display: flex;
  background: var(--surface-tint);
  border-radius: 16px;
  padding: 4px;
  margin-bottom: 16px;
  gap: 4px;
}
.segmented button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 10px;
  border-radius: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.segmented button.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-card);
}

.expense-total-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.expense-total-card .et-label { font-size: 12.5px; color: var(--muted); margin: 0; }
.expense-total-card .et-amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  margin: 2px 0 10px;
  letter-spacing: -0.5px;
}
.expense-total-card .et-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.donut-wrap .donut { flex-shrink: 0; }
.donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.donut-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.donut-legend span { flex: 1; color: var(--muted-dark); font-weight: 600; }
.donut-legend b { font-weight: 700; color: var(--text); white-space: nowrap; }

.expense-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.expense-row:last-child { border-bottom: none; }
.expense-row .exp-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.expense-row .exp-icon .icon-svg { width: 18px; height: 18px; }
.expense-row .exp-info { flex: 1; min-width: 0; }
.expense-row .exp-title { font-size: 13.5px; font-weight: 700; margin: 0; }
.expense-row .exp-sub { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; }
.expense-row .exp-amount { font-family: var(--font-display); font-weight: 800; font-size: 14px; flex-shrink: 0; }

/* ---------- Lista del mapa (bottom sheet) ---------- */

.map-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.map-sheet-row:last-child { border-bottom: none; }
.map-sheet-thumb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.map-sheet-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.map-sheet-icon .icon-svg { width: 16px; height: 16px; }
.map-sheet-info { flex: 1; min-width: 0; }
.map-sheet-title { font-size: 13.5px; font-weight: 700; margin: 0; }
.map-sheet-sub { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; }
.map-sheet-chevron { color: var(--muted); flex-shrink: 0; }
.map-sheet-chevron .icon-svg { width: 15px; height: 15px; }

.tp-map-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
}

/* ---------- Resumen del viaje (dashboard) ---------- */

.summary-panel { margin-top: 18px; }

.photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 4px;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

.trip-pin {
  display: inline-flex;
  vertical-align: -3px;
  color: var(--rose);
}
.trip-pin .icon-svg { width: 15px; height: 15px; }

.stat-card-expenses {
  display: flex;
  flex-direction: column;
}
.mini-expense-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.mini-expense-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--muted-dark);
}
.mini-expense-row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-expense-row b { font-weight: 700; color: var(--text); flex-shrink: 0; }
.mini-expense-empty { font-size: 11px; color: var(--muted); margin-top: 10px; }

.discover-loading {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px 10px;
}
.discover-spinner {
  color: var(--brand);
  animation: discover-spin 1.1s linear infinite;
}
.discover-spinner .icon-svg { width: 32px; height: 32px; }
@keyframes discover-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.discover-loading p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  max-width: 240px;
}
.discover-loading-sub {
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.brand-logo-badge {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #2fd4c4, #1fa9e0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.brand-logo-badge .icon-svg { width: 26px; height: 26px; }

/* ---------- Búsqueda de destino con IA (inicio) ---------- */

.dest-search-panel {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin: 4px 0 18px;
}

.dest-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dest-search-title {
  font-size: 14.5px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dest-search-pin { color: var(--rose); display: inline-flex; }
.dest-search-pin .icon-svg { width: 15px; height: 15px; }
.dest-search-header .icon-btn { width: 32px; height: 32px; box-shadow: none; }

.dest-search-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-dark);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dest-search-label .stat-icon { width: 14px; height: 14px; margin: 0; }

.dest-result-list { display: flex; flex-direction: column; gap: 8px; }

.dest-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-tint);
  border-radius: 14px;
  padding: 8px 10px;
}
.dest-result-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dest-result-icon .icon-svg { width: 16px; height: 16px; }
.dest-result-thumb {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.dest-result-info { flex: 1; min-width: 0; }
.dest-result-title {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dest-result-sub { font-size: 10.5px; color: var(--muted); margin: 1px 0 0; }
.dest-result-empty { font-size: 12px; color: var(--muted); padding: 4px 2px; }

.dest-search-pro {
  width: 100%;
  margin-top: 8px;
  border: 1px dashed var(--border);
  background: var(--surface-tint);
  color: var(--muted-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 10px;
  border-radius: 14px;
}

/* ============================================================
   Copiloto IA — generador de itinerarios (ai-copilot.js)
   ============================================================ */
.ai-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.btn-sm { padding: 9px 14px; font-size: 12.5px; }

.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 12px;
  color: var(--muted);
  font-size: 13.5px;
}

.ai-day-card { margin-bottom: 12px; }
.ai-day-card h3 { margin-bottom: 8px; }

.ai-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.ai-item-row:last-child { border-bottom: none; }
.ai-item-time {
  flex: 0 0 44px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-dark);
  padding-top: 1px;
}
.ai-item-body { flex: 1; min-width: 0; }
.ai-item-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0; }
.ai-item-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; }
.ai-item-cost { font-size: 12px; font-weight: 700; color: var(--muted-dark); white-space: nowrap; }

.ai-budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted-dark);
}

/* ============================================================
   ÁRABE (RTL) — ajustes puntuales.
   La mayoría del layout ya se espeja solo con dir="rtl" en <html>
   (flexbox con "row" sigue la dirección de escritura, y el
   text-align por defecto de cada elemento ya sigue el idioma). Esto
   cubre lo que NO se espeja solo: texto con text-align:left fijado
   a mano, la flecha "←" de volver (es un carácter literal, no un
   icono direccional) y las flechitas ">" que indican "seguir
   adelante" — en RTL, "adelante" visualmente es hacia la izquierda.
   NO se tocan iconos no direccionales (avión, maleta, calendario...)
   ni el valor interno de <input type="date"> (las fechas se leen
   igual de izquierda a derecha en cualquier idioma).
   ============================================================ */

[dir="rtl"] .search-suggestion,
[dir="rtl"] .currency-result,
[dir="rtl"] .maps-app-option,
[dir="rtl"] .ai-plan-cta {
  text-align: right;
}

[dir="rtl"] #btn-back {
  transform: scaleX(-1);
}

/* position:absolute con right/left fijo no se espeja solo (a
   diferencia del flujo normal en flexbox, que sí sigue dir). */
[dir="rtl"] .onboarding-skip {
  right: auto;
  left: 16px;
}

[dir="rtl"] .trip-countdown-badge {
  right: auto;
  left: 10px;
}

[dir="rtl"] .see-all .icon-svg,
[dir="rtl"] .event-chevron .icon-svg,
[dir="rtl"] .ai-plan-cta-arrow .icon-svg,
[dir="rtl"] .maps-app-option .icon-svg:last-child {
  transform: scaleX(-1);
}