/* RutaTapas V3.0 — Estilo base (sin frameworks)
   Inspirado en las pantallas de diseño adjuntas (tema "game", fondo punteado, tarjetas redondeadas).
*/

:root{
  /* Colores (modo claro) */
  --game-bg: #f5f6fa;
  --card-bg: #ffffff;
  --metal-dark: #2f3640;
  --metal-light: #718093;
  --primary: #00a8ff;
  --primary-dark: #0097e6;
  --neon-blue: #00d2ff;
  --accent-yellow: #fbc531;
  --accent-orange: #e1b12c;
  --success: #44bd32;
  --danger: #e84118;

  /* Tipografía */
  --font-display: "Comfortaa", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --font-game: "Bungee", "Impact", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", var(--font-display);

  /* Layout */
  --radius-sm: 1.2rem;
  --radius: 2.0rem;
  --radius-lg: 3.0rem;
  --shadow-soft: 0 10px 25px rgba(0,0,0,.08);
  --shadow-card: 0 14px 30px rgba(0,0,0,.10);
  --border: 1px solid rgba(0,0,0,.06);

  --nav-h: 7.6rem;

  --btn-metal: linear-gradient(180deg, #7f8fa6 0%, #2f3640 100%);
  --btn-yellow: linear-gradient(180deg, #fbc531 0%, #e1b12c 100%);
  --progress: linear-gradient(90deg, var(--primary) 0%, var(--neon-blue) 100%);
}

/* Modo oscuro (toggle) */
body.theme-dark{
  --game-bg:#0b0f14;
  --card-bg:#111826;
  --metal-dark:#e8eef7;
  --metal-light:#9aa7b6;
  --border: 1px solid rgba(255,255,255,.10);
  --shadow-soft: 0 10px 25px rgba(0,0,0,.35);
  --shadow-card: 0 14px 30px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ font-size:10px; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-display);
  color: var(--metal-dark);
  background: var(--game-bg);
  min-height: 100dvh;
}

/* Fondo punteado */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(#dcdde1 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .65;
}
body.theme-dark::before{
  background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  opacity: .35;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font:inherit; color:inherit; }
.hidden{ display:none !important; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--accent-yellow);
  color: #111;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  z-index:9999;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Contenedor pensado para móvil */
.container{
  width: min(56rem, calc(100% - 3.2rem));
  margin: 0 auto;
}

/* Header global: se mantiene solo por accesibilidad; visualmente se oculta */
.app-header{ display:none; }

.app-main{
  padding: 0 0 calc(var(--nav-h) + 1.6rem);
}

/* Componentes base */
.card{
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card.pad{ padding: 2.0rem; }

.h1{ font-family: var(--font-game); font-size: 2.4rem; margin:0 0 1rem; letter-spacing: .02em; }
.h2{ font-family: var(--font-game); font-size: 1.8rem; margin:0 0 1rem; letter-spacing: .02em; }
.p{ margin:0 0 1.2rem; font-family: var(--font-body); color: var(--metal-light); font-size: 1.4rem; line-height:1.5; }
.small{ font-size: 1.2rem; color: var(--metal-light); font-family: var(--font-body); }

.row{ display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.spread{ justify-content:space-between; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .6rem 1.0rem;
  border-radius: 999px;
  border: var(--border);
  background: rgba(0,168,255,.10);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 1.2rem;
}
body.theme-dark .badge{ background: rgba(0,168,255,.14); }

.hr{ height:1px; background: rgba(0,0,0,.06); border:0; margin: 1.6rem 0; }
body.theme-dark .hr{ background: rgba(255,255,255,.10); }

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1.8rem;
  border: var(--border);
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  cursor:pointer;
  user-select:none;
}
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary{
  background: var(--btn-metal);
  color: #fff;
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: 0 4px 0 rgba(25,29,34,.55), inset 0 2px 0 rgba(255,255,255,.18);
  font-family: var(--font-game);
  letter-spacing: .04em;
}
.btn-primary:active{
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(25,29,34,.0), inset 0 2px 6px rgba(0,0,0,.35);
}

.btn-blue{
  background: var(--primary);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 0 var(--primary-dark);
  font-family: var(--font-game);
  letter-spacing: .04em;
}
.btn-blue:active{ transform: translateY(4px); box-shadow: 0 0 0 var(--primary-dark); }

.btn-yellow{
  background: var(--btn-yellow);
  color: #111;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 #c29a00, 0 10px 18px rgba(0,0,0,.12);
  font-family: var(--font-game);
  letter-spacing: .03em;
}
.btn-yellow:active{ transform: translateY(4px); box-shadow: 0 0 0 #c29a00, inset 0 2px 6px rgba(0,0,0,.25); }

.btn-ghost{
  background: transparent;
  box-shadow: none;
}

.btn-danger{
  background: rgba(232,65,24,.12);
  border: 1px solid rgba(232,65,24,.35);
  color: #b71c1c;
  box-shadow: none;
}
body.theme-dark .btn-danger{ color:#ffd4d4; }

.btn-big{
  width: 100%;
  padding: 1.8rem 1.6rem;
  border-radius: 2.2rem;
  font-size: 1.6rem;
}


.btn-sm{
  padding: .9rem 1.1rem;
  border-radius: 1.6rem;
  font-size: 1.2rem;
  line-height: 1;
}

/* Botones con icono (pantalla detalle parada) */
.btn-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}
.btn-ico--xl{ font-size: 2.2rem; }

.btn-ico-img{ display:block; width: 1.8rem; height: 1.8rem; object-fit: contain; }
.btn-ico-img--xl{ width: 2.2rem; height: 2.2rem; }

.stop-detail-actions .btn-action{
  gap: .9rem;
  padding: 1.2rem 1.4rem;
}

.stop-detail-actions .btn-web:disabled{
  filter: grayscale(1);
}

/* Campos */
.field{ display:flex; flex-direction:column; gap:.6rem; margin-bottom: 1.4rem; }
.label{ font-size: 1.2rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--metal-light); margin-left: .6rem; }
.input, .select{
  background: var(--card-bg);
  border: 3px solid rgba(113,128,147,.55);
  border-radius: 2.0rem;
  padding: 1.4rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 800;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.input:focus, .select:focus{
  border-color: rgba(0,168,255,.85);
  box-shadow: 0 0 0 .4rem rgba(0,168,255,.18);
}

/* Barra de progreso */
.progress-wrap{ display:flex; flex-direction:column; gap:.8rem; }
.progressbar{
  height: 1.4rem;
  border-radius: 999px;
  background: rgba(47,54,64,.10);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
  overflow:hidden;
}
.progressbar > div{
  height: 100%;
  width: 0%;
  background: var(--progress);
  border-radius: 999px;
}

/* Lista */
.list{ display:flex; flex-direction:column; gap: 1.2rem; }
.item{
  display:flex;
  align-items:center;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--card-bg);
  border: var(--border);
  border-radius: 2.2rem;
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  text-decoration:none;
  color: inherit;
}
.item:active{ transform: scale(.99); }
.item:focus-visible{ outline: 0.3rem solid rgba(0,168,255,.55); outline-offset: 0.3rem; }
.item .meta{ flex:1; min-width:0; }
.item .title{ font-weight: 900; font-size: 1.5rem; color: var(--metal-dark); margin:0 0 .2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .sub{ font-size: 1.2rem; color: var(--metal-light); margin:0; font-family: var(--font-body); }
.item .right{ display:flex; gap:.8rem; align-items:center; }

/* === Paradas (tarjeta de parada) ===
   Ajustamos el layout SOLO en el tablero de paradas para evitar solapes
   entre descripción, estrellas y botones en pantallas pequeñas. */
.stop-card{
  display:grid;
  grid-template-columns: 6.2rem 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "img meta"
    "actions actions";
  align-items:start;
  row-gap: 1.0rem;
  /* un poco más de aire vertical */
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  cursor: pointer;
}
.stop-card:focus-visible{ outline: 0.3rem solid rgba(0,168,255,.55); outline-offset: 0.3rem; }

.stop-card > img{ grid-area: img; }
.stop-card .meta{ grid-area: meta; }
.stop-card .stop-actions{
  grid-area: actions;
  width: 100%;
  align-items:flex-end;
}

.stop-name{
  margin: 0 0 .2rem;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--metal-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stop-sub{ margin: 0; }

/* En pantallas algo más anchas, dejamos acciones a la derecha en una sola fila */
@media (min-width: 52rem){
  .stop-card{
    grid-template-columns: 6.2rem 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "img meta actions";
    align-items:center;
    row-gap: 0;
  }
  .stop-card .stop-actions{ width: auto; }
}

/* Acciones de parada (por defecto: 2 filas). En móvil las ponemos en 1 sola línea */
.stop-actions{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-end; }
.stop-actions__icons{ display:flex; gap:.8rem; align-items:center; }
.stop-actions__btns{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; }

/* Móvil: Ir/Saltar/Ver en la misma línea que Hecho/Favorito */
@media (max-width: 51.999rem){
  .stop-card .stop-actions{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    flex-wrap: wrap;
  }
  /* Aplanamos los contenedores para que TODOS los botones se alineen en una sola fila */
  .stop-card .stop-actions__icons,
  .stop-card .stop-actions__btns{ display: contents; }
  /* (Los botones internos ya tienen su propio layout: .btn / .fav-btn) */
}


/* Botón pequeño (icono) */
.fav-btn{
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1.6rem;
  border: var(--border);
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  /* Iconos grandes (✓ / ♥) sin cambiar el tamaño del botón */
  font-size: 2.8rem;
  line-height: 1;
}
.fav-btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.fav-btn[aria-pressed="true"]{ background: rgba(0,168,255,.10); border-color: rgba(0,168,255,.35); }

/* Estrellas */
.stars{ display:flex; gap:.4rem; }
.star-btn{
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1.2rem;
  border: var(--border);
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 0 rgba(0,0,0,.06);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 1.6rem;
}
.star-btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.star-btn[aria-pressed="true"]{ color: var(--accent-yellow); }
.star-btn--sm{ width: 2.8rem; height:2.8rem; font-size: 1.4rem; border-radius: 1.0rem; }
.stars--inline{ margin-top: .6rem; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 1.4rem);
  transform: translateX(-50%);
  max-width: min(56rem, calc(100% - 3.2rem));
  padding: 1.2rem 1.4rem;
  border-radius: 1.8rem;
  border: var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  color: var(--metal-dark);
  font-size: 1.4rem;
  z-index: 999;
}
body.theme-dark .toast{ background: rgba(17,24,38,.92); color: var(--metal-dark); }

/* ===== Navegación inferior ===== */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -10px 30px rgba(0,0,0,.06);
  z-index: 50;
  border-top-left-radius: 3.0rem;
  border-top-right-radius: 3.0rem;
}
body.theme-dark .bottom-nav{
  background: rgba(17,24,38,.92);
  border-top-color: rgba(255,255,255,.10);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}

.bottom-nav__inner{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  align-items:center;
  height: var(--nav-h);
}

.tab-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  background: transparent;
  border: 0;
  color: var(--metal-light);
  min-height: calc(var(--nav-h) - 1.2rem);
}
.tab-ico{ display:grid; place-items:center; width: 4.2rem; height: 4.2rem; border-radius: 999px; }
.tab-txt{ font-size: 1.1rem; font-weight: 900; letter-spacing: .04em; font-family: var(--font-display); }

.tab-btn.is-active{ color: var(--primary); }
.tab-btn.is-active .tab-ico{
  background: var(--primary);
  color: #fff;
  border: 4px solid rgba(255,255,255,.95);
  transform: translateY(-1.6rem);
  box-shadow: 0 10px 22px rgba(0,168,255,.35);
}
body.theme-dark .tab-btn.is-active .tab-ico{ border-color: rgba(17,24,38,.92); }
.tab-btn.is-active .tab-txt{ margin-top: -1.0rem; }

/* ===== Pantallas específicas ===== */

/* Toggle tema */
.theme-toggle{
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 999px;
  border: var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.theme-toggle:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.06); }

