/* Plan B (2026-10-09): el aspecto del B sobre la página del A. Va DESPUÉS de styles.css y solo
   pisa la apariencia: el contenido, los datos y el comportamiento son los del A (mismo app.js).
   Lo que cambia: foto de ruta arriba con vidrio plano encima, buscador rectangular sin botón que
   brille, una sola barra de días, pestañas de texto, la lista como una superficie con líneas finas,
   sin el ícono de micro/auto al costado y, en el celu, cada viaje solo con horario, precio y logo. */

:root {
  --b-sup: rgba(22, 23, 26, .5);
  --b-linea: rgba(255, 255, 255, .1);
  --b-celeste: #9db9cf;
  --b-sobre-celeste: #0d1620;
  --b-hueco: 140px; /* espacio libre arriba del buscador para que se vea la foto (14/10: 190 → 140, "la foto es muy grande") */
}
:root[data-fondo="liso"] { --b-sup: #17181b; --b-linea: rgba(255, 255, 255, .08); --b-hueco: 14px; }

/* ---------- fondo: la foto en una franja arriba, que se funde con el negro ---------- */
body { position: relative; }
.foto { position: absolute; left: 0; right: 0; top: 0; height: 590px; z-index: -1; overflow: hidden; pointer-events: none; }
:root[data-fondo="liso"] .foto { display: none; }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: blur(1px) saturate(.9); transform: scale(1.03); display: block; }
.foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 6, var(--velo, .3)) 0%, rgba(5, 5, 6, calc(var(--velo, .3) + .08)) 45%, rgba(5, 5, 6, .82) 80%, var(--fondo) 100%); }

/* ---------- vidrio plano: sin reflejos de borde ni brillos ---------- */
.vidrio {
  background: var(--b-sup);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px var(--b-linea);
}
.vidrio::before, .vidrio::after { display: none; }

/* ---------- arriba: marca e info, el hueco con la foto, y el buscador ---------- */
.tope { row-gap: var(--b-hueco); top: calc(-1 * (36px + var(--b-hueco))); }
.tope .redondo { width: 36px; height: 36px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--b-linea); }
.capsula {
  height: 54px; padding: 0 6px 0 16px; border-radius: 14px;
  background: var(--b-sup) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important;
}
.capsula .raya { height: 54px; background: var(--b-linea); }
.buscar { background: none; color: var(--texto-2); box-shadow: none; border-radius: 10px; }
.buscar:hover { background: var(--hover); color: var(--texto); }

/* ---------- días: una sola barra con líneas entre uno y otro; el elegido, lleno ---------- */
.dias-zona { margin: 10px 0 0; }
.dias { gap: 0; padding: 4px; border-radius: 14px; background: var(--b-sup); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 0 0 1px var(--b-linea); scroll-padding: 0 4px; }
.dia { width: 68px; height: auto; padding: 7px 0 8px; border-radius: 10px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.dia + .dia::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 1px solid var(--b-linea); }
.dia[aria-pressed="true"]::before, .dia[aria-pressed="true"] + .dia::before { display: none; }
.dia:hover { background: rgba(255, 255, 255, .06); }
.dia[aria-pressed="true"] { background: var(--b-celeste); color: var(--b-sobre-celeste); box-shadow: none; animation: none; }

/* ---------- pestañas de texto, no pastillas ---------- */
.barra { margin-top: 16px; }
.seg { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; height: auto; padding: 0 2px; gap: 20px; }
.seg-pastilla, .seg-ico { display: none; }
.seg > button { height: auto; padding: 4px 0; border-radius: 0; font-size: 15px; font-weight: 600; }
.seg > button[aria-checked="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 1px; background: var(--b-celeste); }
.barra .redondo { width: 36px; height: 36px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--b-linea); }

