/*
 * EL MODO OSCURO (2026-09-27, pedido de Ignacio).
 *
 * Las MISMAS variables de `globals.css`, con valores oscuros, sólo cuando la
 * persona lo eligió (`<html data-tema="oscuro">`, lo pone el botón de la barra
 * y el script de arranque de `lib/ui/tema.ts`). Todo el tablero pinta con estas
 * variables —el puente hacia @traid/ui también—, así que alcanza con esto.
 *
 * ⚠️ IMPRIMIR SIEMPRE EN CLARO: el cliente imprime en blanco y negro. Por eso
 * todo vive dentro de `@media screen`.
 *
 * Contraste medido por `lib/tema/paleta-oscura.test.ts` (mismo método que la
 * clara): texto ≥ 4,5 sobre el fondo y la superficie; acento y alarmas ≥ 3.
 */
@media screen {
  :root[data-tema='oscuro'] {
    color-scheme: dark;

    --color-fondo: oklch(0.17 0.01 265);
    --color-tinta: oklch(0.93 0.008 260);
    --color-tenue: oklch(0.74 0.015 260);
    --color-borde: oklch(0.32 0.012 265);
    --color-acento: oklch(0.72 0.14 277);
    --color-alarma: oklch(0.72 0.16 25);
    --color-superficie: oklch(0.21 0.012 265);
    --color-alarma-suave: oklch(0.3 0.07 25);
    --color-favorable: oklch(0.76 0.12 165);
    --color-favorable-suave: oklch(0.29 0.05 165);
    --color-aviso: oklch(0.8 0.12 75);
    --color-aviso-suave: oklch(0.31 0.06 80);
    --color-destacado-suave: oklch(0.28 0.04 277);
    --color-cuenta-1: oklch(0.76 0.08 285);
    --color-cuenta-1-suave: oklch(0.29 0.03 285);
    --color-cuenta-2: oklch(0.78 0.09 45);
    --color-cuenta-2-suave: oklch(0.3 0.03 45);
    --color-serie-1: oklch(0.74 0.15 277);
    --color-serie-2: oklch(0.8 0.14 75);
    --color-serie-3: oklch(0.78 0.1 215);
    --color-serie-4: oklch(0.76 0.15 340);
    --color-serie-5: oklch(0.72 0.03 260);
    --color-serie-anterior: oklch(0.62 0.01 260);
    --color-grilla: oklch(0.3 0.01 265);

    /* Sobre un acento claro, el texto del botón va oscuro (en claro es casi blanco). */
    --color-primary-foreground: oklch(0.17 0.01 265);
  }
}

/* ORIGEN: traid-ml-prototipo app/_ng/ng.css f84ffd7f
   Adaptada: mínimo NG, con tokens y tipografía U1c de FUSION. No cambia la cáscara. */