/* Welcome / perfil */
.welcome-screen{
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  padding: 2.0rem 0 2.4rem;
}

.welcome-head{
  text-align:center;
  padding-top: 1.6rem;
}
.welcome-head__title{
  font-family: var(--font-game);
  font-size: 4.0rem;
  color: var(--primary);
  line-height: 1.0;
  letter-spacing: .03em;
  margin:0;
}
.welcome-head__underline{ width: 8.0rem; height: .5rem; background: var(--accent-yellow); border-radius: 999px; margin: 1.2rem auto 0; }

.avatar-orbit{
  width: 20.0rem;
  height: 20.0rem;
  border-radius: 999px;
  margin: 3.2rem auto 2.2rem;
  position: relative;
}
.avatar-orbit::before{
  content:"";
  position:absolute;
  inset: -1.6rem;
  border-radius: 999px;
  border: 2px dashed rgba(0,168,255,.35);
  animation: spin 20s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.avatar-frame{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 4px solid var(--primary);
  box-shadow: 0 0 15px rgba(0,168,255,.35), inset 0 0 15px rgba(0,168,255,.22);
  background: rgba(255,255,255,.75);
  overflow:hidden;
  position: relative;
  display:grid;
  place-items:center;
}
body.theme-dark .avatar-frame{ background: rgba(17,24,38,.75); }
.avatar-frame img{ width:100%; height:100%; object-fit:cover; }

.avatar-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  color:#fff;
  font-size: 4.2rem;
}

