*, ::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: Manrope, system-ui, -apple-system, Segoe 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: 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-canvas: 248 250 252;
  /* slate-50  */
  --color-surface: 255 255 255;
  --color-surface-hover: 248 250 252;
  --color-content: 15 23 42;
  /* slate-900 */
  --color-content-muted: 71 85 105;
  /* slate-600 */
  --color-content-subtle: 100 116 139;
  /* slate-500 */
  --color-line: 226 232 240;
  /* slate-200 */
  --color-line-strong: 203 213 225;
  /* slate-300 */
  /* Azul corporativo: mismo tono en claro y oscuro (no se invierte a
       neutro) — una marca reconocible tiene que seguir pareciendo ella
       misma en los dos temas, no convertirse en gris. */
  --color-brand: 37 99 235;
  /* blue-600 */
  --color-brand-hover: 29 78 216;
  /* blue-700 */
  --color-on-brand: 255 255 255;
  --color-success: 5 150 105;
  /* emerald-600 */
  --color-success-bg: 236 253 245;
  --color-warning: 180 83 9;
  /* amber-700, 4.5:1 sobre su fondo */
  --color-warning-bg: 255 251 235;
  --color-danger: 220 38 38;
  /* red-600 */
  --color-danger-bg: 254 242 242;
  --color-info: 51 65 85;
  /* slate-700 */
  --color-info-bg: 248 250 252;
  /* Insignias "tag sólido": fondo lleno + texto blanco, así que necesitan
       un tono más oscuro que --color-success/warning/danger (esos están
       calibrados para texto sobre su propio *-bg claro, no para ser fondo
       ellos mismos). Mismo valor en claro y oscuro — un chip de color se lee
       bien sobre cualquier canvas, no hace falta invertirlo. Los cuatro
       pasan 4.5:1 con texto blanco (ver cálculo de contraste). */
  --color-success-solid: 4 120 87;
  /* emerald-700 */
  --color-warning-solid: 180 83 9;
  /* amber-700 = --color-warning */
  --color-danger-solid: 220 38 38;
  /* red-600 = --color-danger */
  --color-neutral-solid: 71 85 105;
  /* slate-600 */
  /* Acentos exclusivos de la landing pública (templates/marketing/inicio.html):
       mismo azul --color-brand del panel interno (antes era un verde propio
       de la landing) — la marca es un solo azul en toda la app, no dos
       identidades separadas. El segundo tono es un gris slate neutro para
       detalles puntuales (indicador de la timeline, segundo blob del hero),
       nunca cromático — el azul manda como único color de acción. */
  --color-landing-accent: 37 99 235;
  /* blue-600, = --color-brand */
  --color-landing-accent-hover: 29 78 216;
  /* blue-700 */
  --color-landing-warm: 71 85 105;
  /* slate-600 */
}

/* El toggle del usuario manda: data-theme gana sobre la preferencia del SO. */

:root[data-theme="dark"] {
  --color-canvas: 2 6 23;
  /* slate-950 */
  --color-surface: 15 23 42;
  /* slate-900 */
  --color-surface-hover: 30 41 59;
  /* slate-800 */
  --color-content: 248 250 252;
  --color-content-muted: 148 163 184;
  /* slate-400 */
  --color-content-subtle: 100 116 139;
  --color-line: 51 65 85;
  /* slate-700 */
  --color-line-strong: 71 85 105;
  /* --color-brand/-hover/on-brand no se redefinen acá a propósito: el azul
       corporativo se declara una sola vez en :root y queda igual en los dos
       temas (ver comentario ahí). */
  /* En oscuro se usan tonos más claros: los de modo claro no alcanzan 4.5:1
       sobre un fondo oscuro. */
  --color-success: 52 211 153;
  --color-success-bg: 6 45 38;
  --color-warning: 251 191 36;
  --color-warning-bg: 59 41 6;
  --color-danger: 248 113 113;
  --color-danger-bg: 60 16 16;
  --color-info: 148 163 184;
  --color-info-bg: 30 41 59;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: 2 6 23;
    --color-surface: 15 23 42;
    --color-surface-hover: 30 41 59;
    --color-content: 248 250 252;
    --color-content-muted: 148 163 184;
    --color-content-subtle: 100 116 139;
    --color-line: 51 65 85;
    --color-line-strong: 71 85 105;
    --color-success: 52 211 153;
    --color-success-bg: 6 45 38;
    --color-warning: 251 191 36;
    --color-warning-bg: 59 41 6;
    --color-danger: 248 113 113;
    --color-danger-bg: 60 16 16;
    --color-info: 148 163 184;
    --color-info-bg: 30 41 59;
  }
}

