/* ============================================================
   indicadores-area.css — Mosaico "Indicadores por Área".
   pages/indicadores-area.html: encabezado + un mosaico por área
   (.home-grid / .home-card de components.css).
   pages/indicadores-area/area.html: el área en un iframe.
   ============================================================ */

.indicadores-wrap {
  /* Más ancho que el contenido estándar: las matrices tienen un mes por columna. */
  max-width: 1400px;
  margin: var(--space-10) auto;
  padding: 0 var(--space-6) 3rem;
}

.indicadores-wrap--angosta { max-width: var(--max-width-content); }

/* ── Encabezado (mismo estilo que Procesos Operativos) ── */
.ind-intro {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-red);
  border-radius: var(--radius);
  padding: 1.75rem 2.25rem;
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-xs);
}

.ind-intro__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-2);
}

.ind-intro__title {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  letter-spacing: -0.3px;
  line-height: var(--line-height-tight);
}

.ind-intro__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: var(--line-height-base);
}

.ind-section-label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-3);
}

/* ── Área en iframe ── */
.indicadores-frame-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.indicadores-frame-wrap[hidden] { display: none; }

.indicadores-frame {
  display: block;
  width: 100%;
  border: 0;
  /* Alto inicial; js/indicadores-area.js lo ajusta al contenido. */
  height: 600px;
}

.indicadores-vacio {
  color: var(--color-text-muted);
  text-align: center;
  padding: 2rem 0;
}

.indicadores-vacio[hidden] { display: none; }
.indicadores-wrap .site-footer { margin-top: 2rem; }