.avatar-bubble{
  position:absolute;
  right: -1.0rem;
  bottom: -1.0rem;
  width: 6.0rem;
  height: 6.0rem;
  border-radius: 999px;
  background: var(--accent-yellow);
  border: 4px solid var(--card-bg);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  transform: rotate(10deg);
  font-size: 2.6rem;
}

.avatar-strip{
  display:flex;
  gap: 1.0rem;
  justify-content:center;
  overflow-x:auto;
  padding: .8rem .6rem;
  margin: 0 auto 1.6rem;
  width: min(48rem, calc(100% - 3.2rem));
  scrollbar-width: none;
}
.avatar-strip::-webkit-scrollbar{ display:none; }

.avatar-chip{
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 1.6rem;
  border: 2px solid rgba(0,0,0,.06);
  background: var(--card-bg);
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.avatar-chip img{ width:100%; height:100%; object-fit:cover; }
.avatar-chip.is-selected{ border-color: rgba(0,168,255,.75); box-shadow: 0 0 0 .4rem rgba(0,168,255,.14); }

.input-icon{
  position: relative;
}
.input-icon__left{
  position:absolute;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: var(--primary);
}
.input-icon__right{
  position:absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--accent-yellow);
}
.input.iconed{ padding-left: 4.4rem; padding-right: 4.4rem; }

