:root {
  --bg: #0a0c1c;
  --card: rgba(255, 255, 255, 0.11);
  --card2: rgba(255, 255, 255, 0.18);
  --acc: #7c5cff;
  --acc2: #5ce0d8;
  --acc3: #ff6bd6;
  --text: #eef0fb;
  --muted: #c5cae6;
  --danger: #ff6b6b;
  --ok: #4ade80;
  --radius: 20px;
  --radius-sm: 14px;
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-border-strong: rgba(255, 255, 255, 0.4);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 8px 32px rgba(2, 4, 20, 0.45), var(--glass-shine);
  --blur: blur(30px) saturate(220%);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Con manchas de color de fondo variables detrás del cristal, un texto sin
     más no siempre tiene contraste garantizado; esta sombra suave le da un
     borde que lo mantiene legible caiga donde caiga. */
  text-shadow: 0 1px 3px rgba(2, 4, 20, 0.4);
}

::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

/* Nada de "background: var(--bg)" aquí: si html/body pintan un fondo
   opaco propio, tapa por completo el manchón de luces de más abajo
   (position:fixed, z-index:-1) y el cristal deja de tener nada de
   color detrás que desenfocar. El color base ya lo pone ese manchón. */
html {
  background: var(--bg);
}

/* Campo de luces de fondo, fijo tras el cristal de las tarjetas: es lo que
   da profundidad al efecto de cristal esmerilado estilo iOS. Los manchones
   son grandes y se solapan a propósito para que haya color detrás del
   cristal en (casi) cualquier punto de la pantalla, no solo en las
   esquinas -- si no, dentro de la app (más densa que la portada) apenas
   se nota el desenfoque. */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(55% 45% at 15% 15%, rgba(124, 92, 255, 0.65), transparent 72%),
    radial-gradient(50% 42% at 85% 10%, rgba(92, 224, 216, 0.5), transparent 72%),
    radial-gradient(55% 48% at 82% 85%, rgba(255, 107, 214, 0.45), transparent 72%),
    radial-gradient(50% 45% at 12% 88%, rgba(124, 92, 255, 0.5), transparent 72%),
    radial-gradient(60% 50% at 50% 50%, rgba(92, 224, 216, 0.3), transparent 75%),
    var(--bg);
  pointer-events: none;
}

.hidden { display: none !important; }

.screen { min-height: 100vh; }

/* --- Auth --- */
#invite-screen, #reset-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 100vh;
}

#auth-screen {
  padding: 16px;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
}

.hero {
  text-align: center;
  padding-top: 12px;
}

.hero .big {
  font-size: 1.8rem;
  margin: 8px 0 10px;
}

.price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--acc2);
  margin-top: 10px;
}

.landing .card { width: 100%; }
.landing .card p { line-height: 1.5; }

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  padding: 24px;
}

.auth-card h1 {
  font-size: 1.3rem;
  text-align: center;
  margin: 0 0 16px;
}

.tabs-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tabs-inline .tablink {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tabs-inline .tablink.active {
  background: linear-gradient(135deg, var(--acc), #9b7bff);
  border-color: var(--glass-border-strong);
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.45);
  color: white;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

select {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
  width: 100%;
}

/* El desplegable de opciones de un <select> lo pinta el sistema operativo,
   no el "backdrop-filter" de arriba -- en el navegador de escritorio sale
   con fondo blanco por defecto y, como el texto hereda el color claro de
   la app, queda ilegible. Se fuerza un fondo oscuro sólido en las
   opciones (la mayoría de navegadores de escritorio sí lo respetan). */
select option {
  background-color: #14172f;
  color: var(--text);
}

.auth-form input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
}

.auth-form button, .primary-btn {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, var(--acc), #9b7bff);
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.4);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.error {
  color: var(--danger);
  min-height: 1.2em;
  font-size: 0.85rem;
  margin: 0;
}

/* --- App shell --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
}

.brand { font-weight: 700; }
.user-email { color: var(--muted); font-size: 0.85rem; margin-left: auto; }

.link-btn {
  background: none;
  border: none;
  color: var(--acc2);
  cursor: pointer;
  font-size: 0.9rem;
}

.tabs {
  display: flex;
  overflow-x: auto;
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.tab {
  flex: 1;
  min-width: 88px;
  padding: 12px 8px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab.active {
  color: var(--text);
  border-bottom-color: var(--acc);
}

/* Cabecera del viaje activo, entre la barra de "Mis viajes" (oculta
   dentro de un viaje) y la barra de pestañas del viaje (Calendario,
   Sitios, Gastos, Exploración). */
.trip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 6;
}
.trip-header-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trip-header #trip-back-btn {
  flex-shrink: 0;
}
#trip-tabs {
  top: 45px; /* debajo de .trip-header, que también es "sticky" */
}

