/* El tema de @traid/ui (variables :root + dark guardado). Va PRIMERO: un
   @import de CSS debe preceder a toda otra regla. El modo oscuro queda
   desactivado a proposito con <html class="light"> en app/layout.tsx:
   esta app es clara y un tablero mitad-y-mitad es peor que uno claro. */
/* El tema.css de rentabilidad-ui NO se importa a propósito. Medido el
   2026-08-29 (informe de Terra, docs/agy/terra-adopcion-ui-2026-08-29.md §5):
   ese archivo sólo estilizaba `ru-pnl` y `ru-tabla-publicacion` — componentes
   que esta app no monta — y lo hacía con una paleta oscura fija. Para `Cascada`
   (que SÍ montamos) no traía ni una regla.
   ⚠️ ACTUALIZACIÓN 2026-09-05, con el pin en 0.8.0: la mitad de esa medición
   YA NO VALE. El packet agregó 99 selectores que cubren los 11 componentes que
   estaban sin CSS —`ru-cascada` y `ru-barra-resumen` entre ellos— y una
   variante clara opt-in (`[data-ru-theme="claro"]`). La decisión de NO
   importarlo se mantiene igual, pero ahora por otro motivo: importarlo
   restilaría una `Cascada` que este repo ya viste, en una pantalla que el
   cliente usa. Cambiar de piel es un cambio que se mira, no un efecto
   colateral de subir un pin. Las pieles locales viven acá abajo, claras y con
   los tokens del tablero. */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-sans), system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    /* La app es CLARA y nada más. Sin esto, el navegador pinta los controles
       nativos (scrollbars, inputs) con el tema del sistema operativo, y en una
       máquina en modo oscuro el tablero queda con scrollbars negras. */
    color-scheme: light;

    /* v1.3 — sistema visual tipo panel de Administrador ML (pedido de Ignacio): fondo gris muy claro (~#f4f5f7), tarjetas
       blancas con borde 1 px gris suave. Los TONOS (alarma/aviso/favorable) no cambian de significado. */
    --color-fondo: oklch(0.965 0.004 260);
    --color-tinta: oklch(0.24 0.02 265);
    --color-tenue: oklch(0.5 0.02 260);
    --color-borde: oklch(0.9 0.006 260);
    /* U1 — LA PIEL DE NAHUEL (bloque U, 02/10/2026, decisión P25 en `D:/fabrica/fusion/LEDGER.md`): el acento pasa de
       índigo (~#4f46e5, v1.3) al rosa de la golden de Nahuel. `oklch(0.592 0.218 0.6)` es el `--color-primary` literal
       de `traid-v1` en `@traid/ui` (y el acento de `traid-ml-golden` f84ffd7f) — ese valor da **#db2777** y mide 4,15
       de contraste contra ESTE `--color-fondo` (más gris que el de la golden, que sobre la piel queda blanco puro):
       no llega a AA 4,5. Mismo tono (H=0,6), misma croma (C=0,218), L bajado de 0,592 a 0,556 — es la misma receta que
       ya usó este archivo para aclarar el rosa de la paleta oscura el 2026-08-21, en la dirección contraria (acá hay
       que oscurecer, no aclarar). Da **#ce126d**, 4,83 contra el fondo y 4,61 como borde sobre `--color-destacado-suave`:
       pasa con margen, sin tener que declararlo «al filo» en `tests/gates-de-pantalla.test.ts`. */
    --color-acento: oklch(0.556 0.218 0.6);
    --color-alarma: oklch(0.52 0.19 25);
    --color-superficie: oklch(1 0 0);
    --color-alarma-suave: oklch(0.94 0.05 25);
    --color-favorable: oklch(0.48 0.12 165);
    --color-favorable-suave: oklch(0.93 0.04 165);
    --color-aviso: oklch(0.53 0.13 70);
    --color-aviso-suave: oklch(0.95 0.05 80);
    --color-destacado-suave: oklch(0.95 0.02 277);
    /* Las cuentas: ciruela apagado y terracota apagado. Medido el 2026-08-22 con
       `lib/tema/oklch.ts` — cuenta-1 #3f3c66 da 9,70 sobre el fondo y cuenta-2
       #8e5f49 da 5,12; los dos pasan AA como texto. Entre sí dan 1,89, así que
       impresos en gris siguen siendo dos grises distintos. */
    --color-cuenta-1: oklch(0.38 0.07 285);
    --color-cuenta-1-suave: oklch(0.95 0.02 285);
    --color-cuenta-2: oklch(0.53 0.07 45);
    --color-cuenta-2-suave: oklch(0.92 0.03 45);
    /* Las SERIES de los gráficos (v1.3, acordado con c7): índigo, ámbar, cian y dos más para las barras apiladas; el período
       anterior va en un gris aparte, y la grilla es una línea muy tenue. Los nombres son el contrato con GraficoDeSerie. */
    --color-serie-1: oklch(0.52 0.22 277);
    --color-serie-2: oklch(0.62 0.15 70);
    --color-serie-3: oklch(0.62 0.11 215);
    --color-serie-4: oklch(0.58 0.2 340);
    --color-serie-5: oklch(0.5 0.04 260);
    --color-serie-anterior: oklch(0.62 0.01 260);
    --color-grilla: oklch(0.89 0.006 260);
  }

  /* ───────────────────────────────────────────────────────────────────────
     EL PUENTE HACIA EL CONTRATO DE TEMA DE @traid/ui

     El `tema.css` del packet (importado arriba) define estas variables con su
     paleta violeta genérica. Este bloque las RE-DECLARA con la paleta
     Bienestar. Sin el puente, `bg-card` / `text-muted-foreground` /
     `border-border` / `bg-primary` pintan el violeta del packet y el tablero
     pierde la identidad del cliente (hallazgo del informe de Terra,
     2026-08-29, §Contrato de tema).

     ⚠️ EL SELECTOR LLEVA `.light`, Y NO ES DECORACIÓN — MEDIDO EL 2026-09-02.

     Hasta hoy esto vivía adentro del `:root` de arriba, con el comentario
     «como viene después del @import, gana». **No ganaba.** El packet declara
     sus tokens DOS veces: en `:root` y otra vez en `:root.light`
     (`tema.css`), y `app/layout.tsx` monta `<html class="light">`.
     `:root.light` tiene MÁS especificidad que `:root`, así que el orden en el
     archivo no alcanzaba: el packet ganaba todas las variables del puente.

     Medido en el navegador sobre `/promociones`: `--color-primary` resolvía a
     `oklch(0.541 0.247 293)` —el violeta del packet— en vez del acento azul
     del cliente, y lo mismo `--color-border` y `--color-muted-foreground`. No
     se veía porque casi nada usaba las clases semánticas del packet; montar el
     shell las usa en toda la barra, y el marcador de la sección activa salía
     violeta.

     Empatar la especificidad y venir después alcanza y sobra.
     `lib/tema/puente-de-tema.test.ts` lo custodia: si alguien vuelve a dejar el
     selector en `:root` a secas, se pone rojo.

     Los radios (`--radius-*`) y las sombras (`--shadow-*`) NO se puentean: los
     defaults del packet ya son los correctos para este tablero.            */
  :root,
  :root.light {
    --color-background: var(--color-fondo);
    --color-foreground: var(--color-tinta);
    --color-card: var(--color-superficie);
    --color-card-foreground: var(--color-tinta);
    --color-muted: var(--color-destacado-suave);
    --color-muted-foreground: var(--color-tenue);
    --color-border: var(--color-borde);
    --color-primary: var(--color-acento);
    /* `primary-foreground` NO se puentea: el default del packet (casi blanco)
       ya es el texto correcto sobre el acento azul.

       Todo lo de abajo son ALIAS (`var()`) de la paleta custodiada, a
       propósito: un `oklch()` literal acá sería un color nuevo que
       `lib/tema/paleta-clara.test.ts` tendría que clasificar y medir. Estas
       variables no son paleta — son el contrato del packet apuntando a ella.
       `hover`/`active` quedan iguales al acento hasta que alguna pantalla
       monte un `Button` del packet y haga falta diferenciar el estado. */
    --color-primary-hover: var(--color-acento);
    --color-primary-active: var(--color-acento);
    --color-accent: var(--color-acento);
    --color-destructive: var(--color-alarma);
    --color-destructive-text: var(--color-alarma);
    --color-surface-0: var(--color-fondo);
    --color-surface-1: var(--color-superficie);
    --color-surface-2: var(--color-destacado-suave);
    --color-surface-3: var(--color-destacado-suave);
  }

  /* LOS TÍTULOS DEL SHELL DEL PACKET, EN LA FAMILIA DE TÍTULOS.

     `@traid/ui` no impone familia tipográfica — es la misma decisión de diseño
     por la que tampoco trae color: «Props adentro, JSX afuera», y el consumidor
     define la piel. Así que sus `h1`/`h2` caen en la fuente del `body` si nadie
     los puentea.

     U1 (bloque U, 02/10/2026): la piel de Nahuel separa títulos de cuerpo —
     `--font-display` (Chivo) para titular, `--font-sans` (Rosario) para leer de
     corrido — como la golden (`traid-ml-golden` f84ffd7f, ORIGEN:
     `traid-elisabeth app/layout.tsx 2c4f148`). Hasta acá las dos variables
     apuntaban a la misma Inter (v1.3, «una sola familia»); ese criterio lo
     reemplaza la piel nueva, no lo contradice un bug.

     Va acá y no como una clase en el JSX porque el markup del encabezado lo
     emite el packet y el consumidor no lo puede decorar. Es el mismo puente
     que se hace arriba con los tokens de color, por el mismo motivo. */
  main > header :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display), system-ui, sans-serif;
  }
  /* El título de página, simple (v1.3): 24 px semibold. */
  main > header h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* LA MISMA FAMILIA DE TÍTULOS, EN LOS TÍTULOS DE BLOQUE.

     `components/tablero/EncabezadoDeSeccion.tsx` es, desde el 2026-09-02, un
     wrapper del componente del packet, y el packet tampoco le pone fuente a ESE
     título. La regla de arriba no lo alcanza: es `main > header`, o sea el
     encabezado que `AppShell` dibuja como hijo directo del `main`, y un
     encabezado de bloque va más adentro.

     ⚠️ El gancho es la clase y el selector busca el TÍTULO, no el `<header>`.
     Si esto dijera `.encabezado-de-seccion { font-family: … }`, la fuente se
     heredaría hacia la bajada y hacia el sello, que van en la del cuerpo a
     propósito: son texto para leer de corrido, no para titular. El wrapper pone
     la clase; el `className` del sitio de uso se concatena y no la pisa. */
  .encabezado-de-seccion :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display), system-ui, sans-serif;
  }

  /* El fondo va también en `html` para que el rebote del scroll (macOS, iOS) no
     muestre una franja blanca o negra por debajo del `body`. */
  html {
    background-color: var(--color-fondo);
  }

  body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    /* `tnum` = cifras de ancho fijo. Sin esto, un 1 ocupa menos que un 8 y una
       columna de importes queda temblando: los millones no se alinean con los
       miles y comparar dos filas de un vistazo se vuelve imposible. */
    font-feature-settings: 'tnum' 1;
}

  /* El cliente IMPRIME el tablero en blanco y negro. Sin esto, el fondo casi
     blanco azulado sale como un gris parejo que se come la tinta del cartucho y
     baja el contraste de todo lo que está encima. */
  @media print {
    html,
    body {
      background-color: #ffffff;
    }

    /* La medida de lectura es para la PANTALLA, no para el papel.
       `max-w-medida` son 54ch ≈ 400 px: en una hoja A4, que tiene unos 794 px
       útiles, eso deja media hoja en blanco al lado de cada párrafo y estira el
       informe a más carillas. El cliente imprime este tablero, así que en papel
       el texto usa el ancho de la hoja. */
    .max-w-medida {
      max-width: none;
    }

    /* EL ENCABEZADO DE LA PANTALLA SE IMPRIME. NO ES OPCIONAL.

       `AppShell` de @traid/ui esconde su `<header>` al imprimir
       (`app-shell.tsx`, `className="… print:hidden"`), y ahí adentro viven el
       título de la pantalla y la bajada. Para casi cualquier consumidor está
       bien: un encabezado de app en papel es ruido.

       Acá NO. El cliente imprime este tablero y lo archiva, y la bajada es
       donde va el nombre de la cuenta —eso está escrito en el repo desde el
       2026-08-24: «una hoja impresa sin decir de qué cuenta habla es una hoja
       que se archiva mal»—. Sin esta regla, cada hoja saldría sin decir de qué
       pantalla y de qué cuenta habla.

       Es `main > header` y no `header` a secas, y la diferencia importa: la
       barra lateral del packet es un `<aside>` adentro de un `<div>` y el menú
       del celular es un `<details>`, así que ninguno de los dos entra acá. Los
       dos siguen ocultos en papel, que es lo correcto — un menú impreso no
       sirve.

       Lo que sí sigue oculto adentro del encabezado son las ACCIONES: el
       packet les pone su propio `print:hidden` un nivel más abajo, y en papel
       no se puede apretar un botón. */
    main > header {
      display: flex !important;
    }

    /* UN DESPLEGABLE CERRADO, EN PAPEL, ES INFORMACIÓN QUE FALTA.
       El cliente imprime este tablero. `print:open` no existe —`open` es un
       atributo, no una clase—, así que el contenido se fuerza por CSS.

       ⚠️ Son DOS reglas y no una, porque los navegadores lo resuelven distinto:
       Firefox esconde los hijos del `<details>` cerrado (y ahí muerde la
       primera), y Chrome usa el pseudo-elemento `::details-content` (la
       segunda). Con una sola, la hoja sale incompleta en la mitad de los
       navegadores. */
    details > * {
      display: revert !important;
      visibility: visible !important;
    }

    details::details-content {
      content-visibility: visible !important;
      block-size: auto !important;
    }
  }
