/* Mockup tarea 22: la landing de producción tal cual + solo lo nuevo (carrusel por barrio, filtros con etiqueta, grilla, tarjeta de vuelo).
   Sin tokens nuevos: todos los colores, radios y materiales son los de landing.css (Geist). */
@import url("../../tools/landing/landing.css");

/* ---------- Estructura: controles, pestañas, contenido (una sola columna; el escritorio abre las destacadas en fila) ---------- */
#destacadas h2{margin:0}
.destacadas-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.flechas{display:none;gap:8px}
.flechas button{display:grid;place-items:center;width:44px;padding:0;border-radius:50%}
.flechas button:disabled{opacity:.35;cursor:default}
#ant .ic{transform:rotate(90deg)}#sig .ic{transform:rotate(-90deg)}
.salida .controles{margin-top:0}
/* Pestañas: Viaje completo, Vuelos, Deptos y "Armar" (abre el armador). */
nav{grid-template-columns:repeat(4,1fr)}
nav button>span:last-child{white-space:nowrap}

/* ---------- Tarjeta destacada por barrio (la misma "Destacado" de producción, sin depender de #mejor) ---------- */
.tarjeta.destacada{display:flex;flex-direction:column;background:var(--paper);box-shadow:var(--material-large)}
.tarjeta .foto-wrap.destacada-foto{position:relative;flex:none;height:220px;background:var(--press)}
.destacada-foto .insignias{justify-content:space-between}
.destacada-foto.sin-img{height:auto;display:flex;flex-direction:column}
.destacada-foto.sin-img .insignias{position:static;padding:16px 16px 0;background:var(--franja-bg)}
.tarjeta.destacada .cuerpo{flex:1;gap:16px;align-content:start}
.tarjeta.destacada .cuerpo>.acciones{margin-top:0;align-self:end;gap:8px}
.tarjeta.destacada .columnas dl>div{display:grid;gap:4px}
.tarjeta.destacada .pills .pill{background:var(--hover)}
.insignia.barata{color:var(--ok)}
.tarjeta.destacada.vacia .cuerpo{gap:8px;align-content:center}
.tarjeta.destacada.vacia .insignias{display:flex}
.tarjeta.destacada.vacia .insignia{background:var(--hover)}
.tarjeta.destacada.vacia .gris{margin:0}

