/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-inter","display":"swap"}],"variableName":"inter"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_f367f3 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_f367f3 {--font-inter: 'Inter', 'Inter Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::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); /* 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: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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 {
    color-scheme: light;

    /* ── DESIGN TOKENS — Estilo Suizo / International Typographic Style ─────
       Una sola fuente de verdad para color/forma/tipografía. Los componentes
       NUNCA hardcodean color de marca ni neutrales: leen de estas variables
       vía utilidades de Tailwind (bg-surface, text-foreground, border-border…).
       - Profundidad por ESPACIO + FILETES de 1px (border-border), nunca sombras.
       - Un solo acento de marca (rojo suizo). Lo demás: tinta, papel y grises.
       - White-label (Fase 4): el tenant sobreescribe SOLO el acento; la
         estructura suiza (tipografía, rejilla, filetes, rounded-0) queda fija.
       - Dark mode: suizo invertido, se resuelve UNA vez aquí abajo (@media).
       RGB sin coma para que Tailwind aplique opacidades (bg-accent/50). */

    /* Marca / acción */
    --color-primary: 17 17 17;        /* tinta — botón/acción principal     #111111 */
    --color-primary-fg: 255 255 255;  /* papel — texto sobre primary        #FFFFFF */
    /* ⚠ #DC0612, no #E30613. El rojo suizo de siempre daba **4.37 : 1 sobre
       el LIENZO** —pasa sobre papel (4.88) y falla sobre el gris frío, que es
       el fondo de media aplicación—. Se bajó lo mínimo para llegar a 4.61
       sobre lienzo y 5.15 sobre papel. A ojo es el mismo rojo; medido, deja
       de incumplir. Ver `docs/revision-diseno/06-color.md`. */
    --color-accent: 220 6 18;         /* ÚNICO acento — rojo suizo           #DC0612 */
    --color-accent-fg: 255 255 255;   /* texto sobre el acento (rojo)        #FFFFFF */

    /* Superficies y texto (papel / tinta / grises) */
    --color-canvas: 242 242 244;      /* lienzo (gris frío) — los paneles blancos flotan #F2F2F4 */
    --color-surface: 255 255 255;     /* tarjetas/superficie/sidebar (papel) #FFFFFF */
    --color-foreground: 17 17 17;     /* tinta — texto principal             #111111 */
    /* ⚠ #676767, no #6B6B6B. El anterior se calibró **sobre papel** (5.33) y
       se usa también sobre los fondos suaves: sobre `danger-soft` daba
       **4.36 : 1** en el tablero. Ahora se calibra contra el PEOR de los
       cinco fondos que le tocan —papel, lienzo, rojo, ámbar y verde
       claros— y el mínimo es 4.63, sobre rojo claro. */
    --color-muted: 103 103 103;       /* texto secundario (AA sobre los 5 fondos) #676767 */
    /* Un peldaño MÁS ABAJO que `muted`, para el texto de ayuda que cuelga de
       un campo — pedido del usuario: «un tono más abajo que lo demás».

       ⚠⚠ **AQUÍ ESTUVO EL ERROR MÁS INSTRUCTIVO DE LA PALETA, y era de
       método.** El valor anterior, #767676, venía con este comentario: «es
       el último que todavía pasa AA **sobre papel** (4.54 : 1)». Era verdad
       y era insuficiente: **la ayuda de campo casi nunca cae sobre papel,
       cae sobre el LIENZO**, y ahí daba **4.06 : 1**. Medido en las 51
       pantallas: 17 casos en 11. El número estaba bien calculado contra el
       fondo equivocado.

       #6D6D6D se calibra contra el peor de los dos fondos: **4.63 sobre
       lienzo** y 5.17 sobre papel. La ayuda es texto de 13 px, o sea texto
       normal para la norma: no alcanza la excepción de «texto grande».
       Bajar más se vería mejor y dejaría fuera a quien lee con dificultad,
       que en esta plantilla no es una hipótesis.

       **La regla que queda:** un token se calibra contra **todos** los
       fondos sobre los que se pinta, no contra el primero que se pensó. */
    --color-muted-soft: 109 109 109;  /* ayuda de campo (AA sobre lienzo)    #6D6D6D */
    --color-border: 229 229 229;      /* FILETE hairline 1px                 #E5E5E5 */
    /* ⚠⚠ #8B8B8B, no #D4D4D4. Éste es el cambio que más se ve, y el mejor
       justificado de los cinco.

       WCAG 2.1 **1.4.11 (Non-text Contrast)** pide **3 : 1** para el límite
       de un componente de interfaz, y el borde de un campo de captura es
       exactamente eso. #D4D4D4 daba **1.48 : 1**. Y aquí pesa más que en
       otra aplicación: en un diseño **sin sombras, sin relleno de color y
       con esquinas rectas**, ese filete de 1 px es **lo único que dice dónde
       empieza el campo**. Para quien ve poco, un formulario era una hoja en
       blanco con texto flotando — y *todas* las pantallas son formularios.

       #8B8B8B da 3.41 sobre papel y **3.05 sobre lienzo**, que es el fondo
       exigente. Sigue siendo un filete de 1 px: no se agregó relleno, sombra
       ni radio. */
    --color-input: 139 139 139;       /* borde de campos (1.4.11)            #8B8B8B */
    --color-overlay: 0 0 0;           /* scrim de modales/drawers (con opacidad) — NO invierte */

    /* Feedback semántico — funcional, usado al MÍNIMO (señal, no decoración) */
    /* Los tres semánticos van un punto abajo de su valor de Tailwind: sobre
       el LIENZO, `warning` daba 4.49 y `success` 4.49 —fallan por centésimas,
       que es la peor forma de fallar porque se ve bien—. `danger` ya pasaba
       (5.79) y no se tocó. */
    --color-success: 21 126 60;       /* green-700, un punto abajo   #157E3C */
    --color-success-soft: 220 252 231;/* green-100 */
    --color-danger: 185 28 28;        /* red-700 — error (distinto del acento) */
    --color-danger-soft: 254 226 226; /* red-100  */
    --color-warning: 177 82 9;        /* amber-700, un punto abajo   #B15209 */
    --color-warning-soft: 254 243 199;/* amber-100 */

    /* ── Categóricos — NO son feedback ────────────────────────────────
       ⚠⚠ `info` y `alt` NUNCA dicen estado. Su trabajo es separar clases
       dentro de una misma lista, y sólo eso. El día que alguien pinte un
       error de violeta, la paleta vuelve a estar sobrecargada y esto no
       habrá servido de nada.

       Nacieron porque `warning` y `success` estaban haciendo de categoría
       ADEMÁS de estado, y donde hay cuatro clases se acaban: el calendario
       tuvo que inventar bordes punteados y dobles, y el clasificador de
       dinero dejó dos categorías en el mismo gris. Con éstos, los tres
       semánticos recuperan su significado sin cambiar de valor.

       Los contrastes están medidos contra los dos fondos —papel y lienzo—
       porque el lienzo es el exigente, que es la lección de los tres de
       arriba. */
    --color-info: 29 78 216;          /* blue-700    #1D4ED8 · papel 6.70 · lienzo 5.99 */
    --color-info-soft: 219 234 254;   /* blue-100    #DBEAFE · `info` encima 5.49 */
    --color-alt: 109 40 217;          /* violet-700  #6D28D9 · papel 7.10 · lienzo 6.35 */
    --color-alt-soft: 237 233 254;    /* violet-100  #EDE9FE · `alt` encima 5.98 */

    /* Forma y tipografía — radio 0 (rectangular), Inter vía next/font.
       Inter la define `next/font` en `app/layout.tsx`, con la clase en <html>.

       ⚠ El respaldo dentro del `var()` NO es adorno. Así estaba antes:

           var(--font-inter), "Helvetica Neue", …

       y `--font-inter` no la definía nadie, porque `next/font` nunca se
       importó. Un `var()` sin valor y sin respaldo no «pasa a la siguiente
       de la lista»: vuelve la declaración entera inválida en tiempo de
       cálculo, así que `--font-sans` computaba a CADENA VACÍA y las dos
       aplicaciones se veían en Times New Roman. Con el respaldo, si mañana
       alguien quita la clase de <html> se cae a Helvetica y se nota poco,
       en vez de caerse a serif y notarse en cada pantalla. */
    --radius: 0px;
    --font-sans: var(--font-inter, "Helvetica Neue"), Helvetica, Arial, sans-serif;

    /* ── Cuánto hay que dejar libre arriba al saltar a una sección ──────
       ⚠⚠ ESTO ARREGLA UN DEFECTO QUE SE SIENTE Y NO SE VE.
       Las secciones ancladas llevaban `scroll-mt-4` —16 px— y el índice
       pegajoso de la ficha ocupa mucho más: 44 px por fila de pestañas más
       su relleno, y en el teléfono además los 56 px de la barra de la
       aplicación. Con nueve secciones las pestañas se parten en DOS filas,
       así que el peor caso pasa de 150 px. Resultado: al picar «Dinero», el
       título «Dinero» aterrizaba TAPADO por las propias pestañas y uno caía
       a media sección sin saber por qué.

       El valor de aquí es sólo el respaldo, para las pantallas que no
       tienen índice. `IndiceDeSecciones` lo sobrescribe con lo que MIDE de
       su propia barra —alto real más el `top` al que se pega—, porque el
       número correcto depende de cuántas pestañas haya y de si envolvieron,
       y eso no se puede escribir a mano sin que se quede viejo.

       ⚠ La consola tenía este mismo problema a medias: allá pusieron
         `scroll-mt-20` (80 px), que alcanza para UNA fila y se queda corto
         en cuanto envuelven. */
    --salto-de-indice: 5rem;
  }

  /* Dark mode = clase .dark en <html> (toggle MANUAL, persistido). Por defecto: claro (papel).
     Ya NO sigue prefers-color-scheme del SO → la app arranca en blanco siempre. */
  :root.dark {
    color-scheme: dark;
      --color-primary: 245 245 245;     /* en oscuro, la tinta invierte */
      --color-primary-fg: 17 17 17;
      --color-accent: 255 77 77;        /* rojo más brillante para legibilidad sobre negro */
      --color-accent-fg: 17 17 17;

      --color-canvas: 10 10 10;         /* papel oscuro #0A0A0A */
      --color-surface: 23 23 23;        /* superficie    #171717 */
      --color-foreground: 245 245 245;  /* tinta clara   #F5F5F5 */
      --color-muted: 163 163 163;       /* neutral-400 */
      /* El mismo peldaño, del otro lado: 5.19 : 1 sobre la superficie
         oscura, contra los 7.11 de `muted`. En oscuro sobra margen, así que
         aquí el límite no es la norma sino que se siga leyendo como ayuda. */
      --color-muted-soft: 138 138 138;  /* #8A8A8A */
      --color-border: 38 38 38;         /* filete oscuro #262626 */
      /* ⚠ #656565, no #404040. El oscuro tenía **el mismo defecto que el
         claro** y se descubrió al medirlo: 1.73 : 1 sobre la superficie,
         contra los 3 : 1 que pide 1.4.11. Los demás tokens oscuros pasan con
         holgura —el más justo es `muted-soft` a 5.19— así que éste era el
         único, y estaba escrito «borde de campo visible». Ahora 3.08. */
      --color-input: 101 101 101;       /* borde de campo (1.4.11) #656565 */
      --color-overlay: 0 0 0;           /* scrim sigue siendo negro en oscuro (no invierte) */

      --color-success: 134 239 172;     /* green-300 */
      --color-success-soft: 5 46 22;    /* green-950 */
      --color-danger: 252 165 165;      /* red-300  */
      --color-danger-soft: 69 10 10;    /* red-950  */
      --color-warning: 252 211 77;      /* amber-300 */
      --color-warning-soft: 69 26 3;    /* amber-950 */

      /* Los categóricos invierten igual que los tres de arriba: el tono
         claro pasa a ser la tinta y el oscuro el tinte. */
      --color-info: 147 197 253;        /* blue-300   #93C5FD · sobre superficie 9.94 */
      --color-info-soft: 23 37 84;      /* blue-950   #172554 · `info` encima 8.15 */
      --color-alt: 196 181 253;         /* violet-300 #C4B5FD · sobre superficie 9.71 */
      --color-alt-soft: 46 16 101;      /* violet-950 #2E1065 · `alt` encima 8.25 */
  }

  /* Cuerpo: tinta sobre papel, leading 1.6, alineado a la izquierda (nunca justificado). */
  body {
    font-family: var(--font-sans);
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-foreground) / var(--tw-text-opacity, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
  }

  /* Datos siempre con cifras tabulares (columnas de números alineadas). */
  table { font-variant-numeric: tabular-nums; }