:root {
  --n-grafito: var(--color-tinta);
  --n-rosa: var(--color-acento);
  --n-rosa-hondo: var(--color-acento);
  --n-tinta: var(--color-tinta);
  --n-tinta-3: var(--color-tenue);
  --n-linea: var(--color-borde);
  --n-sup: var(--color-superficie);
  --n-ml: var(--color-aviso);
  --n-mp: var(--color-destacado);
  --n-piedra: var(--color-tenue);
}
.n-pantalla, .n-pila { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.n-cifras, .n-tarjeta { border: 1px solid var(--color-borde); border-radius: 10px; background: var(--color-superficie); min-width: 0; }
.n-cifras-fila { display: grid; grid-template-columns: repeat(var(--n-cols, 5), minmax(0, 1fr)); }
.n-cifra { position: relative; padding: 14px; min-width: 0; border-right: 1px solid var(--color-borde); }
.n-cifra:last-child { border-right: 0; }
.n-cifra > a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.n-cifra > span { display: block; margin-bottom: 4px; }
.n-cifra[data-activa] { box-shadow: inset 0 0 0 2px var(--color-acento); border-radius: 7px; }
.n-cifra-rotulo { display: flex !important; align-items: center; gap: 7px; font-size: 13px; color: var(--color-tenue); }
.n-cifra-rotulo i, .n-leyenda i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.n-cifra-valor { font-family: var(--font-display), system-ui, sans-serif; font-size: 30px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.n-cifra[data-tono=rosa] .n-cifra-valor { color: var(--color-acento); }
.n-cifra[data-tono=alarma] .n-cifra-valor { color: var(--color-alarma); }
.n-cifra-valor { overflow-wrap: anywhere; }
/* Cinta de 6 o más cifras: la letra se adapta al ancho de cada celda para que dos números grandes nunca se pisen
   (hallazgo 5: «$ 6.193.494$ 41.528.688» en /publicidad). Una celda aguanta ~12 caracteres de ~0,62 em. */
.n-cifras-fila[data-densa] { container-type: inline-size; }
.n-cifras-fila[data-densa] .n-cifra-valor { font-size: clamp(14px, calc((100cqw / var(--n-cols, 7) - 30px) / 7.8), 30px); }
.n-cifra-valor[data-falta] { font-size: 20px; color: var(--color-tenue); }
.n-cifra-pie, .n-cifra-motivo, .n-cifras-nota { font-size: 12px; color: var(--color-tenue); }
.n-cifra-pie { line-height: 1.4; }
.n-cifras-debajo { padding: 4px 16px 12px; }
.n-cifras-nota { padding: 0 16px 12px; text-align: right; }
.n-apilada-barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 6px 0 9px; }
.n-apilada-barra a { display: block; min-width: 3px; border-right: 2px solid var(--color-superficie); }
.n-apilada-barra a:focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 2px; }
.n-leyenda { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-tenue); }
.n-leyenda a { display: inline-flex; align-items: center; gap: 6px; }
.n-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.n-tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px; }
.n-tarjeta-cabeza h2 { font-size: 14px; font-weight: 600; margin: 0; }
.n-tarjeta-dato { font-size: 12px; color: var(--color-tenue); }
.n-tarjeta-cuerpo { padding: 0 16px 16px; min-width: 0; }
.n-tarjeta-pie { padding: 12px 16px; border-top: 1px solid var(--color-borde); font-size: 12px; }
.n-tarjeta--tabla > .n-tarjeta-cuerpo { padding: 0; }
.n-tarjeta--tabla .n-barra-tabla, .n-tarjeta--tabla .n-chips-activos { margin: 0 16px 12px; }
.n-tabla { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: auto; }
.n-tabla th { font-weight: 500; color: var(--color-tenue); text-align: left; white-space: normal; overflow: visible; text-overflow: clip; }
.n-tabla th, .n-tabla td { padding: 12px 10px; border-top: 1px solid var(--color-borde); vertical-align: top; }
.n-tabla .n-der { text-align: right; font-variant-numeric: tabular-nums; }
.n-tabla tbody tr[data-mal] td:first-child { border-left: 3px solid var(--color-alarma); }
.n-tabla td:first-child { min-width: 150px; max-width: 245px; }
.n-celda-contenido { overflow-wrap: anywhere; }
/* 22/10: la segunda línea de una celda (lo secundario: cuenta, fecha, desglose), chica y tenue. */
.n-celda-secundaria { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--color-tenue); font-variant-numeric: tabular-nums; }
.n-tabla a, .n-como-tabla summary, .n-paso a { color: var(--color-acento); }
.n-num { font-variant-numeric: tabular-nums; }
.n-lectura { font-size: 12px; color: var(--color-tenue); }
.n-celda-falta { font-size: 12px; color: var(--color-tenue); }
.n-fila-titulo { display: block; font-weight: 500; margin-bottom: 2px; }
.n-fila-meta { display: block; font-size: 11px; color: var(--color-tenue); }
.n-escalera { margin-top: 6px; max-width: 170px; }
.n-escalera svg { width: 100%; max-height: 40px; }
.n-escalera .n-como-tabla summary { font-size: 10px; }
.n-como-tabla { margin-top: 7px; font-size: 12px; }
.n-como-tabla summary { cursor: pointer; }
.n-paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-borde); font-size: 12px; }
.n-paginacion a { color: var(--color-acento); }
.n-paginacion a:last-child { margin-left: auto; }
.n-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.n-chip, .n-filtros, .n-menu-tabla { position: relative; }
.n-chip > summary, .n-filtros > summary, .n-menu-tabla > summary, .n-boton, .n-buscar button { list-style: none; cursor: pointer; border: 1px solid var(--color-borde); border-radius: 7px; padding: 7px 10px; background: var(--color-superficie); font-size: 12px; }
.n-chip > summary::-webkit-details-marker, .n-filtros > summary::-webkit-details-marker, .n-menu-tabla > summary::-webkit-details-marker { display: none; }
.n-chip > div, .n-menu-tabla > div { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; min-width: 180px; padding: 7px; border: 1px solid var(--color-borde); border-radius: 10px; background: var(--color-superficie); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-tinta) 15%, transparent); }
.n-menu-tabla > div { left: auto; right: 0; }
.n-chip > div a, .n-menu-tabla > div a { display: block; padding: 7px 10px; }
.n-contexto .n-frescura, .n-escritura { font-size: 12px; color: var(--color-tenue); }
.n-contexto .n-escritura { margin-left: auto; }
.n-segmentado { display: inline-flex; gap: 2px; border-radius: 7px; background: var(--color-fondo); padding: 3px; font-size: 12px; flex-wrap: wrap; }
.n-segmentado a { padding: 5px 8px; color: var(--color-tenue); border-radius: 5px; }
.n-segmentado a[aria-current] { background: var(--color-superficie); color: var(--color-tinta); box-shadow: 0 0 0 1px var(--color-borde); }
.n-barra-tabla { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.n-buscar { display: flex; gap: 6px; flex: 1; min-width: 180px; }
.n-buscar input { width: 100%; min-width: 0; }
.n-buscar input, .n-filtros select, .n-filtros input:not([type=hidden]), .n-formulario input:not([type=hidden]), .n-formulario select, .n-formulario textarea { border: 1px solid var(--color-borde); border-radius: 7px; padding: 7px 10px; background: var(--color-superficie); color: var(--color-tinta); font-size: 12px; }
.n-filtros-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(380px, calc(100vw - 32px)); max-height: 75vh; overflow-y: auto; padding: 18px; border: 1px solid var(--color-borde); border-radius: 10px; background: var(--color-superficie); box-shadow: 0 12px 32px color-mix(in srgb, var(--color-tinta) 18%, transparent); }
.n-filtros form, .n-filtros label { display: flex; flex-direction: column; gap: 8px; }
.n-filtros form { gap: 14px; }
.n-filtros fieldset { display: flex; flex-direction: column; gap: 10px; }
.n-filtros legend { font-weight: 600; margin-bottom: 8px; }
.n-filtros select { width: 100%; }
.n-mas-filtros > summary { cursor: pointer; margin-bottom: 10px; color: var(--color-tenue); }
.n-mas-filtros label { margin-bottom: 12px; }
.n-filtros-acciones { display: flex; align-items: center; gap: 14px; }
.n-boton--principal { color: var(--color-superficie); background: var(--color-acento); border-color: var(--color-acento); }
.n-chips-activos { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.n-chips-activos a:not(.n-limpiar) { border: 1px solid var(--color-borde); border-radius: 20px; padding: 4px 10px; background: var(--color-fondo); }
.n-chips-activos .n-limpiar { padding: 4px 6px; color: var(--color-acento); }
.n-pasos { list-style: none; padding: 0; }
.n-paso { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-borde); }
.n-paso:last-child { border-bottom: 0; }
.n-paso > div { flex: 1; min-width: 0; }
.n-paso p { color: var(--color-tenue); font-size: 12px; margin-top: 3px; }
.n-paso b { font-size: 13px; font-weight: 500; }
.n-nota, .n-condicion, .n-conteo { font-size: 12px; line-height: 1.5; color: var(--color-tenue); }
.n-lista { display: flex; flex-direction: column; gap: 6px; }
.n-link { color: var(--color-acento); text-decoration: underline; cursor: pointer; }
span.n-chip { border: 1px solid var(--color-borde); border-radius: 7px; padding: 7px 10px; background: var(--color-superficie); font-size: 12px; }
.n-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 13px; }
.n-formulario label { display: flex; flex-direction: column; gap: 6px; }
.n-formulario .n-ancho { grid-column: 1 / -1; }
.n-ayuda { font-size: 12px; margin-top: 4px; }
.n-ayuda summary { color: var(--color-tenue); cursor: pointer; }
.n-histograma svg { display: block; max-height: 230px; }
@media (max-width: 639px) {
  .n-cifras-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-cifras-fila > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .n-cifra { border-bottom: 1px solid var(--color-borde); }
  .n-cifra-valor { font-size: 28px; }
  .n-cifras-fila[data-densa] .n-cifra-valor { font-size: clamp(14px, calc((100cqw / 2 - 30px) / 7.8), 28px); }
  .n-grilla { grid-template-columns: minmax(0, 1fr); }
  .n-filtros-panel { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-height: 100dvh; border-radius: 0; padding: 64px 20px 20px; box-shadow: 0 -20px 50px color-mix(in srgb, var(--color-tinta) 20%, transparent); }
  .n-filtros[open] > summary { position: fixed; top: 14px; right: 20px; z-index: 41; }
  .n-tabla:not(.n-tabla--chica) thead { display: none; }
  .n-tabla:not(.n-tabla--chica) tbody { display: block; }
  .n-tabla:not(.n-tabla--chica) tbody tr { display: block; padding: 12px 16px; border-top: 1px solid var(--color-borde); }
  .n-tabla:not(.n-tabla--chica) td { display: flex; gap: 12px; justify-content: space-between; padding: 5px 0; border: 0; min-width: 0; max-width: none; text-align: right; }
  .n-tabla:not(.n-tabla--chica) td[data-label]::before { content: attr(data-label); text-align: left; color: var(--color-tenue); flex: 0 0 36%; font-size: 11px; }
  .n-tabla:not(.n-tabla--chica) td:first-child { display: block; text-align: left; margin-bottom: 8px; }
  .n-tabla:not(.n-tabla--chica) td:first-child::before { content: none; }
  .n-tabla .n-celda-contenido { min-width: 0; }
  .n-escalera { max-width: 210px; }
  .n-barra-tabla .n-buscar { flex-basis: 100%; }
  .n-contexto .n-escritura { margin-left: 0; width: 100%; }
  .n-formulario { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .n-barra-tabla, .n-chips-activos, .n-paginacion, .n-contexto { display: none; }
  .n-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-tarjeta, .n-cifras { -moz-column-break-inside: avoid; break-inside: avoid; }
}

/* Paleta FUSION: claro/rosado y negro/rosado en contenido, navegación y portales.
   Sólo pantalla; se preservan estructura del shell e impresión clara. */
@media screen {
  /* El contrato existente usa ausencia de data-tema para claro. */
  :root:root:not([data-tema="oscuro"]), :root:not([data-tema="oscuro"]) .c-cascara {
    --color-fondo:#f4f5f7;
    --color-superficie:#ffffff;
    --color-tinta:#252932;
    --color-tenue:#59616e;
    --color-borde:#dce0e6;
    --color-acento:#c51467;
    --color-alarma:#b42336;
    --color-aviso:#855000;
    --color-favorable:#176747;
    --color-alarma-suave:#fff0f1;
    --color-aviso-suave:#fff4de;
    --color-favorable-suave:#eaf7f0;
    --color-destacado:#784385;
    --color-destacado-suave:#fce7f0;
    --color-cuenta-1:#574077;
    --color-cuenta-1-suave:#f0eafa;
    --color-cuenta-2:#814c28;
    --color-cuenta-2-suave:#faf0e5;
    --color-serie-1:#6551a5;
    --color-serie-2:#9a6300;
    --color-serie-3:#087487;
    --color-serie-4:#a63679;
    --color-serie-5:#536575;
    --color-serie-anterior:#78808e;
    --color-grilla:#e2e5eb;
    --color-background:var(--color-fondo);
    --color-foreground:var(--color-tinta);
    --color-card:var(--color-superficie);
    --color-card-foreground:var(--color-tinta);
    --color-popover:var(--color-superficie);
    --color-popover-foreground:var(--color-tinta);
    --color-muted:var(--color-destacado-suave);
    --color-muted-foreground:var(--color-tenue);
    --color-border:var(--color-borde);
    --color-input:#a6adb7;
    --color-ring:var(--color-acento);
    --color-primary:var(--color-acento);
    --color-primary-foreground:#ffffff;
    --color-primary-hover:#ab1058;
    --color-primary-active:#950b4b;
    --color-secondary:#edf0f4;
    --color-secondary-foreground:#252932;
    --color-accent:var(--color-acento);
    --color-accent-foreground:#ffffff;
    --color-destructive:var(--color-alarma);
    --color-destructive-text:var(--color-alarma);
    --color-destructive-foreground:#ffffff;
    --color-surface-0:var(--color-fondo);
    --color-surface-1:var(--color-superficie);
    --color-surface-2:var(--color-destacado-suave);
    --color-surface-3:#e7ebf0;
    --c-rosa-suave:#fce7f0;
    --n-grafito:var(--color-tinta);
    --n-rosa:var(--color-acento);
    --n-rosa-hondo:var(--color-acento);
    --n-tinta:var(--color-tinta);
    --n-tinta-3:var(--color-tenue);
    --n-linea:var(--color-borde);
    --n-sup:var(--color-superficie);
    --n-ml:var(--color-aviso);
    --n-mp:var(--color-destacado);
    --n-piedra:var(--color-tenue);
    --fusion-nav:#ffffff;
    color-scheme:light;
  }
  :root:root[data-tema="oscuro"], :root[data-tema="oscuro"] .c-cascara {
    --color-fondo:#000000;
    --color-superficie:#111113;
    --color-tinta:#f4f4f6;
    --color-tenue:#b2b2bc;
    --color-borde:#333338;
    --color-acento:#ff83b4;
    --color-alarma:#ffa4aa;
    --color-aviso:#f0c47c;
    --color-favorable:#9cddbd;
    --color-alarma-suave:#331c20;
    --color-aviso-suave:#32261b;
    --color-favorable-suave:#192c24;
    --color-destacado:#e8b5ef;
    --color-destacado-suave:#25151d;
    --color-cuenta-1:#cabde5;
    --color-cuenta-1-suave:#292333;
    --color-cuenta-2:#d5bba3;
    --color-cuenta-2-suave:#30271e;
    --color-serie-1:#b7b0ff;
    --color-serie-2:#e9ce98;
    --color-serie-3:#8fd8e8;
    --color-serie-4:#e3a8cf;
    --color-serie-5:#b8c6d8;
    --color-serie-anterior:#888899;
    --color-grilla:#333338;
    --color-background:var(--color-fondo);
    --color-foreground:var(--color-tinta);
    --color-card:var(--color-superficie);
    --color-card-foreground:var(--color-tinta);
    --color-popover:var(--color-superficie);
    --color-popover-foreground:var(--color-tinta);
    --color-muted:var(--color-destacado-suave);
    --color-muted-foreground:var(--color-tenue);
    --color-border:var(--color-borde);
    --color-input:#777777;
    --color-ring:#ff83b4;
    --color-primary:var(--color-acento);
    --color-primary-foreground:#201019;
    --color-primary-hover:#ffa1c6;
    --color-primary-active:#ef71a3;
    --color-secondary:#1b1b1e;
    --color-secondary-foreground:#f5f5f5;
    --color-accent:var(--color-acento);
    --color-accent-foreground:#201019;
    --color-destructive:var(--color-alarma);
    --color-destructive-text:var(--color-alarma);
    --color-destructive-foreground:#101010;
    --color-surface-0:var(--color-fondo);
    --color-surface-1:var(--color-superficie);
    --color-surface-2:var(--color-destacado-suave);
    --color-surface-3:#303030;
    --c-rosa-suave:#25151d;
    --n-grafito:var(--color-tinta);
    --n-rosa:var(--color-acento);
    --n-rosa-hondo:var(--color-acento);
    --n-tinta:var(--color-tinta);
    --n-tinta-3:var(--color-tenue);
    --n-linea:var(--color-borde);
    --n-sup:var(--color-superficie);
    --n-ml:var(--color-aviso);
    --n-mp:var(--color-destacado);
    --n-piedra:var(--color-tenue);
    --fusion-nav:#080808;
    color-scheme:dark;
  }
  body, .c-cascara, .c-cascara > main { background:var(--color-fondo); color:var(--color-tinta); }
  .c-cascara > main > :not(.c-topbar) :is(input,textarea,select),
  .fusion-pantalla-independiente :is(input,textarea,select) {
    color:var(--color-tinta);
    accent-color:var(--color-acento);
  }
  .c-cascara > main > :not(.c-topbar) :is(button,a,summary,input,textarea,select):focus-visible,
  .fusion-pantalla-independiente :is(button,a,summary,input,textarea,select):focus-visible {
    outline:2px solid var(--color-acento);
    outline-offset:3px;
  }
  .c-cascara > main > :not(.c-topbar) :is(.n-cifras,.n-tarjeta) { border-radius:10px; }
  .c-cascara > main > :not(.c-topbar) .n-cifra[data-tono=alarma] { border-top:3px solid var(--color-alarma); }
  .c-cascara > main > :not(.c-topbar) .n-cifra[data-tono=alarma] .n-cifra-rotulo { font-weight:700; }
  /* Algunas pantallas fijaban texto blanco sobre el antiguo acento rosa. */
  .c-cascara > main > :not(.c-topbar) :is(button,a)[class~="bg-[var(--color-acento)]"],
  .c-cascara > main > :not(.c-topbar) .ru-selector-periodo__tab--activo,
  .fusion-pantalla-independiente :is(button,a)[class~="bg-[var(--color-acento)]"] { color:var(--color-primary-foreground); }
  .c-cascara :is(button,a)[class~="bg-[var(--color-tinta)]"] { color:var(--color-fondo); }
  .c-cascara > main > :not(.c-topbar) :is(th,td) { font-variant-numeric:tabular-nums; }
 .c-cascara > nav[aria-label="Secciones"], .c-cascara .c-panel, .c-cascara .c-panel > aside { background:var(--fusion-nav); }
 .c-cascara > nav > a:first-child, .c-topbar :is(a,button)[class~="bg-[var(--color-acento)]"] { color:var(--color-primary-foreground); }
 .c-cascara :is(button,a)[class~="bg-[var(--color-acento)]"] { color:var(--color-primary-foreground); }
}

/*
 * EL SISTEMA VISUAL v4 — «v4 conciliada» (pedido de Ignacio, 19/10/2026).
 *
 * DOS PARTES, a propósito:
 *
 *  1) LA PIEL (`:root[data-ui='v4']`): sólo existe con `UI_V4=1` (el layout pone `data-ui="v4"` en el <html>). NO crea
 *     tokens nuevos: le da valores v4 a los MISMOS `--color-*` de `globals.css`, así todo lo que ya pinta con tokens
 *     (el puente a @traid/ui incluido) cambia de piel sin tocar una pantalla. Sin el interruptor, nada de esto aplica y
 *     cada réplica se ve exactamente como hoy.
 *       · rosa de marca #c71f68 = `--color-acento` (SÓLO acción: botones, links, foco, la pestaña activa);
 *       · series de datos --s1..--s4 del mockup = `--color-serie-1..4` (#2a78d6 #eb6834 #1baf7a #6250d6; en oscuro
 *         #3987e5 #d95926 #199e70 #9085e9); lo que se descuenta en una cascada = `--color-serie-anterior` (--sneg);
 *       · estados ok/warn/bad = favorable/aviso/alarma, SIEMPRE con texto al lado (la regla de `UI_CONTRACT.md` §3);
 *       · oscuro «carbón ciruela» #131016 / #1b1820, sólo si la persona eligió oscuro (`data-tema="oscuro"`) y sólo en
 *         pantalla: se imprime siempre en claro.
 *     Los valores están en oklch (como el resto del repo) con su hexadecimal de origen al lado; el contraste lo mide
 *     `lib/tema/paleta-v4.test.ts` con el mismo método que la paleta clara.
 *
 *  2) LAS PIEZAS (`.v4-*`): las clases de las 4 tarjetas, las pestañas y los gráficos de `components/v4/`. Pintan SÓLO
 *     con tokens, así que se ven bien con o sin la piel v4 (el mapa de funciones las usa siempre).
 */

/* ESCALA v4 (21/10/2026, pedido de Ignacio: «más fluido, más moderno»). Tokens con nombre propio (`--v4-*`): definirlos
   en `html` (con `:where`, especificidad cero) no cambia nada sin la piel: sólo las piezas `.v4-*` y la piel los consumen.
   Tipografía, espacios, radios y sombras en UN lugar: las pantallas no se tocan una por una. */
:where(html) {
  /* Tipografía: tamaño / alto de línea. Base 14 px (densa, de tablero); los títulos con tracking negativo. */
  --v4-texto-2xs: 11px;
  --v4-texto-xs: 12px;
  --v4-texto-sm: 13px;
  --v4-texto-base: 14px;
  --v4-texto-md: 15px;
  --v4-texto-lg: 17px;
  /* 22/10 (Ignacio: «la parte de diseño está floja»): los títulos grandes son FLUIDOS — crecen con la ventana entre un
     piso legible en el teléfono y el tamaño de escritorio de siempre (nunca más grandes que antes). */
  --v4-texto-xl: clamp(18px, 1rem + 0.35vw, 20px);
  --v4-texto-2xl: clamp(20px, 1.05rem + 0.6vw, 24px);
  --v4-texto-3xl: clamp(22px, 1.1rem + 0.9vw, 28px);
  --v4-linea-ajustada: 1.2;
  --v4-linea-media: 1.4;
  --v4-linea-normal: 1.55;
  --v4-peso-normal: 400;
  --v4-peso-medio: 500;
  --v4-peso-semi: 600;
  --v4-peso-fuerte: 700;
  --v4-tracking-titulo: -0.018em;
  /* Rótulo chico de sección o de columna («Facturado», «Margen»): un punto más firme que el texto tenue suelto. */
  --v4-rotulo: var(--v4-texto-xs);
  --v4-peso-rotulo: 550;
  /* La cifra de una tarjeta: crece con SU tarjeta (cqi) y nunca baja de lo legible. */
  --v4-cifra: clamp(1.125rem, 9.5cqi, 1.75rem);
  --v4-cifra-destacada: clamp(1.25rem, 11.5cqi, 2.25rem);

  /* Espacios (múltiplos de 4) y relleno de tarjeta, parejos en todas. */
  --v4-espacio-1: 4px;
  --v4-espacio-2: 8px;
  --v4-espacio-3: 12px;
  --v4-espacio-4: 16px;
  --v4-espacio-5: 20px;
  --v4-espacio-6: 24px;
  --v4-espacio-8: 32px;
  --v4-relleno-tarjeta: 18px 20px;
  /* Separación entre secciones de una pantalla: respira más en escritorio, se aprieta en el teléfono. */
  --v4-espacio-seccion: clamp(20px, 1rem + 1.2vw, 32px);

  /* GRÁFICOS (22/10): un solo lenguaje para todos los gráficos — eje, grilla, globito, leyenda y pastillas. */
  --v4-eje-texto: 11px;
  --v4-grafico-grilla: color-mix(in oklch, var(--color-grilla) 85%, var(--color-tenue));
  --v4-grafico-banda: color-mix(in oklch, var(--color-grilla) 55%, transparent);
  --v4-barra-radio: 6px;

  /* TABLAS (22/10): densidad, cebra y encabezado. */
  --v4-tabla-celda-y: 9px;
  --v4-tabla-celda-x: 12px;
  --v4-tabla-cebra: color-mix(in oklch, var(--color-grilla) 38%, transparent);
  --v4-tabla-hover: color-mix(in oklch, var(--color-acento) 6%, transparent);
  --v4-tabla-encabezado: color-mix(in oklch, var(--color-grilla) 45%, var(--color-superficie));

  /* Radios. */
  --v4-radio-s: 6px;
  --v4-radio-m: 10px;
  --v4-radio-l: 14px;
  --v4-radio-pastilla: 999px;

  /* Bordes suaves: el borde del tema mezclado con la superficie (el token de color no cambia: su contraste lo mide
     `lib/tema/paleta-v4.test.ts`). Sombras cortas y difusas, nada de sombra dura. */
  --v4-borde-suave: color-mix(in oklch, var(--color-borde) 72%, var(--color-superficie));
  --v4-sombra-1: 0 1px 2px color-mix(in oklch, var(--color-tinta) 6%, transparent);
  --v4-sombra-2: 0 4px 14px -4px color-mix(in oklch, var(--color-tinta) 14%, transparent);
  /* FORMULARIOS (04/11, propuesta aprobada por Ignacio, `finde-1019/FORMULARIOS-PROPUESTA-20261104.md`): el borde de un
     CONTROL (campo, selector). `--color-borde` da ~1,3:1 sobre blanco —sirve para separar tarjetas, no para un campo, que
     pide 3:1 (WCAG 1.4.11)—. Es una mezcla de dos tokens existentes, NO un color nuevo; el contraste lo mide
     `lib/tema/paleta-v4.test.ts`. Lo usan la regla de campos de abajo y `components/ux/formulario.css`. */
  --ux-borde-control: color-mix(in oklch, var(--color-borde) 35%, var(--color-tenue));

  /* Foco moderno: anillo con el color de acción (y el contorno de siempre para quien fuerza colores). */
  --v4-anillo: 0 0 0 3px color-mix(in oklch, var(--color-acento) 28%, transparent);
  --v4-transicion: 140ms cubic-bezier(0.2, 0, 0, 1);
}

/* Sin @layer: este archivo se importa suelto (sin @tailwind base) y Tailwind 3 rechaza un @layer huérfano en el build.
   Sin capa, :root[data-ui='v4'] igual gana a los tokens de globals.css (que están en @layer base). */
/* UX FINAL (UI_UX_FINAL, `data-ux="final"`, 25/10; lo informó Nahuel): en claro, `tema-fusion.css` le ganaba a esta
   piel por especificidad (`:root:root:not([data-tema="oscuro"])` pesa 0,3,0 contra 0,2,0) y además redeclara los tokens
   en `.c-cascara`. Con la UX final, estos dos selectores (0,4,0 y 0,5,0) hacen que en claro manden los tokens v4; en
   oscuro no aplican (`:not`) y sigue mandando la paleta oscura de fusion, como hoy. Sin el interruptor no existe
   `data-ux` y nada cambia. */
:root[data-ui='v4'][data-ux='final']:not([data-tema='oscuro']) .c-cascara,
:root[data-ui='v4'][data-ux='final']:not([data-tema='oscuro']),
:root[data-ui='v4'] {
  --color-fondo: oklch(0.971 0.003 308.4); /* #f6f5f7 */
  --color-superficie: oklch(1 0 0); /* #ffffff */
  --color-borde: oklch(0.888 0.014 304.1); /* #dcd8e2 */
  --color-tinta: oklch(0.211 0.016 296.5); /* #19171f */
  --color-tenue: oklch(0.495 0.024 300.7); /* #645f6e */
  --color-acento: oklch(0.548 0.204 1.8); /* #c71f68 — rosa de marca: sólo acción */
  --color-destacado-suave: oklch(0.938 0.03 348.2); /* #fbe3ee */
  --color-favorable: oklch(0.511 0.119 156.5); /* #0d7a49 */
  --color-favorable-suave: oklch(0.944 0.029 163.2); /* #dcf3e7 */
  --color-aviso: oklch(0.5 0.109 69.6); /* #8a5600 */
  --color-aviso-suave: oklch(0.954 0.04 88.2); /* #fbefd2 */
  --color-alarma: oklch(0.501 0.178 28.7); /* #b3261e */
  --color-alarma-suave: oklch(0.93 0.029 25.6); /* #fbe1de */
  --color-serie-1: oklch(0.575 0.163 255.5); /* --s1 #2a78d6 */
  --color-serie-2: oklch(0.671 0.175 40.6); /* --s2 #eb6834 */
  --color-serie-3: oklch(0.669 0.141 162.1); /* --s3 #1baf7a */
  --color-serie-4: oklch(0.527 0.197 283.4); /* --s4 #6250d6 */
  --color-serie-anterior: oklch(0.706 0.028 308); /* --sneg #a59cae */
  --color-grilla: oklch(0.936 0.01 311.2); /* #ece8ef */
  --color-primary-foreground: oklch(1 0 0);

  /* Tipografía v4: Geist para UI y cifras (numerales tabulares), Geist Mono sólo para códigos (21/10: reemplaza a Schibsted). */
  --font-sans: var(--font-v4), system-ui, sans-serif;
  --font-display: var(--font-v4), system-ui, sans-serif;
  --font-mono: var(--font-v4-mono), ui-monospace, monospace;
}

:root[data-ui='v4'] body {
  font-size: var(--v4-texto-base);
  line-height: var(--v4-linea-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Los números se alinean: tabulares en celdas, cifras y todo lo marcado como número. */
:root[data-ui='v4'] :is(td, th, [data-cifra], .tabular-nums, input[inputmode='decimal'], input[type='number'], time) {
  font-variant-numeric: tabular-nums;
}

/* La escala de títulos (los h2/h3 sin clase de tamaño propia heredan la escala; los que la tienen, la conservan). */
:root[data-ui='v4'] :is(h1, h2, h3) { letter-spacing: var(--v4-tracking-titulo); }
:root[data-ui='v4'] h2:not([class*='text-']) { font-size: var(--v4-texto-lg); line-height: var(--v4-linea-media); font-weight: var(--v4-peso-semi); }
:root[data-ui='v4'] h3:not([class*='text-']) { font-size: var(--v4-texto-md); line-height: var(--v4-linea-media); font-weight: var(--v4-peso-semi); }

/* Etiquetas en minúscula normal: nada de MAYÚSCULAS espaciadas (el texto es texto, no decoración). */
:root[data-ui='v4'] :is(th, .uppercase) {
  text-transform: none;
  letter-spacing: 0;
}

/* El título de cada Bloque (`components/tablero/Bloque.tsx`) y su bajada: fluidos, firmes y con la bajada a una medida
   legible. Es el título de sección de TODAS las pantallas, así que se ajusta acá y no pantalla por pantalla. */
:root[data-ui='v4'] .v4-titulo-bloque {
  font-size: var(--v4-texto-xl);
  line-height: var(--v4-linea-ajustada);
  font-weight: var(--v4-peso-semi);
  letter-spacing: var(--v4-tracking-titulo);
}
:root[data-ui='v4'] .bajada-del-bloque { font-size: var(--v4-texto-sm); line-height: var(--v4-linea-normal); }

:root[data-ui='v4'] main > header h1 {
  font-size: var(--v4-texto-3xl);
  line-height: var(--v4-linea-ajustada);
  font-weight: var(--v4-peso-fuerte);
  letter-spacing: -0.022em;
}

/* Foco visible siempre, con el color de acción. */
:root[data-ui='v4'] :focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* BOTONES Y CAMPOS (todos, sin tocar pantallas): transiciones cortas, radio parejo y foco con anillo suave. */
:root[data-ui='v4'] :is(button, [role='button'], summary, a.v4-boton, input[type='submit'], input[type='button']) {
  transition: background-color var(--v4-transicion), color var(--v4-transicion), box-shadow var(--v4-transicion), border-color var(--v4-transicion);
}
:root[data-ui='v4'] :is(button, [role='button'], input[type='submit'], input[type='button']):focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
  box-shadow: var(--v4-anillo);
}
:root[data-ui='v4'] :is(button, input[type='submit'], input[type='button']):not(:disabled):active { transform: translateY(0.5px); }
:root[data-ui='v4'] :is(button, input[type='submit'], input[type='button']):disabled { cursor: not-allowed; }
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea) {
  border-radius: var(--v4-radio-s);
  transition: border-color var(--v4-transicion), box-shadow var(--v4-transicion);
}
/*
 * FORMULARIOS (04/11, `finde-1019/FORMULARIOS-PROPUESTA-20261104.md` nivel A, aprobada por Ignacio): lo que llega a TODOS los
 * campos sin tocar una pantalla. Siempre fuera de `.ux-control > *` (el campo con la unidad adentro: el borde y el foco los
 * pone su caja, `components/ux/formulario.css`).
 *  · borde que se ve (`--ux-borde-control`, ≈3:1) en los campos con el borde de siempre o sin color de borde propio: un
 *    borde de color a propósito (alarma, acento) no se toca;
 *  · fondo blanco en los campos con el gris del fondo (`bg-[var(--color-fondo)]`, parecían deshabilitados), salvo los
 *    deshabilitados o de sólo lectura, que siguen grises;
 *  · alto mínimo de 36 px y la flechita propia del selector, FUERA de las zonas compactas: celdas de tabla (Costos › carga,
 *    Edición masiva, Depósito), barras de filtros y de tabla, la cabecera y los menúes;
 *  · el campo que el navegador da por mal después de tocarlo (`:user-invalid`) o que la pantalla marca (`aria-invalid`), en rojo.
 */
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea):not(.ux-control > *):is([class*='border-[var(--color-borde)]'], :not([class*='border-[var(--color-'])) {
  border-color: var(--ux-borde-control);
}
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea)[class*='bg-[var(--color-fondo)]']:not(:disabled):not([readonly]):not(.ux-control > *) {
  background-color: var(--color-superficie);
}
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='hidden']), select:not([multiple]):not([size])):not(.ux-control > *):not(:is(td, th, [role='search'], [data-filtros], [data-barra-de-tabla], .ux-tabla-barra, .ux-bandeja-barra, header, nav) *) {
  min-height: 36px;
}
:root[data-ui='v4'] select:not([multiple]):not([size]):not(.ux-control > *):not(:is(td, th, [role='search'], [data-filtros], [data-barra-de-tabla], .ux-tabla-barra, .ux-bandeja-barra, header, nav) *) {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-tenue) 50%), linear-gradient(135deg, var(--color-tenue) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea):not(.ux-control > *):hover:not(:disabled):not(:focus) {
  border-color: color-mix(in oklch, var(--ux-borde-control) 60%, var(--color-tinta));
}
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea):not(.ux-control > *):is(:user-invalid, [aria-invalid='true']) {
  border-color: var(--color-alarma);
}
:root[data-ui='v4'] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), select, textarea):not(.ux-control > *):focus-visible {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: var(--v4-anillo);
}
:root[data-ui='v4'] :is(input, select, textarea)::-moz-placeholder { color: var(--color-tenue); opacity: 0.75; }
:root[data-ui='v4'] :is(input, select, textarea)::placeholder { color: var(--color-tenue); opacity: 0.75; }
:root[data-ui='v4'] :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--color-acento); }

