/* ============================================================================
 * Aurora Pro — global stylesheet entry point.
 *
 * This file is intentionally THIN: it imports the ordered, single-
 * responsibility partials below. The import ORDER is load-bearing — it
 * reproduces the exact source order (and therefore the exact cascade) of the
 * pre-split monolith:
 *
 *   tailwind        → the three `@tailwind base/components/utilities` directives
 *   tokens          → `@layer base` design tokens (:root / .dark)
 *   base            → `@layer base` element/body + base `@layer utilities`
 *                     helpers + global focus-visible / shadow aesthetics
 *   markdown        → `@layer components` markdown typography + KaTeX/Shiki
 *   clinical-tables → `@layer components` clinical table suite + mobile breakout
 *   animations      → keyframes, animation utilities, reduced-motion handling
 *
 * `@layer` content hoists to the matching `@tailwind` directive regardless of
 * file; plain CSS lands after the utilities layer in import order. Do not
 * reorder these imports without re-checking the cascade (see
 * analysis/PHASE_B4_CSS_DETANGLE.md). Imports MUST stay at the top of this file
 * (postcss-import requirement); layout.tsx imports only this file.
 * ========================================================================== */

/* ============================================================================
 * tailwind.css — the Tailwind layer entry.
 * Imported FIRST by globals.css. Declaring the three `@tailwind` directives in
 * the first partial (rather than in globals.css after the @import list) keeps
 * the import statements at the very top of globals.css — required by
 * postcss-import — while still emitting the base/components/utilities layers
 * ahead of every partial, so the partials' plain CSS lands after the utilities
 * layer exactly as in the pre-split monolith.
 * ========================================================================== */

*, ::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.17 | 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 */
  tab-size: 4; /* 3 */
  font-family: var(--font-sans), system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

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

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

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

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

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

abbr:where([title]) {
  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::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 {
    /*
     * Aurora Design Tokens — Light Mode
     * Refined per 2026-ai-interface-design-research.md §2.1 "Cognitive Calm"
     * Warmer off-white background in the #F7F7F5–#FAFAF9 range.
     */
    --background: 40 20% 99%;       /* Warm off-white — cognitive calm */
    --foreground: 210 14% 15%;      /* Near-black — 95% legibility */
    --card: 0 0% 100%;              /* Pure white cards for clean separation */
    --card-foreground: 210 14% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 14% 15%;
    --primary: 211 100% 50%;        /* Clarity Blue #0D6EFD */
    --primary-foreground: 0 0% 100%;
    --secondary: 40 10% 96%;        /* Warm ash — reduced visual weight */
    --secondary-foreground: 210 14% 15%;
    --muted: 40 10% 96%;
    --muted-foreground: 210 11% 46%;/* Mineral Gray — slightly darker for AAA aim */
    --accent: 211 100% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --success: 162 72% 37%;         /* Serene Teal 600 — positive / confirm (mirrors --destructive) */
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;          /* Amber — caution / file warnings */
    --warning-foreground: 30 74% 22%;
    --border: 40 8% 91%;            /* Warm subtle border */
    --input: 40 8% 94%;
    --ring: 211 100% 50%;
    --chart-1: 211 100% 50%;        /* Clarity Blue */
    --chart-2: 162 76% 47%;         /* Serene Teal */
    --chart-3: 262 48% 51%;         /* Academic Plum */
    --chart-4: 210 11% 49%;         /* Mineral Gray */
    --chart-5: 210 11% 25%;         /* Deep Charcoal */
    --radius: 0.75rem;              /* 12px — "soft corners" per research §2.1 */
    --sidebar-background: 40 20% 99%;
    --sidebar-foreground: 210 14% 15%;
    --sidebar-primary: 211 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 40 10% 96%;
    --sidebar-accent-foreground: 210 14% 15%;
    --sidebar-border: 40 8% 91%;
    --sidebar-ring: 211 100% 50%;
    /* User message bubble colors — muted neutral for minimal aesthetic */
    --user-bubble-bg: 40 8% 94%;    /* Warm ash bubble */
    --user-bubble-text: 210 14% 15%;
    --user-border: 40 8% 78%;       /* Warm ash, darker — left-border accent */

    /* Animation duration tokens — research §1.1 */
    --duration-instant: 100ms;
    --duration-quick: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Easing tokens — research §1.1 */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  }

.dark {
    /*
     * Aurora Design Tokens — Dark Mode
     * Enhanced contrast per research §6.1 accessibility benchmarks.
     */
    --background: 220 14% 10%;      /* Deep dark — less blue-tint for rest */
    --foreground: 220 14% 95%;      /* Light text */
    --card: 220 14% 13%;            /* Slightly lighter than background */
    --card-foreground: 220 14% 95%;
    --popover: 220 14% 13%;
    --popover-foreground: 220 14% 95%;
    --primary: 211 100% 65%;        /* Lighter Clarity Blue for dark mode */
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 16%;
    --secondary-foreground: 220 14% 95%;
    --muted: 220 14% 16%;
    --muted-foreground: 220 10% 62%;/* Brighter secondary text for dark */
    --accent: 211 100% 65%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 62.8% 50%;
    --destructive-foreground: 220 14% 98%;
    --success: 162 70% 48%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 56%;
    --warning-foreground: 38 90% 78%;
    --border: 220 14% 18%;
    --input: 220 14% 16%;
    --ring: 211 100% 65%;
    --chart-1: 211 100% 65%;
    --chart-2: 162 76% 55%;
    --chart-3: 262 48% 65%;
    --chart-4: 210 11% 65%;
    --chart-5: 210 17% 85%;
    --sidebar-background: 220 14% 11%;
    --sidebar-foreground: 220 14% 95%;
    --sidebar-primary: 211 100% 65%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 16%;
    --sidebar-accent-foreground: 220 14% 95%;
    --sidebar-border: 220 14% 20%;
    --sidebar-ring: 211 100% 65%;
    /* User message bubble colors — Dark Mode — subtle elevation */
    --user-bubble-bg: 220 14% 18%;
    --user-bubble-text: 220 14% 95%;
    --user-border: 220 14% 28%;     /* Raised neutral — left-border accent */

    /* Animation duration tokens (same as light) */
    --duration-instant: 100ms;
    --duration-quick: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    /* Easing tokens */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-enter: cubic-bezier(0, 0, 0.2, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  }

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Inter optical features — quiet luxury (Linear/Stripe/Raycast 2026) */
    font-feature-settings: "ss01", "cv11", "cv02", "cv03", "cv04";
    text-rendering: optimizeLegibility;
}

/* Aquí vivía la textura de papel tras `@media (prefers-reduced-data:
   * no-preference)` (CSS-17). Se borró (auditoría del shell 2026-09-30):
   * ningún navegador implementa esa consulta, así que la imagen nunca cargó, y
   * `body:not(.dark)` nunca excluía el oscuro (`.dark` va en <html>). */

.dark body {
    background-color: hsl(var(--background));
  }

/* ── Pull-to-refresh (auditoría del shell 2026-09-30, §1.6) ──────────────
   * En el shell autenticado el documento no se desplaza: el tirón hacia abajo
   * llegaba a <html> y Android recargaba la app entera. Se apaga el overscroll
   * vertical del documento SÓLO mientras el shell está montado (su raíz lleva
   * `data-aurora-shell`): la landing y las legales sí desplazan el documento.
   * Los scrollers propios (el log, el documento del canvas) no cambian. */

html:has([data-aurora-shell]),
  html:has([data-aurora-shell]) > body {
    overscroll-behavior-y: none;
  }

/* ── Táctil dentro de la sala (§1.6) ─────────────────────────────────────
   * Sin el destello gris del navegador en cada toque (se hereda), y sin zoom
   * por doble toque en los controles —que además retrasa el clic—.
   * `manipulation` sigue permitiendo el desplazamiento en X y en Y, así que no
   * toca el gesto chat↔canvas. Especificidad CERO (`:where`) a propósito:
   * cualquier utilidad explícita —el `[touch-action:pan-x]` de las filas con
   * scroll que el gesto exime— sigue ganando. */

[data-aurora-redesign] {
    -webkit-tap-highlight-color: transparent;
  }

:where([data-aurora-redesign]) :where(a, button, [role="button"], label, input, select, textarea, summary) {
    touch-action: manipulation;
  }

/* Aquí vivía una regla que «simulaba» el peso 500 de IBM Plex Sans con
   * `font-synthesis: weight` sobre `.font-medium` y `[class*="font-medium"]`.
   * Se borró (auditoría del shell 2026-09-30, §1.4): los navegadores no
   * sintetizan pesos por debajo de 600, así que los `font-medium` se pintaban
   * en 400 —y la regla además forzaba 500 en clases con variante, como
   * `md:font-medium`, aunque la variante no aplicara—. El 500 ahora es una
   * cara real que carga app/layout.tsx. */

/* ── Light clínico (héroe) ─────────────────────────────────────────────── */

[data-aurora-redesign] {
    /* IBM Plex Mono is injected by app/layout.tsx as --font-mono-pc (next/font).
       Robust fallback if the font network fails. */
    --font-mono: var(--font-mono-pc), ui-monospace, "SFMono-Regular", "IBM Plex Mono", monospace;

    --pc-paper: 210 30% 99%;       /* papel blanco frío */
    --pc-surface: 0 0% 100%;       /* superficie pura */
    --pc-surface-2: 210 24% 97%;   /* relleno sutil (hover, code) */
    --pc-ink: 216 33% 12%;         /* tinta casi negra, grafito azulado */
    --pc-ink-2: 216 15% 33%;       /* secundaria — AA en texto pequeño */
    /* ── Lectura ───────────────────────────────────────────────────────────
     * `--pc-measure` es el tope de MEDIDA: el óptimo de legibilidad son 66
     * caracteres (Bringhurst), la banda cómoda 45–75, y WCAG 1.4.8 (AAA) topa
     * en 80. El chat estaba en ~106 en escritorio, por encima del techo AAA.
     *
     * En `ch` y no en `px` a propósito: `ch` escala con el tamaño de fuente, así
     * que la medida se mantiene en ~68 caracteres en TODOS los pasos de la
     * escala fluida, sin breakpoints propios.
     *
     * El token se define aquí (ámbito compartido) pero se APLICA sólo en las
     * superficies de chat y documento — ver app/styles/markdown.css. La landing
     * estampa este mismo atributo y no debe heredar un tope de lectura. */
    --pc-measure: 68ch;
    --pc-leading-body: 1.7;
    --pc-ink-3: 216 12% 46%;       /* terciaria — AA en texto normal */
    --pc-line: 216 22% 90%;        /* hairline */
    --pc-line-2: 216 18% 82%;      /* hairline fuerte / hover */
    --pc-accent: 211 62% 38%;      /* azul-instrumento (enlaces/foco/envío/activo) */
    --pc-accent-2: 211 66% 31%;    /* acento profundo (hover) */
    --pc-accent-weak: 211 70% 95%; /* relleno de acento tenue */
    --pc-danger: 0 58% 44%;        /* error tinta */
    --pc-danger-weak: 0 70% 97%;   /* relleno de error tenue */
    --pc-agent-perspectiva: 211 64% 42%;
    --pc-agent-memoria: 170 68% 28%;
    --pc-agent-evidencia: 262 40% 50%;
    --pc-agent-sistema: 216 14% 40%;
    /* Bronce de la formulación: la acción «Actualizar formulación» tuvo el
       púrpura de evidencia prestado hasta 2026-09-30. Único matiz cálido de
       la fila, lejos del rojo de error; propuesta pendiente de Max. Contraste
       y distancia: tests/characterization-formulacion-identidad.test.ts. */
    --pc-agent-formulacion: 32 58% 32%;
    --pc-radius: 7px;

    /* Aurora boreal — LOS colores, en un solo sitio.
       Los tres usos (el borde vivo de una acción, el borde fijo del canvas y
       la aparición del paciente en la cabecera) tienen que ser el MISMO
       degradado: si se copian, divergen. Lo único que cambia entre ellos es
       si se mueve. */
    --pc-aurora-stops:
      hsl(var(--pc-accent) / 0.55),
      hsl(168 62% 52% / 0.85),
      hsl(276 58% 62% / 0.75),
      hsl(168 62% 52% / 0.85),
      hsl(var(--pc-accent) / 0.55);

    /* ── Puente shadcn → pc (auditoría del shell 2026-09-30, §1.2) ─────────
     * Los primitivos de components/ui/* pintan con los tokens de shadcn
     * (`bg-primary`, `ring-ring`, `border-input`, `rounded-md`…), y en
     * tokens.css esos tokens valen la paleta anterior al rediseño: azul
     * #007BFF, papel cálido, radio de 12 px. Nada los remapeaba aquí dentro,
     * así que cada botón, anillo de foco o tabla de la sala salía de OTRO
     * sistema visual. Aquí dentro apuntan a sus pc.
     *
     * Son referencias, no valores: el registro oscuro las sigue solo, porque
     * redefine los --pc-* en este mismo elemento. El contraste AA de cada
     * pareja, en claro y en oscuro, se calcula en
     * tests/characterization-v-cascada-puente-shadcn.test.ts. Única pareja
     * por debajo: `--muted-foreground` sobre `--muted` en oscuro (4,17:1);
     * ninguna superficie de la sala la pinta hoy.
     *
     * `--accent` es el relleno del ítem enfocado de los menús: hoy pintaba
     * azul eléctrico con texto blanco. Pasa a pc-surface-2 con tinta (15,9:1
     * en claro, 12,8:1 en oscuro). Requisito: dropdown-menu, select,
     * context-menu y menubar pintaban `focus:text-white` LITERAL —1,07:1
     * sobre pc-surface-2— y ahora usan `text-accent-foreground`, que fuera de
     * la sala sigue valiendo blanco. La prueba vigila que nadie vuelva al
     * literal mientras el puente tome `--accent`.
     *
     * Ojo con el radio: `rounded-lg/md/sm` derivan de `--radius`, así que
     * aquí dentro pasan de 12/10/8 px a 7/5/3 px. */
    --background: var(--pc-paper);
    --foreground: var(--pc-ink);
    --card: var(--pc-surface);
    --card-foreground: var(--pc-ink);
    --popover: var(--pc-surface);
    --popover-foreground: var(--pc-ink);
    --primary: var(--pc-accent);
    --primary-foreground: var(--pc-paper);
    --secondary: var(--pc-surface-2);
    --secondary-foreground: var(--pc-ink);
    --muted: var(--pc-surface-2);
    --muted-foreground: var(--pc-ink-3);
    --accent: var(--pc-surface-2);
    --accent-foreground: var(--pc-ink);
    --destructive: var(--pc-danger);
    --destructive-foreground: var(--pc-paper);
    --border: var(--pc-line);
    --input: var(--pc-line);
    --ring: var(--pc-accent);
    --radius: var(--pc-radius);

    background: hsl(var(--pc-paper));
    color: hsl(var(--pc-ink));
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Nunca sintetizar oblicuas/negritas: si una cara real no carga (Plex
       italic, p. ej.) preferimos heredar del fallback declarado (Georgia /
       system-ui, ambos con itálicas reales) en lugar de inclinar la cara
       upright. Esto evita el "Times-like" sintético que rompe la jerarquía. */
    font-synthesis-weight: none;
    font-synthesis-style: none;
  }

/* ── Dark (secundario) — atado al .dark real de next-themes ─────────────── */

.dark [data-aurora-redesign] {
    --pc-paper: 220 20% 9%;
    --pc-surface: 220 18% 12%;
    --pc-surface-2: 220 16% 16%;
    --pc-ink: 213 22% 93%;
    --pc-ink-2: 214 14% 68%;
    --pc-ink-3: 214 12% 54%;
    --pc-line: 216 16% 22%;
    --pc-line-2: 216 14% 30%;
    --pc-accent: 211 76% 64%;
    --pc-accent-2: 211 82% 72%;
    --pc-accent-weak: 211 50% 18%;
    --pc-danger: 0 66% 64%;
    --pc-danger-weak: 0 40% 18%;
    --pc-agent-perspectiva: 211 76% 62%;
    --pc-agent-memoria: 168 58% 50%;
    --pc-agent-evidencia: 262 58% 72%;
    --pc-agent-sistema: 214 14% 62%;
    /* Menos saturado que en claro: con la saturación del claro, sobre papel
       oscuro, quedaba casi encima del ámbar de aviso (`--warning`). */
    --pc-agent-formulacion: 32 36% 66%;
  }

/* ── .prose dentro de la sala (auditoría del shell 2026-09-30, §1.1) ──────
   * El plugin @tailwindcss/typography declara sus colores como literales en
   * `.prose` mismo (`--tw-prose-body: #374151`, …) y no cambian en oscuro:
   * cualquier `.prose` de la sala —el chat y el documento clínico— pintaba
   * los grises de Tailwind sobre el papel pc, también sobre el papel oscuro.
   * Va sobre el ELEMENTO `.prose`, no en la raíz: el plugin las vuelve a
   * declarar allí, y (0,2,0) le gana a su (0,1,0). Los valores siguen el
   * vestido que el renderer del chat ya escribe con `prose-*:`
   * (markdown-renderer-redesign.tsx): tinta, enlaces de acento, código sobre
   * pc-surface-2, cita con filete de acento, marcadores en tinta 3, hairlines
   * pc. Todas las variables del tema del plugin, leídas del propio plugin en
   * tests/characterization-v-cascada-prosa-del-chat.test.ts. */

[data-aurora-redesign] .prose {
    --tw-prose-body: hsl(var(--pc-ink));
    --tw-prose-headings: hsl(var(--pc-ink));
    --tw-prose-lead: hsl(var(--pc-ink-2));
    --tw-prose-links: hsl(var(--pc-accent));
    --tw-prose-bold: hsl(var(--pc-ink));
    --tw-prose-counters: hsl(var(--pc-ink-3));
    --tw-prose-bullets: hsl(var(--pc-ink-3));
    --tw-prose-hr: hsl(var(--pc-line));
    --tw-prose-quotes: hsl(var(--pc-ink-2));
    --tw-prose-quote-borders: hsl(var(--pc-accent) / 0.6);
    --tw-prose-captions: hsl(var(--pc-ink-3));
    --tw-prose-kbd: hsl(var(--pc-ink));
    --tw-prose-kbd-shadows: hsl(var(--pc-ink) / 0.1);
    --tw-prose-code: hsl(var(--pc-ink));
    --tw-prose-pre-code: hsl(var(--pc-ink));
    --tw-prose-pre-bg: hsl(var(--pc-surface-2));
    --tw-prose-th-borders: hsl(var(--pc-line));
    --tw-prose-td-borders: hsl(var(--pc-line));
  }

/* ── Foco accesible (un anillo de acento, sin glow) ────────────────────── */

/* Sin `border-radius` (auditoría del shell 2026-09-30, §1.3): el `3px` que
   * había aquí pesaba (0,2,0), le ganaba a todo `rounded-*`, y al tabular
   * cada píldora (chips, «Canvas listo», botones redondos) se volvía un
   * rectángulo. El contorno ya sigue el radio propio del elemento (Chrome 94,
   * Firefox 88, Safari 16.4). Es el ÚNICO indicador dentro de la sala:
   * base.css deja fuera de aquí sus reglas de botón y de campo
   * (tests/characterization-v-cascada-foco-unico.test.ts). */

[data-aurora-redesign] :focus-visible {
    outline: 2px solid hsl(var(--pc-accent));
    outline-offset: 2px;
  }

[data-aurora-redesign] ::selection {
    background: hsl(var(--pc-accent) / 0.18);
  }

[data-aurora-redesign][data-aurora-lenguaje-visual] {
    /* ── MAZO 1 · el amanecer austral ───────────────────────────────────────
     * El campo no es un color plano: es un HORIZONTE. `--lv-suelo` es donde
     * está la mano (tibio); `--lv-cielo` es hacia donde se mira (luminoso, con
     * la aurora dentro). Ninguno de los dos es blanco. */
    --lv-suelo:     36 46% 97.5%;
    --lv-cielo:     168 46% 97%;
    --lv-hoja:      0 0% 100%;
    --lv-hoja-2:    38 30% 96%;

    /* Tinta cálida: lee como alguien pensando, no como un sistema imprimiendo.
     * La queda va a L 40 % y no a 44: sobre el horizonte, bajo el velo teal,
     * caía a 3,9:1. Así da 5,39 sobre el suelo y 4,55 bajo el velo. */
    --lv-tinta:     200 18% 14%;
    --lv-tinta-2:   200 11% 34%;
    --lv-tinta-3:   200 9% 40%;

    /* Cantos. En un mundo de luz el borde es un cambio de luminosidad, no una
     * línea dura. */
    --lv-canto:     170 22% 90%;
    --lv-canto-2:   170 18% 80%;

    /* ── El espectro de la aurora ────────────────────────────────────────────
     * Verde de 557,7 nm (el oxígeno a baja altura: LA aurora), teal de su
     * cuerpo bajo, violeta de su borde alto. Saturados donde ACTÚAN, diluidos
     * a casi nada donde sólo iluminan. */
    --lv-aurora-verde:   164 62% 31%;
    --lv-aurora-teal:    186 62% 32%;
    --lv-aurora-violeta: 282 46% 48%;

    --lv-aurora-verde-2: 164 66% 24%;
    --lv-aurora-verde-d: 164 46% 93%;

    --lv-ambar:     32 74% 35%;
    --lv-errata:    4 64% 45%;
    --lv-errata-d:  4 58% 96%;

    /* Geometría del encuadre: dos radios y no uno. 8 px para lo que se pulsa
     * (píldoras, botones, menús, código en línea) y 22 px para lo que acoge (el
     * composer). Con 14 px en todo, una píldora de 24 px de alto se volvía una
     * cápsula. */
    --lv-radio:     8px;
    --lv-radio-2:   22px;

    /* Halo: así se ve la luz que emana. Nunca una sombra gris de caja. */
    --lv-halo:      0 18px 48px -24px hsl(var(--lv-aurora-teal) / 0.28),
                    0 2px 10px -6px hsl(200 20% 20% / 0.06);

    /* Lo que FLOTA sobre la sala —un menú, una ficha emergente, una ayuda— no
     * acoge: se apoya. Su profundidad es una sombra corta en la tinta de la
     * casa, nunca el halo teal (que es de lo que acoge) ni el gris neutro del
     * molde. Y el VELO que aquieta la sala detrás de un diálogo o un cajón es
     * esa misma tinta muy diluida, no el negro al 80 % de shadcn: un diálogo en
     * una sala de consulta baja la luz, no apaga la habitación. Tibia y no
     * fría: con el azul de la tinta, al 24 %, el suelo quedaba en un gris
     * neutro sobre toda la sala (revisión de cierre, 2026-10-02). */
    --lv-sombra-flotante: 0 16px 40px -18px hsl(200 30% 16% / 0.24),
                          0 3px 10px -4px hsl(200 30% 16% / 0.10);
    --lv-velo:      30 20% 20% / 0.18;

    /* ── MAZO 2 · puente `pc` ─────────────────────────────────────────────── */
    --pc-paper:              var(--lv-suelo);
    --pc-surface:            var(--lv-hoja);
    --pc-surface-2:          var(--lv-hoja-2);
    --pc-ink:                var(--lv-tinta);
    --pc-ink-2:              var(--lv-tinta-2);
    --pc-ink-3:              var(--lv-tinta-3);
    --pc-line:               var(--lv-canto);
    --pc-line-2:             var(--lv-canto-2);
    --pc-accent:             var(--lv-aurora-verde);
    --pc-accent-2:           var(--lv-aurora-verde-2);
    --pc-accent-weak:        var(--lv-aurora-verde-d);
    --pc-danger:             var(--lv-errata);
    --pc-danger-weak:        var(--lv-errata-d);

    /* Los matices de las acciones son LUCES DE LA MISMA AURORA, y cada una la
     * suya. Corregido el 2026-10-01 tras verlo en producción: el puente mandaba
     * memoria al ámbar, así que «Documentar sesión» salía en el MISMO tono que
     * «Actualizar formulación» (32°, que se quedó sin puentear con su bronce
     * viejo), y todo lo que dice «esto queda escrito» —el punto del canvas, la
     * confirmación de guardar en la ficha, el BIRP— se pintaba con el color de
     * un aviso. Memoria era el teal hondo de lo que se guarda: aquí es el verde
     * de la aurora. La formulación es el único matiz cálido, el del suelo del
     * caso, y ahora sale del mazo. Los cinco se miden distintos entre sí en
     * characterization-lenguaje-visual. */
    --pc-agent-perspectiva:  var(--lv-aurora-teal);
    --pc-agent-memoria:      var(--lv-aurora-verde);
    --pc-agent-evidencia:    var(--lv-aurora-violeta);
    --pc-agent-sistema:      var(--lv-tinta-3);
    --pc-agent-formulacion:  var(--lv-ambar);

    --pc-radius:             var(--lv-radio);

    /* `--pc-measure` y `--pc-leading-body` NO se tocan: son decisiones de
     * legibilidad (WCAG 1.4.8, banda de Bringhurst), no de estilo. */

    --pc-aurora-stops:
      hsl(var(--lv-aurora-teal) / 0.55),
      hsl(var(--lv-aurora-verde) / 0.85),
      hsl(var(--lv-aurora-violeta) / 0.70),
      hsl(var(--lv-aurora-verde) / 0.85),
      hsl(var(--lv-aurora-teal) / 0.55);

    /* ── MAZO 3 · puente shadcn ───────────────────────────────────────────── */
    --background:            var(--lv-suelo);
    --foreground:            var(--lv-tinta);
    --card:                  var(--lv-hoja);
    --card-foreground:       var(--lv-tinta);
    --popover:               var(--lv-hoja);
    --popover-foreground:    var(--lv-tinta);
    --primary:               var(--lv-aurora-verde);
    --primary-foreground:    var(--lv-hoja);
    --secondary:             var(--lv-hoja-2);
    --secondary-foreground:  var(--lv-tinta);
    --muted:                 var(--lv-hoja-2);
    --muted-foreground:      var(--lv-tinta-3);
    --accent:                var(--lv-hoja-2);
    --accent-foreground:     var(--lv-tinta);
    --destructive:           var(--lv-errata);
    --destructive-foreground: var(--lv-hoja);
    --border:                var(--lv-canto);
    --input:                 var(--lv-canto);
    --ring:                  var(--lv-aurora-verde);
    --radius:                var(--lv-radio);
    --user-bubble-bg:        var(--lv-hoja-2);
    --user-bubble-text:      var(--lv-tinta);
    --user-border:           var(--lv-canto-2);
  }

/* ── El campo: el horizonte ──────────────────────────────────────────────
   * Esto es la identidad, no un adorno. Dos cortinas de aurora arriba, el
   * suelo cálido abajo, todo a saturación bajísima para que ningún texto
   * pierda contraste — se mide, no se supone.
   *
   * El campo es el ENCUADRE y no se desplaza: la raíz del shell mide 100dvh y
   * el log se desplaza por dentro. Por eso no hace falta
   * `background-attachment: fixed` (que además iOS ignora).
   *
   * Es de la SALA, no de cada menú. Los portales llevan los dos atributos —para
   * pintarse con el mismo mazo— y además `data-aurora-portal`, que los deja
   * fuera: sin eso, el horizonte se pintaba DENTRO del menú y le ganaba a
   * `bg-popover`. */

[data-aurora-redesign][data-aurora-lenguaje-visual]:not([data-aurora-portal]) {
    background-color: hsl(var(--lv-suelo));
    background-image:
      radial-gradient(60% 42% at 18% 0%, hsl(var(--lv-aurora-teal) / 0.13) 0%, transparent 70%),
      radial-gradient(52% 38% at 82% 4%, hsl(var(--lv-aurora-violeta) / 0.09) 0%, transparent 72%),
      radial-gradient(90% 30% at 50% 0%, hsl(var(--lv-aurora-verde) / 0.08) 0%, transparent 76%),
      linear-gradient(to bottom, hsl(var(--lv-cielo)) 0%, hsl(var(--lv-suelo)) 46%);
    background-attachment: scroll;
    background-repeat: no-repeat;
  }

/* EN ESCRITORIO EL CIELO ES UNA BANDA, NO UNA MANCHA A UN LADO (2026-10-01,
   * Max sobre producción: «en escritorio se ve muy desbalanceado, en móvil se
   * ve mejor»). Los velos de arriba se miden en porcentaje del ANCHO y cuelgan
   * de los extremos (18 % y 82 %). En un teléfono eso es un brillo parejo sobre
   * todo el ancho, y se queda como está. En un monitor de 1920, el teal se
   * volvía una elipse de 1150 px sobre el riel y el margen vacío de la
   * izquierda, y la derecha quedaba casi blanca.
   *
   * Aquí cada velo mide en píxeles, así que no crece con el monitor; los dos
   * de color se reparten simétricos alrededor del centro de la sala, que es
   * donde se lee; y pesan lo mismo a la vista: el teal es más oscuro que el
   * violeta (L 32 contra 48), así que oscurece igual con menos alfa. El verde,
   * que es LA aurora, los une por el medio. (`min()` dentro del tamaño del
   * degradado no lo acepta Chromium: invalidaba el fondo entero.) */

@media (min-width: 768px) {
    [data-aurora-redesign][data-aurora-lenguaje-visual]:not([data-aurora-portal]) {
      background-image:
        radial-gradient(760px 340px at 33% 0%, hsl(var(--lv-aurora-teal) / 0.085) 0%, transparent 72%),
        radial-gradient(720px 320px at 67% 0%, hsl(var(--lv-aurora-violeta) / 0.10) 0%, transparent 72%),
        radial-gradient(1180px 260px at 50% 0%, hsl(var(--lv-aurora-verde) / 0.07) 0%, transparent 76%),
        linear-gradient(to bottom, hsl(var(--lv-cielo)) 0%, hsl(var(--lv-suelo)) 46%);
    }
  }

/* ── MAZO 4 · el plugin de tipografía ────────────────────────────────────
   * @tailwindcss/typography define sus `--tw-prose-*` con hex LITERALES.
   * `PROSE_PC_CLASSES` sobreescribe algunos slots y NUNCA el cuerpo, así que
   * el texto más leído del producto venía pintado con `#374151` y no con un
   * token. En un mundo claro pasa desapercibido; medido sobre fondo oscuro
   * daba 1.71:1.
   *
   * Va aquí y NO en la raíz por una razón mecánica que cuesta una tarde: el
   * plugin declara estas variables sobre el PROPIO elemento `.prose`, y una
   * declaración en el elemento gana siempre a un valor heredado de un
   * ancestro, tenga éste la especificidad que tenga. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .prose {
    --tw-prose-body:          hsl(var(--lv-tinta));
    --tw-prose-headings:      hsl(var(--lv-tinta));
    --tw-prose-lead:          hsl(var(--lv-tinta-2));
    --tw-prose-links:         hsl(var(--lv-aurora-verde-2));
    --tw-prose-bold:          hsl(var(--lv-tinta));
    --tw-prose-counters:      hsl(var(--lv-tinta-3));
    --tw-prose-bullets:       hsl(var(--lv-canto-2));
    --tw-prose-hr:            hsl(var(--lv-canto));
    --tw-prose-quotes:        hsl(var(--lv-tinta-2));
    --tw-prose-quote-borders: hsl(var(--lv-canto-2));
    --tw-prose-captions:      hsl(var(--lv-tinta-3));
    --tw-prose-code:          hsl(var(--lv-tinta));
    --tw-prose-pre-code:      hsl(var(--lv-tinta));
    --tw-prose-pre-bg:        hsl(var(--lv-hoja-2));
    --tw-prose-th-borders:    hsl(var(--lv-canto-2));
    --tw-prose-td-borders:    hsl(var(--lv-canto));
  }

/* ── Oscuro: el gemelo «antes del amanecer» ───────────────────────────────
   * Decidido por Max el 2026-10-01. Antes este bloque repetía el claro: quien
   * eligió oscuro recibía un espacio de trabajo claro, y los menús portaleados
   * —que sí siguen el tema— salían oscuros dentro de él.
   *
   * Re-autora el mazo 1. No es negro ni «casi negro con un acento ácido»:
   * pizarra teal de antes del amanecer, con la aurora un poco más presente, que
   * es cuando de verdad se ve. Contrastes (todos AA): tinta 14,67 · media 9,68 ·
   * queda 6,88 · verde 7,62 sobre el suelo. El texto SOBRE el verde va en la
   * tinta del suelo (6,98), porque blanco daría 2,27.
   *
   * Y REPITE el puente pc → lv con las mismas indirecciones. El del claro es
   * (0,2,0), igual que el `.dark [data-aurora-redesign]` de chat-redesign.css:
   * en oscuro ganaba sólo por orden de importación. Aquí es (0,3,0), y el
   * oscuro deja de depender del orden. */

.dark [data-aurora-redesign][data-aurora-lenguaje-visual] {
    --lv-suelo:     198 24% 10%;
    --lv-cielo:     184 30% 13%;
    --lv-hoja:      198 20% 13%;
    --lv-hoja-2:    198 17% 16.5%;
    --lv-tinta:     180 14% 92%;
    --lv-tinta-2:   188 10% 75%;
    --lv-tinta-3:   190 8% 63%;
    --lv-canto:     192 14% 21%;
    --lv-canto-2:   192 12% 32%;
    --lv-aurora-verde:   162 48% 52%;
    --lv-aurora-teal:    186 48% 50%;
    --lv-aurora-violeta: 280 46% 72%;
    --lv-aurora-verde-2: 162 56% 63%;
    --lv-aurora-verde-d: 164 38% 19%;
    --lv-ambar:     36 70% 62%;
    --lv-errata:    4 72% 68%;
    --lv-errata-d:  4 40% 18%;
    --lv-halo:      0 18px 48px -24px hsl(186 48% 50% / 0.22),
                    0 2px 10px -6px hsl(0 0% 0% / 0.4);
    --lv-sombra-flotante: 0 18px 44px -16px hsl(198 40% 2% / 0.62),
                          0 2px 8px -2px hsl(198 40% 2% / 0.42);
    --lv-velo:      198 40% 3% / 0.6;
    --primary-foreground:     var(--lv-suelo);
    --destructive-foreground: var(--lv-suelo);
    color-scheme: dark;

    --pc-paper:              var(--lv-suelo);
    --pc-surface:            var(--lv-hoja);
    --pc-surface-2:          var(--lv-hoja-2);
    --pc-ink:                var(--lv-tinta);
    --pc-ink-2:              var(--lv-tinta-2);
    --pc-ink-3:              var(--lv-tinta-3);
    --pc-line:               var(--lv-canto);
    --pc-line-2:             var(--lv-canto-2);
    --pc-accent:             var(--lv-aurora-verde);
    --pc-accent-2:           var(--lv-aurora-verde-2);
    --pc-accent-weak:        var(--lv-aurora-verde-d);
    --pc-danger:             var(--lv-errata);
    --pc-danger-weak:        var(--lv-errata-d);
    --pc-agent-perspectiva:  var(--lv-aurora-teal);
    --pc-agent-memoria:      var(--lv-aurora-verde);
    --pc-agent-evidencia:    var(--lv-aurora-violeta);
    --pc-agent-sistema:      var(--lv-tinta-3);
    --pc-agent-formulacion:  var(--lv-ambar);
  }

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}

