/* Indicadores de Ciudad Juárez (escrito a mano; no pasa por Vite).
   Dos bloques: calidad de vida (dato fijo con su fuente, como los rankings)
   y las tarjetas del panel (cambio con flecha y barras de los últimos periodos). */

.ind-seccion { padding: 40px 16px 56px; }
.ind-contenedor { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* ---- Calidad de vida, agua y aire ---- */
/* Celular: una debajo de otra, con el ícono a la izquierda. Desde tableta: 3 en fila. */
.ind-calidad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; max-width: 480px; margin-top: 24px; }
.ind-calidad__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; text-align: left; align-content: start; }
.ind-calidad__item > * { grid-column: 2; margin: 0; }
.ind-calidad__item > .ind-calidad__icono { grid-column: 1; grid-row: 1 / span 4; width: 56px; height: 56px; object-fit: contain; }
.ind-calidad__texto { margin-top: 4px; }

@media (min-width: 768px) {
    .ind-calidad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: none; }
    .ind-calidad__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
    .ind-calidad__item > .ind-calidad__icono { width: 64px; height: 64px; margin: 8px 0; }
    .ind-calidad__texto { flex-grow: 1; margin-top: 0; }
}

/* ---- Tarjetas del panel ---- */
/* 2 columnas en celular y tableta (2 × 3), 3 en escritorio (3 × 2). */
.ind-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; width: 100%; margin-top: 64px; text-align: left; }
@media (min-width: 768px) { .ind-panel { column-gap: 32px; } }
@media (min-width: 1024px) { .ind-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; } }

.ind-tarjeta { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 0 40px; border-top: 1px solid #cfcfcf; cursor: pointer; }
/* Cada renglón de la tarjeta se alinea con el de sus vecinas, aunque un título ocupe más líneas */
@supports (grid-template-rows: subgrid) {
    .ind-tarjeta { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 4px; }
}
.ind-tarjeta > * { margin: 0; min-width: 0; }
/* Línea azul que crece al pasar el mouse */
.ind-tarjeta::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 3px; background: #4e92ce; transition: width .35s ease; }
.ind-tarjeta:hover::before,
.ind-tarjeta:focus-within::before { width: 100%; }

.ind-modulo { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #666; }
.ind-titulo { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; line-height: 1.2; color: #4e92ce; overflow-wrap: break-word; }
.ind-valor { display: flex; align-items: center; gap: .18em; margin-top: 6px !important; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.05; color: #303030; white-space: nowrap; }
.ind-etiqueta,
.ind-cambio { font-size: 15px; line-height: 1.35; color: #4a4a4a; }
.ind-cambio strong { color: #303030; }
.ind-sube { color: #1d7a46; }
.ind-baja { color: #c0392b; }
.ind-igual { color: #666; }
.ind-cambio .ind-sube,
.ind-cambio .ind-baja { font-weight: 700; }
.ind-flecha { display: inline-block; width: .6em; height: .6em; flex: none; fill: currentColor; } /* el CSS de 2025 pone los svg en bloque */
.ind-cambio .ind-flecha { width: .7em; height: .7em; margin-right: .15em; vertical-align: .02em; }

/* Barras de los últimos periodos: la actual en el azul de la marca */
.ind-barras { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 12px !important; }
.ind-barras span { position: relative; flex: 1; min-width: 0; background: #c9cdd2; border-radius: 1px 1px 0 0; transition: background-color .2s ease; }
.ind-barras .ind-barra--actual { background: #4e92ce; }
@media (hover: hover) {
    .ind-barras span:hover { background: #9fb9d1; }
    .ind-barras .ind-barra--actual:hover { background: #3d7fb8; }
    .ind-barras span:hover::after { content: attr(data-dato); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 7px; background: #303030; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; z-index: 2; }
    .ind-barras span:first-child:hover::after { left: 0; transform: none; }
    .ind-barras span:last-child:hover::after { left: auto; right: 0; transform: none; }
}

.ind-pie { margin-top: 8px !important; font-size: 12px; line-height: 1.4; color: #666; }
.ind-ver { justify-self: start; align-self: start; margin-top: 12px !important; padding: 6px 16px 5px; font-size: 14px; border-bottom-width: 2px; }

.ind-aviso { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: #666; }

@media (max-width: 400px) {
    .ind-etiqueta, .ind-cambio { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .ind-tarjeta::before, .ind-barras span { transition: none; }
}