/* Panel QCS. Usa el sistema visual de prodUi.css
   (.pp-head, .pp-bar, .pp-card, .pp-kpis...) y anade lo propio del panel.
   Alta densidad: en pantallas anchas "En vivo" va en una sola fila. */
#analystPanel.pp { overflow: auto; }

.qp-sec { display: flex; align-items: baseline; gap: 8px; margin: 0 0 -4px; }
.qp-sec h2 { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--pp-muted); }
.qp-sec span { font-size: 11px; color: var(--pp-faint); }

#analystPanel .pp-dates input.qp-dt { width: 166px; }

/* ---------- en vivo ---------- */
.qp-live { display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(8, minmax(0, 1fr)); gap: 1px;
  background: var(--pp-border); border: 1px solid var(--pp-border); border-radius: 4px; overflow: hidden; }
.qp-tile { all: unset; box-sizing: border-box; display: block; background: var(--pp-surface); padding: 6px 9px 6px 10px;
  position: relative; min-width: 0; cursor: pointer; }
.qp-tile:hover { background: #f5f8fa; }
.qp-tile:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
.qp-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.qp-tile.ok::before { background: var(--pp-ok); }
.qp-tile.warn::before { background: var(--pp-warn); }
.qp-tile.bad::before { background: var(--pp-bad); }
.qp-tile .l { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--pp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-tile .v { font-size: 17px; font-weight: 600; line-height: 1.15; margin-top: 1px; white-space: nowrap; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; }
.qp-tile .v small { font-size: 10.5px; font-weight: 500; color: var(--pp-muted); margin-left: 2px; }
.qp-tile .s { margin-top: 1px; font-size: 10.5px; color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-tile.bad .s b { color: var(--pp-bad); }
.qp-hero { padding: 6px 12px 5px 13px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; }
.qp-hero .l { grid-column: 1 / -1; }
.qp-hero .v { font-size: 28px; font-weight: 600; letter-spacing: -.4px; margin-top: 0; }
.qp-hero .v small { font-size: 13px; }
.qp-hero .row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 0; min-width: 0; }
.qp-hero .row .pp-meta { font-size: 10.5px; color: var(--pp-muted); white-space: nowrap; }
.qp-gbar { grid-column: 1 / -1; position: relative; height: 18px; margin-top: 1px; }
.qp-gbar .rail { position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 2px; background: #e3e8ed; }
.qp-gbar .band { position: absolute; top: 9px; height: 7px; border-radius: 2px; background: var(--pp-ok-soft); border: 1px solid #b8dcc3; }
.qp-gbar .tgt { position: absolute; top: 7px; width: 2px; height: 11px; background: var(--pp-ok); }
.qp-gbar .mk { position: absolute; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--pp-text); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pp-text); }
.qp-gbar .mk.bad { background: var(--pp-bad); box-shadow: 0 0 0 1px var(--pp-bad); }
.qp-gbar small { position: absolute; top: -2px; font-size: 9px; color: var(--pp-faint); transform: translateX(-50%); white-space: nowrap; }

/* ---------- graficos ---------- */
.qp-cv { display: block; width: 100%; height: 200px; border-radius: 3px; cursor: crosshair; }
.qp-cv.hero { height: 320px; }
.qp-cv.md { height: 200px; }
.qp-cv.combo { height: 250px; }
.qp-cv.sm { height: 170px; }
.qp-key { font-size: 10.5px; color: var(--pp-muted); display: inline-flex; align-items: center; gap: 5px; }
.qp-key i { display: inline-block; width: 76px; height: 7px; border-radius: 2px;
  background: linear-gradient(90deg, #2979ff, #22d3ee, #3fb56b, #e3a44a, #e5544b); }

/* resumen del perfil CD */
.qp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--pp-border);
  border: 1px solid var(--pp-border); border-radius: 4px; overflow: hidden; }
.qp-stats div { background: var(--pp-sunken); padding: 4px 8px; min-width: 0; }
.qp-stats span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--pp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-stats b { display: block; font-size: 14px; font-weight: 600; margin-top: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qp-stats b small { font-size: 10.5px; font-weight: 500; color: var(--pp-muted); margin-left: 2px; }
.qp-stats b.bad { color: var(--pp-bad); } .qp-stats b.warn { color: var(--pp-warn); } .qp-stats b.ok { color: var(--pp-ok); }
.qp-ins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.qp-ins li { display: grid; grid-template-columns: 11px 1fr; gap: 4px; line-height: 1.4; }
.qp-ins li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-accent); margin-top: 5px; }
.qp-ins li.warn::before { background: var(--pp-warn); }
.qp-ins li.bad::before { background: var(--pp-bad); }
.qp-side { display: flex; flex-direction: column; gap: 8px; }
/* La columna toma la altura del perfil CD; el dictamen hace scroll propio. */
.qp-sidecard .pp-card-b { position: relative; min-height: 300px; }
.qp-sidecard .qp-side { position: absolute; inset: 6px 10px 8px; }
.qp-insw { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.qp-insw .qp-ins { flex: 1 1 0; min-height: 0; overflow: auto; padding-right: 4px; }
.qp-side h3, .qp-cell h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--pp-text); display: flex; gap: 6px;
  align-items: baseline; flex-wrap: wrap; }