.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}

.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}

.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
}

.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.9em;
}

.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}

.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4285714em;
}

.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.1428571em;
}

.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}

.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}

.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.1428571em;
}

.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}

.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}

.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.5;
}

.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}

.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}

.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}

.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.markdown-content {
    /* Sin `text-base leading-relaxed` (revisión de rama, 2026-09-14): misma
     * familia de defecto que h1/h2/h3/p/li más abajo, pero un mecanismo más
     * frágil todavía. Ahí el bloqueador era una regla MÁS ESPECÍFICA
     * (`.markdown-content p`, 0,1,1) ganándole a la utilidad (0,1,0) SIEMPRE,
     * sin importar el orden de nada. Aquí no: `.markdown-content` y
     * `.text-pc-body` —la utilidad de tamaño/interlineado fluido— caen sobre
     * el MISMO elemento (el contenedor en markdown-renderer-redesign.tsx
     * lleva las dos clases) con especificidad IDÉNTICA, (0,1,0) cada una. El
     * token ganaba el empate SÓLO porque `@layer components` se emite antes
     * que `@layer utilities` —`app/globals.css` llama a ese orden
     * load-bearing en su propio encabezado—, no porque ninguna regla fuera
     * más fuerte. Tres commits de esta rama se gastaron cerrando la versión
     * por especificidad; ésta es la versión por orden de capa — más
     * silenciosa, porque un simple reordenamiento de imports la revive sin
     * que cambie ninguna especificidad. Quitar la declaración, no competir
     * con la cascada, es lo único que la cierra de verdad. */
    /* 🔥 CRÍTICO: Evitar que CUALQUIER contenido expanda el contenedor.
     * The clamp via utilities replaces the former triple `!important` (CSS-12):
     * no `.prose` plugin or library default fights these here, so plain
     * utilities inside @layer components are enough. */
    min-width: 0px;
    max-width: 100%;
    overflow: hidden;
    /* Optimización para mejor renderizado */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

/* ── El vestido de la prosa lo escribe el renderer, no esta hoja ─────────
   * (auditoría del shell 2026-09-30, §1.1, carril V). Cada regla
   * `.markdown-content X` pesa (0,1,1) y los modificadores `prose-X:` de
   * markdown-renderer-redesign.tsx compilan a (0,1,0): lo que se declarara
   * aquí le ganaba al renderer SIEMPRE, sin importar el orden de las capas.
   * Así el chat seguía viéndose como antes del rediseño: enlaces en
   * `text-primary` (#007BFF, 3,9:1), código a 12 px con la mono del sistema
   * sobre `bg-muted` cálido, bloque `rounded-xl`, cita gris de 4 px en
   * cursiva, filete legacy bajo el h1, strong/em con los colores de shadcn y
   * márgenes de lista que no eran los del renderer. Esta hoja ya no declara
   * nada de eso; sólo lo que el renderer NO dice. Lo vigila
   * tests/characterization-v-cascada-prosa-del-chat.test.ts, que además exige
   * que el renderer siga declarando cada cosa (si no, nadie la vestiría). */

.markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    /* Color, márgenes e interlineado los da el renderer
     * (`prose-headings:text-pc-ink`, `prose-hN:mt-*`/`mb-*`, y cada paso de
     * la escala fluida trae su interlineado: pc-h1 1.2 … pc-h4 1.4). Quedan
     * dos cosas que no dice: el peso de h5/h6, y que un encabezado que ABRE
     * el mensaje no arrastre su margen superior — el reset `> :first-child`
     * de prose pesa (0,1,0) y pierde contra `prose-hN:mt-*`. */
    font-weight: 600;
  }

.markdown-content h1:first-child,
  .markdown-content h2:first-child,
  .markdown-content h3:first-child,
  .markdown-content h4:first-child,
  .markdown-content h5:first-child,
  .markdown-content h6:first-child {
  margin-top: 0px;
}

.markdown-content p {
    /* Sin margen inferior propio: es `prose-p:mb-3.5` del renderer (`mb-3`
     * le ganaba). Queda `last:mb-0`, que el renderer no dice: sin él, el
     * último párrafo dejaba su margen bajo el mensaje (el `> :last-child` de
     * prose también pierde contra la utilidad).
     *
     * Sin `line-height` aquí: el interlineado del cuerpo lo da el token
     * `--pc-leading-body` (vía `text-pc-body`, aplicado al contenedor en
     * markdown-renderer-redesign.tsx). Esta regla elemento-más-clase (0,1,1)
     * le ganaba en especificidad a esa utilidad (0,1,0) y silenciaba el 1.7
     * del token con un 1.6 fijo — medido en vivo: line-height: 26.90px sobre
     * font-size: 16.81px. `font-size: inherit` SÍ se conserva: el tamaño ya
     * era correcto (fluido), y heredar del contenedor —que carga
     * `text-pc-body`— mantiene al párrafo en sync con él aunque cambie el
     * contexto (p. ej. dentro de un blockquote, o el razonamiento a 13 px). */
  }

.markdown-content p:last-child {
  margin-bottom: 0px;
}

.markdown-content p {
    font-size: inherit;
  }

.markdown-content ul,
  .markdown-content ol {
    /* Los márgenes verticales de la lista y de sus ítems son del renderer
     * (`prose-ul:my-3`, `prose-ol:my-3`, `prose-li:my-1.5`); `my-2` y
     * `space-y-1` le ganaban. La sangría no la dice: se queda. */
    margin-left: 1rem;
    padding-left: 1rem;
  }

.markdown-content ul {
  list-style-type: disc;
}

.markdown-content ol {
  list-style-type: decimal;
}

.markdown-content li {
    /* Sin `text-base` ni `line-height` aquí: el tamaño y el interlineado
     * los da el token `text-pc-body` / `--pc-leading-body` (el contenedor
     * en markdown-renderer-redesign.tsx ya los lleva, vía `prose-li:text-
     * pc-body`). Esta regla elemento-más-clase (0,1,1) le ganaba en
     * especificidad a esa utilidad (0,1,0) — peor que el caso de `p`
     * arriba, porque `text-base` fijaba 16px planos y el ítem de lista
     * nunca llegaba a la escala fluida. Medido en vivo: font-size: 16px
     * plano, line-height: 24px (ratio 1.5, y tamaño incorrecto).
     *
     * `font-size: inherit`, como `p` (carril V, 2026-09-30): hasta hoy
     * tailwind-merge DESCARTABA `prose-li:text-pc-body` (lo leía como un
     * color) y el ítem heredaba del contenedor. Con `cn()` arreglado
     * (lib/utils.ts) la clase vuelve, y en un contenedor más chico —el
     * razonamiento, a 13 px— los ítems saltarían a 16–18 px mientras los
     * párrafos siguen en 13. Heredar los mantiene juntos. Sin margen propio:
     * es `prose-li:my-1.5` del renderer. */
    font-size: inherit;
  }

.markdown-content code {
    /* Fondo, tinta, relleno, radio, tamaño y familia del código en línea
     * son del renderer (`prose-code:bg-pc-surface-2 … font-pc-mono
     * text-[14.5px] rounded-pc`). */
    word-break: break-word;
  }

.markdown-content pre {
    /* Fondo, borde y radio del bloque son del renderer
     * (`prose-pre:bg-pc-surface-2 border border-pc-line rounded-pc`); el
     * relleno, el ritmo y el desplazamiento no los dice. */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
    padding: 0.75rem;
    line-height: 1.4;
  }

.markdown-content pre code {
    /* Sin `text-xs`: el tamaño es `[&_pre_code]:text-[14px]` del renderer, y
     * el `line-height: 1rem` que `text-xs` traía consigo sobrevivía a esa
     * utilidad y apretaba el bloque a 16 px de interlínea. */
    background-color: transparent;
    padding: 0px;
    word-break: normal;
  }

.markdown-content blockquote {
    /* Filete, fondo, tinta y estilo son del renderer
     * (`prose-blockquote:border-l-[3px] border-pc-accent/60
     * bg-pc-accent-weak/40 not-italic`); el relleno y el ritmo no los dice. */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
  }