#content {
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.day-fixed-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--card2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -8px 32px rgba(2, 4, 20, 0.45), var(--glass-shine);
  padding: 12px 16px;
  max-height: 40vh;
  overflow-y: auto;
}
.day-fixed-bar .day-fixed-inner { max-width: 720px; margin: 0 auto; }

.placeholder {
  color: var(--muted);
  text-align: center;
  padding: 40px 16px;
}

/* --- Trips --- */
.card {
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.trip-list { display: flex; flex-direction: column; gap: 10px; }

.trip-item {
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shine);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trip-item:hover { background: var(--card2); border-color: var(--glass-border-strong); }
.trip-item.selected { outline: 2px solid var(--acc); }

.trip-item .name { font-weight: 600; }
.trip-item .meta { color: var(--muted); font-size: 0.85rem; }

/* Lista de sitios al elegir uno para un horario/punto: con el cristal
   translúcido normal, muchas casillas seguidas quedaban pegadas y apenas
   se distinguían del fondo. Aquí se separan y se les da un fondo sólido
   más oscuro, para que se lean bien tanto en la app como en el navegador
   de escritorio. */
#site-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
#site-pick-list .trip-item {
  background: rgba(6, 8, 20, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 10px 14px;
}
#site-pick-list .trip-item:hover { background: rgba(6, 8, 20, 0.8); }
#site-pick-list .trip-item.selected {
  background: rgba(124, 92, 255, 0.35);
  outline: 2px solid var(--acc);
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.field label { font-size: 0.85rem; color: var(--muted); }
.field input, .field textarea {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
}

.member-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.member-row input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shine);
  border-radius: 999px;
  padding: 4px 10px;
  margin: 2px;
  font-size: 0.85rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.muted { color: var(--muted); }

.day-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--muted);
}
.day-chip.active {
  background: linear-gradient(135deg, var(--acc), #9b7bff);
  border-color: var(--glass-border-strong);
  box-shadow: 0 4px 16px rgba(124, 92, 255, 0.45);
  color: white;
}

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* --- password show/hide --- */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; min-width: 0; padding-right: 40px; }
.pw-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 6px 8px;
  opacity: 0.7;
}
.pw-toggle:hover { opacity: 1; }

/* --- footer legal + modal + cookies --- */
footer.site {
  max-width: 480px;
  margin: 24px auto 12px;
  padding: 16px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.legal-link {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 4px;
}
.legal-link:hover { color: var(--text); }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
}
@media (min-width: 640px) {
  .modal { align-items: center; }
}

.modal-sheet {
  background: var(--card2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  box-shadow: var(--glass-shadow);
  border-radius: 24px 24px 0 0;
  padding: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .modal-sheet { border-radius: var(--radius); border-bottom: 1px solid var(--glass-border); }
}

.modal-sheet h2 { font-size: 1rem; margin: 16px 0 6px; }
.modal-sheet h2:first-of-type { margin-top: 0; }
.modal-sheet p { font-size: 0.9rem; line-height: 1.6; color: var(--text); }

.cookie {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 480px;
  background: var(--card2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--glass-shadow);
  z-index: 150;
}
.cookie p { font-size: 0.82rem; color: var(--muted); margin: 0 0 10px; }

/* --- calendario: zoom --- */
.cal-zoom-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 8px 0;
}
.cal-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--card);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cal-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.cal-zoom-btn:not(:disabled):hover { background: var(--card2); }

/* --- calendario: bloques de horario, de cristal --- */
/* Texto en vertical: el bloque solo necesita el grosor de una línea de
   texto de ancho, y la frase corre hacia abajo a lo largo de la
   duración del horario. */
.cal-block {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.55), rgba(92, 224, 216, 0.32));
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-sm);
  padding: 6px 3px;
  color: white;
  font-size: 0.78rem;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(2, 4, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Los puntos de itinerario van a ancho completo, con el texto normal
   (horizontal) -- se cogen, se mueven y se redimensionan, a diferencia
   de los horarios (franja estrecha, en vertical, fijos). */
.cal-block-wide {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  white-space: normal;
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* Los trayectos ocupan el ancho disponible igual que los puntos de
   itinerario (texto horizontal), pero con otro color para no
   confundirlos de un vistazo. */
.cal-block-trayecto {
  background: linear-gradient(135deg, rgba(255, 158, 68, 0.6), rgba(255, 107, 214, 0.32));
}

/* Carril de kilometraje: estrecho y vertical como los horarios, con su
   propio color (verde) para distinguirlo de un vistazo. */
.cal-block-km {
  background: linear-gradient(135deg, rgba(92, 224, 140, 0.6), rgba(92, 224, 216, 0.32));
  font-size: 0.72rem;
}

/* Paradas de un trayecto mostradas como subpuntos dentro de su bloque:
   se subrayan en punteado para que se note que son tocables por su
   cuenta, sin abrir la edición del trayecto entero. */
.cal-stop-row {
  font-size: 0.7rem;
  opacity: 0.92;
  cursor: pointer;
  padding: 1px 0;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}