/* ==========================================================================
   RunGo — app móvil (PWA). Tokens muestreados del mockup (poster.png).
   Diseño mobile-first: en pantallas grandes la app es una columna centrada.
   ========================================================================== */

:root {
  --rg-bg:          #18181B;   /* header de la app, bienvenida, fondo alrededor en escritorio */
  --rg-lime:        #CCFF00;   /* acción: CTA, logo */
  --rg-lime-deep:   #C4DB18;   /* iconos y borde de tarjetas */
  --rg-yellow:      #FFFF00;   /* acento de headline */
  --rg-ink-on-lime: #373435;

  --rg-surface:     #FFFFFF;
  --rg-surface-2:   #F8F8F8;
  --rg-map:         #F5F4F4;
  --rg-text:        #18181B;
  --rg-text-soft:   #52525B;

  --rg-on-dark:      #FFFFFF;
  --rg-on-dark-soft: #BFBFC0;

  --rg-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rg-radius-card: 14px;
  --rg-radius-field: 10px;
  --rg-radius-cta: 12px;
  --rg-sheet-radius: 22px;
  --rg-gutter: 16px;
  --rg-header-h: 56px;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  font-family: var(--rg-font);
  background: var(--rg-bg);
  color: var(--rg-on-dark);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--rg-yellow); outline-offset: 2px; border-radius: 6px; }

/* ---------- Estructura de la app ---------- */

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;          /* escritorio: columna de app centrada */
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--rg-surface);
  color: var(--rg-text);
}

@media (min-width: 520px) {
  .app { box-shadow: 0 0 0 1px #2b2b30, 0 0 60px rgba(0, 0, 0, .6); }
}

/* Header */
.app-header {
  flex: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--rg-header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0 var(--rg-gutter);
  background: var(--rg-bg);
}
.app-header__logo { height: 30px; width: auto; }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--rg-on-dark);
  border-radius: 12px;
}
.icon-btn svg { width: 24px; height: 24px; }

/* Mapa */
.map {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--rg-map) url("../img/mapa-villavicencio-mockup.png") center top / cover no-repeat;
}
/* atribución/logo de Mapbox por encima del solape del panel */
.map .mapboxgl-ctrl-bottom-left,
.map .mapboxgl-ctrl-bottom-right { bottom: 20px; }
.map .mapboxgl-ctrl-top-right { top: 6px; }

/* Panel inferior */
.sheet {
  position: relative;
  z-index: 2;
  flex: none;
  margin-top: -18px;
  padding: 14px var(--rg-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--rg-surface);
  border-radius: var(--rg-sheet-radius) var(--rg-sheet-radius) 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
}

.search {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--rg-surface-2);
  border: 1.5px solid var(--rg-text-soft);
  border-radius: var(--rg-radius-field);
  color: var(--rg-text-soft);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}
.search svg { flex: none; width: 20px; height: 20px; color: var(--rg-text); }

