/* centinela — lo propio del sitio. Tokens, fuentes y componentes compartidos (encabezado, tablas,
   estados, botones, bloque Portafolio) vienen de tema.css, que se carga antes; aquí no se redefinen tokens.
   Guía: consulta/docs/guia-de-estilo.md. */

.pbi-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}
.pbi-embed iframe { width: 100%; height: 100%; border: none; }
.pbi-embed .placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Fila de subtotal (ej. Resultado Operacional en el Estado de Resultados) —
   se distingue de las líneas de detalle sin depender solo del <strong>. */
tr.subtotal td { border-top: 2px solid var(--border-strong); background: var(--surface-2); }

/* Controles de formulario (datos.html: selector de ejemplo/mes, umbrales) */
.form-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.form-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.form-controls select, .form-controls input {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
}
.form-controls select:focus-visible, .form-controls input:focus-visible { outline: var(--focus); outline-offset: 1px; }

/* ------------------------------------------------------------------ reporte.html
   Reporte "estilo Power BI": KPI, visuales en tarjeta y la medida DAX de cada uno. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.kpi, .visual {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  position: relative;
}
.kpi-nombre { margin: 0; font-size: var(--fs-sm); color: var(--muted); padding-right: 40px; }
.kpi-valor { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: 500; }
.kpi .btn-dax { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.kpi .dax pre { font-size: 0.74rem; }

.visual-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.visual-cab h2 { font-size: var(--fs-lg); }

.btn-dax {
  font-family: var(--mono);
  font-size: 0.72rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--accent);
  padding: 1px 7px;
  cursor: pointer;
}
.btn-dax:hover, .btn-dax[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-weak); }
.btn-dax:focus-visible { outline: var(--focus); outline-offset: 2px; }

.dax { margin-top: var(--sp-3); }
.dax-meta { margin: var(--sp-2) 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.dax pre {
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow-x: auto;
  line-height: 1.45;
}

.grafico svg { width: 100%; height: auto; display: block; }
.grafico .grilla { stroke: var(--border); stroke-width: 1; }
.grafico .eje { fill: var(--muted); font-size: 11px; }
.grafico .eje.sel { fill: var(--accent); font-weight: 600; }
.grafico .serie-ppto { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 4; }
.grafico .serie-real { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.grafico .punto-real { fill: var(--accent); }
.grafico .barra.ok { fill: var(--ok); }
.grafico .barra.alerta { fill: var(--alerta); }
.grafico .barra.critica { fill: var(--critica); }
.leyenda { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0 0; }
.leyenda .sw { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.leyenda .sw-ppto { border-top: 2px dashed var(--faint); height: 0; }
.leyenda .sw-real { background: var(--accent); }
.eje-nota { color: var(--faint); }

#t-matriz tr.nivel-1 td { font-weight: 600; background: var(--surface-2); }
#t-matriz tr.nivel-2 td:first-child { padding-left: 28px; color: var(--muted); }
/* Al abrir el DAX de un KPI, la tarjeta ocupa toda la fila para que la fórmula se lea. */
.kpi:has(.dax:not([hidden])) { grid-column: 1 / -1; }
#t-escenarios tr.seleccionada td { background: var(--accent-weak); font-weight: 600; }

/* ------------------------------------------------------------------ vitrina (index, ficha)
   Cada reporte trae su color (--acento, desde vitrina.js). En Grafito ese color ya no pinta rieles
   ni bordes: queda como un punto junto a la etiqueta del reporte. */
.perfil-enlaces { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.eyebrow { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.opcion .eyebrow::before, .tarjeta-rep .eyebrow::before, .visor .eyebrow::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento, var(--accent)); margin-right: 6px; vertical-align: 1px;
}

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: var(--sp-3) 0; }
.chips li { font-size: var(--fs-xs); color: var(--muted); border-radius: var(--r-chip); padding: 2px 8px; background: var(--surface-2); }

#destacado { margin-bottom: var(--sp-8); }
#destacado h2 { font-size: var(--fs-xl); }
.acciones-destacado { margin: var(--sp-4) 0 0; }