:root[data-theme="dark"] {
  /* Más claro que en modo día — el blue-600 de arriba no llega a 4.5:1
       sobre --color-canvas oscuro. */
  --color-landing-accent: 96 165 250;
  /* blue-400 */
  --color-landing-accent-hover: 147 197 253;
  /* blue-300 */
  --color-landing-warm: 148 163 184;
  /* slate-400 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-landing-accent: 96 165 250;
    --color-landing-accent-hover: 147 197 253;
    --color-landing-warm: 148 163 184;
  }
}

html {
  scroll-behavior: smooth;
  /* Elimina el retardo de 300ms al tocar en móvil. */
  touch-action: manipulation;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chart.js dibuja el <canvas> con sus atributos width/height intrínsecos
     (el bitmap real); Tailwind Preflight normaliza img/svg/video a max-width:
     100% pero no canvas, así que sin esto un gráfico angosto puede quedar más
     ancho que su tarjeta contenedora en el primer render antes de que el
     ResizeObserver de Chart.js lo reajuste. */

canvas {
  max-width: 100%;
}

/* El foco visible nunca se quita: sin él, la navegación por teclado se
     vuelve imposible de seguir. */

:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-color: rgb(var(--color-brand) / 0.4);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: rgb(var(--color-canvas) / 1);
}

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

/* Botones ------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}

.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-on-brand) / var(--tw-text-opacity, 1));
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-brand-hover) / var(--tw-bg-opacity, 1));
}

.btn-secondary {
  display: inline-flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}

.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}

.btn-danger {
  display: inline-flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}

.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-ghost {
  display: inline-flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  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;
}

.btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-ghost {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
}

.btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.btn-sm {
  min-height: 2.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Formularios --------------------------------------------------------- */

.form-label {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.form-input {
  min-height: 2.75rem;
  width: 100%;
  border-radius: 0.625rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-strong) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
  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;
}

.form-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
}

.form-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
}

.form-input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-brand) / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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);
  --tw-ring-color: rgb(var(--color-brand) / 0.2);
}

.form-input:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
}

.form-error {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.form-help {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
}

/* Ítem seleccionable (checkbox de área completa) -----------------------
   *
   * Para listas donde se marcan varios elementos con el pulgar: cuotas a
   * imputar en un pago, y cualquier selección múltiple futura.
   *
   * El área táctil es TODA la tarjeta, no el checkbox: un input nativo mide
   * ~16px, muy por debajo de los 44px mínimos, y en una lista de cuotas
   * apiladas obliga a apuntar a un cuadradito entre montos. Envolviendo el
   * input en un <label> con toda la fila adentro, el objetivo pasa de 16px a
   * la tarjeta entera sin JS ni handlers.
   *
   * El estado marcado se comunica por borde + fondo + el check, nunca por
   * color solo: en una lista larga hay que poder ver de un vistazo cuáles
   * están seleccionadas.
   */

.select-card {
  position: relative;
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  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;
}

.select-card:focus-within {
  --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);
  --tw-ring-color: rgb(var(--color-brand) / 0.3);
}

.select-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}

.select-card:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-brand) / var(--tw-border-opacity, 1));
  background-color: rgb(var(--color-brand) / 0.05);
}

.select-card:hover:has(:checked) {
  background-color: rgb(var(--color-brand) / 0.1);
}

/* Caja del check, dibujada a mano: el input nativo no se puede agrandar de
     forma consistente entre navegadores. El input real queda invisible pero
     presente (sr-only), así el label, el foco por teclado y el envío del
     formulario siguen funcionando sin JS. */

.select-card-box {
  margin-top: 0.125rem;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-strong) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  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;
}

.select-card:has(:checked) .select-card-box {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-brand) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
}

/* El tilde solo aparece cuando está marcada. */

.select-card-box svg {
  visibility: hidden;
  width: 1rem;
  height: 1rem;
}