.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;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-14 {
  top: 3.5rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[400\] {
  z-index: 400;
}
.order-last {
  order: 9999;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-auto {
  grid-column-start: auto;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.m-3 {
  margin: 0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.-my-1 {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mb-2 {
  margin-bottom: -0.5rem;
}
.-mb-5 {
  margin-bottom: -1.25rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.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;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.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-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-72 {
  height: 18rem;
}
.h-\[22px\] {
  height: 22px;
}
.h-full {
  height: 100%;
}
.max-h-14 {
  max-height: 3.5rem;
}
.max-h-16 {
  max-height: 4rem;
}
.max-h-20 {
  max-height: 5rem;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-8 {
  max-height: 2rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-9 {
  max-height: 2.25rem;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-24 {
  min-height: 6rem;
}
.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}
.min-h-\[5\.5rem\] {
  min-height: 5.5rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-72 {
  width: 18rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[19rem\] {
  width: 19rem;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[min\(20rem\2c calc\(100vw-2rem\)\)\] {
  width: min(20rem, calc(100vw - 2rem));
}
.w-\[min\(22rem\2c calc\(100vw-2rem\)\)\] {
  width: min(22rem, calc(100vw - 2rem));
}
.w-\[min\(24rem\2c calc\(100vw-2rem\)\)\] {
  width: min(24rem, calc(100vw - 2rem));
}
.w-\[min\(26rem\2c calc\(100vw-2rem\)\)\] {
  width: min(26rem, calc(100vw - 2rem));
}
.w-\[min\(28rem\2c calc\(100vw-2rem\)\)\] {
  width: min(28rem, calc(100vw - 2rem));
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-11 {
  min-width: 2.75rem;
}
.min-w-40 {
  min-width: 10rem;
}
.min-w-48 {
  min-width: 12rem;
}
.min-w-52 {
  min-width: 13rem;
}
.min-w-56 {
  min-width: 14rem;
}
.min-w-72 {
  min-width: 18rem;
}
.min-w-\[34rem\] {
  min-width: 34rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.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-prose {
  max-width: 65ch;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[2\] {
  flex: 2;
}
.shrink-0 {
  flex-shrink: 0;
}
.basis-52 {
  flex-basis: 13rem;
}
.basis-56 {
  flex-basis: 14rem;
}
.basis-full {
  flex-basis: 100%;
}
.border-collapse {
  border-collapse: collapse;
}
.translate-x-\[0\.25rem\] {
  --tw-translate-x: 0.25rem;
  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-x-\[1\.25rem\] {
  --tw-translate-x: 1.25rem;
  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));
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.break-after-page {
  -moz-column-break-after: page;
       break-after: page;
}
.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-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.grid-cols-\[4\.5rem_7rem\] {
  grid-template-columns: 4.5rem 7rem;
}
.grid-cols-\[6rem_6rem_1fr_1fr_1fr_5rem\] {
  grid-template-columns: 6rem 6rem 1fr 1fr 1fr 5rem;
}
.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: minmax(0,1fr) auto;
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(16rem\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(16rem,1fr));
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(7rem\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(7rem,1fr));
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(9rem\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(9rem,1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-12 {
  gap: 3rem;
}
.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-9 {
  gap: 2.25rem;
}
.gap-px {
  gap: 1px;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.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-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.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-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.gap-y-7 {
  row-gap: 1.75rem;
}
.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));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-border > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: var(--radius);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-sm {
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-\[rgb\(var\(--hoja-tinta\)\)\] {
  border-color: rgb(var(--hoja-tinta));
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.border-alt {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-alt) / var(--tw-border-opacity, 1));
}
.border-alt\/40 {
  border-color: rgb(var(--color-alt) / 0.4);
}
.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-border {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}
.border-border\/60 {
  border-color: rgb(var(--color-border) / 0.6);
}
.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}
.border-danger\/40 {
  border-color: rgb(var(--color-danger) / 0.4);
}
.border-foreground {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-foreground) / var(--tw-border-opacity, 1));
}
.border-info {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-info) / var(--tw-border-opacity, 1));
}
.border-info\/40 {
  border-color: rgb(var(--color-info) / 0.4);
}
.border-input {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-input) / var(--tw-border-opacity, 1));
}
.border-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity, 1));
}
.border-success\/40 {
  border-color: rgb(var(--color-success) / 0.4);
}
.border-transparent {
  border-color: transparent;
}
.border-warning {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-warning) / var(--tw-border-opacity, 1));
}
.border-l-accent {
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.bg-\[rgb\(var\(--hoja-tinta\)\)\] {
  background-color: rgb(var(--hoja-tinta));
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent) / var(--tw-bg-opacity, 1));
}
.bg-accent\/10 {
  background-color: rgb(var(--color-accent) / 0.1);
}
.bg-accent\/5 {
  background-color: rgb(var(--color-accent) / 0.05);
}
.bg-alt\/15 {
  background-color: rgb(var(--color-alt) / 0.15);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-border {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-border) / var(--tw-bg-opacity, 1));
}
.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
}
.bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity, 1));
}
.bg-danger-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger-soft) / var(--tw-bg-opacity, 1));
}
.bg-danger\/15 {
  background-color: rgb(var(--color-danger) / 0.15);
}
.bg-foreground {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-foreground) / var(--tw-bg-opacity, 1));
}
.bg-info-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-soft) / var(--tw-bg-opacity, 1));
}
.bg-info\/15 {
  background-color: rgb(var(--color-info) / 0.15);
}
.bg-input {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-input) / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/15 {
  background-color: rgb(var(--color-muted) / 0.15);
}
.bg-overlay\/50 {
  background-color: rgb(var(--color-overlay) / 0.5);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1));
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity, 1));
}
.bg-success-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-soft) / var(--tw-bg-opacity, 1));
}
.bg-success\/15 {
  background-color: rgb(var(--color-success) / 0.15);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity, 1));
}
.bg-warning-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-soft) / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.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-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.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-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-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.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;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-sans {
  font-family: var(--font-sans);
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-ayuda {
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 400;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-body {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}
.text-h1 {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.text-h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.text-h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
}
.text-label {
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-small {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}
.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;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.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-3 {
  line-height: .75rem;
}
.leading-\[18px\] {
  line-height: 18px;
}
.leading-\[2\.4\] {
  line-height: 2.4;
}
.leading-\[2\.75\] {
  line-height: 2.75;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[rgb\(var\(--color-accent-fg\2c 255_255_255\)\)\] {
  color: rgb(var(--color-accent-fg,255 255 255));
}
.text-\[rgb\(var\(--hoja-tinta\)\)\] {
  color: rgb(var(--hoja-tinta));
}
.text-\[rgb\(var\(--hoja-tinta-fg\)\)\] {
  color: rgb(var(--hoja-tinta-fg));
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.text-alt {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alt) / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-canvas {
  --tw-text-opacity: 1;
  color: rgb(var(--color-canvas) / var(--tw-text-opacity, 1));
}
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}
.text-foreground {
  --tw-text-opacity: 1;
  color: rgb(var(--color-foreground) / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info) / var(--tw-text-opacity, 1));
}
.text-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.text-muted-soft {
  --tw-text-opacity: 1;
  color: rgb(var(--color-muted-soft) / var(--tw-text-opacity, 1));
}
.text-muted\/50 {
  color: rgb(var(--color-muted) / 0.5);
}
.text-primary-fg {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-fg) / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity, 1));
}
.text-surface {
  --tw-text-opacity: 1;
  color: rgb(var(--color-surface) / var(--tw-text-opacity, 1));
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning) / var(--tw-text-opacity, 1));
}
.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;
}
.decoration-transparent {
  text-decoration-color: transparent;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-accent {
  accent-color: rgb(var(--color-accent) / 1);
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.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-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);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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-inset {
  --tw-ring-inset: inset;
}
.ring-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent) / var(--tw-ring-opacity, 1));
}
.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);
}
.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);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  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;
}
.\[font-family\:var\(--hoja-cuerpo\)\] {
  font-family: var(--hoja-cuerpo);
}

