/*
 * NUESTRO ALCANCE — inc/alcance.php
 *
 * Dos bloques en una fila: las visitas por ciudad y las cifras de redes.
 *
 * ---------------------------------------------------------------------------
 * POR QUE BARRAS Y NO UN GRAFICO
 * ---------------------------------------------------------------------------
 * Son seis ciudades con un numero cada una. Un grafico de verdad —una libreria,
 * un canvas, un lienzo que redibujar al cambiar de tamano— cuesta decenas de
 * kilobytes y no dice ni un dato mas que una barra dibujada con un degradado.
 *
 * La barra es el FONDO de la celda del numero, con la anchura en un porcentaje
 * que escribe PHP en una variable. Cero elementos extra, cero JavaScript, y se
 * lee igual en un telefono que en una pantalla grande.
 *
 * Y la tabla es una <table> de verdad: quien usa lector de pantalla oye
 * «Austin, 500 personas» fila por fila. Con <div> oiria doce palabras sueltas.
 */

.lt-alcance__rejilla {
  display: grid;
  gap: var(--e-5);
}

@media (min-width: 900px) {
  /* Las ciudades ocupan mas: son seis filas de texto contra cuatro cifras
     sueltas. Dos columnas iguales dejarian medio bloque de redes vacio. */
  .lt-alcance__rejilla { grid-template-columns: 1.35fr 1fr; gap: var(--e-6); }
}

.lt-alcance__bloque { min-width: 0; }

.lt-alcance__subtitulo {
  margin: 0 0 var(--e-2);
  font-size: 1.15rem;
}

.lt-alcance__total {
  margin: 0 0 var(--e-3);
  color: var(--apagado);
  font-size: .95rem;
}

.lt-alcance__total strong {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ---- La tabla de ciudades ---- */

.lt-alcance__tabla {
  width: 100%;
  border-collapse: collapse;
}

.lt-alcance__fila + .lt-alcance__fila > * { padding-top: var(--e-2); }

.lt-alcance__ciudad {
  /* La ciudad manda el ancho de su columna y no se parte: «San Antonio» en dos
     lineas rompe la alineacion de todas las barras de al lado. */
  width: 1%;
  padding-right: var(--e-3);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/*
 * REJILLA Y NO FLEX, Y ESTE ES EL MOTIVO.
 *
 * Con flex, la barra de la ciudad mas visitada mide el 100 % del carril y
 * empuja su numero FUERA de la pantalla. Se vio en el movil: «Austin» tenia la
 * barra entera y el 38 cortado por el borde derecho.
 *
 * Con `minmax(0, 1fr) auto` el numero se queda con su ancho y la barra ocupa un
 * porcentaje de LO QUE SOBRA. La barra mas larga sigue siendo la mas larga y
 * ninguna se sale. El `minmax(0, …)` es imprescindible: un `1fr` a secas tiene
 * ancho minimo automatico y volveria a desbordar.
 */
.lt-alcance__valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-2);
}

.lt-alcance__barra {
  /* `--lt-parte` lo escribe PHP: 100% la ciudad con mas gente, y el resto en
     proporcion a ella. Es una comparacion entre ciudades, no un porcentaje del
     total — con seis ciudades, porcentajes del total darian seis barras
     cortas y ninguna se distinguiria de la de al lado. */
  width: var(--lt-parte, 0%);
  height: 12px;
  min-width: 4px;
  border-radius: 999px;
  background: var(--degradado-marca);
}

.lt-alcance__numero {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---- Las cifras de redes ---- */

.lt-alcance__redes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-alcance__red {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}

.lt-alcance__red-enlace {
  display: contents;   /* el enlace no dibuja caja: la caja es el <li> */
  color: inherit;
  text-decoration: none;
}

.lt-alcance__red:has(.lt-alcance__red-enlace:hover),
.lt-alcance__red:has(.lt-alcance__red-enlace:focus-visible) {
  border-color: var(--marca);
}

.lt-alcance__red-numero {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--marca);
}

.lt-alcance__red-rotulo {
  font-size: .8125rem;
  color: var(--apagado);
}

.lt-alcance__red-nombre {
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-alcance__pie {
  margin: var(--e-2) 0 0;
  font-size: .8125rem;
  color: var(--apagado);
}

@media (max-width: 480px) {
  .lt-alcance__redes { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* LA COMUNIDAD EN WHATSAPP                                            */
/* inc/alcance.php · pintar_whatsapp()                                 */
/* ================================================================== */

/*
 * Va sobre fondo noche (`lt-seccion--noche`), asi que los botones son los de
 * la casa: solido para la accion principal —el canal— y fantasma para los
 * grupos. NO se usa el verde de WhatsApp: la paleta del sitio es azul, blanco
 * y negro, y ocho botones verdes seguidos romperian la pagina entera.
 */
.lt-comunidad__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.lt-comunidad__btn { font-size: 1rem; }

.lt-comunidad__subtitulo {
  margin: var(--e-5) 0 var(--e-2);
  font-size: 1.05rem;
  color: var(--niebla);
}

.lt-comunidad__grupos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El nombre del grupo puede ser largo («Empleos Austin y alrededores»): que se
   parta en dos lineas antes que salirse de la pantalla en un movil. */
.lt-comunidad__grupo {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}