/* =========================================================================
   PACIFIC RESERVE · Tablet vehicular (kiosko horizontal en el respaldo)
   Pensada para leerse a ~60-80 cm: tamaños en vh/vw con mínimos legibles.
   ========================================================================= */

[hidden] { display: none !important; }

html, body { height: 100%; }

body.tablet {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(198, 166, 107, 0.10), transparent 55%),
    var(--azul-profundo);
}

.svg-defs { position: absolute; }

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: filter 0.6s ease;
}
body.night-dimmed .app { filter: brightness(70%) contrast(96%); }

/* ---------- Barra superior ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.4vh 2.2vw;
  background: #0D1118;
  border-bottom: 1px solid rgba(198, 166, 107, 0.35);
}
.brand { display: flex; align-items: center; gap: 0.9rem; cursor: default; }
.medallion { width: clamp(40px, 6.5vh, 64px); height: auto; flex-shrink: 0; }
.brand-main { font-size: clamp(18px, 3vh, 30px); }
.brand-sub { font-size: clamp(14px, 2.3vh, 22px); }
.brand-chip {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid rgba(198, 166, 107, 0.35);
  border-radius: 6px;
  background: var(--grafito-card);
  color: var(--champagne);
  font-size: clamp(11px, 1.5vh, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.clock {
  font-size: clamp(20px, 3.4vh, 34px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  width: clamp(38px, 5.5vh, 52px);
  height: clamp(38px, 5.5vh, 52px);
  border-radius: 10px;
  border: 1px solid #2D3748;
  background: var(--grafito-card);
  color: var(--blanco-hueso);
  font-size: clamp(16px, 2.4vh, 22px);
}

.conn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: clamp(11px, 1.5vh, 14px); font-weight: 700; color: #9AA3B2; }
.conn i { width: 10px; height: 10px; border-radius: 50%; background: #9AA3B2; }
.conn-ok i { background: var(--verde-luminoso); }
.conn-ok { color: var(--verde-luminoso); }
.conn-offline i, .conn-connecting i { background: #E0A43A; }
.conn-error i { background: #D9534F; }
.conn-error { color: #E07A76; }
.conn-demo i { background: var(--champagne); }
.conn-demo { color: var(--champagne); }

/* ---------- Vistas ---------- */
.view { min-height: 0; }