/* TABLAS: encabezado tenue y sin gritar, filas con hover suave (el resto de cada tabla sigue igual). */
:root[data-ui='v4'] thead th {
  font-weight: var(--v4-peso-medio);
  color: var(--color-tenue);
}
:root[data-ui='v4'] tbody tr { transition: background-color var(--v4-transicion); }

/*
 * LAS TABLAS DE DATOS (22/10, pedido de Ignacio: «hay tablas que no me terminan de gustar»). Una sola vez acá, así
 * mejoran TODAS: las de `TablaDesplazable` (región `[data-scroll]` del packet), las de `TablaNG`/«Ver los números»
 * (`.n-tabla`) y las de `@traid/ui`. Reglas:
 *   · el hover y la cebra van con especificidad CERO (`:where`): una fila que la pantalla pinta a propósito (alarma,
 *     destacada, la elegida) conserva su color;
 *   · el encabezado: rótulo chico, firme y tenue, con fondo propio y PEGAJOSO dentro de su caja (en escritorio la caja
 *     tiene un alto máximo, así el encabezado queda a la vista en las tablas largas; en el teléfono y al imprimir, no);
 *   · números a la derecha con dígitos tabulares donde la celda ya lo pide (`.text-right`, `.n-der`, `[data-numero]`);
 *   · nada de esto cambia un texto, un dato ni un ancho de columna.
 */