.markdown-content a {
    /* El color es `prose-a:text-pc-accent` del renderer (`text-primary`, a
     * 3,9:1, le ganaba). El SUBRAYADO se queda, y le gana a propósito al
     * `prose-a:no-underline` del renderer: el acento contra la tinta da
     * ~2,6:1, así que sin subrayado el enlace se distinguiría sólo por color
     * y fallaría WCAG 1.4.1 (uso del color). */
    text-decoration-line: underline;
    /* Token-ized link colour transition (CSS-08): instant + standard easing. */
    transition: color var(--duration-instant) var(--ease-standard);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

.markdown-content a:hover {
    text-decoration-thickness: 2px;
  }

.markdown-content strong {
    /* La tinta es `prose-strong:text-pc-ink` del renderer. */
    font-weight: 600;
  }

.markdown-content em {
    /* La tinta es `prose-em:text-pc-ink-2` del renderer. */
    font-style: italic;
  }

.markdown-content hr {
    /* border-border/50 tracks the token in dark mode (CSS-02), lighter divider. */
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-color: hsl(var(--border) / 0.5);
    border-width: 1px 0 0 0;
  }

/* Optimizaciones para mejor rendimiento */

.markdown-content * {
    box-sizing: border-box;
  }

.markdown-content img {
    max-width: 100%;
    height: auto;
    /* calc(var(--radius) - 4px) ≈ 0.375rem at the default 0.75rem token (CSS-04).
     * Dentro de la sala `--radius` es el de pc (7 px, chat-redesign.css): 3 px. */
    border-radius: calc(var(--radius) - 4px);
  }

.markdown-content > p,
  .markdown-content > ul,
  .markdown-content > ol,
  .markdown-content > blockquote,
  .markdown-content > h1,
  .markdown-content > h2,
  .markdown-content > h3,
  .markdown-content > h4,
  .markdown-content > h5,
  .markdown-content > h6 {
    max-inline-size: var(--pc-measure, 68ch);
  }

/* Mejora progresiva: evita huérfanas y últimas líneas desiguales. Importa
   * MÁS con la medida estrecha, no menos. Sin soporte en Firefox; degrada a
   * envoltura normal, así que entra sin guarda. */

.markdown-content > p,
  .markdown-content > ul,
  .markdown-content > ol,
  .markdown-content > blockquote {
    text-wrap: pretty;
  }

.markdown-content > h1,
  .markdown-content > h2,
  .markdown-content > h3,
  .markdown-content > h4,
  .markdown-content > h5,
  .markdown-content > h6 {
    text-wrap: balance;
  }

/* 🔥 TABLAS CLÍNICAS PROFESIONALES - MOBILE FIRST */

.markdown-content table {
    /* CSS-01: border-border tracks the token in dark mode.
     * CSS-13: overflow-hidden clips the inner thead/cell fills to the rounded-lg
     * corners (border-collapse:separate would otherwise square them off). */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    border-width: 1px;
    border-color: hsl(var(--border));
    border-collapse: separate;
    border-spacing: 0;
  }

.markdown-content thead {
  background-color: hsl(var(--muted));
}

.markdown-content th,
  .markdown-content td {
    /* CSS-01: border-border/50 — a lighter divider that tracks the token. */
    border-bottom-width: 1px;
    border-color: hsl(var(--border) / 0.5);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: left;
  }

.markdown-content th {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button .markdown-content th {
  font-weight: 500;
  color: hsl(var(--lv-tinta-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button:hover .markdown-content th {
  color: hsl(var(--lv-tinta));
}

.markdown-content th {
    background-color: transparent;
  }

.markdown-content td {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--foreground));
    line-height: 1.5;
}

/* Estilos específicos para tablas clínicas generadas por agentes.
   * Specificity (0,2,0) already beats the base table rules (0,1,1) and the
   * typography plugin's `.prose :where()` rules (0,1,0) — no !important needed. */

.markdown-content .clinical-table-wrapper,
  .prose .clinical-table-wrapper {
    /* Base: scroll horizontal suave */
    position: relative;
    display: block;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

/* Foco del wrapper: cuando la tabla desborda, use-table-scroll-hint lo hace
   * región enfocable (tabindex=0) para desplazarla con teclado. El anillo va
   * POR DENTRO: el wrapper llega al filo de su contenedor (sangrado de borde a
   * borde) y un anillo por fuera quedaría recortado por el contenedor de
   * scroll. (0,3,0) gana al foco global de base.css y de chat-redesign.css. */

.markdown-content .clinical-table-wrapper:focus-visible,
  .prose .clinical-table-wrapper:focus-visible {
    outline-offset: -2px;
  }

/* CSS-19: this file's table-density pivots are intentionally keyed to `sm`
   * (640px), NOT the app's `md` (768px) surface ladder. Rationale: clinical
   * tables live inside the chat message bubble, whose width is governed by the
   * @container message-bubble query (639px) below — so the table breaks out of
   * mobile scroll mode as soon as the BUBBLE is wide enough, which is the `sm`
   * threshold, not the viewport's `md`. The two are paired by design; do not
   * migrate to 768 without visual proof against the container pivot. */

@media (min-width: 640px) {
    .markdown-content .clinical-table-wrapper,
    .prose .clinical-table-wrapper {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: visible;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }

.markdown-content .clinical-table-wrapper::before,
  .markdown-content .clinical-table-wrapper::after,
  .prose .clinical-table-wrapper::before,
  .prose .clinical-table-wrapper::after {
    /* Indicadores de scroll en mobile */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    /* CSS-07: token-ized — normal duration + standard easing. */
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

.markdown-content .clinical-table-wrapper::before,
  .prose .clinical-table-wrapper::before {
    left: 0;
    background: linear-gradient(to right, hsl(var(--background)), transparent);
  }

.markdown-content .clinical-table-wrapper::after,
  .prose .clinical-table-wrapper::after {
    right: 0;
    background: linear-gradient(to left, hsl(var(--background)), transparent);
  }

/* Sólo con desbordamiento real (`has-overflow`, lo mide use-table-scroll-hint
   * en el chat y en el documento): con un `:hover` a secas los degradados
   * tapaban 20 px de cada borde de tablas que caben enteras. */

.markdown-content .clinical-table-wrapper.has-overflow:hover::before,
  .markdown-content .clinical-table-wrapper.has-overflow:hover::after,
  .prose .clinical-table-wrapper.has-overflow:hover::before,
  .prose .clinical-table-wrapper.has-overflow:hover::after {
    opacity: 1;
  }

.markdown-content .clinical-table,
  .prose .clinical-table {
    /* Base: diseño profesional y limpio */
    border-collapse: separate;
    border-spacing: 0;
    background: hsl(var(--card));
    font-variant-numeric: tabular-nums;
    /* Mobile: texto más pequeño pero legible */
    font-size: 0.75rem;
    /* CRÍTICO: La tabla debe tener su ancho natural, NO 100% */
    width: auto;
    min-width: 100%;
    max-width: none;
    table-layout: auto;
    display: table;
  }

/* CSS-19: `sm` pivot paired with the @container bubble query — see rationale
   * on the first @media (min-width: 640px) block above. */

@media (min-width: 640px) {
    .markdown-content .clinical-table,
    .prose .clinical-table {
      font-size: 0.875rem;
    }
  }

.markdown-content .clinical-table-header,
  .prose .clinical-table-header {
    /* Header sticky en scroll vertical */
    position: sticky;
    top: 0;
    background: hsl(var(--secondary) / 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* CSS-06: foreground-derived elevation so the sticky header shadow adapts
     * to dark mode instead of staying a fixed black rgb(). */
    box-shadow: 0 1px 3px 0 hsl(var(--foreground) / 0.1);
    z-index: 10;
  }

.markdown-content .clinical-table-th,
  .prose .clinical-table-th {
    /* Headers: profesional y destacado */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: hsl(var(--foreground) / 0.9);
    /* Mobile: padding reducido */
    padding: 0.5rem;
    white-space: nowrap;
    border-bottom: 2px solid hsl(var(--border) / 0.8);
  }

/* CSS-19: `sm` pivot paired with the @container bubble query — see rationale
   * on the first @media (min-width: 640px) block above. */

@media (min-width: 640px) {
    .markdown-content .clinical-table-th,
    .prose .clinical-table-th {
      padding: 0.75rem 1rem;
    }
  }

.markdown-content .clinical-table-td,
  .prose .clinical-table-td {
    /* Celdas: legible y espaciado */
    color: hsl(var(--foreground) / 0.85);
    line-height: 1.5;
    vertical-align: top;
    /* Mobile: padding reducido */
    padding: 0.5rem;
    /* Permitir wrap en mobile para contenido largo */
    word-break: break-word;
    hyphens: auto;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
  }

/* CSS-19: `sm` pivot paired with the @container bubble query — see rationale
   * on the first @media (min-width: 640px) block above. */

@media (min-width: 640px) {
    .markdown-content .clinical-table-td,
    .prose .clinical-table-td {
      padding: 0.75rem 1rem;
      /* CSS-14: Desktop permite wrap (white-space: normal) para que celdas con
       * texto largo no fuercen scroll horizontal; el comentario previo decía
       * "nowrap", contradiciendo el código — corregido para reflejar la intención
       * real. Mobile conserva su scroll horizontal (overflow-x:auto). */
      white-space: normal;
    }
  }

.markdown-content .clinical-table-row,
  .prose .clinical-table-row {
    /* Hover effect profesional.
     * RETAINED !important: this transition-duration must win over the global
     * `*{transition-duration:.01ms!important}` reduced-motion rule (0,0,0) so the
     * row hover keeps its transition exactly as before the strip.
     * CSS-07: duration/easing token-ized (instant + standard) — !important kept. */
    transition: background-color var(--duration-instant) var(--ease-standard) !important;
  }

.markdown-content .clinical-table-row:hover,
  .prose .clinical-table-row:hover {
    background: hsl(var(--secondary) / 0.3);
  }

.markdown-content .clinical-table-row:last-child .clinical-table-td,
  .prose .clinical-table-row:last-child .clinical-table-td {
    border-bottom: none;
  }

/* Zebra striping para mejor legibilidad en tablas largas.
   * Winners are decided by specificity (even-hover > even > row-hover), which
   * is preserved with or without !important — so !important is dropped here. */

.markdown-content .clinical-table tbody .clinical-table-row:nth-child(even),
  .prose .clinical-table tbody .clinical-table-row:nth-child(even) {
    background: hsl(var(--secondary) / 0.1);
  }

.markdown-content .clinical-table tbody .clinical-table-row:nth-child(even):hover,
  .prose .clinical-table tbody .clinical-table-row:nth-child(even):hover {
    background: hsl(var(--secondary) / 0.35);
  }

/* Estilos para primera columna (típicamente labels) */

.markdown-content .clinical-table-td:first-child,
  .prose .clinical-table-td:first-child {
    font-weight: 500;
    color: hsl(var(--foreground));
  }

/* 🔥 CONTAINER QUERIES: Establecer contexto de contención en burbujas de mensaje
   * PERF: Scoped to .chat-message-bubble ONLY. Previously this selector also
   * included .markdown-content and .prose, which applied `contain: layout
   * inline-size style` to 2–3 additional nested elements per message. On long
   * conversations this multiplied layout work during animations/resizes and
   * was a dominant source of desktop jank. .chat-message-bubble still wraps
   * every message, so @container message-bubble queries continue to match. */

.chat-message-bubble {
    container-type: inline-size;
    container-name: message-bubble;
    /* Horizontal padding the clinical-table mobile breakout must escape to
       reach the bubble edge: the bubble's own p-3 (message-item.tsx) plus the
       message-list px-3 (chat-interface.tsx). Kept as tokens so the breakout
       tracks the padding instead of hardcoding the arithmetic. */
    --chat-bubble-pad-x: 0.75rem;  /* message-item.tsx p-3 */
    --chat-list-pad-x: 0.75rem;    /* chat-interface.tsx px-3 */
    --clinical-table-breakout-x: calc(var(--chat-bubble-pad-x) + var(--chat-list-pad-x));
  }

/* Responsive: scroll horizontal en mobile con indicador visual.
   * The @media (min-width: 640px) reset above and this @container breakout both
   * target .clinical-table-wrapper at equal specificity (0,2,0). When both match
   * (wide viewport + narrow bubble) the LATER rule (this one) wins by source
   * order — true with or without !important, so !important is dropped from both
   * uniformly and the breakout still wins.
   * CSS-19: the 639px @container threshold is a deliberate BUBBLE-width pivot
   * (not a viewport breakpoint) — it triggers mobile scroll mode whenever the
   * message bubble is narrow, regardless of viewport width, and is the partner
   * of the `sm` @media blocks above. Defensible as-is. */

@container message-bubble (max-width: 639px) {
    .markdown-content .clinical-table-wrapper,
    .prose .clinical-table-wrapper {
      /* CRÍTICO: Forzar scroll horizontal en mobile */
      display: block;
      /* El ancho del contenedor más el sangrado de cada lado, como en
         `.clinical-document`. Nunca 100vw: con el canvas abierto en escritorio
         la burbuja es más estrecha que la ventana, el wrapper la desbordaba y
         las últimas columnas quedaban recortadas SIN scroll (F9, auditoría del
         shell 2026-09-30). La variable la declara `.chat-message-bubble`, que
         es el contenedor de esta misma consulta. */
      width: calc(100% + 2 * var(--clinical-table-breakout-x));
      max-width: none;
      overflow-x: auto;
      overflow-y: visible;
      /* Break out of the bubble + message-list padding so the table scrolls
         edge-to-edge, then re-apply equal inner padding. The offset is the
         --clinical-table-breakout-x token defined on .chat-message-bubble
         (0.75rem + 0.75rem = 1.5rem / 24px), so it stays in sync with the
         bubble/list padding instead of hardcoding the arithmetic. */
      margin-left: calc(-1 * var(--clinical-table-breakout-x));
      margin-right: calc(-1 * var(--clinical-table-breakout-x));
      padding-left: var(--clinical-table-breakout-x);
      padding-right: var(--clinical-table-breakout-x);
    }

    .markdown-content .clinical-table,
    .prose .clinical-table {
      /* Asegurar que la tabla tenga su ancho natural */
      min-width: 500px;
      width: auto;
    }

    /* Indicador visual de scroll en mobile.
     * RETAINED !important: the arrow overrides the gradient `::after` (content/
     * position/etc.), its `opacity: 0.5` must win over `:hover::after{opacity:1}`
     * (higher specificity) as before, and its `animation` must survive the
     * global reduced-motion rule. These are real tiebreaks, not prose defenses. */
    .markdown-content .clinical-table-wrapper::after,
    .prose .clinical-table-wrapper::after {
      /* La flecha es decorativa: texto alternativo vacío para que el lector de
         pantalla no anuncie «flecha derecha». La primera línea es el respaldo
         para navegadores sin la sintaxis `/ ''` (descartan la segunda). */
      content: '→' !important;
      content: '→' / '' !important;
      position: sticky !important;
      right: 1rem !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      font-size: 1.5rem !important;
      color: hsl(var(--muted-foreground)) !important;
      opacity: 0.5 !important;
      /* Tres pasadas y quieta: en bucle, cada tabla del historial rebotaba
         para siempre. */
      animation: scroll-hint 2s ease-in-out 3 forwards !important;
      pointer-events: none !important;
      z-index: 10 !important;
      float: right !important;
    }
  }

@keyframes scroll-hint {
    0%, 100% {
      opacity: 0.3;
      transform: translateY(-50%) translateX(0);
    }
    50% {
      opacity: 0.7;
      transform: translateY(-50%) translateX(5px);
    }
  }

/* Ocultar indicador cuando se ha scrolleado (paired with the arrow above —
   * RETAINED !important to keep hiding the !important arrow). */

.markdown-content .clinical-table-wrapper.scrolled::after,
  .prose .clinical-table-wrapper.scrolled::after {
    display: none !important;
  }

/* Accessibility (WCAG 2.2.2 / 2.3.3): neutralise the infinite scroll-hint arrow
   * under prefers-reduced-motion. The arrow's `animation … infinite !important`
   * lives in THIS @layer components block, so the neutraliser must ALSO be layered
   * and come later in source order — an unlayered !important rule (e.g. the global
   * reduced-motion block in animations.css) loses to a layered !important, which is
   * why the arrow previously kept bouncing for motion-sensitive users. */

@media (prefers-reduced-motion: reduce) {
    .markdown-content .clinical-table-wrapper::after,
    .prose .clinical-table-wrapper::after {
      animation: none !important;
    }
  }

/* 🔥 OPTIMIZACIÓN: Sombras de gradiente para indicar scroll disponible */

.clinical-table-wrapper {
    position: relative;
  }

/* Sombra derecha (indica que hay más contenido a la derecha).
   * CSS-19: 639px @container = deliberate bubble-width pivot — see note on the
   * breakout @container block above. */

@container message-bubble (max-width: 639px) {
    .clinical-table-wrapper::before {
      content: '';
      position: sticky;
      left: 0;
      top: 0;
      bottom: 0;
      width: 20px;
      background: linear-gradient(to right, hsl(var(--card)), transparent);
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      /* CSS-07: token-ized — normal duration + standard easing. */
      transition: opacity var(--duration-normal) var(--ease-standard);
    }

    .clinical-table-wrapper.scrolled::before {
      opacity: 1;
    }
  }

/* Mejorar el wrapper de tablas para mejor UX */

.clinical-table-wrapper {
    /* Smooth scrolling */
    scroll-behavior: smooth;
    /* Snap to columns on mobile (opcional) */
    /* scroll-snap-type: x proximity; */
    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
  }

.clinical-table-wrapper::-webkit-scrollbar {
    height: 6px;
  }

.clinical-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

.clinical-table-wrapper::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
  }

.clinical-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }

/* ══════════════════════════════════════════════════════════════════════════
   * Superficie de documento (canvas del panel y diálogo de documentos guardados)
   *
   * Sólo `ClinicalDocumentBody` estampa `.clinical-document`; el chat no entra
   * aquí. Medido el 2026-09-12 en un teléfono de 375 px: el wrapper de la tabla
   * sólo recibía `overflow-x:auto` dentro de `@media (min-width:640px)` o de
   * `@container message-bubble`, y ese contenedor sólo existe en la burbuja del
   * chat — en el canvas la tabla desbordaba y el cuerpo entero se convertía en
   * el scroller horizontal, recortando el margen izquierdo de cada párrafo.
   *
   * Reglas: (1) la tabla SIEMPRE se desplaza dentro de su wrapper, a cualquier
   * ancho; (2) híbrido por número de columnas (`data-cols`, lo estampa
   * rehypeTableDataLabels): ≤ 2 columnas caben y envuelven, ≥ 3 conservan un
   * suelo y se desplazan; (3) en contenedor estrecho (≤ 639 px — incluye el
   * panel de escritorio, de 480-560 px) la tabla sangra de borde a borde con el
   * token `--clinical-document-pad-x`, que cada superficie iguala a su padding X,
   * y la flecha/degradado sólo aparecen con desbordamiento real (`has-overflow`,
   * lo mide use-table-scroll-hint). Ninguna regla de este bloque lleva el
   * selector de la burbuja del chat — una prueba mecánica lo vigila.
   * ══════════════════════════════════════════════════════════════════════════ */

.clinical-document {
    container-type: inline-size;
    container-name: clinical-document;
    --clinical-document-pad-x: 0px;
  }

.clinical-document .clinical-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

.clinical-document .clinical-table[data-cols="1"],
  .clinical-document .clinical-table[data-cols="2"] {
    width: 100%;
    min-width: 0;
  }

.clinical-document .clinical-table[data-cols="1"] .clinical-table-th,
  .clinical-document .clinical-table[data-cols="2"] .clinical-table-th {
    white-space: normal;
  }

@container clinical-document (max-width: 639px) {
    .clinical-document .clinical-table-wrapper {
      /* Sangrado de borde a borde: nunca 100vw (el panel de escritorio también
         cae aquí); el ancho es el del contenedor más el padding de la superficie. */
      width: calc(100% + 2 * var(--clinical-document-pad-x));
      max-width: none;
      margin-left: calc(-1 * var(--clinical-document-pad-x));
      margin-right: calc(-1 * var(--clinical-document-pad-x));
      padding-left: var(--clinical-document-pad-x);
      padding-right: var(--clinical-document-pad-x);
    }

    .clinical-document .clinical-table:not([data-cols="1"]):not([data-cols="2"]) {
      /* Suelo para ≥ 3 columnas: celdas legibles, la tabla se desplaza. */
      min-width: 30rem;
      width: auto;
    }

    /* Flecha de desplazamiento — espejo de la del modo burbuja, sin !important:
       (0,3,1) ya gana a los ::after base y de :hover, y llega después en el
       fuente. `.prose .clinical-table-wrapper.scrolled::after { display:none
       !important }` y el neutralizador de prefers-reduced-motion se aplican
       igual, porque esta raíz también lleva `.prose`. */
    .clinical-document .clinical-table-wrapper.has-overflow::after {
      /* Decorativa (texto alternativo vacío), con respaldo — ver la del chat. */
      content: '→';
      content: '→' / '';
      position: sticky;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.5rem;
      color: hsl(var(--muted-foreground));
      opacity: 0.5;
      /* Tres pasadas y quieta, como la del chat. */
      animation: scroll-hint 2s ease-in-out 3 forwards;
      pointer-events: none;
      z-index: 10;
      float: right;
    }

    /* Sombra izquierda una vez desplazado (hay contenido a la izquierda). */
    .clinical-document .clinical-table-wrapper.has-overflow::before {
      content: '';
      position: sticky;
      left: 0;
      top: 0;
      bottom: 0;
      width: 20px;
      background: linear-gradient(to right, hsl(var(--card)), transparent);
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      transition: opacity var(--duration-normal) var(--ease-standard);
    }

    .clinical-document .clinical-table-wrapper.has-overflow.scrolled::before {
      opacity: 1;
    }
  }

/* ── Tipografía de instrumento ───────────────────────────────────────────
   * Utilities are global class names (collision-free — `pc-*` is unused in the
   * codebase) but reference `--pc-*` / `--font-mono`, which only resolve inside
   * the redesign root; outside it they are inert. Agent E uses these for the
   * chat body's telemetry (durations, counts, timestamps, tags, cite indices). */

.pc-mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "zero" 1, "cv02" 1;
  }

.pc-num {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1, "zero" 1;
  }

.pc-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem; /* 11px */
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: hsl(var(--pc-ink-2));
  }

.pc-display {
    letter-spacing: -0.02em;
  }

/* ── Enlaces / citas ───────────────────────────────────────────────────── */

.pc-link {
    color: hsl(var(--pc-accent));
    text-decoration: none;
  }

.pc-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }

/* ── Tick funcional de agente (2px, color = dato) ──────────────────────── */

.pc-tick {
    display: block;
    width: 2px;
    border-radius: 0;
    flex-shrink: 0;
  }

.pc-tick--perspectiva { background: hsl(var(--pc-agent-perspectiva)); }

.pc-tick--memoria { background: hsl(var(--pc-agent-memoria)); }

.pc-tick--evidencia { background: hsl(var(--pc-agent-evidencia)); }

.pc-tick--sistema { background: hsl(var(--pc-agent-sistema)); }

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

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.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-x-0 {
  left: 0px;
  right: 0px;
}

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

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

.-bottom-12 {
  bottom: -3rem;
}

.-bottom-px {
  bottom: -1px;
}

.-left-12 {
  left: -3rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-12 {
  right: -3rem;
}

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

.-top-10 {
  top: -2.5rem;
}

.-top-12 {
  top: -3rem;
}

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

.bottom-0 {
  bottom: 0px;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

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

.left-2 {
  left: 0.5rem;
}

.left-2\.5 {
  left: 0.625rem;
}

.left-3 {
  left: 0.75rem;
}

.left-\[50\%\] {
  left: 50%;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-2 {
  right: 0.5rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.top-0 {
  top: 0px;
}

.top-1\.5 {
  top: 0.375rem;
}

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

.top-2 {
  top: 0.5rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-3 {
  top: 0.75rem;
}

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

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-\[1px\] {
  top: 1px;
}

.top-\[50\%\] {
  top: 50%;
}

.top-\[60\%\] {
  top: 60%;
}

.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-\[100\] {
  z-index: 100;
}

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

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

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

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

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

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

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

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-ml-4 {
  margin-left: -1rem;
}

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

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

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

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

.mb-3 {
  margin-bottom: 0.75rem;
}

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

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

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

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

.mr-0 {
  margin-right: 0px;
}

.mr-0\.5 {
  margin-right: 0.125rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

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

.mt-0 {
  margin-top: 0px;
}

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

.mt-2\.5 {
  margin-top: 0.625rem;
}

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

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

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

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

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

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

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

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

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

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.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-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[1\.5px\] {
  height: 1.5px;
}

.h-\[100dvh\] {
  height: 100dvh;
}

.h-\[100svh\] {
  height: 100svh;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[18rem\] {
  height: 18rem;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[72svh\] {
  height: 72svh;
}

.h-\[88px\] {
  height: 88px;
}

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

.h-\[Npx\] {
  height: Npx;
}

.h-\[min\(760px\2c calc\(100dvh-4\.5rem\)\)\] {
  height: min(760px,calc(100dvh - 4.5rem));
}

.h-\[var\(--aurora-viewport-h\2c 100dvh\)\] {
  height: var(--aurora-viewport-h,100dvh);
}

.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}

.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}

.h-auto {
  height: auto;
}

.h-dvh {
  height: 100dvh;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.h-svh {
  height: 100svh;
}

.max-h-48 {
  max-height: 12rem;
}

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

.max-h-\[300px\] {
  max-height: 300px;
}

.max-h-\[6\.5em\] {
  max-height: 6.5em;
}

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

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

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

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

.max-h-screen {
  max-height: 100vh;
}

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

.min-h-9 {
  min-height: 2.25rem;
}

.min-h-\[100dvh\] {
  min-height: 100dvh;
}

.min-h-\[100svh\] {
  min-height: 100svh;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[52px\] {
  min-height: 52px;
}

.min-h-\[55svh\] {
  min-height: 55svh;
}

.min-h-\[6\.25rem\] {
  min-height: 6.25rem;
}

.min-h-\[80px\] {
  min-height: 80px;
}

.min-h-dvh {
  min-height: 100dvh;
}

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

.min-h-svh {
  min-height: 100svh;
}

.w-0 {
  width: 0px;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-1 {
  width: 0.25rem;
}

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

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

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-2\/5 {
  width: 40%;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

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

.w-3\/4 {
  width: 75%;
}

.w-3\/5 {
  width: 60%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-44 {
  width: 11rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-\[--sidebar-width\] {
  width: var(--sidebar-width);
}

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

.w-\[15\.5rem\] {
  width: 15.5rem;
}

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

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

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

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

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

.w-\[85vw\] {
  width: 85vw;
}

.w-\[95vw\] {
  width: 95vw;
}

.w-\[calc\(2\.5rem-1px\)\] {
  width: calc(2.5rem - 1px);
}

.w-\[calc\(var\(--ancho-de-la-hoja\2c 100\%\)-1px\)\] {
  width: calc(var(--ancho-de-la-hoja,100%) - 1px);
}

.w-auto {
  width: auto;
}

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

.w-full {
  width: 100%;
}

.w-max {
  width: max-content;
}

.w-px {
  width: 1px;
}

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

.min-w-10 {
  min-width: 2.5rem;
}

.min-w-11 {
  min-width: 2.75rem;
}

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-9 {
  min-width: 2.25rem;
}

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

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

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

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

.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}

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

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

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

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

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[--skeleton-width\] {
  max-width: var(--skeleton-width);
}

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

.max-w-\[120px\] {
  max-width: 120px;
}

.max-w-\[220px\] {
  max-width: 220px;
}

.max-w-\[240px\] {
  max-width: 240px;
}

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

.max-w-\[288px\] {
  max-width: 288px;
}

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

.max-w-\[320px\] {
  max-width: 320px;
}

.max-w-\[500px\] {
  max-width: 500px;
}

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

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

.max-w-\[calc\(100vw-1rem\)\] {
  max-width: calc(100vw - 1rem);
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-\[min\(88\%\2c var\(--pc-measure\2c 68ch\)\)\] {
  max-width: min(88%,var(--pc-measure,68ch));
}

.max-w-full {
  max-width: 100%;
}

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

.max-w-max {
  max-width: max-content;
}

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

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

.max-w-prose {
  max-width: 65ch;
}

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

.max-w-xl {
  max-width: 36rem;
}

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

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

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

.shrink {
  flex-shrink: 1;
}

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

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.basis-full {
  flex-basis: 100%;
}

.caption-bottom {
  caption-side: bottom;
}

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

.origin-left {
  transform-origin: left;
}

.origin-top {
  transform-origin: top;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-px {
  --tw-translate-x: -1px;
  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-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-px {
  --tw-translate-x: 1px;
  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-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[var\(--aurora-viewport-top\2c \.\.\.\)\] {
  --tw-translate-y: var(--aurora-viewport-top,...);
  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));
}

.rotate-0 {
  --tw-rotate: 0deg;
  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-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.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 ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {

  50% {
    opacity: .5;
  }
}

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

@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}

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

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.touch-pan-y {
  --tw-pan-y: pan-y;
  touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.touch-manipulation {
  touch-action: manipulation;
}

.select-none {
  user-select: none;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

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

.scroll-mt-20 {
  scroll-margin-top: 5rem;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

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

.grid-cols-\[82px_1fr_82px\] {
  grid-template-columns: 82px 1fr 82px;
}

.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}

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

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

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

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

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

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

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

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

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

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

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

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

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-1 {
  column-gap: 0.25rem;
}

.gap-x-2 {
  column-gap: 0.5rem;
}

.gap-x-3 {
  column-gap: 0.75rem;
}

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

.gap-x-5 {
  column-gap: 1.25rem;
}

.gap-x-6 {
  column-gap: 1.5rem;
}

.gap-x-8 {
  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-6 {
  row-gap: 1.5rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

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

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

.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * 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-border\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border) / 0.3);
}

.divide-pc-line > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--pc-line));
}

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

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

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

.overflow-x-hidden {
  overflow-x: hidden;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

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

.text-ellipsis {
  text-overflow: ellipsis;
}

.hyphens-auto {
  hyphens: auto;
}

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

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

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

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

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

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[26px\] {
  border-radius: 26px;
}

.rounded-\[2px\] {
  border-radius: 2px;
}

.rounded-\[4px\] {
  border-radius: 4px;
}

.rounded-\[5px\] {
  border-radius: 5px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

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

.rounded-lg {
  border-radius: var(--radius);
}

.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}

.rounded-none {
  border-radius: 0px;
}

.rounded-pc {
  border-radius: var(--pc-radius);
}

.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}

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

.rounded-b-pc {
  border-bottom-right-radius: var(--pc-radius);
  border-bottom-left-radius: var(--pc-radius);
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-br {
  border-bottom-right-radius: 0.25rem;
}

.rounded-tl-md {
  border-top-left-radius: calc(var(--radius) - 2px);
}

.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}

.rounded-tr-md {
  border-top-right-radius: calc(var(--radius) - 2px);
}

.border {
  border-width: 1px;
}

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

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

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

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

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

.border-l-0 {
  border-left-width: 0px;
}

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

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

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

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

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

.border-\[--color-border\] {
  border-color: var(--color-border);
}

.border-academic-plum-100 {
  --tw-border-opacity: 1;
  border-color: rgb(229 217 247 / var(--tw-border-opacity, 1));
}

.border-academic-plum-150 {
  --tw-border-opacity: 1;
  border-color: rgb(216 196 243 / var(--tw-border-opacity, 1));
}

.border-academic-plum-200 {
  --tw-border-opacity: 1;
  border-color: rgb(203 175 239 / var(--tw-border-opacity, 1));
}

.border-academic-plum-250 {
  --tw-border-opacity: 1;
  border-color: rgb(189 156 235 / var(--tw-border-opacity, 1));
}

.border-academic-plum-300 {
  --tw-border-opacity: 1;
  border-color: rgb(176 136 232 / var(--tw-border-opacity, 1));
}

.border-academic-plum-400 {
  --tw-border-opacity: 1;
  border-color: rgb(149 101 212 / var(--tw-border-opacity, 1));
}

.border-academic-plum-50 {
  --tw-border-opacity: 1;
  border-color: rgb(244 239 252 / var(--tw-border-opacity, 1));
}

.border-academic-plum-500 {
  --tw-border-opacity: 1;
  border-color: rgb(111 66 193 / var(--tw-border-opacity, 1));
}

.border-academic-plum-600 {
  --tw-border-opacity: 1;
  border-color: rgb(90 53 157 / var(--tw-border-opacity, 1));
}

.border-academic-plum-700 {
  --tw-border-opacity: 1;
  border-color: rgb(71 41 122 / var(--tw-border-opacity, 1));
}

.border-academic-plum-800 {
  --tw-border-opacity: 1;
  border-color: rgb(52 30 87 / var(--tw-border-opacity, 1));
}

.border-academic-plum-900 {
  --tw-border-opacity: 1;
  border-color: rgb(34 19 52 / var(--tw-border-opacity, 1));
}

.border-amber-200\/60 {
  border-color: rgb(253 230 138 / 0.6);
}

.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}

.border-ash {
  --tw-border-opacity: 1;
  border-color: rgb(233 236 239 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-700\/30 {
  border-color: rgb(29 78 216 / 0.3);
}

.border-border {
  border-color: hsl(var(--border));
}

.border-border\/20 {
  border-color: hsl(var(--border) / 0.2);
}

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

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

.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}

.border-border\/60 {
  border-color: hsl(var(--border) / 0.6);
}

.border-clarity-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(195 222 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-150 {
  --tw-border-opacity: 1;
  border-color: rgb(167 207 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(139 191 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-250 {
  --tw-border-opacity: 1;
  border-color: rgb(110 175 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(82 159 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(38 132 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-50 {
  --tw-border-opacity: 1;
  border-color: rgb(231 241 255 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(13 110 253 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(10 88 202 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(8 70 159 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-800 {
  --tw-border-opacity: 1;
  border-color: rgb(6 53 116 / var(--tw-border-opacity, 1));
}

.border-clarity-blue-900 {
  --tw-border-opacity: 1;
  border-color: rgb(4 35 73 / var(--tw-border-opacity, 1));
}

.border-cloud-white {
  --tw-border-opacity: 1;
  border-color: rgb(248 249 250 / var(--tw-border-opacity, 1));
}

.border-current {
  border-color: currentColor;
}

.border-deep-charcoal {
  --tw-border-opacity: 1;
  border-color: rgb(52 58 64 / var(--tw-border-opacity, 1));
}

.border-destructive {
  border-color: hsl(var(--destructive));
}

.border-destructive\/20 {
  border-color: hsl(var(--destructive) / 0.2);
}

.border-destructive\/30 {
  border-color: hsl(var(--destructive) / 0.3);
}

.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-gray-700\/50 {
  border-color: rgb(55 65 81 / 0.5);
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-input {
  border-color: hsl(var(--input));
}

.border-mineral-gray {
  --tw-border-opacity: 1;
  border-color: rgb(108 117 125 / var(--tw-border-opacity, 1));
}

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

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

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

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

.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

.border-pc-accent {
  border-color: hsl(var(--pc-accent));
}

.border-pc-accent\/25 {
  border-color: hsl(var(--pc-accent) / 0.25);
}

.border-pc-accent\/30 {
  border-color: hsl(var(--pc-accent) / 0.3);
}

.border-pc-accent\/40 {
  border-color: hsl(var(--pc-accent) / 0.4);
}

.border-pc-accent\/50 {
  border-color: hsl(var(--pc-accent) / 0.5);
}

.border-pc-agent-evidencia\/30 {
  border-color: hsl(var(--pc-agent-evidencia) / 0.3);
}

.border-pc-agent-evidencia\/40 {
  border-color: hsl(var(--pc-agent-evidencia) / 0.4);
}

.border-pc-agent-evidencia\/50 {
  border-color: hsl(var(--pc-agent-evidencia) / 0.5);
}

.border-pc-agent-formulacion\/40 {
  border-color: hsl(var(--pc-agent-formulacion) / 0.4);
}

.border-pc-agent-formulacion\/50 {
  border-color: hsl(var(--pc-agent-formulacion) / 0.5);
}

.border-pc-agent-memoria {
  border-color: hsl(var(--pc-agent-memoria));
}

.border-pc-agent-memoria\/30 {
  border-color: hsl(var(--pc-agent-memoria) / 0.3);
}

.border-pc-agent-memoria\/40 {
  border-color: hsl(var(--pc-agent-memoria) / 0.4);
}

.border-pc-agent-memoria\/50 {
  border-color: hsl(var(--pc-agent-memoria) / 0.5);
}

.border-pc-agent-perspectiva\/40 {
  border-color: hsl(var(--pc-agent-perspectiva) / 0.4);
}

.border-pc-agent-perspectiva\/50 {
  border-color: hsl(var(--pc-agent-perspectiva) / 0.5);
}

.border-pc-agent-sistema\/40 {
  border-color: hsl(var(--pc-agent-sistema) / 0.4);
}

.border-pc-agent-sistema\/60 {
  border-color: hsl(var(--pc-agent-sistema) / 0.6);
}

.border-pc-danger {
  border-color: hsl(var(--pc-danger));
}

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

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

.border-pc-ink-3 {
  border-color: hsl(var(--pc-ink-3));
}

.border-pc-line {
  border-color: hsl(var(--pc-line));
}

.border-pc-line-2 {
  border-color: hsl(var(--pc-line-2));
}

.border-pc-line\/70 {
  border-color: hsl(var(--pc-line) / 0.7);
}

.border-primary {
  border-color: hsl(var(--primary));
}

.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-serene-teal-100 {
  --tw-border-opacity: 1;
  border-color: rgb(195 250 232 / var(--tw-border-opacity, 1));
}

.border-serene-teal-150 {
  --tw-border-opacity: 1;
  border-color: rgb(179 245 223 / var(--tw-border-opacity, 1));
}

.border-serene-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(140 245 210 / var(--tw-border-opacity, 1));
}

.border-serene-teal-250 {
  --tw-border-opacity: 1;
  border-color: rgb(110 237 198 / var(--tw-border-opacity, 1));
}

.border-serene-teal-300 {
  --tw-border-opacity: 1;
  border-color: rgb(81 234 187 / var(--tw-border-opacity, 1));
}

.border-serene-teal-400 {
  --tw-border-opacity: 1;
  border-color: rgb(45 212 167 / var(--tw-border-opacity, 1));
}

.border-serene-teal-50 {
  --tw-border-opacity: 1;
  border-color: rgb(230 252 245 / var(--tw-border-opacity, 1));
}

.border-serene-teal-500 {
  --tw-border-opacity: 1;
  border-color: rgb(32 201 151 / var(--tw-border-opacity, 1));
}

.border-serene-teal-600 {
  --tw-border-opacity: 1;
  border-color: rgb(26 161 121 / var(--tw-border-opacity, 1));
}

.border-serene-teal-700 {
  --tw-border-opacity: 1;
  border-color: rgb(20 125 95 / var(--tw-border-opacity, 1));
}

.border-serene-teal-800 {
  --tw-border-opacity: 1;
  border-color: rgb(15 94 71 / var(--tw-border-opacity, 1));
}

.border-serene-teal-900 {
  --tw-border-opacity: 1;
  border-color: rgb(10 63 47 / var(--tw-border-opacity, 1));
}

.border-sidebar-border {
  border-color: hsl(var(--sidebar-border));
}

.border-transparent {
  border-color: transparent;
}

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

.border-l-pc-accent {
  border-left-color: hsl(var(--pc-accent));
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[--color-bg\] {
  background-color: var(--color-bg);
}

.bg-\[hsl\(var\(--agent-orquestador-bg\)\)\] {
  background-color: hsl(var(--agent-orquestador-bg));
}

.bg-\[hsl\(var\(--pc-paper\)\)\] {
  background-color: hsl(var(--pc-paper));
}

.bg-\[hsl\(var\(--user-bubble-bg\)\)\] {
  background-color: hsl(var(--user-bubble-bg));
}

.bg-academic-plum-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 217 247 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-150 {
  --tw-bg-opacity: 1;
  background-color: rgb(216 196 243 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 175 239 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-250 {
  --tw-bg-opacity: 1;
  background-color: rgb(189 156 235 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(176 136 232 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(149 101 212 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 239 252 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(111 66 193 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(90 53 157 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 41 122 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 30 87 / var(--tw-bg-opacity, 1));
}

.bg-academic-plum-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 19 52 / var(--tw-bg-opacity, 1));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/70 {
  background-color: rgb(245 158 11 / 0.7);
}

.bg-ash {
  --tw-bg-opacity: 1;
  background-color: rgb(233 236 239 / var(--tw-bg-opacity, 1));
}

.bg-background {
  background-color: hsl(var(--background));
}

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

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-900\/20 {
  background-color: rgb(30 58 138 / 0.2);
}

.bg-border {
  background-color: hsl(var(--border));
}

.bg-card {
  background-color: hsl(var(--card));
}

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

.bg-clarity-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(195 222 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-150 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 207 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 191 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-250 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 175 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 159 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 132 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 241 255 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 110 253 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 88 202 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 70 159 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 53 116 / var(--tw-bg-opacity, 1));
}

.bg-clarity-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(4 35 73 / var(--tw-bg-opacity, 1));
}

.bg-cloud-white {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.bg-deep-charcoal {
  --tw-bg-opacity: 1;
  background-color: rgb(52 58 64 / var(--tw-bg-opacity, 1));
}

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}

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

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-foreground {
  background-color: hsl(var(--foreground));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-800\/30 {
  background-color: rgb(31 41 55 / 0.3);
}

.bg-gray-800\/50 {
  background-color: rgb(31 41 55 / 0.5);
}

.bg-gray-900\/95 {
  background-color: rgb(17 24 39 / 0.95);
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-mineral-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(108 117 125 / var(--tw-bg-opacity, 1));
}

.bg-mineral-gray\/20 {
  background-color: rgb(108 117 125 / 0.2);
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}

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

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

.bg-neutral-900\/80 {
  background-color: rgb(23 23 23 / 0.8);
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}

.bg-pc-accent {
  background-color: hsl(var(--pc-accent));
}

.bg-pc-accent-weak {
  background-color: hsl(var(--pc-accent-weak));
}

.bg-pc-accent\/10 {
  background-color: hsl(var(--pc-accent) / 0.1);
}

.bg-pc-accent\/70 {
  background-color: hsl(var(--pc-accent) / 0.7);
}

.bg-pc-accent\/\[0\.06\] {
  background-color: hsl(var(--pc-accent) / 0.06);
}

.bg-pc-accent\/\[0\.07\] {
  background-color: hsl(var(--pc-accent) / 0.07);
}

.bg-pc-agent-evidencia {
  background-color: hsl(var(--pc-agent-evidencia));
}

.bg-pc-agent-evidencia\/10 {
  background-color: hsl(var(--pc-agent-evidencia) / 0.1);
}

.bg-pc-agent-evidencia\/70 {
  background-color: hsl(var(--pc-agent-evidencia) / 0.7);
}

.bg-pc-agent-evidencia\/\[0\.03\] {
  background-color: hsl(var(--pc-agent-evidencia) / 0.03);
}

.bg-pc-agent-evidencia\/\[0\.06\] {
  background-color: hsl(var(--pc-agent-evidencia) / 0.06);
}

.bg-pc-agent-formulacion {
  background-color: hsl(var(--pc-agent-formulacion));
}

.bg-pc-agent-formulacion\/10 {
  background-color: hsl(var(--pc-agent-formulacion) / 0.1);
}

.bg-pc-agent-memoria {
  background-color: hsl(var(--pc-agent-memoria));
}

.bg-pc-agent-memoria\/10 {
  background-color: hsl(var(--pc-agent-memoria) / 0.1);
}

.bg-pc-agent-memoria\/70 {
  background-color: hsl(var(--pc-agent-memoria) / 0.7);
}

.bg-pc-agent-memoria\/\[0\.05\] {
  background-color: hsl(var(--pc-agent-memoria) / 0.05);
}

.bg-pc-agent-perspectiva {
  background-color: hsl(var(--pc-agent-perspectiva));
}

.bg-pc-agent-perspectiva\/10 {
  background-color: hsl(var(--pc-agent-perspectiva) / 0.1);
}

.bg-pc-agent-sistema {
  background-color: hsl(var(--pc-agent-sistema));
}

.bg-pc-agent-sistema\/10 {
  background-color: hsl(var(--pc-agent-sistema) / 0.1);
}

.bg-pc-danger-weak {
  background-color: hsl(var(--pc-danger-weak));
}

.bg-pc-ink {
  background-color: hsl(var(--pc-ink));
}

.bg-pc-ink-3\/40 {
  background-color: hsl(var(--pc-ink-3) / 0.4);
}

.bg-pc-line {
  background-color: hsl(var(--pc-line));
}

.bg-pc-line-2 {
  background-color: hsl(var(--pc-line-2));
}

.bg-pc-line\/40 {
  background-color: hsl(var(--pc-line) / 0.4);
}

.bg-pc-paper {
  background-color: hsl(var(--pc-paper));
}

.bg-pc-paper\/85 {
  background-color: hsl(var(--pc-paper) / 0.85);
}

.bg-pc-paper\/90 {
  background-color: hsl(var(--pc-paper) / 0.9);
}

.bg-pc-paper\/95 {
  background-color: hsl(var(--pc-paper) / 0.95);
}

.bg-pc-surface {
  background-color: hsl(var(--pc-surface));
}

.bg-pc-surface-2 {
  background-color: hsl(var(--pc-surface-2));
}

.bg-pc-surface-2\/40 {
  background-color: hsl(var(--pc-surface-2) / 0.4);
}

.bg-pc-surface-2\/50 {
  background-color: hsl(var(--pc-surface-2) / 0.5);
}

.bg-pc-surface-2\/60 {
  background-color: hsl(var(--pc-surface-2) / 0.6);
}

.bg-pc-surface-2\/70 {
  background-color: hsl(var(--pc-surface-2) / 0.7);
}

.bg-popover {
  background-color: hsl(var(--popover));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/60 {
  background-color: hsl(var(--primary) / 0.6);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-secondary\/10 {
  background-color: hsl(var(--secondary) / 0.1);
}

.bg-secondary\/20 {
  background-color: hsl(var(--secondary) / 0.2);
}

.bg-secondary\/30 {
  background-color: hsl(var(--secondary) / 0.3);
}

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

.bg-secondary\/60 {
  background-color: hsl(var(--secondary) / 0.6);
}

.bg-secondary\/70 {
  background-color: hsl(var(--secondary) / 0.7);
}

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

.bg-serene-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(195 250 232 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-150 {
  --tw-bg-opacity: 1;
  background-color: rgb(179 245 223 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(140 245 210 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-250 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 237 198 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(81 234 187 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 167 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(230 252 245 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(32 201 151 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(26 161 121 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 125 95 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 94 71 / var(--tw-bg-opacity, 1));
}

.bg-serene-teal-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(10 63 47 / var(--tw-bg-opacity, 1));
}

.bg-sidebar {
  background-color: hsl(var(--sidebar-background));
}

.bg-sidebar-border {
  background-color: hsl(var(--sidebar-border));
}

.bg-success {
  background-color: hsl(var(--success));
}

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

.bg-warning {
  background-color: hsl(var(--warning));
}

.bg-warning\/10 {
  background-color: hsl(var(--warning) / 0.1);
}

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

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

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

.from-pc-surface-2 {
  --tw-gradient-from: hsl(var(--pc-surface-2)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--pc-surface-2) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.fill-current {
  fill: currentColor;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

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

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-\[1px\] {
  padding: 1px;
}

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

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

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

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

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

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

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

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

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

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

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

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

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

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

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

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

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

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

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

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-0\.5 {
  padding-bottom: 0.125rem;
}

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

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

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

.pb-36 {
  padding-bottom: 9rem;
}

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

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

.pb-\[calc\(5\.5rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}

.pb-\[max\(0\.75rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(0.75rem,env(safe-area-inset-bottom));
}

.pb-\[max\(1\.25rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(1.25rem,env(safe-area-inset-bottom));
}

.pb-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(1rem,env(safe-area-inset-bottom));
}

.pb-\[max\(\2026\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(…,env(safe-area-inset-bottom));
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-2\.5 {
  padding-left: 0.625rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-3\.5 {
  padding-left: 0.875rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

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

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

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

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

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-24 {
  padding-right: 6rem;
}

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

.pr-4 {
  padding-right: 1rem;
}

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

.pt-0 {
  padding-top: 0px;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

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

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

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

.pt-2\.5 {
  padding-top: 0.625rem;
}

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

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

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

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

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

.pt-\[12svh\] {
  padding-top: 12svh;
}

.pt-\[6svh\] {
  padding-top: 6svh;
}

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

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

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

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

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

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

.font-pc-mono {
  font-family: var(--font-mono-pc), ui-monospace, SFMono-Regular, monospace;
}

.font-sans {
  font-family: var(--font-sans), system-ui, sans-serif;
}

.font-serif {
  font-family: var(--font-serif), Georgia, serif;
}

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

.text-2xs {
  font-size: 0.6875rem;
  line-height: 1rem;
}

.text-\[0\.8rem\] {
  font-size: 0.8rem;
}

.text-\[1\.4rem\] {
  font-size: 1.4rem;
}

.text-\[1\.75rem\] {
  font-size: 1.75rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[19px\] {
  font-size: 19px;
}

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

.text-\[22px\] {
  font-size: 22px;
}

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

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-pc-body {
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  line-height: var(--pc-leading-body, 1.7);
}

.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-medium {
  font-weight: 500;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.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-5 {
  line-height: 1.25rem;
}

.leading-\[1\.08\] {
  line-height: 1.08;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.75\] {
  line-height: 1.75;
}

.leading-none {
  line-height: 1;
}

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

.leading-snug {
  line-height: 1.375;
}

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

.tracking-\[-0\.005em\] {
  letter-spacing: -0.005em;
}

.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}

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

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

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[hsl\(var\(--user-bubble-text\)\)\] {
  color: hsl(var(--user-bubble-text));
}

.text-academic-plum-100 {
  --tw-text-opacity: 1;
  color: rgb(229 217 247 / var(--tw-text-opacity, 1));
}

.text-academic-plum-150 {
  --tw-text-opacity: 1;
  color: rgb(216 196 243 / var(--tw-text-opacity, 1));
}

.text-academic-plum-200 {
  --tw-text-opacity: 1;
  color: rgb(203 175 239 / var(--tw-text-opacity, 1));
}

.text-academic-plum-250 {
  --tw-text-opacity: 1;
  color: rgb(189 156 235 / var(--tw-text-opacity, 1));
}

.text-academic-plum-300 {
  --tw-text-opacity: 1;
  color: rgb(176 136 232 / var(--tw-text-opacity, 1));
}

.text-academic-plum-400 {
  --tw-text-opacity: 1;
  color: rgb(149 101 212 / var(--tw-text-opacity, 1));
}

.text-academic-plum-50 {
  --tw-text-opacity: 1;
  color: rgb(244 239 252 / var(--tw-text-opacity, 1));
}

.text-academic-plum-500 {
  --tw-text-opacity: 1;
  color: rgb(111 66 193 / var(--tw-text-opacity, 1));
}

.text-academic-plum-600 {
  --tw-text-opacity: 1;
  color: rgb(90 53 157 / var(--tw-text-opacity, 1));
}

.text-academic-plum-700 {
  --tw-text-opacity: 1;
  color: rgb(71 41 122 / var(--tw-text-opacity, 1));
}

.text-academic-plum-800 {
  --tw-text-opacity: 1;
  color: rgb(52 30 87 / var(--tw-text-opacity, 1));
}

.text-academic-plum-900 {
  --tw-text-opacity: 1;
  color: rgb(34 19 52 / var(--tw-text-opacity, 1));
}

.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}

.text-amber-600\/70 {
  color: rgb(217 119 6 / 0.7);
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-ash {
  --tw-text-opacity: 1;
  color: rgb(233 236 239 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-clarity-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(195 222 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-150 {
  --tw-text-opacity: 1;
  color: rgb(167 207 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(139 191 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-250 {
  --tw-text-opacity: 1;
  color: rgb(110 175 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(82 159 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(38 132 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-50 {
  --tw-text-opacity: 1;
  color: rgb(231 241 255 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(13 110 253 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(10 88 202 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(8 70 159 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(6 53 116 / var(--tw-text-opacity, 1));
}

.text-clarity-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(4 35 73 / var(--tw-text-opacity, 1));
}

.text-cloud-white {
  --tw-text-opacity: 1;
  color: rgb(248 249 250 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-deep-charcoal {
  --tw-text-opacity: 1;
  color: rgb(52 58 64 / var(--tw-text-opacity, 1));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-destructive\/70 {
  color: hsl(var(--destructive) / 0.7);
}

.text-destructive\/80 {
  color: hsl(var(--destructive) / 0.8);
}

.text-emerald-600\/60 {
  color: rgb(5 150 105 / 0.6);
}

.text-emerald-600\/70 {
  color: rgb(5 150 105 / 0.7);
}

.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-foreground\/50 {
  color: hsl(var(--foreground) / 0.5);
}

.text-foreground\/70 {
  color: hsl(var(--foreground) / 0.7);
}

.text-foreground\/80 {
  color: hsl(var(--foreground) / 0.8);
}

.text-foreground\/85 {
  color: hsl(var(--foreground) / 0.85);
}

.text-foreground\/90 {
  color: hsl(var(--foreground) / 0.9);
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-mineral-gray {
  --tw-text-opacity: 1;
  color: rgb(108 117 125 / var(--tw-text-opacity, 1));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}

.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}

.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}

.text-muted-foreground\/70 {
  color: hsl(var(--muted-foreground) / 0.7);
}

.text-muted-foreground\/80 {
  color: hsl(var(--muted-foreground) / 0.8);
}

.text-muted-foreground\/85 {
  color: hsl(var(--muted-foreground) / 0.85);
}

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

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

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

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

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

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-pc-accent {
  color: hsl(var(--pc-accent));
}

.text-pc-agent-evidencia {
  color: hsl(var(--pc-agent-evidencia));
}

.text-pc-agent-evidencia\/80 {
  color: hsl(var(--pc-agent-evidencia) / 0.8);
}

.text-pc-agent-evidencia\/90 {
  color: hsl(var(--pc-agent-evidencia) / 0.9);
}

.text-pc-agent-formulacion {
  color: hsl(var(--pc-agent-formulacion));
}

.text-pc-agent-memoria {
  color: hsl(var(--pc-agent-memoria));
}

.text-pc-agent-perspectiva {
  color: hsl(var(--pc-agent-perspectiva));
}

.text-pc-agent-sistema {
  color: hsl(var(--pc-agent-sistema));
}

.text-pc-danger {
  color: hsl(var(--pc-danger));
}

.text-pc-danger\/40 {
  color: hsl(var(--pc-danger) / 0.4);
}

.text-pc-danger\/80 {
  color: hsl(var(--pc-danger) / 0.8);
}

.text-pc-ink {
  color: hsl(var(--pc-ink));
}

.text-pc-ink-2 {
  color: hsl(var(--pc-ink-2));
}

.text-pc-ink-3 {
  color: hsl(var(--pc-ink-3));
}

.text-pc-ink-3\/60 {
  color: hsl(var(--pc-ink-3) / 0.6);
}

.text-pc-ink-3\/70 {
  color: hsl(var(--pc-ink-3) / 0.7);
}

.text-pc-line {
  color: hsl(var(--pc-line));
}

.text-pc-paper {
  color: hsl(var(--pc-paper));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-primary\/80 {
  color: hsl(var(--primary) / 0.8);
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.text-serene-teal-100 {
  --tw-text-opacity: 1;
  color: rgb(195 250 232 / var(--tw-text-opacity, 1));
}

.text-serene-teal-150 {
  --tw-text-opacity: 1;
  color: rgb(179 245 223 / var(--tw-text-opacity, 1));
}

.text-serene-teal-200 {
  --tw-text-opacity: 1;
  color: rgb(140 245 210 / var(--tw-text-opacity, 1));
}

.text-serene-teal-250 {
  --tw-text-opacity: 1;
  color: rgb(110 237 198 / var(--tw-text-opacity, 1));
}

.text-serene-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(81 234 187 / var(--tw-text-opacity, 1));
}

.text-serene-teal-400 {
  --tw-text-opacity: 1;
  color: rgb(45 212 167 / var(--tw-text-opacity, 1));
}

.text-serene-teal-50 {
  --tw-text-opacity: 1;
  color: rgb(230 252 245 / var(--tw-text-opacity, 1));
}

.text-serene-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(32 201 151 / var(--tw-text-opacity, 1));
}

.text-serene-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(26 161 121 / var(--tw-text-opacity, 1));
}

.text-serene-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(20 125 95 / var(--tw-text-opacity, 1));
}

.text-serene-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(15 94 71 / var(--tw-text-opacity, 1));
}

.text-serene-teal-900 {
  --tw-text-opacity: 1;
  color: rgb(10 63 47 / var(--tw-text-opacity, 1));
}

.text-sidebar-foreground {
  color: hsl(var(--sidebar-foreground));
}

.text-sidebar-foreground\/70 {
  color: hsl(var(--sidebar-foreground) / 0.7);
}

.text-success {
  color: hsl(var(--success));
}

.text-warning {
  color: hsl(var(--warning));
}

.text-warning-foreground {
  color: hsl(var(--warning-foreground));
}

.text-warning-foreground\/70 {
  color: hsl(var(--warning-foreground) / 0.7);
}

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

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

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

.decoration-pc-line-2 {
  text-decoration-color: hsl(var(--pc-line-2));
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.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-foreground {
  accent-color: hsl(var(--foreground));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px 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-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 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-\[0_24px_80px_-40px_hsl\(var\(--lv-aurora-teal\)\/0\.5\)\] {
  --tw-shadow: 0 24px 80px -40px hsl(var(--lv-aurora-teal)/0.5);
  --tw-shadow-colored: 0 24px 80px -40px 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-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
  --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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.ring-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.ring-purple-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}

.ring-sidebar-ring {
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.ring-transparent {
  --tw-ring-color: transparent;
}

.ring-offset-0 {
  --tw-ring-offset-width: 0px;
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}

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

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -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-md {
  --tw-backdrop-blur: blur(12px);
  -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, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[background-color\2c box-shadow\2c transform\] {
  transition-property: background-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[border-color\2c box-shadow\] {
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[box-shadow\2c border-color\] {
  transition-property: box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[clip-path\] {
  transition-property: clip-path;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[color\2c background-color\2c border-color\2c box-shadow\2c transform\] {
  transition-property: color,background-color,border-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[color\2c background-color\2c box-shadow\2c transform\] {
  transition-property: color,background-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[height\2c opacity\] {
  transition-property: height,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[margin\2c opa\] {
  transition-property: margin,opa;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  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-1000 {
  transition-duration: 1000ms;
}

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

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

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

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

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

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

.ease-aurora {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.ease-linear {
  transition-timing-function: linear;
}

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

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

@keyframes enter {

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

@keyframes exit {

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

.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.fade-in {
  --tw-enter-opacity: 0;
}

.fade-in-0 {
  --tw-enter-opacity: 0;
}

.fade-in-80 {
  --tw-enter-opacity: 0.8;
}

.zoom-in-95 {
  --tw-enter-scale: .95;
}

.duration-1000 {
  animation-duration: 1000ms;
}

.duration-150 {
  animation-duration: 150ms;
}

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

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

.duration-500 {
  animation-duration: 500ms;
}

.duration-normal {
  animation-duration: 300ms;
}

.duration-quick {
  animation-duration: 200ms;
}

.ease-aurora {
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.ease-linear {
  animation-timing-function: linear;
}

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

.ease-standard {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.running {
  animation-play-state: running;
}

/* Ocultar scrollbar en todos los navegadores */

.scrollbar-hide {
    /* Firefox */
    scrollbar-width: none;
    /* IE and Edge */
    -ms-overflow-style: none;
  }

.scrollbar-hide::-webkit-scrollbar {
    /* Chrome, Safari and Opera */
    display: none;
  }

/* Ultra-thin scrollbar for contained areas (e.g. step lists) */

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.15) transparent;
  }

.scrollbar-thin::-webkit-scrollbar {
    width: 3px;
  }

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.15);
    border-radius: 9999px;
  }

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.3);
  }

/*
   * Mobile swipe fix — Radix ScrollArea viewports inside a touch-pan-y
   * container (e.g. workspace sliding panels) must also declare pan-y so the
   * browser hands horizontal gestures to framer-motion's drag handler instead
   * of capturing them for potential native horizontal scrolling.
   */

.touch-pan-y [data-radix-scroll-area-viewport] {
    touch-action: pan-y;
  }

/* Screen reader only - WCAG 2.1 AA accessibility */

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

/* Animación de cursor tipo teclado - natural, lenta y pausada */

@keyframes cursor-blink {
    0%, 45% {
      opacity: 1;
    }
    50%, 95% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

/* Sync status pulse — gentle throb on the cloud icon for "syncing" state */

@keyframes sync-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }

.animate-sync-pulse {
    animation: sync-pulse 1.8s ease-in-out infinite;
  }

.\[--clinical-document-pad-x\:1\.25rem\] {
  --clinical-document-pad-x: 1.25rem;
}

.\[-webkit-overflow-scrolling\:touch\] {
  -webkit-overflow-scrolling: touch;
}

.\[contain-intrinsic-size\:auto_52px\] {
  contain-intrinsic-size: auto 52px;
}

.\[content-visibility\:auto\] {
  content-visibility: auto;
}

.\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

.\[scrollbar-gutter\:stable\] {
  scrollbar-gutter: stable;
}

.\[scrollbar-gutter\:stable_both-edges\] {
  scrollbar-gutter: stable both-edges;
}

.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

.\[touch-action\:pan-x\] {
  touch-action: pan-x;
}

.\[touch-action\:pan-y\] {
  touch-action: pan-y;
}

.\[writing-mode\:vertical-lr\] {
  writing-mode: vertical-lr;
}

/* ============================================================================
 * tokens.css — Aurora design tokens (light + dark)
 * Part of the globals.css split (SRP Track B4). Imported FIRST by globals.css so
 * the token custom-properties land at the top of the Tailwind `base` layer,
 * exactly as before the split. Re-homed verbatim; values are unchanged (B4 is
 * PREP for the token redesign, not the redesign itself).
 * ========================================================================== */

/* ============================================================================
 * base.css — global element base, base utility helpers, and global aesthetics
 * Part of the globals.css split (SRP Track B4). Imported after tokens.css.
 * Holds: the `@layer base` element resets/body styling, the non-animation
 * `@layer utilities` helpers (scrollbars / touch / sr-only / text-balance), and
 * the post-layer global aesthetics (focus-visible, glass-card, warm shadows).
 * Re-homed verbatim — no visual change.
 * ========================================================================== */

/* ─── Enhanced Focus Indicators (WCAG 2.4.7 AA) ── research §6.2 ────────── */

/* Sin `border-radius: inherit` (auditoría del shell 2026-09-30, §1.3): le
 * copiaba al elemento enfocado el radio de su PADRE, así que el foco cambiaba
 * la forma del control. El contorno ya sigue el radio propio del elemento.
 * Este respaldo universal es lo que garantiza que nada se quede sin foco
 * visible; dentro de la sala lo pisa el anillo de acento de chat-redesign.css,
 * que pesa (0,2,0) contra este (0,1,0). */

*:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Botones y campos FUERA de la sala, sin cambios. Dentro, un solo anillo: el
 * de chat-redesign.css. `[role="button"]` pesa (0,2,0) y va después de las
 * utilidades, así que devolvía un contorno de 3 px encima de los
 * `focus-visible:outline-none` + `ring-*` (doble anillo); y los campos
 * teñían además el borde, que con el contorno a 2 px se leía como dos líneas
 * concéntricas. La exclusión va dentro de `:not(:where(…))`, que no suma
 * especificidad: fuera de la sala cada selector pesa exactamente lo que
 * pesaba (tests/characterization-v-cascada-foco-unico.test.ts). */

button:focus-visible:not(:where([data-aurora-redesign] *)),
[role="button"]:focus-visible:not(:where([data-aurora-redesign] *)) {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
}

input:focus-visible:not(:where([data-aurora-redesign] *)),
textarea:focus-visible:not(:where([data-aurora-redesign] *)),
select:focus-visible:not(:where([data-aurora-redesign] *)) {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 0;
  border-color: hsl(var(--ring));
}

/* ─── Warm Shadow Utility ── research §3.1 Scandinavian Warmth ──────────── */

/* CSS-05: the warm-brown rgba() literals are expressed via the --foreground
 * token so light-mode elevation tracks the palette. In light mode --foreground
 * is near-black (210 14% 15%), giving a tint very close to the original warm
 * rgba(60,50,40,…). The dark override keeps an explicit black shadow because
 * --foreground inverts to light on dark and would otherwise produce a glow. */

.shadow-warm-sm {
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.08);
}

.shadow-warm {
  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.06), 0 1px 3px hsl(var(--foreground) / 0.08);
}

.dark .shadow-warm-sm,
.dark .shadow-warm {
  /* Shadows are less visible on dark — use standard black box-shadow
   * (NOT --foreground, which is light on dark and would invert the effect). */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ============================================================================
 * markdown.css — clinical markdown typography (the non-table `.markdown-content`
 * rules) plus the KaTeX and Shiki library-output overrides.
 * Part of the globals.css split (SRP Track B4). Imported after base.css.
 * Table-specific rules live in clinical-tables.css. The `.markdown-content`
 * rules stay in `@layer components`; the KaTeX/Shiki overrides stay plain CSS
 * (post-utilities) so they keep winning over the library defaults, exactly as
 * before the split. Re-homed verbatim — no visual change. Desde el carril V de
 * la auditoría del shell (2026-09-30) esta hoja ya NO viste la prosa del chat:
 * ver «El vestido de la prosa lo escribe el renderer» más abajo.
 * ========================================================================== */

/* Estilos específicos para contenido markdown en mensajes clínicos */

/* === KaTeX clinical overrides ===
 * Ajustes para integrar el renderizado matemático de KaTeX con la paleta
 * clínica de Aurora. Aplicamos un tamaño cómodo (1.05em), heredamos el color
 * del contexto (foreground en claro, contraste alto en oscuro) y suavizamos
 * el espaciado vertical en fórmulas display para no romper el ritmo de
 * lectura clínica.
 */

.katex {
  /* Heredar la familia tipográfica del contexto Aurora (IBM Plex Serif/Sans),
   * KaTeX usa su propia fuente "KaTeX_Main" para los glifos matemáticos.
   * Mantenemos la fuente de KaTeX para los símbolos pero ajustamos size/color. */
  font-size: 1.05em;
  color: inherit;
  line-height: 1.4;
}

.katex-display {
  /* Bloques display: margen vertical generoso, scroll horizontal si la fórmula
   * desborda en mobile, sin romper el flujo. */
  margin: 1rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
}

.katex-display > .katex {
  /* No forzar tamaño extra en display — el ratio inline (1.05em) ya es
   * suficiente y evita que las fracciones desborden contenedores estrechos. */
  font-size: 1.1em;
  white-space: nowrap;
}

/* Dark mode: KaTeX hereda color via `color: inherit`. Reforzamos el contraste
 * para los pequeños glifos matemáticos que tienden a apagarse en oscuro. */

.dark .katex {
  color: hsl(var(--foreground));
}

/* Errores de parsing de KaTeX: en streaming es común recibir fórmulas
 * incompletas. Tonificamos el rojo nativo para no alarmar al clínico. */

.katex-error {
  color: hsl(var(--muted-foreground)) !important;
  background: hsl(var(--secondary) / 0.4);
  padding: 0.1em 0.3em;
  /* calc(var(--radius) - 8px) ≈ 0.25rem at the default 0.75rem token (CSS-04).
   * Dentro de la sala `--radius` es el de pc (7 px): el cálculo da -1 px, que
   * el navegador recorta a 0 — esquinas rectas en el aviso de fórmula rota. */
  border-radius: calc(var(--radius) - 8px);
  font-size: 0.95em;
}

/* Shiki: los bloques con tema dual ya emiten `--shiki-dark` y `--shiki-light`.
 * Aurora controla el tema activo con `.dark` en el contenedor raíz, así que
 * forzamos las variables de Shiki a leer del tema correcto. */

.shiki,
.shiki span {
  background-color: var(--shiki-light-bg) !important;
  color: var(--shiki-light) !important;
}

.dark .shiki,
.dark .shiki span {
  background-color: var(--shiki-dark-bg) !important;
  color: var(--shiki-dark) !important;
}

/* El `pre` que envuelve a Shiki ya tiene padding/borde aplicado por
 * `rehype-aurora-classes`; aquí solo aseguramos que el `<code>` interno no
 * herede el fondo secundario inline-code. */

pre.shiki,
pre > code.shiki,
pre code[class*="language-"] {
  background-color: transparent;
}

/* ============================================================================
 * Medida de lectura — flujo y ruptura.
 *
 * El texto se topa en `--pc-measure` (68ch ≈ el óptimo de 66 de Bringhurst);
 * tablas, bloques de código y figuras NO, porque necesitan el ancho entero del
 * contenedor y ya tienen su propio desplazamiento en clinical-tables.css.
 * Medido el 2026-09-14: el chat estaba en ~106 caracteres por línea en
 * escritorio, por encima del techo de 80 que fija WCAG 1.4.8 (AAA).
 *
 * `ch` y no `px`: la medida sigue al tamaño de fuente, así que se mantiene en
 * ~68 caracteres en todos los pasos de la escala fluida sin breakpoints.
 *
 * Una prueba mecánica vigila que estas reglas no alcancen `table`/`pre`/`figure`
 * y que no escapen de `.markdown-content` — la landing estampa el mismo
 * atributo de rediseño y no debe heredar un tope de lectura.
 * ========================================================================== */

/* ============================================================================
 * clinical-tables.css — clinical table rendering (base `.markdown-content`
 * tables, the agent-generated `.clinical-table*` suite, the mobile container-
 * query breakout, the `.chat-message-bubble` container context and scroll
 * indicators).
 * Part of the globals.css split (SRP Track B4). Imported after markdown.css so
 * `.clinical-table*` overrides keep landing AFTER the base table rules within
 * the Tailwind `components` layer — identical cascade to before the split.
 *
 * NOTE 1: the doubled `.markdown-content X, .prose X` selectors are NOT
 * redundant — chat surfaces apply `.markdown-content`, the document surfaces
 * apply `.prose`-only; both halves are load-bearing.
 *
 * NOTE 2 (B4 !important strip): the original block carried ~66 `!important`
 * flags whose comment claimed they were needed "para sobrescribir prose".
 * @tailwindcss/typography IS installed (tailwind.config.ts), but its rules are
 * `.prose :where(...)` selectors at specificity (0,1,0), so every
 * `.markdown-content .clinical-table-*` / `.prose .clinical-table-*` selector
 * (0,2,0) already beats both the plugin and the base `.markdown-content
 * table|td|th` rules (0,1,1). Those vestigial `!important`s were removed. The
 * ones RETAINED below are genuinely load-bearing tiebreaks, NOT prose defenses:
 *   - `.clinical-table-row { transition … !important }` — wins over the global
 *     `*{transition-duration:.01ms!important}` reduced-motion rule (same as before);
 *   - the mobile scroll-indicator `::after` arrow + `.scrolled::after` — resolve
 *     arrow-vs-gradient-vs-`:hover`-vs-reduced-motion within the indicator.
 * Removing those would change rendering, so they stay.
 * ========================================================================== */

/* ============================================================================
 * animations.css — keyframes, animation utility classes, the streaming /
 * loading / timeline motion, and the reduced-motion handling.
 * Part of the globals.css split (SRP Track B4). Imported LAST by globals.css so
 * the plain-CSS animation rules keep landing after every Tailwind layer, exactly
 * as before the split. Re-homed verbatim — no visual change.
 *
 * CSS-09 (motion-token scope): the keyframe LOOP durations below (1.2s / 1.6s /
 * 1.8s / 2.4s) are intentionally NOT mapped onto the --duration-* token ladder
 * (100/200/300/500ms). That ladder governs discrete UI TRANSITIONS (hover, open/
 * close); these are ambient, infinite "breathing" loops (cursor blink, sync
 * pulse, shimmer, streaming dots, timeline heartbeat) whose slow >500ms cadence
 * IS the design — the comments on each describe the calm, clinical rhythm. The
 * easing is likewise kept as the symmetric `ease-in-out` keyword on purpose:
 * these loops oscillate to a resting state and back, so a symmetric curve is
 * correct; --ease-standard (asymmetric fast-out, cubic-bezier(0.4,0,0.2,1)) would
 * skew the breathing rhythm. Left as-is by design; flagged for the record only.
 * All loops are still neutralised by the consolidated prefers-reduced-motion
 * block at the foot of this file (the reduced-motion source of truth).
 * ========================================================================== */

/* ─── Skeleton shimmer (premium loading state) ──────────────────────────── */

@keyframes clinical-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--secondary) / 0.25) 0%,
    hsl(var(--secondary) / 0.5) 50%,
    hsl(var(--secondary) / 0.25) 100%
  );
  background-size: 200% 100%;
  animation: clinical-shimmer 1.6s ease-in-out infinite;
}

/* === Unit 3: streaming bubble animations === */

/* Calm three-dot indicator used while the assistant prepares its response.
   Each dot cascades with a soft fade (opacity 0.3 ↔ 1.0) over a 1.6s cycle,
   staggered 0.2s between dots, producing a clinical, breathing rhythm
   rather than a jittery spinner. */

@keyframes aurora-bubble-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1); }
}

.aurora-bubble-dots {
  /* Reserve a stable baseline so the bubble does not jitter as dots scale. */
  min-height: 0.625rem; /* matches w-1.5/h-1.5 (6px) plus a touch of slack */
}

.aurora-bubble-dot {
  animation: aurora-bubble-dot-pulse 1.6s ease-in-out infinite;
  opacity: 0.3;
  will-change: opacity, transform;
}

.aurora-bubble-dot:nth-child(1) { animation-delay: 0s;   }

.aurora-bubble-dot:nth-child(2) { animation-delay: 0.2s; }

.aurora-bubble-dot:nth-child(3) { animation-delay: 0.4s; }

/* === Unit 2: streaming renderer animations === */

/*
 * Pulso suave para el cursor de streaming cuando el agente está "idle"
 * (más de ~500ms sin recibir chunks). Curva tipo seno —opacidad de
 * 0.4 a 1.0 y vuelta— para dar una sensación calmada, no agresiva.
 * Mientras llegan chunks, el componente fija opacity: 1 sin animar.
 */

@keyframes aurora-cursor-pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/*
 * Shimmer para las barras de fallback mientras el primer chunk no
 * ha llegado. Desplazamiento horizontal lento — 1.8s — para que la
 * espera se sienta tranquila en sesión clínica.
 */

@keyframes aurora-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.aurora-shimmer-bar {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    hsl(var(--foreground) / 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: aurora-shimmer 1.8s ease-in-out infinite;
}

/* === Unit 4: timeline animations ======================================== */

/*
 * Soft, clinical pulse for the active chip indicator on the execution
 * timeline rail. Replaces the previous framer-motion infinite ring (1.8s)
 * with a slower, gentler heartbeat (2.4s, ease-in-out) that does NOT compete
 * for attention while the AI message is streaming below.
 *
 *   - Opacity oscillates between 0.4 and 1.0
 *   - Scale gently breathes 1.0 → 1.06 → 1.0
 *   - Disabled completely under `prefers-reduced-motion: reduce`
 *     (the indicator becomes a static dot).
 */

@keyframes aurora-timeline-active-pulse {
  0%   { opacity: 0.4; transform: scale(1);    }
  50%  { opacity: 1;   transform: scale(1.06); }
  100% { opacity: 0.4; transform: scale(1);    }
}

.aurora-timeline-active-pulse {
  animation: aurora-timeline-active-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: opacity, transform;
}

/* ─── Prefers Reduced Motion (consolidated) ── research §6.3 ─────────────────
 * Single source of truth for reduced-motion. Previously FIVE separate
 * @media (prefers-reduced-motion: reduce) blocks were scattered through the
 * file; merged here verbatim into ONE block placed AFTER every animation
 * definition, so each per-component override still wins over its base rule.
 * Net effect is identical to the five-block version:
 *   1. the global rule (!important, universal) neutralises animation/transition
 *      duration, iteration and scroll for everything — order-independent;
 *   2–5. each per-component rule pins a static resting state.
 * ──────────────────────────────────────────────────────────────────────── */

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

  /* Skeleton shimmer: flat tint, no sweep. */
  .skeleton-shimmer {
    animation: none;
    background: hsl(var(--secondary) / 0.3);
  }

  /* Streaming bubble dots: static, gently dimmed. */
  .aurora-bubble-dot {
    animation: none;
    opacity: 0.6;
    transform: none;
  }

  /* Streaming renderer: idle cursor fully visible & still; shimmer bar untinted. */
  [style*="aurora-cursor-pulse"] {
    animation: none !important;
    opacity: 1 !important;
  }

  .aurora-shimmer-bar {
    animation: none;
    background-image: none;
  }

  /* Timeline active chip: static dot. */
  .aurora-timeline-active-pulse {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}

/* Chat redesign tokens (design sprint, jun 2026). Additive + scoped to
   [data-aurora-redesign], which the chat shell stamps unconditionally — the
   redesign IS the application, so this cascade is always active there. Desde
   2026-08 la landing pública y el login estampan el mismo atributo: son la
   misma superficie vista desde fuera. Lo que quede fuera de ese root no
   matchea el selector y no se ve afectado. */

/* ============================================================================
 * chat-redesign.css — Aurora chat redesign · design tokens + instrument type.
 *
 * The "Clínico minimalista" (Equipo C) visual system — this is the design-
 * token sheet for the application, not an experiment kept apart from a "live"
 * one. Still scoped to the redesign root rather than promoted to `:root`
 * (spec §4 — this file paints `background`/`color`/`font-family`, y `:root`
 * lo derramaría sobre CUALQUIER página, incluidas las que no lo quieren):
 *
 *   · Every `--pc-*` token and the cold-paper base paint hang off the redesign
 *     root `[data-aurora-redesign]`. El shell del chat estampa ese atributo
 *     incondicionalmente (ver lib/feature-flags.ts) — y desde el rediseño de
 *     la landing (2026-08), TAMBIÉN lo estampan la pública y el login: son la
 *     misma superficie vista desde fuera, y quien llega tiene que reconocer
 *     el instrumento al entrar. Lo que queda fuera del root (p. ej. /perfil)
 *     no matchea el selector y no se ve afectado.
 *   · We do NOT redeclare `:root` / `.dark` from app/styles/tokens.css. Lo
 *     que sí hace la raíz (desde 2026-09-30) es PUENTEAR los tokens de shadcn
 *     a sus `--pc-*` dentro de ella — ver «Puente shadcn → pc» más abajo —:
 *     fuera de la raíz, tokens.css sigue mandando igual que antes.
 *   · Dark mode is bound to the real next-themes `.dark` class on <html>
 *     (`.dark [data-aurora-redesign]`), not a separate data-theme.
 *   · Token NAMES are the contract shared with Seg 1–4 (Agent E): E consumes
 *     these same `--pc-*` vars and `.pc-*` utilities inside the redesign root.
 *
 * Imported last by app/globals.css (additive). `@layer base` for tokens + root
 * paint so per-element Tailwind utilities (utilities layer) can still override;
 * `@layer components` for the type/link utilities so utilities win over them;
 * motion helpers are plain CSS (intentionally cascade after utilities).
 * ========================================================================== */

/* ── Motion (plain CSS — intentionally cascades after the utilities layer) ───
 * All animation is functional only: a streaming caret, a state-change pop, the
 * active-step pulse, and a calm staggered entrance. No bounce / overshoot. */

/* Caret de streaming — un trazo de tinta-acento, no un punto que rebota. */

.pc-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  transform: translateY(0.16em);
  margin-left: 2px;
  background: hsl(var(--pc-accent));
  animation: pc-blink 1.1s steps(1) infinite;
}

@keyframes pc-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* "Razonando" — secuenciador de etapas: cuatro trazos que se encienden en
   cadena con los tonos de agente (perspectiva → memoria → evidencia → sistema).
   Indica que el pipeline está trabajando, sin números ni cronómetro. */

.pc-seq {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 1px;
}

.pc-seq > span {
  width: 10px;
  height: 3px;
  border-radius: 999px;
  opacity: 0.22;
  animation: pc-seq 1.5s ease-in-out infinite;
}

.pc-seq > span:nth-child(1) { background: hsl(var(--pc-agent-perspectiva)); animation-delay: 0ms; }

.pc-seq > span:nth-child(2) { background: hsl(var(--pc-agent-memoria)); animation-delay: 160ms; }

.pc-seq > span:nth-child(3) { background: hsl(var(--pc-agent-evidencia)); animation-delay: 320ms; }

.pc-seq > span:nth-child(4) { background: hsl(var(--pc-agent-sistema)); animation-delay: 480ms; }

@keyframes pc-seq {
  0%, 100% { opacity: 0.22; }
  35% { opacity: 1; }
}

/* Entrada de check completado (escala, gated por reduced-motion). */

@keyframes pc-pop {
  from { transform: scale(0.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.pc-pop { animation: pc-pop 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* Pulso sutil del paso activo. */

@keyframes pc-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.pc-pulse { animation: pc-pulse 1.8s ease-in-out infinite; }

/* Reveal de entrada (carga calmada, escalonada). */

@keyframes pc-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pc-rise { animation: pc-rise 360ms cubic-bezier(0, 0, 0.2, 1) both; }

/* Scrollbar discreto dentro del shell rediseñado. */

.pc-scroll {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--pc-line-2)) transparent;
}

.pc-scroll::-webkit-scrollbar { width: 8px; height: 8px; }

.pc-scroll::-webkit-scrollbar-thumb { background: hsl(var(--pc-line-2)); border-radius: 999px; }

.pc-scroll::-webkit-scrollbar-track { background: transparent; }

/* Riel horizontal scrollable SIN barra de scroll del SO: la barra nativa parece
   "chrome" de ventana y rompe la ilusión de lienzo libre del chat. El
   desbordamiento se comunica con un desvanecido en los bordes (mask-image),
   calculado por posición de scroll en el componente. */

.pc-scroll-x-ghost {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge legado */
}

.pc-scroll-x-ghost::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Título pendiente (live-history-sync): mientras una conversación nueva aún no
   tiene título derivado, el placeholder ("Consulta sin título") muestra un sheen
   sutil que lo recorre. La base es legible en --pc-ink-3; la animación solo
   añade un brillo. Scoped al root del rediseño porque depende de los tokens
   --pc-*, que sólo resuelven ahí; fuera de ese root (páginas que no montan el
   shell) la clase no matchea y el texto se vería plano. Sin salto de layout: el mismo <span> pasa de placeholder a título
   real con la misma tipografía y altura de línea. */

[data-aurora-redesign] .pc-title-pending {
  background: linear-gradient(
    100deg,
    hsl(var(--pc-ink-3)) 0%,
    hsl(var(--pc-ink-3)) 38%,
    hsl(var(--pc-ink)) 50%,
    hsl(var(--pc-ink-3)) 62%,
    hsl(var(--pc-ink-3)) 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: pc-title-shimmer 1.6s ease-in-out infinite;
  transition: color 200ms ease;
}

@keyframes pc-title-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

/* reduced-motion: sin brillo en movimiento; placeholder estático y legible. */

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign] .pc-title-pending {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: hsl(var(--pc-ink-3)) !important;
    color: hsl(var(--pc-ink-3)) !important;
  }
}

/* prefers-reduced-motion: kill all motion inside the redesign root. */

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign] *,
  [data-aurora-redesign] *::before,
  [data-aurora-redesign] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aurora-redesign] .pc-caret {
    animation: none !important;
    opacity: 1 !important;
  }
  /* Secuenciador: sin parpadeo; los trazos descansan visibles y estables. */
  [data-aurora-redesign] .pc-seq > span {
    animation: none !important;
    opacity: 0.6 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Aurora boreal — el borde de una acción que está corriendo.

   Sustituye a la narración paso a paso que la tarjeta de documento escupía
   mientras redactaba («Abriendo el expediente…», «Generando sección: ##…»):
   once líneas de fontanería que decían al psicólogo cómo funciona la máquina
   en vez de qué está pasando con su caso. La señal de que algo corre no
   necesita palabras.

   El gradiente recorre el borde con los verdes y violetas de una aurora, sobre
   el azul-instrumento de la superficie. Va en el BORDE y no en el fondo para
   que el texto de la tarjeta siga leyéndose con el mismo contraste.

   Se apaga sola: la clase la pone el componente sólo mientras `status` es
   `active`, así que al cerrarse la acción el borde vuelve a su hairline.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes pc-aurora-borde {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

[data-aurora-redesign] .pc-aurora-viva {
  position: relative;
  /* El borde propio se cede al gradiente; el hairline vuelve al terminar. */
  border-color: transparent;
  background-clip: padding-box;
}

[data-aurora-redesign] .pc-aurora-viva::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--pc-aurora-stops));
  background-size: 300% 100%;
  animation: pc-aurora-borde 3.2s ease-in-out infinite;
  /* Sólo el marco: el relleno se recorta y deja ver la tarjeta. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Sin movimiento: el borde se queda quieto en un tono de la aurora, que sigue
   distinguiendo «corriendo» de «terminado» sin animar nada. */

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign] .pc-aurora-viva::before {
    animation: none;
    background: hsl(168 62% 52% / 0.7);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Aurora boreal FIJA — la misma luz, quieta.

   `pc-aurora-viva` (arriba) dice «esto está corriendo», y por eso se mueve.
   Estas dos clases usan EL MISMO degradado (`--pc-aurora-stops`) sin
   movimiento, porque no anuncian trabajo en curso sino identidad: son el
   borde del lienzo clínico y su acceso desde el teléfono. Un borde que se
   mueve permanentemente en una superficie donde el psicólogo lee y edita es
   ruido; el color, quieto, sigue diciendo «esto es de Aurora».

   El degradado va SIEMPRE en el marco (máscara `xor`), nunca en el fondo, para
   no tocar el contraste del texto que contiene.
   ────────────────────────────────────────────────────────────────────────── */

/* Marco completo — pastillas y botones (p. ej. «Canvas listo» en móvil). */

[data-aurora-redesign] .pc-aurora-fija {
  position: relative;
  border-color: transparent;
  background-clip: padding-box;
}

[data-aurora-redesign] .pc-aurora-fija::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--pc-aurora-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Filete vertical izquierdo — el canvas en escritorio.
   No lleva marco completo a propósito: la columna está pegada al borde
   derecho de la ventana, así que un marco pintaría una línea contra el canto
   de la pantalla. Lo que separa el canvas del chat es su costado izquierdo, y
   ése es el que se colorea. Sustituye al `border-l` gris, no se suma a él.

   `border-image` y NO un pseudo-elemento: el contenedor del canvas lleva
   `overflow-hidden` (recorta el panel mientras la anchura transiciona), y un
   `::before` en el área del borde cae fuera de la caja de relleno — es decir,
   se recorta entero y no se ve nada. El degradado pintado como imagen de
   borde vive EN el borde, así que el recorte no le afecta. Con `slice: 1` la
   imagen cubre las cuatro franjas, pero sólo la izquierda tiene grosor. */

[data-aurora-redesign] .pc-aurora-filete-izq {
  border-left-color: transparent;
  border-image: linear-gradient(180deg, var(--pc-aurora-stops)) 1;
}

/* Regla horizontal — el horizonte de la aurora.
   Una línea de 1px con el mismo degradado, para separar secciones en las
   superficies públicas (landing, login). Es la firma cromática de Aurora
   usada UNA vez por pantalla: repetida deja de significar nada. */

[data-aurora-redesign] .pc-aurora-linea {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--pc-aurora-stops));
}

/* ──────────────────────────────────────────────────────────────────────────
   Aparición del paciente en contexto — progressive disclosure.

   Cuando un paciente entra en contexto por primera vez, su nombre aparece en
   la cabecera con el filete de la aurora barriendo de izquierda a derecha, y
   AHÍ SE QUEDA, quieto. La animación ocurre una sola vez (`both` + una
   iteración): lo que persiste después es exactamente `pc-aurora-fija`.

   El barrido es `clip-path` sobre el marco, no un fundido del contenido: el
   nombre del paciente se lee completo desde el primer frame — es un dato
   clínico, no debe llegar a medias.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes pc-aurora-revelar {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

[data-aurora-redesign] .pc-aurora-revelada {
  position: relative;
  border-color: transparent;
  background-clip: padding-box;
}

[data-aurora-redesign] .pc-aurora-revelada::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--pc-aurora-stops));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pc-aurora-revelar 620ms cubic-bezier(0, 0, 0.2, 1) both;
  pointer-events: none;
}

/* Sin movimiento: el filete ya está entero desde el primer frame. El bloque
   general de reduced-motion de más arriba aplasta la duración a 0.001ms, y con
   `both` eso deja el estado final — pero se declara explícito para no depender
   de ese efecto lateral. */

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign] .pc-aurora-revelada::before {
    animation: none;
    clip-path: none;
  }
}

/* El lenguaje visual de Aurora, en evaluación (2026-09). Cuelga de un SEGUNDO
   atributo que sólo estampa el shell autenticado, así que la landing, el login
   y las legales —que estampan data-aurora-redesign— quedan intactas. Va el
   ÚLTIMO a propósito; su especificidad no depende de ello, pero la cadena se
   lee en orden. */

/* ============================================================================
 * lenguaje-visual.css — el lenguaje visual de Aurora en su ESPACIO DE TRABAJO.
 *
 * Primer principio: EL ENCUADRE.
 *
 * «Encuadre» es palabra clínica: el marco fiable —tiempo, lugar, límites— que
 * hace posible el trabajo terapéutico. La interfaz de Aurora ES un encuadre.
 * Lo que el psicólogo debe sentir al entrar: «ah, ya estoy aquí; aquí puedo
 * pensar, conversar sobre mis casos, compartir lo que pienso con tranquilidad».
 *
 * Lo que Aurora produjo de verdad en los psicólogos, como propiedad emergente,
 * es COMPAÑÍA — ejercer en consulta privada es profundamente solitario. Pero
 * acompaña como un COLEGA PROFESIONAL: ni gratitud, ni celebración, ni ánimo.
 *
 * ── La aurora GOBIERNA la identidad ────────────────────────────────────────
 * No es un acento ni un fondo: es la lógica de la que sale todo lo demás. Sus
 * propiedades, traducidas a reglas de componente:
 *
 *   · Es LUZ QUE EMANA, no pigmento. Las superficies se iluminan desde dentro
 *     y desde sus cantos; nada se rellena de color plano.
 *   · Tiene HORIZONTE. El campo va de tibio abajo —donde está la mano y se
 *     escribe— a luminoso arriba. Eso es literalmente salir de la frialdad y
 *     entrar a la luz, dicho en el espacio.
 *   · Es TRANSLÚCIDA Y EN CAPAS. Las cosas se superponen con suavidad; no hay
 *     cantos duros ni cajas apiladas.
 *   · RESPIRA. Se mueve despacio y nunca chasquea.
 *   · Nunca compite con el texto: vive en campos, cantos y halos, así que el
 *     contraste de lectura no se negocia jamás.
 *
 * FONDO NEGRO NO: se probó y se descartó. La aurora aquí no es la de un cielo
 * nocturno, es la del amanecer — se sale de la frialdad hacia la luz, no al
 * revés. Tampoco es blanco clínico ni crema: es un campo luminoso vivo.
 *
 * Dirección y correcciones FIJADAS por el dueño del producto (2026-09-21).
 *
 * ── Por qué este archivo existe en vez de re-valorar chat-redesign.css ──────
 * `[data-aurora-redesign]` NO es sólo del espacio de trabajo: lo estampan también la
 * landing, el login, el shell legal, /perfil y /como-trabaja. Este archivo
 * cuelga de un SEGUNDO atributo que sólo estampa el espacio de trabajo, así que lo
 * público sigue intacto. Verificado en vivo.
 *
 * ── Los mazos ──────────────────────────────────────────────────────────────
 * MAZO 1 (`--lv-*`): el único sitio donde se AUTORA un color.
 * MAZO 2 (`--pc-*`): puente; repinta ~1.098 usos sin editar componentes.
 * MAZO 3 (shadcn): el canvas clínico y todo `components/ui/*`.
 * MAZO 4 (`--tw-prose-*`): el plugin de tipografía — va sobre el ELEMENTO
 *   `.prose` y no en la raíz; ver su nota.
 *
 * ── Especificidad, a prueba de orden de importación ────────────────────────
 * El `@layer` de Tailwind v3 no es `@layer` nativo: PostCSS iza cada bloque a
 * su directiva y emite CSS plano, así que es especificidad pura más orden de
 * fuente. El selector lleva LOS DOS atributos —(0,2,0) claro, (0,3,0) oscuro—
 * y gana a `:root`, a `.dark` y a `[data-aurora-redesign]` sin depender del
 * orden de importación.
 * ========================================================================== */

/* ── El lenguaje de componente ─────────────────────────────────────────────
 * Aquí vive la identidad, no en el color del fondo. Cada clase es una regla de
 * composición derivada de la aurora: luz que emana, capas translúcidas, cantos
 * que acogen, respiración lenta.
 *
 * Plain CSS a propósito (no `@layer`): cascada después de las utilidades, para
 * que estas piezas no dependan de ganarle especificidad a Tailwind.
 * ========================================================================== */

/* ── LA SALA ES UNA SOLA ─────────────────────────────────────────────────────
 * El campo de la raíz es el encuadre: va de la luz de arriba al suelo tibio de
 * abajo, y todo lo que no ACOGE se deja atravesar por él.
 *
 * Medido el 2026-10-01 sobre producción: entre el campo y el texto del chat
 * había UNA capa opaca, el `bg-background` del panel del chat, que pintaba el
 * suelo liso justo debajo de la cabecera. La cabecera, translúcida, enseñaba
 * el amanecer; el log, un crema plano. Dos fondos en la misma pantalla es lo
 * que se leía como dos lenguajes, y la versión final de local no tenía esa
 * capa. `au-sala` marca lo que es sala y no hoja: el panel del chat, Casos y
 * sus dos columnas, la cabecera del canvas y el cuerpo del documento dentro de
 * su hoja. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-sala {
  background-color: transparent;
}

/* El riel es el costado del encuadre, no un panel aparte. Llevaba un relleno
 * propio y un filete fuerte para «leerse como panel distinto»: sobre el campo,
 * eso era una caja apilada al lado de la sala. Queda el canto, tan tenue como
 * el de la cabecera, y sin la raya interior que cortaba el riel a una altura
 * que no era la de la banda. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-riel {
  background-color: transparent;
  border-right-color: hsl(var(--lv-canto) / 0.8);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-riel [data-riel-acciones] {
  border-bottom-color: transparent;
}

/* La banda fija de un caso en Casos. Por debajo SÍ pasa contenido —la ficha se
 * desplaza bajo ella—, así que conserva su desenfoque y es más opaca que la
 * cabecera del shell; pero es papel de la sala y no el crema opaco que, con
 * Casos dejando pasar el campo, habría vuelto a partir la pantalla en dos. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-marco-del-caso {
  background-color: hsl(var(--lv-hoja) / 0.8);
  border-bottom-color: hsl(var(--lv-canto) / 0.8);
}

/* El documento es una HOJA: lo que Aurora escribe se posa en papel, no en el
 * suelo. Sin desenfoque, porque detrás del canvas no pasa nada. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-lienzo {
  background-color: hsl(var(--lv-hoja) / 0.94);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-riel-del-lienzo {
  background-color: transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-riel-del-lienzo:hover {
  background-color: hsl(var(--lv-hoja) / 0.55);
}

/* LA LUZ ENTRA CON LO NUEVO (2026-10-01). Cuando Aurora escribe un documento
 * en esta sesión, la primera vez que el canvas se ve con él —la hoja que llega
 * en escritorio, la pestaña que se desliza en el teléfono— por su canto entra
 * la misma luz que por el de la voz de Aurora: la banda de 12 px de la
 * cortina, que se despliega de arriba abajo con la curva de la casa. Y como la
 * cortina, sólo para lo NUEVO: reabrir un documento ya visto, el riel o
 * Ctrl+. sobre algo viejo, o cada deslizamiento del teléfono no la encienden
 * (workspace-layout.tsx, `useLuzDeLlegada`), porque aquí una aurora que se
 * mueve dice que algo está pasando. A diferencia de la cortina, se APAGA del
 * todo: en reposo el canto ya lo marca el filete fijo (`pc-aurora-filete-izq`).
 * Revela luz y nunca texto: no se toca. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-luz-de-llegada] {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 12px;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--pc-aurora-stops));
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.6;
  animation: au-aparece 1200ms cubic-bezier(0.16, 1, 0.3, 1) both, au-se-apaga 1800ms ease-in-out 1.4s forwards;
}

@keyframes au-se-apaga {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] [data-luz-de-llegada] {
    display: none;
  }
}

/* Lo que ACOGE: el composer, el marco del caso, el panel del documento. Hoja
 * flotando sobre el campo, con halo de luz en vez de sombra gris. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja {
  background: hsl(var(--lv-hoja) / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--lv-radio-2);
  box-shadow: var(--lv-halo);
}

/* El canto, salvo con una acción rápida armada: entonces la tarjeta del
 * composer lleva el matiz de la acción (Max, 2026-08-08) y el color lo pone su
 * utilidad. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja:not([data-accion-armada]) {
  border-color: hsl(var(--lv-canto) / 0.9);
}

/* El encuadre del caso: la banda que sostiene la sesión. No es una barra de
 * herramientas — es el marco, y por eso se lee como parte del campo y no como
 * cromo apilado encima.
 *
 * Sin desenfoque: por debajo de la cabecera no pasa contenido (el log se
 * desplaza por dentro de su columna), así que el `backdrop-filter` desenfocaba
 * un fondo quieto y costaba GPU en el teléfono. El composer SÍ lo conserva: el
 * log corre por debajo de él. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-encuadre {
  background: linear-gradient(to bottom, hsl(var(--lv-hoja) / 0.72), hsl(var(--lv-hoja) / 0.30));
  border-bottom: 1px solid hsl(var(--lv-canto) / 0.8);
}

/* El título del encuadre —la marca y el caso— reserva a su izquierda el sitio
 * del punto de presencia. El punto vive ahí en absoluto y no en el flujo: así
 * aparece y se va sin mover una letra de la cabecera. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-titulo {
  position: relative;
  padding-inline-start: 0.875rem;
}

/* EL CASO NO ES UN CAMPO DE TEXTO. Como pastilla —canto entero, relleno y el
 * marco de la aurora quieto alrededor— se leía como un buscador, sobre todo en
 * el teléfono, donde ocupa la banda entera. Se dice con tipografía: el rótulo
 * y el nombre.
 *
 * La aurora sigue anunciando que el caso ENTRA en contexto, que es el cambio
 * de estado más importante de esta barra: pasa por debajo del nombre de
 * izquierda a derecha, una vez, y se queda en un susurro, igual que la cortina
 * de la voz de Aurora. Es la misma huella: por aquí entró la luz. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-encuadre .pc-aurora-revelada {
  background: transparent;
  border-color: transparent;
  padding-inline-start: 0;
  /* Del ancho del nombre y no de la banda: en el teléfono la pastilla crecía
   * (`flex-1`) hasta el menú, y una línea a lo ancho bajo un nombre es el
   * subrayado de un campo de texto, que es justo lo que se quería dejar de
   * parecer. Sigue pudiendo encogerse y truncar (`min-w-0`). */
  flex: 0 1 auto;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-encuadre .pc-aurora-revelada::before {
  inset: auto 0 0 0;
  height: 1px;
  padding: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--pc-aurora-stops));
  -webkit-mask: linear-gradient(to right, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask: linear-gradient(to right, #000 0%, #000 72%, transparent 100%);
  mask-composite: add;
  animation:
    pc-aurora-revelar 620ms cubic-bezier(0, 0, 0.2, 1) both,
    au-funde 2400ms ease-in-out 1.6s forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-encuadre .pc-aurora-revelada::before {
    animation: none;
    clip-path: none;
    opacity: 0.18;
  }
}

/* LA RESPUESTA DE AURORA **ES** LA AURORA.
 *
 * No un filete al lado de un mensaje: el cuerpo entero de lo que responde se
 * convierte en la luz. Sutil, bella, calma — un campo de aurora muy tenue en
 * el que el texto se posa, con el canto de la cortina marcando por dónde entra.
 *
 * Alfa máximo 10%: la luz nunca compite con la lectura. Se mide, no se supone.
 *
 * `isolation: isolate` + `z-index: -1` mantienen el campo DETRÁS del contenido
 * sin depender de dónde esté el siguiente contexto de apilado; sin el isolate,
 * un `z-index` negativo puede colarse detrás del fondo de un ancestro y
 * desaparecer. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz {
  position: relative;
  /* EL CUERPO NO SE ESTRECHA PARA TENER CALLE: SE SALE HACIA LA QUE YA HAY.
   *
   * Con `padding-left: 2.5rem` y sin margen, la calle se pagaba con ancho de
   * lectura. Medido a 1440: la prosa caia de 720px a 662 (-58px, -8%) y la
   * tabla los perdia con ella, mientras el escritorio de hoy usaba los 720
   * enteros. Eso es lo que se veia «mas compactado», y es tambien lo que
   * impedia que el cuerpo se fundiera: un texto metido hacia dentro lee como
   * contenido DE una caja, tenga borde o no.
   *
   * El carril del log ya reserva 24px de calle (`px-6`). El margen negativo se
   * la pide prestada y el relleno la devuelve: el texto aterriza exactamente
   * donde aterriza hoy, la cortina y las marcas viven en la calle, y nada se
   * sale del carril —el borde del cuerpo cae justo sobre la caja de relleno del
   * log, no mas alla—. A la derecha no habia nada que comprar: ese relleno solo
   * restaba. */
  margin-inline-start: -1.5rem;
  padding: 0.85rem 0 0.95rem 1.5rem;
}

/* En un teléfono, 40px de calle para las marcas se comen el 11% del ancho, y lo
 * paga la tabla —medido: 251px de envoltorio para una tabla de 500px—. La calle
 * se estrecha y la sangría colgante se ajusta con ella; el carril sigue siendo
 * uno, sólo que más cerca del canto.
 *
 * El corte es 767px y no 639 porque es el del CARRIL: el log reserva `px-3`
 * (12px) por debajo de `md` (768). Con el corte en 639, entre 640 y 767 el
 * cuerpo se pedía prestados 24px de calle donde sólo había 12, quedaba 12px
 * fuera del log y la cortina entera caía en el recorte — medido a 700px:
 * cortina en 5–17, log desde 17. Sin luz, justo en tabletas y pantallas
 * partidas. */

@media (max-width: 767px) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz {
    /* El carril del log solo reserva 12px aqui (`px-3`), asi que la calle que
     * se pide prestada es la mitad. Neto recuperado: ~26px de 390. */
    margin-inline-start: -0.75rem;
    padding-left: 1.25rem;
    padding-right: 0;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button:first-of-type {
    margin-left: -1.1rem;
  }
}

/* El campo: el cuerpo de la aurora. Entra por la izquierda —por donde entra la
 * cortina— y se disuelve antes de llegar al final de la medida de lectura. */

/* El cuerpo de Aurora USA EL ESPACIO LIBREMENTE: no se ve como un componente.
 *
 * Con `inset: 0` y un radio, el campo era un rectángulo redondeado — o sea, una
 * caja, o sea exactamente lo que no es. El contenido de una caja está contenido;
 * la luz de una aurora no.
 *
 * Aquí el campo se DESBORDA del contenido y se disuelve por todos sus cantos
 * con una máscara, así que no tiene borde perceptible en ninguna dirección. El
 * único que queda contenido es el mensaje del psicólogo, y ese contraste es el
 * que hace que la aurora respire: lo dicho tiene marco, lo que aparece no. */

/* NO hay campo de luz por mensaje, y es una decisión, no un olvido.
 *
 * Una luz localizada alrededor de una respuesta ES un contenedor: por difusa
 * que sea, hay un dentro y un fuera, y eso es justo lo que se sentía. Difuminar
 * más era mitigar el síntoma.
 *
 * La aurora gobierna la identidad, así que vive en la SALA —el campo del
 * horizonte, arriba en este archivo— y no decora cada turno. Lo que distingue a
 * Aurora es la cortina por donde entra y el ritmo con que llega; nada la
 * contiene porque la luz es del espacio, no del mensaje. */

/* El canto de la cortina: por dónde ENTRA la luz.
 *
 * No es una línea. Un filete de 2px con sus propios márgenes se lee como una
 * regla dibujada al lado del texto, no como el borde de una aurora — se sale
 * del cuerpo en vez de integrarse.
 *
 * Aquí es una banda de 12px con la misma progresión vertical de color, que se
 * DISUELVE hacia la derecha con una máscara y se funde con el campo. Corre de
 * canto a canto y comparte el radio del cuerpo, así que no sobresale por las
 * esquinas: es el mismo objeto de luz, más denso donde entra. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 12px;
  /* La luz no se toca: la fila de acciones (Copiar, 👍, 👎) y el plegado del
   * razonamiento cuelgan en esta calle, y sin esto los primeros 12 px de esos
   * botones caían sobre la cortina y no respondían al clic (medido en el banco:
   * `elementFromPoint` devolvía el `au-voz`, no el botón). */
  pointer-events: none;
  background: linear-gradient(to bottom, var(--pc-aurora-stops));
  /* Se funde en los DOS ejes. Sólo con la máscara horizontal la banda corría de
   * canto a canto y terminaba en seco arriba y abajo: una barra con dos cortes
   * rectos, que es justo lo que no parecía fundido. Dos capas de máscara
   * compuestas por intersección — se desvanece hacia la derecha Y hacia los
   * extremos. */
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.3) 38%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.6;
  animation: au-aparece 1200ms cubic-bezier(0.16, 1, 0.3, 1) both, au-funde 2400ms ease-in-out 1.6s forwards;
}

/* ── Dentro del cuerpo de la aurora, nada es una caja aparte ────────────────
 * Medido el 2026-09-21: la prosa, el contenedor de markdown y la fila de
 * acciones arrancan todos a 22px del canto; la TABLA arrancaba a −2px porque
 * `clinical-tables.css` le da un desbordamiento negativo para escapar del
 * relleno de la burbuja. Dentro del campo de aurora ese escape es justo lo que
 * no se quiere: atraviesa la luz por la izquierda y rompe la alineación.
 *
 * Y su cabecera pegajosa venía con un relleno casi opaco (medido:
 * `rgba(248,246,242,0.95)`), que sobre el campo se lee como un bloque ajeno
 * apoyado encima. Aquí se vuelve translúcida: el campo se ve a través.
 *
 * `clinical-tables.css` NO se toca — lo parsea characterization-canvas-encogible.
 * Esto son anulaciones acotadas a la voz de Aurora, (0,4,0) contra su (0,2,0). */

/* La tabla SÍ es un objeto: datos clínicos, no prosa. Tiene cuerpo y contraste,
 * pero de la misma familia — superficie de hoja, cantos del sistema, radio del
 * mundo. Se desborda 0.9rem a la izquierda y se rellena otro tanto, así que su
 * SUPERFICIE sobresale del carril mientras su TEXTO sigue aterrizando en él.
 * Sin ese truco, darle cuerpo la sacaba de la alineación. */

/* Una tabla clínica de publicación NO tiene caja: se define por tres reglas
 * horizontales —superior, de cabecera y de cierre— sin verticales, sin relleno
 * y sin marco. Un rectángulo alrededor rompe el fundido y devuelve la sensación
 * de componente pegado que este mundo no tiene.
 *
 * El contraste, entonces, no lo da una superficie: lo dan el peso de las reglas,
 * la densidad de las filas y las cifras tabulares. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper {
  margin-inline: -1px 0;
  padding: 0;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table {
  background: transparent;
  width: 100%;
  border-top: 1px solid hsl(var(--lv-canto-2));
  /* SE DEFINE POR REGLAS, NO POR UNA CAJA — y esto estaba a medias. Se ponia la
   * regla de arriba pero se dejaban vivos los otros tres filetes de
   * `clinical-tables.css` y su radio. Medido: 0,8px a derecha, abajo e
   * izquierda, y `border-radius: 14px`. O sea, seguia siendo un rectangulo con
   * esquinas redondeadas flotando dentro de un campo de luz, que es justo lo
   * que rompe el fundido. La regla de cierre no se pierde: vive en la sombra de
   * la ultima fila, no en este borde. */
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

/* Al alinear la tabla se le quitó la anchura que le daba el desbordamiento, así
 * que ahora puede desplazarse en horizontal dentro de su envoltorio. Ese scroll
 * es comportamiento GUARDADO (characterization-tabla-en-canvas) y no se toca —
 * lo que sobra es su vestimenta: en Windows la barra nativa es gruesa y gris, y
 * sobre un campo de luz se lee como un objeto pegado. */

/* El contenido que se esconde al desplazar se DISUELVE, no se corta en seco.
 * `clinical-tables.css` ya marca `has-overflow` y `scrolled`; aquí esas clases
 * deciden qué canto se funde: sólo el derecho mientras no se ha movido, los dos
 * en cuanto hay algo oculto a la izquierda. Sin esto, la primera columna
 * aparecía partida a media palabra y el desplazamiento se sentía como un salto. */

/* ── Fuera el indicador de desbordamiento heredado ──────────────────────────
 * `clinical-tables.css` pinta dos bandas de 20px con `hsl(var(--background))`
 * —el suelo, opaco— a cada lado del envoltorio, a `opacity: 0`, y las ENCIENDE
 * con `:hover`. Eso explicaba los dos síntomas a la vez: el difuminado que
 * aparecía al pasar el ratón, y los remates de las reglas mal dibujados,
 * porque esas bandas se pintan ENCIMA de los extremos de la tabla (z-index 5).
 * El mismo `::after` se recicla además como la flecha `→` con `!important`.
 *
 * Aquí sobran: la máscara de abajo hace ese trabajo mejor y SIEMPRE, no sólo
 * al pasar por encima, y no tapa nada porque no pinta — recorta. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper::before,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper::after {
  content: none !important;
  display: none !important;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 32px), transparent 100%);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper.has-overflow.scrolled {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--lv-canto-2) / 0.8) transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper::-webkit-scrollbar {
  height: 6px;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper::-webkit-scrollbar-thumb {
  background: hsl(var(--lv-canto-2) / 0.8);
  border-radius: 999px;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-header {
  background: transparent;
  box-shadow: none;
}

/* ── La alineación tiene que ser del TEXTO, no de las cajas ──────────────────
 * Medido el 2026-09-21: las cajas de prosa, tabla y fila de herramientas
 * arrancaban las tres a 22px, pero el texto no. La tabla lleva
 * `padding-left: 16px` en su primera celda, así que sus palabras empezaban a
 * 38px; la prosa a 22. Esos 16px de desfase son lo que hace que la tabla se
 * lea como un objeto pegado y no como parte de lo que Aurora dice.
 *
 * Y hablaba otro idioma: 12px en versalitas con tracking y peso 600, contra
 * 16,8px normales de la prosa. Aquí baja la voz a la del cuerpo — una etiqueta
 * discreta, no un encabezado gritado. */

/* Simetría de los filetes. La primera celda llevaba `padding-left: 0` para
 * aterrizar en el carril, pero la última conservaba sus 16px a la derecha: la
 * regla respiraba por un lado y no por el otro. Ahora el texto empieza y
 * termina donde empieza y termina su regla. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-th:first-child,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-td:first-child {
  padding-left: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-th:last-child,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-td:last-child {
  padding-right: 0;
}

/* Más tabla clínica: la regla de cabecera manda, las de fila apenas susurran, y
 * las cifras son tabulares para que una columna de números se lea como columna
 * y no como texto. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-th {
  font-size: 0.75rem;
  /* 600 y no 500: Plex Sans sólo está cargada en 400 y 600 y el espacio de trabajo no
   * sintetiza negritas, así que el 500 de antes se pintaba como 400. */
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: hsl(var(--lv-tinta-2));
  padding-top: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-td {
  font-variant-numeric: tabular-nums;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-td {
  font-size: 0.9375rem;
  color: hsl(var(--lv-tinta-2));
  padding-block: 0.6rem;
  border-bottom: 0;
}

/* ── LA INFERENCIA MANDA ─────────────────────────────────────────────────────
 * Variante elegida por el dueño en `/impeccable live` (2026-09-22), con
 * «Énfasis: Función» y «Cabecera en 600».
 *
 * La tabla distingue tres papeles con tinta y peso, no con tamaño: la CLAVE
 * (la sesión) es una columna estrecha en tinta queda, con las cifras alineadas
 * a la unidad; el CONTEXTO (la situación) va en tinta media; la INFERENCIA —lo
 * que el psicólogo tiene que evaluar— va en tinta plena y 600.
 *
 * Sólo en las tablas de TRES columnas (el renderer estampa `data-cols` en la
 * <table>): aplicado a toda tabla, una de cuatro columnas, o con texto en la
 * primera, recibía un énfasis clínico falso. El resto queda neutra. Que el
 * papel de cada columna lo marque rehype (`data-rol`) en vez de la posición es
 * una mejora pendiente. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table[data-cols='3'] .clinical-table-th:first-child,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table[data-cols='3'] .clinical-table-td:first-child {
  width: 4.25rem;
  padding-right: 1.5rem;
  text-align: right;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table[data-cols='3'] .clinical-table-td:first-child {
  color: hsl(var(--lv-tinta-3));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table[data-cols='3'] .clinical-table-td:nth-child(3) {
  color: hsl(var(--lv-tinta));
  font-weight: 600;
}

/* El anillo de foco de la tabla (por dentro, #194) no puede caer bajo la
 * máscara que disuelve sus cantos. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-wrapper:focus-visible {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Lo que no se dibuja también lleva el diseño: la selección de texto sale de
 * la paleta, no del azul del navegador. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table ::selection {
  background: hsl(var(--lv-aurora-verde-d));
  color: hsl(var(--lv-tinta));
}

/* ── Las reglas van en la FILA, no en las celdas ─────────────────────────────
 * Medido: `devicePixelRatio: 1.25`, así que un filete de 1px se ajusta a 0,8px
 * CSS (un píxel de dispositivo). Con un borde por CELDA son tres hairlines que
 * caen en subposiciones distintas: unos sobreviven al redondeo y otros no, y la
 * regla aparece rota o desaparece por tramos.
 *
 * Un `box-shadow` por fila es UNA sola línea: o se ve entera o no se ve. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table-header .clinical-table-row {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto) / 0.8);
}

/* La regla de cierre: una tabla de publicación termina, no se desvanece. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row:last-child {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto-2));
}

/* ── El hover no rellena: firma la línea ─────────────────────────────────────
 * El relleno de `clinical-tables.css` (`--secondary` al 30–35%) LAVA un filete
 * tenue hasta hacerlo invisible: eso era lo que parecía «se van los bordes».
 * Y ganaba por especificidad — su selector con `tbody` y `:nth-child(even)` es
 * (0,5,1), así que una anulación más corta perdía en silencio.
 *
 * Aquí seguir una fila a lo ancho se hace con la propia regla, que se vuelve
 * firme: la tabla no cambia de color al pasar por encima. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row:hover,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row:nth-child(even),
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row:nth-child(even):hover {
  background: transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table tbody .clinical-table-row:hover {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-tinta-3) / 0.55);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button:first-of-type {
  padding-left: 0;
  margin-left: -1.25rem;
}

/* EL CHEVRÓN DE UNA DIVULGACIÓN VA DETRÁS DE SU ETIQUETA (live 2026-09-22).
 *
 * Colgado en la calle quedaba FUERA del cuerpo de Aurora: dos envoltorios con
 * `overflow-hidden` recortan exactamente en el carril, así que el control que
 * despliega los pasos era invisible en escritorio —medido: chevrón en
 * 176–190px, recorte desde 198—. Detrás de la etiqueta la marca se ve, el
 * texto sigue en el carril único y la fila habla igual que las de los pasos,
 * que ya llevan el chevrón a la derecha.
 *
 * Aquí había una regla de sangría colgante propia del chevrón con
 * `:has(svg.lucide-chevron-right)`, que suma (0,5,2) y le ganaba en silencio a
 * esta. Se retiró: ya no hay nada que colgar. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button[aria-expanded]:first-of-type {
  margin-left: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button[aria-expanded] > svg.lucide-chevron-right {
  order: 2;
}

/* La tabla separa sus celdas 1px por `border-collapse: separate`, y ese píxel
 * sacaba su primera columna del carril. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .clinical-table {
  border-spacing: 0;
}

/* La fila de la herramienta colapsada. El verbo en negrita sobre una fila
 * callada no se entiende: la negrita pide énfasis y aquí lo que hace falta es
 * jerarquía. Peso medio, y el color separa el qué del cuánto. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button .font-medium,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button strong,
[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button b {
  font-weight: 500;
  color: hsl(var(--lv-tinta-2));
}

/* La APARICIÓN. La cortina se despliega de arriba abajo, como cae una aurora
 * de verdad, y termina quieta. No es un fundido de la prosa: el texto es
 * legible desde el primer fotograma y lo que se revela es la LUZ. */

@keyframes au-aparece {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* EL CAMPO SE FUNDE (live 2026-09-22, variante «Aparece y se funde», reposo
 * 0.18 tras 1.6 s). La cortina se despliega y, una vez quieta, baja a un
 * susurro. En reposo ya no queda una franja al costado del texto —en
 * escritorio se leía como el borde de un componente, en el teléfono se
 * disimulaba contra el canto de la pantalla—, sino la huella de por dónde
 * entró la luz. Así se comporta igual en todos los anchos. */

@keyframes au-funde {
  to { opacity: 0.18; }
}

/* Turnos consecutivos de Aurora no vuelven a aparecer: ya está aquí, en reposo. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz + .au-voz::after {
  animation: none;
  opacity: 0.18;
}

/* La cortina sólo se despliega en el turno NUEVO. Animada en cada montaje —al
 * abrir una conversación de hace días, al paginar— decía «acaba de llegar», que
 * es falso. El log estampa `data-nuevo` sólo en el envoltorio del turno que
 * se está escribiendo; en reposo queda la huella al 0,18 que Max eligió en
 * live. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:not([data-nuevo])::after {
  animation: none;
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz::after {
    animation: none;
    clip-path: none;
    opacity: 0.18;
  }
}

/* Lo que dijo el psicólogo: contenido, quieto, sin luz propia.
 *
 * El diseño anterior marcaba al USUARIO con el filete de acento
 * (`border-l-2 border-l-pc-accent` en message-item-redesign). Aquí eso compite
 * con la voz de Aurora y reparte mal los papeles: la luz es de Aurora, la
 * palabra es del psicólogo. Se apaga a canto. (0,3,0) contra el (0,1,0) de la
 * utilidad de Tailwind. */

/* El usuario da el horario de la aurora. Su mensaje es el que abre el hueco:
 * LA DISTANCIA LA DA EL MENSAJE, no un envoltorio visual de la respuesta.
 * Colgar el margen de la voz de Aurora hacía que el silencio fuese propiedad
 * de quien llega, cuando es de quien llama.
 *
 * `:not(.group)` distingue la tarjeta del usuario de la del asistente sin
 * tocar el componente: las dos llevan `chat-message-bubble`, pero sólo la del
 * asistente lleva `group` (message-item-redesign.tsx:212 y :368).
 *
 * Y va a la DERECHA en todos los anchos, como ya lo pone #195. (0,4,0) contra
 * el (0,1,0) de la utilidad.
 *
 * ES LA MISMA HOJA QUE EL COMPOSER (2026-10-01, tras verlo en producción). Lo
 * que el psicólogo escribe y lo que ya dijo son el mismo papel: blanco
 * translúcido, el canto del mazo y el radio de lo que acoge. Antes era la
 * hoja-2 —un beige MÁS OSCURO que el suelo— y sobre el campo se leía como una
 * caja gris; y su radio de 16 px era un tercer radio frente al 8 / 22. Sin
 * halo ni desenfoque: no flota, está en el hilo.
 *
 * Y mide lo que dice. Ocupaba siempre el ancho entero de la medida, así que un
 * mensaje que sólo era una acción rápida dejaba una caja enorme casi vacía.
 * `fit-content` exige soltar la contención: `clinical-tables.css` hace de cada
 * `.chat-message-bubble` un contenedor de tamaño en línea (para las tablas de
 * Aurora), y un contenedor así no aporta el ancho de lo que lleva dentro —medido:
 * la burbuja se quedaba en 1,6 px, sus dos bordes—. El mensaje del psicólogo es
 * texto sin interpretar (`trusted={false}`): nunca lleva una tabla que consulte
 * ese contenedor.
 *
 * La distancia va ANTES de la pregunta, no después. Debajo, la pregunta quedaba
 * a ~90 px de SU respuesta y a ~47 de la anterior, así que se agrupaba con la
 * respuesta equivocada. «La distancia la da el mensaje» sigue en pie: la abre el
 * mensaje, encima de sí. El primero del hilo (`pt-6`) no la necesita. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) {
  margin-left: auto;
  margin-right: 0;
  margin-top: 2.75rem;
  margin-bottom: 0;
  container-type: normal;
  width: fit-content;
  border: 1px solid hsl(var(--lv-canto) / 0.9);
  border-radius: var(--lv-radio-2);
  background: hsl(var(--lv-hoja) / 0.78);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pt-6 > .chat-message-bubble:not(.group) {
  margin-top: 0;
}

/* Lo que se pidió con una acción rápida queda como REGISTRO, no como botón.
 * Saturada donde actúa —armada en el composer, donde el matiz lo decidió Max el
 * 2026-08-08— y diluida donde sólo recuerda: aquí el texto va en la tinta media
 * y el matiz de la acción queda en su glifo, una luz pequeña. Como pastilla
 * violeta era lo más ruidoso de la pantalla, más que la respuesta misma. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) [data-accion-rapida] {
  /* De bloque y no en línea: como línea de texto se apoyaba en la base de un
   * renglón de 24 px y quedaba 2,4 px más abajo que la hora que cuelga a su
   * lado. Un registro es un renglón propio, no una palabra dentro de otro. */
  display: flex;
  width: fit-content;
  border-color: transparent;
  background: transparent;
  padding: 0;
  color: hsl(var(--lv-tinta-2));
}

/* Sin texto añadido, el registro es lo último de la hoja: no deja el margen
 * que lo separaría del texto que no hay. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) [data-accion-rapida]:last-child {
  margin-bottom: 0;
}

/* LA HORA CUELGA AL MARGEN, NO DENTRO DE LO DICHO (2026-10-01, pulido sobre
 * producción). Dentro de la hoja la hora ocupaba una fila entera encima del
 * texto: un mensaje que sólo era una acción rápida medía 85 px para una línea,
 * con la hora arriba a la derecha y lo dicho abajo a la izquierda. La hora no es
 * lo dicho, es CUÁNDO se dijo: cuelga fuera, a la izquierda y a la altura de la
 * primera línea —la anotación colgada de su línea guía, la disciplina que donó
 * el cuaderno—, en el hueco que la hoja, alineada a la derecha, siempre deja.
 * Medido: 42 px libres en un teléfono de 375 con la hoja a su ancho máximo, y
 * la hora con su separación pide 37. El clip del adjunto cuelga debajo de ella.
 *
 * El borde de arriba es el relleno del contenido (`p-3 md:p-4`) más medio
 * interlineado: la hora queda centrada en la primera línea de la prosa, que
 * mide `pc-body` × `--pc-leading-body` (tailwind.config.ts). Si lo primero es
 * el registro de una acción rápida, su línea es la de la hora y no hace falta.
 *
 * El margen se RESERVA en el ancho de la propia hoja, en rem (revisión de
 * cierre): con el 88 % de siempre el hueco era un porcentaje fijo (42 px a 375) y,
 * con el texto al 200 % o el zoom, la hora lo desbordaba y la recortaban los
 * envoltorios del carril. 3,5 rem es la hora más su separación, y crece con ellas. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) {
  overflow: visible;
  max-width: min(88%, calc(100% - 3.5rem), var(--pc-measure, 68ch));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) > [data-meta-del-mensaje] {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: calc(100% + 0.625rem);
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.375rem;
  padding: calc((clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem) * var(--pc-leading-body, 1.7) - 1rem) / 2) 0 0;
  white-space: nowrap;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) > [data-meta-del-mensaje] > time {
  line-height: 1rem;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group):has([data-accion-rapida]) > [data-meta-del-mensaje] {
  padding-top: 0;
}

@media (min-width: 768px) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .chat-message-bubble:not(.group) > [data-meta-del-mensaje] {
    inset-block-start: 1rem;
  }
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-dicho {
  background: hsl(var(--lv-hoja-2) / 0.70);
  border: 1px solid hsl(var(--lv-canto) / 0.7);
  border-radius: var(--lv-radio-2);
}

/* El composer al enfocarse: la aurora responde a que alguien va a hablar. Es
 * la pieza que dice «puedes pensar en voz alta aquí». */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-acoge:not([data-accion-armada]):focus-within {
  /* El verde pleno (4,62:1) y no el teal al 45 % (1,90:1): si el borde es el
   * único indicador de foco, tiene que cumplir WCAG 1.4.11. */
  border-color: hsl(var(--lv-aurora-verde));
  box-shadow:
    0 0 0 4px hsl(var(--lv-aurora-teal) / 0.10),
    0 18px 48px -24px hsl(var(--lv-aurora-teal) / 0.34);
}

/* La respiración. El punto de la cabecera respira SÓLO mientras Aurora trabaja
 * (decidido por Max el 2026-10-01): un pulso perpetuo junto al nombre del caso
 * se leía como «grabando» en un producto que dicta audio. `data-turno-en-vuelo`
 * lo estampa la raíz del shell mientras hay un turno en curso.
 *
 * Respira con la ESCALA y no con la opacidad: la opacidad es la que lo hace
 * aparecer y desaparecer, y una animación que la toque deja de transicionar
 * al terminar —el punto se apagaba de golpe, en el mismo fotograma—. Así entra
 * en 400 ms y se asienta en 800, como el horizonte del composer. */

@keyframes au-respira {
  0%, 100% { transform: scale(0.78); }
  50%      { transform: scale(1); }
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-respira {
  animation: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-turno-en-vuelo] .au-respira {
  animation: au-respira 2.8s ease-in-out infinite;
}

/* EL CURSOR RESPIRA, NO CHASQUEA. El trazo que marca por dónde escribe Aurora
 * parpadeaba como el de una terminal (`steps(1)`: encendido, apagado, sin nada
 * en medio), lo único de la sala que chasqueaba. Ahora baja y sube con
 * suavidad, al mismo compás. Con «reducir movimiento», chat-redesign.css ya lo
 * deja quieto y visible (con `!important`, así que esto no lo toca). */

@keyframes au-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-caret {
  animation: au-cursor 1.1s ease-in-out infinite;
}

/* El punto de presencia SÓLO existe mientras Aurora trabaja (Max, 2026-10-01,
 * viendo producción: «el punto verde del header aparece todo el tiempo»). En
 * reposo la sala ya dice que Aurora está —es su luz—; un punto quieto junto al
 * nombre se leía como el «en línea» de una app de mensajería.
 *
 * La cabecera lo monta siempre, oculto (`hidden`): sólo esta hoja lo muestra,
 * así que con la bandera apagada no ocupa sitio. Va en absoluto dentro del
 * sitio que le reserva `.au-titulo`, así que aparecer no desplaza nada. Su
 * color sale del token, no de un degradado en línea. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-presencia] {
  display: block;
  position: absolute;
  inset-inline-start: 0;
  top: calc(50% - 0.25rem);
  margin: 0;
  background: linear-gradient(135deg, hsl(var(--lv-aurora-teal)), hsl(var(--lv-aurora-verde)));
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-turno-en-vuelo] [data-presencia] {
  opacity: 1;
  transition-duration: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-respira { animation: none; }
}

/* ── LOS PASOS VIVEN EN EL MISMO CARRIL, Y NO SON TARJETAS ──────────────────
 *
 * El diseño anterior hace dos cosas que aquí están prohibidas a la vez: abre un
 * SEGUNDO carril —`ml-2 … pl-3`, 20px más de sangría colgados de un `border-l`
 * gris— y envuelve cada paso en una tarjeta con relleno, borde y radio. Una
 * caja dentro del cuerpo de la aurora devuelve exactamente la sensación de
 * «componente pegado» que el cuerpo existe para disolver, y el segundo carril
 * rompe la regla de que sólo hay uno.
 *
 * La línea guía no se cambia por otra línea: el carril ya la hace. Lo que
 * ordena estos pasos es que su tick CUELGUE en la calle y su texto caiga sobre
 * el mismo carril que la prosa — la misma sangría francesa del chevron y el
 * pie. Una línea dibujada al lado de un texto que ya está alineado es una
 * muleta, y encima a dpr 1,25 se parte. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='pasos'] {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* LA MARCA SE ANCLA EN EL CARRIL, NO FUERA DE ÉL — y esto NO es la primera
 * intención, es lo que la medición dejó en pie.
 *
 * El plan era colgar el tick en la calle, a 330, con el texto del paso cayendo
 * sobre el carril de la prosa a 352. Maqueta bien y NO SE VE: entre el cuerpo y
 * los pasos hay dos envoltorios con `overflow-hidden` —el de la animación de
 * altura y el contenedor de partes— cuyo borde izquierdo es exactamente 352.
 * La marca salía fuera y la recortaban. Y no se arregla abriendo ese recorte:
 * `overflow-x: visible` junto a un `overflow-y` que no lo es computa `auto`, o
 * sea un contenedor que SE DESPLAZA en horizontal, que es precisamente lo que
 * inhibe el gesto chat↔canvas.
 *
 * Así que la calle vive DENTRO del recorte: el tick se posa en el carril y la
 * etiqueta cuelga de él. La relación de sangría francesa se conserva —la marca
 * primero, el texto colgado—; lo que cambia es dónde está su origen.
 *
 * Corolario que conviene no olvidar: cualquier marca colgada dentro del cuerpo
 * de Aurora tiene este techo. No es de este bloque, es de esos dos envoltorios.
 *
 * Y vale para TODO paso, no sólo para los de un lote. Hasta el 2026-10-01 el
 * selector exigía `[data-parte='pasos']` delante, así que la acción SUELTA se
 * quedaba con la sangría colgante general (−1,25 rem; −1,1 en el teléfono) y su
 * marca caía fuera del recorte: «la generación de documento se ve fuera del
 * contenedor», reportado desde el teléfono de Max. Las acciones con detalle se
 * salvaban por `button[aria-expanded]`; el documento, que se abre y no se
 * despliega, no lo lleva. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] > button:first-of-type {
  gap: 0.5rem;
  /* La regla general de sangría colgante tira de este botón —es el primero de
   * su caja— y lo lleva justo al otro lado del recorte. Aquí se anula, y hace
   * falta `:first-of-type` para conseguirlo: la variante que gana no es la
   * corta, es la del chevron, `button:first-of-type:has(svg.lucide-chevron-
   * right)`, que suma (0,5,2) porque `:has()` presta la especificidad de su
   * argumento. Estos pasos llevan un chevron a la derecha, así que caen en
   * ella. Sin este `:first-of-type` el selector se queda en (0,5,1) y pierde
   * en silencio —medido: el botón seguía a -22px—. */
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* La acción EN CURSO sigue teniendo que decir que corre. Al quitarle la caja al
 * paso se quedó sin dónde pintar `pc-aurora-viva`, que es un borde animado: el
 * borde vuelve, pero sólo mientras está activa, que es cuando significa algo. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'].pc-aurora-viva {
  border-width: 1px;
  border-radius: var(--lv-radio);
}

/* Con el borde vivo, la fila respira por arriba, por abajo y por la derecha.
 * Por la izquierda no hace falta: el glifo de «corriendo» está apagado (la
 * firma es el horizonte), así que su hueco ya separa el título del borde. Y es
 * lo que hace que al terminar no se mueva nada: el visto aparece en ese mismo
 * hueco, sobre el carril, donde estaba. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'].pc-aurora-viva > button:first-of-type {
  padding-block: 0.5rem;
  padding-inline-end: 0.75rem;
}

/* ── 0 · Lo que dice Aurora es «Aurora», sin el nombre de un agente ─────────
 * «· Sistema de Coordinación» junto a «Aurora» es vocabulario de máquina justo
 * donde el psicólogo espera a una persona (Max lo pidió quitar en la ronda 2
 * del banco). El componente marca el rótulo con `data-rotulo-agente`; esta
 * hoja lo oculta, así que con la bandera apagada sigue como hoy. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-rotulo-agente] {
  display: none;
}

/* El texto en acento usa la variante honda: el verde da 4,62:1 sobre el suelo y
 * 3,90 bajo el velo; el hondo, 6,60 y 5,57. El verde pleno queda para lo que
 * ACTÚA (rellenos, foco, la aurora). */

[data-aurora-redesign][data-aurora-lenguaje-visual] .text-pc-accent {
  color: hsl(var(--lv-aurora-verde-2));
}

/* ── 5 · La cita dentro de la voz de Aurora: una sangría, no una caja ────────
 * Dentro del cuerpo de Aurora nada es una caja aparte, y un filete grueso de
 * color a un lado es el mismo patrón que se le quitó al mensaje del psicólogo.
 * Queda un filete neutro de 1 px con ≥3:1, la tinta media y aire a los dos
 * lados; recta y en peso normal. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .markdown-content blockquote {
  margin-block: 1.1em;
  padding: 0.1em 0 0.1em 1.1em;
  border-left: 1px solid hsl(var(--lv-tinta-3) / 0.75);
  border-radius: 0;
  background: transparent;
  color: hsl(var(--lv-tinta-2));
  font-style: normal;
  font-weight: 400;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .markdown-content blockquote p {
  margin-block: 0.4em;
}

/* ── 6 · Enlaces: subrayado de la paleta, no del navegador ───────────────────
 * Se distinguen por algo más que el color (WCAG 1.4.1); el subrayado sale de la
 * aurora y respira del texto. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .markdown-content a:not(.cite-marker) {
  color: hsl(var(--lv-aurora-verde-2));
  text-decoration-line: underline;
  text-decoration-color: hsl(var(--lv-aurora-verde) / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 160ms ease-out;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .markdown-content a:not(.cite-marker):hover {
  text-decoration-color: currentColor;
}

/* ── 7 · Lo que no se dibuja también lleva el diseño ─────────────────────────
 * La selección, el cursor del campo de escritura y la barra del log salen de la
 * paleta, en toda la sala. */

[data-aurora-redesign][data-aurora-lenguaje-visual] ::selection {
  background: hsl(var(--lv-aurora-verde-d));
  color: hsl(var(--lv-tinta));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] textarea {
  caret-color: hsl(var(--lv-aurora-verde));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [role='log'] {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--lv-canto-2)) transparent;
}

/* ── 8 · La telemetría del turno en cifras tabulares ─────────────────────────
 * «1,4 s», «2,6 s», «· 2 ·»: con cifras proporcionales, las duraciones de filas
 * vecinas bailan de ancho. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button {
  font-variant-numeric: tabular-nums;
}

/* ── 8b · La tipografía de instrumento habla la voz de la sala ───────────────
 * `pc-num`, `pc-mono` y `pc-tag` son el registro del diseño anterior: horas,
 * cuentas e identificadores en monoespaciada, y rótulos en VERSALITAS de 11 px
 * con 0,13em de tracking. Dentro de la sala nadie los tradujo, y eran lo que
 * quedaba de máquina en la pantalla: «CASO» junto al nombre del caso, «15:40»
 * con cero tachado, «RECIENTES», «CANVAS» en vertical. La regla de la voz única
 * (DESIGN.md) lo dice: todo habla con la misma voz, sin versalitas, y la
 * monoespaciada es para el código. El código de verdad no pasa por aquí: lo
 * pinta `font-pc-mono` dentro de la prosa.
 *
 * Las cifras conservan lo que sí servía: siguen siendo tabulares, para que una
 * hora o una cuenta no bailen de ancho. El color y el tamaño los decide cada
 * sitio; el rótulo fija el suyo porque antes lo fijaba la clase. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-num,
[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-mono {
  font-family: inherit;
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-tag {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

/* «práctica» distinguía un caso de estudio de uno real gritando en versalitas.
 * En caja baja, un rótulo más junto a un nombre se pierde, y es justo lo que no
 * puede perderse: queda como un sello quieto, con canto entero y sin relleno. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-rotulo-practica] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.4375rem;
  border: 1px solid hsl(var(--lv-canto-2));
  border-radius: 9999px;
  color: hsl(var(--lv-tinta-2));
}

/* ── 9 · Las acciones dentro de la voz: al pasar cambia la tinta, no el fondo ─
 * Sin la caja de la tarjeta, el relleno de hover dibuja un rectángulo dentro del
 * cuerpo de Aurora. Se conserva al PULSAR: confirma el toque en el teléfono. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] > button:hover:not(:active) {
  background-color: transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz button:hover .font-medium {
  color: hsl(var(--lv-tinta));
}

/* ── 12 · LA FIRMA: el horizonte de la sala trabaja ──────────────────────────
 * Decidido por Max el 2026-10-01: la ÚNICA señal de sala de que Aurora trabaja
 * es el horizonte del composer. La hoja del composer es el suelo donde está la
 * mano, y su canto superior es literalmente el horizonte del campo. Mientras
 * Aurora trabaja —pensando, en un lote plegado o escribiendo— la aurora aparece
 * en ese canto y deriva; al terminar se asienta en 800 ms en vez de cortarse en
 * el mismo fotograma. Es idéntica en el teléfono y en escritorio.
 *
 * Por eso se retiran las otras señales genéricas de «corriendo»: las barras de
 * cuatro colores del secuenciador y el spinner de cada acción. Queda la de
 * OBJETO, decidida también por Max: el borde vivo de la acción suelta, que dice
 * «esto es lo que se está escribiendo en la ficha». */

@keyframes au-deriva {
  from { background-position: 0% 50%; }
  to   { background-position: -150% 50%; }
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja {
  position: relative;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja::before {
  content: '';
  position: absolute;
  top: -1px;
  inset-inline: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pc-aurora-stops));
  background-size: 300% 100%;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: au-deriva 7s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-turno-en-vuelo] .au-hoja::before {
  opacity: 1;
  transition-duration: 400ms;
  animation-play-state: running;
}

/* La luz que SUBE del horizonte. Un filete solo, a 2 px y en claro, se lee como
 * un anillo de foco verdoso. La aurora es luz que emana: encima del filete, el
 * mismo degradado desenfocado y desvanecido hacia arriba. Alfa bajo a propósito:
 * pasa por encima del final del log y no puede comerle contraste al texto
 * (tinta queda 5,39 → ≥5,0). */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja::after {
  content: '';
  position: absolute;
  bottom: 100%;
  inset-inline: 2.5rem;
  height: 22px;
  background: linear-gradient(90deg, var(--pc-aurora-stops));
  background-size: 300% 100%;
  background-repeat: repeat-x;
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
  filter: blur(6px);
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: au-deriva 7s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-turno-en-vuelo] .au-hoja::after {
  opacity: 0.22;
  transition-duration: 400ms;
  animation-play-state: running;
}

.dark [data-aurora-redesign][data-aurora-lenguaje-visual][data-turno-en-vuelo] .au-hoja::after {
  opacity: 0.32;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .pc-seq {
  display: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz .animate-spin {
  animation: none;
  opacity: 0;
}

/* El borde vivo de la acción suelta: «corriendo» fluye en un solo sentido. El
 * de base va y vuelve (0→100→0 %, ease-in-out), y un vaivén se lee como
 * «cargando»; una aurora deriva. Aquí la luz se mueve con `transform` sobre un
 * `<span data-luz>` que la tarjeta monta mientras corre, y no con
 * `background-position`, que repinta en el hilo principal justo durante el
 * streaming. El span es el anillo (máscara y recorte); su `::before` es una
 * tira de dos baldosas del degradado que se desplaza una baldosa entera por
 * ciclo: los stops son palíndromos, así que no deja costura. */

@keyframes au-deriva-luz {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-aurora-viva::before {
  content: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-aurora-viva [data-luz] {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-aurora-viva [data-luz]::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -300%;
  width: 600%;
  background: linear-gradient(90deg, var(--pc-aurora-stops));
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: au-deriva-luz 7s linear infinite;
  will-change: transform;
}

/* Sin movimiento, el horizonte y la luz se encienden y se apagan quietos: siguen
 * diciendo «trabajando» sin derivar. */

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja::before,
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-hoja::after,
  [data-aurora-redesign][data-aurora-lenguaje-visual] .pc-aurora-viva [data-luz]::before {
    animation: none;
  }
}

/* ── 13 · Enviar ─────────────────────────────────────────────────────────────
 * El degradado del banco en Enviar gastaba la aurora en un control —el tic del
 * botón de IA—: la firma vive en la sala. Enviar es verde pleno, como
 * «Redactar», con la tinta del suelo encima para que el gemelo oscuro no lo deje
 * en 2,27:1. Nunca sobre el botón deshabilitado: un Enviar apagado tiene que
 * verse apagado. El composer sólo lo marca `au-enviar` sin acción rápida
 * armada, porque entonces el botón adopta el matiz de la acción. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-enviar:not(:disabled) {
  background: hsl(var(--lv-aurora-verde));
  color: hsl(var(--lv-suelo));
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-enviar:not(:disabled):hover {
  background: hsl(var(--lv-aurora-verde-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-enviar:not(:disabled):active {
  transform: scale(0.96);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-enviar {
  border-radius: 9999px;
}

/* ── 14 · El documento es papel de la sala, no un tablero ──────────────────────
 * El panel del canvas era lo último que hablaba el idioma de antes (medido en el
 * banco el 2026-10-01): mientras se escribía, una barra verde plana, una pastilla
 * verde rellena por cada sección terminada y otra para «Listo»; y su tabla, una
 * banda gris con encabezados en VERSALITAS de serif, cuando la misma tabla en el
 * chat es una tabla de publicación. El verde lleno es de lo que ACTÚA
 * («Redactar», Enviar): gastado en estados, deja de decir «aquí se actúa».
 *
 * El trabajo en curso lo dice la aurora, como en el horizonte del composer: una
 * línea de luz que crece. Las secciones y el estado son texto quieto, con la
 * marca de hecho en verde hondo. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-progreso-del-documento] {
  height: 2px;
  background: hsl(var(--lv-canto));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-progreso-del-documento] > div {
  background: linear-gradient(90deg, var(--pc-aurora-stops));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion],
[data-aurora-redesign][data-aurora-lenguaje-visual] [data-estado-del-documento] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
  font-weight: 400;
  color: hsl(var(--lv-tinta-3));
  animation: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion] {
  margin-inline-end: 0.5rem;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion][data-hecha],
[data-aurora-redesign][data-aurora-lenguaje-visual] [data-estado-del-documento='listo'] {
  color: hsl(var(--lv-tinta-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion][data-hecha] svg,
[data-aurora-redesign][data-aurora-lenguaje-visual] [data-estado-del-documento='listo'] svg {
  color: hsl(var(--lv-aurora-verde-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion][data-en-curso] {
  color: hsl(var(--lv-tinta));
}

/* Mientras se escribe, la señal es la línea de luz: sin giradores sueltos. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion][data-en-curso] svg,
[data-aurora-redesign][data-aurora-lenguaje-visual] [data-estado-del-documento='generando'] svg {
  display: none;
}

/* Pero la sección que se escribe no puede distinguirse sólo por la tinta (WCAG
 * 1.4.1; revisión de cierre): lleva los puntos suspensivos de «Generando…». El
 * lector oye `aria-current="step"`, no los puntos. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-seccion][data-en-curso]::after {
  content: '…';
  content: '…' / '';
  pointer-events: none;
}

/* En el teléfono, el título del documento lleva su glifo, como en escritorio, y
 * no una pestaña de acento a un lado (el patrón que se le quitó al mensaje). */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-acento-del-documento] {
  display: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-icono-del-documento] {
  display: block;
}

/* La tabla del documento es la misma tabla de publicación que la del chat: tres
 * reglas, sin banda ni cebra, el encabezado en caja baja y en la sans de
 * trabajo. Sin el énfasis por columna del chat («la inferencia manda», elegido
 * para la voz de Aurora): un documento no sabe qué columna es la inferencia. La
 * exportación a PDF y Word no pasa por aquí. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper {
  background: transparent;
  border: 0;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--lv-canto-2) / 0.8) transparent;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table {
  background: transparent;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: hsl(var(--lv-canto-2));
  border-radius: 0;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-header {
  background: transparent;
  box-shadow: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-th {
  background: transparent;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: hsl(var(--lv-tinta-2));
  border-bottom: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-td {
  border-bottom: 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-header .clinical-table-row {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto-2));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table tbody .clinical-table-row,
[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table tbody .clinical-table-row:hover,
[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table tbody .clinical-table-row:nth-child(even),
[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table tbody .clinical-table-row:nth-child(even):hover {
  background: transparent;
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto) / 0.8);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table tbody .clinical-table-row:last-child {
  box-shadow: inset 0 -1px 0 0 hsl(var(--lv-canto-2));
}

/* Lo que se oculta al desplazar se disuelve, como en el chat: fuera la flecha y
 * la banda pintadas de `clinical-tables.css`, que tapaban el remate de las reglas. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper::before,
[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper::after {
  content: none !important;
  display: none !important;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper.has-overflow {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 32px), transparent 100%);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper.has-overflow.scrolled {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .clinical-document .clinical-table-wrapper:focus-visible {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── 15 · Casos habla la voz de la sala ──────────────────────────────────────
 * En la revisión sobre producción Casos sólo recibió el fondo y el puente de
 * tokens; su lenguaje de componente seguía siendo el de antes (medido en el banco
 * el 2026-10-01, `/dev/banco/casos`). Lo que quedaba:
 *   - trece rótulos en VERSALITAS de 10-11 px con 0,14-0,16em de tracking
 *     («FORMULACIÓN DEL CASO», «DINÁMICA CENTRAL», la fecha de cada sesión),
 *     contra la regla de la voz única;
 *   - el nombre del caso en serif de cartel sobre el suelo tibio: el «crema con
 *     serif» que el dueño descartó como dirección. La serif es la voz de Aurora
 *     (su monograma, su bienvenida); el nombre de un caso es un dato y va en la
 *     sans de trabajo, como en la cabecera del shell;
 *   - el punto de recencia con semáforo (verde que late, ámbar a la semana): el
 *     ámbar dice «algo va mal» de un caso que sólo lleva días sin sesión, y un
 *     latido perpetuo es el «en línea» que ya se le quitó a la cabecera;
 *   - la fila elegida con tinte, borde de acento y pestaña lateral;
 *   - los campos de la formulación colgados de un filete lateral: un segundo
 *     carril. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Sin versalitas, un rótulo que empieza en minúscula («jueves 10 de…») la
 * lleva al frente de su línea. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-rotulo::first-letter {
  text-transform: uppercase;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-marco-del-caso h1 {
  font-family: var(--font-sans), system-ui, sans-serif;
  /* El paso «title» de la escala (DESIGN.md), el del h2 de la prosa. */
  font-size: clamp(1.1875rem, 1.1161rem + 0.3571vw, 1.4375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Sin semáforo ni latido, un punto gris igual para todos los casos ya no dice
 * nada (revisión de cierre): lo dice el texto, «Activo hace 3 días». */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-recencia] {
  display: none;
}

/* La fila elegida es lo que la sala tiene entre manos: una hoja, y una MARCA —el
 * punto de aurora, el idioma del punto de presencia— en la calle de 16 px antes
 * del nombre, centrada en su línea. No la pestaña lateral, y no sólo la hoja: su
 * cambio de luz contra el suelo es de ~1,05:1, y un estado elegido tiene que
 * verse a 3:1 (WCAG 1.4.11; el verde da ~4,6:1). Revisión de cierre, 2026-10-01. */

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-fila-de-caso][aria-current='true'] {
  background-color: hsl(var(--lv-hoja) / 0.85);
  border-color: hsl(var(--lv-canto) / 0.9);
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-marca-de-seleccion] {
  left: 0.3125rem;
  top: 1.35rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: hsl(var(--lv-aurora-verde));
}

[data-aurora-redesign][data-aurora-lenguaje-visual] [data-campos-de-la-formulacion] {
  border-left: 0;
  padding-left: 0;
}

/* ── 16 · LO QUE SE ABRE ES UNA HOJA DE LA SALA (2026-10-02) ──────────────────
 * Menús, fichas emergentes, ayudas, selectores, diálogos y cajones salen a
 * <body> por un portal. Hasta hoy sólo heredaban el puente de tokens y se
 * pintaban con el molde de shadcn: caja blanca opaca, sombra gris, el menú que
 * hacía zoom desde el 95 % y el velo NEGRO al 80 % detrás de cada diálogo. Los
 * momentos de más atención eran los menos de la casa.
 *
 * Cada primitivo de `components/ui` declara qué es (`data-superficie`: menu,
 * popover, tooltip, dialogo, hoja) y el velo lleva la raíz (`data-velo`), así
 * que con la bandera apagada nada de esto aplica. Las reglas pesan (0,3,0) y
 * ganan a las utilidades del molde y a las de cada llamador (`bg-pc-surface`,
 * `rounded-pc`, `shadow-sm`), que es justo lo que se quiere: un solo material
 * para todo lo que se abre, decidido aquí y no en cada sitio. */

/* Lo que FLOTA —menús, fichas, ayudas— es papel translúcido sobre la sala: su
 * canto, la sombra corta de la tinta de la casa y el desenfoque de la cabecera
 * (lo que pasa por detrás se adivina, no se lee). Radio de lo que se pulsa. */

[data-aurora-redesign][data-aurora-lenguaje-visual]:is([data-superficie='menu'], [data-superficie='popover'], [data-superficie='tooltip']) {
  background-color: hsl(var(--lv-hoja) / 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid hsl(var(--lv-canto));
  border-radius: var(--lv-radio);
  box-shadow: var(--lv-sombra-flotante);
  color: hsl(var(--lv-tinta));
  /* Llega como se posa la casa: sin el zoom desde el 95 % del molde, que
   * «salta», sino casi desde su tamaño. */
  --tw-enter-scale: 0.985;
  --tw-exit-scale: 0.985;
}

/* Una ayuda es texto pequeño: más opaca, para que nada de lo de detrás le reste
 * lectura. */

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='tooltip'] {
  background-color: hsl(var(--lv-hoja) / 0.96);
}

/* Lo que ACOGE una tarea —un diálogo— es la hoja del composer: el radio de lo
 * que acoge, su halo, y la misma sombra corta para despegarse del velo. Opaca y
 * sin desenfoque: lo que se lee aquí es una tarea, y un desenfoque detrás de
 * una hoja casi opaca no se ve pero se paga en cada cuadro de su llegada. */

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='dialogo'] {
  background-color: hsl(var(--lv-hoja));
  border: 1px solid hsl(var(--lv-canto));
  border-radius: var(--lv-radio-2);
  box-shadow: var(--lv-halo), var(--lv-sombra-flotante);
  color: hsl(var(--lv-tinta));
}

/* En el teléfono el molde ocupaba el ancho ENTERO sin radio (`sm:rounded-lg`):
 * una tabla pegada a los cantos de la pantalla. Con 12 px de aire a cada lado
 * es una hoja que se posa. */

@media (max-width: 639.98px) {
  [data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='dialogo'] {
    width: calc(100% - 1.5rem);
  }
}

/* Lo que entra por un costado —el cajón de navegación, el selector de caso del
 * teléfono— también acoge: la misma hoja, con el radio sólo en el canto que da
 * a la sala. El canto pegado al borde de la pantalla sigue recto. */

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='hoja'] {
  background-color: hsl(var(--lv-hoja));
  border-color: hsl(var(--lv-canto));
  box-shadow: var(--lv-sombra-flotante);
  color: hsl(var(--lv-tinta));
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='hoja'][data-lado='left'] {
  border-radius: 0 var(--lv-radio-2) var(--lv-radio-2) 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='hoja'][data-lado='right'] {
  border-radius: var(--lv-radio-2) 0 0 var(--lv-radio-2);
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='hoja'][data-lado='bottom'] {
  border-radius: var(--lv-radio-2) var(--lv-radio-2) 0 0;
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='hoja'][data-lado='top'] {
  border-radius: 0 0 var(--lv-radio-2) var(--lv-radio-2);
}

/* EL VELO BAJA LA LUZ, NO APAGA LA SALA. El negro al 80 % del molde convertía
 * cada diálogo en un apagón: en una consulta, lo que se abre encima no debería
 * hacer desaparecer lo que se estaba mirando. Tinta de la casa muy diluida: la
 * sala sigue ahí, quieta, detrás. Con ratón, además, un desenfoque leve; en el
 * teléfono no, porque un filtro a pantalla completa mientras el cajón entra es
 * justo el cuadro que se pierde en un Android de gama media. */

[data-aurora-redesign][data-aurora-lenguaje-visual][data-velo] {
  background-color: hsl(var(--lv-velo));
}

@media (hover: hover) and (pointer: fine) {
  [data-aurora-redesign][data-aurora-lenguaje-visual][data-velo] {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Sin desenfoque disponible, el papel vuelve a ser opaco: translúcido SIN
 * desenfoque deja leer lo de detrás a través del menú. */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-aurora-redesign][data-aurora-lenguaje-visual]:is([data-superficie='menu'], [data-superficie='popover'], [data-superficie='tooltip']) {
    background-color: hsl(var(--lv-hoja));
  }
}

/* Las filas de un menú: al pasar o al llegar con el teclado, la luz de la
 * aurora responde —el mismo verde diluido de lo que acoge—, no el beige del
 * molde. La fila que cierra la sesión responde en su propio tono. */

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='menu'] :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option']) {
  border-radius: calc(var(--lv-radio) - 3px);
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='menu'] :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'], [role='option'])[data-highlighted] {
  background-color: hsl(var(--lv-aurora-verde-d) / 0.75);
  color: hsl(var(--lv-tinta));
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='menu'] [role='menuitem'][data-highlighted][class*='destructive'] {
  background-color: hsl(var(--lv-errata-d));
  color: hsl(var(--lv-errata));
}

[data-aurora-redesign][data-aurora-lenguaje-visual][data-superficie='menu'] [role='separator'] {
  background-color: hsl(var(--lv-canto));
}

/* Los tiempos de la casa: entra decelerando y se va acelerando, en el tiempo
 * de un gesto. El molde llegaba en 150 ms con la misma curva para los dos. Las
 * hojas laterales conservan el suyo (300 / 200, sheet.tsx), el de la hoja del
 * canvas. */

[data-aurora-redesign][data-aurora-lenguaje-visual]:is([data-superficie='menu'], [data-superficie='popover'], [data-superficie='tooltip'], [data-superficie='dialogo'], [data-velo]):is([data-state='open'], [data-state='delayed-open'], [data-state='instant-open']) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

[data-aurora-redesign][data-aurora-lenguaje-visual]:is([data-superficie='menu'], [data-superficie='popover'], [data-superficie='tooltip'], [data-superficie='dialogo'], [data-velo])[data-state='closed'] {
  animation-duration: 120ms;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual]:is([data-superficie], [data-velo]) {
    animation: none;
  }
}

/* ── 17 · LOS BORDES DEL NAVEGADOR: LA BARRA DE DESPLAZAMIENTO (2026-10-02) ───
 * La selección y el cursor ya hablan la paleta (§7). La barra no: en Windows
 * —el escritorio del dueño del producto— el log, el documento y las pestañas
 * de Casos enseñaban la barra clásica gris con sus FLECHAS arriba y abajo, y
 * en oscuro una franja clara junto al texto. Es lo primero que delata una
 * interfaz montada y no construida.
 *
 * En Chromium y Safari, una barra fina de la tinta de la casa: carril
 * transparente, pulgar redondo de 4 px que se ensancha al pasar, sin flechas.
 * Chromium sólo respeta `::-webkit-scrollbar` si `scrollbar-width` y
 * `scrollbar-color` valen `auto`, así que aquí se devuelven a `auto` donde
 * `.scrollbar-thin` (base.css) los fijaba; `scrollbar-color` se hereda, así que
 * basta con anularlo en ese elemento. Firefox no tiene esos pseudo-elementos y
 * se queda con los estándar, en la misma tinta. `.scrollbar-hide` sigue oculta:
 * su `scrollbar-width: none` gana a todo esto. */

@supports selector(::-webkit-scrollbar) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .scrollbar-thin {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar-track,
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar-thumb {
    /* 0,3 y no 0,18: al 0,18 el pulgar quedaba en ~1,4:1 contra el suelo, y es
     * lo que dice dónde se está en un documento largo (revisión de cierre). */
    background-color: hsl(var(--lv-tinta) / 0.3);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 9999px;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--lv-tinta) / 0.5);
    border-width: 2px;
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
}

@supports not selector(::-webkit-scrollbar) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] {
    scrollbar-color: hsl(var(--lv-tinta) / 0.22) transparent;
  }
}

/* ── 18 · UN PASO DE DOS LÍNEAS CUELGA DE LA PRIMERA (2026-10-02) ─────────────
 * En el teléfono el resultado de un paso ocupa dos líneas («Contexto revisado ·
 * Síntesis: 4 / observaciones del historial reciente»), y el visto, la
 * duración y el chevron se centraban ENTRE las dos: tres marcas flotando a
 * media altura de un párrafo. Una marca es de la línea que anota —la misma
 * sangría francesa del carril—, así que se ancla a la primera. El paso que
 * corre (`pc-aurora-viva`) conserva su respiración propia.
 *
 * Con la fila alineada arriba, los 44 px del puntero grueso ya no centran una
 * fila de una línea: los da el relleno (12 + 20 + 12). */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] > button:first-of-type {
  align-items: flex-start;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] :is([data-etiqueta], [data-cifra]) {
  line-height: 1.25rem;
}

/* (20 − 14) / 2: la marca de 14 px, centrada en la línea de 20. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso'] [data-marca] {
  margin-top: 0.1875rem;
}

@media (pointer: coarse) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz [data-parte='paso']:not(.pc-aurora-viva) > button:first-of-type {
    padding-block: 0.75rem;
  }
}

/* ── 19 · EL HISTORIAL SIN EL COLOR DEL AGENTE (2026-10-02) ───────────────────
 * Cada conversación del riel y del cajón llevaba una barra de color a su
 * izquierda —gris, violeta, teal— según qué agente interno la atendió
 * (`activeAgent`: socrático, clínico, académico, orquestador). Es la
 * maquinaria pintada: nada en la interfaz dice qué significa cada color, y el
 * psicólogo no elige agente desde el agente unificado. Y es una pestaña
 * lateral de color por fila, el patrón que esta hoja quitó en todas partes.
 * En la fila desplegada se va: la elegida ya tiene su marca. En el riel
 * plegado la barra ES la fila, así que se queda, pero neutra: dice «aquí hay
 * una conversación», no qué la atendió. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-tick:not(:only-child) {
  display: none;
}

[data-aurora-redesign][data-aurora-lenguaje-visual] .pc-tick {
  background: hsl(var(--lv-tinta-3) / 0.45);
}

/* ── 20 · LA CONVERSACIÓN LARGA SE CALMA (2026-10-02) ───────────────────────
 * Propuesta que Max eligió quedarse el 2026-10-02, sobre las capturas del banco.
 *
 * Cada turno de Aurora terminaba igual: la huella de la cortina al 0,18 en su
 * costado —que en una conversación larga se lee como un filete gris continuo—
 * y una regla con «Copiar · Me gusta · No me gusta · hora». La cortina dice
 * por dónde ENTRÓ la luz, y eso es del turno que acaba de llegar, no de todos.
 *
 * Ahora la huella y el pie quedan en el ÚLTIMO turno de Aurora. En los
 * anteriores la huella se apaga despacio cuando llega el siguiente —mientras su
 * cortina se despliega, la del anterior se va—, y el pie vuelve al pasar el
 * ratón o al llegar con el teclado. Con puntero grueso no hay hover: el pie se
 * queda donde está. Su hueco se conserva siempre, así que nada se mueve. Y el
 * pie de un turno que el psicólogo ya valoró (Me gusta / No me gusta) no se
 * esconde: su propia valoración no puede depender de pasar el ratón. */

[data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz)::after {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz) [data-parte='pie'] {
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.4, 0, 1, 1);
  }
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz):is(:hover, :focus-within) [data-parte='pie'],
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz) [data-parte='pie']:has([aria-pressed='true']) {
    opacity: 1;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz)::after,
  [data-aurora-redesign][data-aurora-lenguaje-visual] .au-voz:has(~ .au-voz) [data-parte='pie'] {
    transition: none;
  }
}

@media (min-width: 768px) {

  .md\:prose-base {
    font-size: 1rem;
    line-height: 1.75;
  }

  .md\:prose-base :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .md\:prose-base :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
  }

  .md\:prose-base :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
  }

  .md\:prose-base :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
  }

  .md\:prose-base :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
  }

  .md\:prose-base :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }

  .md\:prose-base :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
  }

  .md\:prose-base :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .md\:prose-base :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .md\:prose-base :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:prose-base :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .md\:prose-base :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
    border-radius: 0.3125rem;
    padding-top: 0.1875em;
    padding-inline-end: 0.375em;
    padding-bottom: 0.1875em;
    padding-inline-start: 0.375em;
  }

  .md\:prose-base :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
  }

  .md\:prose-base :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
  }

  .md\:prose-base :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.9em;
  }

  .md\:prose-base :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding-top: 0.8571429em;
    padding-inline-end: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-inline-start: 1.1428571em;
  }

  .md\:prose-base :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
  }

  .md\:prose-base :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
  }

  .md\:prose-base :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .md\:prose-base :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0.375em;
  }

  .md\:prose-base :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0.375em;
  }

  .md\:prose-base :where(.md\:prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .md\:prose-base :where(.md\:prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .md\:prose-base :where(.md\:prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .md\:prose-base :where(.md\:prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .md\:prose-base :where(.md\:prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .md\:prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .md\:prose-base :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .md\:prose-base :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .md\:prose-base :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0.5em;
    padding-inline-start: 1.625em;
  }

  .md\:prose-base :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .md\:prose-base :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
  }

  .md\:prose-base :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
  }

  .md\:prose-base :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
  }

  .md\:prose-base :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
  }

  .md\:prose-base :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
    line-height: 1.7142857;
  }

  .md\:prose-base :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
  }

  .md\:prose-base :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .md\:prose-base :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .md\:prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-top: 0.5714286em;
    padding-inline-end: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-inline-start: 0.5714286em;
  }

  .md\:prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .md\:prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    padding-inline-end: 0;
  }

  .md\:prose-base :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .md\:prose-base :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .md\:prose-base :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
  }

  .md\:prose-base :where(.md\:prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-top: 0;
  }

  .md\:prose-base :where(.md\:prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
    margin-bottom: 0;
  }
}

.marker\:text-pc-ink-3 *::marker {
  color: hsl(var(--pc-ink-3));
}

.marker\:text-pc-ink-3::marker {
  color: hsl(var(--pc-ink-3));
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}

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

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.placeholder\:text-pc-ink-3::placeholder {
  color: hsl(var(--pc-ink-3));
}

.before\:mr-0\.5::before {
  content: var(--tw-content);
  margin-right: 0.125rem;
}

.before\:text-pc-ink-3\/60::before {
  content: var(--tw-content);
  color: hsl(var(--pc-ink-3) / 0.6);
}

.before\:content-\[\'\#\'\]::before {
  --tw-content: '#';
  content: var(--tw-content);
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}

.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}

.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}

.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}

.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.first\:mt-6:first-child {
  margin-top: 1.5rem;
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

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

.first\:border-t-0:first-child {
  border-top-width: 0px;
}

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

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

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.last\:pb-2:last-child {
  padding-bottom: 0.5rem;
}

.focus-within\:relative:focus-within {
  position: relative;
}

.focus-within\:z-20:focus-within {
  z-index: 20;
}

.focus-within\:border-academic-plum-300:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(176 136 232 / var(--tw-border-opacity, 1));
}

.focus-within\:border-academic-plum-400:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(149 101 212 / var(--tw-border-opacity, 1));
}

.focus-within\:border-academic-plum-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(111 66 193 / var(--tw-border-opacity, 1));
}

.focus-within\:border-clarity-blue-300:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(82 159 255 / var(--tw-border-opacity, 1));
}

.focus-within\:border-clarity-blue-400:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(38 132 255 / var(--tw-border-opacity, 1));
}

.focus-within\:border-clarity-blue-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(13 110 253 / var(--tw-border-opacity, 1));
}

.focus-within\:border-mineral-gray:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(108 117 125 / var(--tw-border-opacity, 1));
}

.focus-within\:border-pc-accent:focus-within {
  border-color: hsl(var(--pc-accent));
}

.focus-within\:border-pc-agent-evidencia:focus-within {
  border-color: hsl(var(--pc-agent-evidencia));
}

.focus-within\:border-pc-agent-formulacion:focus-within {
  border-color: hsl(var(--pc-agent-formulacion));
}

.focus-within\:border-pc-agent-memoria:focus-within {
  border-color: hsl(var(--pc-agent-memoria));
}

.focus-within\:border-pc-agent-perspectiva:focus-within {
  border-color: hsl(var(--pc-agent-perspectiva));
}

.focus-within\:border-pc-agent-sistema:focus-within {
  border-color: hsl(var(--pc-agent-sistema));
}

.focus-within\:border-serene-teal-300:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(81 234 187 / var(--tw-border-opacity, 1));
}

.focus-within\:border-serene-teal-400:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(45 212 167 / var(--tw-border-opacity, 1));
}

.focus-within\:border-serene-teal-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(32 201 151 / var(--tw-border-opacity, 1));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.hover\:border-pc-accent:hover {
  border-color: hsl(var(--pc-accent));
}

.hover\:border-pc-accent\/50:hover {
  border-color: hsl(var(--pc-accent) / 0.5);
}

.hover\:border-pc-line:hover {
  border-color: hsl(var(--pc-line));
}

.hover\:border-pc-line-2:hover {
  border-color: hsl(var(--pc-line-2));
}

.hover\:bg-\[color-mix\(in_srgb\2c hsl\(var\(--pc-agent-evidencia\)\)_75\%\2c hsl\(var\(--pc-ink\)\)\)\]:hover {
  background-color: color-mix(in srgb,hsl(var(--pc-agent-evidencia)) 75%,hsl(var(--pc-ink)));
}

.hover\:bg-\[color-mix\(in_srgb\2c hsl\(var\(--pc-agent-formulacion\)\)_75\%\2c hsl\(var\(--pc-ink\)\)\)\]:hover {
  background-color: color-mix(in srgb,hsl(var(--pc-agent-formulacion)) 75%,hsl(var(--pc-ink)));
}

.hover\:bg-\[color-mix\(in_srgb\2c hsl\(var\(--pc-agent-memoria\)\)_75\%\2c hsl\(var\(--pc-ink\)\)\)\]:hover {
  background-color: color-mix(in srgb,hsl(var(--pc-agent-memoria)) 75%,hsl(var(--pc-ink)));
}

.hover\:bg-\[color-mix\(in_srgb\2c hsl\(var\(--pc-agent-perspectiva\)\)_75\%\2c hsl\(var\(--pc-ink\)\)\)\]:hover {
  background-color: color-mix(in srgb,hsl(var(--pc-agent-perspectiva)) 75%,hsl(var(--pc-ink)));
}

.hover\:bg-\[color-mix\(in_srgb\2c hsl\(var\(--pc-agent-sistema\)\)_75\%\2c hsl\(var\(--pc-ink\)\)\)\]:hover {
  background-color: color-mix(in srgb,hsl(var(--pc-agent-sistema)) 75%,hsl(var(--pc-ink)));
}

.hover\:bg-academic-plum-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 217 247 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-150:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(216 196 243 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 175 239 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-250:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(189 156 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(176 136 232 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(90 53 157 / var(--tw-bg-opacity, 1));
}

.hover\:bg-academic-plum-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 41 122 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

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

.hover\:bg-card:hover {
  background-color: hsl(var(--card));
}

.hover\:bg-clarity-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(195 222 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-150:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(167 207 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(139 191 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-250:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 175 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(82 159 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(10 88 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-clarity-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(8 70 159 / var(--tw-bg-opacity, 1));
}

.hover\:bg-deep-charcoal\/90:hover {
  background-color: rgb(52 58 64 / 0.9);
}

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

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

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-mineral-gray\/30:hover {
  background-color: rgb(108 117 125 / 0.3);
}

.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}

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

.hover\:bg-orange-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pc-accent-2:hover {
  background-color: hsl(var(--pc-accent-2));
}

.hover\:bg-pc-agent-evidencia\/20:hover {
  background-color: hsl(var(--pc-agent-evidencia) / 0.2);
}

.hover\:bg-pc-agent-memoria\/20:hover {
  background-color: hsl(var(--pc-agent-memoria) / 0.2);
}

.hover\:bg-pc-agent-memoria\/90:hover {
  background-color: hsl(var(--pc-agent-memoria) / 0.9);
}

.hover\:bg-pc-danger-weak:hover {
  background-color: hsl(var(--pc-danger-weak));
}

.hover\:bg-pc-danger\/10:hover {
  background-color: hsl(var(--pc-danger) / 0.1);
}

.hover\:bg-pc-ink\/10:hover {
  background-color: hsl(var(--pc-ink) / 0.1);
}

.hover\:bg-pc-ink\/90:hover {
  background-color: hsl(var(--pc-ink) / 0.9);
}

.hover\:bg-pc-surface:hover {
  background-color: hsl(var(--pc-surface));
}

.hover\:bg-pc-surface-2:hover {
  background-color: hsl(var(--pc-surface-2));
}

.hover\:bg-pc-surface-2\/60:hover {
  background-color: hsl(var(--pc-surface-2) / 0.6);
}

.hover\:bg-pc-surface-2\/70:hover {
  background-color: hsl(var(--pc-surface-2) / 0.7);
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}

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

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary\/30:hover {
  background-color: hsl(var(--secondary) / 0.3);
}

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

.hover\:bg-secondary\/50:hover {
  background-color: hsl(var(--secondary) / 0.5);
}

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

.hover\:bg-serene-teal-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(195 250 232 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-150:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(179 245 223 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(140 245 210 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-250:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 237 198 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(81 234 187 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(26 161 121 / var(--tw-bg-opacity, 1));
}

.hover\:bg-serene-teal-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(20 125 95 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sidebar-accent:hover {
  background-color: hsl(var(--sidebar-accent));
}

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

.hover\:bg-warning\/20:hover {
  background-color: hsl(var(--warning) / 0.2);
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}

.hover\:text-destructive\/70:hover {
  color: hsl(var(--destructive) / 0.7);
}

.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}

.hover\:text-pc-accent:hover {
  color: hsl(var(--pc-accent));
}

.hover\:text-pc-accent\/80:hover {
  color: hsl(var(--pc-accent) / 0.8);
}

.hover\:text-pc-danger:hover {
  color: hsl(var(--pc-danger));
}

.hover\:text-pc-ink:hover {
  color: hsl(var(--pc-ink));
}

.hover\:text-pc-ink-2:hover {
  color: hsl(var(--pc-ink-2));
}

.hover\:text-primary-foreground:hover {
  color: hsl(var(--primary-foreground));
}

.hover\:text-sidebar-accent-foreground:hover {
  color: hsl(var(--sidebar-accent-foreground));
}

.hover\:text-warning-foreground:hover {
  color: hsl(var(--warning-foreground));
}

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

.hover\:decoration-pc-ink:hover {
  text-decoration-color: hsl(var(--pc-ink));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 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);
}

.hover\:shadow-lg:hover {
  --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);
}

.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: hsl(var(--sidebar-border));
}

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

.focus\:fixed:focus {
  position: fixed;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-3:focus {
  left: 0.75rem;
}

.focus\:right-3:focus {
  right: 0.75rem;
}

.focus\:top-3:focus {
  top: 0.75rem;
}

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

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

.focus\:rounded-pc:focus {
  border-radius: var(--pc-radius);
}

.focus\:border-pc-accent:focus {
  border-color: hsl(var(--pc-accent));
}

.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}

.focus\:bg-destructive\/10:focus {
  background-color: hsl(var(--destructive) / 0.1);
}

.focus\:bg-pc-ink:focus {
  background-color: hsl(var(--pc-ink));
}

.focus\:bg-pc-surface-2:focus {
  background-color: hsl(var(--pc-surface-2));
}

.focus\:bg-primary:focus {
  background-color: hsl(var(--primary));
}

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

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

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

.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}

.focus\:text-pc-ink:focus {
  color: hsl(var(--pc-ink));
}

.focus\:text-pc-paper:focus {
  color: hsl(var(--pc-paper));
}

.focus\:text-primary-foreground:focus {
  color: hsl(var(--primary-foreground));
}

.focus\:opacity-100:focus {
  opacity: 1;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:bg-pc-surface-2\/70:focus-visible {
  background-color: hsl(var(--pc-surface-2) / 0.7);
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline-offset-\[-2px\]:focus-visible {
  outline-offset: -2px;
}

.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:ring-pc-accent:focus-visible {
  --tw-ring-color: hsl(var(--pc-accent));
}

.focus-visible\:ring-pc-accent\/40:focus-visible {
  --tw-ring-color: hsl(var(--pc-accent) / 0.4);
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-sidebar-ring:focus-visible {
  --tw-ring-color: hsl(var(--sidebar-ring));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}

.focus-visible\:ring-offset-pc-paper:focus-visible {
  --tw-ring-offset-color: hsl(var(--pc-paper));
}

.active\:scale-100:active {
  --tw-scale-x: 1;
  --tw-scale-y: 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));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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));
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}

.active\:bg-pc-surface-2:active {
  background-color: hsl(var(--pc-surface-2));
}

.active\:bg-sidebar-accent:active {
  background-color: hsl(var(--sidebar-accent));
}

.active\:text-sidebar-accent-foreground:active {
  color: hsl(var(--sidebar-accent-foreground));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:cursor-wait:disabled {
  cursor: wait;
}

.disabled\:bg-pc-surface-2:disabled {
  background-color: hsl(var(--pc-surface-2));
}

.disabled\:text-pc-ink-3:disabled {
  color: hsl(var(--pc-ink-3));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.disabled\:hover\:text-pc-ink-3:hover:disabled {
  color: hsl(var(--pc-ink-3));
}

.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 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));
}

.group\/lote:hover .group-hover\/lote\:text-pc-ink-2 {
  color: hsl(var(--pc-ink-2));
}

.group:hover .group-hover\:text-pc-agent-evidencia {
  color: hsl(var(--pc-agent-evidencia));
}

.group:hover .group-hover\:text-pc-ink {
  color: hsl(var(--pc-ink));
}

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

.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(var(--muted) / 0.4);
}

.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(var(--border));
}

.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(var(--muted));
}

.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(var(--primary));
}

.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(var(--background));
}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(var(--foreground));
}

.group.toaster .group-\[\.toaster\]\: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);
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / 0.3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}

.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}

.has-\[\[data-variant\=inset\]\]\:bg-sidebar:has([data-variant=inset]) {
  background-color: hsl(var(--sidebar-background));
}

.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}

.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-8 {
  padding-right: 2rem;
}

.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}

.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}

.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(var(--accent));
}

.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(var(--accent) / 0.5);
}

