/* Indicadores de manufactura · todo acotado a .mod-indicadores.
   El estilo de los módulos choca entre sí —uno alinea las tablas a la
   izquierda y otro a la derecha—, por eso cada uno lleva su CSS bajo su clase. */

/* El ámbar de la casa (#c78b00) da 2.95:1 sobre blanco y AA pide 4.5:1.
   Con 51 renglones eso deja de ser un detalle: éste da 5.59:1 y se usa para
   texto y cifras. El relleno del glifo puede seguir siendo el vivo, porque
   ahí el requisito es 3:1. */
.mod-indicadores { --verde:#1a7f37; --rojo:#b00000; --ambar:#8a6100; --ambar-vivo:#c78b00; }

.mod-indicadores .franja { border-bottom:1px solid var(--rule); padding-bottom:16px; margin-bottom:20px; }
.mod-indicadores .franja-cifras { font-size:15px; margin-bottom:8px; }
.mod-indicadores .doctrina { color:var(--meta); font-size:13px; line-height:1.5; max-width:70ch; margin:0 0 6px; }
.mod-indicadores .gobierno { color:var(--meta); font-size:13px; margin:0; }

/* ── Portada de familias ── */
.mod-indicadores .rejilla { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.mod-indicadores .tarjeta {
  display:block; padding:16px 18px 18px; text-decoration:none; color:inherit;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.mod-indicadores .tarjeta:nth-child(4n) { border-right:none; }
.mod-indicadores .tarjeta:hover { background:#fafafa; }
.mod-indicadores .cab { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mod-indicadores .cab b { font-size:13px; letter-spacing:.02em; }
.mod-indicadores .salud { margin-left:auto; font-size:11px; color:var(--meta); letter-spacing:.04em; }
.mod-indicadores .t-rojo .salud { color:var(--rojo); }
.mod-indicadores .t-ambar .salud { color:var(--ambar); }
.mod-indicadores .t-verde .salud { color:var(--verde); }

/* La regleta: una celda por indicador. Se lee la salud de la planta entera de
   un vistazo, y funciona impresa en blanco y negro porque distingue por FORMA. */
.mod-indicadores .regleta { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:12px; }
.mod-indicadores .celda { display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; }

.mod-indicadores .cuenta { font-size:12px; color:var(--meta); margin-bottom:10px; }
.mod-indicadores .de { opacity:.7; }
.mod-indicadores .linea { display:flex; gap:8px; font-size:12px; line-height:1.45; margin-top:4px; }
.mod-indicadores .lbl { color:var(--meta); min-width:52px; flex-shrink:0; }
.mod-indicadores .pie-portada { margin-top:18px; font-size:13px; color:var(--meta); }

/* ── Glifos ── */
.mod-indicadores .gl { flex-shrink:0; vertical-align:-1px; }
.mod-indicadores .gl-verde { fill:var(--verde); }
.mod-indicadores .gl-ambar { fill:none; stroke:var(--ambar-vivo); }
.mod-indicadores .gl-rojo  { fill:var(--rojo); }
.mod-indicadores .gl-nd    { stroke:#9a9a9a; }

/* ── Chips de navegación ── */
.mod-indicadores .chips { display:flex; flex-wrap:wrap; gap:14px; padding-bottom:12px;
  border-bottom:1px solid var(--rule); margin-bottom:18px; }
.mod-indicadores .chip { display:inline-flex; align-items:center; gap:5px;
  font-size:12px; text-decoration:none; color:var(--meta); }
.mod-indicadores .chip:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.mod-indicadores .chip.aqui { color:var(--ink); font-weight:600; }

.mod-indicadores .cab-familia { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.mod-indicadores .cab-familia h2 { font-size:19px; margin:0; display:flex; align-items:center; gap:8px; }

/* ── La tabla ── */
.mod-indicadores table.ind-tabla { width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums; }
.mod-indicadores .ind-tabla th { text-align:left; font-size:11px; color:var(--meta);
  font-weight:500; letter-spacing:.04em; padding:0 10px 8px; border-bottom:1px solid var(--ink); }
.mod-indicadores .ind-tabla td { padding:14px 10px; border-bottom:1px solid var(--rule);
  vertical-align:top; font-size:13px; }
.mod-indicadores .ind-tabla .gl-col { width:20px; padding-left:0; padding-top:16px; }
.mod-indicadores .ind-tabla .num { width:34px; color:var(--meta); font-size:12px; }
.mod-indicadores .ind-tabla .ind { max-width:48ch; }
.mod-indicadores .ind-tabla .ind b { display:block; font-weight:600; }
.mod-indicadores .def { display:block; color:var(--meta); font-size:12px; margin-top:2px; }
.mod-indicadores .val { font-weight:600; white-space:nowrap; text-align:right; width:92px; }
.mod-indicadores .meta-col { white-space:nowrap; color:var(--meta); font-size:12px; width:150px; }
.mod-indicadores .pie-col { color:var(--meta); font-size:11.5px; max-width:28ch; }
.mod-indicadores .resp { font-size:12px; white-space:nowrap; }

/* El tercer canal, además del glifo y del texto: la regla de la izquierda.
   Así el estado se distingue sin depender del color ni de la forma. */
.mod-indicadores .r-verde td:first-child { box-shadow:inset 1px 0 0 0 var(--rule); }
.mod-indicadores .r-ambar td:first-child { box-shadow:inset 1px 0 0 0 var(--ink); }
.mod-indicadores .r-rojo  td:first-child { box-shadow:inset 2px 0 0 0 var(--ink); }
.mod-indicadores .r-nd    td:first-child { box-shadow:inset 1px 0 0 0 #c9c9c9; }
.mod-indicadores .r-verde .val { color:var(--verde); }
.mod-indicadores .r-ambar .val { color:var(--ambar); }
.mod-indicadores .r-rojo  .val { color:var(--rojo); }
.mod-indicadores .r-nd    .val { color:#8a8a8a; font-weight:500; }

/* La razón del hueco y el destrabador van pegados a la explicación, no en una
   columna: sólo aparecen en la mitad de los renglones, y una columna vacía dos
   de cada tres veces es peor que una línea de prosa. */
.mod-indicadores .razon { margin-top:8px; padding-left:10px; border-left:1px solid var(--rule);
  color:var(--meta); font-size:12px; line-height:1.5; }
.mod-indicadores .destraba { margin-top:5px; color:var(--ink); }
.mod-indicadores .nota { margin-top:8px; padding-left:10px; border-left:1px dotted var(--rule);
  color:var(--meta); font-size:11.5px; line-height:1.5; }
.mod-indicadores .entregable { color:var(--ink); font-style:italic; }
.mod-indicadores .final { color:#9a9a9a; }
.mod-indicadores .prop { display:inline-block; margin-left:6px; font-size:10px;
  letter-spacing:.04em; color:var(--meta); border:1px solid var(--rule); padding:0 4px; }
.mod-indicadores .nota-pie { margin-top:16px; font-size:12px; color:var(--meta); max-width:70ch; }
.mod-indicadores .vacio { color:var(--meta); }

/* Los 51 de corrido: sin definición ni razón, para imprimir y para ratificar. */
.mod-indicadores .compacta td { padding:8px 10px; }
.mod-indicadores .compacta .fam { color:var(--meta); font-size:11.5px; }

@media (max-width:1100px) { .mod-indicadores .rejilla { grid-template-columns:repeat(2,1fr); }
  .mod-indicadores .tarjeta:nth-child(4n) { border-right:1px solid var(--rule); }
  .mod-indicadores .tarjeta:nth-child(2n) { border-right:none; } }
@media (max-width:700px) { .mod-indicadores .rejilla { grid-template-columns:1fr; }
  .mod-indicadores .tarjeta { border-right:none; }
  .mod-indicadores .pie-col, .mod-indicadores .ind-tabla .num { display:none; } }