.select-card:has(:checked) .select-card-box svg {
  visibility: visible;
}

/* Superficies --------------------------------------------------------- */

.card {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --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);
}

/* Tablas -------------------------------------------------------------- */

.table-wrap {
  /* La tabla scrollea dentro de su contenedor; el body nunca lo hace.
       Por debajo de `sm` no debería hacer falta: .table se convierte en
       tarjetas apiladas (ver más abajo) y el overflow-x deja de activarse. */
  overflow-x: auto;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.table {
  min-width: 100%;
}

.table > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-divide-opacity, 1));
}

/* :where() anula la especificidad del selector compuesto (thead th) a 0,
     así una utilidad de una sola clase (.text-right, .num) siempre puede
     sobreescribir el align por defecto sin pelear con la cascada — Tailwind
     compila @layer a CSS plano (no a @layer nativo), así que sin esto ganaba
     el selector más específico sin importar el orden de aparición. */

:where(.table thead th) {
  text-align: left;
}

.table thead th {
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
}

.table tbody tr {
  border-bottom-width: 1px;
  border-color: rgb(var(--color-line) / 0.6);
  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;
}

.table tbody tr:last-child {
  border-width: 0px;
}

.table tbody tr:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}

.table td {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

/* Alinea las columnas de dinero: sin esto los montos no se pueden comparar
     de un vistazo. */

.num {
  text-align: right;
  --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);
}

/* Tablas → tarjetas en móvil ------------------------------------------
   *
   * Por debajo de `sm` (640px) ninguna tabla del sistema se lee arrastrando
   * el dedo: el <thead> se oculta, cada <tr> pasa a ser una tarjeta y cada
   * <td> muestra su propia etiqueta (vía `data-label`, leído con `attr()`
   * en el ::before — sin JS, sin duplicar el dato en el DOM). Las celdas de
   * acciones (botones, links) no necesitan etiqueta: se las marca con
   * `.table td[data-label=""]` o simplemente sin atributo, y el ::before no
   * se genera porque `content: attr(data-label)` en un atributo ausente
   * produce cadena vacía.
   *
   * Cualquier tabla que use .table/.table-wrap adopta esto automáticamente;
   * el único trabajo por tabla es anotar cada <td> con data-label="...".
   */

@media (max-width: 639.98px) {
  .table-wrap {
    overflow-x: visible;
    border-style: none;
    background-color: transparent;
  }

  .table {
    display: block;
  }

  .table > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .table tbody {
    display: block;
  }

  .table tbody tr {
    margin-bottom: 0.75rem;
    display: block;
  }

  .table tbody tr > :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));
  }

  .table tbody tr {
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    --tw-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
    --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);
  }

  .table tbody tr:last-child {
    margin-bottom: 0px;
  }

  .table tbody tr:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  }

  /* Filas de detalle plegado (ver fee_rows.html): sin margen ni tarjeta
       propia, quedan visualmente "dentro" de la fila resumen que las precede. */

  .table tbody tr:has(td:empty:first-child) {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    padding-top: 0.5rem;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    white-space: normal;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    text-align: right;
  }

  .table td:empty {
    display: none;
  }

  .table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    --tw-text-opacity: 1;
    color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
  }

  /* Celda sin etiqueta (acciones, "Ver", "Editar"…): ocupa todo el ancho,
       sus botones quedan alineados a la derecha por el padre `.table td`. */

  .table td:not([data-label]) {
    margin-top: 0.5rem;
    justify-content: flex-end;
    border-top-width: 1px;
    border-color: rgb(var(--color-line) / 0.6);
    padding-top: 0.5rem;
  }

  /* Celda "título" de la tarjeta (nombre, alumno, club…): sin la etiqueta
       al lado — hace de encabezado visual, en columna y alineada a la
       izquierda, no en fila como el resto de los pares etiqueta/valor. */

  .table td.table-cell-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    border-bottom-width: 1px;
    border-color: rgb(var(--color-line) / 0.6);
    padding-bottom: 0.5rem;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .table td.table-cell-title::before {
    content: none;
  }
}

/* Insignias de estado ---------------------------------------------------
   * Tag sólido: fondo lleno + texto blanco + esquinas casi rectas, en vez
   * del pill con fondo pastel de antes. Usa los tokens *-solid (más oscuros
   * que --color-success/warning/danger: esos están calibrados para texto
   * sobre su propio fondo claro, no para ser fondo ellos mismos).
   */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.badge-success {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-solid) / var(--tw-bg-opacity, 1));
}