.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(var(--accent-foreground));
}

.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(var(--muted-foreground));
}

.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}

.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}

.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 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));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --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));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --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));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -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));
}

.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --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));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --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));
}

.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --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));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  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));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  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 accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}

.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}

@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}

.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}

.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: hsl(var(--sidebar-accent));
}

.data-\[active\]\:bg-accent\/50[data-active] {
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[highlighted\]\:bg-pc-surface-2[data-highlighted] {
  background-color: hsl(var(--pc-surface-2));
}

.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
  background-color: hsl(var(--accent));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}

.data-\[state\=active\]\:bg-transparent[data-state="active"] {
  background-color: transparent;
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}

.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(var(--accent) / 0.5);
}

.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(var(--secondary));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}

.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}

.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: hsl(var(--sidebar-accent-foreground));
}

.data-\[highlighted\]\:text-pc-ink[data-highlighted] {
  color: hsl(var(--pc-ink));
}

.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}

.data-\[state\=active\]\:text-pc-ink[data-state="active"] {
  color: hsl(var(--pc-ink));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}

.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}

.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}

.data-\[state\=active\]\:shadow-none[data-state="active"] {
  --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);
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --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);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}

.data-\[state\=active\]\:duration-quick[data-state="active"] {
  transition-duration: 200ms;
}

