/* PG Forja Clínica · Panel de dirección y objetivos.
 * Colores de los gráficos por función (serie, estados) y con valores propios para claro y oscuro. */
.pgo-panel, .pgo-objs, .pgo-kpis {
  --pgo-serie: #2a78d6;          /* serie única: azul validado sobre superficie clara */
  --pgo-rejilla: #e6eaee;
  --pgo-bien: #0f7a2f; --pgo-mal: #c0392b; --pgo-riesgo: #b36b00; --pgo-neutro: #6b7684;
}
:root[data-tema="oscuro"] .pgo-panel, :root[data-tema="oscuro"] .pgo-objs, :root[data-tema="oscuro"] .pgo-kpis {
  --pgo-serie: #3987e5; --pgo-rejilla: #2a3440;
  --pgo-bien: #35c26b; --pgo-mal: #ff7b72; --pgo-riesgo: #f0b232; --pgo-neutro: #97a3b0;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] .pgo-panel, :root[data-tema="auto"] .pgo-objs, :root[data-tema="auto"] .pgo-kpis {
    --pgo-serie: #3987e5; --pgo-rejilla: #2a3440;
    --pgo-bien: #35c26b; --pgo-mal: #ff7b72; --pgo-riesgo: #f0b232; --pgo-neutro: #97a3b0;
  }
}

.pgo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pgo-panel { transition: opacity .15s; }
.pgo-panel.pgo-cargando { opacity: .55; pointer-events: none; }
.pgo-panel > .pg-tarjeta, .pgo-dos { margin-bottom: 14px; }
.pgo-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pgo-filtros .pgo-hueco { flex: 1 1 20px; }
.pgo-f input, .pgo-f select { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 8px; background: var(--superficie); min-height: 34px; }
.pgo-estado { margin: 6px 0 14px; }
.pgo-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pgo-dos > .pg-tarjeta { margin: 0; }
@media (max-width: 900px) { .pgo-dos { grid-template-columns: minmax(0, 1fr); } }

/* Qué mirar hoy */
.pgo-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pgo-alertas li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border: 1px solid var(--borde); border-left: 4px solid var(--pgo-neutro); border-radius: 10px; background: var(--superficie2); }
.pgo-alertas li.rojo { border-left-color: var(--pgo-mal); }
.pgo-alertas li.ambar { border-left-color: var(--pgo-riesgo); }
.pgo-alertas li.azul { border-left-color: var(--pgo-serie); }
.pgo-alertas .pg-chip { justify-self: start; }
.pgo-alertas p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }

/* Objetivos */
.pgo-objs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pgo-obj { --c: var(--pgo-neutro); padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.pgo-obj.verde { --c: var(--pgo-bien); }
.pgo-obj.ambar { --c: var(--pgo-riesgo); }
.pgo-obj.rojo { --c: var(--pgo-mal); }
.pgo-obj-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pgo-obj-nom { font-weight: 600; }
.pgo-obj-val { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 6px; }
.pgo-obj-val b { font-size: 22px; }
.pgo-obj-val span { color: var(--suave); font-size: 13px; }
/* La pista es un tono claro del mismo color que el relleno: el estado se lee en toda la barra. */
.pgo-pista { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--c) 20%, transparent); overflow: hidden; }
.pgo-pista i { display: block; height: 100%; background: var(--c); border-radius: 4px; min-width: 0; }
.pgo-obj-pie { margin: 6px 0 0; font-size: 12.5px; color: var(--suave); }
.pgo-obj-pie b { color: var(--texto); }

/* Tarjetas de indicador */
.pgo-grupo { margin: 14px 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.pgo-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pgo-kpis.mini { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 12px; }
.pgo-kpi { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie2); color: var(--texto); min-width: 0; }
button.pgo-kpi { cursor: pointer; }
button.pgo-kpi:hover { border-color: var(--pgo-serie); }
button.pgo-kpi:focus-visible, .pgo-graf:focus-visible { outline: 2px solid var(--pgo-serie); outline-offset: 2px; }
.pgo-kpi.on { border-color: var(--pgo-serie); box-shadow: inset 0 0 0 1px var(--pgo-serie); }
.pgo-kpi-nom { font-size: 12.5px; color: var(--suave); }
.pgo-kpi-val { font-size: 22px; font-weight: 650; line-height: 1.2; }
.pgo-kpis.mini .pgo-kpi-val { font-size: 18px; }
/* El número de la variación va en color de texto; el sentido lo dan la flecha, el signo y las palabras. */
.pgo-delta { font-size: 12.5px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgo-delta i { font-style: normal; font-size: 10px; margin-right: 3px; color: var(--pgo-neutro); }
.pgo-delta.bien i { color: var(--pgo-bien); }
.pgo-delta.mal i { color: var(--pgo-mal); }
.pgo-frente { color: var(--suave); }
.pgo-chispa { width: 96px; height: 26px; margin-top: 4px; }
.pgo-chispa path { fill: none; stroke: var(--pgo-neutro); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pgo-chispa circle { fill: var(--pgo-serie); }

/* Gráfico de evolución */
.pgo-graf { position: relative; border-radius: 8px; }
.pgo-graf svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.pgo-graf .rej { stroke: var(--pgo-rejilla); stroke-width: 1; }
.pgo-graf .cero { stroke: var(--suave); stroke-width: 1; }
.pgo-graf .eje { fill: var(--suave); font-size: 11px; }
.pgo-graf .fin { fill: var(--texto); font-size: 12px; font-weight: 650; }
.pgo-graf .lin { fill: none; stroke: var(--pgo-serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pgo-graf .pt { fill: var(--pgo-serie); stroke: var(--superficie); stroke-width: 2; }
.pgo-graf .obj { stroke: var(--texto); stroke-width: 1; opacity: .55; }
.pgo-graf .obj-t { fill: var(--texto); }
.pgo-graf .cursor { stroke: var(--suave); stroke-width: 1; }
.pgo-tip { position: absolute; top: 6px; z-index: 2; display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); pointer-events: none; white-space: nowrap; }
.pgo-tip[hidden] { display: none; }
.pgo-tip b { font-size: 15px; }
.pgo-tip span, .pgo-tip em { font-size: 12px; color: var(--suave); font-style: normal; }
.pgo-tip em:empty { display: none; }
.pgo-datos { margin-top: 8px; }
.pgo-datos summary { cursor: pointer; font-size: 13px; color: var(--suave); }
.pgo-datos table { margin-top: 8px; }
.pgo-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgo-equipo th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.pgo-equipo thead th { white-space: normal; min-width: 76px; vertical-align: bottom; }
@media (prefers-reduced-motion: reduce) { .pgo-panel { transition: none; } }