:where(:root[data-ui='v4']) :where(tbody tr:hover) { background-color: var(--v4-tabla-hover); }
:where(:root[data-ui='v4']) :where([data-scroll] > table, .n-tabla:not(.n-tabla--chica)) > tbody > :where(tr:nth-child(even):not([data-grupo-de-filas])) { background-color: var(--v4-tabla-cebra); }
:where(:root[data-ui='v4']) :where([data-scroll] > table, .n-tabla:not(.n-tabla--chica)) > tbody > :where(tr:nth-child(even):hover) { background-color: var(--v4-tabla-hover); }
:root[data-ui='v4'] :is([data-scroll] > table, .n-tabla) > thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--v4-tabla-encabezado);
  font-size: var(--v4-rotulo);
  font-weight: var(--v4-peso-rotulo);
  line-height: var(--v4-linea-media);
  letter-spacing: 0.005em;
  vertical-align: bottom;
  box-shadow: inset 0 -1px 0 var(--color-borde);
}
:root[data-ui='v4'] :is([data-scroll] > table, .n-tabla) > thead th a { color: inherit; text-decoration: none; }
:root[data-ui='v4'] :is([data-scroll] > table, .n-tabla) > thead th a:hover { color: var(--color-tinta); }
:root[data-ui='v4'] :is([data-scroll] > table, .n-tabla) > thead th[aria-sort] { color: var(--color-tinta); }
:root[data-ui='v4'] :is(td, th):is(.text-right, .n-der, [data-numero]) { font-variant-numeric: tabular-nums; }
:root[data-ui='v4'] :is(td, th)[data-numero] { text-align: right; }
:root[data-ui='v4'] [data-scroll] > table > tbody > tr > td { vertical-align: middle; }
/* La caja de la tabla: alto máximo SÓLO en escritorio y en pantalla (el encabezado pegajoso necesita una caja que se
   desplace; ver `TablaDesplazable`). Una tabla corta no cambia en nada: el alto máximo nunca agranda. */