/* Welcome (usuario existente) */
.welcome-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .8rem 1.6rem;
  background: var(--metal-dark);
  color: var(--accent-yellow);
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.8rem;
  font-family: var(--font-display);
}
body.theme-dark .welcome-handle{ background: rgba(255,255,255,.10); }

.welcome-avatar2{
  width: 20.0rem;
  height: 20.0rem;
  border-radius: 999px;
  margin: 3.2rem auto 1.8rem;
  padding: .8rem;
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  position: relative;
}
.welcome-avatar2__inner{
  width:100%;
  height:100%;
  border-radius: 999px;
  overflow:hidden;
  border: 4px solid var(--accent-yellow);
}
.welcome-avatar2__inner img{ width:100%; height:100%; object-fit:cover; }
.welcome-level{
  position:absolute;
  top: -1.2rem;
  right: -1.2rem;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 999px;
  background: var(--primary);
  color:#fff;
  border: 4px solid var(--card-bg);
  display:grid;
  place-items:center;
  font-family: var(--font-game);
  font-size: 1.8rem;
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}

.welcome-badges{ display:flex; justify-content:center; gap: 1.2rem; margin: 1.2rem 0 2.0rem; }
.welcome-badge{
  width: 6.0rem;
  height: 6.0rem;
  border-radius: 1.6rem;
  display:grid;
  place-items:center;
  /* Iconos grandes (emoji) para ocupar visualmente la caja */
  font-size: 4.0rem;
  line-height: 1;
  color:#fff;
  box-shadow: 0 12px 18px rgba(0,0,0,.10);
}
.welcome-badge--yellow{ background: var(--accent-yellow); }
.welcome-badge--blue{ background: var(--primary); }
.welcome-badge--orange{ background: #ff8c4a; }

/* Explorer (rutas) */
.explorer-head{
  padding: 2.0rem 0 1.0rem;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.explorer-kicker{ font-size: 1.2rem; font-weight: 900; color: var(--metal-light); text-transform: uppercase; letter-spacing: .16em; }
.explorer-title{
  font-family: var(--font-game);
  font-size: 3.2rem;
  margin: .4rem 0 0;
}
.explorer-title span{ color: var(--primary); }

.profile-bubble{
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 999px;
  border: 4px solid var(--accent-yellow);
  background: var(--card-bg);
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.profile-bubble img{ width:100%; height:100%; object-fit:cover; }

.pills{ display:flex; gap: 1.0rem; overflow-x:auto; padding: .8rem 0 1.2rem; scrollbar-width:none; }
.pills::-webkit-scrollbar{ display:none; }
.pill{
  border: 1px solid rgba(0,0,0,.08);
  background: var(--card-bg);
  color: var(--metal-light);
  border-radius: 999px;
  padding: .9rem 1.6rem;
  font-weight: 900;
  font-size: 1.3rem;
  cursor:pointer;
  white-space: nowrap;
}
.pill.is-active{ background: var(--metal-dark); color: #fff; border-color: rgba(0,0,0,.08); }

.route-cards{ display:flex; flex-direction:column; gap: 1.8rem; padding-bottom: 1.6rem; }
.route-card{
  position: relative;
  border-radius: 3.2rem;
  overflow:hidden;
  box-shadow: 0 18px 28px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  min-height: 32rem;
  background: #dde4ec;
}
.route-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.route-card__shade{ position:absolute; inset:0; background: linear-gradient(to top, rgba(47,54,64,.92), rgba(47,54,64,.25), rgba(47,54,64,.05)); }
.route-card__tag{
  position:absolute;
  top: 1.4rem;
  right: 1.4rem;
  background: var(--accent-yellow);
  color: #111;
  font-family: var(--font-game);
  font-size: 1.1rem;
  padding: .6rem 1.2rem;
  border-radius: 1.2rem;
  border: 2px solid rgba(255,255,255,.95);
  transform: rotate(3deg);
  box-shadow: 0 10px 16px rgba(0,0,0,.12);
}
.route-card__body{ position:absolute; left:0; right:0; bottom:0; padding: 2.0rem; color:#fff; }
.route-card__loc{ display:flex; align-items:center; gap:.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: 1.1rem; opacity: .95; }
.route-card__name{ font-family: var(--font-game); font-size: 3.2rem; line-height:1.0; margin: 1.0rem 0 1.2rem; text-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.route-card__meta{ display:flex; justify-content:space-between; gap: 1.4rem; align-items:flex-end; margin-bottom: 1.4rem; }
.route-card__meta-label{ font-size: 1.0rem; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.75); }
.route-card__dist{ font-family: var(--font-game); font-size: 1.8rem; }
.route-card__btn{ width:100%; }

/* Ruta (mapa + panel) */
.route-screen{
  min-height: calc(100dvh - var(--nav-h));
  display:flex;
  flex-direction:column;
}
.route-hud{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 3.0rem;
  border-bottom-right-radius: 3.0rem;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 1.4rem 1.6rem 1.2rem;
}
body.theme-dark .route-hud{ background: rgba(17,24,38,.92); border-bottom-color: rgba(255,255,255,.10); }

.route-hud__top{ display:flex; justify-content:space-between; align-items:center; gap: 1.2rem; }

.level-pill{
  display:inline-flex;
  align-items:center;
  gap: .8rem;
}
.level-pill__lvl{
  background: var(--primary);
  color:#fff;
  font-family: var(--font-game);
  font-size: 1.1rem;
  padding: .6rem 1.0rem;
  border-radius: 1.0rem;
}
.level-pill__role{ font-weight: 900; color: var(--metal-light); font-size: 1.2rem; }

.xp-pill{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .7rem 1.0rem;
  border-radius: 999px;
  background: rgba(251,197,49,.20);
  font-weight: 900;
  font-size: 1.1rem;
}

.route-hud__mid{ display:flex; justify-content:space-between; align-items:flex-end; margin-top: 1.2rem; gap: 1.2rem; }
.route-hud__progressTitle{ font-family: var(--font-game); color: var(--primary); font-size: 1.6rem; letter-spacing: .02em; }
.route-hud__summary{ text-align:right; }
.route-hud__summary .small{ color: var(--metal-dark); }
body.theme-dark .route-hud__summary .small{ color: var(--metal-dark); }

.route-hud__bar{ margin-top: 1.0rem; position: relative; height: 3.6rem; }
.route-hud__track{ position:absolute; left:0; right:0; top: 1.4rem; height: 1.0rem; border-radius: 999px; background: rgba(47,54,64,.12); overflow:hidden; }
.route-hud__fill{ height:100%; width:0%; background: var(--progress); border-radius: 999px; }
.route-hud__avatar{
  position:absolute;
  top: 0;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  border: 2px solid #fff;
  overflow:hidden;
  background: var(--accent-yellow);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
body.theme-dark .route-hud__avatar{ border-color: rgba(17,24,38,.92); }
.route-hud__avatar img{ width:100%; height:100%; object-fit:cover; }

/* ===== Perfil / Dashboard (pantalla 2) ===== */
.profile-actions{ margin: 2.0rem 0 1.6rem; }

.profile-hero{ position: relative; overflow: visible; }

.profile-hero__top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 1.2rem; }
.profile-hero__kicker{ font-family: var(--font-game); font-size: 2.0rem; line-height: 1.1; }
.profile-hero__handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: rgba(0,168,255,.12);
  border: 1px solid rgba(0,168,255,.22);
  color: var(--primary);
  font-weight: 900;
  font-size: 1.2rem;
  margin-top: .8rem;
  font-family: var(--font-body);
}

.profile-hero__tip{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--metal-light);
  font-weight: 900;
  font-size: 1.2rem;
  user-select:none;
}
body.theme-dark .profile-hero__tip{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.profile-hero__tip-ico{ font-size: 1.6rem; }

/* Botón de edición dentro del héroe */
.profile-hero__edit{ white-space: nowrap; }

.profile-hero__bubble{ margin: 2.2rem auto 1.2rem; position: relative; width: 12.4rem; height: 12.4rem; }
.profile-hero__avatar{
  width: 12.4rem;
  height: 12.4rem;
  border-radius: 999px;
  padding: .8rem;
  background: var(--card-bg);
  border: var(--border);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  overflow:hidden;
}
.profile-hero__avatar img{
  width:100%;
  height:100%;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid var(--accent-yellow);
}

.profile-hero__lvl{
  position:absolute;
  bottom: -1.0rem;
  right: -1.0rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 999px;
  background: var(--accent-yellow);
  color: #111;
  border: 4px solid var(--card-bg);
  display:grid;
  place-items:center;
  font-family: var(--font-game);
  font-size: 1.5rem;
  box-shadow: 0 12px 18px rgba(0,0,0,.14);
}

.profile-hero__name{ text-align:center; font-family: var(--font-game); font-size: 2.6rem; margin-top: .2rem; }
.profile-hero__role{
  text-align:center;
  font-family: var(--font-body);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--metal-light);
  font-size: 1.0rem;
  margin-top: .4rem;
}

.profile-hero__xp{ margin-top: 1.4rem; }
.profile-xpbar{
  position: relative;
  height: 2.8rem;
  border-radius: 999px;
  background: rgba(47,54,64,.10);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.10);
}
body.theme-dark .profile-xpbar{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); }

.profile-xpbar__fill{ position:absolute; inset:0 auto 0 0; width: 0%; height:100%; background: var(--progress); border-radius: 999px; transition: width .6s ease; }
.profile-xpbar__txt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 0 1.0rem;
  font-family: var(--font-game);
  font-size: 1.0rem;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.40);
  letter-spacing: .04em;
}
.profile-hero__xpHint{ text-align:center; margin-top: .8rem; }
.profile-hero__slogan{ text-align:center; margin-top: 1.2rem; }