.badge-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-solid) / var(--tw-bg-opacity, 1));
}

.badge-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger-solid) / var(--tw-bg-opacity, 1));
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.125rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-neutral-solid) / var(--tw-bg-opacity, 1));
}

/* Navegación ---------------------------------------------------------- */

.nav-item {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
  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;
}

.nav-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

/* El elemento activo debe distinguirse: sin señal visual, el usuario pierde
     de vista dónde está. */

.nav-item-active {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
  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;
}

.nav-item-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.nav-item-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

/* Navegación superior (escritorio) -------------------------------------
   * Ítems de la franja horizontal: grupos con desplegable y enlaces sueltos
   * (p. ej. "Inicio") conviven en la misma fila.
   */

.nav-item-top {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
  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;
}

.nav-item-top:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.nav-item-top-active {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
  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;
}

.nav-item-top-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.nav-item-top-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

/* Tarjetas interactivas -------------------------------------------------
   *
   * Variante de `.card` para elementos clicables (KPIs, accesos rápidos):
   * el hover y el foco deben sentirse "premium" sin exagerar la animación.
   */

.card-interactive {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.card-interactive:focus-within {
  --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);
  --tw-ring-color: rgb(var(--color-brand) / 0.2);
}

.card-interactive: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));
  --tw-shadow: 0 10px 24px -8px rgb(15 23 42 / 0.18);
  --tw-shadow-colored: 0 10px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* KPIs ------------------------------------------------------------------
   * El valor nunca cambia de tamaño de fuente entre KPIs, aunque el número
   * sea largo: la grilla se vería despareja si "12" y "150.000" no pesaran
   * visualmente igual.
   */

.kpi-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --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);
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.kpi-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
}

/* La tendencia usa los mismos tokens de estado que el resto del sistema:
     ningún color nuevo, solo badges reutilizados con semántica de "sube/baja". */

/* Tooltip del sidebar colapsado ------------------------------------------
   * Aparece con :hover Y con :focus-visible del enlace que lo precede (ver
   * base_panel.html) — un usuario de teclado también necesita saber a dónde
   * lleva un ícono sin etiqueta visible.
   */

/* Carga --------------------------------------------------------------- */

/* Indicador de petición HTMX en curso. */

.htmx-indicator {
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Overlay de carga a pantalla completa: además de opacidad, controla los
     clics — sin esto, aunque invisible, seguiría tapando el panel entero. */

#carga-global {
  pointer-events: none;
}

/* Navegación inferior (móvil) ------------------------------------------
   *
   * Un ítem por rubro de la barra inferior. min-h-touch ya da los 44px de
   * alto; el ancho lo resuelve flex-1 repartiendo el espacio disponible.
   * El estado activo se distingue por color y por el ícono relleno, no
   * solo por color: alguien con daltonismo también debe poder ubicarse.
   */

/* Hero claro de la landing pública (templates/partials/hero_floating.html)
     ------------------------------------------------------------------------
     Dos columnas: título + copy a la izquierda, mockup del panel
     (hero-dashboard.png, PNG con transparencia) flotando a la derecha
     sobre un blob de color decorativo. Mismo fondo claro que el resto
     de la landing — no es una sección de identidad propia como la
     versión anterior con foto full-bleed. */

.hero-float {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
}

/* Fondo ambiental "aurora": dos blobs de color grandes y desenfocados
     que flotan muy lento en direcciones cruzadas — puramente decorativo
     (aria-hidden, detrás del contenido). Se probaron gradiente mesh,
     grilla de puntos, rayado diagonal, grid técnico y partículas antes
     de llegar acá; ninguno convenció tanto como este. */

.hero-float__bg {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 0;
  overflow: hidden;
  filter: blur(60px);
}

.hero-float__bg::before,
  .hero-float__bg::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
}

/* Blob azul más tenue que el cálido: a igual opacidad el azul de
     marca se percibía más intenso/saturado que el cálido. */

.hero-float__bg::before {
  left: -10%;
  top: -20%;
  width: 55%;
  height: 70%;
  background: rgb(var(--color-landing-accent));
  opacity: 0.2;
  animation: hero-bg-aurora-a 18s ease-in-out infinite;
}