.container{
  width: 100%;
}
@media (min-width: 640px){

  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){

  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){

  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){

  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){

  .container{
    max-width: 1536px;
  }
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.not-sr-only{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.pointer-events-none{
  pointer-events: none;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-right-0\.5{
  right: -0.125rem;
}
.-right-2{
  right: -0.5rem;
}
.-top-0\.5{
  top: -0.125rem;
}
.-top-1\.5{
  top: -0.375rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-4{
  bottom: 1rem;
}
.left-0{
  left: 0px;
}
.left-0\.5{
  left: 0.125rem;
}
.left-1\/2{
  left: 50%;
}
.left-4{
  left: 1rem;
}
.left-\[1\.125rem\]{
  left: 1.125rem;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-0\.5{
  right: 0.125rem;
}
.right-2{
  right: 0.5rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1\/2{
  top: 50%;
}
.top-3{
  top: 0.75rem;
}
.top-6{
  top: 1.5rem;
}
.isolate{
  isolation: isolate;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-50{
  z-index: 50;
}
.z-\[1000\]{
  z-index: 1000;
}
.z-\[790\]{
  z-index: 790;
}
.z-\[800\]{
  z-index: 800;
}
.z-\[900\]{
  z-index: 900;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.order-3{
  order: 3;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.float-right{
  float: right;
}
.m-3{
  margin: 0.75rem;
}
.m-auto{
  margin: auto;
}
.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5{
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-mt-3{
  margin-top: -0.75rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-5{
  margin-left: 1.25rem;
}
.ml-6{
  margin-left: 1.5rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mr-5{
  margin-right: 1.25rem;
}
.mr-auto{
  margin-right: auto;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-\[3px\]{
  margin-top: 3px;
}
.mt-auto{
  margin-top: auto;
}
.mt-px{
  margin-top: 1px;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.\!table{
  display: table !important;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.\!hidden{
  display: none !important;
}
.hidden{
  display: none;
}
.aspect-\[9\/16\]{
  aspect-ratio: 9/16;
}
.aspect-square{
  aspect-ratio: 1 / 1;
}
.size-4{
  width: 1rem;
  height: 1rem;
}
.\!h-4{
  height: 1rem !important;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-11{
  height: 2.75rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-28{
  height: 7rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-4{
  height: 1rem;
}
.h-40{
  height: 10rem;
}
.h-48{
  height: 12rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[1600px\]{
  height: 1600px;
}
.h-\[60vh\]{
  height: 60vh;
}
.h-\[85vh\]{
  height: 85vh;
}
.h-\[calc\(85vh-3rem\)\]{
  height: calc(85vh - 3rem);
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.max-h-16{
  max-height: 4rem;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-52{
  max-height: 13rem;
}
.max-h-60{
  max-height: 15rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[32rem\]{
  max-height: 32rem;
}
.max-h-\[360px\]{
  max-height: 360px;
}
.max-h-\[42rem\]{
  max-height: 42rem;
}
.max-h-\[75vh\]{
  max-height: 75vh;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[calc\(100vh-3rem\)\]{
  max-height: calc(100vh - 3rem);
}
.\!min-h-11{
  min-height: 2.75rem !important;
}
.min-h-0{
  min-height: 0px;
}
.min-h-10{
  min-height: 2.5rem;
}
.min-h-11{
  min-height: 2.75rem;
}
.min-h-12{
  min-height: 3rem;
}
.min-h-24{
  min-height: 6rem;
}
.min-h-32{
  min-height: 8rem;
}
.min-h-40{
  min-height: 10rem;
}
.min-h-48{
  min-height: 12rem;
}
.min-h-5{
  min-height: 1.25rem;
}
.min-h-6{
  min-height: 1.5rem;
}
.min-h-7{
  min-height: 1.75rem;
}
.min-h-8{
  min-height: 2rem;
}
.min-h-9{
  min-height: 2.25rem;
}
.min-h-\[320px\]{
  min-height: 320px;
}
.min-h-\[360px\]{
  min-height: 360px;
}
.min-h-\[60vh\]{
  min-height: 60vh;
}
.min-h-screen{
  min-height: 100vh;
}
.\!w-4{
  width: 1rem !important;
}
.\!w-auto{
  width: auto !important;
}
.w-1\.5{
  width: 0.375rem;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-32{
  width: 8rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-40{
  width: 10rem;
}
.w-44{
  width: 11rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-60{
  width: 15rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-96{
  width: 24rem;
}
.w-\[10\%\]{
  width: 10%;
}
.w-\[11\%\]{
  width: 11%;
}
.w-\[12\%\]{
  width: 12%;
}
.w-\[13\%\]{
  width: 13%;
}
.w-\[14\%\]{
  width: 14%;
}
.w-\[15\%\]{
  width: 15%;
}
.w-\[16\%\]{
  width: 16%;
}
.w-\[18\%\]{
  width: 18%;
}
.w-\[19\%\]{
  width: 19%;
}
.w-\[20\%\]{
  width: 20%;
}
.w-\[22\%\]{
  width: 22%;
}
.w-\[23\%\]{
  width: 23%;
}
.w-\[24\%\]{
  width: 24%;
}
.w-\[24rem\]{
  width: 24rem;
}
.w-\[25\%\]{
  width: 25%;
}
.w-\[26\%\]{
  width: 26%;
}
.w-\[28\%\]{
  width: 28%;
}
.w-\[29\%\]{
  width: 29%;
}
.w-\[30\%\]{
  width: 30%;
}
.w-\[32\%\]{
  width: 32%;
}
.w-\[33\%\]{
  width: 33%;
}
.w-\[34\%\]{
  width: 34%;
}
.w-\[35\%\]{
  width: 35%;
}
.w-\[36\%\]{
  width: 36%;
}
.w-\[38\%\]{
  width: 38%;
}
.w-\[4\.5rem\]{
  width: 4.5rem;
}
.w-\[40\%\]{
  width: 40%;
}
.w-\[42\%\]{
  width: 42%;
}
.w-\[43\%\]{
  width: 43%;
}
.w-\[44\%\]{
  width: 44%;
}
.w-\[45\%\]{
  width: 45%;
}
.w-\[46\%\]{
  width: 46%;
}
.w-\[48\%\]{
  width: 48%;
}
.w-\[50\%\]{
  width: 50%;
}
.w-\[52\%\]{
  width: 52%;
}
.w-\[55\%\]{
  width: 55%;
}
.w-\[6\%\]{
  width: 6%;
}
.w-\[60\%\]{
  width: 60%;
}
.w-\[62\%\]{
  width: 62%;
}
.w-\[8\%\]{
  width: 8%;
}
.w-\[9\%\]{
  width: 9%;
}
.w-\[calc\(100\%_-_2rem\)\]{
  width: calc(100% - 2rem);
}
.w-\[min\(480px\2c calc\(100vw-32px\)\)\]{
  width: min(480px, calc(100vw - 32px));
}
.w-\[min\(56rem\2c 95vw\)\]{
  width: min(56rem, 95vw);
}
.w-auto{
  width: auto;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.min-w-0{
  min-width: 0px;
}
.min-w-24{
  min-width: 6rem;
}
.min-w-32{
  min-width: 8rem;
}
.min-w-40{
  min-width: 10rem;
}
.min-w-48{
  min-width: 12rem;
}
.min-w-56{
  min-width: 14rem;
}
.min-w-64{
  min-width: 16rem;
}
.min-w-\[10rem\]{
  min-width: 10rem;
}
.min-w-\[12rem\]{
  min-width: 12rem;
}
.min-w-\[14rem\]{
  min-width: 14rem;
}
.min-w-\[16rem\]{
  min-width: 16rem;
}
.min-w-\[18rem\]{
  min-width: 18rem;
}
.min-w-\[1rem\]{
  min-width: 1rem;
}
.min-w-\[24rem\]{
  min-width: 24rem;
}
.min-w-\[26rem\]{
  min-width: 26rem;
}
.min-w-\[280px\]{
  min-width: 280px;
}
.min-w-\[28rem\]{
  min-width: 28rem;
}
.min-w-\[30rem\]{
  min-width: 30rem;
}
.min-w-\[32rem\]{
  min-width: 32rem;
}
.min-w-\[34rem\]{
  min-width: 34rem;
}
.min-w-\[36rem\]{
  min-width: 36rem;
}
.min-w-\[40rem\]{
  min-width: 40rem;
}
.min-w-\[44rem\]{
  min-width: 44rem;
}
.min-w-\[46rem\]{
  min-width: 46rem;
}
.min-w-\[48rem\]{
  min-width: 48rem;
}
.min-w-\[520px\]{
  min-width: 520px;
}
.min-w-\[52rem\]{
  min-width: 52rem;
}
.min-w-\[560px\]{
  min-width: 560px;
}
.min-w-\[56rem\]{
  min-width: 56rem;
}
.min-w-\[60rem\]{
  min-width: 60rem;
}
.min-w-\[61rem\]{
  min-width: 61rem;
}
.min-w-\[640px\]{
  min-width: 640px;
}
.min-w-\[64rem\]{
  min-width: 64rem;
}
.min-w-\[720px\]{
  min-width: 720px;
}
.min-w-\[72rem\]{
  min-width: 72rem;
}
.min-w-\[760px\]{
  min-width: 760px;
}
.min-w-\[78rem\]{
  min-width: 78rem;
}
.min-w-\[80rem\]{
  min-width: 80rem;
}
.min-w-\[820px\]{
  min-width: 820px;
}
.min-w-\[860px\]{
  min-width: 860px;
}
.min-w-\[8rem\]{
  min-width: 8rem;
}
.min-w-\[960px\]{
  min-width: 960px;
}
.min-w-\[980px\]{
  min-width: 980px;
}
.min-w-\[9rem\]{
  min-width: 9rem;
}
.max-w-20{
  max-width: 5rem;
}
.max-w-24{
  max-width: 6rem;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-32{
  max-width: 8rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-40{
  max-width: 10rem;
}
.max-w-44{
  max-width: 11rem;
}
.max-w-48{
  max-width: 12rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-64{
  max-width: 16rem;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[110rem\]{
  max-width: 110rem;
}
.max-w-\[12rem\]{
  max-width: 12rem;
}
.max-w-\[14rem\]{
  max-width: 14rem;
}
.max-w-\[16rem\]{
  max-width: 16rem;
}
.max-w-\[18rem\]{
  max-width: 18rem;
}
.max-w-\[20rem\]{
  max-width: 20rem;
}
.max-w-\[22rem\]{
  max-width: 22rem;
}
.max-w-\[24rem\]{
  max-width: 24rem;
}
.max-w-\[26rem\]{
  max-width: 26rem;
}
.max-w-\[28rem\]{
  max-width: 28rem;
}
.max-w-\[32rem\]{
  max-width: 32rem;
}
.max-w-\[36px\]{
  max-width: 36px;
}
.max-w-\[480px\]{
  max-width: 480px;
}
.max-w-\[48rem\]{
  max-width: 48rem;
}
.max-w-\[52rem\]{
  max-width: 52rem;
}
.max-w-\[56rem\]{
  max-width: 56rem;
}
.max-w-\[60rem\]{
  max-width: 60rem;
}
.max-w-\[70ch\]{
  max-width: 70ch;
}
.max-w-\[80\%\]{
  max-width: 80%;
}
.max-w-\[80ch\]{
  max-width: 80ch;
}
.max-w-\[95\%\]{
  max-width: 95%;
}
.max-w-\[calc\(100vw-2rem\)\]{
  max-width: calc(100vw - 2rem);
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-medida{
  max-width: 54ch;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.shrink-0{
  flex-shrink: 0;
}
.grow{
  flex-grow: 1;
}
.basis-48{
  flex-basis: 12rem;
}
.basis-full{
  flex-basis: 100%;
}
.table-fixed{
  table-layout: fixed;
}
.caption-bottom{
  caption-side: bottom;
}
.border-collapse{
  border-collapse: collapse;
}
.border-separate{
  border-collapse: separate;
}
.border-spacing-1{
  --tw-border-spacing-x: 0.25rem;
  --tw-border-spacing-y: 0.25rem;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full{
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{

  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-grab{
  cursor: grab;
}
.cursor-help{
  cursor: help;
}
.cursor-move{
  cursor: move;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-nwse-resize{
  cursor: nwse-resize;
}
.cursor-pointer{
  cursor: pointer;
}
.touch-none{
  touch-action: none;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.scroll-mt-20{
  scroll-margin-top: 5rem;
}
.scroll-mt-24{
  scroll-margin-top: 6rem;
}
.scroll-mt-28{
  scroll-margin-top: 7rem;
}
.scroll-mt-4{
  scroll-margin-top: 1rem;
}
.scroll-mt-6{
  scroll-margin-top: 1.5rem;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.columns-1{
  -moz-columns: 1;
       columns: 1;
}
.break-inside-avoid{
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.break-after-page{
  -moz-column-break-after: page;
       break-after: page;
}
.auto-rows-fr{
  grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto\]{
  grid-template-columns: 1fr auto;
}
.grid-cols-\[8rem_minmax\(0\2c 1fr\)_7rem_4rem_4rem\]{
  grid-template-columns: 8rem minmax(0,1fr) 7rem 4rem 4rem;
}
.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}
.grid-cols-\[auto_auto\]{
  grid-template-columns: auto auto;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)\]{
  grid-template-columns: auto minmax(0,1fr);
}
.grid-cols-\[minmax\(0\2c 1fr\)_7rem_7rem\]{
  grid-template-columns: minmax(0,1fr) 7rem 7rem;
}
.grid-cols-\[minmax\(0\2c 7rem\)_1fr\]{
  grid-template-columns: minmax(0,7rem) 1fr;
}
.grid-cols-\[minmax\(0\2c 8rem\)_1fr_auto\]{
  grid-template-columns: minmax(0,8rem) 1fr auto;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
.place-items-center{
  place-items: center;
}
.content-start{
  align-content: flex-start;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-10{
  gap: 2.5rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[3\%\]{
  gap: 3%;
}
.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8{
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5{
  row-gap: 0.125rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-1\.5{
  row-gap: 0.375rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-4{
  row-gap: 1rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[var\(--color-borde\)\] > :not([hidden]) ~ :not([hidden]){
  border-color: var(--color-borde);
}
.self-start{
  align-self: flex-start;
}
.self-end{
  align-self: flex-end;
}
.self-center{
  align-self: center;
}
.justify-self-start{
  justify-self: start;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overscroll-contain{
  overscroll-behavior: contain;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.whitespace-normal{
  white-space: normal;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.text-wrap{
  text-wrap: wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.625rem;
}
.rounded-md{
  border-radius: var(--radius-md);
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: var(--radius-sm);
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-l-md{
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.rounded-r-2xl{
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.rounded-r-lg{
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.rounded-t-\[6px\]{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.rounded-t-xl{
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r-0{
  border-right-width: 0px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-0{
  border-top-width: 0px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-dashed{
  border-style: dashed;
}
.border-\[color\:var\(--color-aviso\)\]{
  border-color: var(--color-aviso);
}
.border-\[var\(--color-acento\)\]{
  border-color: var(--color-acento);
}
.border-\[var\(--color-alarma\)\]{
  border-color: var(--color-alarma);
}
.border-\[var\(--color-aviso\)\]{
  border-color: var(--color-aviso);
}
.border-\[var\(--color-aviso\2c var\(--color-acento\)\)\]{
  border-color: var(--color-aviso,var(--color-acento));
}
.border-\[var\(--color-borde\)\]{
  border-color: var(--color-borde);
}
.border-\[var\(--color-favorable\)\]{
  border-color: var(--color-favorable);
}
.border-\[var\(--color-tenue\)\]{
  border-color: var(--color-tenue);
}
.border-\[var\(--color-tinta\)\]{
  border-color: var(--color-tinta);
}
.border-accent\/40{
  border-color: color-mix(in oklab, var(--color-accent) calc(0.4 * 100%), transparent);
}
.border-border{
  --tw-border-opacity: 1;
  border-color: var(--color-border);
}
.border-current{
  border-color: currentColor;
}
.border-destructive-text{
  --tw-border-opacity: 1;
  border-color: var(--color-destructive-text);
}
.border-destructive\/40{
  border-color: color-mix(in oklab, var(--color-destructive) calc(0.4 * 100%), transparent);
}
.border-destructive\/50{
  border-color: color-mix(in oklab, var(--color-destructive) calc(0.5 * 100%), transparent);
}
.border-muted-foreground{
  --tw-border-opacity: 1;
  border-color: var(--color-muted-foreground);
}
.border-primary{
  --tw-border-opacity: 1;
  border-color: var(--color-primary);
}
.border-primary\/40{
  border-color: color-mix(in oklab, var(--color-primary) calc(0.4 * 100%), transparent);
}
.border-primary\/60{
  border-color: color-mix(in oklab, var(--color-primary) calc(0.6 * 100%), transparent);
}
.border-transparent{
  border-color: transparent;
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}
.border-l-\[color\:var\(--color-acento\)\]{
  border-left-color: var(--color-acento);
}
.border-l-\[color\:var\(--color-serie-1\)\]{
  border-left-color: var(--color-serie-1);
}
.border-l-\[color\:var\(--color-serie-2\)\]{
  border-left-color: var(--color-serie-2);
}
.border-l-\[color\:var\(--color-serie-3\)\]{
  border-left-color: var(--color-serie-3);
}
.border-l-\[color\:var\(--color-serie-4\)\]{
  border-left-color: var(--color-serie-4);
}
.border-l-\[var\(--color-alarma\)\]{
  border-left-color: var(--color-alarma);
}
.border-l-\[var\(--color-aviso\)\]{
  border-left-color: var(--color-aviso);
}
.border-l-\[var\(--color-favorable\)\]{
  border-left-color: var(--color-favorable);
}
.border-l-\[var\(--color-tenue\)\]{
  border-left-color: var(--color-tenue);
}
.border-l-success{
  --tw-border-opacity: 1;
  border-left-color: var(--color-success);
}
.border-l-warning{
  --tw-border-opacity: 1;
  border-left-color: var(--color-warning);
}
.bg-\[color\:color-mix\(in_oklch\2c var\(--color-grilla\)_60\%\2c transparent\)\]{
  background-color: color-mix(in oklch,var(--color-grilla) 60%,transparent);
}
.bg-\[oklch\(\2026\)\]{
  background-color: oklch(…);
}
.bg-\[var\(--c-rosa-suave\)\]{
  background-color: var(--c-rosa-suave);
}
.bg-\[var\(--color-acento\)\]{
  background-color: var(--color-acento);
}
.bg-\[var\(--color-alarma\)\]{
  background-color: var(--color-alarma);
}
.bg-\[var\(--color-alarma-suave\)\]{
  background-color: var(--color-alarma-suave);
}
.bg-\[var\(--color-aviso\)\]{
  background-color: var(--color-aviso);
}
.bg-\[var\(--color-aviso-suave\)\]{
  background-color: var(--color-aviso-suave);
}
.bg-\[var\(--color-borde\)\]{
  background-color: var(--color-borde);
}
.bg-\[var\(--color-card\)\]{
  background-color: var(--color-card);
}
.bg-\[var\(--color-destacado-suave\)\]{
  background-color: var(--color-destacado-suave);
}
.bg-\[var\(--color-favorable\)\]{
  background-color: var(--color-favorable);
}
.bg-\[var\(--color-favorable-suave\)\]{
  background-color: var(--color-favorable-suave);
}
.bg-\[var\(--color-fondo\)\]{
  background-color: var(--color-fondo);
}
.bg-\[var\(--color-fondo\2c white\)\]{
  background-color: var(--color-fondo,white);
}
.bg-\[var\(--color-grilla\)\]{
  background-color: var(--color-grilla);
}
.bg-\[var\(--color-superficie\)\]{
  background-color: var(--color-superficie);
}
.bg-\[var\(--color-superficie\2c transparent\)\]{
  background-color: var(--color-superficie,transparent);
}
.bg-\[var\(--color-tenue\)\]{
  background-color: var(--color-tenue);
}
.bg-\[var\(--color-tinta\)\]{
  background-color: var(--color-tinta);
}
.bg-accent{
  --tw-bg-opacity: 1;
  background-color: var(--color-accent);
}
.bg-accent\/10{
  background-color: color-mix(in oklab, var(--color-accent) calc(0.1 * 100%), transparent);
}
.bg-background{
  --tw-bg-opacity: 1;
  background-color: var(--color-background);
}
.bg-border\/40{
  background-color: color-mix(in oklab, var(--color-border) calc(0.4 * 100%), transparent);
}
.bg-card{
  --tw-bg-opacity: 1;
  background-color: var(--color-card);
}
.bg-card\/60{
  background-color: color-mix(in oklab, var(--color-card) calc(0.6 * 100%), transparent);
}
.bg-card\/80{
  background-color: color-mix(in oklab, var(--color-card) calc(0.8 * 100%), transparent);
}
.bg-destructive{
  --tw-bg-opacity: 1;
  background-color: var(--color-destructive);
}
.bg-destructive\/10{
  background-color: color-mix(in oklab, var(--color-destructive) calc(0.1 * 100%), transparent);
}
.bg-destructive\/15{
  background-color: color-mix(in oklab, var(--color-destructive) calc(0.15 * 100%), transparent);
}
.bg-emerald-500\/10{
  background-color: rgb(16 185 129 / 0.1);
}
.bg-foreground{
  --tw-bg-opacity: 1;
  background-color: var(--color-foreground);
}
.bg-muted{
  --tw-bg-opacity: 1;
  background-color: var(--color-muted);
}
.bg-muted-foreground{
  --tw-bg-opacity: 1;
  background-color: var(--color-muted-foreground);
}
.bg-muted\/40{
  background-color: color-mix(in oklab, var(--color-muted) calc(0.4 * 100%), transparent);
}
.bg-primary{
  --tw-bg-opacity: 1;
  background-color: var(--color-primary);
}
.bg-primary\/10{
  background-color: color-mix(in oklab, var(--color-primary) calc(0.1 * 100%), transparent);
}
.bg-primary\/5{
  background-color: color-mix(in oklab, var(--color-primary) calc(0.05 * 100%), transparent);
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-success{
  --tw-bg-opacity: 1;
  background-color: var(--color-success);
}
.bg-success\/15{
  background-color: color-mix(in oklab, var(--color-success) calc(0.15 * 100%), transparent);
}
.bg-surface-2{
  --tw-bg-opacity: 1;
  background-color: var(--color-surface-2);
}
.bg-transparent{
  background-color: transparent;
}
.bg-warning{
  --tw-bg-opacity: 1;
  background-color: var(--color-warning);
}
.bg-warning\/15{
  background-color: color-mix(in oklab, var(--color-warning) calc(0.15 * 100%), transparent);
}
.bg-gradient-to-l{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.from-background\/80{
  --tw-gradient-from: color-mix(in oklab, var(--color-background) calc(0.8 * 100%), transparent) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.object-left{
  -o-object-position: left;
     object-position: left;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-7{
  padding: 1.75rem;
}
.\!px-0{
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-4{
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[5px\]{
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-\[calc\(0\.5rem\+env\(safe-area-inset-bottom\2c 0px\)\)\]{
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom,0px));
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-8{
  padding-left: 2rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pt-0{
  padding-top: 0px;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-start{
  text-align: start;
}
.text-end{
  text-align: end;
}
.align-baseline{
  vertical-align: baseline;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.font-\[\.\.\.\]{
  font-family: ...;
}
.font-\[inherit\]{
  font-family: inherit;
}
.font-display{
  font-family: var(--font-display), system-ui, sans-serif;
}
.font-mono{
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
}
.font-sans{
  font-family: var(--font-sans), system-ui, sans-serif;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.65rem\]{
  font-size: 0.65rem;
}
.text-\[0\.68rem\]{
  font-size: 0.68rem;
}
.text-\[0\.7rem\]{
  font-size: 0.7rem;
}
.text-\[0\.82rem\]{
  font-size: 0.82rem;
}
.text-\[0\.85rem\]{
  font-size: 0.85rem;
}
.text-\[0\.95rem\]{
  font-size: 0.95rem;
}
.text-\[1\.65rem\]{
  font-size: 1.65rem;
}
.text-\[10\.5px\]{
  font-size: 10.5px;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[13\.5px\]{
  font-size: 13.5px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[1rem\]{
  font-size: 1rem;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-\[clamp\(1\.25rem\2c 13cqi\2c 2\.25rem\)\]{
  font-size: clamp(1.25rem, 13cqi, 2.25rem);
}
.text-\[clamp\(1\.875rem\2c 12cqi\2c 2\.75rem\)\]{
  font-size: clamp(1.875rem, 12cqi, 2.75rem);
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.italic{
  font-style: italic;
}
.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.lining-nums{
  --tw-numeric-figure: lining-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4{
  line-height: 1rem;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[var\(--bots-sobre-acento\2c white\)\]{
  color: var(--bots-sobre-acento,white);
}
.text-\[var\(--color-acento\)\]{
  color: var(--color-acento);
}
.text-\[var\(--color-alarma\)\]{
  color: var(--color-alarma);
}
.text-\[var\(--color-alarma\2c inherit\)\]{
  color: var(--color-alarma,inherit);
}
.text-\[var\(--color-aviso\)\]{
  color: var(--color-aviso);
}
.text-\[var\(--color-borde\)\]{
  color: var(--color-borde);
}
.text-\[var\(--color-exito\2c inherit\)\]{
  color: var(--color-exito,inherit);
}
.text-\[var\(--color-favorable\)\]{
  color: var(--color-favorable);
}
.text-\[var\(--color-fondo\)\]{
  color: var(--color-fondo);
}
.text-\[var\(--color-foreground\)\]{
  color: var(--color-foreground);
}
.text-\[var\(--color-superficie\)\]{
  color: var(--color-superficie);
}
.text-\[var\(--color-tenue\)\]{
  color: var(--color-tenue);
}
.text-\[var\(--color-tinta\)\]{
  color: var(--color-tinta);
}
.text-\[var\(--color-tinta\2c inherit\)\]{
  color: var(--color-tinta,inherit);
}
.text-background{
  --tw-text-opacity: 1;
  color: var(--color-background);
}
.text-card-foreground{
  --tw-text-opacity: 1;
  color: var(--color-card-foreground);
}
.text-destructive{
  --tw-text-opacity: 1;
  color: var(--color-destructive);
}
.text-destructive-text{
  --tw-text-opacity: 1;
  color: var(--color-destructive-text);
}
.text-foreground{
  --tw-text-opacity: 1;
  color: var(--color-foreground);
}
.text-muted-foreground{
  --tw-text-opacity: 1;
  color: var(--color-muted-foreground);
}
.text-primary{
  --tw-text-opacity: 1;
  color: var(--color-primary);
}
.text-primary-foreground{
  --tw-text-opacity: 1;
  color: var(--color-primary-foreground);
}
.text-red-300{
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-sidebar-foreground{
  --tw-text-opacity: 1;
  color: var(--color-sidebar-foreground);
}
.text-success-text{
  --tw-text-opacity: 1;
  color: var(--color-success-text);
}
.text-warning-text{
  --tw-text-opacity: 1;
  color: var(--color-warning-text);
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.decoration-\[var\(--color-borde\)\]{
  text-decoration-color: var(--color-borde);
}
.decoration-transparent{
  text-decoration-color: transparent;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.underline-offset-4{
  text-underline-offset: 4px;
}
.accent-\[var\(--color-acento\)\]{
  accent-color: var(--color-acento);
}
.accent-foreground{
  accent-color: var(--color-foreground);
}
.accent-primary{
  accent-color: var(--color-primary);
}
.accent-ring{
  accent-color: var(--color-ring);
}
.opacity-0{
  opacity: 0;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-80{
  opacity: 0.8;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card{
  --tw-shadow: var(--shadow-card);
  --tw-shadow-colored: var(--shadow-card);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-tooltip{
  --tw-shadow: var(--shadow-tooltip);
  --tw-shadow-colored: var(--shadow-tooltip);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card{
  --tw-shadow-color: var(--color-card);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.outline-1{
  outline-width: 1px;
}
.outline-2{
  outline-width: 2px;
}
.outline-\[var\(--color-acento\)\]{
  outline-color: var(--color-acento);
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[var\(--color-acento\)\]{
  --tw-ring-color: var(--color-acento);
}
.ring-\[var\(--color-superficie\)\]{
  --tw-ring-color: var(--color-superficie);
}
.ring-primary{
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--color-primary);
}
.ring-ring{
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--color-ring);
}
.ring-offset-2{
  --tw-ring-offset-width: 2px;
}
.ring-offset-background{
  --tw-ring-offset-color: var(--color-background);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-90{
  --tw-brightness: brightness(.9);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
@keyframes enter{

  from{
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit{

  to{
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.duration-100{
  animation-duration: 100ms;
}
.running{
  animation-play-state: running;
}
.paused{
  animation-play-state: paused;
}
.\[a-z0-9\:_\.-\]{
  a-z0-9: .-;
}
.\[admin\:aprendizaje\]{
  admin: aprendizaje;
}
.\[admin\:conexiones\]{
  admin: conexiones;
}
.\[admin\:ia\]{
  admin: ia;
}
.\[admin\:uso\]{
  admin: uso;
}
.\[competencia\:bandeja\]{
  competencia: bandeja;
}
.\[competencia\:comportamiento\]{
  competencia: comportamiento;
}
.\[competencia\:directos\]{
  competencia: directos;
}
.\[competencia\:oportunidades\]{
  competencia: oportunidades;
}
.\[competencia\:piso\]{
  competencia: piso;
}
.\[competencia\:reglas\]{
  competencia: reglas;
}
.\[conexiones\:apify\]{
  conexiones: apify;
}
.\[crm\:chat\]{
  crm: chat;
}
.\[crm\:responder\]{
  crm: responder;
}
.\[crm\:respuestas\]{
  crm: respuestas;
}
.\[espejo\:\2026\]{
  espejo: …;
}
.\[fichas\:v4\]{
  fichas: v4;
}
.\[impuestos\:facturas-ml\]{
  impuestos: facturas-ml;
}
.\[kits\:publicar\]{
  kits: publicar;
}
.\[motor\:calcular-ahora\]{
  motor: calcular-ahora;
}
.\[overflow-wrap\:anywhere\]{
  overflow-wrap: anywhere;
}
.\[precios\:automatizacion-ml\]{
  precios: automatizacion-ml;
}
.\[precios\:generador\]{
  precios: generador;
}
.\[precios\:motor\]{
  precios: motor;
}
.\[publicaciones\:atencion\]{
  publicaciones: atencion;
}
.\[publicaciones\:calidad\]{
  publicaciones: calidad;
}
.\[publicaciones\:conversion\]{
  publicaciones: conversion;
}
.\[publicaciones\:crear\]{
  publicaciones: crear;
}
.\[publicaciones\:editar\]{
  publicaciones: editar;
}
.\[publicaciones\:imagenes\]{
  publicaciones: imagenes;
}
.\[publicaciones\:lote\]{
  publicaciones: lote;
}
.\[publicaciones\:lotes\]{
  publicaciones: lotes;
}
.\[publicaciones\:monitor\]{
  publicaciones: monitor;
}
.\[publicaciones\:salud\]{
  publicaciones: salud;
}
.\[publicaciones\:seo\]{
  publicaciones: seo;
}
.\[rentabilidad\:simulador\]{
  rentabilidad: simulador;
}
.\[reputacion\:postventa\]{
  reputacion: postventa;
}
.\[reputacion\:salud\]{
  reputacion: salud;
}
.\[writing-mode\:vertical-rl\]{
  writing-mode: vertical-rl;
}

/*
 * ═══════════════════════════════════════════════════════════════════════════
 * LA PALETA DEL TABLERO — clara, sobria, pensada para imprimirse en blanco y negro
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Está en `oklch` y no en hexadecimal por una razón medida en este mismo repo:
 * el 2026-08-21 hubo que aclarar el rosa de la paleta oscura para que pasara
 * WCAG AA, y lo difícil fue subir la luminosidad SIN mover el tono. En oklch eso
 * es cambiar un número; en hexadecimal es adivinar tres.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LAS TRES FAMILIAS DE COLOR NO SE MEZCLAN
 * ─────────────────────────────────────────────────────────────────────────────
 * · TONO    (`alarma`, `aviso`, `favorable`, `acento` y sus `-suave`)
 *   dice **QUÉ TAN BIEN** está la cifra: rojo es problema, verde es todo en orden.
 * · CUENTA  (`--color-cuenta-N`) dice **DE QUIÉN** es (bienestar-1, bienestar-2).
 * · SERIE   (`--color-serie-N`)  dice **QUÉ** cifra es (vendido, comisión, margen).
 *
 * Usar una por la otra hace que el lector crea que dos marcas del mismo color
 * hablan de lo mismo cuando no. No se reutilizan entre sí, nunca. Lo custodia
 * `lib/tema/paleta-clara.test.ts`, que cruza **todos** los pares de familias
 * distintas y exige que ningún par comparta hexadecimal.
 *
 * ⚠️ ESTA INVARIANTE ESTUVO VIOLADA HASTA EL 2026-08-22, y adentro de este mismo
 * archivo que la declara. Medido: `--color-cuenta-2` y `--color-favorable` eran
 * los dos `#00724c`; `--color-cuenta-2-suave` y `--color-favorable-suave` los dos
 * `#d0f1e1`; `--color-cuenta-1-suave` y `--color-destacado-suave` los dos
 * `#ddedff`. En cuanto el selector de cuenta pintara una pastilla, el verde de
 * «esto es bienestar-2» iba a ser **indistinguible** del verde de «todo en
 * orden». El guardia de entonces sólo cruzaba cuenta-N contra serie-N: prometía
 * una regla de familias y cubría una de tres combinaciones.
 *
 * POR QUÉ LAS CUENTAS AHORA SON APAGADAS (croma 0,07) Y LOS TONOS SATURADOS:
 * porque un tono **significa** algo y una cuenta sólo **identifica**. Un color
 * lavado no se lee como una señal, y esa diferencia de saturación es una segunda
 * barrera contra la misma confusión, aparte del hexadecimal distinto.
 *
 * Y las dos cuentas se separan también en LUMINOSIDAD (0,38 contra 0,53 ⇒ 1,89
 * de contraste entre sí), no sólo en tono: el cliente imprime esto en blanco y
 * negro, y dos colores de la misma luminosidad son el mismo gris en el papel.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LA REGLA DEL FONDO TEÑIDO (la custodia `lib/tema/paleta-clara.test.ts`)
 * ─────────────────────────────────────────────────────────────────────────────
 * Un color de tono (`alarma`, `aviso`, `favorable`, `acento`, `cuenta-N`) se usa
 * como TEXTO **sólo** sobre `--color-fondo` o `--color-superficie`. Encima de un
 * fondo teñido (`--color-*-suave`) el texto va siempre en `--color-tinta`.
 *
 * No es gusto: está medido. `acento` sobre `destacado-suave` da **4,05** y
 * `aviso` sobre `aviso-suave` da **4,28**, cuando WCAG AA pide 4,5. `tinta`
 * sobre esos mismos fondos da 13,48 y 13,84. El color del tono sigue estando —
 * en el borde grueso de la izquierda, que es decoración y le alcanza con 3:1.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LO QUE `--color-borde` NO CUMPLE, dicho en voz alta
 * ─────────────────────────────────────────────────────────────────────────────
 * Da **1,28** sobre el fondo. No llega a 3:1 y no pretende llegar: es un
 * hairline de 1px que separa tarjetas y filas de tabla, no un control que haya
 * que identificar. Llevarlo a 3:1 pide `oklch(0.66 …)` — un gris oscuro que
 * convierte el tablero en una grilla de Excel. Queda como está, medido y
 * anotado; el test le fija un piso para que nadie lo vuelva invisible.
 */

/*
 * LA FILA DE CIFRAS EN UNA SOLA TARJETA (v1.3, sistema visual). `PantallaEnTresNiveles` pone las cifras en `.fila-de-cifras`:
 * una tarjeta blanca con borde 1 px y radio de 12 px, dividida en celdas por una línea fina; la cifra grande de 28–32 px.
 * Se estiliza por el atributo `data-cifra` de `CifraTile` (no se toca ese componente): cada celda deja de ser tarjeta.
 */
.fila-de-cifras {
  border: 1px solid var(--color-borde);
  border-radius: 0.75rem;
  background: var(--color-superficie);
  overflow: hidden;
}
.fila-de-cifras > [data-cifra] {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 1.1rem 1.25rem;
}
.fila-de-cifras > [data-cifra] + [data-cifra] { border-top: 1px solid var(--color-borde); }
@media (min-width: 640px) {
  .fila-de-cifras > [data-cifra] + [data-cifra] { border-top: 0; border-left: 1px solid var(--color-borde); }
}
.fila-de-cifras > [data-cifra]:hover { background: var(--color-destacado-suave); }
/* El rótulo chico y gris, y la cifra de 28–32 px (tabular). */
.fila-de-cifras > [data-cifra] > p:first-child { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 500; }
.fila-de-cifras > [data-cifra] > p:nth-of-type(2) { font-size: clamp(1.5rem, 8cqi, 2rem); font-weight: 600; line-height: 1.15; margin-top: 0.35rem; letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA CIFRA GRANDE DE UNA TARJETA — escala con el ancho de SU tarjeta
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ EL BUG QUE ESTAS DOS CLASES EXISTEN PARA IMPEDIR

   `tamano="grande"` valía `text-3xl sm:text-4xl` — 36 px fijos. Medido en
   producción el 2026-08-23, con la tipografía real y sobre las cifras reales:

     `▲ $ 17.488.652`  a 36 px mide 251 px
     `▼ $ 46.746.816`  a 36 px mide 250 px

   Y el ancho útil de la tarjeta que las contiene, ya descontado el `p-5`:

     portada, grid de 5 columnas        139 px   → se desbordaba 112 px
     rentabilidad, grid de 4 columnas   191 px   → se desbordaba  59 px

   Las dos son la cifra que el cliente más mira. En la portada («Tu ganancia»)
   el número se salía del recuadro e invadía el margen; en Rentabilidad
   («Promociones y descuentos») la tarjeta vecina —que tiene fondo opaco— lo
   TAPABA, y se perdía un dígito de plata: se leía `$ 46.746.81`.

   Un importe al que le falta el último dígito no es un importe impreciso: es
   otro importe.

   POR QUÉ FLUIDO Y NO UN TAMAÑO MÁS CHICO

   Porque ningún tamaño fijo aguanta. Con la inflación argentina las cifras se
   alargan solas, y `▲ $ 108.999.999` no entra en 139 px ni siquiera a 24 px.
   Atar la tipografía al ancho de su propia tarjeta es lo único que sobrevive a
   que el negocio facture más o a que la grilla cambie de columnas.

   LOS NÚMEROS, Y DE DÓNDE SALEN

   `13cqi` = 13 % del ancho de la tarjeta. Medido contra los dos casos reales:

     139 px → 18,1 px → el texto mide 125 px   (14 px de aire)
     191 px → 24,8 px → el texto mide 173 px   (18 px de aire)
     420 px → 54,6 px → tope de 2.25rem = 36 px, el diseño original intacto

   El tope de `2.25rem` conserva el `text-4xl` donde SÍ entra. El piso de
   `1.125rem` es el límite de legibilidad de una cifra protagonista.

   El `font-size` de arriba es el fallback para un navegador sin `cqi`: si no
   entiende la segunda declaración, la ignora y se queda con 24 px, que es el
   tamaño `normal` y entra en todas las tarjetas de hoy. */
.tarjeta-de-cifra {
  container-type: inline-size;
}

.cifra-fluida {
  font-size: 1.5rem;
  font-size: clamp(1.125rem, 13cqi, 2.25rem);
  line-height: 1.15;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PIEL DE `Cascada` (@traid/rentabilidad-ui)

   El componente emite clases `ru-cascada__*` y NO trae CSS para ellas: el
   tema.css del packet sólo estiliza PNL y tabla-publicación, y en oscuro
   (medido por Terra el 2026-08-29 — §5 «Clases sin CSS»). Sin esta hoja, el
   desglose del precio al líquido se ve como texto plano. La piel es local,
   clara, y usa los mismos tokens que el resto del tablero.
   ═══════════════════════════════════════════════════════════════════════════ */
.ru-cascada {
  font-size: 0.875rem;
}

.ru-cascada__titulo {
  color: var(--color-tenue);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.ru-cascada__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ru-cascada__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--color-borde);
}

.ru-cascada__fila:first-child {
  border-top: none;
}

/* Precio (arriba) y Recibís (abajo): las dos puntas de la cascada. */
.ru-cascada__fila--subtotal {
  font-weight: 600;
}

.ru-cascada__fila--cierre {
  border-top: 2px solid var(--color-tinta);
  font-weight: 700;
  margin-top: 0.125rem;
  padding-top: 0.4rem;
}

.ru-cascada__fila--informativa .ru-cascada__etiqueta,
.ru-cascada__fila--informativa .ru-cascada__monto {
  color: var(--color-tenue);
}

.ru-cascada__etiqueta {
  color: var(--color-tinta);
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
}

.ru-cascada__monto {
  white-space: nowrap;
}

/* «no resta»: el chip de una línea que se muestra pero no participa de la
   resta hacia el líquido. */
.ru-cascada__marca {
  border: 1px solid var(--color-borde);
  border-radius: 9999px;
  color: var(--color-tenue);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0 0.4rem;
}

/* La ausencia se DICE, nunca se rellena con un cero: va en tenue para que se
   lea como «falta el dato», no como una cifra más. */
.ru-cascada__sin-dato {
  color: var(--color-tenue);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PIEL DE `SelectorPeriodo` Y `SelloDeDatosRender` (@traid/rentabilidad-ui)
   ═══════════════════════════════════════════════════════════════════════════

   Mismo motivo que `ru-cascada` acá arriba: el `tema.css` del packet NO se
   importa (ver la nota del `@import` al principio del archivo) porque trae una
   paleta oscura fija, y este tablero es claro y se imprime. Los componentes
   emiten clases `ru-*` sin CSS propio; la ropa vive de este lado, con los
   tokens del tablero.

   Escrito a mano y no copiado del packet a propósito: copiar el CSS oscuro y
   "aclararlo" es cómo se crea una segunda definición que después diverge. */

.ru-selector-periodo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ru-selector-periodo__tabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ru-selector-periodo__etiqueta {
  color: var(--color-tenue);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ru-selector-periodo__tab {
  border: 1px solid var(--color-borde);
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.ru-selector-periodo__tab--activo {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
  font-weight: 600;
}

.ru-selector-periodo__tab--inactivo {
  color: var(--color-tenue);
}

.ru-selector-periodo__tab--inactivo:hover {
  color: var(--color-tinta);
}

/* LA OPCIÓN NO DISPONIBLE SE VE, ATENUADA — no se esconde.
   Esconderla dejaría al cliente sin saber que existe la ventana del ciclo; y
   ofrecerla clickeable llevaría a una pantalla que no puede cumplir lo que
   promete. El packet ya toma esa decisión; acá sólo se le pone la ropa.
   `border-dashed` además del gris: en blanco y negro impreso, dos grises
   distintos son el mismo gris. */
.ru-selector-periodo__tab--deshabilitado {
  border-style: dashed;
  color: var(--color-tenue);
  cursor: not-allowed;
  opacity: 0.75;
}

/* El aviso de degradación (se pidió el ciclo y no hay ninguno abierto). No es
   tenue: es la explicación de por qué la pantalla NO muestra lo que se pidió. */
.ru-selector-periodo__aviso {
  color: var(--color-tinta);
  font-size: 0.72rem;
  line-height: 1.45;
  max-width: 46rem;
}

.ru-selector-periodo__puentes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── El sello de datos ──────────────────────────────────────────────────── */

.ru-sello {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ru-sello__hora {
  color: var(--color-tenue);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.ru-sello__degradado {
  border: 1px solid var(--color-aviso);
  border-radius: 9999px;
  color: var(--color-aviso);
  font-size: 0.65rem;
  padding: 0 0.4rem;
}

/* El botón de refrescar NO SE IMPRIME: en papel no se puede apretar, y una
   hoja con un botón dibujado invita a buscarlo donde no está. La hora sí se
   imprime — es la mitad de un reclamo. */
.ru-sello__boton {
  border: 1px solid var(--color-borde);
  border-radius: 9999px;
  color: var(--color-tenue);
  font-size: 0.7rem;
  padding: 0.1rem 0.55rem;
}

.ru-sello__boton:hover:not(:disabled) {
  color: var(--color-tinta);
}

.ru-sello__boton:disabled {
  opacity: 0.5;
}

.ru-sello__error {
  color: var(--color-alarma);
  font-size: 0.7rem;
}

@media print {
  .ru-sello__boton {
    display: none;
  }

  /* Las pestañas de período tampoco: en papel la ventana ya está elegida y
     dicha en el encabezado del resumen. Lo que NO se esconde es el aviso de
     degradación — esa es información, no un control. */
  .ru-selector-periodo__tabs {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PIEL DE `BarraResumenPegajosa` (@traid/rentabilidad-ui 0.8.0)

   Misma decisión que la de `Cascada`, tres bloques más arriba, y por el mismo
   motivo: el `tema.css` del packet SÍ trae reglas para estas clases desde
   0.8.0, pero este repo no lo importa a propósito (ver el encabezado del
   archivo) — es oscuro por defecto y restilaría también `ru-cascada`, que acá
   ya tiene su piel clara. La franja se viste local, con los tokens del tablero.

   ─────────────────────────────────────────────────────────────────────────────
   LAS DOS COSAS QUE NO SON DECORACIÓN
   ─────────────────────────────────────────────────────────────────────────────

   1 · `height: 0` EN LA FRANJA, y lo que crece es lo pintado.

   El packet anima `max-height` de 0 a 6rem. Eso funciona, pero la franja
   participa del flujo: en el instante en que se despliega, TODO lo que hay
   abajo —la tabla que el cliente está justo mirando— se corre 96 px hacia
   abajo. Un salto de 96 px en pleno scroll se lee como que la pantalla se
   rompió. Con la caja en el flujo fija en 0 y el contenido desbordando hacia
   abajo, la franja se dibuja ENCIMA de la tabla como un encabezado y no empuja
   nada nunca. Lo que se anima es la opacidad.

   2 · LOS `margin-top` NEGATIVOS SON ARITMÉTICA, no un ajuste a ojo.

   La franja son DOS hijos (el centinela y la barra) de un contenedor
   `flex flex-col gap-6` = 1,5rem entre hijos. Sin corregir, dos elementos que
   miden 1 px meterían 48 px de aire muerto entre el resumen y los avisos. Cada
   `-1.5rem` cancela exactamente una separación: el resultado neto es +1 px.
   Si algún día cambia el `gap-6` de `app/rentabilidad/page.tsx`, estos dos
   números cambian con él.
   ═══════════════════════════════════════════════════════════════════════════ */
.ru-barra-resumen__centinela {
  height: 1px;
  margin-top: -1.5rem;
}

.ru-barra-resumen {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 0;
  margin-top: -1.5rem;
  /* Visible a propósito: es lo que deja que la franja se pinte por fuera de su
     caja de alto cero. Cambiarlo a `hidden` la borra de la pantalla. */
  overflow: visible;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* No va al papel. La franja existe para el scroll, y una hoja impresa no
   scrollea: en papel sólo sería una repetición de las tarjetas de arriba. */
@media print {
  .ru-barra-resumen,
  .ru-barra-resumen__centinela {
    display: none;
  }
}

/* Quien pidió menos movimiento no quiere un fundido: la franja aparece y
   desaparece sin animación. */
@media (prefers-reduced-motion: reduce) {
  .ru-barra-resumen {
    transition: none;
  }
}

.ru-barra-resumen--oculta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ru-barra-resumen--compacta {
  opacity: 1;
  visibility: visible;
}

/* La caja que se ve. Es opaca a propósito: la franja se dibuja sobre la tabla,
   y con fondo translúcido los números de arriba se mezclarían con los de abajo
   — dos cifras superpuestas es peor que ninguna. */
.ru-barra-resumen__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  align-items: baseline;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 6px 16px oklch(0.25 0.02 250 / 0.08);
  padding: 0.5rem 0.75rem;
}

.ru-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6rem;
}

.ru-kpi__etiqueta {
  color: var(--color-tenue);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ru-kpi__valor {
  color: var(--color-tinta);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La ausencia, otra vez en tenue y nunca en un color de TONO: «no se sabe» no
   es una alarma ni una buena noticia — las tres familias de color no se mezclan
   (ver el encabezado de la paleta). El motivo viaja en el `title` que pone el
   propio packet. */
.ru-kpi__sin-dato {
  color: var(--color-tenue);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PIEL DE `AyudaKpi` (@traid/rentabilidad-ui)

   Mismo motivo que `ru-cascada`, `ru-selector-periodo` y `ru-barra-resumen`: el
   `tema.css` del packet no se importa (trae paleta oscura fija), así que la ropa
   se escribe acá con los tokens del tablero.

   ─────────────────────────────────────────────────────────────────────────────
   LO QUE NO ES DECORACIÓN: EL BLOQUE `@media print` DE ABAJO
   ─────────────────────────────────────────────────────────────────────────────

   Este tablero SE IMPRIME. Está medido y documentado: el cliente saca la hoja en
   blanco y negro. Y el texto que este componente esconde detrás del ícono no es
   adorno — es la cobertura de cada cifra, o sea lo que evita leer un total
   incompleto como total.

   Un tooltip que en pantalla ahorra ruido, en el papel BORRA esa salvedad: no se
   puede apretar una hoja. Así que al imprimir se invierte: el botón desaparece
   (no se puede apretar) y el panel se despliega ENTERO y en el flujo, debajo de
   su cifra. En pantalla la pantalla queda limpia; en papel el número sigue
   diciendo sobre qué está medido.

   ⚠️ El panel lleva el atributo `hidden` cuando está cerrado —lo pone el propio
   packet—, y `[hidden]` es `display:none`. Por eso el bloque de impresión tiene
   que ganarle con `!important`: sin eso, el panel cerrado no se imprime aunque
   se le cambie el `position`.
   ═══════════════════════════════════════════════════════════════════════════ */
.ru-ayuda-kpi {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/* El botón es chico y tenue a propósito: es una salida disponible, no un
   llamado de atención. Lo que tiene que llamar la atención de una tarjeta es la
   cifra, y en segundo lugar la advertencia cuando la hay. */
.ru-ayuda-kpi__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--color-tenue);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  cursor: help;
}

.ru-ayuda-kpi__boton:hover {
  color: var(--color-foreground);
  border-color: var(--color-foreground);
}

/* El foco SÍ se ve, y con el anillo del tablero: el packet abre el panel al
   recibir foco, así que quien navega con teclado tiene que saber dónde está. */
.ru-ayuda-kpi__boton:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

.ru-ayuda-kpi__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  width: -moz-max-content;
  width: max-content;
  max-width: 17rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-borde);
  border-radius: 0.5rem;
  background: var(--color-card);
  color: var(--color-foreground);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}

@media print {
  /* En papel no se puede apretar nada. */
  .ru-ayuda-kpi__boton {
    display: none;
  }

  /* Y el texto que el botón escondía vuelve al flujo, entero. Gana al `hidden`
     que pone el packet — ver la nota del encabezado de este bloque. */
  .ru-ayuda-kpi__panel,
  .ru-ayuda-kpi__panel[hidden] {
    display: block !important;
    position: static;
    max-width: none;
    margin-top: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.72rem;
    color: var(--color-tenue);
  }
}

/* ─── LA BARRA LATERAL CON LOS GRUPOS ABIERTOS (2026-09-24) ─────────────────
   El contenedor pegajoso del packet tiene `max-h-[calc(100vh-3rem)]` y el
   `<aside>` (la tarjeta blanca) se estira a ESE alto como ítem flex. Con los
   grupos abiertos la lista mide más (medido: 1.392 px contra 695) y se dibujaba
   FUERA del fondo blanco. El packet sólo pone `overflow-y-auto` en el aside con
   `gruposAbiertos='todos'`; acá lo pedimos siempre: la lista se desplaza
   DENTRO de la tarjeta y el fondo la acompaña. Sin desborde no dibuja nada. */
[data-sidebar-aside] {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}


/* ─── LAS TABLAS ANCHAS (2026-09-24) ─────────────────────────────────────────
   1 · El degradado del borde derecho del packet se dibujaba SIEMPRE, aunque la
       tabla entrara entera, y desteñía la última columna. Ahora sólo cuando el
       medidor dice que hay más a la derecha (`data-hay-mas="1"`).
   2 · Arrastrar con el mouse (`lib/ui/tablas-arrastrables.ts`): el cursor sólo
       cambia donde de verdad hay para desplazar.
   3 · Los textos recortados que se abren con un clic. */
[data-scroll][data-hay-mas="0"] + div[aria-hidden] {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-scroll][data-desplazable="1"] {
    cursor: grab;
  }
  [data-scroll][data-arrastrando="1"] {
    cursor: grabbing;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
}
[data-texto-que-se-abre][data-abierto="1"] {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* LAS TABLAS QUE SE ORDENAN (2026-09-26, components/tablas/MejorasDeTablas.tsx). */
th[data-ordenable] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
th[aria-sort='ascending']::after { content: ' ▲'; font-size: 0.7em; }
th[aria-sort='descending']::after { content: ' ▼'; font-size: 0.7em; }
tr[data-fila-de-grupo] > td { font-weight: 600; background: var(--color-destacado-suave); }


/* ─── EN EL CELULAR, CADA FILA COMO TARJETA (UI etapa 2, 2026-09-26) ────────
   `TablaDesplazable tarjetasEnCelular`: debajo de 640 px la tabla deja de ser
   tabla — cada fila es una tarjeta y cada dato lleva el nombre de su columna
   (`data-label`, que copia `EtiquetasDeColumna`). Arriba de 640 px, nada cambia. */
@media (max-width: 639px) {
  .tarjetas-en-celular table { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  .tarjetas-en-celular thead { display: none; }
  .tarjetas-en-celular tbody tr { display: block; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-borde); border-radius: 0.5rem; }
  .tarjetas-en-celular tbody td { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0 !important; border: 0 !important; text-align: right; width: auto !important; }
  .tarjetas-en-celular tbody td[data-label]::before { content: attr(data-label); flex-shrink: 0; max-width: 45%; text-align: left; font-size: 0.75rem; color: var(--color-tenue); }
  /* Rentabilidad (PK-R4, 05/10/2026): el título de la fila es un <th scope="row"> (publicación, producto, fecha de la venta): arriba de
     la tarjeta, sin recortar. La fila del desglose (`data-label=""`) no lleva el rótulo de la columna 0, ni la foto el suyo. */
  .tarjetas-en-celular tbody th[scope='row'] { display: block; max-width: none !important; width: auto !important; padding: 0 0 0.25rem !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; text-align: left; font-weight: 600; }
  .tarjetas-en-celular tbody td[data-label=''] { display: block; padding: 0 !important; text-align: left; }
  .tarjetas-en-celular tbody td[data-label='']::before,
  .tarjetas-en-celular tbody td[data-label='Foto del producto']::before { display: none; }
}

/* El cartel de la guía (fixed, abajo) no puede tapar el final de la página: ver Invitacion en components/guias/GuiaDeLaPantalla.tsx. */
body.con-invitacion { padding-bottom: 9rem; }
/* H11: en el celular el cartel es una franja baja: alcanza con menos aire para llegar al último botón. */
@media (max-width: 639px) { body.con-invitacion { padding-bottom: 6rem; } }

/*
 * EL SEPARADOR «MÁS HERRAMIENTAS» DE LA BARRA (menú v1.3). Lo menos usado de cada grupo va al final del MISMO grupo; el
 * packet de la barra no conoce subgrupos, así que el separador fino se dibuja en el primer enlace de ese tramo
 * (`data-mas-primero`, ver `PRIMEROS_DE_MAS` en components/tablero/secciones.ts). Si el enlace se esconde, se va con él.
 */
a[data-mas-primero] { position: relative; margin-top: 1.6rem !important; } /* !important: el space-y del contenedor del packet pisaba el margen y el rótulo se encimaba al enlace anterior */
a[data-mas-primero]::before {
  content: 'Más herramientas';
  position: absolute; top: -1.15rem; left: 0.75rem; right: 0.75rem;
  padding-top: 0.2rem; border-top: 1px solid var(--color-borde);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-tenue); pointer-events: none; white-space: nowrap;
}
/* La regla que escondía este rótulo con la barra del packet plegada
   (`[data-sidebar='colapsado']`) se borró el 02/10/2026 (U1c, bloque U): desde
   que `Marco` monta `Cascara` en vez de `AppShell`, ningún script pone ese
   atributo — queda sin nada que esconder. */

/*
 * TELÉFONO (18/10/2026): en una pantalla táctil angosta, los controles se pueden tocar con el dedo. 40 px de alto mínimo para botones, selectores, campos y resúmenes desplegables
 * (checkbox y radio no: tienen su propia caja), y 16 px de letra en los campos para que iOS no haga zoom al enfocarlos. Sólo toca teléfonos (ancho ≤ 640 px y puntero táctil): en escritorio no cambia nada.
 */
@media (max-width: 640px) and (pointer: coarse) {
  button,
  select,
  summary,
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']) {
    min-height: 40px;
  }
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  select,
  textarea {
    font-size: 16px;
  }
}
.marker\:content-none *::marker{
  --tw-content: none;
  content: var(--tw-content);
}
.marker\:content-none::marker{
  --tw-content: none;
  content: var(--tw-content);
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button{
  background-color: transparent;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button{
  font-weight: 500;
}
.file\:text-foreground::file-selector-button{
  --tw-text-opacity: 1;
  color: var(--color-foreground);
}
.placeholder\:text-\[var\(--color-tenue\)\]::-moz-placeholder{
  color: var(--color-tenue);
}
.placeholder\:text-\[var\(--color-tenue\)\]::placeholder{
  color: var(--color-tenue);
}
.placeholder\:text-muted-foreground::-moz-placeholder{
  --tw-text-opacity: 1;
  color: var(--color-muted-foreground);
}
.placeholder\:text-muted-foreground::placeholder{
  --tw-text-opacity: 1;
  color: var(--color-muted-foreground);
}
.backdrop\:bg-black\/40::backdrop{
  background-color: rgb(0 0 0 / 0.4);
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after{
  content: var(--tw-content);
  inset: 0px;
}
.first\:border-t-0:first-child{
  border-top-width: 0px;
}
.first\:pt-0:first-child{
  padding-top: 0px;
}
.last\:mb-0:last-child{
  margin-bottom: 0px;
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.target\:bg-\[var\(--color-destacado-suave\)\]:target{
  background-color: var(--color-destacado-suave);
}
.focus-within\:border-\[var\(--color-tenue\)\]:focus-within{
  border-color: var(--color-tenue);
}
.focus-within\:shadow-md:focus-within{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[var\(--color-acento\)\]:hover{
  border-color: var(--color-acento);
}
.hover\:border-\[var\(--color-tenue\)\]:hover{
  border-color: var(--color-tenue);
}
.hover\:border-\[var\(--color-tinta\)\]:hover{
  border-color: var(--color-tinta);
}
.hover\:bg-\[var\(--color-destacado-suave\)\]:hover{
  background-color: var(--color-destacado-suave);
}
.hover\:bg-\[var\(--color-fondo\)\]:hover{
  background-color: var(--color-fondo);
}
.hover\:bg-\[var\(--color-superficie\)\]:hover{
  background-color: var(--color-superficie);
}
.hover\:bg-accent\/20:hover{
  background-color: color-mix(in oklab, var(--color-accent) calc(0.2 * 100%), transparent);
}
.hover\:bg-muted:hover{
  --tw-bg-opacity: 1;
  background-color: var(--color-muted);
}
.hover\:bg-muted\/50:hover{
  background-color: color-mix(in oklab, var(--color-muted) calc(0.5 * 100%), transparent);
}
.hover\:bg-primary-hover:hover{
  --tw-bg-opacity: 1;
  background-color: var(--color-primary-hover);
}
.hover\:bg-primary\/90:hover{
  background-color: color-mix(in oklab, var(--color-primary) calc(0.9 * 100%), transparent);
}
.hover\:bg-surface-2\/60:hover{
  background-color: color-mix(in oklab, var(--color-surface-2) calc(0.6 * 100%), transparent);
}
.hover\:text-\[var\(--color-tinta\)\]:hover{
  color: var(--color-tinta);
}
.hover\:text-foreground:hover{
  --tw-text-opacity: 1;
  color: var(--color-foreground);
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:decoration-\[var\(--color-tinta\)\]:hover{
  text-decoration-color: var(--color-tinta);
}
.hover\:decoration-current:hover{
  text-decoration-color: currentColor;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-card-hover:hover{
  --tw-shadow: var(--shadow-card-hover);
  --tw-shadow-colored: var(--shadow-card-hover);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-90:hover{
  --tw-brightness: brightness(.9);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-\[var\(--color-acento\)\]:focus{
  border-color: var(--color-acento);
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-\[var\(--color-acento\)\]:focus{
  --tw-ring-color: var(--color-acento);
}
.focus-visible\:border-\[var\(--color-acento\)\]:focus-visible{
  border-color: var(--color-acento);
}
.focus-visible\:opacity-100:focus-visible{
  opacity: 1;
}
.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible{
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible{
  outline-offset: 2px;
}
.focus-visible\:outline-\[var\(--color-acento\)\]:focus-visible{
  outline-color: var(--color-acento);
}
.focus-visible\:outline-primary:focus-visible{
  outline-color: var(--color-primary);
}
.focus-visible\:ring:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-\[var\(--color-acento\)\]:focus-visible{
  --tw-ring-color: var(--color-acento);
}
.focus-visible\:ring-destructive-text:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--color-destructive-text);
}
.focus-visible\:ring-primary:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--color-primary);
}
.focus-visible\:ring-ring:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--color-ring);
}
.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible{
  --tw-ring-offset-color: var(--color-background);
}
.active\:bg-primary-active:active{
  --tw-bg-opacity: 1;
  background-color: var(--color-primary-active);
}
.active\:bg-primary\/80:active{
  background-color: color-mix(in oklab, var(--color-primary) calc(0.8 * 100%), transparent);
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled{
  cursor: wait;
}
.disabled\:bg-muted:disabled{
  --tw-bg-opacity: 1;
  background-color: var(--color-muted);
}
.disabled\:text-muted-foreground:disabled{
  --tw-text-opacity: 1;
  color: var(--color-muted-foreground);
}
.disabled\:accent-muted-foreground:disabled{
  accent-color: var(--color-muted-foreground);
}
.disabled\:opacity-30:disabled{
  opacity: 0.3;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group[open] .group-open\:line-clamp-none{
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
}
.group[open] .group-open\:block{
  display: block;
}
.group[open] .group-open\:inline{
  display: inline;
}
.group[open] .group-open\:hidden{
  display: none;
}
.group\/nav[open] .group-open\/nav\:rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/plegable[open] .group-open\/plegable\:rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[open] .group-open\:rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[open] .group-open\:text-\[var\(--color-tinta\)\]{
  color: var(--color-tinta);
}
.group:focus-within .group-focus-within\:flex{
  display: flex;
}
.group:hover .group-hover\:flex{
  display: flex;
}
.group:hover .group-hover\:text-foreground{
  --tw-text-opacity: 1;
  color: var(--color-foreground);
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed{
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:text-muted-foreground{
  --tw-text-opacity: 1;
  color: var(--color-muted-foreground);
}
.peer:disabled ~ .peer-disabled\:opacity-70{
  opacity: 0.7;
}
.aria-pressed\:bg-\[var\(--color-destacado-suave\)\][aria-pressed="true"]{
  background-color: var(--color-destacado-suave);
}
.aria-pressed\:text-\[var\(--color-acento\)\][aria-pressed="true"]{
  color: var(--color-acento);
}
.aria-\[current\=page\]\:border-\[var\(--color-acento\)\][aria-current="page"]{
  border-color: var(--color-acento);
}
.aria-\[invalid\=true\]\:border-destructive-text[aria-invalid="true"]{
  --tw-border-opacity: 1;
  border-color: var(--color-destructive-text);
}
.aria-\[current\=page\]\:bg-\[var\(--color-destacado-suave\)\][aria-current="page"]{
  background-color: var(--color-destacado-suave);
}
.aria-\[current\=page\]\:text-\[var\(--color-acento\)\][aria-current="page"]{
  color: var(--color-acento);
}
.peer[data-hay-mas="1"] ~ .peer-data-\[hay-mas\=1\]\:flex{
  display: flex;
}
@media (prefers-reduced-motion: no-preference){

  @keyframes pulse{

    50%{
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .motion-safe\:transition-colors{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:transition-shadow{
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
}
@media (max-width: 479px){

  .max-\[479px\]\:inline{
    display: inline;
  }

  .max-\[479px\]\:hidden{
    display: none;
  }
}
@media (min-width: 640px){

  .sm\:bottom-4{
    bottom: 1rem;
  }

  .sm\:left-auto{
    left: auto;
  }

  .sm\:right-4{
    right: 1rem;
  }

  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .sm\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .sm\:mt-3{
    margin-top: 0.75rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:w-56{
    width: 14rem;
  }

  .sm\:w-80{
    width: 20rem;
  }

  .sm\:w-\[22rem\]{
    width: 22rem;
  }

  .sm\:max-w-md{
    max-width: 28rem;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:max-w-xs{
    max-width: 20rem;
  }

  .sm\:shrink-0{
    flex-shrink: 0;
  }

  .sm\:columns-2{
    -moz-columns: 2;
         columns: 2;
  }

  .sm\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_2fr_auto\]{
    grid-template-columns: 1fr 2fr auto;
  }

  .sm\:grid-cols-\[1fr_auto\]{
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[3fr_2fr\]{
    grid-template-columns: 3fr 2fr;
  }

  .sm\:grid-cols-\[9\.5rem_1fr\]{
    grid-template-columns: 9.5rem 1fr;
  }

  .sm\:grid-cols-\[max-content_1fr\]{
    grid-template-columns: max-content 1fr;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:items-baseline{
    align-items: baseline;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-x-4{
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .sm\:self-end{
    align-self: flex-end;
  }

  .sm\:self-center{
    align-self: center;
  }

  .sm\:rounded-md{
    border-radius: var(--radius-md);
  }

  .sm\:border{
    border-width: 1px;
  }

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px){

  .md\:absolute{
    position: absolute;
  }

  .md\:right-0{
    right: 0px;
  }

  .md\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .md\:ml-auto{
    margin-left: auto;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid{
    display: grid;
  }

  .md\:hidden{
    display: none;
  }

  .md\:w-56{
    width: 14rem;
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[12rem_1fr\]{
    grid-template-columns: 12rem 1fr;
  }

  .md\:grid-cols-\[1fr_16rem\]{
    grid-template-columns: 1fr 16rem;
  }

  .md\:grid-cols-\[8rem_minmax\(0\2c 1fr\)_7rem_4rem_4rem\]{
    grid-template-columns: 8rem minmax(0,1fr) 7rem 4rem 4rem;
  }

  .md\:grid-cols-\[minmax\(220px\2c 280px\)_1fr\]{
    grid-template-columns: minmax(220px,280px) 1fr;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:p-5{
    padding: 1.25rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:text-right{
    text-align: right;
  }

  .md\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-\[inherit\]{
    color: inherit;
  }
}
@media (min-width: 1024px){

  .lg\:absolute{
    position: absolute;
  }

  .lg\:left-0{
    left: 0px;
  }

  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:w-48{
    width: 12rem;
  }

  .lg\:w-64{
    width: 16rem;
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[14rem_minmax\(0\2c 1fr\)_18rem\]{
    grid-template-columns: 14rem minmax(0,1fr) 18rem;
  }

  .lg\:grid-cols-\[2fr_1fr\]{
    grid-template-columns: 2fr 1fr;
  }

  .lg\:grid-cols-\[3fr_2fr\]{
    grid-template-columns: 3fr 2fr;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_21rem\]{
    grid-template-columns: minmax(0,1fr) 21rem;
  }

  .lg\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 2fr\)\]{
    grid-template-columns: minmax(0,3fr) minmax(0,2fr);
  }

  .lg\:grid-cols-\[minmax\(15rem\2c 22rem\)_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(15rem,22rem) minmax(0,1fr);
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-end{
    align-items: flex-end;
  }
}
@media (min-width: 1280px){

  .xl\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[minmax\(240px\2c 300px\)_1fr_minmax\(280px\2c 340px\)\]{
    grid-template-columns: minmax(240px,300px) 1fr minmax(280px,340px);
  }

  .xl\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
@media (min-width: 1536px){

  .\32xl\:max-w-\[20rem\]{
    max-width: 20rem;
  }

  .\32xl\:max-w-\[24rem\]{
    max-width: 24rem;
  }

  .\32xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media print{

  .print\:not-sr-only{
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .print\:line-clamp-none{
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }

  .print\:block{
    display: block;
  }

  .print\:flex{
    display: flex;
  }

  .print\:hidden{
    display: none;
  }

  .print\:min-w-0{
    min-width: 0px;
  }

  .print\:max-w-none{
    max-width: none;
  }

  .print\:break-before-page{
    -moz-column-break-before: page;
         break-before: page;
  }

  .print\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .print\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .print\:overflow-visible{
    overflow: visible;
  }

  .print\:whitespace-normal{
    white-space: normal;
  }

  .print\:border-0{
    border-width: 0px;
  }

  .print\:p-0{
    padding: 0px;
  }

  .print\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .print\:text-xs{
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .print\:font-semibold{
    font-weight: 600;
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{
  display: none;
}
.\[\&\>\.ux-pill\]\:whitespace-normal>.ux-pill{
  white-space: normal;
}
.\[\&\>td\]\:py-3>td{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&\>th\]\:py-3>th{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\#r-completitud-titulo\]\:hidden #r-completitud-titulo{
  display: none;
}
.\[\&_\#r-escalera-titulo\]\:sr-only #r-escalera-titulo{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.\[\&_input\]\:rounded-md input{
  border-radius: var(--radius-md);
}
.\[\&_input\]\:border input{
  border-width: 1px;
}
.\[\&_input\]\:border-\[var\(--color-borde\)\] input{
  border-color: var(--color-borde);
}
.\[\&_input\]\:bg-\[var\(--color-fondo\)\] input{
  background-color: var(--color-fondo);
}
.\[\&_input\]\:px-2 input{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_input\]\:py-1 input{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.\[\&_label\]\:flex label{
  display: flex;
}
.\[\&_label\]\:flex-col label{
  flex-direction: column;
}
.\[\&_label\]\:gap-1 label{
  gap: 0.25rem;
}
.\[\&_label\]\:text-xs label{
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_select\]\:rounded-md select{
  border-radius: var(--radius-md);
}
.\[\&_select\]\:border select{
  border-width: 1px;
}
.\[\&_select\]\:border-\[var\(--color-borde\)\] select{
  border-color: var(--color-borde);
}
.\[\&_select\]\:bg-\[var\(--color-fondo\)\] select{
  background-color: var(--color-fondo);
}
.\[\&_select\]\:px-2 select{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_select\]\:py-1 select{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.\[\&_svg\]\:pointer-events-none svg{
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg{
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg{
  flex-shrink: 0;
}
.\[\&_thead_th\]\:sticky thead th{
  position: sticky;
}
.\[\&_thead_th\]\:top-0 thead th{
  top: 0px;
}
.\[\&_thead_th\]\:z-10 thead th{
  z-index: 10;
}
.\[\&_thead_th\]\:bg-muted thead th{
  --tw-bg-opacity: 1;
  background-color: var(--color-muted);
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child{
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr{
  border-bottom-width: 1px;
}
.\[\&_tr\]\:border-border tr{
  --tw-border-opacity: 1;
  border-color: var(--color-border);
}
body:has([data-franja=empeza-aca]) .\[body\:has\(\[data-franja\=empeza-aca\]\)_\&\]\:hidden{
  display: none;
}