/* ============================================================================
   Vuelame — card-vuelo.css
   ============================================================================
   La CARD de un vuelo del motor de regiones (lo que devuelve
   vuelame_region_card() en lib/region-ofertas.php) y su esqueleto de carga.

   VIVE ACÁ Y NO EN CADA PLANTILLA A PROPÓSITO. Estos estilos estaban copiados
   en template/region.php y en template/continente-vivo.php, y la copia ya se
   desincronizó una vez: continente-vivo se trajo la card pero no el breakpoint
   que la apila, y la página se iba de ancho en móvil. El HTML de la card lo
   arma UNA sola función; su CSS también es uno solo.

   Se carga DESPUÉS de base.css (de donde salen --text, --bg-card, --border…) y
   ANTES del <style> de la plantilla, que puede pisar lo que necesite.
   ========================================================================== */

/* Gris de las cards, en vez del --text-muted global.
   · En modo claro va MÁS OSCURO que el global: el bold ya marca la jerarquía
     solo, así que el texto de apoyo puede ser legible sin competir.
   · En modo oscuro sigue siendo gris, pero MÁS CLARO que el global: el #838998
     sobre fondo oscuro se apaga justo en el cuerpo de la card. (Un #888 no
     alcanzaba: tiene casi la misma luminancia que el #838998, sólo le saca el
     tinte azul.) */
