/* MEXVACAY Shuttles — reserva de asiento compartido.
   Tokens y sistema glass heredados de concierge; el resto es propio de este flujo,
   que es móvil primero: los invitados reservan desde el teléfono. */

:root {
  /* Marca MEXVACAY */
  --pink: #ec1e79;
  --cyan: #29b6e8;
  --blue: #21409a;
  --orange: #f7a81b;
  --green: #3bb54a;
  /* Sistema glass */
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --bg: #f5f5f7;
  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .82);
  --hairline: rgba(0, 0, 0, .07);
  --shadow: 0 8px 32px rgba(31, 38, 135, .1);
  --blur: saturate(180%) blur(22px);
  --ok: #2e7d52;
  --warn: #b26a00;
  --err: #c0392b;
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;           /* espacio para la barra de acción fija */
}

body::before, body::after {
  content: '';
  position: fixed;
  width: 55vw; height: 55vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .2;
  z-index: -1;
  pointer-events: none;
}
body::before { background: var(--cyan); top: -18vw; left: -12vw; }
body::after { background: var(--pink); bottom: -22vw; right: -14vw; }

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }

a { color: var(--blue); }
.muted { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.hidden { display: none !important; }
.center { text-align: center; }

.picado {
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='26' viewBox='0 0 180 26'%3E%3Cg fill='%23f7a81b'%3E%3Ccircle cx='22' cy='6' r='4'/%3E%3Ccircle cx='22' cy='20' r='4'/%3E%3Ccircle cx='15' cy='13' r='4'/%3E%3Ccircle cx='29' cy='13' r='4'/%3E%3C/g%3E%3Ccircle cx='22' cy='13' r='3.2' fill='%23ec1e79'/%3E%3Cpath d='M62 8 c-3-5-10-2-8 3 1.5 3.5 8 8 8 8 s6.5-4.5 8-8 c2-5-5-8-8-3z' fill='%23ec1e79'/%3E%3Crect x='96' y='7' width='12' height='12' transform='rotate(45 102 13)' fill='%2329b6e8'/%3E%3Cg fill='%233bb54a'%3E%3Cellipse cx='138' cy='13' rx='7' ry='3.4' transform='rotate(-35 138 13)'/%3E%3Cellipse cx='152' cy='13' rx='7' ry='3.4' transform='rotate(35 152 13)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* ===== Encabezado ===== */

header.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  padding: 11px 18px;
  display: flex; align-items: center; gap: 12px;
}
header.topbar .logo-img { height: 26px; display: block; }
header.topbar .ev { margin-left: auto; text-align: right; line-height: 1.25; }
header.topbar .ev b { font-size: 13.5px; display: block; }
header.topbar .ev span { font-size: 11.5px; color: var(--muted); }

button.back {
  background: none; border: none; cursor: pointer;
  color: var(--blue); font-size: 15px; padding: 4px 6px 4px 0;
}

main { max-width: 620px; margin: 0 auto; padding: 20px 18px 0; }

/* ===== Piezas base ===== */

.card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 14px;
}

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; font-size: 16px;   /* 16px evita el zoom en iOS */
  border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(41, 182, 232, .18);
}

