/* ==============================================================================
   Sistema: Ecovía Comechingones (Smart City & Tourism)
   Creador y Desarrollador: Silvio Deandrea
   Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
   Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
   ==============================================================================
   F81 · Etapa C.6 — capa premium de Auditoría Ciudadana (`actualizar/8.png`).

   Es la cara PÚBLICA de la transparencia: sin login, sin PII, tema claro con el
   teal institucional. Página de lectura, no de trabajo: un hero a todo el ancho,
   secciones anchas y tipografía grande.
   ============================================================================== */

:root { --tr-teal: #004860; --tr-teal-2: #006060; }

body {
  background: var(--eco-bg);
  color: var(--eco-ink);
  font-family: var(--eco-font-ui, system-ui, sans-serif);
}

/* Ancho de lectura de todo el portal (el maquetado viejo era `max-w-5xl`). */
.tr-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--eco-s5); }
@media (max-width: 767.98px) { .tr-wrap { padding-inline: var(--eco-s4); } }

/* -------------------------------------------------------------------------- */
/* 1. Hero                                                                     */
/* -------------------------------------------------------------------------- */

.tr-hero {
  background: linear-gradient(135deg, var(--tr-teal) 0%, var(--tr-teal-2) 100%);
  color: #fff;
  padding: var(--eco-s7) 0 var(--eco-s7);
  position: relative;
  overflow: hidden;
}
/* Sierras vectoriales: la referencia lleva foto de la Ruta 1, pero el backend no
   publica ninguna y la fase prohíbe inventar imágenes. */
.tr-hero__sierras {
  position: absolute; inset: auto 0 -1px 0;
  width: 100%; height: 120px;
  opacity: .18;
  pointer-events: none;
}
.tr-hero__body { position: relative; }
.tr-hero__eyebrow {
  font-size: var(--eco-fs-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .85;
  font-weight: 700;
}
.tr-hero__title {
  font-family: var(--eco-font-display);
  font-size: clamp(2rem, 5vw, var(--eco-fs-3xl));
  font-weight: 700;
  line-height: 1.05;
  margin: var(--eco-s3) 0 0;
}
.tr-hero__sub {
  font-size: var(--eco-fs-md);
  opacity: .92;
  margin: var(--eco-s3) 0 0;
  max-width: 62ch;
}
.tr-hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--eco-s5);
  padding: 8px 16px;
  border-radius: var(--eco-radius-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: var(--eco-fs-sm);
  font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* 2. Barra de municipio + fecha de corte                                      */
/* -------------------------------------------------------------------------- */

.tr-selector {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--eco-s5);
  margin-top: calc(var(--eco-s6) * -1);
  position: relative; z-index: 2;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  box-shadow: var(--eco-shadow-md, 0 8px 24px rgba(15, 23, 42, .08));
  padding: var(--eco-s5);
}
.tr-selector__campo { flex: 1 1 260px; min-width: 0; }
.tr-selector__label {
  display: block;
  font-size: var(--eco-fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--eco-muted);
  margin-bottom: 6px;
}
.tr-selector select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--eco-radius-sm);
  border: 1px solid var(--eco-border-strong);
  background: var(--eco-surface);
  color: var(--eco-ink);
  font-size: var(--eco-fs-base);
  font-weight: 600;
}
.tr-selector__corte { flex: 0 1 auto; }
.tr-selector__corte b { display: block; font-size: var(--eco-fs-base); color: var(--eco-ink); }

/* -------------------------------------------------------------------------- */
/* 3. KPI públicos (ícono en círculo teal claro)                               */
/* -------------------------------------------------------------------------- */

.tr-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--eco-s4);
}
@media (max-width: 959.98px) { .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En teléfono siguen de a dos: uno por fila obligaba a scrollear cuatro
   pantallas para ver los cuatro números. */
@media (max-width: 519.98px) {
  .tr-kpi { padding: var(--eco-s4); }
  /* «323.4 h» se partía en dos renglones a este ancho. */
  .tr-kpi__valor { font-size: var(--eco-fs-xl); white-space: nowrap; }
  .tr-kpi__icon { width: 44px; height: 44px; }
}
@media (max-width: 359.98px) { .tr-kpis { grid-template-columns: minmax(0, 1fr); } }

.tr-kpi {
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  padding: var(--eco-s5);
  text-align: center;
}
.tr-kpi__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--eco-s3);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #d8f0f0;
  color: var(--tr-teal);
}
.tr-kpi__valor {
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--eco-ink);
}
.tr-kpi__label { font-size: var(--eco-fs-sm); font-weight: 600; color: var(--eco-ink-2); margin-top: 4px; }
.tr-kpi__pie { font-size: var(--eco-fs-xs); color: var(--eco-muted); margin-top: 6px; }

/* -------------------------------------------------------------------------- */
/* 4. Rejilla de secciones                                                     */
/* -------------------------------------------------------------------------- */