@media screen and (min-width: 768px) {
  :root[data-ui='v4'] [data-scroll]:not([style*='max-height']) { max-height: min(78vh, 60rem); overscroll-behavior-y: auto; }
}
/* La tabla de siempre de este repo (`.n-tabla`): un poco más densa y con el número del tamaño del texto. */
:root[data-ui='v4'] .n-tabla { font-size: var(--v4-texto-sm); }
:root[data-ui='v4'] .n-tabla :is(th, td) { padding: var(--v4-tabla-celda-y) var(--v4-tabla-celda-x); border-top-color: var(--v4-borde-suave); }
:root[data-ui='v4'] .n-tabla--chica :is(th, td) { padding: 6px 10px; }
:root[data-ui='v4'] .n-tabla tbody tr[data-grupo-de-filas] th { background: var(--color-fondo); font-size: var(--v4-rotulo); font-weight: var(--v4-peso-semi); color: var(--color-tinta); }
/* Lo secundario de una celda (la segunda línea: el MLA, la cuenta, la fecha) en tenue y chico. */
:root[data-ui='v4'] :is(td, th) :where(small, .n-nota) { color: var(--color-tenue); font-size: var(--v4-texto-xs); }
/* El «sin dato» (`SinDato`, `Vacio`): tenue, en cursiva y con su motivo al pasar el mouse — igual en todas las tablas. */
:root[data-ui='v4'] span[data-sin-dato] { color: var(--color-tenue); font-style: italic; font-size: 0.95em; }
:root[data-ui='v4'] span[data-sin-dato][title] { cursor: help; -webkit-text-decoration: underline dotted color-mix(in oklch, var(--color-tenue) 60%, transparent); text-decoration: underline dotted color-mix(in oklch, var(--color-tenue) 60%, transparent); text-underline-offset: 3px; }
/* La fila vacía de una tabla («Sin filas para mostrar»): centrada y tenue, no una celda más. */
:root[data-ui='v4'] td[data-tabla-vacia] { padding: 20px 12px; text-align: center; color: var(--color-tenue); font-size: var(--v4-texto-sm); }
@media print {
  :root[data-ui='v4'] [data-scroll] { max-height: none !important; }
  :root[data-ui='v4'] :is([data-scroll] > table, .n-tabla) > thead th { position: static; box-shadow: none; }
}

/* LAS TARJETAS DE CIFRA DE SIEMPRE (CifraTile, KpiDenso): la cifra escala con su tarjeta y no se sale. */
:root[data-ui='v4'] .tarjeta-de-cifra {
  border-color: var(--v4-borde-suave);
  border-radius: var(--v4-radio-l);
  box-shadow: var(--v4-sombra-1);
}
:root[data-ui='v4'] .tarjeta-de-cifra > p:nth-of-type(2) {
  font-size: var(--v4-cifra);
  line-height: var(--v4-linea-ajustada);
  letter-spacing: -0.012em;
  font-weight: var(--v4-peso-semi);
  font-variant-numeric: tabular-nums;
}
/* El rótulo de una cifra (la primera línea de la tarjeta): chico y firme, para que la cifra sea lo que se lee primero. */
:root[data-ui='v4'] .tarjeta-de-cifra > p:first-of-type { font-size: var(--v4-rotulo); font-weight: var(--v4-peso-rotulo); color: var(--color-tenue); }