.profile-section{ margin-top: 1.6rem; }

.metrics-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}
@media (min-width: 520px){
  .metrics-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.metric{
  position: relative;
  border-radius: 2.2rem;
  border: 2px solid rgba(0,0,0,.06);
  padding: 1.4rem 1.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: .6rem;
  box-shadow: 0 6px 0 rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.theme-dark .metric{ border-color: rgba(255,255,255,.10); box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.metric:active{ transform: translateY(2px); box-shadow: 0 4px 0 rgba(0,0,0,.05); }

/* Métricas clicables (tarjetas enlace) */
.metric-link{ text-decoration: none; color: inherit; }
.metric-link:focus-visible{ outline: 0.3rem solid rgba(0,168,255,.55); outline-offset: 0.3rem; }

.metric-ico{
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 2.0rem;
  display:grid;
  place-items:center;
  font-size: 3.0rem;
  border: 1px solid rgba(0,0,0,.06);
}

.metric-val{ font-family: var(--font-game); font-size: 2.2rem; color: var(--metal-dark); line-height: 1.0; }
.metric-lab{ font-family: var(--font-body); font-weight: 900; font-size: 1.0rem; color: var(--metal-light); text-transform: uppercase; letter-spacing: .12em; line-height: 1.15; }

.metrics-grid .metric:nth-child(1){ background: rgba(0,168,255,.08); border-color: rgba(0,168,255,.18); }
.metrics-grid .metric:nth-child(1) .metric-ico{ background: rgba(0,168,255,.14); color: var(--primary); }

.metrics-grid .metric:nth-child(2){ background: rgba(251,197,49,.10); border-color: rgba(251,197,49,.28); }
.metrics-grid .metric:nth-child(2) .metric-ico{ background: rgba(251,197,49,.20); color: #b27a00; }

.metrics-grid .metric:nth-child(3){ background: rgba(233,30,99,.08); border-color: rgba(233,30,99,.18); }
.metrics-grid .metric:nth-child(3) .metric-ico{ background: rgba(233,30,99,.14); color: #d81b60; }

.metrics-grid .metric:nth-child(4){ background: rgba(156,39,176,.08); border-color: rgba(156,39,176,.16); }
.metrics-grid .metric:nth-child(4) .metric-ico{ background: rgba(156,39,176,.14); color: #8e24aa; }

.logros-line{ display:flex; justify-content:space-between; align-items:flex-end; gap: 1.2rem; margin-top: 1.2rem; }
.logros-line__title{ font-family: var(--font-body); font-weight: 900; font-size: 1.4rem; }

.mini-progress{
  margin-top: .8rem;
  height: 1.2rem;
  border-radius: 999px;
  background: rgba(47,54,64,.10);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
}
body.theme-dark .mini-progress{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); }
.mini-progress__fill{ height:100%; width: 0%; background: var(--progress); border-radius: 999px; transition: width .6s ease; }

.logros-phrase{
  margin-top: 1.6rem;
  border-radius: 2.4rem;
  border: 2px dashed rgba(0,0,0,.12);
  background: rgba(47,54,64,.04);
  padding: 1.4rem;
  display:flex;
  gap: 1.2rem;
  align-items:flex-start;
}
body.theme-dark .logros-phrase{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }

.logros-phrase__ico{
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 2.0rem;
  display:grid;
  place-items:center;
  font-size: 2.8rem;
  background: var(--accent-yellow);
  color:#111;
  flex: 0 0 auto;
  box-shadow: 0 12px 18px rgba(0,0,0,.12);
}

.logros-phrase__tier{ font-family: var(--font-game); font-size: 1.6rem; margin-bottom: .4rem; }

.ach-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.0rem; margin-top: 1.6rem; }
@media (max-width: 380px){
  .ach-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ach-grid .ach-card:nth-child(3){ grid-column: 1 / -1; }
}

.ach-card{
  border-radius: 2.4rem;
  border: 2px solid rgba(0,0,0,.06);
  background: var(--card-bg);
  padding: 1.2rem 1.0rem;
  min-height: 14.0rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: .6rem;
  text-align:center;
  position: relative;
  overflow:hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.04);
}
body.theme-dark .ach-card{ border-color: rgba(255,255,255,.10); box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.ach-card:active{ transform: translateY(2px); }

.ach-ico{
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 2.2rem;
  display:grid;
  place-items:center;
  background: rgba(0,168,255,.12);
  border: 1px solid rgba(0,0,0,.06);
}
.ach-ico__emoji{ font-size: 3.6rem; line-height: 1; }

.ach-title{ font-family: var(--font-game); font-size: 1.3rem; }
.ach-sub{ font-family: var(--font-body); font-weight: 900; color: var(--metal-light); font-size: 1.1rem; }

.ach-card.is-off{ opacity: .55; filter: grayscale(1); }
.ach-card.is-off::after{ content:'🔒'; position:absolute; top: .9rem; right: .9rem; font-size: 1.6rem; opacity: .85; }

.ach-card.is-on{ border-color: rgba(68,189,50,.20); }
.ach-card.is-on .ach-ico{ background: rgba(68,189,50,.14); border-color: rgba(68,189,50,.25); }

@keyframes rt-pop{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-.35rem); }
}
@media (prefers-reduced-motion: no-preference){
  .ach-card.is-on .ach-ico{ animation: rt-pop 2.6s ease-in-out infinite; }
}

.route-map{
  position: relative;
  flex: 1;
  background: #f1f3f4;
}
.route-map__box{ position:absolute; inset:0; }

.route-map__controls{
  position:absolute;
  right: 1.2rem;
  top: 1.2rem;
  display:flex;
  flex-direction:column;
  gap: 1.0rem;
  z-index: 10;
}

.icon-btn{
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1.4rem;
  border: var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 1.8rem;
}
.icon-btn:active{ transform: translateY(2px); box-shadow: 0 8px 14px rgba(0,0,0,.10); }

.route-sheet{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-h) + .8rem);
  padding: 0 1.2rem;
  z-index: 15;
}