.hero-float__bg::after {
  right: -15%;
  bottom: -25%;
  width: 60%;
  height: 75%;
  background: rgb(var(--color-landing-warm));
  opacity: 0.35;
  animation: hero-bg-aurora-b 22s ease-in-out infinite;
}

:root[data-theme="dark"] .hero-float__bg::before {
  opacity: 0.25;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-float__bg::before {
    opacity: 0.25;
  }
}

@keyframes hero-bg-aurora-a {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(8%, 10%) scale(1.15);
  }
}

@keyframes hero-bg-aurora-b {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-6%, -8%) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float__bg::before,
    .hero-float__bg::after {
    animation: none;
  }
}

.hero-float__text {
  position: relative;
  z-index: 10;
  max-width: 24rem;
  text-align: left;
}

@media (min-width: 1024px) {
  .hero-float__text {
    max-width: 28rem;
  }
}

/* Palabra rotante del título ("academia de fútbol / tenis / …"):
     fade + slide vertical, la saliente sube y la entrante viene de
     abajo — mismo sentido de movimiento en las dos mitades del ciclo,
     nunca "entra de un lado, sale del otro". La palabra activa vive en
     flujo normal (inline-block) para que el contenedor mida solo su
     ancho real — así el punto final, fuera de .hero-rotate, queda
     siempre pegado a la palabra actual y no al hueco de la más larga
     del ciclo (p.ej. "handball"). Solo la saliente se saca del flujo
     (absolute) mientras se desvanece, para no estirar el contenedor
     durante el cruce de las dos. */