.data-\[state\=closed\]\:duration-quick[data-state="closed"] {
  transition-duration: 200ms;
}

.data-\[state\=open\]\:duration-normal[data-state="open"] {
  transition-duration: 300ms;
}

.data-\[state\=active\]\:ease-enter[data-state="active"] {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.data-\[state\=closed\]\:ease-exit[data-state="closed"] {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.data-\[state\=open\]\:ease-enter[data-state="open"] {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=active\]\:animate-in[data-state="active"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}

.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=active\]\:fade-in-0[data-state="active"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}

.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}

.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}

.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}

.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=active\]\:duration-quick[data-state="active"] {
  animation-duration: 200ms;
}

.data-\[state\=closed\]\:duration-quick[data-state="closed"] {
  animation-duration: 200ms;
}

.data-\[state\=open\]\:duration-normal[data-state="open"] {
  animation-duration: 300ms;
}

.data-\[state\=active\]\:ease-enter[data-state="active"] {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.data-\[state\=closed\]\:ease-exit[data-state="closed"] {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.data-\[state\=open\]\:ease-enter[data-state="open"] {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.data-\[state\=active\]\:after\:absolute[data-state="active"]::after {
  content: var(--tw-content);
  position: absolute;
}

.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}

.data-\[state\=active\]\:after\:-bottom-px[data-state="active"]::after {
  content: var(--tw-content);
  bottom: -1px;
}

.data-\[state\=active\]\:after\:left-3[data-state="active"]::after {
  content: var(--tw-content);
  left: 0.75rem;
}

.data-\[state\=active\]\:after\:right-3[data-state="active"]::after {
  content: var(--tw-content);
  right: 0.75rem;
}

.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}

.data-\[state\=active\]\:after\:h-\[2px\][data-state="active"]::after {
  content: var(--tw-content);
  height: 2px;
}

.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}

