/* ==========================================================================
   Tableros de estadísticas — colores de datos validados (categórica 4 series, rampa ordinal azul)
   ========================================================================== */
.tablero, .contenido {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --ord-1: #86b6ef;   --ord-2: #3987e5;   --ord-3: #1c5cab;   --ord-4: #0d366b;
  --rejilla: #e6edf4; --eje: #c4d2e0;
  --bueno: #006300;   --malo: #c42f2f;
}
.tablero { padding-top: 4px; padding-bottom: 88px; }

/* Barra de filtros: una sola fila sobre el contenido */
.tablero__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 24px; }
.segmentos { display: inline-flex; gap: 2px; padding: 4px; background: var(--tinte); border-radius: 999px; }
.segmentos button { border: 0; background: transparent; color: var(--marino-900); font: 700 .92rem/1 var(--fuente-texto);
                    padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.segmentos button:hover { background: rgba(15,61,102,.08); }
.segmentos button[aria-checked="true"] { background: var(--marino-800); color: #fff; }
.otras-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.otras-areas a { padding: 9px 15px; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--marino-900); border: 1px solid var(--linea); background: #fff; }
.otras-areas a:hover { border-color: var(--marino-800); }
.otras-areas a.es-activo { background: var(--marino-900); color: #fff; border-color: var(--marino-900); }

.tablero__estado { color: var(--tinta-2); padding: 8px 0 16px; }
.tablero__estado:empty { display: none; }
.tablero__estado button { margin-left: 12px; }
.tablero.cargando .kpis, .tablero.cargando .graficos { opacity: .5; transition: opacity .2s; }
#tablero-aviso:not(:empty) { margin-bottom: 20px; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--linea); border-radius: 22px; min-width: 0; }
.kpi__et { font-size: .92rem; font-weight: 600; color: var(--tinta-2); line-height: 1.3; }
.kpi__valor { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--tinta); }
.kpi--hero { background: linear-gradient(160deg, var(--marino-900), var(--marino-700)); border: 0; color: #fff; }
.kpi--hero .kpi__et { color: #cfe0f0; font-size: 1rem; }
.kpi--hero .kpi__valor { font-size: clamp(3rem, 5.2vw, 3.9rem); color: #fff; margin-top: 4px; }
.kpi__delta { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: .88rem; font-weight: 700; margin-top: 2px; }
.kpi__vs { font-weight: 500; color: var(--tinta-3); }
.kpi__delta--bueno { color: var(--bueno); }
.kpi__delta--malo  { color: var(--malo); }
.kpi__delta--neutro { color: var(--tinta-2); }
.kpi--hero .kpi__delta--bueno { color: #7ee7c6; }
.kpi--hero .kpi__delta--malo { color: #ffb4a8; }
.kpi--hero .kpi__delta--neutro { color: #d3e3f1; }
.kpi--hero .kpi__vs { color: #a9c2d9; }
.kpi .spark { margin-top: auto; align-self: flex-end; color: var(--serie-1); padding-top: 8px; }
.kpi--hero .spark { color: var(--menta); }

/* Gráficos */
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grafico { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 24px; min-width: 0; }
.grafico--completo { grid-column: 1 / -1; }
.grafico__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.grafico__cab h3 { font-family: var(--fuente-texto); font-size: 1.1rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.grafico__cab p { color: var(--tinta-3); font-size: .88rem; margin-top: 3px; }
.ver-tabla { display: inline-flex; align-items: center; gap: 7px; flex: none; border: 1px solid var(--linea); background: #fff; color: var(--marino-900);
             font: 600 .84rem/1 var(--fuente-texto); padding: 9px 13px; border-radius: 999px; cursor: pointer; }
.ver-tabla:hover { border-color: var(--marino-800); }

/* Línea */
.g-linea__lienzo { width: 100%; }
.g-linea svg { display: block; width: 100%; overflow: visible; }
.g-linea svg:focus-visible { outline: 3px solid var(--foco); outline-offset: 6px; border-radius: 4px; }
.g-linea text { font: 500 12px var(--fuente-texto); fill: var(--tinta-3); }
.g-linea .valor-fin { font-weight: 700; fill: var(--tinta-2); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.leyenda button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 10px 6px 4px; border-radius: 999px;
                  color: var(--tinta-2); font: 600 .88rem/1 var(--fuente-texto); cursor: pointer; }
.leyenda button:hover { background: var(--tinte); }
.leyenda button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.llave-linea { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }

/* Barras horizontales */
.barras { display: grid; gap: 14px; }
.barra { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 14px; align-items: center; border-radius: 8px; outline-offset: 4px; }
.barra__nombre { font-size: .94rem; color: var(--tinta-2); line-height: 1.3; }
.barra__pista { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--eje); min-height: 20px; }
.barra__relleno { display: block; height: 18px; border-radius: 0 4px 4px 0; background: var(--serie-1); transition: filter .12s; min-width: 2px; }
.barra:hover .barra__relleno, .barra:focus-visible .barra__relleno { filter: brightness(.88); }
.barra__valor { font-size: .92rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Columnas */
.columnas { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; height: 230px; padding-top: 6px; border-bottom: 1px solid var(--eje); }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; border-radius: 8px; outline-offset: 2px; }
.col__valor { font-size: .92rem; font-weight: 700; color: var(--tinta); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.col__barra { width: 24px; border-radius: 4px 4px 0 0; background: var(--serie-1); min-height: 2px; transition: filter .12s; }
.col:hover .col__barra, .col:focus-visible .col__barra { filter: brightness(.88); }
.columnas-nombres { display: flex; justify-content: space-around; gap: 12px; padding-top: 10px; }
.columnas-nombres span { flex: 1; text-align: center; font-size: .92rem; color: var(--tinta-2); }

/* Proporción (barra apilada al 100 %) */
.prop { display: flex; gap: 2px; height: 40px; border-radius: 4px; overflow: hidden; }
.prop__seg { display: grid; place-items: center; font-size: .82rem; font-weight: 700; min-width: 3px; transition: filter .12s; }
.prop__seg:hover, .prop__seg:focus-visible { filter: brightness(.9); outline-offset: -3px; }
.prop-leyenda { margin-top: 18px; display: grid; gap: 4px; }
.prop-leyenda li { display: grid; grid-template-columns: 14px 1fr auto 56px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rejilla); font-size: .94rem; }
.prop-leyenda li:first-child { border-top: 0; }
.llave-caja { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.prop-leyenda b, .prop-leyenda .pct { font-variant-numeric: tabular-nums; }
.prop-leyenda .pct { text-align: right; color: var(--tinta-3); }

/* Tabla (vista equivalente de cada gráfico) */
.g-tabla { overflow-x: auto; }
.g-tabla table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.g-tabla caption { text-align: left; color: var(--tinta-3); font-size: .84rem; padding-bottom: 8px; }
.g-tabla th, .g-tabla td { padding: 9px 10px; border-top: 1px solid var(--rejilla); text-align: left; }
.g-tabla thead th { border-top: 0; border-bottom: 1px solid var(--eje); font-weight: 700; color: var(--tinta-2); }
.g-tabla td.num, .g-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tooltip */
.tip { position: fixed; z-index: 200; pointer-events: none; min-width: 150px; max-width: 280px; padding: 10px 12px; background: #fff; border: 1px solid var(--linea);
       border-radius: 12px; box-shadow: 0 12px 30px rgba(11,43,74,.18); font-size: .86rem; }
.tip[hidden] { display: none; }
.tip__tit { font-weight: 700; color: var(--tinta-2); margin-bottom: 6px; }
.tip__fila { display: grid; grid-template-columns: 14px auto 1fr; gap: 8px; align-items: center; padding: 2px 0; }
.tip__fila b { font-size: 1rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tip__fila span { color: var(--tinta-3); }
.tip__llave { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

.tablero__fuente { color: var(--tinta-3); font-size: .86rem; margin-top: 22px; max-width: 90ch; }
.powerbi { margin-top: 44px; }
.powerbi h2 { font-size: 1.6rem; margin-bottom: 16px; }
.powerbi iframe { width: 100%; height: 640px; border: 1px solid var(--linea); border-radius: 22px; background: #fff; }

/* Panorama general */
.areas-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.area-tarjeta { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--linea); border-radius: 24px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.area-tarjeta:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.area-tarjeta__cab { display: flex; align-items: center; gap: 16px; }
.area-tarjeta__cab h2 { font-size: 1.7rem; }
.area-tarjeta__txt { color: var(--tinta-2); }
.area-tarjeta__cifra { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rejilla); border-bottom: 1px solid var(--rejilla); }
.area-tarjeta__valor { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.area-tarjeta__rotulo { display: block; font-size: .86rem; color: var(--tinta-3); margin-top: 2px; }
.area-tarjeta__spark { color: var(--serie-1); }
.area-tarjeta .enlace-flecha { align-self: flex-start; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi--hero { grid-column: 1 / -1; }
  .graficos, .areas-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tablero__barra { flex-direction: column; align-items: stretch; }
  .segmentos { display: grid; grid-template-columns: repeat(3, 1fr); }
  .segmentos button { padding: 11px 6px; font-size: .84rem; }
  .kpis { grid-template-columns: 1fr; }
  .grafico { padding: 18px; }
  .grafico__cab { flex-direction: column; gap: 10px; }
  .barra { grid-template-columns: 1fr; gap: 4px; }
  .prop-leyenda li { grid-template-columns: 14px 1fr auto 48px; }
}