/* ---------- Carrusel: fila deslizable en el celular, primera al 86 % y la segunda asomando ---------- */
.carrusel{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 4px;scroll-padding-inline:16px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel>*{scroll-snap-align:start;min-width:0}
.carrusel>.loading,.carrusel>.sin-datos{grid-column:1/-1}
.puntos{display:flex;justify-content:center;gap:8px;padding:8px 0 0}
.puntos span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.puntos span[aria-current=true]{background:var(--active)}
@media(max-width:365px){.carrusel{margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.carrusel{scroll-behavior:auto}}

/* ---------- Filtros con etiqueta: una fila de botones "Barrio ▾  Precio ▾ …"; cada uno abre su menú ---------- */
.chips.filtros{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 8px;padding:0 16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.chips.filtros::-webkit-scrollbar{display:none}
.chips.filtros .filtro{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;padding:8px 10px 8px 14px;border-radius:9999px}
.filtro .ic{width:16px;height:16px;color:var(--muted)}
.filtro[data-activo]{background:var(--active);color:var(--white);border-color:var(--active)}
.filtro[data-activo] .ic{color:inherit}
.resultado{margin:0 0 8px}
@media(max-width:365px){.chips.filtros{margin-inline:-12px;padding-inline:12px}}
/* Menú del filtro: hoja desde abajo en el celular; flotante debajo del botón en pantallas anchas. */
#hoja{padding:0;max-width:420px;overflow-y:auto}
#hoja .dialog-head{padding:12px 16px;border-bottom:1px solid var(--line);z-index:1}
#hoja .dialog-head h2{font-size:16px;line-height:24px}
.hoja-ops{display:grid;gap:2px;padding:8px}
.opcion-filtro{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:8px 12px;border:0;background:none;text-align:left;font-weight:400;font-size:15px;line-height:20px}
.opcion-filtro[aria-pressed=true]{font-weight:600;background:var(--hover)}
.opcion-filtro:disabled{opacity:.45;cursor:default}
.opcion-der{display:inline-flex;align-items:center;gap:8px;flex:none}
.opcion-der .ic{width:18px;height:18px}
@media(max-width:649px){#hoja{inset:auto 0 0;margin:auto 0 0;width:100%;max-width:none;max-height:80vh;border-radius:var(--r-card) var(--r-card) 0 0;padding-bottom:env(safe-area-inset-bottom)}}
#hoja.flotante{position:fixed;inset:auto;left:var(--x,16px);top:var(--y,120px);margin:0;width:300px;max-height:calc(100vh - var(--y,120px) - 16px)}
#hoja.flotante::backdrop{background:transparent}

/* ---------- Lista: la tarjeta de siempre, en tantas columnas como entren (1 celular · 2 tablet · 3 escritorio · 4 pantalla grande) ---------- */
#lista{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.centinela{padding:24px 0 8px;text-align:center;font-size:13px;line-height:18px;color:var(--muted)}

/* ---------- Tarjeta de vuelo: precio, fechas, y los dos tramos como en un buscador de vuelos ---------- */
.tarjeta.vuelo-lista .cuerpo{gap:16px;padding:20px}
.vuelo-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.aerolinea{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.aerolinea span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aerolinea .ic{width:16px;height:16px}
.vuelo-cab .pills{flex:none}
.vuelo-lista .grupo-precio{display:grid;gap:4px}
#lista .tarjeta.vuelo-lista .fila-precio .monto{font-size:32px;line-height:36px;letter-spacing:-.05em}
.tramos{display:grid;gap:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tramo{display:grid;gap:2px}
.tramo-et{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tramo-fila{display:grid;grid-template-columns:auto minmax(48px,1fr) auto;align-items:center;gap:12px}
.tramo-hora{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tramo-hora sup{margin-left:2px;font-size:11px;font-weight:500;color:var(--muted)}
.tramo-lugar{font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.tramo-punto.der{text-align:right}
.tramo-linea{display:grid;justify-items:center;gap:2px;min-width:0}
.tramo-dur{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}
.tramo-trazo{position:relative;display:grid;place-items:center;width:100%;height:16px}
.tramo-trazo::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.tramo-trazo .ic{position:relative;width:16px;height:16px;padding:0 4px;box-sizing:content-box;background:var(--paper);color:var(--muted);transform:rotate(45deg)}
.tramo.vuelta .tramo-trazo .ic{transform:rotate(225deg)}
.vuelo-lista .acciones{margin-top:0}

/* ---------- Celular chico: la destacada de Ipanema tiene que terminar arriba de las pestañas a 375×740 (R11-17) ---------- */
@media(max-width:420px){.tarjeta .foto-wrap.destacada-foto{height:180px}}

/* ---------- Tablet: el carrusel no se estira de más ---------- */
@media(min-width:650px){.carrusel{grid-auto-columns:min(86%,400px)}}
/* Pantalla grande: más ancho para que la lista llegue a 4 columnas. */
@media(min-width:1400px){main{max-width:1400px}}

/* ---------- Escritorio: controles en una fila, pestañas arriba, las tres destacadas en columnas iguales ---------- */
@media(min-width:900px){
 .salida{max-width:520px}
 nav{margin-top:8px}
 .contenido{border-top:3px solid var(--active);padding-top:16px}
 .panel{border-top:0}
 .panel .seccion-cab{margin-top:24px}
 .carrusel{grid-auto-columns:calc((100% - 24px) / 3);margin:0;padding:0 0 4px;scroll-padding-inline:0}
 .flechas{display:flex}
 .puntos{display:none}
 .tarjeta .foto-wrap.destacada-foto{height:184px}
 .chips.filtros{margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}}

/* ---------- Sugerencias de diseño (14/10): números legibles, menos peso en los botones, proximidad ---------- */
/* Desglose: etiqueta + valor + ayuda, dentro de una caja suave en lugar de dos líneas. */
.tarjeta.viaje .columnas,.tarjeta.destacada .columnas{gap:8px;padding:12px;border:0;border-radius:var(--r-btn);background:var(--hover)}
.tarjeta .columnas dl>div{display:grid;gap:0;min-width:0}
.tarjeta .columnas dt{font-size:12px;line-height:16px;text-transform:none;letter-spacing:0}
.tarjeta .columnas dd{font-size:16px;line-height:22px}
.tarjeta .columnas dd.ayuda{font-size:11px;line-height:14px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.tarjeta .proporciones .b3{fill:var(--line)}
/* Proximidad: precio, fechas y lugar van juntos (8 px); el desglose y los botones, separados (20 px). */
.tarjeta.viaje .cuerpo{gap:8px}
.tarjeta.viaje .cuerpo>.columnas,.tarjeta.viaje .cuerpo>.acciones{margin-top:12px}
/* Botones de la cabecera y los steppers: livianos; el único relleno de la pantalla es "Ver depto". */
.moneda{gap:0;padding:2px;border-radius:var(--r-btn);background:var(--hover)}
.moneda button{border-color:transparent;background:none;color:var(--muted)}
.moneda button[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:transparent;box-shadow:var(--material-small)}
#tema,#tema[aria-pressed=true]{border-color:transparent;background:none;color:var(--ink)}
.salida .controles{gap:12px}
/* Cada stepper es una cápsula propia: los botones de Noches y Personas no se tocan. */
.stepper{gap:0;padding:2px;border:1px solid var(--line);border-radius:9999px;background:var(--paper)}
.stepper button{border-color:transparent;background:none;border-radius:50%}
@media(hover:hover){.stepper button:not(:disabled):hover{background:var(--hover)}}
.control-et{margin:0 0 4px 16px}
/* Celular: la etiqueta de arriba ya dice "Noches" / "Personas"; en la cápsula va solo el número. */
@media(max-width:480px){.paso-unidad{display:none}}

/* ---------- Deptos: precio por persona grande (como en la home) y el total como ayuda debajo ---------- */
.depto-lista .grupo-precio{display:grid;gap:2px}
#lista .tarjeta.depto-lista .fila-precio .monto{font-size:32px;line-height:36px;letter-spacing:-.05em}
.total-linea{font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.depto-lista .fila-titulo{align-items:center}
.depto-lista .cuerpo>.acciones{margin-top:8px}

/* ---------- Armador (copia rediseñada armar.js): mismas tarjetas y filtros que la lista ---------- */
.opciones .tarjeta.vuelo-lista .fila-precio .monto,.opciones .tarjeta.depto-lista .fila-precio .monto{font-size:32px;line-height:36px;letter-spacing:-.05em}
.opciones .tarjeta .acciones{align-items:center}
.opciones .tarjeta .acciones .elegir{flex:1}
.opciones .tarjeta .acciones .elegir .ic{width:18px;height:18px}
.chips.filtros.armar-filtros{margin-top:12px}
.pills.acceso{margin-top:4px}
.pills.acceso .pill{color:var(--muted)}
.tramo-et{display:flex;align-items:baseline;gap:8px}
.tramo-fecha{font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}