/* ============================================================
   base.css — Variables globales, reset, layout, header, botones
   ============================================================ */

:root{
  --bg:#f7f9fc; --card:rgba(255,255,255,.86); --card-solid:#ffffff; --text:#1f2937; --muted:#6b7280;
  --primary:#2c7be5; --success:#10b981; --shadow:0 8px 20px rgba(17,24,39,.08);
  --brandA: rgba(44,123,229,.10); --brandB: rgba(16,185,129,.08);
  --logo-w-ideal: 84vw; --logo-w-max: 360px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --action-bar-h: 72px;
}

html, body{ height:100%; }
html{ scroll-padding-bottom: calc(var(--action-bar-h) + var(--safe-bottom)); }
body{
  margin:0;
  font-family: system-ui,-apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--text); background-color:var(--bg); overflow-x:hidden;
  position:relative;
}
/* Marca de agua de marca: el compás centrado y fijo detrás de todo el
   contenido. Pseudo-elemento en vez de background-image directo en body
   para poder controlar su propia opacity sin afectar el contenido real
   (opacity en body heredaría a todos los hijos). z-index:-1 lo manda
   detrás; position:fixed lo ancla a la ventana (no al documento), efecto
   marca de agua clásico que no se mueve al hacer scroll. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image: url('/logo-watermark.png');
  background-repeat: no-repeat;
  background-position: center 140px;
  background-size: min(78vw, 480px);
  opacity: .16;
  pointer-events:none;
}
/* iOS Safari: position:fixed en pseudo-elementos de body puede saltar con
   el teclado/viewport dinámico. Ahí lo anclamos al documento en vez de a
   la ventana — sigue siendo marca de agua fija, solo deja de estar
   pegada al viewport visual durante el scroll. */
@supports (-webkit-touch-callout: none){
  body::before{ position:absolute; }
}
*, *::before, *::after{ box-sizing:border-box; }

/* Superficies "card" que usan var(--card) quedan semi-transparentes para
   que la marca de agua del fondo se note a través; el blur mantiene el
   texto legible encima sin perder el efecto. No se aplica a controles que
   necesitan quedar sólidos (drawer, overlay de carga: ver más abajo). */
.trip-hero-card, .bases-card, .trip-card, .action-card, .form{
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}

/* Bloqueo visual hasta que el router resuelva la vista inicial */
body:not(.app-ready) .view{ display:none !important; }

/* ===== Header: menú + logo centrado ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  gap:4px;
  height:76px; padding:0 10px; padding-top:env(safe-area-inset-top, 0px);
  /* El logo (heroLogo) es PNG transparente: sin un fondo propio acá, al
     hacer scroll el contenido pasa "detrás" del logo y se mezcla con él.
     Fondo glass (blur + semitransparente) para que tape el contenido sin
     verse como un bloque sólido pegado arriba. */
  background: rgba(247,249,252,.82);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-bottom:1px solid rgba(17,24,39,.06);
  transition: background-color .2s ease, box-shadow .2s ease;
}
/* Mientras el skeleton todavía muestra su propio fondo shimmer, no hace
   falta el glass detrás — evita un doble fondo visible en el primer paint. */
.topbar:has(.topbar-logo.skeleton-round){ background:rgba(247,249,252,.55); }

/* Botón hamburguesa (izq.) y spacer (der.) del mismo tamaño para que el
   logo, dentro de un contenedor flex:1, quede perfectamente centrado sin
   importar su ancho real. */
.topbar-menu-btn{
  flex-shrink:0; width:42px; height:42px; border:none; border-radius:12px;
  background:transparent; color:var(--text); cursor:pointer;
  display:grid; place-items:center;
  transition: background-color .15s ease;
}
.topbar-menu-btn:hover{ background:rgba(17,24,39,.06); }
.topbar-menu-btn:active{ background:rgba(17,24,39,.1); }
.topbar-menu-btn svg{ width:22px; height:22px; }

.topbar-spacer{ flex-shrink:0; width:42px; height:42px; }