/* ---------- Modo espera ---------- */
.standby {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2vw;
  padding: 2.4vh 2.2vw;
}
.card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 3vh 2.4vw;
  border-radius: 24px;
  background: var(--azul-noche);
  border: 1px solid rgba(198, 166, 107, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.eyebrow {
  font-size: clamp(11px, 1.7vh, 16px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-luminoso);
}
.card-title {
  margin: 0.5vh 0 0.6vh;
  font-size: clamp(22px, 4.2vh, 42px);
  font-weight: 800;
  line-height: 1.1;
}
.card-text { margin: 0; color: #C9C4B8; font-size: clamp(14px, 2.3vh, 22px); }
.card-text strong { color: var(--blanco-hueso); }

.tip-card { align-items: center; text-align: center; }
.tip-qr {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.6vh 0 1.2vh;
}
/* Recorta el arte de Yape para mostrar el QR, "Paga aquí con Yape" y el nombre del titular */
.tip-qr img {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 80%;
  border-radius: 20px;
  border: 3px solid var(--champagne);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
/* Montos de propina */
.tip-amounts {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6vw;
  margin-top: 1.8vh;
}
.tip-btn, .step-btn {
  border-radius: 12px;
  border: 1px solid #2D3748;
  background: var(--azul-profundo);
  color: var(--blanco-hueso);
  font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2vh;
  padding: 1.2vh 0.3vw;
}
.tip-btn b { font-size: clamp(16px, 2.8vh, 26px); font-weight: 800; }
.tip-btn small { font-size: clamp(11px, 1.6vh, 15px); font-weight: 700; color: var(--verde-luminoso); white-space: nowrap; }
.tip-btn.active { background: var(--champagne); border-color: var(--champagne); color: var(--azul-noche); }
.tip-btn.active small { color: var(--azul-noche); opacity: 0.8; }

.tip-custom {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 0.5vw;
  margin-top: 1vh;
}
.step-btn {
  min-width: clamp(44px, 6.5vh, 60px);
  height: clamp(44px, 6.5vh, 60px);
  font-size: clamp(15px, 2.4vh, 22px);
  font-weight: 800;
  color: var(--champagne);
  border-color: rgba(198, 166, 107, 0.45);
}
.step-btn:active, .tip-btn:active { transform: scale(0.97); }
.tip-custom-val { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tip-custom-val b { font-size: clamp(20px, 3.4vh, 32px); font-weight: 800; color: var(--champagne); }
.tip-custom-val small { font-size: clamp(11px, 1.7vh, 16px); font-weight: 700; color: var(--verde-luminoso); }

.tip-chosen { font-size: clamp(13px, 2vh, 19px); color: #C9C4B8; }
.tip-chosen b { color: var(--champagne); font-size: 1.15em; }
.tip-chosen span { color: var(--verde-luminoso); font-weight: 700; }

.web-card { justify-content: space-between; }
.headline {
  margin: 0.8vh 0 0;
  font-size: clamp(28px, 6vh, 60px);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F1EA 55%, #C6A66B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.web-row {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4vw;
  margin: 2vh 0;
}
.services { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8vh; }
.services li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(14px, 2.3vh, 22px);
  font-weight: 700;
}
.services li span {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--grafito-card);
  color: var(--champagne);
}
.qr-arrow { width: clamp(48px, 5vw, 100px); flex-shrink: 0; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }

.web-qr-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding: 1.6vh;
  border-radius: 20px;
  background: #FFFFFF;
  border: 3px solid var(--champagne);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
.web-qr { width: min(34vh, 20vw); aspect-ratio: 1 / 1; }
.web-qr svg { width: 100%; height: 100%; display: block; }
.web-qr.qr-fallback { display: flex; align-items: center; justify-content: center; color: #0A0D12; font-weight: 800; text-align: center; }
.web-qr-box span { color: #151A23; font-weight: 800; font-size: clamp(12px, 1.8vh, 17px); text-transform: uppercase; letter-spacing: 0.06em; }
.web-url { font-size: clamp(16px, 2.8vh, 28px); font-weight: 800; color: var(--champagne); letter-spacing: 0.03em; }

/* ---------- Modo carrera ---------- */
.ride {
  display: grid;
  grid-template-columns: 1fr clamp(320px, 33vw, 480px);
}
.map-wrap { position: relative; min-height: 0; background: #0A0D12; }
.ride-map { position: absolute; inset: 0; pointer-events: none; }
.map-msg {
  position: absolute;
  inset: auto 1.5rem 1.5rem 1.5rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(13, 17, 24, 0.92);
  border: 1px solid #D9534F;
  color: #F4F1EA;
  font-size: clamp(12px, 1.8vh, 16px);
  font-weight: 600;
}
.traffic-legend {
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(13, 17, 24, 0.85);
  border: 1px solid rgba(198, 166, 107, 0.35);
  font-size: clamp(11px, 1.5vh, 14px);
  font-weight: 700;
}
.traffic-legend i { width: 18px; height: 6px; border-radius: 3px; }
.traffic-legend span { margin-right: 0.3rem; }
.t-ok { background: #63D668; } .t-mid { background: #FF974D; } .t-bad { background: #F23C32; } .t-stop { background: #811F1F; }

.ride-panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2.4vh;
  padding: 3vh 2vw;
  background: var(--azul-noche);
  border-left: 1px solid rgba(198, 166, 107, 0.35);
}
.ride-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: clamp(11px, 1.6vh, 15px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pill-gold { background: var(--champagne); color: var(--azul-noche); }
.pill-green { background: rgba(83, 118, 109, 0.4); border: 1px solid var(--verde-luminoso); color: var(--verde-luminoso); }
.greet { font-size: clamp(14px, 2.2vh, 20px); color: #C9C4B8; font-weight: 600; }
.label {
  font-size: clamp(11px, 1.6vh, 15px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9AA3B2;
  margin-bottom: 0.6vh;
}
.dest {
  font-size: clamp(22px, 4vh, 40px);
  font-weight: 800;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sub { margin-top: 0.8vh; color: #C9C4B8; font-size: clamp(12px, 1.9vh, 18px); }
.sub span { color: var(--blanco-hueso); font-weight: 700; }
.eta-block {
  padding: 2vh 1.4vw;
  border-radius: 16px;
  background: var(--grafito-card);
  border: 1px solid rgba(244, 241, 234, 0.09);
}
.eta {
  white-space: nowrap;
  font-size: clamp(34px, min(8vh, 4.6vw), 80px);
  font-weight: 800;
  line-height: 1;
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
}
.eta-sub { margin-top: 1vh; font-size: clamp(16px, 2.8vh, 28px); font-weight: 700; font-variant-numeric: tabular-nums; }
.progress { height: 10px; border-radius: 999px; background: #0D1118; overflow: hidden; }
#ride-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--verde-luminoso), var(--champagne)); transition: width 1s ease; }
.progress-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8vh;
  font-size: clamp(12px, 1.8vh, 17px);
  color: #C9C4B8;
  font-variant-numeric: tabular-nums;
}
.from {
  margin-top: auto;
  font-size: clamp(12px, 1.9vh, 18px);
  color: #C9C4B8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.from span { color: var(--blanco-hueso); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.dot-origin { background: var(--verde-luminoso); border: 2px solid #0A0D12; }

/* ---------- Pie ---------- */
.footbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1.1vh 2.2vw;
  background: #0D1118;
  border-top: 1px solid rgba(198, 166, 107, 0.2);
  font-size: clamp(12px, 1.8vh, 17px);
  color: #C9C4B8;
}
.footbar strong { color: var(--blanco-hueso); }
.footbar-web { color: var(--champagne); font-weight: 700; }

/* ---------- Superposiciones (configuración / menú técnico) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}
.sheet {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem;
  border-radius: 16px;
  background: var(--azul-noche);
  border: 2px solid var(--champagne);
}
.sheet h3 { margin: 0; font-size: 1.3rem; }
.sheet p { margin: 0; color: #C9C4B8; font-size: 0.9rem; }
.sheet-brand { font-size: 0.85rem; }
.sheet input {
  user-select: text;
  -webkit-user-select: text;
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  border: 1px solid #2D3748;
  background: #0D1118;
  color: var(--blanco-hueso);
  font: inherit;
}
.sheet input:focus { outline: none; border-color: var(--champagne); }
.btn-gold, .btn-dark {
  padding: 0.85rem;
  border-radius: 8px;
  border: 0;
  font: inherit;
  font-weight: 800;
}
.btn-gold { background: var(--champagne); color: var(--azul-noche); }
.btn-gold:disabled { opacity: 0.6; }
.btn-dark { background: var(--grafito-card); color: var(--blanco-hueso); border: 1px solid #2D3748; }
.sheet-error { color: #E07A76 !important; font-weight: 700; }
.sheet-info { font-family: ui-monospace, monospace; font-size: 0.8rem !important; word-break: break-all; }

/* ---------- Pantallas verticales o pequeñas (pruebas en teléfono) ---------- */
@media (max-width: 900px) and (orientation: portrait) {
  body.tablet { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .standby { grid-template-columns: 1fr; padding: 16px; }
  .tip-qr img { height: auto; width: min(100%, 360px); }
  .web-row { flex-direction: column; }
  .qr-arrow { transform: rotate(90deg); animation: none; }
  .web-qr { width: min(70vw, 300px); }
  .ride { grid-template-columns: 1fr; grid-template-rows: 55vh auto; }
  .ride-panel { border-left: 0; border-top: 1px solid rgba(198, 166, 107, 0.35); padding: 16px; }
  .topbar, .footbar { padding-left: 16px; padding-right: 16px; }
}