:root          { --rg-muted:#5b6170; }
body.dark-mode { --rg-muted:#a0a6b4; }

.rg-card{ position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:13px 16px; margin-bottom:9px;
          box-shadow:var(--shadow); }
.rg-main{ min-width:0; }

/* ── 1) De [bandera] País a [bandera] País ─────────────────────────────────
   El "De" y el "a" son texto suelto dentro del flex, y el aire entre ellos y
   las banderas lo pone el gap (en un contenedor flex los espacios del HTML no
   cuentan). Es CONTEXTO, no el dato: va en Manrope como el resto de la card
   (Onest la hacía pesar de más) y un punto por debajo de la ruta. La bandera se
   mide en ALTURA contra la letra —14px— para que acompañe al texto en vez de
   sobresalir. El 4:3 de flagcdn da los 19px de ancho. */
.rg-head{ display:flex; align-items:center; gap:5px; flex-wrap:wrap;
          font-size:14px; font-weight:600; color:var(--rg-muted); }
.rg-pais{ display:inline-flex; align-items:center; gap:6px; font-weight:800;
          font-size:14px; color:var(--text); }
.rg-flag{ width:19px; height:14px; border-radius:2px; object-fit:cover; flex:0 0 auto; }
.rg-arrow{ color:var(--rg-muted); margin:0 2px; }

/* ── 2) Ruta ciudad a ciudad ───────────────────────────────────────────────
   El dato principal de la card, y por eso el más grande: qué ciudades une este
   vuelo es lo que se viene a leer. La flecha dice el tipo de viaje (⇄ / →),
   igual que en el tooltip. */
.rg-ruta{ margin-top:4px; font-size:16px; font-weight:600; color:var(--rg-muted); letter-spacing:-.2px; }
.rg-ruta b{ font-weight:800; color:var(--text); }
.rg-ruta .rg-arrow{ margin:0 7px; font-weight:700; }

/* Los PNG de aerolíneas de Kiwi son de formas muy distintas, y por eso el chip
   va SIEMPRE en blanco, con un poco de aire, en los dos modos: es el cuadrado
   que los contiene a todos y les da una forma común.

   NO SACARLO. Se probó el 18-sep-2026 y hubo que volver atrás el mismo día:
   · Muchos logos son APAISADOS (Plus Ultra es una franja de 61x15 sobre un
     lienzo de 64x64). Sin el cuadrado que los contiene quedan flotando, sin
     forma, y la fila de la aerolínea se lee peor.
   · Otros son tinta oscura sobre transparente y se pierden en el modo oscuro,
     que es el motivo por el que se puso el fondo blanco en su momento.

   Lo que se ve como un filete blanco grueso en algunas aerolíneas NO sale de
   acá: viene dentro del PNG. LEVEL trae 11 px de blanco OPACO a cada lado de
   un lienzo de 64 (17%) y LATAM 18 px (28%). Recortarlo por CSS —con
   object-view-box o escalando— se les aplicaría también a los logos que sí
   llenan su lienzo (Air France, easyJet, Emirates), y ahí comería dibujo. */
.rg-logo{ width:14px; height:14px; border-radius:3px; object-fit:contain; flex:0 0 14px; display:inline-block;
          background:#fff; box-sizing:border-box; }

/* ── 3) Tramos: timeline, con la estructura de Kiwi ────────────────────────
   Cada tramo son DOS filas en el teléfono —el renglón gris (logo, etiqueta,
   fecha, aerolínea) y el vuelo— y UNA sola en escritorio, donde ese renglón
   pasa a ser la columna izquierda de la grilla del tramo. */
.rg-legs{ margin-top:9px; display:flex; flex-direction:column; gap:9px; }
.rg-leg{ display:grid; gap:3px; }
.rg-leg + .rg-leg{ border-top:1px dashed var(--border); padding-top:9px; }
/* Con la pill de noches en el medio ese selector ya no matchea, y está bien:
   el separador punteado lo dibuja la pill. */
.rg-leg-top{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
             color:var(--rg-muted); min-width:0; }
/* Quién lo vuela… */
.rg-aero{ display:inline-flex; align-items:center; gap:6px; min-width:0;
          color:var(--text); font-weight:700; }
.rg-aero span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* …y cuándo. En el teléfono los dos grupos van en el mismo renglón, así que
   ahí hace falta separarlos; en escritorio no, porque quedan en líneas
   distintas. */
.rg-date{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rg-date::before{ content:'·'; margin-right:7px; }
.rg-leg-top > .rg-date:first-child::before{ content:none; }
.rg-tag{ font-weight:800; color:var(--text); }
/* Puntas de ANCHO FIJO y todo lo que sobra para la raya. Con columnas `auto`
   cada punta medía lo que decía su hora —"05:05+1" ocupa más que "06:15"—, así
   que las dos mitades salían de distinto largo y el medio quedaba corrido; con
   fracciones (1fr 2fr 1fr) quedaban parejas pero las puntas se quedaban con un
   cuarto del ancho cada una y la raya era corta. Los 70px son lo que mide la
   hora más larga que existe, "05:05+1", más un respiro. */
.rg-leg-main{ display:grid; grid-template-columns:70px minmax(0,1fr) 70px; gap:10px; align-items:center; }
/* Punta del tramo: la HORA grande y el aeropuerto debajo, chico. */
.rg-pt{ display:flex; flex-direction:column; line-height:1.15; }
.rg-pt b{ font-size:17px; font-weight:800; letter-spacing:-.3px; color:var(--text);
          font-variant-numeric:tabular-nums; }
.rg-pt span{ font-size:12px; font-weight:700; color:var(--rg-muted); }
.rg-pt-fin{ text-align:right; }
.rg-plus{ color:var(--rg-muted); font-size:10px; }
/* Medio: duración arriba, línea con el punto de la escala, escalas abajo. */
.rg-mid{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.rg-dur{ font-size:11.5px; font-weight:600; color:var(--rg-muted); white-space:nowrap; }
.rg-line{ position:relative; width:100%; height:2px; background:var(--border); border-radius:2px; }
.rg-line::after{ content:''; position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
                 border-radius:50%; background:var(--color-primary); }
.rg-line.rg-dir::after{ display:none; }
.rg-esc{ font-size:11.5px; font-weight:700; color:var(--color-primary); white-space:nowrap; }
.rg-esc.rg-dir{ color:var(--rg-muted); font-weight:600; }

/* Cuántas noches se está en el destino. Va entre los dos tramos y hace de
   separador, así que no suma otro.
   La línea punteada es UNA sola, de punta a punta de la card, y la pill se para
   encima: su fondo opaco tapa el tramo que le toca y simula el corte. Antes la
   línea eran dos mitades a los costados de la pill, y entonces la pill quedaba
   centrada en TODA la fila, no sobre el vuelo, que es lo que el ojo compara. */
.rg-noches{ position:relative; display:flex; justify-content:center; }
.rg-noches::before{ content:''; position:absolute; left:0; right:0; top:50%;
                    border-top:1px dashed var(--border); }
.rg-noches span{ position:relative; max-width:100%; font-size:11.5px; font-weight:700;
                 color:var(--rg-muted); background:var(--bg-alt); border-radius:999px;
                 padding:3px 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── 4) Precio, equipaje y botón ───────────────────────────────────────────
   En el teléfono es el PIE de la card: una fila, precio a la izquierda y el
   resto a la derecha. En escritorio se despega como bloque a la derecha (ver
   más abajo), con las tres cosas una debajo de la otra. */
.rg-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px;
         margin-top:11px; padding-top:10px; border-top:1px solid var(--border); }
.rg-pie-d{ display:flex; align-items:center; gap:12px; }
/* El precio es un link a Kiwi, de donde sale ese precio, pero se sigue viendo
   como precio: sin subrayado y en el naranja de siempre. */
.rg-price{ font-family:var(--font-title); font-weight:800; font-size:20px; color:var(--color-primary); letter-spacing:-.5px;
           white-space:nowrap; text-decoration:none; display:inline-block; }
.rg-price:hover{ opacity:.85; }
.rg-price:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; border-radius:6px; }

/* El botón de la card, y el panel que abre para elegir dónde ver el vuelo.
   El <summary> es el botón de siempre: hay que sacarle el triangulito que le
   pone el navegador, que es lo único que delata que esto es un <details>. */
.rg-btn{ display:inline-block; background:var(--color-primary); color:#fff; text-decoration:none;
         font-family:var(--font-title); font-weight:700; font-size:13px; padding:9px 16px; border-radius:9px;
         white-space:nowrap; cursor:pointer; list-style:none; user-select:none; }
.rg-btn::-webkit-details-marker{ display:none; }
.rg-btn::marker{ content:''; }
.rg-ver[open] .rg-btn{ filter:brightness(.92); }
.rg-btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; }

/* El panel se cuelga de la .rg-card y no del botón: colgado del botón aparecía
   en un lugar distinto en cada card según el ancho. En el teléfono va centrado;
   en escritorio, pegado a la derecha, encima del bloque del precio (ver abajo).
   Adentro, el precio —en la moneda elegida, igual que el resto del sitio— y un
   botón por agencia. Nada más: acá el que mira ya decidió que quiere este vuelo,
   lo único que le falta es elegir dónde comprarlo. */
.rg-ofertas{ position:absolute; z-index:20; left:50%; top:50%; transform:translate(-50%,-50%); width:212px;
             background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
             padding:10px; box-shadow:0 14px 34px rgba(0,0,0,.34); }
.rg-of-precio{ font-family:var(--font-title); font-weight:800; font-size:19px; color:var(--color-primary);
               letter-spacing:-.4px; text-align:center; padding:1px 0 9px; }

/* Cada agencia en SU color: el verde de Kiwi (#00A991) y el azul de Aviasales
   (#2199F8), los mismos que traen los logos. Como el fondo del botón ES el color
   del logo, el cuadradito se funde con el botón y lo que queda a la vista es la
   marca blanca: por eso el icono no lleva borde ni caja. Los dos son colores de
   marca y con blanco encima dan ~3:1 de contraste; el texto va en negrita para
   que se sostenga. */
.rg-otas{ display:flex; flex-direction:column; gap:7px; }
.rg-ota{ display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:9px;
         text-decoration:none; color:#fff; white-space:nowrap;
         font-family:var(--font-title); font-weight:700; font-size:12.5px; line-height:1.2;
         transition:filter .12s ease; }
.rg-ota img{ display:block; width:22px; height:22px; border-radius:5px; object-fit:cover; flex:0 0 22px; }
.rg-ota-kiwi{ background:#00A991; }
.rg-ota-avia{ background:#2199F8; }
.rg-ota:hover{ filter:brightness(1.08); }
.rg-ota:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }
@media (prefers-reduced-motion:reduce){ .rg-ota{ transition:none; } }

/* Equipaje: verde lo que entra en la tarifa, gris y tachado lo que no. El icono
   no se dibuja cuando la API no informa (ver vuelame_region_bags_html). */
.rg-bags{ position:relative; display:inline-flex; align-items:center; gap:7px; }
.rg-bag{ display:inline-flex; padding:0; border:0; background:none; border-radius:5px; cursor:default; }
.rg-bag svg{ width:17px; height:17px; display:block; }
.rg-bag.on{ color:var(--color-success,#1d9e75); }
.rg-bag.off{ color:var(--rg-muted); opacity:.7; }
.rg-bag.on .rg-bag-x{ display:none; }
.rg-bag:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
/* El globo con el nombre del bulto. Sale con
   :hover Y con :focus, así que en el teléfono aparece al tocarlo (el title del
   navegador ahí no existe). Se ancla al borde DERECHO de su grupo y no a cada
   icono: centrado sobre el último se salía de la card en pantallas angostas. */
.rg-tip{ position:absolute; right:0; bottom:calc(100% + 8px); z-index:6;
         background:var(--text); color:var(--bg-card); font-size:12px; font-weight:700;
         padding:6px 10px; border-radius:8px; white-space:nowrap; pointer-events:none;
         opacity:0; visibility:hidden; transition:opacity .12s ease;
         box-shadow:0 6px 18px rgba(0,0,0,.28); }
.rg-bag:hover .rg-tip, .rg-bag:focus .rg-tip{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion:reduce){ .rg-tip{ transition:none; } }

/* ── Escritorio ────────────────────────────────────────────────────────────
   Dos cambios, los dos para que el vuelo no quede estirado de punta a punta:
   · El precio, el equipaje y el botón se despegan como bloque a la derecha,
     separados por una línea vertical, uno debajo del otro (como Kiwi).
   · El renglón gris del tramo se convierte en la columna izquierda: el logo y
     la etiqueta se quedan en la primera línea y la fecha baja a la suya
     (flex-basis 100%), que es más bajo que apilar los tres. La fecha ahí
     envuelve en vez de cortarse: mejor dos líneas que un nombre a medias.
   · Y el timeline tiene tope de ancho: sin él, en 1200px la línea entre las dos
     horas medía medio metro y el vuelo se leía peor, no mejor. */
@media(min-width:620px){
  .rg-card{ display:flex; gap:16px; align-items:stretch; }
  .rg-main{ flex:1 1 auto; }
  /* El panel se corre a la derecha y cae encima del bloque del precio, que es
     de donde salió. `right:0` y no `right:16px`: se alinea con el BORDE de la
     card, no con el final del contenido. Con el padding de por medio quedaba 16
     píxeles adentro y se leía como desalineado. Es más ancho que el bloque —212
     contra 168— porque lo manda el botón de Aviasales, así que muerde un poco
     del timeline. */
  .rg-ofertas{ left:auto; right:0; transform:translateY(-50%); }

  .rg-pie{ flex:0 0 168px; flex-direction:column; align-items:center; justify-content:center; gap:10px;
           margin-top:0; padding:2px 0 2px 16px; border-top:0; border-left:1px solid var(--border); }
  .rg-pie-d{ flex-direction:column; align-items:center; gap:10px; width:100%; }
  .rg-ver{ width:100%; }
  .rg-btn{ display:block; width:100%; text-align:center; padding:10px 14px; }
  /* En escritorio el globo NO puede ir arriba: ahí está el precio y lo tapa.
     Va a la IZQUIERDA del bloque, sobre el aire que dejó el timeline. */
  .rg-tip{ right:calc(100% + 12px); bottom:auto; top:50%; transform:translateY(-50%); }

  .rg-leg{ grid-template-columns:150px minmax(0,1fr); align-items:center; gap:0 14px; }
  .rg-leg-top{ flex-wrap:wrap; row-gap:1px; }
  .rg-date{ flex:0 0 100%; white-space:normal; overflow:visible; }
  .rg-date::before{ content:none; }
  /* La pill se cuelga de la MISMA grilla que el tramo y se centra en la segunda
     columna: así queda sobre el vuelo y no sobre la fila entera, que incluye la
     columna de la aerolínea y la corría medio centímetro a la izquierda. */
  .rg-noches{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:0 14px; }
  .rg-noches span{ grid-column:2; justify-self:center; }
}
@media(max-width:560px){
  /* Pantalla angosta: el medio del tramo aprieta un poco su interlínea para que
     la duración y las escalas no le coman alto a la fila. */
  .rg-mid{ gap:1px; }
}
/* Red de seguridad: si mañana entra un texto largo sin espacios (un nombre de
   aerolínea raro, un IATA pegado), que corte en vez de empujar el layout. */
.rg-leg, .rg-ruta, .rg-pais{ overflow-wrap:anywhere; }

.rg-vacio{ background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:34px 24px;
           text-align:center; color:var(--rg-muted); }

/* ── Esqueleto: solo se ve mientras esperamos al fetch (cache frío) ────────── */
.rg-sk{ background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:13px 16px; margin-bottom:9px;
        box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px; }
.rg-sk-main{ min-width:0; }
.rg-sk-side{ display:flex; align-items:center; justify-content:space-between; gap:9px;
             padding-top:10px; border-top:1px solid var(--border); }
.rg-sk-b{ background:var(--bg-alt); border-radius:7px; height:12px; position:relative; overflow:hidden; }
.rg-sk-b + .rg-sk-b{ margin-top:9px; }
.rg-sk-t{ height:19px; width:46%; }
.rg-sk-m{ width:72%; }
.rg-sk-s{ width:56%; }
.rg-sk-p{ height:22px; width:96px; }
.rg-sk-btn{ height:34px; width:118px; border-radius:9px; }
/* Brillo que recorre los bloques: comunica "cargando", no "roto". */
.rg-sk-b::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
                 background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
                 animation:rg-sh 1.4s ease-in-out infinite; }
@keyframes rg-sh{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .rg-sk-b::after{ animation:none; } }