.hero-rotate {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* Distintivo minimalista: peso liviano (regular) contra el
     font-extrabold del resto del título — mismo negro, sin color de
     marca, sin subrayado ni caja. Sin height fijo en .hero-rotate: un
     alto arbitrario (probado 1.2em, 1.4em) obliga al inline-block a
     calcular su propio "strut"/línea base interna en vez de heredar
     el baseline real de la palabra activa — con Space Grotesk el
     desajuste entre ese strut y el baseline del texto plano vecino
     ("de") desalineaba visualmente la línea completa. Sin height fijo,
     el contenedor mide exactamente el alto de la palabra activa (la
     única en flujo normal) y su baseline coincide con el del resto
     del texto sin ajustes manuales. Por defecto (ni activa ni
     saliente) la palabra vive fuera del flujo — solo la activa es
     position: static y por lo tanto la única que aporta alto/ancho a
     .hero-rotate. */

.hero-rotate__word {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  font-weight: 400;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 350ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 350ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-rotate__word[data-state="active"] {
  position: static;
  opacity: 1;
  transform: translateY(0);
}

.hero-rotate__word[data-state="leaving"] {
  opacity: 0;
  transform: translateY(-0.6em);
  transition-duration: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotate__word {
    transform: none;
    transition: opacity 250ms ease;
  }

  .hero-rotate__word[data-state="leaving"] {
    transition-duration: 200ms;
  }
}

/* Grid de dos columnas: texto y arte lado a lado desde lg; apilados
     (texto arriba) en mobile, donde la imagen flotante pasa a ser un
     acompañamiento visual debajo del copy en vez de competir por
     espacio horizontal. */

.hero-float__inner {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .hero-float__inner {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .hero-float__inner {
    grid-template-columns: 0.6fr 1.65fr;
    align-items: center;
    gap: 0.5rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) {
  .hero-float__inner {
    max-width: 92rem;
  }
}

/* Columna derecha: blob decorativo detrás del mockup + la imagen
     flotando encima. El blob le da profundidad de color a un PNG con
     fondo transparente que si no, quedaría "pegado" al fondo claro.
     Sin max-w desde lg: la imagen (16:9) llena el ancho completo de su
     columna, que a su vez es la porción más grande del grid — así dado
     el aspect-ratio, es lo más grande que puede ser sin desbordar
     sobre el texto ni recortarse. */

.hero-float__art {
  position: relative;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  display: flex;
  width: calc(100% + 1.5rem);
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-float__art {
    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem);
  }
}

@media (min-width: 1024px) {
  .hero-float__art {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: none;
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    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));
  }
}

.hero-float__blob {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: 95%;
  border-radius: 9999px;
  background: radial-gradient(
      circle,
      rgb(var(--color-landing-accent) / 0.22),
      rgb(var(--color-landing-accent) / 0.06) 60%,
      transparent 75%
    );
  filter: blur(8px);
}

.hero-float__shot {
  position: relative;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: hero-shot-float 5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hero-shot-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float__shot {
    animation: none;
  }
}

/* Entrada sutil al cargar: fade + slide, una sola vez — no depende del
     IntersectionObserver de .landing-reveal porque el hero siempre está
     visible desde el primer frame (above the fold). El arte entra un
     poco después que el texto (--reveal-delay) para dar sensación de
     secuencia, no de todo apareciendo a la vez. */

[data-enter] {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  animation: hero-enter 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: var(--enter-delay, 0ms);
}

[data-enter="secondary"] {
  --enter-delay: 120ms;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-enter] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.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;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.right-0 {
  right: 0px;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-20 {
  top: 5rem;
}

.top-5 {
  top: 1.25rem;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[70\] {
  z-index: 70;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.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-1 {
  margin-left: 0.25rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-auto {
  margin-left: 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-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-16 {
  margin-top: 4rem;
}

.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-9 {
  margin-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-64 {
  height: 16rem;
}

.h-9 {
  height: 2.25rem;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-96 {
  max-height: 24rem;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.min-h-\[2\.25rem\] {
  min-height: 2.25rem;
}

.min-h-\[2\.5rem\] {
  min-height: 2.5rem;
}

.min-h-full {
  min-height: 100%;
}

.min-h-touch {
  min-height: 2.75rem;
}

.w-10 {
  width: 2.5rem;
}

.w-14 {
  width: 3.5rem;
}

.w-56 {
  width: 14rem;
}

.w-60 {
  width: 15rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-\[25\%\] {
  width: 25%;
}

.w-\[30\%\] {
  width: 30%;
}

.w-\[45\%\] {
  width: 45%;
}

.w-\[70\%\] {
  width: 70%;
}

.w-\[min\(19rem\2c 85vw\)\] {
  width: min(19rem, 85vw);
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[14rem\] {
  min-width: 14rem;
}

.min-w-\[28rem\] {
  min-width: 28rem;
}

.min-w-\[4rem\] {
  min-width: 4rem;
}

.min-w-\[560px\] {
  min-width: 560px;
}

.min-w-\[7rem\] {
  min-width: 7rem;
}

.min-w-\[8rem\] {
  min-width: 8rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-\[14rem\] {
  max-width: 14rem;
}

.max-w-\[8rem\] {
  max-width: 8rem;
}

.max-w-lg {
  max-width: 32rem;
}

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

.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;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-full {
  --tw-translate-x: -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));
}

.-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-x-0 {
  --tw-translate-x: 0px;
  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-180 {
  --tw-rotate: 180deg;
  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-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));
}

.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 spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.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));
}

.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;
}

.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-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.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-y-1 {
  row-gap: 0.25rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.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-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * 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));
}

.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-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-divide-opacity, 1));
}

.divide-line\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--color-line) / 0.6);
}

.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;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.625rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-brand {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}

.border-brand\/30 {
  border-color: rgb(var(--color-brand) / 0.3);
}

.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}

.border-danger\/30 {
  border-color: rgb(var(--color-danger) / 0.3);
}

.border-danger\/40 {
  border-color: rgb(var(--color-danger) / 0.4);
}

.border-landing-accent {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-landing-accent) / var(--tw-border-opacity, 1));
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.border-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-strong) / var(--tw-border-opacity, 1));
}

.border-success {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-success) / var(--tw-border-opacity, 1));
}

.border-success\/30 {
  border-color: rgb(var(--color-success) / 0.3);
}

.border-success\/40 {
  border-color: rgb(var(--color-success) / 0.4);
}

.border-warning\/30 {
  border-color: rgb(var(--color-warning) / 0.3);
}

.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
}

.bg-brand\/5 {
  background-color: rgb(var(--color-brand) / 0.05);
}

.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-canvas) / var(--tw-bg-opacity, 1));
}

.bg-canvas\/90 {
  background-color: rgb(var(--color-canvas) / 0.9);
}

.bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity, 1));
}