.topbar-logo-wrap{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
}
.topbar-logo{
  height:56px; width:auto; max-width:220px; object-fit:contain; flex-shrink:0;
}
@media (max-width:380px){
  .topbar-logo{ max-width:180px; height:48px; }
}
.topbar-logo.skeleton-round{
  width:180px; border-radius:14px;
  background: linear-gradient(100deg, #eceef1 30%, #f6f7f9 50%, #eceef1 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.topbar-logo.loaded{ background:none; animation:none; width:auto; }
@keyframes skeletonShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* Compensar la altura del topbar fijo */
.app{ padding-top:calc(76px + env(safe-area-inset-top, 0px) + clamp(12px,3vw,20px)); }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .4s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.home-center{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:calc(100dvh - 260px); }

.view-title{
  margin:0 0 16px 0; font-size:1rem; line-height:1.25; font-weight:800;
  letter-spacing:.2px; color:var(--text); text-align:center;
}

/* Hero title — título con más presencia + bus recorriendo la línea como ruta */
.hero-title{
  margin:2px 0 10px 0;
  font-size:1.45rem;
  font-weight:900;
  color:var(--text);
  text-align:left;
  position:relative;
}

/* Subtítulo descriptivo debajo del título, antes de la línea-ruta */
.trip-list-subtitle{
  margin:0 0 22px 0;
  padding-bottom:22px;
  font-size:.9rem;
  line-height:1.4;
  color:var(--muted);
  text-align:left;
  position:relative;
}
.trip-list-subtitle::before{
  /* la "ruta": línea sutil, separada del texto */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, rgba(44,123,229,.18), rgba(16,185,129,.18));
  border-radius:2px;
}
.trip-list-subtitle::after{
  /* bus que recorre la ruta, apoyado sobre la línea */
  content:"🚌";
  position:absolute;
  bottom:0;
  left:0;
  font-size:16px;
  line-height:1;
  transform:translate(-50%, 45%) scaleX(1);
  animation: busRide 7s ease-in-out infinite;
}
@keyframes busRide{
  0%   { left:0%;   transform:translate(-50%, 45%) scaleX(1); }
  48%  { left:100%; transform:translate(-50%, 45%) scaleX(1); }
  50%  { left:100%; transform:translate(-50%, 45%) scaleX(-1); }
  98%  { left:0%;   transform:translate(-50%, 45%) scaleX(-1); }
  100% { left:0%;   transform:translate(-50%, 45%) scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
  .trip-list-subtitle::after{ animation:none; left:50%; }
}

/* ===== Botones ===== */
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{ border:none; border-radius:10px; padding:12px 14px; font-weight:600; cursor:pointer; min-height:44px; }
.btn.primary{ background:var(--primary); color:#fff; }
.btn.ghost{ background:transparent; border:1px solid #e5e7eb; color:var(--text); }
.btn.ghost:hover{ background:#f3f4f6; border-color:#d1d5db; }
.btn.success{ background:var(--success); color:#fff; }
.btn.danger{ background:#ef4444; color:#fff; }
.btn.btn-icon{ display:inline-flex; align-items:center; gap:6px; }
.btn.btn-icon svg{ flex-shrink:0; transition: transform .45s ease; }
.btn.btn-icon:hover svg{ transform: rotate(180deg); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== Formularios genéricos ===== */
.form{ background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:16px; margin-bottom:12px; }
label{ font-weight:600; }
input{ border:1px solid #e5e7eb; border-radius:10px; padding:12px; font-size:1rem; background:#fff; color:var(--text); width:100%; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-weight:600; font-size:.9rem; color:#6b7280; }
.field-error{ border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.15); }

/* ===== Snackbar & Overlay ===== */
.snackbar{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#111827; color:#fff; padding:12px 16px; border-radius:12px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:200;
  max-width:90vw; text-align:center;
}
.snackbar.show{ opacity:1; transition:opacity .2s ease; }

.overlay{
  position:fixed; inset:0; background:rgba(17,24,39,.28); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:150;
}
.overlay.show{ opacity:1; pointer-events:auto; }
/* Variante para el arranque de la SPA (ver main.js/start()): cubre el hueco
   vacío que antes quedaba bajo el header mientras Auth.init()/routeTo()
   resuelven la vista inicial. Arranca debajo del topbar (mismo alto que
   .app) en vez de taparlo entero, para no ocultar el logo que ya está
   animándose ahí arriba. Visible desde el primer paint vía HTML, sin
   depender de JS ni de .show. */
.overlay.overlay-boot{
  top:calc(76px + env(safe-area-inset-top, 0px)); background:var(--bg);
  opacity:1; pointer-events:auto;
}
.loader{ background:var(--card-solid); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px; display:flex; align-items:center; gap:12px; }
.spinner{ width:20px; height:20px; border-radius:50%; border:3px solid #c7d2fe; border-top-color:#3b82f6; animation:spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text{ font-weight:600; color:#111827; }

.hidden{ display:none !important; }

/* ===== Menú lateral (drawer) ===== */
.nav-drawer{
  position:fixed; inset:0; z-index:300; pointer-events:none;
}
.nav-drawer.show{ pointer-events:auto; }

.nav-drawer-backdrop{
  position:absolute; inset:0; background:rgba(17,24,39,.4);
  opacity:0; transition:opacity .2s ease;
}
.nav-drawer.show .nav-drawer-backdrop{ opacity:1; }

.nav-drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:min(78vw, 300px);
  background:var(--card-solid); box-shadow:8px 0 28px rgba(17,24,39,.18);
  padding:calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:2px;
  transform:translateX(-100%);
  transition:transform .25s cubic-bezier(.34,1.15,.64,1);
}
.nav-drawer.show .nav-drawer-panel{ transform:translateX(0); }

.nav-drawer-close{
  align-self:flex-end; width:36px; height:36px; margin-bottom:6px;
  border:none; border-radius:10px; background:transparent; color:var(--muted);
  display:grid; place-items:center; cursor:pointer;
}
.nav-drawer-close:hover{ background:#f3f4f6; }

.nav-drawer-item{
  display:flex; align-items:center; gap:12px; width:100%;
  border:none; background:transparent; border-radius:12px;
  padding:12px 10px; font:inherit; font-size:.95rem; font-weight:700;
  color:var(--text); text-align:left; cursor:pointer;
}
.nav-drawer-item:hover{ background:#f3f4f6; }
.nav-drawer-item svg{ flex-shrink:0; width:20px; height:20px; color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  .view.active{ animation:none; }
  .spinner{ animation:none; }
  .nav-drawer-backdrop, .nav-drawer-panel{ transition:none; }
}