/* ---------- la lista: una superficie con líneas finas, sin el ícono de micro/auto ---------- */
.lista { padding: 0; border-radius: 16px; margin-top: 12px; overflow: hidden; }
.lista > li { border-radius: 0; }
.lista > li + li::before { left: 0; right: 0; }
.lista > li.abierto { background: rgba(255, 255, 255, .035); box-shadow: none; }
.viaje { border-radius: 0; }
.medio { display: none; }
.placa { background: #fff; box-shadow: none; }

/* ---------- celu: cada viaje es horario → precio arriba y el logo abajo; nada más ---------- */
@media (max-width: 767px) {
  .tope { top: calc(-1 * (44px + var(--b-hueco))); }
  .tope .redondo { width: 44px; height: 44px; }
  .capsula { height: 54px; }
  .dias-zona { margin: 10px 0 0; }
  .dias { padding: 4px; }
  .dia { width: 68px; height: auto; }
  .barra { margin-top: 16px; }
  .seg { height: auto; padding: 0 2px; }
  .seg > button { height: auto; padding: 4px 0; }
  .lista { padding: 0; margin-top: 12px; }
  .viaje { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; padding: 16px; }
  .v-hora { grid-column: 1; grid-row: 1; font-size: 21px; }
  .v-precio { grid-column: 2; grid-row: 1; font-size: 21px; }
  .v-quien > :is(.placa, .empresa, .nombre) { grid-column: 1; grid-row: 2; }
  .v-quien > .fila { grid-column: 1; grid-row: 2; }
  /* afuera de la fila (están en la descripción): duración, paradas, día de llegada, "queda 1", "2 webs" */
  .q-meta, .v-extra, .otro-dia, .v-hora .dur-celu, .parada { display: none !important; }
  .placa { height: 26px; padding: 0 9px; border-radius: 7px; }
  .placa > img { height: 17px; max-width: 120px; }
  .recorte { --mw: 110; --mh: 16; }
  .lista > li + li::before { left: 0; right: 0; }
  .panel { padding: 0 16px 16px; }
}
@media (max-width: 430px) {
  .viaje { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .v-hora, .v-precio { font-size: 20px; }
  .panel { padding: 0 16px 16px; }
}

/* ---------- compu: la fila del A tal cual, sin el ícono ---------- */
@media (min-width: 768px) {
  :root { --b-hueco: 120px; } /* 14/10: 170 → 120 */
  :root[data-fondo="liso"] { --b-hueco: 14px; }
  .foto { height: 670px; }
  .tope { grid-template-columns: 1fr auto; grid-template-areas: "marca info" "capsula capsula"; top: calc(-1 * (36px + var(--b-hueco))); }
  .capsula { height: 60px; padding: 0 8px 0 22px; }
  .capsula .raya { height: 60px; }
  .dias-zona { margin: 10px 0 0; }
  .dias { padding: 4px; }
  .dia { flex: 1 0 68px; width: auto; height: auto; border-radius: 10px; }
  .lista { padding: 0; border-radius: 16px; }
  .viaje { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) minmax(150px, 190px) 24px; padding: 16px 22px; }
  .v-quien { grid-column: 1; }
  .v-hora { grid-column: 2; }
  .v-precio { grid-column: 3; }
  .chev { grid-column: 4; }
  .panel { padding-left: 22px; }
}

/* ---------- el selector de foto (para elegir; se saca cuando esté decidida) ---------- */
.modo-fondo { display: none; }
.con-selector .modo-fondo { display: flex; }
.modo-fondo { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 12px; background: #1c1d20; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; }
.modo-fondo button { white-space: nowrap; padding: 7px 10px; border-radius: 9px; color: var(--texto-2); }
.modo-fondo button[aria-pressed="true"] { background: #f2f2f4; color: #0b0c0e; }

/* sin brillos en los botones de compra */
.comprar, .comprar.primario { box-shadow: none !important; }

/* debajo del precio, nada ("quedan 2", "en 2 webs", "en Vía Bariloche": está en la descripción);
   la única excepción es un auto completo (09/10) */
.v-precio .sub, .v-extra { display: none !important; }
.viaje.auto.completo .v-extra { display: block !important; grid-column: 2; grid-row: 2; justify-self: end; }
@media (min-width: 768px) {
  .viaje.auto.completo { grid-template-rows: auto auto; row-gap: 2px; }
  .viaje.auto.completo > :not(.v-precio, .v-extra) { grid-row: 1 / 3; }
  .viaje.auto.completo .v-precio { grid-row: 1; align-self: end; }
  .viaje.auto.completo .v-extra { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; line-height: 18px; }
}
.p-auto-quien { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.p-auto-quien b { font-weight: 650; }
.p-auto .pocos { color: var(--ambar); }
.p-auto-que { margin: 4px 0 0; padding: 9px 12px; border-radius: 10px; background: #1d2730; box-shadow: inset 0 0 0 1px #304150; font-size: 13.5px; line-height: 1.4; color: var(--texto); }
.p-auto-que b { color: var(--b-celeste); font-weight: 650; }
/* la empresa del micro y la app del auto, con el mismo peso (sin logos desde el 14/10: nombre + punto) */
.viaje .v-quien :is(.empresa, .plataforma) { gap: 8px; font-size: 15px; font-weight: 600; color: var(--texto); }
@media (min-width: 768px) { .viaje .v-quien :is(.empresa, .plataforma) { font-size: 15.5px; } }
[data-tema="claro"] :is(.empresa, .plataforma)::before { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .06); }
[data-tema="claro"] :is(.empresa, .plataforma):not([style])::before { background: rgba(60, 60, 67, .3); }

/* el pie (14/10): los datos de la consulta y, abajo, el aviso que recomendó el abogado */
.pie { display: block; margin: 22px 8px 0; }
.pie > *::after { content: none !important; }
.pie-datos { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.pie-datos > :not(:last-child)::after { content: "·"; margin: 0 7px; }
.pie-datos span:empty { display: none; }
.pie-legal { margin: 10px auto 0; max-width: 560px; font-size: 12px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.pie-legal a { color: inherit; text-underline-offset: 2px; white-space: nowrap; }
.info .chico a { color: var(--texto); text-underline-offset: 2px; white-space: nowrap; }

/* ======================================================================================
   Modo claro (para probar, 2026-10-09): mismos lugares, colores dados vuelta.
   Se elige con el selector de abajo (Oscuro · Claro) y queda guardado en el navegador.
   ====================================================================================== */
:root[data-tema="claro"] {
  --fondo: #f2f3f5;
  --texto: #121316;
  --texto-2: rgba(60, 60, 67, .68);
  --texto-3: rgba(60, 60, 67, .42);
  --linea: rgba(0, 0, 0, .08);
  --hover: rgba(0, 0, 0, .04);
  --azul-texto: #3c6a8e;
  --azul-claro: #3c6a8e;
  --micro: #4c7aa0;
  --ambar: #b26a00;
  --rojo: #d70015;
  --estrella: #e08a00;
  --vidrio: rgba(255, 255, 255, .72);
  --vidrio-fuerte: rgba(255, 255, 255, .85);
  --brillo: rgba(255, 255, 255, .7);
  --borde: rgba(0, 0, 0, .07);
  --sombra: 0 10px 28px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
  --b-sup: rgba(255, 255, 255, .74);
  --b-linea: rgba(0, 0, 0, .09);
  color-scheme: light;
}
:root[data-tema="claro"][data-fondo="liso"] { --b-sup: #ffffff; }
[data-tema="claro"] .foto::after { background: linear-gradient(180deg, rgba(242, 243, 245, .05) 0%, rgba(242, 243, 245, .2) 45%, rgba(242, 243, 245, .85) 80%, var(--fondo) 100%); }
[data-tema="claro"] .velo-tope { background: linear-gradient(rgba(242, 243, 245, .94) 30%, rgba(242, 243, 245, 0)); }
[data-tema="claro"] .marca { color: var(--texto); }
[data-tema="claro"] .marca-ico { color: var(--azul-texto); }
[data-tema="claro"] .p-linea::before { background: rgba(0, 0, 0, .16); }
[data-tema="claro"] .p-l-pt.ini { background: #fff; }
[data-tema="claro"] .fecha input { color-scheme: light; }
[data-tema="claro"] .seg > button[aria-checked="true"]::after { background: var(--azul-texto); }
[data-tema="claro"] .placa { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
[data-tema="claro"] .lista > li.abierto { background: rgba(0, 0, 0, .025); }
[data-tema="claro"] .dia:hover { background: rgba(0, 0, 0, .04); }
[data-tema="claro"] .dia.es-min .dia-precio { color: var(--azul-texto); }
[data-tema="claro"] .p-web { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
[data-tema="claro"] .comprar.primario { color: #24506f; background: rgba(157, 185, 207, .28); }
[data-tema="claro"] .p-auto-que { background: #e9f0f6; box-shadow: inset 0 0 0 1px #c8d8e5; }
[data-tema="claro"] .p-auto-que b { color: #24506f; }
[data-tema="claro"] .menu { color: var(--texto); }

/* selector de tema, dentro del panel "i" (10/10: el flotante tapaba el último precio) */
.tema-sel { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-2); }
.tema-sel > span { margin-right: auto; }
.tema-sel button { padding: 6px 10px; border-radius: 8px; color: var(--texto-2); font-size: 13.5px; font-weight: 600; }
.tema-sel button[aria-pressed="true"] { background: var(--b-celeste); color: var(--b-sobre-celeste); }
.p-auto-quien > span { color: var(--texto-2); font-weight: 500; }

/* Modo claro en la compu (10/10): lo que era blanco sobre blanco — la línea del camino con los puntos de
   las paradas, el "Acceso", el interruptor y las pastillas de filtros y orden. */
[data-tema="claro"] .v-seg { background: linear-gradient(90deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .24)); }
[data-tema="claro"] .v-seg.der { background: linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .06)); }
[data-tema="claro"] .v-dur.vacia::before { background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
[data-tema="claro"] .v-pt::after { background: rgba(0, 0, 0, .32); }
[data-tema="claro"] .v-pt:hover::after { background: var(--texto); }
[data-tema="claro"] .v-pt.fin::after { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .55); }
[data-tema="claro"] .v-pt.fin:hover::after { background: #fff; box-shadow: inset 0 0 0 1.5px var(--texto); }
[data-tema="claro"] .acc { color: #b26a00; }
[data-tema="claro"] .chips button { background: rgba(0, 0, 0, .05); }
[data-tema="claro"] .chips button[aria-pressed="true"] { background: rgba(0, 0, 0, .1); box-shadow: none; }
[data-tema="claro"] .orden > button[aria-checked="true"] { background: rgba(0, 0, 0, .07); }
[data-tema="claro"] .interruptor i { background: rgba(0, 0, 0, .18); }
[data-tema="claro"] .seg > button:disabled { opacity: .55; }

/* ======================================================================================
   Ciudades (2026-10-15): los dos lugares de la cápsula se tocan y abren el selector.
   Compu: un menú debajo del lugar. Celu: una hoja entera, sin vidrio (se lee mejor).
   ====================================================================================== */
.capsula .lugar { min-width: 0; padding: 6px 7px; margin: 0 -3px; border-radius: 9px; transition: background .15s; }
.capsula .lugar:hover { background: var(--hover); }
/* La flechita dice que el nombre se toca (15/10: "no me di cuenta que tocás y aparece la lista"). */
/* Va en el margen derecho del botón (no se la come el "…" del nombre). */
.capsula .lugar { position: relative; padding-right: 22px; }
.capsula .lugar::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 5px; height: 5px;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; opacity: .5; transform: translateY(-70%) rotate(45deg);
}
/* En el celu, más pegada al nombre: "C. del Uruguay" sigue entrando entero en 390 px. */
@media (max-width: 767px) {
  .capsula .lugar { padding-left: 5px; padding-right: 15px; }
  .capsula .lugar::after { right: 3px; }
}
/* Si un nombre no entra con la flechita (celu angosto, nombre largo), van sin flechitas, como antes:
   app.js pone .apretado (ajustarFlechitas). */
.tramo.apretado .lugar { padding-right: 7px; }
.tramo.apretado .lugar::after { display: none; }
@media (max-width: 767px) { .tramo.apretado .lugar { padding-right: 5px; } }

.lugares { width: min(320px, calc(100vw - 24px)); min-width: 0; padding: 6px; border-radius: 16px; }
.lug-cabeza { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 6px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--b-linea); }
.lug-lupa { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--texto-2); stroke-width: 2; stroke-linecap: round; }
.lug-cabeza input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--texto); font: inherit; font-size: 16px; }
.lug-cabeza input::placeholder { color: var(--texto-3); }
.lug-cabeza input::-webkit-search-cancel-button { display: none; }
.lug-cerrar { display: none; }
.lug-lista { list-style: none; margin: 0; padding: 0; max-height: min(420px, 62vh); overflow-y: auto; overscroll-behavior: contain; }
.lug-lista li[data-lugar] { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; }
.lug-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lug-lista li.activo, .lug-lista li[data-lugar]:hover { background: var(--hover); }
.lug-nom { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.lug-sub { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lug-lista .tilde { width: 17px; height: 17px; margin-left: auto; flex: none; fill: none; stroke: var(--b-celeste); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.lug-lista li[aria-selected="true"] .tilde { visibility: visible; }
.lug-nada { padding: 12px; font-size: 14.5px; color: var(--texto-2); }
[data-tema="claro"] .lug-lista .tilde { stroke: var(--azul-texto); }

@media (max-width: 767px) {
  html.con-hoja { overflow: hidden; }
  .menu.lugares {
    inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    border-radius: 0; background: var(--fondo) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none;
    transform: translateY(14px); transform-origin: 50% 0;
  }
  .menu.lugares:popover-open { transform: none; }
  @starting-style { .menu.lugares:popover-open { opacity: 0; transform: translateY(14px); } }
  .lug-cabeza { height: 54px; margin: 10px 16px 8px; padding: 0 4px 0 14px; border: 0; border-radius: 14px; background: var(--b-sup); box-shadow: inset 0 0 0 1px var(--b-linea); }
  .lug-cabeza input { font-size: 17px; }
  .lug-cerrar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; color: var(--texto-2); }
  .lug-cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .lug-lista { max-height: calc(100dvh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 0 16px 16px; }
  .lug-lista li[data-lugar] { min-height: 56px; padding: 0 14px; border-radius: 0; }
  .lug-lista li[data-lugar] + li[data-lugar] { box-shadow: inset 0 1px 0 var(--b-linea); }
  .lug-lista li.activo, .lug-lista li[data-lugar]:hover { background: none; }
  .lug-lista li[data-lugar]:active { background: var(--hover); }
  .lug-nom { font-size: 17px; }
  .lug-sub { font-size: 14px; }
  .lug-lista .tilde { width: 19px; height: 19px; }
}