.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}

.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --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));
}

.data-\[state\=active\]\:after\:rounded-full[data-state="active"]::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.data-\[state\=active\]\:after\:bg-pc-ink[data-state="active"]::after {
  content: var(--tw-content);
  background-color: hsl(var(--pc-ink));
}

.data-\[state\=active\]\:after\:content-\[\'\'\][data-state="active"]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: hsl(var(--sidebar-accent));
}

.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: hsl(var(--sidebar-accent-foreground));
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}

.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}

.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-8 {
  width: 2rem !important;
  height: 2rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
  width: var(--sidebar-width-icon);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem);
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\: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));
}

.group[data-side="right"] .group-data-\[side\=right\]\: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));
}

.group[data-state="open"] .group-data-\[state\=open\]\: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));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}

.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}

.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: hsl(var(--sidebar-border));
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0 {
  padding: 0px !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-2 {
  padding: 0.5rem !important;
}

.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}

.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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);
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}

.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:hover\:bg-sidebar:hover {
  background-color: hsl(var(--sidebar-background));
}

.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}

.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}

.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}

.peer[data-variant="inset"] ~ .peer-data-\[variant\=inset\]\:min-h-\[calc\(100svh-theme\(spacing\.4\)\)\] {
  min-height: calc(100svh - 1rem);
}