/* Panel "la vitrina en una pantalla": selector de reportes + visor con el embed. */
.panel-vitrina { display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: var(--sp-6); align-items: start; }
.selector { display: flex; flex-direction: column; gap: var(--sp-1); }
.opcion {
  display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r);
  padding: var(--sp-2) var(--sp-3); transition: background var(--t), border-color var(--t);
}
.opcion:hover { background: var(--surface-2); }
.opcion[aria-selected="true"] { background: var(--surface-2); border-color: var(--text); }
.opcion .eyebrow { margin: 0; }
.opcion strong { font-size: var(--fs-md); line-height: 1.3; }
.opcion-cifra { font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); }
.opcion-cifra strong { font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.opcion-cifra.ok { color: var(--ok); }
.opcion-cifra.critica { color: var(--critica); }
.visor { padding-top: 0; }
.visor h2 { margin-top: 0; font-size: var(--fs-xl); }

/* Cifras del reporte en el visor: el estado lo marca un punto, como en .estado */
.cifras { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0 0 var(--sp-4); }
.cifras li {
  display: flex; align-items: baseline; gap: 6px; border-radius: var(--r); padding: 4px 10px;
  background: var(--surface-2); font-size: var(--fs-sm);
}
.cifras li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); align-self: center; flex: none; }
.cifras li.ok::before { background: var(--ok); }
.cifras li.critica::before { background: var(--critica); }
.cifras li strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.cifras li span { color: var(--muted); }
.cifras li span strong { color: var(--text); }
@media (max-width: 760px) {
  .panel-vitrina { grid-template-columns: 1fr; }
  .selector { flex-direction: row; overflow-x: auto; }
  .opcion { min-width: 200px; }
}

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.tarjeta-rep {
  display: block; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r);
  padding: var(--sp-4); color: var(--text); text-decoration: none; transition: border-color var(--t);
}
a.tarjeta-rep:hover { border-color: var(--text); }
.tarjeta-rep img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-chip); margin-bottom: var(--sp-3); }
.tarjeta-rep h3 { margin: 0 0 6px; font-size: var(--fs-lg); }
.tarjeta-resumen { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.tarjeta-rep.proximo { background: transparent; border: 1px dashed var(--border-strong); }
.tarjeta-rep.proximo .eyebrow::before { background: var(--faint); }

.tarjetas.compactas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
.tarjeta-sec {
  display: block; border: 1px solid transparent; border-radius: var(--r); padding: var(--sp-3);
  text-decoration: none; color: var(--text); background: var(--surface-2); transition: border-color var(--t);
}
.tarjeta-sec:hover { border-color: var(--text); }
.tarjeta-sec strong { display: block; margin-bottom: 4px; }
.tarjeta-sec span { color: var(--muted); font-size: var(--fs-sm); }

.enlace-sec { font-size: var(--fs-sm); }
.historias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.historia { border-radius: var(--r); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); }
.historia p { margin: 0; }
.historia-industria { font-weight: 600; }
.historia-resultado { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; margin: 4px 0 !important; }
.historia.critica .historia-resultado { color: var(--critica); }
.historia-texto { color: var(--muted); font-size: var(--fs-sm); }

.descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
.descarga {
  display: block; border: 1px solid transparent; border-radius: var(--r); padding: var(--sp-3);
  text-decoration: none; background: var(--surface-2); transition: border-color var(--t);
}
.descarga:hover { border-color: var(--text); }
.descarga-etiqueta { display: block; font-weight: 600; color: var(--accent); }
.descarga-etiqueta::before { content: "↓ "; }
.descarga-detalle { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

.guia { background: var(--surface-2); border-radius: var(--r); padding: var(--sp-4) var(--sp-6); }
.guia h1 { font-size: var(--fs-xl); margin-top: 0; }
.guia h2 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.guia blockquote { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--surface); border-radius: var(--r); color: var(--muted); }
.guia pre { background: var(--surface); padding: var(--sp-3); border-radius: var(--r); overflow-x: auto; }
.guia table { margin: var(--sp-3) 0; }
.guia h3 { font-size: 1.1rem; margin-top: var(--sp-6); }
.guia h4 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); }
.glosario-pliegue > summary { cursor: pointer; font-weight: 600; margin: var(--sp-3) 0; color: var(--accent); }
.enlaces { padding-left: 1.2em; }
.enlaces li { margin-bottom: 4px; }

@media (max-width: 480px) {
  .guia { padding: var(--sp-3); }
}
#interactivo .visual-cab h2, #guia .visual-cab h2 { font-size: var(--fs-xl); }