.qp-side h3 span, .qp-cell h3 span { font-weight: 400; font-size: 11px; color: var(--pp-muted); }

/* pestanas de analisis */
.qp-tabs { display: flex; gap: 0; padding: 0 6px; border-bottom: 1px solid var(--pp-border); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; }
.qp-tabs button { border: 0; background: transparent; padding: 6px 12px 5px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--pp-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.qp-tabs button:hover { color: var(--pp-text); }
.qp-tabs button.on { color: var(--pp-text); border-bottom-color: var(--pp-accent); }
.qp-tabs button:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
.qp-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 7px 10px 9px; }
#analystPanel.qp-all .qp-pane[hidden] { display: grid !important; }   /* informe: pintar todas */
.qp-cell { min-width: 0; }
.qp-cell.wide { grid-column: 1 / -1; }
.qp-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
.qp-chips label { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 11px;
  border: 1px solid var(--pp-border-strong); font-size: 11px; color: var(--pp-muted); cursor: pointer; user-select: none; }
.qp-chips label.on { background: var(--pp-accent-soft); border-color: #9cc9c3; color: var(--pp-accent); font-weight: 600; }
.qp-chips input { position: absolute; opacity: 0; pointer-events: none; }
.qp-chips i { width: 7px; height: 7px; border-radius: 50%; }
.qp-xy { display: inline-flex; gap: 6px; margin-left: auto; }
.qp-xy select { height: 22px; border: 1px solid var(--pp-border-strong); border-radius: 4px; font: inherit; font-size: 11.5px; background: var(--pp-surface); }

@media (max-width: 1279px) {
  .qp-live { grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .qp-hero { grid-row: span 2; }
}
@media (max-width: 1180px) {
  .qp-live { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qp-hero { grid-column: 1 / -1; grid-row: auto; }
  /* en una columna no hay perfil al lado: altura natural, dictamen acotado */
  .qp-sidecard .pp-card-b { min-height: 0; }
  .qp-sidecard .qp-side { position: static; }
  .qp-insw .qp-ins { flex: none; max-height: 240px; }
}
@media (max-width: 760px) {
  .qp-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qp-hero .v { font-size: 26px; }
  .qp-pane { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .qp-cv.hero { height: 260px; }
  .qp-xy { margin-left: 0; }
  #analystPanel .pp-dates { flex-wrap: wrap; }
  #analystPanel .pp-dates input.qp-dt { flex: 1 1 140px; width: auto; min-width: 0; }
}