/* =====================================================================
   EL FOCO DEL TECLADO, QUE ESTABA ANULADO EN 49 ARCHIVOS
   =====================================================================

   Medido con Tab de verdad, no leyendo clases:

       paradas de tabulador ............... 26 a 40 por pantalla
       controles SIN señal de foco ........ 2 a 5 por pantalla
       lo que reportaba el navegador ...... `solid 2px rgba(0, 0, 0, 0)`

   ⚠⚠ **`outline-none` de Tailwind NO es `outline: none`: es
   `outline: 2px solid transparent`.** Por eso el primer arnés dijo «0 sin
   señal»: comprobaba estilo y ancho, que existen, y no el COLOR, que es
   transparente. Un contorno de dos píxeles que nadie puede ver pasa
   cualquier prueba que no mire el color.

   Y quienes lo llevan son justo los que se usan con teclado: los campos de
   texto, los desplegables, el combobox (`combobox.tsx`) y el campo de fecha
   (`campo-fecha.tsx`). Lo único que quedaba era `focus:border-accent`, o
   sea **un cambio de color en un filete de 1 px**: indicador sólo de color,
   que no cumple, y que para quien no distingue rojo de gris no es nada.

   ---------------------------------------------------------------------
   POR QUÉ PESA MÁS EN ESTA APLICACIÓN QUE EN OTRA

   En un diseño suizo —esquinas rectas, filetes de 1 px, sin sombras— **el
   contorno del navegador era la única señal fuerte que había**. Quitarlo
   sin reponerlo deja la pantalla sin ninguna.

   ---------------------------------------------------------------------
   POR QUÉ VA AQUÍ ABAJO Y FUERA DE `@layer base`

   `@tailwind utilities` se expande en la línea 3 de este archivo, así que
   **todo lo que se escriba después va después de las utilidades** y gana
   por orden. Dentro de `@layer base` perdería contra `.outline-none`, que
   es exactamente lo que hay que vencer. Comprobado con el navegador, no
   deducido de la cascada.

   `:focus-visible` y no `:focus`: el ratón no tiene por qué dejar contorno.

   ---------------------------------------------------------------------
   ⚠⚠ POR DENTRO Y EN `currentColor`, Y LAS DOS COSAS SE MIDIERON

   **Primer intento: contorno POR FUERA (`outline-offset: 2px`) en color
   `foreground`.** Suena bien —cae sobre el fondo de la página, que es
   claro— y el arnés dijo «0 sin señal». Pero al preguntarle además *si
   alguien lo recorta*, salieron **25 casos en 207 paradas**: la barra
   lateral es `overflow-y-auto`, sus enlaces van a ancho completo y el
   margen hasta el borde del `aside` es **0 px**. Un contorno dibujado dos
   píxeles por fuera de un elemento pegado a un contenedor que recorta
   **no existe** — y `getComputedStyle` lo reporta igual de contento.

   Por eso va **por dentro** (`outline-offset: -2px`): dentro de la caja del
   control, nadie lo puede recortar.

   **Y el color es `currentColor`, que es lo que lo hace correcto solo.**
   Un contorno de color fijo falla en algún lado: tinta sobre un botón
   `bg-primary` es tinta sobre tinta. `currentColor` es el color del TEXTO
   del control, y el texto de un control **ya tiene que ser legible sobre su
   propio fondo** —esa es la regla que la paleta acaba de cerrar—, así que
   el contorno hereda esa garantía sin repetir la cuenta:

       campo blanco     → texto tinta   → contorno tinta     ✅
       botón `primary`  → texto papel   → contorno papel     ✅
       enlace del menú  → texto `muted` → contorno `muted`   ✅  5.66 : 1
       tema oscuro      → texto claro   → contorno claro     ✅

   `:focus-visible` y no `:focus`: el ratón no tiene por qué dejar contorno.
   ===================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* =====================================================================
   LAS ESTRELLAS DE LA ENCUESTA PÚBLICA
   =====================================================================

   Pedido de Jacobo con captura: *«que cuando se seleccione algo se marque
   de color o algo, que tengamos visual feedback»*. Y tenía razón: lo
   elegido sólo cambiaba **un filete de 1 px** a un gris apenas más oscuro,
   sobre un relleno `canvas` casi idéntico al fondo de la página. En la
   captura, el «2» elegido y el «3» sin elegir se distinguen mirando fijo.

   ---------------------------------------------------------------------
   SE RELLENAN HASTA LA ELEGIDA, NO SÓLO LA ELEGIDA

   Cinco recuadros con una estrella cada uno **no son cinco opciones: son
   una escala**, y todo el mundo ha usado antes una donde elegir 4 enciende
   cuatro. Marcar sólo el cuarto obliga a leer el numerito para saber qué se
   eligió, que es justo el trabajo que la escala venía a ahorrar.

   ---------------------------------------------------------------------
   POR QUÉ EN CSS Y NO CON ESTADO DE REACT

   Porque **la encuesta tiene que funcionar como formulario a secas**. Es la
   única pantalla que ve alguien de fuera, se abre desde un WhatsApp en el
   teléfono de un cliente, y los `radio` ya funcionan sin una línea de
   JavaScript. Meter estado de React para pintar el relleno haría que el
   dibujo dependa de que el paquete cargue.

   ⚠ El truco clásico de este relleno es invertir el orden del DOM con
   `row-reverse` y usar `~`. **No se usa a propósito:** invierte también el
   orden del tabulador y el que lee un lector de pantalla, que anunciaría
   «5, 4, 3, 2, 1». `:has()` hace lo mismo sin tocar el orden.

   Va aquí abajo y fuera de `@layer base` por lo mismo que el foco: las
   utilidades se expanden en la línea 3, así que sólo lo de después les
   gana.
   ===================================================================== */