.route-sheet__card{
  background: var(--card-bg);
  border: var(--border);
  border-radius: 3.2rem;
  box-shadow: 0 20px 30px rgba(0,0,0,.10);
  padding: 1.6rem;
}

.route-sheet__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--metal-dark);
  color:#fff;
  font-family: var(--font-game);
  font-size: 1.0rem;
  letter-spacing: .12em;
  border: 2px solid #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1.4rem;
}

.route-sheet__row{ display:flex; gap: 1.2rem; align-items:center; }
.route-sheet__stopImg{
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 999px;
  border: 2px solid var(--accent-yellow);
  overflow:hidden;
  flex: 0 0 auto;
}
.route-sheet__stopImg img{ width:100%; height:100%; object-fit:cover; }

.route-sheet__name{ font-family: var(--font-game); font-size: 2.0rem; margin:0; }
.route-sheet__meta{ margin-top: .6rem; color: var(--metal-light); font-weight: 900; font-size: 1.1rem; display:flex; gap: 1.0rem; align-items:center; }

.route-sheet__actions{ display:flex; gap: 1.0rem; align-items:center; margin-top: 1.4rem; }
.route-sheet__actions .btn-yellow{ flex: 1.8; height: 5.4rem; }
.route-sheet__actions .icon-btn{ flex: 1; height: 5.0rem; border-radius: 1.8rem; }

