/*
 * COMPONENTES — estilos de las piezas que pinta inc/componentes.php
 * (contacto, selector de ciudad, filtros, paginación, estado vacío).
 *
 * Depende de tokens.css y base.css: aquí no hay ni un color, ni un radio, ni un
 * espaciado literal. Todo sale de las variables, que es lo que impide que
 * vuelva a pasar lo del sitio anterior —el azul de marca escrito a mano 665
 * veces y ya con dos tonos distintos conviviendo—.
 */

/* ---------------------------------------------------------------- */
/* Tarjeta: piezas que añade el componente                           */
/* ---------------------------------------------------------------- */

.lt-tarjeta__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-1);
}

/* Separador entre datos. El punto medio va PEGADO al dato anterior para que,
   al saltar de línea en móvil, no quede un «·» huérfano abriendo la fila. */
.lt-tarjeta__meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--e-1);
  color: var(--linea);
}

/*
 * TRAMPA RESUELTA: .lt-tarjeta__enlace-total::after tapa la tarjeta entera con
 * una capa invisible para hacerla clicable. Sin esta regla, esa capa se traga
 * los botones de llamar y de WhatsApp: se ven, se pueden enfocar con el
 * teclado, pero al tocarlos abren la ficha en vez de marcar el teléfono.
 */
.lt-tarjeta__pie .lt-btn,
.lt-tarjeta__pie .lt-contacto {
  position: relative;
  z-index: 1;
}

.lt-codigo {
  align-self: flex-start;
  margin: var(--e-1) 0 0;
  padding: 6px 12px;
  border: 1px dashed var(--marca-borde);
  border-radius: var(--radio-chico);
  background: var(--marca-claro);
  color: var(--marca);
  font-weight: var(--peso-fuerte);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* «Gratuito» es una BUENA noticia y se lee como tal — pero en AZUL, no en
   verde: la marca no tiene verde. La jerarquía la da el relleno tintado y el
   peso del texto, no el tono. */
.lt-sello--gratis {
  background: var(--marca-claro);
  color: var(--exito);
}

/* ---------------------------------------------------------------- */
/* Botones de contacto                                               */
/* ---------------------------------------------------------------- */

.lt-contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  width: 100%;
}

.lt-contacto .lt-btn {
  flex: 1 1 auto;
  /* Dos por fila en el peor caso; el tercero baja entero. */
  min-width: 44%;
}

@media (max-width: 640px) {
  /*
   * 44 px es el mínimo táctil recomendado. Estos tres botones son la acción
   * real del sitio —llamar, escribir por WhatsApp, ir— y se pulsan con el
   * pulgar, muchas veces de pie y con prisa.
   */
  .lt-contacto .lt-btn {
    min-height: 44px;
    min-width: 100%;
  }
}

/* ---------------------------------------------------------------- */
/* Selector de ciudad                                                */
/* ---------------------------------------------------------------- */

.lt-selector-ciudad {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
}

.lt-selector-ciudad__titulo {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-selector-ciudad__campo {
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--marca-borde);
  border-radius: var(--radio-pildora);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  cursor: pointer;
  /* Sin ancho fijo: «San Antonio» y «Todo Texas» no miden lo mismo, y el
     desplegable del hero anterior tenía el ancho quemado en píxeles. */
  max-width: 100%;
}

.lt-selector-ciudad__campo:hover { border-color: var(--marca); }

/* Sobre fondo oscuro (cabecera fija, pie) el selector se invierte solo. */
.lt-seccion--honda .lt-selector-ciudad__titulo { color: var(--blanco); }

/* ---------------------------------------------------------------- */
/* Píldoras de filtro                                                */
/* ---------------------------------------------------------------- */

.lt-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
}

.lt-filtro {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 18px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-pildora);
  background: var(--blanco);
  color: var(--tinta);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.lt-filtro:hover {
  border-color: var(--marca);
  color: var(--marca);
}

/* aria-current es la ÚNICA marca de «estás aquí»: la misma que anuncia el
   lector de pantalla pinta el estado activo. Una clase aparte se acaba
   desincronizando del atributo. */
.lt-filtro[aria-current] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
}

@media (max-width: 640px) {
  /* En móvil las categorías son muchas: se convierten en una fila que se
     desliza, con parada en cada píldora, en vez de ocho líneas de altura. */
  .lt-filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--e-1);
    -webkit-overflow-scrolling: touch;
  }
  .lt-filtro { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- */
/* Paginación                                                        */
/* ---------------------------------------------------------------- */

.lt-paginacion { margin-top: var(--e-6); }

.lt-paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Cuadrado de 44 px: el mismo mínimo táctil que los botones de contacto. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.lt-paginacion a.page-numbers:hover {
  border-color: var(--marca);
  color: var(--marca);
}

.lt-paginacion .page-numbers.current {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--blanco);
}

.lt-paginacion .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--apagado);
}

/* ---------------------------------------------------------------- */
/* Estado vacío                                                      */
/* ---------------------------------------------------------------- */

/*
 * Un listado sin resultados NUNCA se deja en blanco: con el selector de ciudad
 * puesto es facilísimo llegar a una combinación vacía («empleos en El Paso»), y
 * una página en blanco se lee como un sitio roto, no como una búsqueda sin
 * suerte. Por eso el bloque explica y, cuando se puede, ofrece salida.
 */
.lt-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-6) var(--e-3);
  border: 1.5px dashed var(--marca-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--superficie);
  text-align: center;
  /* Ocupa la rejilla entera cuando cae dentro de una. */
  grid-column: 1 / -1;
}

.lt-vacio p {
  margin: 0;
  max-width: 46ch;
  color: var(--apagado);
}