.estrellas:has([value="1"]:checked) [data-estrella="1"],
.estrellas:has([value="2"]:checked) :is([data-estrella="1"], [data-estrella="2"]),
.estrellas:has([value="3"]:checked)
  :is([data-estrella="1"], [data-estrella="2"], [data-estrella="3"]),
.estrellas:has([value="4"]:checked)
  :is([data-estrella="1"], [data-estrella="2"], [data-estrella="3"], [data-estrella="4"]),
.estrellas:has([value="5"]:checked)
  :is([data-estrella="1"], [data-estrella="2"], [data-estrella="3"],
      [data-estrella="4"], [data-estrella="5"]) {
  border-color: rgb(var(--color-accent));
  background-color: rgb(var(--color-accent));
  color: rgb(var(--color-accent-fg));
}

/* La elegida, además, con un filete más grueso: dentro de la banda
   encendida hay que poder ver DÓNDE se paró, no sólo hasta dónde llega. */
.estrellas [value="1"]:checked + *,
.estrellas [value="2"]:checked + *,
.estrellas [value="3"]:checked + *,
.estrellas [value="4"]:checked + *,
.estrellas [value="5"]:checked + * {
  box-shadow: inset 0 0 0 2px rgb(var(--color-accent-fg));
}

/* Y la pregunta entera baja de intensidad cuando ya se contestó: con seis
   preguntas, lo que se quiere ver de un vistazo es cuáles FALTAN. */