/* Panel de paradas (overlay) */
.route-panel{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  top: 0;
  background: rgba(0,0,0,.25);
  z-index: 60;
  display:none;
}
.route-panel.is-open{ display:block; }
.route-panel__sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height: 72dvh;
  background: var(--game-bg);
  border-top-left-radius: 3.2rem;
  border-top-right-radius: 3.2rem;
  box-shadow: 0 -20px 40px rgba(0,0,0,.18);
  padding: 1.6rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.route-panel__handle{
  width: 5.8rem;
  height: .6rem;
  border-radius: 999px;
  background: rgba(47,54,64,.18);
  margin: 0 auto 1.4rem;
}
.route-panel__head{ display:flex; justify-content:space-between; align-items:center; gap: 1.0rem; }
.route-panel__head .h2{ margin:0; font-size: 1.6rem; }
.route-panel__list{ margin-top: 1.2rem; overflow:auto; padding-bottom: 1.2rem; }

/* Estado de paradas */
.item.is-done{
  opacity: 1;
  background: rgba(68,189,50,.10);
  border: 1px solid rgba(68,189,50,.28);
}
body.theme-dark .item.is-done{
  background: rgba(68,189,50,.14);
  border: 1px solid rgba(68,189,50,.22);
}
.item.is-done .title,
.item.is-done .stop-name{ text-decoration: line-through; opacity: .88; }