/* Oscuro «carbón ciruela»: sólo en pantalla (se imprime en claro) y sólo si la persona lo eligió. */
@media screen {
  :root[data-ui='v4'][data-tema='oscuro'] {
    --color-fondo: oklch(0.18 0.013 307.7); /* #131016 */
    --color-superficie: oklch(0.216 0.016 302.2); /* #1b1820 */
    --color-borde: oklch(0.307 0.026 307.5); /* #332c3a */
    --color-tinta: oklch(0.957 0.01 311.2); /* #f3eff6 */
    --color-tenue: oklch(0.715 0.026 306.8); /* #a79fb0 */
    --color-acento: oklch(0.756 0.164 356.1); /* #ff7fb3 */
    --color-destacado-suave: oklch(0.242 0.052 359.3); /* #33141f */
    --color-favorable: oklch(0.842 0.142 158.4); /* #6ee7a8 */
    --color-favorable-suave: oklch(0.246 0.035 160.5); /* #10261b */
    --color-aviso: oklch(0.842 0.12 79.3); /* #f5c26b */
    --color-aviso-suave: oklch(0.258 0.042 87.2); /* #2c2209 */
    --color-alarma: oklch(0.76 0.143 24.1); /* #ff8a84 */
    --color-alarma-suave: oklch(0.231 0.045 25.5); /* #2f1412 */
    --color-serie-1: oklch(0.622 0.161 255.1); /* #3987e5 */
    --color-serie-2: oklch(0.622 0.173 40.1); /* #d95926 */
    --color-serie-3: oklch(0.621 0.128 163.1); /* #199e70 */
    --color-serie-4: oklch(0.67 0.145 286.8); /* #9085e9 */
    --color-serie-anterior: oklch(0.527 0.029 305.5); /* #6f6779 */
    --color-grilla: oklch(0.272 0.023 307.5); /* #2a2430 */
    --color-primary-foreground: oklch(0.2 0.05 355); /* #2b0a18: texto oscuro sobre el rosa claro */
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LAS PIEZAS v4 — sólo tokens; se ven bien con o sin la piel.
   ───────────────────────────────────────────────────────────────────────── */

/* Códigos (SKU, MLA, comprobantes, rutas): monoespaciada. Con la piel v4 es JetBrains Mono. */
.v4-codigo {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.85em;
}

/* LAS CUATRO TARJETAS. Jerarquía por superficie, no por borde en todo. Prohibido tarjeta dentro de tarjeta. */
.v4-tarjeta {
  background: var(--color-superficie);
  border-radius: var(--v4-radio-l);
  box-shadow: 0 0 0 1px var(--v4-borde-suave), var(--v4-sombra-1);
  padding: var(--v4-relleno-tarjeta);
  min-width: 0;
}
.v4-tarjeta .v4-tarjeta {
  /* Si alguien anida una tarjeta, se aplana: el borde doble es lo primero que el ojo lee como desorden. */
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.v4-cifra {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-cifra-rotulo {
  font-size: var(--v4-texto-sm);
  font-weight: var(--v4-peso-medio);
  line-height: var(--v4-linea-media);
  color: var(--color-tenue);
}
.v4-cifra-valor {
  font-size: var(--v4-cifra);
  font-weight: 650;
  line-height: var(--v4-linea-ajustada);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--color-tinta);
  /* Un importe no se parte a la mitad: si no entra, se abrevia («$ 25,8 M», ver `.cifra-ajustable`). */
  min-width: 0;
}
.v4-cifra-pie {
  font-size: var(--v4-texto-xs);
  line-height: var(--v4-linea-media);
  color: var(--color-tenue);
}
.v4-destacada {
  box-shadow: 0 0 0 1.5px var(--color-acento), var(--v4-sombra-2);
}
.v4-destacada .v4-cifra-valor {
  font-size: var(--v4-cifra-destacada);
}

/* LA CIFRA QUE NUNCA SE SALE (`components/v4/cifra-ajustable.tsx`). El importe completo está siempre en el texto (lectores de
   pantalla, copiar, imprimir); cuando la tarjeta es angosta para su largo, se ve la versión abreviada que trae en
   `data-corta` y el completo queda en el `title` (tooltip). Los cortes van por largo del texto: cuanto más largo, antes se
   abrevia. Contenedor: la tarjeta (`.v4-cifra` o `.tarjeta-de-cifra`, que ya declaran `container-type`). */
.cifra-ajustable { white-space: nowrap; }
.cifra-ajustable::after { content: none; }
@container (max-width: 13.5rem) {
  .cifra-ajustable[data-largo='m'] > .cifra-ajustable-completa,
  .cifra-ajustable[data-largo='l'] > .cifra-ajustable-completa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cifra-ajustable[data-largo='m']::after,
  .cifra-ajustable[data-largo='l']::after { content: attr(data-corta); content: attr(data-corta) / ''; }
}
@container (max-width: 17rem) {
  .cifra-ajustable[data-largo='l'] > .cifra-ajustable-completa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cifra-ajustable[data-largo='l']::after { content: attr(data-corta); content: attr(data-corta) / ''; }
}
@media print {
  .cifra-ajustable > .cifra-ajustable-completa { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; }
  .cifra-ajustable::after { content: none !important; }
}
.v4-aviso {
  border-left: 4px solid var(--color-tenue);
}
.v4-aviso[data-tono='alarma'] { border-left-color: var(--color-alarma); }
.v4-aviso[data-tono='aviso'] { border-left-color: var(--color-aviso); }
.v4-aviso[data-tono='favorable'] { border-left-color: var(--color-favorable); }

/* El estado SIEMPRE con texto: la pastilla lleva la palabra, el color va en el punto. */
.v4-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-tinta);
  background: var(--color-destacado-suave);
}
.v4-estado::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-tenue);
}
.v4-estado[data-tono='favorable'] { background: var(--color-favorable-suave); }
.v4-estado[data-tono='favorable']::before { background: var(--color-favorable); }
.v4-estado[data-tono='aviso'] { background: var(--color-aviso-suave); }
.v4-estado[data-tono='aviso']::before { background: var(--color-aviso); }
.v4-estado[data-tono='alarma'] { background: var(--color-alarma-suave); }
.v4-estado[data-tono='alarma']::before { background: var(--color-alarma); }
/* En una celda, el estado es más compacto (la fila no crece por la pastilla) y nunca se parte. */
:is(td, th) .v4-estado { padding: 1px 8px; font-size: 12px; line-height: 1.5; white-space: nowrap; }

/*
 * LA TABLA AIREADA (22/10, pedido de Ignacio: «la tabla de estrategias está fea, con demasiados números»). Para las
 * tablas de pocas filas y mucho dato por fila (estrategias, misiones): filas con aire, el dato principal arriba y lo
 * secundario en una segunda línea chica y tenue, cifras a la derecha con dígitos tabulares y el detalle plegado.
 * Sólo dibujo: ningún texto cambia. Funciona con y sin la piel v4 (usa los tokens de siempre).
 */
.v4-tabla-aireada { border-collapse: collapse; }
.v4-tabla-aireada > thead th { font-size: 12px; font-weight: 550; color: var(--color-tenue); text-align: left; padding: 8px 14px; white-space: nowrap; }
.v4-tabla-aireada > tbody > tr > :is(td, th) { padding: 14px; vertical-align: top; border-top: 1px solid var(--v4-borde-suave, var(--color-borde)); font-weight: inherit; text-align: left; }
.v4-tabla-aireada > tbody > tr > :is(td, th) p { margin: 0; }
.v4-tabla-aireada > tbody > tr > :is(td, th) > * + * { margin-top: 3px; }
.v4-celda-sec { display: block; font-size: 12px; line-height: 1.45; color: var(--color-tenue); font-variant-numeric: tabular-nums; }
.v4-celda-resumen { max-width: 52ch; }
.v4-cifra-de-celda { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-cifra-de-celda strong { font-weight: 600; }
.v4-estado-de-celda { margin-top: 8px !important; }
.v4-estado-de-celda > .v4-celda-sec { margin-top: 4px; max-width: 32ch; }
.v4-detalle-de-celda > summary { cursor: pointer; font-size: 12px; color: var(--color-acento); width: -moz-max-content; width: max-content; }
.v4-detalle-de-celda[open] > summary { margin-bottom: 6px; }
/* Cifras en dos columnas: el rótulo tenue a la izquierda, la cifra a la derecha y alineada con las de arriba. */
.v4-cifras-de-celda { display: grid; grid-template-columns: auto auto; justify-content: start; -moz-column-gap: 16px; column-gap: 16px; row-gap: 3px; margin: 0; font-size: 12.5px; }
.v4-cifras-de-celda > dt { color: var(--color-tenue); }
.v4-cifras-de-celda > dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-acciones-de-celda { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.v4-enlace-fila { color: var(--color-acento); font-weight: var(--v4-peso-medio, 500); white-space: nowrap; text-decoration: none; }
.v4-enlace-fila:hover { text-decoration: underline; }
/* En el celular (tarjetas de `TablaDesplazable tarjetasEnCelular`): el rótulo de la columna arriba y el dato con sus
   líneas debajo, a la izquierda, en vez de rótulo y renglones uno al lado del otro. */
@media (max-width: 639px) {
  .tarjetas-en-celular .v4-tabla-aireada tbody td { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding-block: 6px !important; }
  .tarjetas-en-celular .v4-tabla-aireada tbody td[data-label]::before { max-width: none; }
}

/* La cobertura con denominador: barrita + «312 de 400». Parcial = rayado. */
.v4-cobertura {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-tenue);
}
.v4-cobertura-barra {
  flex: 0 0 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-grilla);
  overflow: hidden;
}
.v4-cobertura-barra > i {
  display: block;
  height: 100%;
  background: var(--color-favorable);
}
.v4-cobertura-barra[data-parcial] > i {
  background: repeating-linear-gradient(135deg, var(--color-aviso) 0 3px, transparent 3px 6px);
}

