/* GENERADO POR build-tokens.mjs — NO EDITAR A MANO.
 * Fuente: tokens.json · Primitivas: src/primitives.css
 * Los cambios hechos aca se pierden en el proximo build.
 */

:where(.pbg-page) {
  color-scheme: light dark;

  --pbg-font-sans: var(--font-geist-sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --pbg-font-mono: var(--font-geist-mono, "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace);

  --pbg-surface-primary: light-dark(#ffffff, #0a0a0a);
  --pbg-surface-secondary: light-dark(#fafafa, #0f0f0f);
  --pbg-surface-inset: light-dark(#f5f5f5, #080808);
  --pbg-surface-contrast: light-dark(#171717, #ededed);
  --pbg-text-primary: light-dark(#171717, #ededed);
  --pbg-text-secondary: light-dark(#545454, #a1a1a1);
  --pbg-text-muted: light-dark(#707070, #828282);
  --pbg-text-faint: light-dark(#949494, #6e6e6e);
  --pbg-text-on-contrast: light-dark(#ffffff, #0a0a0a);
  --pbg-border-subtle: light-dark(#ebebeb, #161616);
  --pbg-border-default: light-dark(#e5e5e5, #1f1f1f);
  --pbg-border-strong: light-dark(#d4d4d4, #2a2a2a);
  --pbg-color-success: light-dark(#17803d, #3fb950);
  --pbg-color-error: light-dark(#c93c37, #f85149);
  --pbg-color-warning: light-dark(#8f6212, #d9a441);
  --pbg-color-info: light-dark(#2563c9, #4a86e8);
  --pbg-chart-1: light-dark(#2563c9, #4a86e8);
  --pbg-chart-2: light-dark(#0f7a5c, #17a97f);
  --pbg-chart-3: light-dark(#8f5612, #c2761a);
  --pbg-chart-4: light-dark(#a83574, #d94f9a);
  --pbg-chart-5: light-dark(#6b6b6b, #8a8a8a);
  --pbg-chart-6: light-dark(#2b7c92, #5fb3c9);

  --pbg-type-display: clamp(40px, 6vw, 64px);
  --pbg-leading-display: 1.02;
  --pbg-weight-display: 500;
  --pbg-tracking-display: -0.04em;
  --pbg-type-page-title: clamp(32px, 4vw, 44px);
  --pbg-leading-page-title: 1.08;
  --pbg-weight-page-title: 500;
  --pbg-tracking-page-title: -0.03em;
  --pbg-type-title: 28px;
  --pbg-leading-title: 1.15;
  --pbg-weight-title: 500;
  --pbg-tracking-title: -0.025em;
  --pbg-type-section: 24px;
  --pbg-leading-section: 1.25;
  --pbg-weight-section: 500;
  --pbg-tracking-section: -0.02em;
  --pbg-type-subsection: 20px;
  --pbg-leading-subsection: 1.3;
  --pbg-weight-subsection: 500;
  --pbg-tracking-subsection: -0.015em;
  --pbg-type-heading-16: 16px;
  --pbg-leading-heading-16: 1.4;
  --pbg-weight-heading-16: 500;
  --pbg-tracking-heading-16: -0.01em;
  --pbg-type-lede: 19px;
  --pbg-leading-lede: 1.55;
  --pbg-weight-lede: 400;
  --pbg-tracking-lede: -0.01em;
  --pbg-type-body: 15px;
  --pbg-leading-body: 1.6;
  --pbg-weight-body: 400;
  --pbg-tracking-body: normal;
  --pbg-type-compact: 13.5px;
  --pbg-leading-compact: 1.5;
  --pbg-weight-compact: 400;
  --pbg-tracking-compact: normal;
  --pbg-type-label: 13px;
  --pbg-leading-label: 1.4;
  --pbg-weight-label: 500;
  --pbg-tracking-label: normal;
  --pbg-type-metadata: 12px;
  --pbg-leading-metadata: 1.4;
  --pbg-weight-metadata: 400;
  --pbg-tracking-metadata: normal;

  --pbg-weight-regular: 400;
  --pbg-weight-medium: 500;
  --pbg-weight-semibold: 600;

  --pbg-space-1: 4px;
  --pbg-space-2: 8px;
  --pbg-space-3: 12px;
  --pbg-space-4: 16px;
  --pbg-space-5: 24px;
  --pbg-space-6: 32px;
  --pbg-space-8: 48px;
  --pbg-space-10: 64px;
  --pbg-space-12: 80px;
  --pbg-space-16: 120px;

  --pbg-radius-small: 6px;
  --pbg-radius: 10px;
  --pbg-radius-large: 14px;
  --pbg-radius-pill: 999px;

  --pbg-content-width: 1200px;
  --pbg-reading-width: 64ch;
  --pbg-control-height: 36px;
  --pbg-control-height-touch: 44px;
  --pbg-ease: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* Forzado explicito de tema. Gana sobre la preferencia del sistema.
   Los PDFs y las apps de producto lo usan; los informes web no. */
:where(.pbg-page.pbg-theme-light) { color-scheme: light; }
:where(.pbg-page.pbg-theme-dark)  { color-scheme: dark; }

:where(.pbg-page[data-brand="prophet"]) {
  --pbg-brand-wordmark: "Prophet";
  --pbg-beam: light-dark(#171717, #ededed);
  --pbg-glow: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.05));
}

:where(.pbg-page[data-brand="prophet"]) .pbg-mark { display: none; }

:where(.pbg-page[data-brand="onebrain"]) {
  --pbg-brand-wordmark: "One Brain";
  --pbg-accent: light-dark(#6544d8, #7c5cff);
  --pbg-accent-text: light-dark(#5b3ccc, #8f74ff);
  --pbg-accent-solid: light-dark(#6544d8, #7a58fe);
  --pbg-accent-dim: light-dark(rgba(101,68,216,0.10), rgba(124,92,255,0.15));
  --pbg-accent-border: light-dark(rgba(101,68,216,0.35), rgba(124,92,255,0.40));
  --pbg-beam: light-dark(#6544d8, #7c5cff);
  --pbg-glow: light-dark(rgba(101,68,216,0.08), rgba(124,92,255,0.13));
  --pbg-mark-src: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHZpZXdCb3g9IjAgMCA5OTcuMDAwMDAwIDEwMjQuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDEwMjQuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiA+CjxwYXRoIGQ9Ik00ODU1IDEwMjMzIGMtMzQxIC0xMCAtNzM0IC02NiAtMTA3NSAtMTU0IC02MzggLTE2NSAtMTIwNCAtNDM2Ci0xNzIwIC04MjUgLTIwMiAtMTUyIC0zNDQgLTI3NyAtNTUwIC00ODMgLTQwOSAtNDEwIC03MDAgLTgxNiAtOTU1IC0xMzM2Ci01MjAgLTEwNTcgLTY3NSAtMjI3NCAtNDMzIC0zNDAwIDI4NSAtMTMyOSAxMDQyIC0yNDYwIDIxMzMgLTMxOTAgMjE4IC0xNDYKMzU0IC0yMjQgNTkwIC0zNDAgNTM5IC0yNjMgMTA2NCAtNDE0IDE2NzUgLTQ4MiAxOTEgLTIwIDY5MSAtMjMgODg1IC00IDExOTYKMTE2IDIyNTcgNjIxIDMwOTAgMTQ3MyAyNjIgMjY3IDQxMSA0NTEgNjEwIDc1MyAxNDIgMjE2IDIyNiAzNjQgMzM2IDU5MCAyNTcKNTM0IDQxOCAxMDkyIDQ5MCAxNjk2IDI2IDIyNiAzNiA2NzggMjAgOTE0IC03MiAxMDMxIC00MzEgMjAwNiAtMTAzNCAyODEwCi0yMjMgMjk3IC01MTMgNjAyIC04MDIgODQzIC01MjkgNDQyIC0xMTE3IDc1NCAtMTc4MyA5NDYgLTQ3NiAxMzggLTk4MyAyMDMKLTE0NzcgMTg5eiBtNjg1IC00MTIgYzEwNDMgLTEzNiAxOTU1IC01OTUgMjcwMCAtMTM1NyA2MzggLTY1NCAxMDc4IC0xNDk5CjEyNjUgLTI0MzQgMTk3IC05ODcgODAgLTE5OTEgLTM0NSAtMjk0MCAtNDY0IC0xMDM5IC0xMzM5IC0xOTAzIC0yMzgwIC0yMzUzCi02MzQgLTI3MyAtMTMzNCAtNDAyIC0xOTkyIC0zNjcgLTEwMzAgNTUgLTE5MTkgNDA2IC0yNzMzIDEwODEgLTE0MSAxMTcgLTQ3MQo0NTEgLTU5NiA2MDQgLTU4MCA3MTAgLTkzNSAxNTQ5IC0xMDUwIDI0ODUgLTI3IDIxNSAtMzYgNjU5IC0yMCA4OTUgNzEgMTAxNAo0NjAgMTk5MCAxMDk5IDI3NjUgMTI0IDE0OSA0MzYgNDYxIDU4MiA1ODIgNjk1IDU3MiAxNDQ0IDkwNyAyMzAwIDEwMjggMjM5CjM0IDMzMCAzOCA2NzUgMzUgMjY4IC0yIDM2MSAtNiA0OTUgLTI0eiIvPgo8cGF0aCBkPSJNNDc5NiA4NTA4IGMtODQxIC00NyAtMTYzMiAtNDMwIC0yMjIzIC0xMDc4IC0zNTggLTM5MiAtNjMwIC04ODcKLTc3MiAtMTQwNSAtODkgLTMyMyAtMTIzIC01NzkgLTEyNCAtOTIwIC0xIC00MzggNjggLTgyMyAyMjUgLTEyNDkgNDAwIC0xMDg4CjEzNDMgLTE5MTUgMjQ0MCAtMjE0MCAzNzYgLTc3IDc5NCAtODYgMTE1OCAtMjUgODM5IDE0MCAxNTg2IDYwMiAyMTA0IDEyOTkKMjI4IDMwNiA0MjYgNzA2IDUzOSAxMDg2IDEzOCA0NjAgMTgwIDg4MCAxMzYgMTM0OSAtODUgOTEyIC01MzAgMTc2NyAtMTIxOQoyMzQyIC0xMzkgMTE2IC0zNDcgMjU4IC01MTYgMzUyIC01MTQgMjg2IC0xMTMyIDQyMyAtMTc0OCAzODl6IG0zNDkgLTM2OApjMTA0OSAtNTkgMTk3MyAtNjc4IDI0NTkgLTE2NDcgNDg4IC05NzUgNDM4IC0yMDk2IC0xMzcgLTMwNjIgLTIwOCAtMzQ5IC01NDQKLTY5OCAtOTAyIC05MzggLTU4NyAtMzkzIC0xMzEzIC01NTUgLTIwMTAgLTQ0NyAtNzM0IDExNCAtMTQxNSA1MzEgLTE4ODkKMTE1OSAtMzQ3IDQ1OSAtNTYyIDEwMjQgLTYxNyAxNjE4IC0xNyAxODIgLTYgNTQzIDIwIDcyMiA2NiA0MzYgMjMwIDg3MyA0NjkKMTI0NSAyNzUgNDI4IDcxNCA4MjUgMTE1OSAxMDQ5IDM5MSAxOTYgNzYyIDI4NyAxMjYzIDMwOSAxNCAxIDk3IC0zIDE4NSAtOHoiLz4KPC9nPgo8L3N2Zz4K");
}

/* ============================================================
   PRIMITIVAS — se editan aca, nunca en el archivo generado.
   ============================================================ */

/* ---------- Reset acotado al sistema ---------- */

.pbg-page *,
.pbg-page *::before,
.pbg-page *::after { box-sizing: border-box; }

.pbg-page {
  margin: 0;
  background: var(--pbg-surface-primary);
  color: var(--pbg-text-primary);
  font-family: var(--pbg-font-sans);
  font-size: var(--pbg-type-body);
  line-height: var(--pbg-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100vw;
  overflow-x: hidden;
}

.pbg-page :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl) { margin: 0; }
.pbg-page :where(h1, h2, h3) { text-wrap: balance; }
.pbg-page :where(a) { color: inherit; }
.pbg-page :where(img, svg, video) { max-width: 100%; height: auto; }

/* iOS Safari hace zoom de la pagina entera al enfocar un campo con texto de
   menos de 16px, y despues no vuelve solo. Apunta al dispositivo tactil, no a
   un ancho, asi que un desktop angosto conserva su densidad. */
@media (pointer: coarse) {
  .pbg-page :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select:not([size])) {
    font-size: 16px;
  }
}

.pbg-page :where(:focus-visible) {
  outline: 2px solid var(--pbg-text-primary);
  outline-offset: 2px;
}

/* ---------- Shell ---------- */

.pbg-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: var(--pbg-content-width);
  margin-inline: auto;
  padding-inline: var(--pbg-space-6);
  padding-block: var(--pbg-space-8);
  gap: var(--pbg-space-10);
}

@media (max-width: 640px) {
  .pbg-shell {
    padding-inline: var(--pbg-space-5);
    padding-block: var(--pbg-space-6);
    gap: var(--pbg-space-8);
  }
}

.pbg-skip-link {
  position: absolute;
  left: -9999px;
}

.pbg-skip-link:focus {
  position: static;
  display: inline-block;
  padding: var(--pbg-space-2) var(--pbg-space-3);
  background: var(--pbg-surface-contrast);
  color: var(--pbg-text-on-contrast);
  border-radius: var(--pbg-radius-small);
}

.pbg-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pbg-space-5);
  flex-wrap: wrap;
}

/* La firma es la palabra compuesta en Geist, no un asset. Escala sola, sigue
   el tema y no hay archivo que mantener. El texto sale del token de marca. */
.pbg-wordmark {
  font-size: var(--pbg-type-heading-16);
  font-weight: var(--pbg-weight-semibold);
  letter-spacing: -0.045em;
  color: var(--pbg-text-primary);
}

.pbg-wordmark::before { content: var(--pbg-brand-wordmark); }

.pbg-document-meta {
  display: flex;
  gap: var(--pbg-space-5);
  font-size: var(--pbg-type-metadata);
  line-height: var(--pbg-leading-metadata);
  color: var(--pbg-text-muted);
}

.pbg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pbg-space-4);
  margin-top: auto;
  padding-top: var(--pbg-space-6);
  font-size: var(--pbg-type-metadata);
  color: var(--pbg-text-muted);
}

/* El isotipo se pinta con currentColor recortando un color solido con la
   silueta del SVG, asi sigue el tema sin necesitar dos archivos.
   En el shorthand el orden es imagen, posicion / tamaño, repeticion: poner
   no-repeat antes de la posicion invalida la declaracion entera y el mark
   no aparece. */
.pbg-mark {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--pbg-mark-src) center / contain no-repeat;
  mask: var(--pbg-mark-src) center / contain no-repeat;
}

/* ---------- Layout ----------
   Cada gap tiene un dueño unico: lo pone el contenedor y los hijos no agregan
   margenes propios. Por eso el reset de arriba pone los margins en 0. */

.pbg-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pbg-space-6);
}

@media (max-width: 900px) { .pbg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pbg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pbg-span-4  { grid-column: span 4; }
.pbg-span-5  { grid-column: span 5; }
.pbg-span-6  { grid-column: span 6; }
.pbg-span-7  { grid-column: span 7; }
.pbg-span-8  { grid-column: span 8; }
.pbg-span-12 { grid-column: 1 / -1; }

/* Sin esto un hijo de grid o flex se niega a achicarse por debajo de su
   contenido y desborda la pagina en vez de reflowear. */
.pbg-grid > *, .pbg-split > *, .pbg-cluster > * { min-width: 0; }

@media (max-width: 900px) {
  .pbg-span-4, .pbg-span-5, .pbg-span-6,
  .pbg-span-7, .pbg-span-8 { grid-column: 1 / -1; }
}

.pbg-flow { display: flex; flex-direction: column; gap: var(--pbg-space-4); }
.pbg-flow > * { margin: 0; }

.pbg-stack { display: flex; flex-direction: column; gap: var(--pbg-space-6); }
.pbg-stack > * { margin: 0; }

.pbg-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pbg-space-3) var(--pbg-space-5);
}

.pbg-section { display: flex; flex-direction: column; gap: var(--pbg-space-5); }

/* Corte de seccion: mas grande que cualquier gap interno, para que la
   jerarquia se lea sin bordes. */
.pbg-section + .pbg-section { margin-top: var(--pbg-space-8); }

.pbg-reading { max-width: var(--pbg-reading-width); }

/* Un titulo partido y su parrafo se alinean por su primera linea de texto,
   no por el borde de la caja. */
.pbg-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--pbg-space-6);
  align-items: baseline;
}

@media (max-width: 900px) { .pbg-split { grid-template-columns: 1fr; } }

.pbg-opening { display: flex; flex-direction: column; gap: var(--pbg-space-5); }

/* Campo de contraste. Es el unico modo de crear una superficie fuerte: se
   encarga solo del color de texto y de borde de todo lo que tiene adentro. */
.pbg-band {
  background: var(--pbg-surface-contrast);
  color: var(--pbg-text-on-contrast);
  border-radius: var(--pbg-radius);
  padding: var(--pbg-space-6);
}

.pbg-band :where(.pbg-label, .pbg-meta, .pbg-caption) { color: var(--pbg-text-on-contrast); opacity: 0.72; }
.pbg-band :where(td, th) { border-color: color-mix(in srgb, var(--pbg-text-on-contrast) 18%, transparent); }

/* ---------- Tipografia ----------
   Los roles se aplican con clase, no por etiqueta: un h2 puede necesitar el
   rol de subsection y un div puede necesitar el de section. */

.pbg-display {
  font-size: var(--pbg-type-display);
  line-height: var(--pbg-leading-display);
  font-weight: var(--pbg-weight-display);
  letter-spacing: var(--pbg-tracking-display);
  max-width: 20ch;
}

.pbg-title {
  font-size: var(--pbg-type-page-title);
  line-height: var(--pbg-leading-page-title);
  font-weight: var(--pbg-weight-page-title);
  letter-spacing: var(--pbg-tracking-page-title);
  max-width: 26ch;
}

.pbg-heading-24 {
  font-size: var(--pbg-type-section);
  line-height: var(--pbg-leading-section);
  font-weight: var(--pbg-weight-section);
  letter-spacing: var(--pbg-tracking-section);
}

.pbg-heading-20 {
  font-size: var(--pbg-type-subsection);
  line-height: var(--pbg-leading-subsection);
  font-weight: var(--pbg-weight-subsection);
  letter-spacing: var(--pbg-tracking-subsection);
}

.pbg-heading-16 {
  font-size: var(--pbg-type-heading-16);
  line-height: var(--pbg-leading-heading-16);
  font-weight: var(--pbg-weight-heading-16);
  letter-spacing: var(--pbg-tracking-heading-16);
}

.pbg-lede {
  font-size: var(--pbg-type-lede);
  line-height: var(--pbg-leading-lede);
  font-weight: var(--pbg-weight-lede);
  letter-spacing: var(--pbg-tracking-lede);
  color: var(--pbg-text-secondary);
  max-width: var(--pbg-reading-width);
}

.pbg-label {
  font-size: var(--pbg-type-label);
  line-height: var(--pbg-leading-label);
  font-weight: var(--pbg-weight-label);
  color: var(--pbg-text-secondary);
}

.pbg-meta,
.pbg-caption {
  font-size: var(--pbg-type-metadata);
  line-height: var(--pbg-leading-metadata);
  color: var(--pbg-text-muted);
}

.pbg-caption { max-width: var(--pbg-reading-width); }

.pbg-note {
  font-size: var(--pbg-type-compact);
  line-height: var(--pbg-leading-compact);
  color: var(--pbg-text-secondary);
  max-width: var(--pbg-reading-width);
}

/* Mono es para el identificador, no para la oracion que lo contiene. */
.pbg-mono {
  font-family: var(--pbg-font-mono);
  font-size: 0.92em;
}

/* Numeros tabulares: sin esto una columna de importes no alinea sus digitos. */
.pbg-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pbg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pbg-sources {
  font-size: var(--pbg-type-metadata);
  line-height: 1.6;
  color: var(--pbg-text-muted);
}

.pbg-sources a { text-decoration: underline; text-underline-offset: 2px; }

/* Prosa suelta dentro del sistema: listas y parrafos legibles sin envoltorio. */
.pbg-reading :where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--pbg-space-4); }
.pbg-reading :where(ul, ol) { padding-left: 1.25em; }
.pbg-reading :where(li) + :where(li) { margin-top: var(--pbg-space-2); }

/* ---------- Evidencia ----------
   Las tablas son evidencia, no decoracion. Toman el ancho completo de su
   seccion por default: una tabla angosta flotando en una seccion ancha es
   un defecto, no una decision. */

.pbg-table-wrap {
  grid-column: 1 / -1;
  width: 100%;
  overflow-x: auto;
  /* Al llegar al final del scroll horizontal de la tabla, el gesto no sigue
     de largo arrastrando la pagina. */
  overscroll-behavior-x: contain;
}

/* width 100% para llenar la seccion cuando entra; min-width max-content para
   que, cuando NO entra, la tabla conserve su ancho natural y el wrapper
   scrollee. Sin el min-width la tabla se comprime y parte las palabras
   ("prd-" / "iad1", "USD" / "45,00"), que es peor que scrollear. */
.pbg-table-wrap > table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  font-size: var(--pbg-type-compact);
  font-variant-numeric: tabular-nums;
}

.pbg-table-wrap caption {
  text-align: left;
  font-size: var(--pbg-type-metadata);
  color: var(--pbg-text-muted);
  padding-bottom: var(--pbg-space-3);
}

.pbg-table-wrap th,
.pbg-table-wrap td {
  text-align: left;
  padding: var(--pbg-space-3) var(--pbg-space-4);
  border-bottom: 1px solid var(--pbg-border-default);
}

/* Los headers de varias lineas se alinean abajo para que la ultima linea
   quede al ras de los headers de una sola. */
.pbg-table-wrap thead th {
  vertical-align: bottom;
  color: var(--pbg-text-secondary);
  font-weight: var(--pbg-weight-medium);
  border-bottom-color: var(--pbg-border-strong);
}

.pbg-table-wrap tbody th { font-weight: var(--pbg-weight-regular); }
.pbg-table-wrap tfoot td { font-weight: var(--pbg-weight-medium); border-bottom: none; }
.pbg-table-wrap tr:last-child td { border-bottom: none; }

/* La alineacion del header tiene que seguir a la de sus celdas. Un header
   centrado sobre valores alineados a la derecha es de los errores mas
   visibles y mas comunes. */
.pbg-table-wrap :where(th, td).pbg-numeric,
.pbg-table-wrap :where(th, td)[data-align="numeric"] { text-align: right; }

.pbg-table-wrap :where(td, th) { padding-inline-start: 0; }
.pbg-table-wrap :where(td, th) + :where(td, th) { padding-inline-start: var(--pbg-space-4); }

/* Los identificadores largos ceden dentro de la celda en vez de romper la
   tabla entera. */
.pbg-table-wrap .pbg-mono { overflow-wrap: anywhere; }

/* ---------- Stats ---------- */

.pbg-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pbg-space-6);
}

.pbg-stat { display: flex; flex-direction: column; gap: var(--pbg-space-2); }

.pbg-stat-label {
  font-size: var(--pbg-type-label);
  font-weight: var(--pbg-weight-medium);
  color: var(--pbg-text-secondary);
}

/* El numero es el ancla de la tarjeta. Sin fondo, sin borde, sin sombra: la
   jerarquia la hace la escala. */
.pbg-stat-value {
  font-size: var(--pbg-type-title);
  line-height: var(--pbg-leading-title);
  letter-spacing: var(--pbg-tracking-title);
  font-variant-numeric: tabular-nums;
}

.pbg-stat-detail {
  font-size: var(--pbg-type-metadata);
  color: var(--pbg-text-muted);
}

/* ---------- Barras ---------- */

.pbg-bar-list { display: flex; flex-direction: column; gap: var(--pbg-space-4); }

.pbg-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pbg-space-2) var(--pbg-space-4);
  align-items: baseline;
}

.pbg-bar-label { font-size: var(--pbg-type-compact); }

.pbg-bar-value {
  font-size: var(--pbg-type-compact);
  font-variant-numeric: tabular-nums;
  color: var(--pbg-text-secondary);
}

/* El track cruza las dos columnas: la barra tiene que empezar donde empieza
   la etiqueta para que las longitudes se puedan comparar a ojo. */
.pbg-bar-track {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--pbg-border-default);
  border-radius: var(--pbg-radius-pill);
  overflow: hidden;
}

.pbg-bar-fill {
  display: block;
  height: 100%;
  background: var(--pbg-text-primary);
  border-radius: inherit;
}

/* ---------- Charts ---------- */

.pbg-chart { display: flex; flex-direction: column; gap: var(--pbg-space-4); margin: 0; }

.pbg-chart-header { display: flex; flex-direction: column; gap: var(--pbg-space-1); }

.pbg-chart-viewport { width: 100%; overflow-x: auto; }
.pbg-chart-viewport svg { display: block; width: 100%; height: auto; }

.pbg-chart figcaption {
  font-size: var(--pbg-type-metadata);
  color: var(--pbg-text-muted);
  max-width: var(--pbg-reading-width);
}

/* ---------- Controles ---------- */

.pbg-field { display: flex; flex-direction: column; gap: var(--pbg-space-2); }

.pbg-field > label {
  font-size: var(--pbg-type-label);
  font-weight: var(--pbg-weight-medium);
  color: var(--pbg-text-secondary);
}

.pbg-field :where(input, select, textarea) {
  width: 100%;
  min-height: var(--pbg-control-height);
  padding: var(--pbg-space-2) var(--pbg-space-3);
  background: var(--pbg-surface-secondary);
  color: var(--pbg-text-primary);
  border: 1px solid var(--pbg-border-default);
  border-radius: var(--pbg-radius-small);
  font-family: inherit;
  font-size: var(--pbg-type-body);
}

/* El 16px se repite aca a proposito: la regla de arriba pone 15px con la misma
   especificidad que la del principio del archivo, y gana por venir despues. */
@media (pointer: coarse) {
  .pbg-field :where(input, select, textarea) { min-height: var(--pbg-control-height-touch); font-size: 16px; }
}

.pbg-field :where(input, select, textarea)::placeholder { color: var(--pbg-text-faint); }
.pbg-field :where(input, select, textarea):focus-visible { border-color: var(--pbg-border-strong); }

/* La etiqueta y el helper quedan FUERA del campo con borde: adentro solo va
   el input y su sufijo de unidad. */
.pbg-unit-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--pbg-border-default);
  border-radius: var(--pbg-radius-small);
  background: var(--pbg-surface-secondary);
}

.pbg-unit-field input { border: none; background: transparent; }

.pbg-unit-prefix,
.pbg-unit-suffix {
  padding-inline: var(--pbg-space-3);
  color: var(--pbg-text-muted);
  font-size: var(--pbg-type-compact);
}

.pbg-helper { font-size: var(--pbg-type-metadata); color: var(--pbg-text-muted); }

/* El error nunca se comunica solo con color. */
.pbg-error {
  font-size: var(--pbg-type-metadata);
  color: var(--pbg-color-error);
  font-weight: var(--pbg-weight-medium);
}

.pbg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pbg-space-2);
  min-height: var(--pbg-control-height);
  padding: var(--pbg-space-2) var(--pbg-space-5);
  border: 1px solid var(--pbg-border-default);
  border-radius: var(--pbg-radius-pill);
  background: transparent;
  color: var(--pbg-text-primary);
  font-family: inherit;
  font-size: var(--pbg-type-label);
  font-weight: var(--pbg-weight-medium);
  cursor: pointer;
  transition: background var(--pbg-ease), border-color var(--pbg-ease);
}

.pbg-button:hover { border-color: var(--pbg-border-strong); }

/* El chip invertido: el unico realce de alta jerarquia del sistema, y uno
   solo por pagina. En Prophet reemplaza al acento de color, que no existe. */
.pbg-button[data-variant="primary"] {
  background: var(--pbg-surface-contrast);
  color: var(--pbg-text-on-contrast);
  border-color: transparent;
}

.pbg-button:disabled { color: var(--pbg-text-faint); cursor: not-allowed; }

@media (pointer: coarse) { .pbg-button { min-height: var(--pbg-control-height-touch); } }

.pbg-result { display: flex; flex-direction: column; gap: var(--pbg-space-2); }
.pbg-result-label { font-size: var(--pbg-type-label); color: var(--pbg-text-secondary); }

.pbg-result-value {
  font-size: var(--pbg-type-page-title);
  line-height: var(--pbg-leading-page-title);
  letter-spacing: var(--pbg-tracking-page-title);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pbg-page *, .pbg-page *::before, .pbg-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   EFECTOS DE MARCA
   Reglas de uso en references/efectos.md. Resumen: el haz señala lo que
   espera una accion o lo que esta en uso. Nada de esto va sobre una
   superficie que carga evidencia.
   ============================================================ */

/* Sin @property el angulo no interpola y el haz no gira. Los navegadores que
   no lo soportan muestran un borde estatico, que es una degradacion valida. */
@property --pbg-beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* El haz: un borde de luz que recorre lo que hay que mirar.
   La tecnica es un conic-gradient recortado a un anillo con mask-composite,
   asi el relleno queda transparente y solo se ve el borde. */
.pbg-fx-beam {
  position: relative;
  isolation: isolate;
}

.pbg-fx-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--pbg-beam-width, 1.5px);
  background: conic-gradient(
    from var(--pbg-beam-angle),
    transparent 0turn 0.58turn,
    var(--pbg-beam) 0.75turn,
    transparent 0.92turn 1turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Cuanto mas largo el recorrido, mas lenta tiene que ser la vuelta para que se
   lea calma: una ventana grande con la duracion de un boton se ve apurada. */
@keyframes pbg-beam-spin { to { --pbg-beam-angle: 360deg; } }

/* El resplandor del hero. Va detras del contenido y no intercepta el mouse. */
.pbg-fx-glow { position: relative; }

.pbg-fx-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    var(--pbg-glow-size, 760px 340px) at var(--pbg-glow-at, 10% -12%),
    var(--pbg-glow),
    transparent 62%
  );
}

/* La trama de Prophet: halftone sutil, solo en superficie de marca.
   No repara jerarquia debil ni reemplaza evidencia que falta. */
.pbg-fx-dither { position: relative; }

.pbg-fx-dither::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  opacity: 0.07;
}

/* La entrada escalonada. Los hijos directos aparecen en orden. */
@keyframes pbg-fx-entrance {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Todo el movimiento vive adentro de no-preference. Un beam con la duracion
   aplastada a 0.01ms no queda quieto: queda congelado en una posicion
   arbitraria del recorrido, que es peor que no tenerlo. */
@media (prefers-reduced-motion: no-preference) {
  .pbg-fx-beam::after {
    animation: pbg-beam-spin var(--pbg-beam-duration, 4s) linear infinite;
  }

  .pbg-fx-entrance > * {
    animation: pbg-fx-entrance 680ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .pbg-fx-entrance > *:nth-child(1) { animation-delay:  60ms; }
  .pbg-fx-entrance > *:nth-child(2) { animation-delay: 160ms; }
  .pbg-fx-entrance > *:nth-child(3) { animation-delay: 260ms; }
  .pbg-fx-entrance > *:nth-child(4) { animation-delay: 360ms; }
  .pbg-fx-entrance > *:nth-child(5) { animation-delay: 460ms; }
  .pbg-fx-entrance > *:nth-child(n + 6) { animation-delay: 560ms; }
}