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

:root{
  --bg:#f7f9fc; --card:#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:var(--bg); overflow-x:hidden;
}
*, *::before, *::after{ box-sizing:border-box; }

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

/* ===== Header: logo centrado ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  height:76px; padding:0 16px; 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); }
.topbar-logo{
  height:56px; width:auto; max-width:220px; object-fit:contain; flex-shrink:0;
}
.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:0 0 30px 0;
  padding-bottom:22px;
  font-size:1.45rem;
  font-weight:900;
  color:var(--text);
  text-align:left;
  position:relative;
}
.hero-title::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;
}
.hero-title::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){
  .hero-title::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; }
.loader{ background:var(--card); 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; }

@media (prefers-reduced-motion: reduce){
  .view.active{ animation:none; }
  .spinner{ animation:none; }
}

/* ── Píldora BYC (aviso Bases y Condiciones) ── */
.byc-pill{
  display:block; margin:14px auto 0; max-width:680px; padding:10px 16px;
  background:#fff8e1; border:1.5px solid #f9a825; border-radius:999px;
  color:#e65100; font-size:.82rem; font-weight:600; text-align:center;
  text-decoration:none; line-height:1.4; transition:background .18s, transform .12s;
}
.byc-pill:hover, .byc-pill:active{ background:#fff3cd; transform:scale(.98); }