/* panel.css — owned by the panel screen agent. Loaded after styles.css; use tokens from tokens.css only.
   Panel (`ca-pnl-…`) and Análisis (`ca-an-…`). */

/* ---------- Panel ---------- */
.ca-pnl-side { gap: 20px; }

/* «Revisar primero»: the grid keeps its columns and scrolls inside the frame on phones. */
.ca-pnl-queue__grid { min-width: 680px; }
.ca-pnl-score { font-size: 20px; white-space: nowrap; }
.ca-pnl-hall { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ca-pnl-hall__txt {
  font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-pnl-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }

/* «Ítems que más fallan» */
.ca-pnl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-pnl-items__row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 50px; gap: 8px; align-items: center; font-size: 13px; }
.ca-pnl-items__row .ca-code { font-size: 11.5px; }
.ca-pnl-items__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-pnl-items__pct { text-align: right; font-weight: 500; white-space: nowrap; }

/* Trend cells: inner rules only (the outer edge is the frame border). */
.ca-pnl-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); overflow: hidden; }
.ca-pnl-trend__cell {
  padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
.ca-pnl-trend__cell.is-total .ca-pnl-trend__name { font-weight: 600; }
.ca-pnl-trend__name { font-size: 13px; }
.ca-pnl-trend__vals { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ca-pnl-trend__value {
  font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ca-pnl-trend__delta { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ca-pnl-trend__foot { font-size: 11.5px; color: var(--text-3); }

/* ---------- Análisis ---------- */
.ca-an-chips { display: flex; gap: 6px; flex-wrap: wrap; }
button.ca-chip.ca-an-chip {
  height: auto; padding: 3px 8px; gap: 6px; font-size: 12px; color: var(--text-1);
  transition: opacity var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
button.ca-chip.ca-an-chip:hover { border-color: var(--line-strong); }
button.ca-chip.ca-an-chip.is-off { opacity: .45; }
.ca-an-chip svg.ca-swatch { width: 18px; height: 6px; }

.ca-an-text { margin: 0; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.ca-an-text.ca-faint { font-size: 12px; }

.ca-an-rec { min-width: 720px; }
.ca-an-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); min-width: 0; }
.ca-an-meta .ca-sev { font-size: 11.5px; }
.ca-an-fam { font-size: 12.5px; }
.ca-an-pct { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.ca-an-pct > .ca-progress { flex: 1; min-width: 24px; }
.ca-an-pct > .ca-num { width: 48px; text-align: right; white-space: nowrap; }
.ca-an-delta { font-size: 12.5px; white-space: nowrap; }
.ca-an-most { font-size: 12.5px; }

.ca-an-fams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-an-fams__row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ca-an-fams__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; min-width: 0; }
.ca-an-fams__label .ca-num { white-space: nowrap; }

@media (max-width: 619px) {
  .ca-pnl-trend { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ca-pnl-trend__value { font-size: 22px; }
}