.pregunta:has(.estrellas [value]:not([value=""]):checked) > legend {
  opacity: 0.55;
}

/* =====================================================================
   EL ANCLAJE DE UNA SECCIÓN, DEBAJO DE LA BARRA Y NO DETRÁS DE ELLA
   =====================================================================
   Va aquí abajo y fuera de `@layer base` por lo mismo que el foco: tiene
   que ganarle a las utilidades `scroll-mt-*` que puedan quedar sueltas en
   una pantalla, y dentro de la capa perdería por orden.

   Se usa en cada bloque que el índice enumera, en lugar de un
   `scroll-mt-<n>` escrito a mano: el número correcto lo mide la propia
   barra en `--salto-de-indice`, así que un tab de más no lo deja viejo.
   ===================================================================== */
.ancla-de-seccion {
  scroll-margin-top: var(--salto-de-indice, 5rem);
}
.marker\:content-\[\'\'\] *::marker {
  --tw-content: '';
  content: var(--tw-content);
}
.marker\:content-\[\'\'\]::marker {
  --tw-content: '';
  content: var(--tw-content);
}
.before\:block::before {
  content: var(--tw-content);
  display: block;
}
.before\:h-3\.5::before {
  content: var(--tw-content);
  height: 0.875rem;
}
.before\:h-6::before {
  content: var(--tw-content);
  height: 1.5rem;
}
.before\:w-1::before {
  content: var(--tw-content);
  width: 0.25rem;
}
.before\:w-1\.5::before {
  content: var(--tw-content);
  width: 0.375rem;
}
.before\:bg-accent::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent) / var(--tw-bg-opacity, 1));
}
.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.focus-within\:border-accent:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.hover\:border-accent:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.hover\:border-border:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border) / var(--tw-border-opacity, 1));
}
.hover\:border-danger:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}
.hover\:border-foreground:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-foreground) / var(--tw-border-opacity, 1));
}
.hover\:bg-accent\/20:hover {
  background-color: rgb(var(--color-accent) / 0.2);
}
.hover\:bg-accent\/5:hover {
  background-color: rgb(var(--color-accent) / 0.05);
}
.hover\:bg-canvas:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.hover\:bg-warning\/5:hover {
  background-color: rgb(var(--color-warning) / 0.05);
}
.hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.hover\:text-danger:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-foreground) / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:decoration-current:hover {
  text-decoration-color: currentColor;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  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-accent:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.focus\:border-foreground:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-foreground) / var(--tw-border-opacity, 1));
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.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;
}
.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}
.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));
}
.peer:focus-visible ~ .peer-focus-visible\:border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-accent) / var(--tw-border-opacity, 1));
}
.peer:focus-visible ~ .peer-focus-visible\:outline {
  outline-style: solid;
}
.peer:focus-visible ~ .peer-focus-visible\:outline-2 {
  outline-width: 2px;
}
.peer:focus-visible ~ .peer-focus-visible\:-outline-offset-2 {
  outline-offset: -2px;
}
.peer:focus-visible ~ .peer-focus-visible\:outline-foreground {
  outline-color: rgb(var(--color-foreground) / 1);
}
.peer:focus-visible ~ .peer-focus-visible\: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);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-accent {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent) / var(--tw-ring-opacity, 1));
}
@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;
  }
}
@media (min-width: 640px) {

  .sm\: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;
  }

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

  .sm\:col-start-auto {
    grid-column-start: auto;
  }

  .sm\:row-start-auto {
    grid-row-start: auto;
  }

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

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

  .sm\:block {
    display: block;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:contents {
    display: contents;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

  .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-\[1fr_6rem_7rem_6rem\] {
    grid-template-columns: 1fr 6rem 7rem 6rem;
  }

  .sm\:grid-cols-\[1fr_7rem_6rem_7rem\] {
    grid-template-columns: 1fr 7rem 6rem 7rem;
  }

  .sm\:grid-cols-\[1fr_7rem_7rem\] {
    grid-template-columns: 1fr 7rem 7rem;
  }

  .sm\:grid-cols-\[1fr_7rem_7rem_7rem\] {
    grid-template-columns: 1fr 7rem 7rem 7rem;
  }

  .sm\:grid-cols-\[1fr_7rem_7rem_8rem\] {
    grid-template-columns: 1fr 7rem 7rem 8rem;
  }

  .sm\:grid-cols-\[1fr_8rem_7rem\] {
    grid-template-columns: 1fr 8rem 7rem;
  }

  .sm\:grid-cols-\[1fr_8rem_9rem\] {
    grid-template-columns: 1fr 8rem 9rem;
  }

  .sm\:grid-cols-\[1fr_9rem_8rem\] {
    grid-template-columns: 1fr 9rem 8rem;
  }

  .sm\:grid-cols-\[6rem_6rem_1fr_1fr_1fr_5rem\] {
    grid-template-columns: 6rem 6rem 1fr 1fr 1fr 5rem;
  }

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

  .sm\:grid-cols-\[6rem_minmax\(0\2c 1fr\)_7rem_8rem_10rem_13rem\] {
    grid-template-columns: 6rem minmax(0,1fr) 7rem 8rem 10rem 13rem;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_11rem_8rem_8rem\] {
    grid-template-columns: minmax(0,1fr) 11rem 8rem 8rem;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_7rem_6rem_9rem\] {
    grid-template-columns: minmax(0,1fr) 7rem 6rem 9rem;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_9rem_7rem\] {
    grid-template-columns: minmax(0,1fr) 9rem 7rem;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

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

  .sm\:grid-cols-\[minmax\(0\2c 24rem\)_8rem_7rem\] {
    grid-template-columns: minmax(0,24rem) 8rem 7rem;
  }

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

  .sm\:items-start {
    align-items: flex-start;
  }

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

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

  .sm\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  .sm\:p-3 {
    padding: 0.75rem;
  }

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

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

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

  .sm\:text-body {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .sm\:text-foreground {
    --tw-text-opacity: 1;
    color: rgb(var(--color-foreground) / var(--tw-text-opacity, 1));
  }
}
@media (min-width: 768px) {

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-\[1fr_10rem_7rem_7rem_8rem\] {
    grid-template-columns: 1fr 10rem 7rem 7rem 8rem;
  }

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

  .md\:grid-cols-\[minmax\(0\2c 24rem\)_minmax\(0\2c 12rem\)_8rem_7rem\] {
    grid-template-columns: minmax(0,24rem) minmax(0,12rem) 8rem 7rem;
  }

  .md\:grid-cols-\[minmax\(11rem\2c 0\.9fr\)_minmax\(0\2c 1\.6fr\)_11rem_8rem_8rem\] {
    grid-template-columns: minmax(11rem,0.9fr) minmax(0,1.6fr) 11rem 8rem 8rem;
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .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-\[1fr_6rem_7rem_8rem_7rem\] {
    grid-template-columns: 1fr 6rem 7rem 8rem 7rem;
  }

  .lg\:grid-cols-\[1fr_8rem_7rem_7rem_6rem_7rem\] {
    grid-template-columns: 1fr 8rem 7rem 7rem 6rem 7rem;
  }

  .lg\:grid-cols-\[1fr_8rem_8rem_7rem_5rem\] {
    grid-template-columns: 1fr 8rem 8rem 7rem 5rem;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_6rem_5rem_8rem_8rem_10rem\] {
    grid-template-columns: minmax(0,1fr) 6rem 5rem 8rem 8rem 10rem;
  }

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

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

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:overflow-y-auto {
    overflow-y: auto;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

  .lg\:text-right {
    text-align: right;
  }
}
@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

  .xl\:grid-cols-\[6rem_minmax\(0\2c 1fr\)_7rem_8rem_5rem_10rem_13rem\] {
    grid-template-columns: 6rem minmax(0,1fr) 7rem 8rem 5rem 10rem 13rem;
  }
}
@media print {

  .print\:mb-0 {
    margin-bottom: 0px;
  }

  .print\:hidden {
    display: none;
  }

  .print\:min-h-screen {
    min-height: 100vh;
  }

  .print\:break-inside-avoid {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }

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

  .print\:p-0 {
    padding: 0px;
  }
}
.\[\&_dt\]\:\[font-family\:var\(--hoja-titulos\)\] dt {
  font-family: var(--hoja-titulos);
}
.\[\&_th\]\:\[font-family\:var\(--hoja-titulos\)\] th {
  font-family: var(--hoja-titulos);
}