/* Las cifras en grilla: hasta 4, sin scroll horizontal a 400 px. */
.v4-cifras {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* PESTAÑAS de un grupo (navegación v4). */
.v4-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--color-borde);
}
.v4-pestanas a {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  border-radius: var(--v4-radio-s) var(--v4-radio-s) 0 0;
  padding: 8px 12px;
  font-size: var(--v4-texto-base);
  color: var(--color-tenue);
  white-space: nowrap;
  min-height: 24px;
  transition: color var(--v4-transicion), background-color var(--v4-transicion), border-color var(--v4-transicion);
}
.v4-pestanas a:hover { color: var(--color-tinta); background-color: color-mix(in oklch, var(--color-grilla) 60%, transparent); }
.v4-pestanas a[aria-current='page'] {
  border-bottom-color: var(--color-acento);
  color: var(--color-tinta);
  font-weight: 600;
}
/* «Más ▾» de la barra (QW-3, 20/10): las pestañas avanzadas del grupo, plegadas. Sin JavaScript (<details>). */
.v4-pestanas-mas { position: relative; align-self: center; }
.v4-pestanas-mas > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-tenue);
  min-height: 24px;
}
.v4-pestanas-mas > summary::-webkit-details-marker { display: none; }
.v4-pestanas-mas[open] > div {
  position: absolute;
  z-index: 20;
  min-width: 220px;
  max-width: min(320px, 90vw);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: var(--color-superficie);
  padding: 4px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
}
.v4-pestanas-mas[open] > div a { border-bottom: 0; white-space: normal; }
.v4-pestanas[data-capa]::after {
  content: attr(data-capa);
  align-self: center;
  margin-left: auto;
  font-size: 12px;
  color: var(--color-tenue);
}

/* La franja de guía: «Te conviene ahora» + «Cómo funciona» plegado. Una sola por pantalla. */
.v4-guia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--v4-radio-l);
  background: var(--color-superficie);
  box-shadow: 0 0 0 1px var(--v4-borde-suave), var(--v4-sombra-1);
}
.v4-guia > p { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--color-tinta); }
.v4-guia details { flex: none; font-size: 13px; color: var(--color-tenue); }
.v4-guia details[open] { flex-basis: 100%; order: 9; border-top: 1px solid var(--color-borde); padding-top: 8px; }

/* «Por dónde empezar»: acciones numeradas con su botón. */
.v4-pasos { counter-reset: paso; display: flex; flex-direction: column; gap: 10px; }
.v4-pasos > li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.v4-pasos > li::before {
  content: counter(paso);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--color-acento);
  color: var(--color-tinta);
}
.v4-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border-radius: var(--v4-radio-m);
  padding: 6px 14px;
  font-size: var(--v4-texto-sm);
  font-weight: var(--v4-peso-semi);
  background: var(--color-acento);
  color: var(--color-primary-foreground);
  white-space: nowrap;
  box-shadow: var(--v4-sombra-1);
  transition: background-color var(--v4-transicion), box-shadow var(--v4-transicion), color var(--v4-transicion);
}
.v4-boton:hover { background: color-mix(in oklch, var(--color-acento) 88%, var(--color-tinta)); }
.v4-boton:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; box-shadow: var(--v4-anillo); }
.v4-boton[data-suave] {
  background: transparent;
  color: var(--color-acento);
  box-shadow: inset 0 0 0 1px var(--color-borde);
}
.v4-boton[data-suave]:hover { background: var(--color-destacado-suave); }

/* GRÁFICOS: SVG propio. El tooltip es propio y sin JavaScript (hover y foco), así se ve aunque la página no hidrate. */
.v4-grafico { position: relative; min-width: 0; }
.v4-grafico svg:not([data-lienzo]) { display: block; width: 100%; height: auto; overflow: visible; }
/*
 * BUG 21/10 (Inicio de Pablo, «Cómo viene»): el lienzo de la línea es un SVG con viewBox 0–100 estirado sobre una caja
 * de alto fijo. La regla de arriba (height: auto) le ganaba al `h-full` y el SVG quedaba CUADRADO (alto = ancho): el
 * área y el punteado se dibujaban hasta el pie de la tarjeta, encima de la leyenda, mientras los puntos (HTML) seguían
 * en su lugar. El lienzo ocupa exactamente la caja del gráfico y lo que se salga se recorta.
 */
.v4-grafico svg[data-lienzo] { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.v4-grafico text { font-family: var(--font-sans), system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* Las zonas que llevan tooltip: una columna por punto (línea), la barra entera (barras) o la fila (horizontales). */
.v4-zona { position: absolute; top: 0; bottom: 0; outline: none; }
.v4-zona:focus-visible, .v4-zona-barra:focus-visible, .v4-par:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; border-radius: 4px; }
.v4-punto { position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid; transform: translate(-50%, -50%); }
.v4-zona:is(:hover, :focus-visible) .v4-punto { width: 12px; height: 12px; }
.v4-zona-barra:is(:hover, :focus-within) .v4-marca:not(.v4-pila > *) { opacity: 0.82; }
/* El GLOBITO (22/10): una tarjeta elevada con el color de la superficie, no un bloque negro. Mismo contraste que el
   texto de la pantalla (tinta sobre superficie, medido en `lib/tema/paleta-v4.test.ts`). */
.v4-tip {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--color-superficie);
  color: var(--color-tinta);
  box-shadow: 0 0 0 1px var(--v4-borde-suave), 0 10px 24px -8px color-mix(in oklch, var(--color-tinta) 28%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 10px;
  max-width: 240px;
  width: -moz-max-content;
  width: max-content;
  text-align: left;
  font-variant-numeric: tabular-nums;
  /* `display: none` y no `visibility`: un tooltip oculto con `visibility` igual ensancha la página (scroll horizontal a 400 px). */
  display: none;
}
.v4-zona[data-lado='der'] > .v4-tip { left: auto; right: 50%; transform: translate(0, calc(-100% - 6px)); }
.v4-zona[data-lado='izq'] > .v4-tip { left: 50%; transform: translate(0, calc(-100% - 6px)); }
:is(.v4-zona, .v4-zona-barra, .v4-par):is(:hover, :focus-visible, :focus-within) > .v4-tip { display: block; }
/* LA LEYENDA en PASTILLAS (22/10): cada serie es una pastilla con su punto de color, su nombre y, si la trae, su total
   en negrita. Se lee de un vistazo y no compite con el gráfico. */
.v4-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-tenue);
}
.v4-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--v4-radio-pastilla);
  background: color-mix(in oklch, var(--color-grilla) 60%, transparent);
  line-height: 1.3;
}
.v4-leyenda li b { font-weight: var(--v4-peso-semi); font-variant-numeric: tabular-nums; }
.v4-leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* El encabezado de un gráfico: leyenda a la izquierda, controles (período) a la derecha. */
.v4-grafico-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.v4-grafico-cabeza > .v4-leyenda { margin: 0; }

/* PASTILLAS DE SERIE que se prenden y apagan (Evolución temporal). Prendida = tinta llena; apagada = contorno. */
.v4-pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.v4-pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 12px 3px 10px;
  border-radius: var(--v4-radio-pastilla);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-size: 12.5px;
  font-weight: var(--v4-peso-medio);
  cursor: pointer;
}
.v4-pastilla:hover:not(:disabled) { border-color: color-mix(in oklch, var(--color-borde) 50%, var(--color-tinta)); }
.v4-pastilla[aria-pressed='true'] { background: var(--color-tinta); border-color: var(--color-tinta); color: var(--color-superficie); }
.v4-pastilla:disabled { cursor: not-allowed; opacity: 0.55; }
.v4-pastilla > i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-superficie) 70%, transparent); }

/* CONTROL SEGMENTADO (período 3 m · 6 m · 12 m · Todo, y cualquier elección de una sola opción). */
.v4-segmentado { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--v4-radio-m); background: color-mix(in oklch, var(--color-grilla) 70%, transparent); }
.v4-segmentado > :is(button, a) {
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: var(--v4-peso-medio);
  color: var(--color-tenue);
  white-space: nowrap;
}
.v4-segmentado > :is(button, a):hover { color: var(--color-tinta); }
.v4-segmentado > :is(button[aria-pressed='true'], a[aria-current]) { background: var(--color-superficie); color: var(--color-tinta); box-shadow: var(--v4-sombra-1), 0 0 0 1px var(--v4-borde-suave); }

/* El globito de los gráficos con JavaScript (Evolución temporal): la misma tarjeta que `.v4-tip`, siempre visible mientras hay foco. */
.v4-globito {
  position: absolute;
  top: 0;
  z-index: 10;
  pointer-events: none;
  width: -moz-max-content;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-superficie);
  color: var(--color-tinta);
  box-shadow: 0 0 0 1px var(--v4-borde-suave), 0 10px 24px -8px color-mix(in oklch, var(--color-tinta) 28%, transparent);
  font-size: 12.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
@media print { .v4-globito { display: none; } }

/* Una fila del globito: punto de color + nombre a la izquierda, valor a la derecha. */
.v4-tip-titulo { display: block; margin-bottom: 4px; font-weight: var(--v4-peso-semi); color: var(--color-tinta); }
.v4-tip-fila { display: flex; align-items: center; gap: 8px; min-width: 150px; color: var(--color-tenue); }
.v4-tip-fila > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v4-tip-fila > b { margin-left: auto; padding-left: 12px; color: var(--color-tinta); font-weight: var(--v4-peso-semi); font-variant-numeric: tabular-nums; }
.v4-tip-pie { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--v4-borde-suave); color: var(--color-tenue); font-size: 11.5px; }