.item.is-skipped{
  opacity: .92;
  background: rgba(251,197,49,.10);
  border: 1px solid rgba(251,197,49,.28);
  filter: grayscale(55%);
}
body.theme-dark .item.is-skipped{
  background: rgba(251,197,49,.12);
  border: 1px solid rgba(251,197,49,.22);
}


/* Detalle de parada */
.stop-hero{
  position: relative;
  height: 32rem;
  border-bottom-left-radius: 3.2rem;
  border-bottom-right-radius: 3.2rem;
  overflow:hidden;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.stop-hero img{ width:100%; height:100%; object-fit:cover; }
.stop-hero__shade{ position:absolute; inset:0; background: linear-gradient(to top, rgba(47,54,64,.82), rgba(47,54,64,.18), transparent); }
.stop-hero__actions{ position:absolute; top: 1.6rem; left: 1.6rem; right: 1.6rem; display:flex; justify-content:space-between; }
.stop-hero__actions .icon-btn{ border-radius: 999px; width: 4.2rem; height: 4.2rem; }

.stop-detail{
  padding: 0 0 2.4rem;
}
.stop-detail .container{ transform: translateY(-6.0rem); }

/* Foto de parada en cards antiguos */
.stop-photo{ width:100%; border-radius: 2.6rem; border: var(--border); box-shadow: var(--shadow-soft); }

/* Map box genérico */
.mapbox{ width:100%; height: 44rem; border-radius: 3.2rem; overflow:hidden; border: var(--border); background:#e9edf2; box-shadow: var(--shadow-soft); }

/* ===== Mapa a pantalla completa ===== */
body.is-map-max{ overflow: hidden; }

/* Ocultar el resto del contenido cuando el mapa está maximizado */
body.is-map-max .route-stack > :not(.route-map-card){ display:none !important; }

.route-map-card{ position: relative; }

.route-map-card.is-max{
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
}

.route-map-card.is-max .mapbox{
  flex: 1;
  height: auto;
  border-radius: 2.4rem;
}

.map-title-actions{ display:flex; align-items:center; gap: 1.0rem; }
.map-max-actions{ display:none; align-items:center; gap: .8rem; }
.route-map-card.is-max .map-max-actions{ display:flex; }

/* Botones compactos en el header del mapa maximizado */
.route-map-card.is-max .btn-map-next,
.route-map-card.is-max .btn-map-done,
.route-map-card.is-max .btn-map-skip{
  padding: 1.0rem 1.2rem;
  border-radius: 1.6rem;
}

/* "Saltar" con estilo tipo "Hecho" (misma presencia, distinto color) */
.route-map-card.is-max .btn-map-skip{
  background: linear-gradient(180deg, #ff6b6b 0%, #e84118 100%);
  color: #fff;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 4px 0 rgba(141,24,10,.85), 0 10px 18px rgba(0,0,0,.12);
  font-family: var(--font-game);
  letter-spacing: .03em;
}
.route-map-card.is-max .btn-map-skip:active{
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(141,24,10,.85), inset 0 2px 6px rgba(0,0,0,.25);
}

/* Animación pulse (scroll al siguiente) */
.pulse{ outline: 3px solid rgba(0,168,255,.55); box-shadow: 0 0 0 .6rem rgba(0,168,255,.15); transition: box-shadow .2s ease; }