/* NEXRIDE public landing. Mobile first, no external font or image, so it paints fast
   on a phone arriving from an ad. */
:root{
  --ink:#06101d; --card:#0d1b2a; --line:#28415b; --text:#edf5ff;
  --muted:#9fb2c8; --accent:#67f1b4; --accent-ink:#06101d;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--text);
  background-image:radial-gradient(120% 70% at 12% -8%,#1c4260 0,#071522 46%,#040a12 100%);
  background-repeat:no-repeat;-webkit-font-smoothing:antialiased;
}
main{width:min(100%,620px);margin:0 auto;padding:0 18px calc(28px + env(safe-area-inset-bottom))}

/* bar ------------------------------------------------------------------ */
.bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  width:min(100%,620px);margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  background:#06101dd9;backdrop-filter:blur(10px);
}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.16em;font-size:15px}
.wordmark i{
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:18px;font-weight:900;
}
.langSwitch{margin-left:auto;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:#10243a;color:var(--muted);font:inherit;font-size:11.5px;font-weight:900;letter-spacing:.1em;cursor:pointer}
.langSwitch:hover{color:var(--accent);border-color:#67f1b455}
.barCta{
  padding:9px 15px;border-radius:99px;text-decoration:none;font-size:12px;
  font-weight:900;letter-spacing:.08em;color:var(--accent);border:1px solid #67f1b455;background:#67f1b40f;
}

/* hero ----------------------------------------------------------------- */
.eyebrow{margin:0 0 12px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1.5}
.hero{padding:14px 0 6px}
.hero h1{margin:0 0 14px;font-size:clamp(36px,10.5vw,54px);line-height:1.02;letter-spacing:-.045em;font-weight:900}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{margin:0 0 22px;color:#c2d3e4;font-size:16.5px;line-height:1.6}
.lede.small{font-size:14.5px;margin-bottom:16px}

/* minmax(0,1fr) y no '1fr' a secas: en un grid los hijos no bajan de su min-content,
   asi que bastaba UNA fila ancha —la del punto exacto— para estirar la columna entera y
   sacar toda la tarjeta de la pantalla. El sintoma se veia en cualquier telefono como la
   pagina corriendose de lado, y no en la fila culpable sino en todas. */
.quickStart{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px;border-radius:22px;background:#0d1b2aee;border:1px solid var(--line);box-shadow:0 22px 60px #0007}
.field{display:block}
.field span{display:block;margin-bottom:6px;color:var(--muted);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.field input{
  width:100%;padding:14px;border-radius:14px;border:1px solid #2b4661;background:#0a1626;
  color:var(--text);font:inherit;font-size:16px;
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #67f1b422}

/* Provider-backed suggestions. Same markup and same behaviour as /reserve, because a
   suggestion has to mean the same thing on both screens. */
.suggestions{
  margin:-4px 0 0;border-radius:14px;border:1px solid #2b4661;background:#0a1626;
  overflow:hidden;max-height:252px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.suggestions.hidden{display:none}
.suggestion{
  display:block;width:100%;min-height:52px;padding:13px 14px;border:0;
  border-bottom:1px solid #16263a;background:transparent;color:var(--text);
  font:inherit;font-size:14px;line-height:1.35;text-align:left;cursor:pointer;
}
.suggestion:last-child{border-bottom:0}
.suggestion:hover,.suggestion:focus,.suggestion[aria-selected="true"]{background:#10243a;color:var(--accent);outline:none}
.suggestionEmpty{margin:0;padding:13px 14px;color:var(--muted);font-size:13px}
.resolved{margin:-4px 0 0;color:var(--accent);font-size:12.5px;font-weight:700;line-height:1.4;min-height:17px}
.cta{
  display:block;width:100%;margin:2px 0 0;padding:17px;border:0;border-radius:16px;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-size:15px;font-weight:900;
  letter-spacing:.08em;text-align:center;text-decoration:none;cursor:pointer;
}
.cta:active{transform:translateY(1px)}
.micro{margin:0;text-align:center;color:var(--muted);font-size:12px}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.badges li{padding:8px 12px;border-radius:99px;background:#10243a;border:1px solid var(--line);color:#a9bed2;font-size:12px}

/* blocks --------------------------------------------------------------- */
.block{padding:34px 0 6px}
.block h2{margin:0 0 16px;font-size:24px;letter-spacing:-.02em;font-weight:900}
.steps{margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{
  position:relative;counter-increment:step;padding:0 0 20px 46px;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:10px;background:#10243a;border:1px solid var(--line);
  color:var(--accent);font-size:13px;font-weight:900;
}
.steps li::after{content:"";position:absolute;left:15px;top:32px;bottom:4px;width:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps b{display:block;font-size:15.5px;margin-bottom:3px}
.steps span{color:var(--muted);font-size:14px;line-height:1.55}

.corridor{display:flex;align-items:center;gap:12px;padding:18px;border-radius:20px;background:#0d1b2aee;border:1px solid var(--line)}
.corridor>div{flex:1;min-width:0}
.corridor .side{margin:0 0 8px;color:var(--accent);font-size:10.5px;font-weight:900;letter-spacing:.12em}
.corridor ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.corridor li{color:#cfe0f0;font-size:13.5px}
.corridor .arrow{flex:0 0 auto;color:var(--muted);font-size:20px}

.trust{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.trust li{padding-left:22px;position:relative}
.trust li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.trust b{display:block;font-size:15px;margin-bottom:2px}
.trust span{color:var(--muted);font-size:14px;line-height:1.55}

.closing{margin:38px 0 0;padding:26px 20px;border-radius:22px;background:#10243a;border:1px solid var(--line);text-align:center}
.closing h2{margin:0 0 8px;font-size:23px;font-weight:900;letter-spacing:-.02em}
.closing .lede{margin-bottom:20px;font-size:15px}

footer{width:min(100%,620px);margin:0 auto;padding:28px 18px calc(34px + env(safe-area-inset-bottom));color:#7d92a9}
footer p{margin:0 0 8px;font-size:12px;letter-spacing:.06em}
footer .fine{font-size:11px;line-height:1.6;letter-spacing:0}

@media (min-width:620px){
  .hero{padding-top:24px}
  .quickStart{padding:22px}
  .block{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---- El precio en el hero ---------------------------------------------------
   Mismo lenguaje visual que la banda de /reserve: el numero manda, la promesa
   va al lado y el tachado solo aparece si el servidor manda una promocion con
   su fecha. Nunca se dibuja un "antes" que la cotizacion no traiga. */
.heroPrice{display:flex;align-items:center;gap:14px;margin:4px 0 2px;padding:13px 15px;
  border-radius:14px;border:1px solid #2c5f4a;background:#0b1c17}
.heroPriceValue{font-size:28px;font-weight:800;color:#67f1b4;line-height:1;
  font-variant-numeric:tabular-nums;flex:none}
.heroPriceNote{display:flex;flex-direction:column;gap:2px;min-width:0}
.heroPriceWas{font-size:12.5px;color:#7d90a6;text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.heroPriceNote b{font-size:12.5px;color:#eaf2ff;font-weight:700;line-height:1.3}
.heroPriceNote b.promo{color:#ffb45f}
.heroPriceNote i{font-size:11.5px;color:#8fb6a5;font-style:normal;line-height:1.35}


/* ---- La sugerencia, en dos alturas ------------------------------------------
   Estos estilos estaban solo en reserve.css. Sin ellos los dos trozos salen
   pegados —"Appian WayEl Sobrante", "RobertvilleLiege"— y la lista se ve rota.
   La pagina principal y la de reserva muestran la misma lista: tienen que
   verse igual. */
.suggestion{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left}
.suggestionName{color:#eaf2ff;font-size:14px;font-weight:700;line-height:1.3}
.suggestionWhere{color:#8fa4bb;font-size:12px;line-height:1.35}

/* La fila de la ubicacion actual. Va DENTRO de la lista, no como un boton
   aparte: es una opcion mas de donde salir, y el permiso se pide al tocarla. */
.suggestion.useLocation{flex-direction:row;align-items:center;gap:11px;background:#101d2c}
.useLocationIcon{width:28px;height:28px;border-radius:50%;background:#16273a;flex:none;
  display:grid;place-items:center;color:var(--accent);font-size:14px}
.suggestion.useLocation .suggestionName{color:var(--accent)}
.useLocationText{display:flex;flex-direction:column;gap:1px;min-width:0}


/* La regla que faltaba. `.hidden` existia solo para .suggestions, asi que la caja del
   precio se declaraba oculta y se pintaba igual: salia el marco verde con la frase y
   sin numero. */
.heroPrice.hidden{display:none}
.suggestion.seeded{flex-direction:row;align-items:center;gap:11px}

/* Las pastillas y el par de dia y hora. */
.modes{display:flex;gap:8px;margin-bottom:4px}
.mode{flex:1;border-radius:999px;padding:10px;border:1px solid #2b4661;background:transparent;
  color:var(--muted);font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.mode.on{background:var(--accent);color:#04121c;border-color:var(--accent)}
.when{display:flex;gap:10px}
.when.hidden{display:none}
.field.half{flex:1;min-width:0}

/* La fila de volver y la de omitir se distinguen del resto sin gritar. */
.suggestion.back{background:#0d1a28}
.suggestion.back .suggestionName{color:#8fa4bb}
.suggestion.skip .suggestionName{color:#8fa4bb;font-weight:600}
.suggestion.skip .useLocationIcon{color:#7d90a6}


/* ---- El correo, justo despues del precio ------------------------------------ */
.capture{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:14px;
  border-top:1px solid #1e2b3d}
.capture.hidden{display:none}
.captureTitle{margin:0;font-size:16px;font-weight:700;color:#eaf2ff;line-height:1.3}
.captureWhy{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
#leadEmail{width:100%;background:#0a1626;border:1px solid #2b4661;border-radius:12px;
  padding:14px;color:#eaf2ff;font:inherit;font-size:15px}
#leadEmail:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #67f1b455}
.captureError{margin:0;font-size:12.5px;color:#ffb45f}
.captureError.hidden{display:none}
.captureConsent{display:flex;gap:9px;align-items:flex-start;font-size:12px;
  color:var(--muted);line-height:1.4}
.captureConsent input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--accent)}
.captureSkip{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  padding:6px;cursor:pointer;text-decoration:underline}

/* Codigo y "para otra persona". */
#leadCode{width:100%;background:#0a1626;border:1px solid #2b4661;border-radius:12px;
  padding:14px;color:#eaf2ff;font:inherit;font-size:22px;letter-spacing:.34em;text-align:center;
  font-variant-numeric:tabular-nums}
#leadCode:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #67f1b455}
.otherToggle{background:none;border:0;color:var(--accent);font:inherit;font-size:13.5px;
  padding:4px 0;text-align:left;cursor:pointer;text-decoration:underline}
.otherFields{display:flex;flex-direction:column;gap:9px}
.otherFields.hidden{display:none}
.otherFields input{width:100%;background:#0a1626;border:1px solid #2b4661;border-radius:12px;
  padding:13px;color:#eaf2ff;font:inherit;font-size:15px}
.otherFields input:focus{outline:none;border-color:var(--accent)}

/* La entrada a "tus viajes", solo para quien ya tiene. */
.barTrips{color:#a8bdd4;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-decoration:none;padding:9px 10px}
.barTrips.hidden{display:none}


/* ---- El punto exacto, dentro de la tarjeta ---------------------------------- */
.exact.hidden,.exactBody.hidden,.exactAccess.hidden{display:none}
/* Dos renglones, no uno. En una sola fila la direccion competia por el ancho con la
   etiqueta y el boton, y perdia: se cortaba con puntos suspensivos justo donde esta el
   ZIP. Con la direccion en su propio renglon cabe entera, y "Ajustar" sigue arriba a la
   derecha donde el pulgar ya lo buscaba. */
.exactToggle{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:4px 10px;background:#0a1626;
  border:1px solid #2b4661;border-radius:12px;padding:12px 14px;font:inherit;
  color:#eaf2ff;text-align:left;cursor:pointer}
.exactLabel{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7d90a6;
  grid-column:1;grid-row:1}
.exactValue{font-size:12.5px;color:#eaf2ff;grid-column:1/-1;grid-row:2;min-width:0;
  white-space:normal;overflow-wrap:anywhere}
.exactAction{font-size:12px;color:#67f1b4;font-weight:700;grid-column:2;grid-row:1;
  justify-self:end}
.exactBody{display:flex;flex-direction:column;gap:9px;margin-top:9px}
.exactMap{height:190px;border-radius:12px;overflow:hidden;border:1px solid #22364d;background:#0a1828}
.exactHint{margin:0;font-size:12px;color:#8fa4bb;line-height:1.4}
.exactAccess{margin:0;font-size:12px;line-height:1.4;color:#67f1b4}
.exactAccess.warn{color:#ffb45f;font-weight:700}
.exactBody input{width:100%;background:#0a1626;border:1px solid #2b4661;border-radius:11px;
  padding:12px;color:#eaf2ff;font:inherit;font-size:14px}
.exactBody input:focus{outline:none;border-color:#67f1b4}

/* ---- El pago ---------------------------------------------------------------- */
.payBox{background:#0a1626;border:1px solid #2b4661;border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px}
.payRow{margin:0;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:13px;color:#8fa4bb}
.payRow b{color:#eaf2ff;font-size:14px;text-align:right;word-break:break-word}
#payAmount{color:#67f1b4;font-size:18px;font-variant-numeric:tabular-nums}

/* El boton apagado tiene que verse apagado, no solo estarlo. */
.cta[disabled]{opacity:.42;cursor:not-allowed}
.captureConsent{cursor:pointer}

/* ---- Volver a una reserva a medias, y copiar sus datos --------------------- */

/* El banner es lo primero que ve quien vuelve. Verde no: verde dice "listo", y esto
   dice "falta algo tuyo". Ambar es exactamente lo que significa. */
.pendiente{display:grid;gap:8px;padding:14px 16px;border-radius:16px;
  background:#2a1e08;border:1px solid #6b4a12}
.pendiente.hidden{display:none}
.pendienteTitulo{margin:0;font-size:12px;letter-spacing:.09em;color:#ffb45f;font-weight:800}
.pendienteDetalle{margin:0;font-size:13px;color:#eaf2ff;line-height:1.4}

/* El boton de copiar vive al final de su fila y no empuja al dato: min-width 0 en el
   valor, y el boton con su ancho propio. */
.payRow{display:flex;align-items:center;gap:10px}
.payRow b{flex:1;min-width:0;overflow-wrap:anywhere}
.copiar{flex:none;font:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:6px 10px;border-radius:9px;border:1px solid #2b4661;background:#0a1626;
  color:#67f1b4;cursor:pointer}
.copiar.copiado{background:#0f2b1e;border-color:#1f6b4a;color:#8ef7c6}
.copiar.fallo{background:#2a1414;border-color:#6b2020;color:#ff9b9b}
.copiarTodo{width:100%;font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:11px;border-radius:12px;border:1px solid #2b4661;background:#11243a;
  color:#67f1b4;cursor:pointer;margin-top:2px}
.copiarTodo.copiado{background:#0f2b1e;border-color:#1f6b4a;color:#8ef7c6}
.copiarTodo.fallo{background:#2a1414;border-color:#6b2020;color:#ff9b9b}

/* La puerta de MIS VIAJES. */
.tripsField{display:block;margin:10px 0 0}
.tripsField span{display:block;margin-bottom:6px;color:var(--muted);font-size:12.5px;
  font-weight:700;letter-spacing:.02em}
.tripsField input{width:100%;padding:14px;border-radius:14px;border:1px solid #2b4661;
  background:#0a1626;color:var(--text);font:inherit;font-size:16px}

/* El paso del codigo llega oculto y se abre al pedirlo. En este proyecto .hidden se
   declara por componente a proposito —no hay una regla global— asi que un div nuevo que
   la use tiene que traer la suya, o nace visible. */
#loginCodeStep.hidden{display:none}

/* La barra superior en pantallas estrechas.
   Con MIS VIAJES siempre visible pasaron a ser cuatro elementos en 390px, y RESERVAR se
   salia por la derecha: 428px de contenido en una pantalla de 390. Lo que sobra ahi es
   el aire de las letras, no ninguno de los cuatro. */
@media (max-width:430px){
  .bar{gap:8px}
  .langSwitch{padding:7px 9px;letter-spacing:.04em}
  .barTrips{letter-spacing:.04em;font-size:11px}
  .barCta{padding:8px 11px;letter-spacing:.03em;font-size:11.5px}
}

/* Quien te esta llevando. Discreto pero presente: reservar con alguien sin saber con
   quien es justo lo que un enlace propio existe para evitar. */
.businessMark{margin:0;padding:9px 14px;border-radius:12px;background:#0f2b1e;
  border:1px solid #1f6b4a;color:#8ef7c6;font-size:12.5px;font-weight:700}
.businessMark.hidden{display:none}

/* ---------------------------------------------------------------- los otros productos

   Van despues del formulario a proposito. La apuesta del Modelo A es que el precio se ve
   antes de leer nada; estas tarjetas son para el que ya bajo, no para el que acaba de
   llegar. Reutilizan los mismos tokens que el resto de la pagina, asi que no hay una
   segunda paleta que mantener. */
.products .prodGrid{
  display:grid;gap:12px;
  /* minmax(0,1fr) y no 1fr: con 1fr una palabra larga dentro de la tarjeta ensancha la
     columna y saca la rejilla de la pantalla a 390px. Es el desbordamiento clasico. */
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:760px){
  .products .prodGrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.prodCard{
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:16px;display:flex;flex-direction:column;gap:8px;
}
.prodTag{
  font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:700;
}
.prodCard h3{margin:0;font-size:18px;line-height:1.2;}
.prodCard p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;}
.prodCard p b{color:var(--text);font-weight:600;}
.prodLink{
  margin-top:auto;color:var(--accent);text-decoration:none;font-weight:600;font-size:14px;
  /* 44px de alto minimo: es un enlace, pero se toca con el pulgar como un boton. */
  display:inline-flex;align-items:center;min-height:44px;
}
.prodLink:hover{text-decoration:underline;}

/* ------------------------------------------------------------------------ el pie

   La raiz pasa a ser esta pagina, asi que el pie es la unica puerta hacia /drivers,
   /fleets, /network, /business y las politicas. Un pie de dos lineas convertia la portada
   en un callejon sin salida. */
.foot{
  border-top:1px solid var(--line);margin-top:34px;padding:26px 18px 30px;
  display:grid;gap:22px;
}
.footCols{
  display:grid;gap:20px;grid-template-columns:minmax(0,1fr);
  max-width:980px;margin:0 auto;width:100%;
}
@media(min-width:640px){
  .footCols{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.footCols h2{
  margin:0 0 10px;font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:700;
}
.footCols ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.footCols a{
  color:var(--text);text-decoration:none;font-size:14px;
  display:inline-flex;align-items:center;min-height:44px;
}
.footCols a:hover{color:var(--accent);}
.footEnd{
  max-width:980px;margin:0 auto;width:100%;
  border-top:1px solid var(--line);padding-top:16px;
  display:grid;gap:3px;
}
.footEnd p{margin:0;font-size:12px;color:var(--muted);}
.footEnd .parent{color:var(--muted);opacity:.75;}

/* ------------------------------------------------------- el pulgar, en la portada

   Estos cuatro controles median entre 30 y 36px de alto. Se veian bien y se tocaban mal,
   y mientras la reserva vivia detras de un clic era un defecto menor de una pagina
   interior. Ahora esta pagina ES la portada: el conmutador de idioma, el enlace a mis
   viajes, el CTA de la barra y las pastillas AHORA/PROGRAMADO son de las primeras cosas
   que un pulgar busca, y AHORA/PROGRAMADO decide si el viaje es inmediato o programado
   —fallar ese toque manda a la pantalla equivocada.

   Se sube el AREA, no el aspecto: el relleno visual no cambia, crece la caja. Por eso va
   min-height con centrado flex y no padding, que si habria movido el diseno. */
.langSwitch,.barCta,.barTrips{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}
.mode{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
}


/* -------------------------------------------------------------- elegir conductor

   El selector es un camino OPCIONAL dentro de la tarjeta de reserva, y su aspecto lo
   dice: el disparador es un enlace discreto, no un boton. La accion principal de esta
   pantalla sigue siendo una sola —reservar— y meter aqui un segundo boton primario
   convertiria la ventaja en una bifurcacion. */
.chooser{ margin:2px 0 4px; }
.chooserOpen{
  width:100%; background:transparent; border:0; padding:0 2px;
  color:var(--accent); font:inherit; font-size:13px; font-weight:600;
  text-align:left; cursor:pointer; text-decoration:underline;
  /* 44px de area tactil sin cambiar el aspecto: es un enlace, pero se toca con el pulgar. */
  display:inline-flex; align-items:center; min-height:44px;
}
.chooserOpen:hover{ color:var(--text); }

.chooserBody{ margin-top:6px; display:grid; gap:8px; }
.chooserHint{ margin:0; color:var(--muted); font-size:12.5px; line-height:1.5; }
.chooserOrder{ margin:0; color:var(--muted); font-size:11.5px; opacity:.85; }
.chooserList{ display:grid; gap:8px; }

.chooserOption{
  display:grid; gap:2px; text-align:left; cursor:pointer;
  /* minmax no hace falta aqui, pero min-width:0 si: un nombre largo sin espacios
     ensancharia la tarjeta y sacaria la reserva entera de la pantalla a 390px. */
  min-width:0; min-height:44px;
  padding:11px 13px; border-radius:12px;
  border:1px solid var(--line); background:#10243a; color:var(--text);
  font:inherit;
}
.chooserOption:hover{ border-color:#67f1b455; }
.chooserOption.on{
  border-color:var(--accent); background:#0f2c3d;
  /* El borde solo no basta: quien no distingue bien el verde necesita otra senal. */
  box-shadow:inset 3px 0 0 var(--accent);
}
.chooserOption.on .chooserName::after{
  content:' ✓'; color:var(--accent);
}
.chooserName{
  font-size:14px; font-weight:700; overflow-wrap:anywhere;
}
.chooserMeta{
  font-size:12px; color:var(--muted); overflow-wrap:anywhere;
}

/* La espera reutiliza .capture, que ya es el patron de "un panel, un estado". Solo se
   ajusta el reloj, que es informacion secundaria y no debe competir con el titulo. */
#waitClock{ opacity:.85; }