.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: hsl(var(--sidebar-accent-foreground));
}

.prose-headings\:font-serif :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-serif), Georgia, serif;
}

.prose-headings\:font-semibold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-headings\:tracking-tight :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  letter-spacing: -0.025em;
}

.prose-headings\:text-foreground :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--foreground));
}

.prose-headings\:text-pc-ink :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink));
}

.prose-h1\:mb-3 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.75rem;
}

.prose-h1\:mt-6 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1.5rem;
}

.prose-h1\:border-b :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-bottom-width: 1px;
}

.prose-h1\:border-border\/30 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-color: hsl(var(--border) / 0.3);
}

.prose-h1\:pb-2 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  padding-bottom: 0.5rem;
}

.prose-h1\:font-serif :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-serif), Georgia, serif;
}

.prose-h1\:text-pc-h1 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1.375rem, 1.2857rem + 0.4464vw, 1.6875rem);
  line-height: 1.2;
}

.prose-h1\:text-xl :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.prose-h1\:font-semibold :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-h2\:mb-2 :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.5rem;
}

.prose-h2\:mb-2\.5 :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.625rem;
}

.prose-h2\:mt-5 :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1.25rem;
}

.prose-h2\:mt-7 :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1.75rem;
}

.prose-h2\:font-serif :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-serif), Georgia, serif;
}