/* Aplica a <button> y a <a class="btn">, por eso no va calificado por etiqueta. */
.btn {
  background: var(--blue); color: #fff; border: none;
  padding: 13px 22px; border-radius: 999px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: filter .15s, transform .15s;
  font-family: inherit; text-decoration: none; display: inline-block;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn.accent { background: var(--pink); color: #fff; }
.btn.ghost { background: rgba(0, 0, 0, .05); color: var(--ink); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.msg { padding: 11px 14px; border-radius: 12px; margin: 12px 0; font-size: 14px; }
.msg a.btn { display: inline-block; margin-top: 10px; text-decoration: none; }
.btn.small { padding: 9px 16px; font-size: 13.5px; }
.msg.ok  { background: rgba(59, 181, 74, .14); color: var(--ok); }
.msg.err { background: rgba(192, 57, 43, .12); color: var(--err); }
.msg.info{ background: rgba(41, 182, 232, .14); color: #14607e; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.badge.ok    { background: rgba(59, 181, 74, .18); color: var(--ok); }
.badge.warn  { background: rgba(247, 168, 27, .2); color: var(--warn); }
.badge.risk  { background: rgba(192, 57, 43, .13); color: var(--err); }

/* ===== Portada: código del evento ===== */

.hero { text-align: center; padding: 34px 0 18px; }
.hero .logo-img { height: 46px; margin: 0 auto 22px; display: block; }
.hero h1 { margin-bottom: 8px; }
.hero p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.code-form { max-width: 340px; margin: 22px auto 0; }
.code-form input {
  text-align: center; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600;
}

/* ===== Selector de día ===== */

.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.days button {
  flex: 0 0 auto; border: 1px solid var(--hairline); background: rgba(255, 255, 255, .7);
  padding: 9px 15px; border-radius: 999px; cursor: pointer; font-size: 13.5px;
  font-family: inherit; color: var(--ink); white-space: nowrap;
}
.days button.active {
  background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 600;
}

/* ===== Tarjeta de salida ===== */

.dep {
  display: block; width: 100%; text-align: left; font-family: inherit;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.dep:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(31, 38, 135, .15); }
.dep-head { display: flex; align-items: baseline; gap: 10px; }
.dep-time {
  font-size: 25px; font-weight: 700; letter-spacing: -.03em;
  white-space: nowrap; flex: 0 0 auto;
}
.dep-veh { font-size: 13px; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.dep-price { margin-left: auto; text-align: right; flex: 0 0 auto; }
.dep-price b { font-size: 19px; color: var(--pink); white-space: nowrap; }
.dep-price span { display: block; font-size: 11.5px; color: var(--muted); }
.dep-route { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* Barra de llenado */
.fill { margin-top: 13px; }
.fill-bar {
  height: 7px; border-radius: 999px; background: rgba(0, 0, 0, .07); overflow: hidden;
}
.fill-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width .4s ease;
}
.fill-bar i.low { background: linear-gradient(90deg, var(--orange), var(--pink)); }
.fill-note {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--muted); margin-top: 6px;
}

/* ===== Mapa de asientos ===== */

.van {
  --seat: 46px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 26px;
  padding: 14px 12px 18px;
  max-width: 300px; margin: 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow);
}
.van-front {
  text-align: center; font-size: 10.5px; letter-spacing: .16em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
}
.van-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }

.cell { width: var(--seat); height: var(--seat); flex: 0 0 auto; }
.cell.aisle { width: 16px; }

.seat {
  width: var(--seat); height: var(--seat);
  border-radius: 12px 12px 7px 7px;
  border: 1.5px solid rgba(0, 0, 0, .1);
  background: #fff;
  cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background .15s, border-color .15s;
  position: relative;
}
.seat:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--cyan); }
.seat.taken {
  background: rgba(0, 0, 0, .09); color: rgba(0, 0, 0, .28);
  border-color: transparent; cursor: not-allowed;
}
.seat.held {
  background: rgba(247, 168, 27, .18); color: var(--warn);
  border-color: rgba(247, 168, 27, .5); cursor: not-allowed;
}
.seat.selected {
  background: var(--pink); color: #fff; border-color: var(--pink);
  box-shadow: 0 4px 14px rgba(236, 30, 121, .38);
}
.seat .tag {
  position: absolute; top: -5px; right: -4px;
  font-size: 9px; background: var(--cyan); color: #fff;
  border-radius: 999px; padding: 1px 5px; font-weight: 700;
}
.seat.selected .tag { background: var(--blue); }

.driver {
  width: var(--seat); height: var(--seat);
  border-radius: 12px; background: rgba(33, 64, 154, .08);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}

.legend {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; font-size: 12px; color: var(--muted);
}
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i {
  width: 15px; height: 15px; border-radius: 5px; display: block;
  border: 1.5px solid rgba(0, 0, 0, .1); background: #fff;
}
.legend i.taken { background: rgba(0, 0, 0, .09); border-color: transparent; }
.legend i.held  { background: rgba(247, 168, 27, .18); border-color: rgba(247, 168, 27, .5); }
.legend i.sel   { background: var(--pink); border-color: var(--pink); }

/* ===== Escalera de precios ===== */

.ladder { margin-top: 6px; }
.ladder-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 11px; font-size: 14px;
  transition: background .15s;
}
.ladder-row + .ladder-row { margin-top: 2px; }
.ladder-row.in  { background: rgba(59, 181, 74, .1); }
.ladder-row.out { opacity: .42; }
.ladder-row .n { color: var(--muted); font-size: 13px; }
.ladder-row .p { margin-left: auto; font-weight: 700; }
.ladder-row.now {
  background: rgba(41, 182, 232, .16);
  box-shadow: inset 0 0 0 1.5px rgba(41, 182, 232, .45);
}

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 0; border: none;
  border-radius: 999px; background: rgba(0, 0, 0, .1);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); border: 3px solid #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(236, 30, 121, .45);
}
input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink); border: 3px solid #fff; cursor: pointer;
}

/* Desglose del cobro */
.calc { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; }
.calc-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 5px 0;
}
.calc-row.total { font-size: 17px; font-weight: 700; padding-top: 10px; }
.calc-row.total .v { color: var(--pink); }
.calc-row.back .v { color: var(--ok); }
.calc-row.risk .v { color: var(--warn); font-weight: 600; }

/* ===== Barra de acción fija ===== */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-top: 1px solid var(--hairline);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
}
.actionbar .sum { line-height: 1.3; min-width: 0; }
.actionbar .sum b { font-size: 17px; display: block; }
.actionbar .sum span { font-size: 12px; color: var(--muted); }
.actionbar .btn { margin-left: auto; flex: 0 0 auto; }

.timer { font-size: 12.5px; color: var(--warn); font-weight: 600; }

@media (max-width: 380px) {
  .van { --seat: 40px; }
  main { padding: 16px 12px 0; }
}