/* ============================================================
   RUOT · Local Tours — LO QUE AÑADE LA FAMILIA ESTÁTICA
   (las páginas /tour, /ciudad y /listas que lee Google)

   30-sep-2026 (petición de Ale: «usa lo que ya tenemos»): estas páginas cargan
   LAS MISMAS hojas que la web — css/tokens.css + css/estilos.css + los parches
   de la auditoría del 14-sep — y usan las MISMAS clases (cabecera, tarjeta-tour,
   dos-columnas, datos-clave, aside de precios, pie-grande…). Por eso aquí ya NO
   hay copias de componentes: una copia que se carga después gana en silencio y
   las dos familias se separan sin que nadie se entere.

   Este fichero solo lleva lo que la web NO tiene porque no lo necesita:
     1. El menú en el móvil: la app lo abre con JavaScript (hamburguesa); aquí se
        envuelve en dos líneas, que es honesto y no necesita nada.
     2. El selector de idioma sin JavaScript: en la app es un botón con lista;
        aquí un <details> con enlaces a la misma página en cada idioma.
     3. La prosa de los listículos (markdown: h2, párrafos, listas, enlaces).
     4. Dos remiendos de tacto y aire en listas de texto, con guardián
        (test-tactiles-casa.js y test-tactil-prerender.js).

   Sin colores a mano: solo tokens.
   ============================================================ */

/* ---------- 1 · El menú, también en el móvil ---------- */
@media (max-width: 720px) {
  .cabecera .barra { flex-wrap: wrap; row-gap: var(--sp-2); }
  .cabecera .menu-principal {
    display: flex; flex-wrap: wrap; white-space: normal; width: 100%;
    column-gap: 2px; row-gap: 2px;
  }
  .cabecera .menu-principal a { min-height: var(--tactil); }
}

/* ---------- 2 · El selector de idioma, sin JavaScript ---------- */
.idioma-cabecera { position: relative; }
.idioma-cabecera > summary { list-style: none; cursor: pointer; }
.idioma-cabecera > summary::-webkit-details-marker { display: none; }
.idioma-cabecera > summary::marker { content: ''; }
/* Mismo aspecto que las opciones de la web (que allí son <button>) */
.idioma-lista a,
.idioma-apagado {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); width: 100%; min-height: var(--tactil);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radio-s);
  color: var(--texto); font-size: var(--fs-small); font-weight: 600;
}
.idioma-lista a:hover, .idioma-lista a:focus-visible { background: var(--tinte); color: var(--texto); }
/* Idioma sin versión de esta página: se enseña, pero apagado y sin enlace. */
.idioma-apagado { color: var(--texto-suave); cursor: default; }
/* En el pie no flota: el desplegable se abre dentro de la columna. */
.idioma-pie { display: block; }
.idioma-lista-pie { position: static; margin-top: var(--sp-2); }

/* ---------- 3 · La prosa de los listículos ---------- */
.prosa h2 { font-size: var(--fs-h2); line-height: var(--lh-titulo); margin: var(--sp-5) 0 var(--sp-3); }
.prosa h3 { font-size: var(--fs-titulo); line-height: var(--lh-titulo); margin: var(--sp-4) 0 var(--sp-2); }
.prosa p { margin: 0 0 var(--sp-3); }
.prosa p:last-child { margin-bottom: 0; }
.prosa ul, .prosa ol { margin: 0 0 var(--sp-3); padding-left: 1.25rem; }
.prosa li { margin-bottom: var(--sp-1); }
.prosa li:last-child { margin-bottom: 0; }
/* En el texto corrido el enlace VA SUBRAYADO: el color, por si solo, no basta
   para reconocerlo. En la app lo hace el interruptor del Panel; aqui es lo
   correcto por defecto, y tambien se puede apagar desde el Panel. */
.prosa a, main p a:not(.btn):not(.btn-enlace) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* El interruptor del Panel («subrayar todos los enlaces») ya vive en css/tokens.css
   y solo actúa con ="true". Aquí no se repite: una copia floja como
   `[data-subrayar-enlaces]` (sin valor) subraya también cuando está en «false». */

/* ---------- 4 · Tacto y aire en listas de texto ---------- */
/* Enlaces dentro de una lista: la caja tactil crece con relleno de bloque, que
   en un elemento EN LINEA no mueve el interlineado. Y las filas que solo llevan
   un enlace se separan para que las cajas (41 px) no se pisen entre si. */
main ul li > a { padding-block: 10px; }
main ul li:has(> a:only-child) + li:has(> a:only-child) { margin-top: 18px; }

/* ---------- 5 · El tablón «Buscamos guías» (/empleo, 05-oct-2026) ---------- */
/* Las tarjetas de ciudad del tablón: una tarjeta normal que ENTERA es un enlace
   (mismo patrón que las tarjetas de tour: toda la caja, un solo destino). */
.empleo-ciudad { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--texto); }
.empleo-ciudad:hover { box-shadow: var(--sombra-hover); border-color: var(--borde); }
.empleo-ciudad .titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-titulo); font-weight: 700; line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
}
@media (min-width: 721px) and (max-width: 1000px) {
  /* Banda intermedia: a 3 columnas los títulos del tablón quedan a una palabra por
     línea; a 2 respiran. (≤720 ya lo apila la regla móvil de la casa.) */
  .rejilla-empleo { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* (05-oct-2026 · ajuste de Ale) El pin y el nombre, en UNA línea: el svg de la casa
   es display:block (estilos.css) y por eso el pin saltaba de línea en la tarjeta.
   La fila va en flex (.fila-ico, la pieza de la casa para icono + texto) con el
   texto en su propio elemento (regla de diseño 13) y menos aire entre ambos. */
.empleo-ciudad .zona { gap: 6px; }
.empleo-ciudad .zona .ico { flex: 0 0 auto; }
.empleo-ciudad .zona span { min-width: 0; }

/* (05-oct-2026) Estado EN VIVO de la vacante (pedido de Ale): lo rellena
   js/empleo-semaforo.js con el semáforo de equilibrio de n8n («Equilibrio»,
   lunes y jueves). «Buscamos guías ahora» = rojo (faltan guías); «Sin vacantes
   ahora» = verde/azul. Sin dato el hueco queda oculto y la tarjeta no cambia (P3).
   Color NUNCA solo: icono (semaforo) + palabra, siempre los dos (ACC §5). */
.empleo-estado { align-self: flex-start; margin: var(--sp-3) 0 0; padding: 4px 10px; border-radius: var(--radio-s); font-size: var(--fs-small); }
.empleo-estado .ico { flex: 0 0 auto; }
.empleo-estado.es-necesitan { background: var(--tinte-aviso); color: var(--c-aviso); }
.empleo-estado.es-sin { color: var(--texto-suave); }
.empleo-revision { margin-top: var(--sp-4); }