.prose-h2\:text-lg :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.prose-h2\:text-pc-h2 :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1.1875rem, 1.1161rem + 0.3571vw, 1.4375rem);
  line-height: 1.3;
}

.prose-h2\:font-semibold :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-h3\:mb-1\.5 :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.375rem;
}

.prose-h3\:mb-2 :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.5rem;
}

.prose-h3\:mt-4 :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1rem;
}

.prose-h3\:mt-5 :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 1.25rem;
}

.prose-h3\:font-sans :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-sans), system-ui, sans-serif;
}

.prose-h3\:font-serif :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-serif), Georgia, serif;
}

.prose-h3\:text-base :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 1rem;
  line-height: 1.5rem;
}

.prose-h3\:text-pc-h3 :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1.0625rem, 1.0268rem + 0.1786vw, 1.1875rem);
  line-height: 1.35;
}

.prose-h3\:font-semibold :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-h4\:mb-1\.5 :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.375rem;
}

.prose-h4\:mt-3 :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.75rem;
}

.prose-h4\:font-sans :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-sans), system-ui, sans-serif;
}

.prose-h4\:text-pc-h4 :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1rem, 0.9821rem + 0.0893vw, 1.0625rem);
  line-height: 1.4;
}

.prose-h4\:font-semibold :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-p\:my-3 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose-p\:mb-3\.5 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-bottom: 0.875rem;
}

.prose-p\:text-pc-body :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  line-height: var(--pc-leading-body, 1.7);
}

.prose-p\:leading-\[1\.75\] :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  line-height: 1.75;
}

.prose-p\:text-foreground\/90 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--foreground) / 0.9);
}

.prose-p\:text-pc-ink :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink));
}

.prose-a\:break-words :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  overflow-wrap: break-word;
}

.prose-a\:font-normal :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 400;
}

.prose-a\:text-pc-accent :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-accent));
}

.prose-a\:no-underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  text-decoration-line: none;
}

.hover\:prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
  text-decoration-line: underline;
}

.prose-blockquote\:border-l-\[3px\] :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-left-width: 3px;
}

.prose-blockquote\:border-pc-accent\/60 :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-color: hsl(var(--pc-accent) / 0.6);
}

.prose-blockquote\:bg-pc-accent-weak\/40 :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  background-color: hsl(var(--pc-accent-weak) / 0.4);
}

.prose-blockquote\:font-normal :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 400;
}

.prose-blockquote\:not-italic :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-style: normal;
}

.prose-blockquote\:text-pc-ink-2 :is(:where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink-2));
}

.prose-strong\:font-semibold :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-strong\:text-foreground :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--foreground));
}

.prose-strong\:text-pc-ink :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink));
}

.prose-em\:text-pc-ink-2 :is(:where(em):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink-2));
}

.prose-code\:break-words :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  overflow-wrap: break-word;
}

.prose-code\:rounded-pc :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: var(--pc-radius);
}

.prose-code\:bg-pc-surface-2 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  background-color: hsl(var(--pc-surface-2));
}

.prose-code\:px-1 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.prose-code\:py-0\.5 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.prose-code\:font-pc-mono :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: var(--font-mono-pc), ui-monospace, SFMono-Regular, monospace;
}

.prose-code\:text-\[14\.5px\] :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 14.5px;
}

.prose-code\:text-pc-ink :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink));
}

.prose-code\:before\:hidden :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)))::before {
  content: var(--tw-content);
  display: none;
}

.prose-code\:after\:hidden :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)))::after {
  content: var(--tw-content);
  display: none;
}

.prose-pre\:relative :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  position: relative;
}

.prose-pre\:rounded-pc :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: var(--pc-radius);
}

.prose-pre\:border :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-width: 1px;
}

.prose-pre\:border-pc-line :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-color: hsl(var(--pc-line));
}

.prose-pre\:bg-pc-surface-2 :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  background-color: hsl(var(--pc-surface-2));
}

.prose-ol\:my-3 :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose-ul\:my-3 :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.prose-li\:my-1 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose-li\:my-1\.5 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.prose-li\:break-words :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  overflow-wrap: break-word;
}

.prose-li\:text-pc-body :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  line-height: var(--pc-leading-body, 1.7);
}

.prose-li\:leading-\[1\.7\] :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  line-height: 1.7;
}

.prose-li\:text-foreground\/90 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--foreground) / 0.9);
}

.prose-li\:text-pc-ink :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: hsl(var(--pc-ink));
}

.prose-li\:marker\:text-pc-ink-3 * :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)))::marker {
  color: hsl(var(--pc-ink-3));
}

.prose-li\:marker\:text-pc-ink-3 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)))::marker {
  color: hsl(var(--pc-ink-3));
}

@supports (height:100dvh) {

  .supports-\[height\:100dvh\]\:h-\[88dvh\] {
    height: 88dvh;
  }
}

@media (prefers-reduced-motion: no-preference) {

  @keyframes spin {

    to {
      transform: rotate(360deg);
    }
  }

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

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

.dark\:border-academic-plum-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(90 53 157 / var(--tw-border-opacity, 1));
}

.dark\:border-clarity-blue-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(13 110 253 / var(--tw-border-opacity, 1));
}

.dark\:border-clarity-blue-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(10 88 202 / var(--tw-border-opacity, 1));
}

.dark\:border-clarity-blue-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(8 70 159 / var(--tw-border-opacity, 1));
}

.dark\:border-destructive:is(.dark *) {
  border-color: hsl(var(--destructive));
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-serene-teal-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(26 161 121 / var(--tw-border-opacity, 1));
}

.dark\:border-serene-teal-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(20 125 95 / var(--tw-border-opacity, 1));
}

.dark\:bg-academic-plum-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(149 101 212 / var(--tw-bg-opacity, 1));
}

.dark\:bg-academic-plum-700\/50:is(.dark *) {
  background-color: rgb(71 41 122 / 0.5);
}

.dark\:bg-academic-plum-900\/40:is(.dark *) {
  background-color: rgb(34 19 52 / 0.4);
}

.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-clarity-blue-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 132 255 / var(--tw-bg-opacity, 1));
}

.dark\:bg-clarity-blue-600:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(10 88 202 / var(--tw-bg-opacity, 1));
}

.dark\:bg-clarity-blue-700\/50:is(.dark *) {
  background-color: rgb(8 70 159 / 0.5);
}

.dark\:bg-clarity-blue-900\/30:is(.dark *) {
  background-color: rgb(4 35 73 / 0.3);
}

.dark\:bg-clarity-blue-900\/40:is(.dark *) {
  background-color: rgb(4 35 73 / 0.4);
}

.dark\:bg-gray-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: rgb(31 41 55 / 0.5);
}

.dark\:bg-gray-900\/40:is(.dark *) {
  background-color: rgb(17 24 39 / 0.4);
}

.dark\:bg-serene-teal-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(45 212 167 / var(--tw-bg-opacity, 1));
}

.dark\:bg-serene-teal-700\/50:is(.dark *) {
  background-color: rgb(20 125 95 / 0.5);
}

.dark\:bg-serene-teal-900\/30:is(.dark *) {
  background-color: rgb(10 63 47 / 0.3);
}

.dark\:bg-serene-teal-900\/40:is(.dark *) {
  background-color: rgb(10 63 47 / 0.4);
}

.dark\:text-academic-plum-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 217 247 / var(--tw-text-opacity, 1));
}

.dark\:text-academic-plum-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(176 136 232 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400\/70:is(.dark *) {
  color: rgb(251 191 36 / 0.7);
}

.dark\:text-clarity-blue-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(195 222 255 / var(--tw-text-opacity, 1));
}

.dark\:text-clarity-blue-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(139 191 255 / var(--tw-text-opacity, 1));
}

.dark\:text-clarity-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(82 159 255 / var(--tw-text-opacity, 1));
}

.dark\:text-clarity-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(38 132 255 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400\/60:is(.dark *) {
  color: rgb(52 211 153 / 0.6);
}

.dark\:text-emerald-400\/70:is(.dark *) {
  color: rgb(52 211 153 / 0.7);
}

.dark\:text-gray-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:text-mineral-gray:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(108 117 125 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-serene-teal-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(195 250 232 / var(--tw-text-opacity, 1));
}

.dark\:text-serene-teal-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(140 245 210 / var(--tw-text-opacity, 1));
}

.dark\:text-serene-teal-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(81 234 187 / var(--tw-text-opacity, 1));
}

.dark\:text-serene-teal-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(45 212 167 / var(--tw-text-opacity, 1));
}

.dark\:focus-within\:border-academic-plum-500:focus-within:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(111 66 193 / var(--tw-border-opacity, 1));
}

.dark\:focus-within\:border-clarity-blue-500:focus-within:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(13 110 253 / var(--tw-border-opacity, 1));
}

.dark\:focus-within\:border-gray-600:focus-within:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:focus-within\:border-serene-teal-500:focus-within:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(32 201 151 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-academic-plum-600\/60:hover:is(.dark *) {
  background-color: rgb(90 53 157 / 0.6);
}

.dark\:hover\:bg-academic-plum-800\/50:hover:is(.dark *) {
  background-color: rgb(52 30 87 / 0.5);
}

.dark\:hover\:bg-clarity-blue-600\/60:hover:is(.dark *) {
  background-color: rgb(10 88 202 / 0.6);
}

.dark\:hover\:bg-clarity-blue-800\/50:hover:is(.dark *) {
  background-color: rgb(6 53 116 / 0.5);
}

.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-700\/60:hover:is(.dark *) {
  background-color: rgb(55 65 81 / 0.6);
}

.dark\:hover\:bg-gray-800\/40:hover:is(.dark *) {
  background-color: rgb(31 41 55 / 0.4);
}

.dark\:hover\:bg-serene-teal-600\/60:hover:is(.dark *) {
  background-color: rgb(26 161 121 / 0.6);
}

.dark\:hover\:bg-serene-teal-800\/50:hover:is(.dark *) {
  background-color: rgb(15 94 71 / 0.5);
}

@media not all and (min-width: 768px) {

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

@media not all and (min-width: 640px) {

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

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

@media (min-width: 640px) {

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

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

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

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

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

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

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

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

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

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

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

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

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

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

  .sm\:flex-col {
    flex-direction: column;
  }

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

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

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

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

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

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

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

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

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

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

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

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

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

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

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

  .sm\:text-\[21px\] {
    font-size: 21px;
  }

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

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

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

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

  .md\:h-10 {
    height: 2.5rem;
  }

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

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

  .md\:max-h-none {
    max-height: none;
  }

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

  .md\:min-h-\[100svh\] {
    min-height: 100svh;
  }

  .md\:min-h-\[3\.75rem\] {
    min-height: 3.75rem;
  }

  .md\:min-h-\[52px\] {
    min-height: 52px;
  }

  .md\:min-h-\[65svh\] {
    min-height: 65svh;
  }

  .md\:w-10 {
    width: 2.5rem;
  }

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

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

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

  .md\:w-full {
    width: 100%;
  }

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

  .md\:max-w-4xl {
    max-width: 56rem;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:max-w-full {
    max-width: 100%;
  }

  .md\:flex-initial {
    flex: 0 1 auto;
  }

  .md\:flex-none {
    flex: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:bg-muted\/15 {
    background-color: hsl(var(--muted) / 0.15);
  }

  .md\:bg-muted\/20 {
    background-color: hsl(var(--muted) / 0.2);
  }

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

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

  .md\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

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

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

  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

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

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

  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

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

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

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-3 {
    padding-bottom: 0.75rem;
  }

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

  .md\:pb-\[max\(0\.875rem\2c env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(0.875rem,env(safe-area-inset-bottom));
  }

  .md\:pb-\[max\(1\.25rem\2c env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: max(1.25rem,env(safe-area-inset-bottom));
  }

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

  .md\:pr-32 {
    padding-right: 8rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

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

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

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

  .md\:pt-3\.5 {
    padding-top: 0.875rem;
  }

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

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

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

  .md\:opacity-0 {
    opacity: 0;
  }

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

  .md\:\[--clinical-document-pad-x\:2rem\] {
    --clinical-document-pad-x: 2rem;
  }

  .after\:md\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-state="collapsed"][data-variant="inset"] ~ .md\:peer-data-\[state\=collapsed\]\:peer-data-\[variant\=inset\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\: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);
  }

  .md\:prose-h1\:text-2xl :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:prose-h2\:text-xl :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:prose-h3\:text-lg :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {

  .lg\:inline {
    display: inline;
  }

  .lg\:w-\[35rem\] {
    width: 35rem;
  }

  .lg\:w-full {
    width: 100%;
  }

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

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

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

  .lg\:text-\[3\.5rem\] {
    font-size: 3.5rem;
  }
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(var(--accent));
}

.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}

.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(var(--accent) / 0.5);
}

.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}

.\[\&\>\*\]\:pointer-events-auto>* {
  pointer-events: auto;
}

.\[\&\>button\]\:hidden>button {
  display: none;
}

.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  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));
}

.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}

.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}

.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}

.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}

.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}

.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}

.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(var(--foreground));
}

.\[\&\>svg\]\:text-muted-foreground>svg {
  color: hsl(var(--muted-foreground));
}

.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: hsl(var(--sidebar-accent-foreground));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}

.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --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));
}

.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --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));
}

.\[\&_\*\]\:text-pc-ink-3 * {
  color: hsl(var(--pc-ink-3));
}

.\[\&_\.cite-marker\]\:rounded-\[4px\] .cite-marker {
  border-radius: 4px;
}

.\[\&_\.cite-marker\]\:bg-pc-agent-evidencia\/10 .cite-marker {
  background-color: hsl(var(--pc-agent-evidencia) / 0.1);
}

.\[\&_\.cite-marker\]\:px-1 .cite-marker {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.\[\&_\.cite-marker\]\:py-px .cite-marker {
  padding-top: 1px;
  padding-bottom: 1px;
}

.\[\&_\.cite-marker\]\:align-\[0\.32em\] .cite-marker {
  vertical-align: 0.32em;
}

.\[\&_\.cite-marker\]\:font-pc-mono .cite-marker {
  font-family: var(--font-mono-pc), ui-monospace, SFMono-Regular, monospace;
}

.\[\&_\.cite-marker\]\:text-\[0\.72em\] .cite-marker {
  font-size: 0.72em;
}

.\[\&_\.cite-marker\]\:leading-none .cite-marker {
  line-height: 1;
}

.\[\&_\.cite-marker\]\:text-pc-agent-evidencia .cite-marker {
  color: hsl(var(--pc-agent-evidencia));
}

.\[\&_\.cite-marker\]\:transition-colors .cite-marker {
  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;
}

.hover\:\[\&_\.cite-marker\]\:bg-pc-agent-evidencia\/20 .cite-marker:hover {
  background-color: hsl(var(--pc-agent-evidencia) / 0.2);
}

.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: hsl(var(--muted-foreground));
}

.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
  stroke: hsl(var(--border) / 0.5);
}

.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: hsl(var(--muted));
}

.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: hsl(var(--border));
}

.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}

.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}

.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(var(--muted-foreground));
}

.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}

.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}

.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}

.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}

.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}

.\[\&_a\]\:text-pc-accent a {
  color: hsl(var(--pc-accent));
}

.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}

.\[\&_a\]\:underline-offset-2 a {
  text-underline-offset: 2px;
}

.\[\&_blockquote\]\:my-2 blockquote {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.\[\&_blockquote\]\:border-l-2 blockquote {
  border-left-width: 2px;
}

.\[\&_blockquote\]\:border-pc-line blockquote {
  border-color: hsl(var(--pc-line));
}

.\[\&_blockquote\]\:pl-3 blockquote {
  padding-left: 0.75rem;
}

.\[\&_blockquote\]\:text-pc-ink-2 blockquote {
  color: hsl(var(--pc-ink-2));
}

.\[\&_code\]\:rounded-\[4px\] code {
  border-radius: 4px;
}

.\[\&_code\]\:bg-pc-surface-2 code {
  background-color: hsl(var(--pc-surface-2));
}

.\[\&_code\]\:px-1 code {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.\[\&_code\]\:py-px code {
  padding-top: 1px;
  padding-bottom: 1px;
}

.\[\&_code\]\:font-pc-mono code {
  font-family: var(--font-mono-pc), ui-monospace, SFMono-Regular, monospace;
}

.\[\&_code\]\:text-\[0\.9em\] code {
  font-size: 0.9em;
}

.\[\&_del\]\:text-pc-ink-3 del {
  color: hsl(var(--pc-ink-3));
}

.\[\&_h4\:first-child\]\:mt-0 h4:first-child {
  margin-top: 0px;
}

.\[\&_h4\]\:mb-1 h4 {
  margin-bottom: 0.25rem;
}

.\[\&_h4\]\:mt-4 h4 {
  margin-top: 1rem;
}

.\[\&_h4\]\:font-semibold h4 {
  font-weight: 600;
}

.\[\&_h4\]\:text-pc-ink h4 {
  color: hsl(var(--pc-ink));
}

.\[\&_hr\]\:my-4 hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.\[\&_hr\]\:border-pc-line hr {
  border-color: hsl(var(--pc-line));
}

.\[\&_li\+li\]\:mt-1 li+li {
  margin-top: 0.25rem;
}

.\[\&_li\>p\]\:mb-1 li>p {
  margin-bottom: 0.25rem;
}

.\[\&_ol\]\:my-2 ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
}

.\[\&_ol\]\:pl-5 ol {
  padding-left: 1.25rem;
}

.\[\&_p\:last-child\]\:mb-0 p:last-child {
  margin-bottom: 0px;
}

.\[\&_p\]\:mb-2 p {
  margin-bottom: 0.5rem;
}

.\[\&_p\]\:mb-3 p {
  margin-bottom: 0.75rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_pre\]\:my-2 pre {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.\[\&_pre\]\:overflow-x-auto pre {
  overflow-x: auto;
}

.\[\&_pre\]\:rounded-pc pre {
  border-radius: var(--pc-radius);
}

.\[\&_pre\]\:bg-pc-surface-2 pre {
  background-color: hsl(var(--pc-surface-2));
}

.\[\&_pre\]\:p-3 pre {
  padding: 0.75rem;
}

.\[\&_pre_code\]\:bg-transparent pre code {
  background-color: transparent;
}

.\[\&_pre_code\]\:p-0 pre code {
  padding: 0px;
}

.\[\&_pre_code\]\:text-\[14px\] pre code {
  font-size: 14px;
}

.\[\&_strong\]\:font-semibold strong {
  font-weight: 600;
}

.\[\&_strong\]\:text-pc-ink strong {
  color: hsl(var(--pc-ink));
}

.\[\&_strong\]\:text-pc-ink-2 strong {
  color: hsl(var(--pc-ink-2));
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_table\]\:my-3 table {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.\[\&_table\]\:block table {
  display: block;
}

.\[\&_table\]\:max-w-full table {
  max-width: 100%;
}

.\[\&_table\]\:overflow-x-auto table {
  overflow-x: auto;
}

.\[\&_table\]\:border-pc-line table {
  border-color: hsl(var(--pc-line));
}

.\[\&_td\]\:border-b td {
  border-bottom-width: 1px;
}

.\[\&_td\]\:border-pc-line td {
  border-color: hsl(var(--pc-line));
}

.\[\&_td\]\:py-1\.5 td {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_td\]\:pr-4 td {
  padding-right: 1rem;
}

.\[\&_td\]\:align-top td {
  vertical-align: top;
}

.\[\&_th\]\:border-b th {
  border-bottom-width: 1px;
}

.\[\&_th\]\:border-pc-line th {
  border-color: hsl(var(--pc-line));
}

.\[\&_th\]\:py-1\.5 th {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.\[\&_th\]\:pr-4 th {
  padding-right: 1rem;
}

.\[\&_th\]\:text-left th {
  text-align: left;
}

.\[\&_th\]\:align-bottom th {
  vertical-align: bottom;
}

.\[\&_th\]\:font-semibold th {
  font-weight: 600;
}

.\[\&_th\]\:text-pc-ink th {
  color: hsl(var(--pc-ink));
}

.\[\&_th\]\:text-pc-ink-2 th {
  color: hsl(var(--pc-ink-2));
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

.\[\&_ul\]\:my-2 ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}

.\[\&_ul\]\:pl-5 ul {
  padding-left: 1.25rem;
}

@media(hover:none) {

  .\[\@media\(hover\:none\)\]\:opacity-100 {
    opacity: 1;
  }
}

@media(orientation:landscape) and (max-width:767px) and (max-height:500px) {

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:mt-0 {
    margin-top: 0px;
  }

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:h-auto {
    height: auto;
  }

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:min-h-\[100svh\] {
    min-height: 100svh;
  }

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:flex-none {
    flex: none;
  }

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:overflow-visible {
    overflow: visible;
  }

  .\[\@media\(orientation\:landscape\)_and_\(max-width\:767px\)_and_\(max-height\:500px\)\]\:pt-6 {
    padding-top: 1.5rem;
  }
}

@media(pointer:coarse) {

  .\[\@media\(pointer\:coarse\)\]\:right-0 {
    right: 0px;
  }

  .\[\@media\(pointer\:coarse\)\]\:right-0\.5 {
    right: 0.125rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:top-0\.5 {
    top: 0.125rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:hidden {
    display: none;
  }

  .\[\@media\(pointer\:coarse\)\]\:h-11 {
    height: 2.75rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-11 {
    min-height: 2.75rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-\[40px\] {
    min-height: 40px;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-\[44px\] {
    min-height: 44px;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-h-\[48px\] {
    min-height: 48px;
  }

  .\[\@media\(pointer\:coarse\)\]\:w-11 {
    width: 2.75rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:w-full {
    width: 100%;
  }

  .\[\@media\(pointer\:coarse\)\]\:min-w-\[44px\] {
    min-width: 44px;
  }

  .\[\@media\(pointer\:coarse\)\]\:p-3\.5 {
    padding: 0.875rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .\[\@media\(pointer\:coarse\)\]\:pb-1\.5 {
    padding-bottom: 0.375rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:pr-11 {
    padding-right: 2.75rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:text-\[16px\] {
    font-size: 16px;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:mx-px .cite-marker {
    margin-left: 1px;
    margin-right: 1px;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:inline-flex .cite-marker {
    display: inline-flex;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:min-h-6 .cite-marker {
    min-height: 1.5rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:min-w-6 .cite-marker {
    min-width: 1.5rem;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:items-center .cite-marker {
    align-items: center;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:justify-center .cite-marker {
    justify-content: center;
  }

  .\[\@media\(pointer\:coarse\)\]\:\[\&_\.cite-marker\]\:align-middle .cite-marker {
    vertical-align: middle;
  }
}

[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}

[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}

[data-side=left] .\[\[data-side\=left\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}

[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}

[data-side=right] .\[\[data-side\=right\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}