/* Los ejes: rótulos chicos, tenues y con dígitos tabulares; la grilla punteada y suave. */
.v4-eje { font-size: var(--v4-eje-texto); line-height: 1; color: var(--color-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-grilla { border-top: 1px dashed var(--color-grilla); }
.v4-grilla[data-cero] { border-top-style: solid; border-top-color: var(--color-borde); }

/* Barras verticales: la columna entera es la zona del globito; al pasar el mouse se ilumina su banda. */
.v4-zona-barra::before { content: ''; position: absolute; inset: 0 8%; border-radius: 8px; background: transparent; transition: background-color var(--v4-transicion); pointer-events: none; }
.v4-zona-barra:is(:hover, :focus-within, :focus-visible)::before { background: var(--v4-grafico-banda); }
.v4-zona-barra[data-lado='der'] > .v4-tip { left: auto; right: 10%; transform: translate(0, calc(-100% - 8px)); }
.v4-zona-barra[data-lado='izq'] > .v4-tip { left: 10%; transform: translate(0, calc(-100% - 8px)); }

/* La PILA de una barra apilada (`components/v4/barras-apiladas.tsx`): ancha con tope, esquinas de arriba redondeadas y
   un filo de la superficie entre capas (no cambia el alto: es una sombra interior). */
.v4-pila {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  width: 56%;
  min-width: 6px;
  max-width: 40px;
  overflow: hidden;
  border-radius: var(--v4-barra-radio) var(--v4-barra-radio) 2px 2px;
  transition: opacity var(--v4-transicion);
}
.v4-pila > i { display: block; width: 100%; flex: none; }
.v4-pila > i + i { box-shadow: inset 0 -2px 0 var(--color-superficie); }
.v4-pila-total { position: relative; margin-bottom: 4px; color: var(--color-tinta); font-weight: var(--v4-peso-semi); }
/* Columna medida en cero: una marca chata. Columna sin dato: una marca punteada (no es un cero). */
.v4-pila-vacia { display: block; width: 56%; max-width: 40px; height: 3px; border-radius: 2px; background: var(--color-grilla); }
.v4-pila-vacia[data-sin-dato-columna] { background: transparent; border-top: 2px dotted var(--color-tenue); height: 0; }
/* Al pasar el mouse por una columna, las otras se atenúan: el ojo va a la que se está leyendo. */
.v4-grafico:has(.v4-zona-barra:is(:hover, :focus-visible)) .v4-zona-barra:not(:hover):not(:focus-visible) :is(.v4-pila, .v4-pila-total) { opacity: 0.45; }
.v4-leyenda i[data-parcial] { background-image: repeating-linear-gradient(135deg, var(--color-superficie) 0 2px, transparent 2px 4px); }
.v4-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11.5px;
  color: var(--color-tinta);
  background: var(--color-aviso-suave);
}

/* Barras horizontales (con objetivo, segmentada, cascada): HTML, no SVG, para que el rótulo largo envuelva a 400 px. */
.v4-filas { display: flex; flex-direction: column; gap: 8px; }
.v4-par { position: relative; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; padding: 4px 6px; border-radius: 8px; transition: background-color var(--v4-transicion); }
.v4-par:is(:hover, :focus-visible) { background: var(--v4-grafico-banda); }
.v4-filas { gap: 4px; }
@media (max-width: 480px) {
  .v4-par { grid-template-columns: minmax(0, 1fr) auto; }
  .v4-par > .v4-pista { grid-column: 1 / -1; grid-row: 2; }
}
.v4-par > span:first-child { min-width: 0; overflow-wrap: anywhere; color: var(--color-tinta); }
.v4-par > b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-tinta); white-space: nowrap; }
.v4-pista { position: relative; height: 10px; border-radius: var(--v4-radio-pastilla); background: color-mix(in oklch, var(--color-grilla) 75%, transparent); }
.v4-pista > i { position: absolute; top: 0; bottom: 0; border-radius: var(--v4-radio-pastilla); }
.v4-pista > i[data-parcial] { background-image: repeating-linear-gradient(135deg, var(--color-superficie) 0 3px, transparent 3px 6px) !important; }
.v4-pista > [data-objetivo] { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--color-tinta); }
.v4-segmentada { display: flex; height: 12px; border-radius: var(--v4-radio-pastilla); overflow: hidden; background: var(--color-grilla); }
.v4-segmentada > i { display: block; height: 100%; min-width: 2px; }
.v4-segmentada > i + i { border-left: 2px solid var(--color-superficie); }

/* LOS GRÁFICOS DE COMPETENCIA, MERCADO Y PROMOCIONES (`components/ng/graficos.tsx`), con la piel v4: la barra apilada
   más gruesa y redondeada, la leyenda en pastillas (cada una sigue siendo el link del filtro) y el histograma con su
   columna iluminada al pasar el mouse. */
:root[data-ui='v4'] .n-apilada-barra { height: 12px; border-radius: var(--v4-radio-pastilla); background: var(--color-grilla); margin: 8px 0 12px; }
:root[data-ui='v4'] .n-apilada-barra a { transition: opacity var(--v4-transicion); }
:root[data-ui='v4'] .n-apilada-barra:hover a:not(:hover) { opacity: 0.55; }
:root[data-ui='v4'] .n-leyenda { gap: 6px; }
:root[data-ui='v4'] .n-leyenda li > a,
:root[data-ui='v4'] .n-leyenda li:not(:has(> a)) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px 2px 8px;
  border-radius: var(--v4-radio-pastilla);
  background: color-mix(in oklch, var(--color-grilla) 60%, transparent);
  color: var(--color-tinta);
  font-variant-numeric: tabular-nums;
}
:root[data-ui='v4'] .n-leyenda li > a:hover { background: var(--v4-grafico-banda); }
:root[data-ui='v4'] .n-leyenda li > a[aria-current] { background: var(--color-tinta); color: var(--color-superficie); }
:root[data-ui='v4'] .n-leyenda i { width: 8px; height: 8px; border-radius: 50%; }
:root[data-ui='v4'] .n-histograma svg text { font-family: var(--font-sans), system-ui, sans-serif; }
:root[data-ui='v4'] .n-histograma svg :is(a, g):hover > g rect:not([fill='transparent']) { filter: brightness(1.06); }
:root[data-ui='v4'] .n-como-tabla summary { font-size: var(--v4-texto-xs); font-weight: var(--v4-peso-medio); }

@media print {
  .v4-tip { display: none; }
  .v4-tarjeta { box-shadow: 0 0 0 1px var(--color-borde); }
}

/* «Más ▾» (E2E 29/10): si la pantalla actual es una avanzada, el rótulo la nombra con el mismo trato que la pestaña actual. */
.v4-pestanas-mas > summary[data-actual] { color: var(--color-tinta); font-weight: 600; }

/* vietnamese */
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/1adeacb9471a5bad-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/24ce1868c065f600-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/_next/static/media/0d235c6160fc9e80-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Rosario Fallback';src: local("Arial");ascent-override: 103.21%;descent-override: 24.83%;line-gap-override: 0.00%;size-adjust: 94.66%
}.__className_8049b8 {font-family: 'Rosario', 'Rosario Fallback', system-ui, sans-serif;font-style: normal
}.__variable_8049b8 {--font-sans: 'Rosario', 'Rosario Fallback', system-ui, sans-serif
}

/* vietnamese */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/fc13b39252d1d5db-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/13cd7207edd5ace2-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/f04c3881ee3d9785-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/fc13b39252d1d5db-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/13cd7207edd5ace2-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/f04c3881ee3d9785-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/fc13b39252d1d5db-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/13cd7207edd5ace2-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_next/static/media/f04c3881ee3d9785-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Chivo Fallback';src: local("Arial");ascent-override: 87.67%;descent-override: 23.32%;line-gap-override: 0.00%;size-adjust: 107.22%
}.__className_5ba4e2 {font-family: 'Chivo', 'Chivo Fallback', system-ui, sans-serif;font-style: normal
}.__variable_5ba4e2 {--font-display: 'Chivo', 'Chivo Fallback', system-ui, sans-serif
}

/* vietnamese */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/0fb3f65930f2520b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/fbcc50ab5704290a-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/86a4519c88efbac0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/0fb3f65930f2520b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/fbcc50ab5704290a-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/86a4519c88efbac0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/0fb3f65930f2520b-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/fbcc50ab5704290a-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/86a4519c88efbac0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Chivo Mono Fallback';src: local("Arial");ascent-override: 69.84%;descent-override: 18.58%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_0c7940 {font-family: 'Chivo Mono', 'Chivo Mono Fallback', ui-monospace, monospace;font-style: normal
}.__variable_0c7940 {--font-mono: 'Chivo Mono', 'Chivo Mono Fallback', ui-monospace, monospace
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/f639721981034f88-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/9766a7e9e2e0ad5a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/b66cf8e69499582a-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/aa016aab0e6d1295-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/22a5144ee8d83bca-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Fallback';src: local("Arial");ascent-override: 95.94%;descent-override: 28.16%;line-gap-override: 0.00%;size-adjust: 104.76%
}.__className_1f9804 {font-family: 'Geist', 'Geist Fallback', system-ui, sans-serif;font-style: normal
}.__variable_1f9804 {--font-v4: 'Geist', 'Geist Fallback', system-ui, sans-serif
}

/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/013b72fa676f92e0-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/b9408752a0c24fb9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/65f03d54ccadf4a8-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e038a29029a234f2-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/2b5b02fc7e511755-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7d4881bb7e1bf84d-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/013b72fa676f92e0-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b9408752a0c24fb9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/65f03d54ccadf4a8-s.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e038a29029a234f2-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/2b5b02fc7e511755-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7d4881bb7e1bf84d-s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Geist Mono Fallback';src: local("Arial");ascent-override: 74.67%;descent-override: 21.92%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_73d994 {font-family: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace;font-style: normal
}.__variable_73d994 {--font-v4-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace
}