.vehicles {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vehicle {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px 12px;
  background: var(--rg-surface);
  border: 2px solid var(--rg-lime-deep);
  border-radius: var(--rg-radius-card);
  text-align: center;
  transition: box-shadow .15s, border-color .15s;
}
.vehicle__icon { height: 46px; width: auto; mix-blend-mode: multiply; }
.vehicle__name { margin-top: 3px; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.vehicle__desc { margin-top: 2px; font-size: .75rem; font-weight: 700; line-height: 1.25; }

.vehicle[aria-pressed="true"] {
  border-color: var(--rg-text);
  box-shadow: 0 0 0 2px var(--rg-lime);
}

.hint {
  margin-top: 8px;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
}

.cta {
  display: block; width: 100%;
  margin-top: 10px;
  height: 52px;
  background: var(--rg-lime);
  border: 2px solid var(--rg-lime-deep);
  border-radius: var(--rg-radius-cta);
  color: var(--rg-ink-on-lime);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: transform .1s, filter .15s;
}
.cta:hover { filter: brightness(.96); }
.cta:active { transform: translateY(1px); }

.pro-link {
  display: block;
  margin-top: 8px;
  padding: 4px;
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  color: var(--rg-text);
}

/* Pantallas de poca altura: compacta el panel */
@media (max-height: 640px) {
  .vehicle__desc { display: none; }
  .vehicle__icon { height: 36px; }
}

/* ---------- Capas sobre la app: menú, aviso de cuenta, bienvenida ---------- */

.backdrop {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(24, 24, 27, .55);
}

/* Menú lateral */
.drawer {
  position: absolute; z-index: 11; top: 0; right: 0; bottom: 0;
  width: min(86%, 340px);
  display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--rg-bg);
  color: var(--rg-on-dark);
  overflow-y: auto;
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 30px; width: auto; }
.drawer__nav { margin-top: 24px; display: grid; gap: 4px; }
.drawer__nav a {
  display: block; padding: 14px 4px;
  font-size: 1.05rem; font-weight: 800; text-decoration: none;
  border-bottom: 1px solid #2b2b30;
}
.drawer__nav a.is-pro { color: var(--rg-lime); }
.drawer__legal {
  margin-top: auto; padding-top: 24px;
  font-size: .78rem; font-weight: 300; line-height: 1.6; color: var(--rg-on-dark-soft);
}

/* Aviso "necesitas cuenta" */
.gate {
  position: absolute; z-index: 11; left: 0; right: 0; bottom: 0;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--rg-surface);
  border-radius: var(--rg-sheet-radius) var(--rg-sheet-radius) 0 0;
  text-align: center;
}
.gate__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.gate__text { margin: 8px auto 16px; max-width: 30ch; font-size: .9rem; color: var(--rg-text-soft); }
.gate__go { display: grid; place-items: center; margin-top: 0; }
.gate__alt { display: block; margin-top: 12px; font-size: .9rem; font-weight: 800; color: var(--rg-text); }
.gate__cancel { display: block; margin: 10px auto 0; padding: 8px 12px; font-size: .85rem; color: var(--rg-text-soft); }

/* Bienvenida (primera visita): marca + texto legal obligatorio */
.welcome {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--rg-bg);
  color: var(--rg-on-dark);
  text-align: center;
  overflow-y: auto;
}
.welcome__logo { width: min(72%, 300px); margin-top: auto; }
.welcome__title {
  margin-top: 28px;
  font-size: clamp(1.7rem, 7vw, 2.1rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  color: var(--rg-yellow);
  text-wrap: balance;
}
.welcome__lead { margin-top: 12px; max-width: 30ch; font-size: 1.1rem; font-weight: 300; text-wrap: balance; }
.welcome .cta { margin-top: 28px; max-width: 320px; }
.welcome__legal {
  margin-top: 24px; max-width: 34ch;
  font-size: .75rem; font-weight: 300; line-height: 1.65; color: var(--rg-on-dark-soft);
}
.welcome::after { content: ""; margin-bottom: auto; }

/* ---------- Pantallas de cuenta (registro / acceso) ---------- */

.page-dark { min-height: 100%; display: flex; flex-direction: column; }

.auth {
  flex: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 24px 0;
}
.auth__logo { width: min(60vw, 220px); margin: 0 auto; }
.auth__title {
  margin-top: 28px;
  font-size: clamp(1.6rem, 6vw, 2rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--rg-yellow);
  text-align: center; text-wrap: balance;
}
.auth__lead { margin-top: 10px; text-align: center; font-weight: 300; }

.form {
  margin-top: 24px;
  padding: 22px 18px;
  background: var(--rg-surface);
  color: var(--rg-text);
  border-radius: 20px;
}
.field + .field { margin-top: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 800; }
.field input {
  width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--rg-text);
  background: var(--rg-surface-2);
  border: 1.5px solid var(--rg-text-soft);
  border-radius: var(--rg-radius-field);
}
.field input:focus-visible { outline: 3px solid var(--rg-lime); outline-offset: 1px; border-color: var(--rg-text); }
.check { display: flex; gap: 10px; margin-top: 16px; font-size: .8rem; line-height: 1.4; color: var(--rg-text-soft); }
.check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: #18181B; }
.form .cta { margin-top: 18px; }
.form__status { margin-top: 12px; min-height: 1.2em; font-size: .85rem; font-weight: 700; text-align: center; }
.auth__alt { margin: 20px 0 0; text-align: center; font-size: .95rem; }
.auth__alt a { font-weight: 800; color: var(--rg-lime); }
.auth__back { display: block; margin-top: 12px; text-align: center; font-size: .85rem; color: var(--rg-on-dark-soft); }

.legal {
  margin: 40px auto 0;
  width: 100%; max-width: 520px;
  padding: 0 24px calc(32px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .8rem; font-weight: 300; line-height: 1.7;
  color: var(--rg-on-dark-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}