.bg-danger-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger-bg) / var(--tw-bg-opacity, 1));
}

.bg-danger-bg\/40 {
  background-color: rgb(var(--color-danger-bg) / 0.4);
}

.bg-info-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-info-bg) / var(--tw-bg-opacity, 1));
}

.bg-landing-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-landing-accent) / var(--tw-bg-opacity, 1));
}

.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
}

.bg-line-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line-strong) / var(--tw-bg-opacity, 1));
}

.bg-slate-900\/50 {
  background-color: rgb(15 23 42 / 0.5);
}

.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity, 1));
}

.bg-success-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success-bg) / var(--tw-bg-opacity, 1));
}

.bg-success-bg\/40 {
  background-color: rgb(var(--color-success-bg) / 0.4);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.bg-surface-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}

.bg-surface-hover\/40 {
  background-color: rgb(var(--color-surface-hover) / 0.4);
}

.bg-surface\/80 {
  background-color: rgb(var(--color-surface) / 0.8);
}

.bg-surface\/90 {
  background-color: rgb(var(--color-surface) / 0.9);
}

.bg-surface\/95 {
  background-color: rgb(var(--color-surface) / 0.95);
}

.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning) / var(--tw-bg-opacity, 1));
}

.bg-warning-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-warning-bg) / 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;
}

.p-1 {
  padding: 0.25rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.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-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;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.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-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-1\.5 {
  padding-left: 0.375rem;
}

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

.pl-6 {
  padding-left: 1.5rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

.text-\[2rem\] {
  font-size: 2rem;
}

.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-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.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-\[1\.08\] {
  line-height: 1.08;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}

.text-content {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / var(--tw-text-opacity, 1));
}

.text-content-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-muted) / var(--tw-text-opacity, 1));
}

.text-content-subtle {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content-subtle) / var(--tw-text-opacity, 1));
}

.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.text-info {
  --tw-text-opacity: 1;
  color: rgb(var(--color-info) / var(--tw-text-opacity, 1));
}

.text-landing-accent {
  --tw-text-opacity: 1;
  color: rgb(var(--color-landing-accent) / var(--tw-text-opacity, 1));
}

.text-landing-accent\/20 {
  color: rgb(var(--color-landing-accent) / 0.2);
}

.text-on-brand {
  --tw-text-opacity: 1;
  color: rgb(var(--color-on-brand) / var(--tw-text-opacity, 1));
}

.text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / 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-content-subtle {
  text-decoration-color: rgb(var(--color-content-subtle) / 1);
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.shadow-card {
  --tw-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --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-popover {
  --tw-shadow: 0 10px 24px -8px rgb(15 23 42 / 0.18);
  --tw-shadow-colored: 0 10px 24px -8px 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 {
  outline-style: solid;
}

.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-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-line) / var(--tw-ring-opacity, 1));
}

.ring-warning\/30 {
  --tw-ring-color: rgb(var(--color-warning) / 0.3);
}