/* ---------------------------------------------------------------- */
/* Compartir                                                         */
/* ---------------------------------------------------------------- */

/*
 * Estos estilos viven en la capa COMPARTIDA y no en la hoja de un módulo
 * porque el bloque lo pinta inc/compartir.php y sale en todas las fichas:
 * negocio, evento, ayuda, episodio y noticia. Antes solo existía en
 * empleos-noticias.css, que únicamente se descarga en noticias y empleos —
 * en la ficha de un negocio los mismos botones habrían salido sin caja, sin
 * separación y con el de Facebook transparente.
 *
 * NOTA DE CASCADA: empleos-noticias.css carga DESPUÉS de esta hoja y repite
 * `.lt-compartir` con los mismos valores. En las noticias gana esa copia, así
 * que su aspecto no cambia ni un píxel. Cuando esa duplicación se retire, el
 * bloque seguirá funcionando desde aquí.
 */

.lt-compartir {
  margin-top: var(--e-5);
  padding: var(--e-3);
  background: var(--hueso);
  border-radius: var(--radio-tarjeta);
}

.lt-compartir__titulo {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: var(--e-2);
}

.lt-compartir__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

/*
 * `flex: 0 1 auto` con `min-width: 0`: los botones se encogen hasta caber en
 * vez de empujar la fila. Sin el min-width, «No se pudo copiar…» y las
 * traducciones inglesas —siempre más largas— sacaban la caja fuera de la
 * pantalla a 360 px, que es el ancho más común de esta audiencia.
 */
.lt-compartir__botones .lt-btn {
  flex: 0 1 auto;
  min-width: 0;
}

/*
 * Compartir en Facebook, con el AZUL DEL SITIO y no con el de Facebook: la
 * paleta es azul, blanco y negro, y además el azul de Facebook con texto blanco
 * da 4,23:1 — por debajo de AA. Así son 7,4:1 con tinta negra, igual que el
 * botón de WhatsApp.
 *
 * Estaba SOLO en empleos-noticias.css, que no se descarga fuera de noticias y
 * empleos: en la ficha de un negocio el botón salía sin fondo y sin borde, un
 * texto azul flotando en la caja de papel. Aquí abajo lo tienen las cinco.
 */
.lt-btn--facebook { background: var(--cielo); color: var(--tinta); }
/* El hover ACLARA en vez de oscurecer: sobre este azul manda la tinta negra, y
   aclarando el fondo el contraste sube en lugar de hundirse justo antes del clic. */
.lt-btn--facebook:hover { background: var(--cielo-claro); color: var(--tinta); }

/*
 * TRAMPA RESUELTA: el de copiar es el único <button> de la fila y salía 5 px
 * más bajo que los dos enlaces. `.lt-btn` fija familia, tamaño y peso pero no
 * el interlineado, y el navegador le pone a los <button> un `line-height:
 * normal` propio que no hereda del cuerpo. En una fila de tres pastillas ese
 * escalón se ve.
 */
.lt-btn--copiar { line-height: inherit; }

/*
 * TRAMPA RESUELTA: `.lt-btn` declara `display: inline-flex`, y eso GANA al
 * `display: none` que el navegador aplica a `[hidden]`. Sin esta regla el
 * botón de copiar se vería igual sin JavaScript: visible y muerto, que es
 * justo lo que el atributo pretendía evitar.
 */
.lt-compartir [hidden] { display: none; }

/*
 * El botón de copiar es un <button>, no un enlace: no lleva a ninguna parte.
 * Va en hueco blanco con borde azul para que se lea como la acción secundaria
 * que es, sin competir con WhatsApp. Azul de marca sobre blanco: 8,6:1.
 * No se usa `.lt-btn--fantasma` porque ese toma `currentColor`, y sobre esta
 * caja de papel el hover lo dejaría con tinta azul sobre fondo casi negro.
 */
.lt-btn--copiar {
  background: var(--blanco);
  border-color: var(--marca-borde);
  color: var(--marca);
}

/* El hover TINTA el fondo en vez de invertirlo: el texto sigue siendo el mismo
   azul sobre un papel más azul (7,7:1) y no hay ningún instante previo al clic
   con el contraste hundido. */
.lt-btn--copiar:hover {
  background: var(--marca-claro);
  border-color: var(--marca);
  color: var(--marca);
}

/*
 * La confirmación de la copia. Nace con `hidden` y la descubre el guion junto
 * al botón: sin JavaScript no hay copia, así que tampoco tiene que haber un
 * hueco vacío reservado debajo de los botones.
 *
 * `min-height` fijo para que al aparecer el texto no salte la página entera
 * hacia abajo — y sin transición ninguna: aquí no hay nada que animar, y un
 * texto que se desvanece es un texto a medio pintar.
 */
.lt-compartir__aviso {
  display: block;
  min-height: 1.4em;
  margin: var(--e-2) 0 0;
  color: var(--marca);
  font-weight: var(--peso-medio);
}

@media (max-width: 640px) {
  /*
   * En el teléfono los tres botones pasan a ocupar la fila entera. Es el mismo
   * criterio que en `.lt-contacto`: compartir por WhatsApp se pulsa con el
   * pulgar, muchas veces de pie, y tres pastillas apretadas en una fila de
   * 360 px dejan zonas de menos de 44 px.
   *
   * NO se toca aquí `min-height`: `.lt-btn` ya garantiza 46 px —por encima del
   * mínimo táctil de 44— y bajarlo a 44 sería empeorarlo creyendo arreglarlo.
   */
  .lt-compartir__botones .lt-btn {
    flex: 1 1 100%;
  }
}