.tr-duo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--eco-s5); align-items: start; }
@media (max-width: 1023.98px) { .tr-duo { grid-template-columns: minmax(0, 1fr); } }
.tr-col { display: grid; gap: var(--eco-s5); align-content: start; min-width: 0; }

/* Mapa con la leyenda en tarjeta blanca DENTRO del mapa (como la referencia). */
.tr-mapa { position: relative; border-radius: var(--eco-radius-md); overflow: hidden; }
.tr-mapa__lienzo { height: 420px; }
@media (max-width: 767.98px) { .tr-mapa__lienzo { height: 320px; } }
.tr-mapa__leyenda {
  position: absolute; left: 12px; bottom: 12px; z-index: 500;
  background: var(--eco-surface);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-sm);
  box-shadow: var(--eco-shadow-md, 0 8px 24px rgba(15, 23, 42, .12));
  padding: 10px 12px;
  font-size: var(--eco-fs-xs);
}
.tr-mapa__leyenda p { margin: 0 0 6px; font-weight: 700; color: var(--eco-ink-2); }
.tr-leyenda__item { display: flex; align-items: center; gap: 8px; color: var(--eco-muted); }
.tr-leyenda__item + .tr-leyenda__item { margin-top: 4px; }
.tr-leyenda__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* Varios reclamos en la misma coordenada: un marcador con la cantidad. */
.tr-cluster {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .35);
  color: #fff;
  font-size: var(--eco-fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Filtros de estado del mapa (client-side sobre los puntos ya publicados). */
.tr-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--eco-s3); }
.tr-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--eco-radius-pill);
  border: 1px solid var(--eco-border-strong);
  background: var(--eco-surface);
  color: var(--eco-muted);
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.tr-filtro[aria-pressed='true'] {
  background: var(--tr-teal);
  border-color: var(--tr-teal);
  color: #fff;
}

/* Eficiencia por área: barra + % + reclamos + MTTR. */
.tr-area { padding: var(--eco-s3) 0; border-bottom: 1px solid var(--eco-border); }
.tr-area:last-child { border-bottom: 0; }
.tr-area__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-s3); }
.tr-area__nombre { font-size: var(--eco-fs-sm); font-weight: 700; color: var(--eco-ink-2); }
.tr-area__pct { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--tr-teal); }
.tr-area__track {
  height: 10px; margin: 7px 0 6px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-soft);
  overflow: hidden;
}
.tr-area__bar { height: 100%; border-radius: var(--eco-radius-pill); background: var(--tr-teal-2); min-width: 4px; }
.tr-area__pie { display: flex; flex-wrap: wrap; gap: var(--eco-s4); font-size: var(--eco-fs-xs); color: var(--eco-muted); }

/* Bloque de confianza: cómo se generan estos datos. */
.tr-confianza { display: grid; gap: var(--eco-s3); }
.tr-confianza__item { display: flex; gap: var(--eco-s3); }
.tr-confianza__icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #d8f0f0;
  color: var(--tr-teal);
}
.tr-confianza__titulo { margin: 0; font-size: var(--eco-fs-sm); font-weight: 700; color: var(--eco-ink); }
.tr-confianza__texto { margin: 2px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-muted); line-height: 1.45; }

/* -------------------------------------------------------------------------- */
/* 5. Franja CTA + footer                                                      */
/* -------------------------------------------------------------------------- */

.tr-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-s5);
  background: linear-gradient(135deg, var(--tr-teal) 0%, var(--tr-teal-2) 100%);
  color: #fff;
  border-radius: var(--eco-radius-lg);
  padding: var(--eco-s6);
}
.tr-cta__texto { flex: 1 1 340px; min-width: 0; }
.tr-cta__titulo { font-family: var(--eco-font-display); font-size: var(--eco-fs-xl); font-weight: 700; margin: 0; }
.tr-cta__sub { margin: 8px 0 0; opacity: .92; font-size: var(--eco-fs-sm); max-width: 56ch; }
.tr-cta__acciones { display: flex; flex-wrap: wrap; gap: var(--eco-s3); }
.tr-cta .eco-btn--primary { background: #fff; color: var(--tr-teal); border-color: #fff; }
.tr-cta .eco-btn--outline { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }

.tr-foot {
  border-top: 1px solid var(--eco-border);
  margin-top: var(--eco-s7);
  padding: var(--eco-s5) 0 var(--eco-s7);
  font-size: var(--eco-fs-sm);
  color: var(--eco-muted);
}
.tr-foot__links { display: flex; flex-wrap: wrap; gap: var(--eco-s5); margin-bottom: var(--eco-s3); }
.tr-foot__links a { color: var(--tr-teal); font-weight: 600; text-decoration: none; }
.tr-foot__links a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------- */
/* 6. Espaciado vertical de las secciones                                      */
/* -------------------------------------------------------------------------- */

.tr-seccion { margin-top: var(--eco-s7); }
.tr-seccion--corta { margin-top: var(--eco-s5); }