.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);
  -webkit-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);
  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);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-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);
  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 {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.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-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Respeta el notch y la barra de gestos en iOS/Android. Sin esto, la barra
     inferior queda tapada por el sistema operativo en varios teléfonos. */

/* ---------------------------------------------------------------- tokens
 *
 * Los colores se declaran como canales RGB sueltos para que Tailwind pueda
 * aplicarles opacidad (bg-surface/50). El dark mode invierte los valores; las
 * clases de los componentes no cambian.
 *
 * Paleta slate + un acento: es lo que usan Stripe, Linear y Vercel. El color
 * cromático se reserva para comunicar estado — si toda la interfaz es roja, el
 * rojo deja de significar algo.
 */

/* Manrope vendorizada como archivo estático (variable, un solo woff2 cubre
   400-800) — mismo criterio que Alpine/HTMX/Chart.js: nada de Google Fonts
   en producción, cero llamada de red externa. Es la fuente de todo el sitio
   (tailwind.config.js, fontFamily.sans). */

@font-face {
  font-family: "Manrope";

  font-style: normal;

  font-weight: 400 800;

  font-display: swap;

  src: url("../fonts/manrope-variable.938c6e8019b6.woff2") format("woff2");
}

/* Space Grotesk + Inter, vendorizadas igual que Manrope — exclusivas de
   la landing pública (templates/marketing/inicio.html): títulos en Space
   Grotesk, cuerpo de texto en Inter. No tocan fontFamily.sans, que sigue
   siendo Manrope para el resto del sitio (panel interno). */

@font-face {
  font-family: "Space Grotesk";

  font-style: normal;

  font-weight: 300 700;

  font-display: swap;

  src: url("../fonts/space-grotesk-variable.87c506d88b9f.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";

  font-style: normal;

  font-weight: 400 800;

  font-display: swap;

  src: url("../fonts/inter-variable.260c81a4759b.woff2") format("woff2");
}

/* ------------------------------------------------------- transición de página
 *
 * Se probaron dos caminos para animar la navegación ENTRE páginas y los dos
 * fallaron en la práctica, no solo en teoría:
 *   1. View Transitions nativas (`@view-transition { navigation: auto }`,
 *      sin JS): se cuelga de forma reproducible en Chromium (headed y
 *      headless) al navegar — no se pudo confirmar que fuera seguro.
 *   2. `hx-boost` de HTMX en <body>: rompe la app de verdad — el sidebar
 *      queda oculto (Alpine no reprocesa `x-cloak` a tiempo tras el swap) y
 *      los gráficos de Chart.js dejan de renderizar (su script depende de
 *      `DOMContentLoaded`, que no se vuelve a disparar en un swap AJAX).
 *
 * En su lugar: una animación de ENTRADA en <main>, con `@keyframes` puro.
 * No anima la transición entre el documento viejo y el nuevo (eso exige
 * boost o View Transitions), pero es la única opción que cumple "que la
 * animación esté SIEMPRE" sin depender de que ningún script se vuelva a
 * ejecutar: cada carga de página es un <main> nuevo, así que el keyframe
 * corre siempre, sin excepción, en cualquier navegador. La regla global de
 * `prefers-reduced-motion` de arriba (que ya pone `animation-duration:
 * 0.01ms`) la neutraliza automáticamente, no hace falta repetirla acá.
 */

main {
  animation: entrada-contenido 220ms ease-out;
}

@keyframes entrada-contenido {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------- componentes */

.first\:mt-0:first-child {
  margin-top: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:border-brand:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}

.hover\:border-brand\/50:hover {
  border-color: rgb(var(--color-brand) / 0.5);
}

.hover\:border-line-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-strong) / var(--tw-border-opacity, 1));
}

.hover\:bg-brand\/10:hover {
  background-color: rgb(var(--color-brand) / 0.1);
}

.hover\:bg-brand\/5:hover {
  background-color: rgb(var(--color-brand) / 0.05);
}

.hover\:bg-landing-accent-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-landing-accent-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity, 1));
}

.hover\:bg-warning-bg\/80:hover {
  background-color: rgb(var(--color-warning-bg) / 0.8);
}

.hover\:text-brand:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}

.hover\:text-content:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-content) / 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-danger\/80:hover {
  color: rgb(var(--color-danger) / 0.8);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.dark\:block:is([data-theme="dark"] *) {
  display: block;
}

.dark\:inline:is([data-theme="dark"] *) {
  display: inline;
}

.dark\:hidden:is([data-theme="dark"] *) {
  display: none;
}

@media not all and (min-width: 1024px) {
  .max-lg\:overflow-hidden {
    overflow: hidden;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:size-4 {
    width: 1rem;
    height: 1rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:max-h-\[85vh\] {
    max-height: 85vh;
  }

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

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

  .sm\:min-w-\[5\.5rem\] {
    min-width: 5.5rem;
  }

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

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

  .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\:flex-row {
    flex-direction: row;
  }

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

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

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

  .sm\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

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

  .sm\:border-line {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  }

  .sm\:bg-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-transparent {
    background-color: transparent;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

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

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

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

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

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

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

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

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

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

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

  .sm\:shadow-popover {
    --tw-shadow: 0 10px 24px -8px rgb(15 23 42 / 0.18);
    --tw-shadow-colored: 0 10px 24px -8px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

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

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:size-16 {
    width: 4rem;
    height: 4rem;
  }

  .lg\:size-8 {
    width: 2rem;
    height: 2rem;
  }

  .lg\:w-72 {
    width: 18rem;
  }

  .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\:gap-8 {
    gap: 2rem;
  }

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

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}