/* prisma-components.css — shared UI primitives.
   Layered on top of prisma-tokens.css + prisma-base.css. Everything here is
   namespaced under `.pc-` so it can coexist with the per-page legacy classes
   without specificity wars. As pages migrate, replace their bespoke
   .btn/.card/.chip with these primitives.

   Convention: classes start with `pc-` (prisma component). Variants chain.
   Examples:
     <button class="pc-btn pc-btn--primary">Suscribirme</button>
     <button class="pc-btn pc-btn--secondary">Cancelar</button>
     <button class="pc-btn pc-btn--danger pc-btn--sm">Eliminar</button>

   Empty state, skeleton, badge, chip, card, table — all here. Don't bake in
   page-specific spacing — let the consumer decide. */

/* ─── Button ─────────────────────────────────────────────────── */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: 600 13px/1 var(--font-ui);
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: transparent;
  color: var(--text);
  transition: background-color .12s, border-color .12s, color .12s;
}
.pc-btn:hover { border-color: var(--border-2); background: var(--surface-2); }
.pc-btn:active { transform: translateY(1px); }
.pc-btn[aria-disabled="true"], .pc-btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
}
/* Primary: flat accent, no gradient, no shadow. The redesign drops the
   gradient + glow that read as "AI tool" cliché. */
.pc-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: none;
}
.pc-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); box-shadow: none; }
.pc-btn--secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.pc-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.pc-btn--ghost:hover { color: var(--text); background: var(--surface-2); }
.pc-btn--danger {
  background: var(--fail-bg);
  border-color: var(--fail);
  color: var(--fail);
}
.pc-btn--danger:hover { background: var(--fail); color: #fff; }
.pc-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}
.pc-btn--lg {
  padding: 14px 24px;
  font-size: 14px;
}

/* ─── Card ───────────────────────────────────────────────────── */
.pc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pc-card--elev { box-shadow: var(--shadow-lg); }
.pc-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pc-card__title {
  font: 600 15px/1.3 var(--font-display);
  color: var(--text);
  margin: 0;
}
.pc-card__sub {
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-muted);
}

/* ─── Badge / Chip ───────────────────────────────────────────── */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.pc-badge--ok   { color: var(--pass); border-color: var(--pass); background: var(--pass-bg); }
.pc-badge--warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.pc-badge--fail { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.pc-badge--info { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.pc-badge--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font: 500 12px/1 var(--font-ui);
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.pc-chip:hover { color: var(--text); border-color: var(--border-2); }
.pc-chip[aria-pressed="true"], .pc-chip.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* ─── Table baseline ─────────────────────────────────────────── */
.pc-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.5 var(--font-ui);
}
.pc-table caption {
  text-align: left;
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 0 12px;
}
.pc-table thead th {
  text-align: left;
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
.pc-table tbody td,
.pc-table tbody th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}
.pc-table tbody tr:hover { background: var(--surface-2); }
.pc-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pc-table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.pc-table--compact th, .pc-table--compact td { padding: 6px 8px; }

/* ─── Empty state ────────────────────────────────────────────── */
.pc-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pc-empty__title {
  font: 600 14px/1.3 var(--font-display);
  color: var(--text);
  margin: 0;
}
.pc-empty__hint {
  font: 400 12.5px/1.5 var(--font-ui);
  max-width: 36ch;
}

/* ─── Skeleton (loading shimmer) ─────────────────────────────── */
.pc-skel {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: pc-shimmer 1.4s linear infinite;
}
.pc-skel--text { height: 1em; margin: 4px 0; }
.pc-skel--block { height: 80px; }
@keyframes pc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Form input ─────────────────────────────────────────────── */
.pc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-field__label {
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-field__input,
.pc-field input,
.pc-field select,
.pc-field textarea {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 400 13.5px/1.4 var(--font-ui);
  color: var(--text);
  transition: border-color .12s, background .12s;
}
.pc-field input:focus,
.pc-field select:focus,
.pc-field textarea:focus,
.pc-field__input:focus {
  border-color: var(--accent);
  outline: none;
  background: var(--surface-3);
}
.pc-field__hint {
  font: 400 11.5px/1.4 var(--font-ui);
  color: var(--text-faint);
}
.pc-field--error .pc-field__input,
.pc-field--error input { border-color: var(--fail); }
.pc-field--error .pc-field__hint { color: var(--fail); }

/* ─── Section heading ────────────────────────────────────────── */
.pc-section-title {
  font: 600 18px/1.2 var(--font-display);
  color: var(--text);
  margin: 24px 0 14px;
}

/* ─── Stack / Inline (tiny layout helpers) ───────────────────── */
.pc-stack { display: flex; flex-direction: column; gap: 10px; }
.pc-stack--lg { gap: 18px; }
.pc-inline { display: flex; align-items: center; gap: 8px; }
.pc-inline--end { justify-content: flex-end; }

/* ───────────────────────────────────────────────────────────────
   Redesign primitives — added 2026-04-26 alongside the dropped
   Fraunces / gradient sweep. Pure additive: any page can opt in
   without editing existing rules.
   ─────────────────────────────────────────────────────────────── */

/* KPI cell — replaces the empty stat-card pattern. Mono label,
   tabular numerals, optional delta line. Compose a row with .pc-kpi-row. */
.pc-kpi-row {
  display: grid;
  gap: 10px;
}
.pc-kpi-row.pc-kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
.pc-kpi-row.pc-kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
.pc-kpi-row.pc-kpi-row--5 { grid-template-columns: repeat(5, 1fr); }
.pc-kpi-row.pc-kpi-row--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) {
  .pc-kpi-row.pc-kpi-row--5,
  .pc-kpi-row.pc-kpi-row--6 { grid-template-columns: repeat(3, 1fr); }
  .pc-kpi-row.pc-kpi-row--4 { grid-template-columns: repeat(2, 1fr); }
}
.pc-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-kpi-label {
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .02em;
  color: var(--text-3, var(--text-muted));
}
.pc-kpi-val {
  font: 500 28px/1 var(--font-ui);
  letter-spacing: -.016em;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pc-kpi-val small {
  font: 500 13px/1 var(--font-mono);
  color: var(--text-3, var(--text-muted));
  letter-spacing: 0;
}
.pc-kpi-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 500 12px/1.4 var(--font-mono);
  color: var(--text-3, var(--text-muted));
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

/* Delta — colored numeric change. Use with .pc-kpi-meta or inline. */
.pc-delta { font-weight: 500; font-variant-numeric: tabular-nums; }
.pc-delta--pos { color: var(--pass); }
.pc-delta--neg { color: var(--fail); }
.pc-delta--flat { color: var(--text-3, var(--text-muted)); }

/* Mono brackets — terminal-style status chip. Replaces colored pills. */
.pc-bkt {
  display: inline-flex;
  align-items: center;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-2, var(--text-muted));
  text-transform: uppercase;
  white-space: nowrap;
}
.pc-bkt::before { content:'['; color: var(--text-4, var(--text-faint)); margin-right: 2px; }
.pc-bkt::after  { content:']'; color: var(--text-4, var(--text-faint)); margin-left: 2px; }
.pc-bkt--ok   { color: var(--pass); }
.pc-bkt--warn { color: var(--warn); }
.pc-bkt--neg  { color: var(--fail); }
.pc-bkt--ink  { color: var(--text); }

/* Score — typographic, semantic color carries severity. No dot ring. */
.pc-score {
  display: inline-flex;
  align-items: baseline;
  font: 500 22px/1 var(--font-ui);
  letter-spacing: -.014em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pc-score--warn { color: var(--warn); }
.pc-score--bad  { color: var(--fail); }
.pc-score small {
  font: 500 11px/1 var(--font-mono);
  color: var(--text-4, var(--text-faint));
  margin-left: 3px;
}

/* Sparkline — inline tiny chart, fixed height for table cells. */
.pc-spark { display: inline-block; vertical-align: middle; }
.pc-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.pc-spark-line--warn { stroke: var(--warn); }
.pc-spark-line--neg  { stroke: var(--fail); }

/* LLM coverage strip — 8 squares, one per engine. */
.pc-llm-strip { display: inline-flex; gap: 3px; align-items: center; }
.pc-llm-cell {
  width: 16px; height: 16px;
  border-radius: 2px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  font: 700 8.5px/1 var(--font-mono);
  color: var(--text-4, var(--text-faint));
}
.pc-llm-cell--cited {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pc-llm-cell--partial {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

/* Chart helpers — pure SVG, no library. Pages embed inline <svg>
   and use these classes for stroke/fill consistency. */
.pc-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-chart-grid line { stroke: var(--border); stroke-width: 1; }
.pc-chart-grid line.pc-chart-zero { stroke: var(--border-2); }
.pc-chart-axis { font: 500 10.5px var(--font-mono); fill: var(--text-4, var(--text-faint)); font-variant-numeric: tabular-nums; }
.pc-chart-line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.pc-chart-line--alt { stroke: var(--info); }
.pc-chart-line--ghost { stroke: var(--text-2, var(--text-muted)); stroke-dasharray: 3 3; }
.pc-chart-area { fill: var(--accent-glow); }
.pc-chart-bar { fill: var(--accent); }
.pc-chart-bar--bg   { fill: var(--surface-3); }
.pc-chart-bar--warn { fill: var(--warn); }
.pc-chart-bar--neg  { fill: var(--fail); }

/* Histogram — flex row of bars for distribution display. */
.pc-histo { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.pc-histo-bar {
  flex: 1;
  background: var(--surface-3);
  border-radius: 1px 1px 0 0;
}
.pc-histo-bar--fill { background: var(--accent); }
.pc-histo-bar--warn { background: var(--warn); }
.pc-histo-bar--neg  { background: var(--fail); }

/* Donut — host wrapper for SVG donut + legend grid. */
.pc-donut-wrap { display: flex; align-items: center; gap: 16px; }
.pc-donut-track { stroke: var(--surface-3); fill: none; stroke-width: 14; }
.pc-donut-arc   { fill: none; stroke-width: 14; }
.pc-legend { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1.4 var(--font-mono); color: var(--text-2, var(--text-muted)); font-variant-numeric: tabular-nums; }
.pc-legend-row { display: flex; align-items: center; gap: 8px; }
.pc-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pc-legend-num { margin-left: auto; color: var(--text-3, var(--text-muted)); }

/* Data table — denser than .pc-table, tabular numerals, no zebra. */
.pc-dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.pc-dt thead th {
  text-align: left;
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3, var(--text-muted));
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.pc-dt thead th.pc-right, .pc-dt tbody td.pc-right { text-align: right; }
.pc-dt thead th.pc-center, .pc-dt tbody td.pc-center { text-align: center; }
.pc-dt tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
}
.pc-dt tbody tr:last-child td { border-bottom: 0; }
.pc-dt tbody tr:hover { background: var(--surface-2); }