/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Toast/Toast.module.css ***!
\************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Toast — design-system primitive built on top of @radix-ui/react-toast.
*
* Radix handles a11y (live region, swipe gesture, queue) and timers.
* Este módulo define la superficie y los tres niveles (Sistema de Marca v4 §6).
*
* Reglas de diseño que este archivo sostiene — no romperlas al tocarlo:
* 1. CERO `border-left` de color. El acento es un punto (o un ícono), nunca un riel.
* 2. Un solo hue por toast, expresado en la marca, el hilo y la acción.
* 3. El ancho lo fija el contenido, no una constante.
* 4. Tipografía en 400/500. Nunca 600/700.
*/
.Toast_viewport__Cz7hl {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
max-width: min(24rem, calc(100vw - var(--space-8)));
list-style: none;
padding: 0;
margin: 0;
outline: none;
}
.Toast_root__AVpq_ {
/* Propiedades locales del módulo (no son tokens globales). */
--toast-hue: var(--color-text-muted);
--toast-mark-col: 1.125rem; /* 18px — ancho del ícono; el punto se centra acá */
--toast-mark-row: calc(var(--text-sm) * var(--leading-tight));
--toast-dot: 0.375rem; /* 6px */
--toast-thread-h: 2px;
--toast-rise: 0.5rem;
--toast-duration: 5000ms; /* lo pisa el style inline por toast */
position: relative;
display: grid;
grid-template-columns: var(--toast-mark-col) 1fr auto;
gap: var(--space-3);
align-items: start;
/* El toast mide lo que dice. Un "Copiado al portapapeles." no ocupa lo mismo
que un error de conexión con detalle — es lo que distingue una pieza
diseñada de una grilla generada. */
width: max-content;
min-width: 16rem;
max-width: 100%;
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden; /* recorta el hilo contra el radio */
font-family: var(--font-sans);
color: var(--color-text-primary);
}
/* ── Los tres niveles ─────────────────────────────────────────────────────
* Silencioso (success/info): superficie blanca, punto de color, se va solo.
* Alerta (warning): hairline teñido + ícono; sigue siendo blanco.
* Bloqueante (error): único con tinte de fondo. Se distingue solo, sin
* depender del color — ícono + tinte + persistencia + cierre siempre visible.
*/
.Toast_variant-success__zWKbK { --toast-hue: var(--color-success); }
.Toast_variant-info__f1AL4 { --toast-hue: var(--color-info); }
.Toast_variant-warning__Q21lN {
--toast-hue: var(--color-warning);
border-color: var(--color-warning-border);
}
.Toast_variant-error__IonG_ {
--toast-hue: var(--color-danger);
border-color: var(--color-danger-border);
background: var(--color-danger-bg);
}
/* ── Marca: punto o ícono, siempre en la misma columna ────────────────────
* El punto se centra en el ancho del ícono para que el texto arranque en la
* misma x en las cuatro variantes. Alineado a la primera línea del título.
*/
.Toast_mark__IoUEE {
display: flex;
align-items: center;
justify-content: center;
width: var(--toast-mark-col);
height: var(--toast-mark-row);
}
.Toast_dot__m_jnp {
width: var(--toast-dot);
height: var(--toast-dot);
border-radius: var(--radius-full);
background: var(--toast-hue);
}
.Toast_icon__WFeVk {
width: var(--toast-mark-col);
height: var(--toast-mark-col);
color: var(--toast-hue);
}
/* ── Cuerpo ───────────────────────────────────────────────────────────────
* Título y descripción comparten tamaño: la jerarquía la hacen el peso y el
* color, no la escala. Más legible para lectura de reojo.
*/
.Toast_body__qIPjV {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.Toast_title__0u4mx {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
margin: 0;
}
.Toast_description__fRzId {
font-size: var(--text-sm);
font-weight: var(--weight-normal);
color: var(--color-text-secondary);
line-height: var(--leading-normal);
margin: 0;
}
/* La acción toma el hue del toast en vez del naranja de enlace: dentro de una
pieza de 300px, un segundo color es ruido. Todos los hues cumplen AA sobre
su propia superficie (teal 5.5:1 · info 5.9:1 · warning 5.1:1 · danger 6.4:1). */
.Toast_action__UJ321 {
align-self: flex-start;
margin-top: var(--space-1);
padding: 0;
background: none;
border: none;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--toast-hue);
cursor: pointer;
text-underline-offset: 0.2em;
}
.Toast_action__UJ321:hover {
text-decoration: underline;
}
.Toast_action__UJ321:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
/* ── Cierre: aparece al acercarse ─────────────────────────────────────────
* Un toast de 3 s no necesita una × permanente. Se revela al hover, al foco
* de teclado, en táctil (sin hover) y siempre en el error, donde cerrar es la
* única salida. Sigue en el DOM y es tabulable en todos los casos.
*/
.Toast_closeButton__VdChh {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toast-mark-row);
height: var(--toast-mark-row);
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
cursor: pointer;
opacity: 0;
transition:
opacity var(--duration-fast) var(--easing-out),
color var(--duration-fast) var(--easing-out);
}
.Toast_root__AVpq_:hover .Toast_closeButton__VdChh,
.Toast_root__AVpq_:focus-within .Toast_closeButton__VdChh,
.Toast_variant-error__IonG_ .Toast_closeButton__VdChh {
opacity: 1;
}
.Toast_closeButton__VdChh:hover {
color: var(--color-text-primary);
}
.Toast_closeButton__VdChh:focus-visible {
outline: none;
opacity: 1;
box-shadow: var(--shadow-focus-ring);
}
@media (hover: none) {
.Toast_closeButton__VdChh { opacity: 1; }
}
.Toast_closeIcon__h6S0Q {
width: var(--toast-mark-col);
height: var(--toast-mark-col);
}
/* ── El hilo ──────────────────────────────────────────────────────────────
* 2px en el borde inferior que drenan mientras corre el timer. Honesto (avisa
* que se está por ir) y sincronizado con la pausa que Radix hace al hover.
* Si no hay hilo, el toast no se va solo — el error nunca lo lleva.
*/
.Toast_thread__OYA_o {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--toast-thread-h);
background: var(--toast-hue);
opacity: 0.5;
transform-origin: left center;
animation: Toast_toast-thread__C5pEv var(--toast-duration) var(--easing-linear) forwards;
}
.Toast_root__AVpq_:hover .Toast_thread__OYA_o,
.Toast_root__AVpq_:focus-within .Toast_thread__OYA_o {
animation-play-state: paused;
}
/* ── Movimiento ───────────────────────────────────────────────────────────
* Sube y aparece donde está; no entra volando desde fuera de pantalla. El
* gesto es de "confirmación de un colega", no de "alerta del sistema".
*/
.Toast_root__AVpq_[data-state='open'] {
animation: Toast_toast-in__KOKi9 var(--duration-base) var(--easing-out);
}
.Toast_root__AVpq_[data-state='closed'] {
animation: Toast_toast-out__OSnxu var(--duration-fast) var(--easing-in);
}
.Toast_root__AVpq_[data-swipe='move'] {
transform: translateX(var(--radix-toast-swipe-move-x));
}
.Toast_root__AVpq_[data-swipe='cancel'] {
transform: translateX(0);
transition: transform var(--duration-fast) var(--easing-out);
}
.Toast_root__AVpq_[data-swipe='end'] {
animation: Toast_toast-swipe-out__P8ugU var(--duration-fast) var(--easing-in);
}
@keyframes Toast_toast-in__KOKi9 {
from { opacity: 0; transform: translateY(var(--toast-rise)) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes Toast_toast-out__OSnxu {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(calc(var(--toast-rise) * 0.5)) scale(0.985); }
}
@keyframes Toast_toast-swipe-out__P8ugU {
from { opacity: 1; transform: translateX(var(--radix-toast-swipe-end-x)); }
to { opacity: 0; transform: translateX(calc(100% + var(--space-6))); }
}
@keyframes Toast_toast-thread__C5pEv {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.Toast_root__AVpq_[data-state='open'],
.Toast_root__AVpq_[data-state='closed'],
.Toast_root__AVpq_[data-swipe='end'] {
animation: none;
}
/* Un hilo que drena es movimiento continuo: se retira, no se congela. */
.Toast_thread__OYA_o { display: none; }
}
/* ── Móvil ────────────────────────────────────────────────────────────────
* Debajo de 40rem el ancho por contenido deja de servir: ocupa el ancho
* disponible menos el margen.
*/
@media (max-width: 40rem) {
.Toast_viewport__Cz7hl {
left: var(--space-4);
right: var(--space-4);
bottom: var(--space-4);
max-width: none;
align-items: stretch;
}
.Toast_root__AVpq_ {
width: auto;
min-width: 0;
}
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/ActionMenu/ActionMenu.module.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************/
/* ActionMenu — el menú «…» del producto, uno solo.
* Cero hex crudo: todo sale de tokens.css (marca Navy v3). */
.ActionMenu_wrap__WeGZ2 {
position: relative;
display: inline-flex;
}
.ActionMenu_trigger__L_I_w {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
background: transparent;
color: var(--color-text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--duration-fast) var(--easing-out);
}
.ActionMenu_trigger__L_I_w:hover {
background: var(--color-surface-subtle);
color: var(--color-text-primary);
}
.ActionMenu_trigger__L_I_w:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
.ActionMenu_trigger__L_I_w[aria-expanded='true'] {
background: var(--color-primary-subtle);
color: var(--color-primary);
}
.ActionMenu_ico__9ISzs {
width: 16px;
height: 16px;
flex: none;
}
/* La costura navy de apertura: el mismo gesto editorial de los popovers de
* ajustes — un menú de OrenIA se reconoce antes de leerlo. */
.ActionMenu_menu__XVQjZ {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
z-index: var(--z-dropdown, 30);
min-width: 15.5rem;
padding: var(--space-2);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-top: 2px solid var(--color-primary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.ActionMenu_menuLeft__rzCnL {
right: auto;
left: 0;
}
.ActionMenu_item__TZPje {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-2) var(--space-3);
border: 0;
background: none;
font-size: var(--text-sm);
color: var(--color-text-primary);
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
}
/* El ícono acompaña en gris y toma tinta navy con el renglón activo. */
.ActionMenu_item__TZPje .ActionMenu_ico__9ISzs {
color: var(--color-text-secondary);
}
.ActionMenu_item__TZPje:disabled {
color: var(--color-text-muted);
cursor: not-allowed;
}
.ActionMenu_itemActive__IHFpC,
.ActionMenu_item__TZPje:hover:not(:disabled) {
background: var(--color-primary-subtle);
}
.ActionMenu_itemActive__IHFpC .ActionMenu_ico__9ISzs,
.ActionMenu_item__TZPje:hover:not(:disabled) .ActionMenu_ico__9ISzs {
color: var(--color-primary);
}
.ActionMenu_item__TZPje:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
.ActionMenu_itemDanger__VrzTi,
.ActionMenu_itemDanger__VrzTi .ActionMenu_ico__9ISzs,
.ActionMenu_itemDanger__VrzTi:hover:not(:disabled) .ActionMenu_ico__9ISzs {
color: var(--color-danger);
}
.ActionMenu_divider__AjdTn {
margin: var(--space-2) 0;
border-top: 1px solid var(--color-border-subtle);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Button/Button.module.css ***!
\**************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Button — design-system primitive.
*
* Variants: primary | secondary | accent | ghost | danger
* Sizes: sm | md | lg
* States: default | hover | focus-visible | active | disabled | loading
*
* Every value resolves to a token in `src/design-tokens/tokens.css`.
* Do NOT introduce raw hex / px / ms here — open a token first.
*/
.Button_button__f_l0m {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
/* Type — canon Claude design: 400 y 500, nunca 600. Lo que distingue a un
botón de su alrededor es la superficie (relleno, borde, foco), no un peso
que el resto del producto no usa; el 600 acá lo delataba como pieza de
otro sistema en cada pantalla que lo pone al lado de un título 500. */
font-family: var(--font-sans);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
white-space: nowrap;
/* Box */
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
user-select: none;
text-decoration: none;
/* Motion */
transition:
background-color var(--duration-fast) var(--easing-out),
border-color var(--duration-fast) var(--easing-out),
color var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
/* Focus-visible — keyboard-only ring, always-visible accessibility. */
.Button_button__f_l0m:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
/* Disabled — applies to both `disabled` attr and `aria-disabled="true"`. */
.Button_button__f_l0m:disabled,
.Button_button__f_l0m[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.5;
}
/* Loading — set by `aria-busy="true"`. The spinner is rendered by the
component; the button itself just locks pointer interaction. */
.Button_button__f_l0m[aria-busy='true'] {
cursor: progress;
pointer-events: none;
}
/* ============================================================
* Sizes
* ============================================================ */
.Button_size-sm__LW7z_ {
font-size: var(--text-sm);
padding: var(--space-1) var(--space-3);
min-height: 2rem;
}
.Button_size-md__CmXfK {
font-size: var(--text-base);
padding: var(--space-2) var(--space-4);
min-height: 2.5rem;
}
.Button_size-lg__OcQOn {
font-size: var(--text-lg);
padding: var(--space-3) var(--space-6);
min-height: 3rem;
}
/* ============================================================
* Variants
* ============================================================ */
.Button_variant-primary__8033R {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.Button_variant-primary__8033R:hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
.Button_variant-primary__8033R:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-primary-active);
border-color: var(--color-primary-active);
}
.Button_variant-secondary__s9TP_ {
background: var(--color-bg);
color: var(--color-primary);
border-color: var(--color-border-strong);
}
.Button_variant-secondary__s9TP_:hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-surface);
border-color: var(--color-primary);
}
.Button_variant-secondary__s9TP_:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-surface-subtle);
}
/* Crear / nuevo — el único relleno naranja de una pantalla (Navy v3).
*
* El relleno es `--color-accent-strong` (#C2410C, 5.18:1 con blanco), NO
* `--color-accent` (#E0651A): ese da 3.47:1 con texto blanco y un label de botón
* a 14-15px medium no califica como texto grande, así que reprueba AA. Es además
* el mismo naranja del CTA del sidebar — los dos botones de crear del producto
* dejan de discutir de qué color son.
*
* Hover/active por `filter` como en `danger`: el escalón siguiente de la escala
* (`--color-accent-active`) alcanza para el hover pero no deja un tercer paso
* para el pressed, y no se inventa un token para dos estados de un botón. */
.Button_variant-accent__S4wI2 {
background: var(--color-accent-strong);
color: var(--color-text-on-accent);
border-color: var(--color-accent-strong);
}
.Button_variant-accent__S4wI2:hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
filter: brightness(0.92);
}
.Button_variant-accent__S4wI2:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
filter: brightness(0.85);
}
.Button_variant-ghost__p9D4V {
background: transparent;
color: var(--color-text-primary);
border-color: transparent;
}
.Button_variant-ghost__p9D4V:hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-surface-subtle);
}
.Button_variant-ghost__p9D4V:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
background: var(--color-panel);
}
.Button_variant-danger__wteu1 {
background: var(--color-danger);
color: var(--color-text-inverse);
border-color: var(--color-danger);
}
.Button_variant-danger__wteu1:hover:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
filter: brightness(0.92);
}
.Button_variant-danger__wteu1:active:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']) {
filter: brightness(0.85);
}
/* ============================================================
* Misc modifiers
* ============================================================ */
.Button_fullWidth__9EUg4 {
width: 100%;
}
/* Spinner — inline, inherits color from button text. The animation is
subject to the global `prefers-reduced-motion: reduce` zero-duration
override defined in tokens.css. */
.Button_spinner__bkL9X {
width: 1em;
height: 1em;
border-radius: var(--radius-full);
border: 2px solid currentColor;
border-right-color: transparent;
animation: Button_button-spin__nDYnV 0.6s linear infinite;
}
@keyframes Button_button-spin__nDYnV {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.Button_spinner__bkL9X {
animation: none;
/* Static visual cue: hollow ring without rotation. */
}
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/AsyncBoundary/ErrorState.module.css ***!
\*************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* ErrorState — «no se pudo cargar». Hermana de EmptyState.
* Tokens del design system (cero hex crudo, cero px de color).
*
* Comparte con EmptyState la silueta del variante `block` —columna centrada,
* icono 48, título, descripción, acción— a propósito: son el mismo momento de
* la pantalla y solo cambia lo que se afirma. Lo único que las separa es el
* color del icono: acá hay una excepción real que atender, y el canon reserva
* el color justamente para eso.
*/
.ErrorState_root__1Y1YQ {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
font-family: var(--font-sans);
color: var(--color-text-secondary);
}
.ErrorState_icon__GLeI2 {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
color: var(--color-danger);
}
/* 48 y 24 — múltiplos de la grilla del set. Los 20px salen borrosos en este
set de iconos y están vedados por canon. */
.ErrorState_icon__GLeI2 svg {
width: 48px;
height: 48px;
}
.ErrorState_body__Lr8e_ {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ErrorState_title__ka7mD {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
line-height: 1.3;
}
.ErrorState_description__sw3lL {
margin: 0;
max-width: 28rem;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--color-text-secondary);
}
.ErrorState_action__S_ii3 {
margin-top: var(--space-2);
}
.ErrorState_retryIcon__H7sAV {
width: 16px;
height: 16px;
flex: none;
}
/* ── inline ───────────────────────────────────────────────────────────────────
Banda sobre datos que ya están en pantalla. No se roba el foco de la lectura:
una fila, sin centrar, y el icono baja a 24. */
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-danger-bg);
border: 1px solid var(--color-danger-border);
border-radius: var(--radius-md);
}
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 .ErrorState_icon__GLeI2 svg {
width: 24px;
height: 24px;
}
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 .ErrorState_body__Lr8e_ {
flex: 1 1 auto;
min-width: 0;
}
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 .ErrorState_title__ka7mD {
font-size: var(--text-sm);
}
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 .ErrorState_description__sw3lL {
max-width: none;
font-size: var(--text-xs);
}
.ErrorState_root__1Y1YQ.ErrorState_inline__AdoT9 .ErrorState_action__S_ii3 {
margin-top: 0;
flex: none;
}
/* ── compact ──────────────────────────────────────────────────────────────────
Mismo significado que el `compact` de EmptyState: el contenedor es angosto y
el bloque no puede quedarse con toda la altura. */
.ErrorState_root__1Y1YQ.ErrorState_compact__rhsxS {
padding: var(--space-6) var(--space-4);
}
.ErrorState_root__1Y1YQ.ErrorState_compact__rhsxS .ErrorState_icon__GLeI2 svg {
width: 24px;
height: 24px;
}
.ErrorState_root__1Y1YQ.ErrorState_compact__rhsxS .ErrorState_title__ka7mD {
font-size: var(--text-sm);
}
.ErrorState_root__1Y1YQ.ErrorState_compact__rhsxS .ErrorState_description__sw3lL {
font-size: var(--text-xs);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Badge/Badge.module.css ***!
\************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Badge — design-system primitive.
*
* Variants: neutral | accent | success | warning | danger | info
*
* Every value resolves to a token in `src/design-tokens/tokens.css`.
* Do NOT introduce raw hex / px / ms here — open a token first.
*/
.Badge_badge___Jmm6 {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
white-space: nowrap;
}
.Badge_dot__n0y_M {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
flex: 0 0 auto;
}
/* ============================================================
* Variants — soft background + readable foreground (AA).
* ============================================================ */
.Badge_variant-neutral__uw0ka {
background: var(--color-surface-subtle);
color: var(--color-text-secondary);
}
.Badge_variant-accent__pMF__ {
background: var(--color-accent-subtle);
color: var(--color-accent-strong);
}
.Badge_variant-success__Z4o__ {
background: var(--color-success-bg);
color: var(--color-success);
}
.Badge_variant-warning__pK4vl {
background: var(--color-warning-bg);
color: var(--color-warning);
}
.Badge_variant-danger__TLrZf {
background: var(--color-danger-bg);
color: var(--color-danger);
}
.Badge_variant-info__62kNl {
background: var(--color-info-bg);
color: var(--color-info);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Card/Card.module.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************/
/**
* Card — design-system primitive.
*
* Variants: elevated | outlined | ghost
* Padding: none | sm | md | lg
*
* Compound API: .
* Header and Footer add inset dividers; consumers can also use the
* `padding` prop on the root and supply free-form children.
*/
.Card_card__1XGVN {
display: flex;
flex-direction: column;
background: var(--color-bg);
border-radius: var(--radius-lg);
font-family: var(--font-sans);
color: var(--color-text-primary);
overflow: hidden;
}
/* Variants */
.Card_variant-elevated__OxC4e {
border: 1px solid transparent;
box-shadow: var(--shadow-md);
}
.Card_variant-outlined__0MUXX {
border: 1px solid var(--color-border);
box-shadow: none;
}
.Card_variant-ghost__Aswxw {
background: transparent;
border: 1px solid transparent;
box-shadow: none;
}
/* Padding (applied to root when there are no Card.* subcomponents) */
.Card_padding-none__Kn0is { padding: 0; }
.Card_padding-sm___cjj6 { padding: var(--space-3); }
.Card_padding-md__WTawp { padding: var(--space-4); }
.Card_padding-lg__4ZKCz { padding: var(--space-6); }
/* ============================================================
* Sub-component slots
* ============================================================ */
.Card_header__EwGea {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border-subtle);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
}
.Card_body__SUk0B {
padding: var(--space-5);
flex: 1 1 auto;
font-size: var(--text-base);
line-height: var(--leading-normal);
}
.Card_footer__E_OIe {
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
background: var(--color-surface);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/ChartSkeleton/ChartSkeleton.module.css ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* ChartSkeleton — primitiva del sistema de diseño.
*
* El barrido se toma de `.oia-shimmer` (globals.css) vía `composes … from
* global`: una sola definición para toda la app. OJO: no alcanza con declarar
* la animación por nombre acá — css-loader lo renombra aunque el keyframe no
* sea local, y queda apuntando a la nada (el skeleton se congela).
*/
.ChartSkeleton_container__Du6pN {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
/* ── Toolbar ─────────────────────────────────────────── */
.ChartSkeleton_toolbar__hOyEk {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0;
flex-wrap: wrap;
}
/* `composes` no acepta selectores agrupados, así que va uno por uno. */
.ChartSkeleton_pill__dlWiu { }
.ChartSkeleton_input__tz_kD { }
.ChartSkeleton_bar__Rw7jy { }
.ChartSkeleton_pill__dlWiu,
.ChartSkeleton_input__tz_kD,
.ChartSkeleton_bar__Rw7jy {
background: linear-gradient(
90deg,
var(--color-panel) 25%,
var(--color-border) 50%,
var(--color-panel) 75%
);
background-size: 200% 100%;
}
.ChartSkeleton_pill__dlWiu {
height: 32px;
border-radius: 100px;
}
.ChartSkeleton_pillSm__kg7nN { width: 80px; }
.ChartSkeleton_pillMd__rLZRT { width: 120px; }
.ChartSkeleton_input__tz_kD {
height: 34px;
width: 200px;
border-radius: 8px;
animation-delay: 0.1s;
}
/* ── Área del gráfico ────────────────────────────────── */
.ChartSkeleton_chart__pOI0G {
position: relative;
border: 1px solid var(--color-panel);
border-radius: 8px;
padding: 1.5rem 1rem 2rem;
background: var(--color-surface);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.ChartSkeleton_barsRow__LHavM {
display: flex;
align-items: flex-end;
gap: 1rem;
padding: 0 1rem;
flex: 1;
}
.ChartSkeleton_bar__Rw7jy {
flex: 1;
border-radius: 4px 4px 0 0;
}
.ChartSkeleton_xAxis__7MsNx {
height: 2px;
background: var(--color-border);
margin-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
.ChartSkeleton_pill__dlWiu,
.ChartSkeleton_input__tz_kD,
.ChartSkeleton_bar__Rw7jy {
animation: none;
background: var(--color-panel);
}
}
/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Modal/Modal.module.css ***!
\************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Modal — design-system primitive built on top of @radix-ui/react-dialog.
*
* Radix handles a11y (focus trap, ESC, aria-*, portal). This module
* adds the visual layer (overlay, content size, animations).
*/
.Modal_overlay__4AkkU {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: var(--z-overlay);
animation: Modal_modal-overlay-in__77mor var(--duration-base) var(--easing-out);
}
.Modal_overlay__4AkkU[data-state='closed'] {
animation: Modal_modal-overlay-out__IGsey var(--duration-fast) var(--easing-in);
}
.Modal_content__Mj_i6 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
font-family: var(--font-sans);
color: var(--color-text-primary);
z-index: var(--z-modal);
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
animation: Modal_modal-content-in__Hl_KE var(--duration-base) var(--easing-out);
}
.Modal_content__Mj_i6[data-state='closed'] {
animation: Modal_modal-content-out__bCdVm var(--duration-fast) var(--easing-in);
}
.Modal_content__Mj_i6:focus-visible {
outline: none;
box-shadow: var(--shadow-xl), var(--shadow-focus-ring);
}
/* Sizes */
.Modal_size-sm__UecHt { width: min(28rem, 95vw); }
.Modal_size-md__xzlvm { width: min(36rem, 95vw); }
.Modal_size-lg__CoyRt { width: min(48rem, 95vw); }
.Modal_size-xl__UVVYE { width: min(64rem, 95vw); }
/* Slots */
.Modal_header__dOsfK {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.Modal_title__2z7is {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
margin: 0;
}
.Modal_description__l7uH7 {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-normal);
margin: var(--space-1) 0 0 0;
}
.Modal_body__ahiS3 {
padding: var(--space-5) var(--space-6);
overflow-y: auto;
flex: 1 1 auto;
}
.Modal_footer__vChwy {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border-subtle);
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
}
.Modal_closeButton__hbhaN {
background: transparent;
border: none;
cursor: pointer;
padding: var(--space-1);
border-radius: var(--radius-md);
color: var(--color-text-secondary);
line-height: 1;
font-size: var(--text-xl);
transition: background-color var(--duration-fast) var(--easing-out);
}
.Modal_closeButton__hbhaN:hover {
background: var(--color-surface-subtle);
color: var(--color-text-primary);
}
.Modal_closeButton__hbhaN:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
/* ============================================================
* Animations — disabled by the global prefers-reduced-motion
* override on `--duration-*` (zero duration neutralises them).
* ============================================================ */
@keyframes Modal_modal-overlay-in__77mor {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Modal_modal-overlay-out__IGsey {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes Modal_modal-content-in__Hl_KE {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes Modal_modal-content-out__bCdVm {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/ConfirmDialog/ConfirmDialog.module.css ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* ConfirmDialog — mensaje de fallo de la acción. Mismos tokens que el error del
* `Input` (`.helper.error`) y que el `.error` del `PromptDialog`, para que «la
* acción falló» se lea igual en toda la casa y no como dialectos.
*/
.ConfirmDialog_error__NUJe_ {
margin: 0;
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--color-danger);
}
.ConfirmDialog_error__NUJe_:not(:first-child) {
margin-top: var(--space-3);
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Drawer/Drawer.module.css ***!
\**************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Drawer — design-system primitive built on top of @radix-ui/react-dialog.
*
* Radix handles a11y (focus trap, ESC, aria-*, portal). This module adds the
* visual layer: a right-anchored panel that slides in, with fixed Header /
* scrollable Body / fixed Footer. Mirrors Modal.module.css (same overlay +
* tokens) so both primitives feel identical.
*/
.Drawer_overlay__6ruHY {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: var(--z-overlay);
animation: Drawer_drawer-overlay-in__D4cTW var(--duration-base) var(--easing-out);
}
.Drawer_overlay__6ruHY[data-state='closed'] {
animation: Drawer_drawer-overlay-out__ai64m var(--duration-fast) var(--easing-in);
}
.Drawer_content__9cjtk {
position: fixed;
top: 0;
right: 0;
height: 100vh;
background: var(--color-bg);
box-shadow: var(--shadow-xl);
font-family: var(--font-sans);
color: var(--color-text-primary);
z-index: var(--z-modal);
display: flex;
flex-direction: column;
animation: Drawer_drawer-content-in__w0InS var(--duration-base) var(--easing-out);
}
.Drawer_content__9cjtk[data-state='closed'] {
animation: Drawer_drawer-content-out__oZDK4 var(--duration-fast) var(--easing-in);
}
.Drawer_content__9cjtk:focus-visible {
outline: none;
box-shadow: var(--shadow-xl), var(--shadow-focus-ring);
}
/* Sizes — width capped to the viewport on small screens. */
.Drawer_size-standard___U8AP { width: min(520px, 100vw); }
.Drawer_size-wide__lHt4o { width: min(860px, 100vw); }
/* Slots */
.Drawer_header__0lVik {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-shrink: 0;
}
.Drawer_title__opHOF {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
margin: 0;
}
.Drawer_description__j4h6r {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-normal);
margin: var(--space-1) 0 0 0;
}
.Drawer_body__86aPY {
padding: var(--space-5) var(--space-6);
overflow-y: auto;
flex: 1 1 auto;
}
.Drawer_footer__MTGXa {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-border-subtle);
background: var(--color-surface);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
flex-shrink: 0;
}
.Drawer_closeButton__JBSeA {
background: transparent;
border: none;
cursor: pointer;
padding: var(--space-1);
border-radius: var(--radius-md);
color: var(--color-text-secondary);
line-height: 1;
font-size: var(--text-xl);
transition: background-color var(--duration-fast) var(--easing-out);
}
.Drawer_closeButton__JBSeA:hover {
background: var(--color-surface-subtle);
color: var(--color-text-primary);
}
.Drawer_closeButton__JBSeA:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
}
/* ============================================================
* Animations — disabled by the global prefers-reduced-motion
* override on `--duration-*` (zero duration neutralises them).
* ============================================================ */
@keyframes Drawer_drawer-overlay-in__D4cTW {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes Drawer_drawer-overlay-out__ai64m {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes Drawer_drawer-content-in__w0InS {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes Drawer_drawer-content-out__oZDK4 {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/EmptyState/EmptyState.module.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************************/
/**
* EmptyState — estado vacío unificado.
* Tokens del design system (cero raw hex/px).
*/
.EmptyState_root__BnAqa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
font-family: var(--font-sans);
color: var(--color-text-secondary);
}
.EmptyState_compact__Alt90 {
padding: var(--space-6) var(--space-4);
}
.EmptyState_icon__9R94m {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
/* El consumer pasa un Heroicon (SVG); forzamos el tamaño desde acá para
mantener la regla 48px. */
}
.EmptyState_icon__9R94m svg {
width: 48px;
height: 48px;
}
.EmptyState_title__QNedS {
margin: 0;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
line-height: 1.3;
}
.EmptyState_description__HINZm {
margin: 0;
max-width: 28rem;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--color-text-secondary);
}
.EmptyState_action__S8DTL {
margin-top: var(--space-2);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Form/Form.module.css ***!
\**********************************************************************************************************************************************************************************************************************************************************************************/
/**
* Form — composite primitive.
*
* Layout-only — fields and buttons render their own visuals via
* Input / Button / etc.
*/
.Form_form__MIiDz {
display: flex;
flex-direction: column;
gap: var(--space-4);
font-family: var(--font-sans);
}
.Form_actions__jvR70 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-2);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/Input/Input.module.css ***!
\************************************************************************************************************************************************************************************************************************************************************************************/
/**
* Input — design-system primitive.
*
* Sizes: sm | md | lg
* States: default | hover | focus-visible | active | disabled | invalid | readonly
*
* Every value resolves to a token in `src/design-tokens/tokens.css`.
*/
.Input_field__U1nHv {
display: flex;
flex-direction: column;
gap: var(--space-1);
font-family: var(--font-sans);
}
.Input_field__U1nHv.Input_fullWidth__YwuA_ { width: 100%; }
.Input_label__RfGA8 {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-primary);
line-height: var(--leading-tight);
}
.Input_label__RfGA8 .Input_required__sgyx1 {
margin-left: var(--space-1);
color: var(--color-danger);
}
.Input_wrapper__C3t_D {
position: relative;
display: flex;
align-items: stretch;
background: var(--color-bg);
/* WCAG 1.4.11 — el borde es lo único que dibuja el campo, así que es
"información visual requerida para identificar un componente" y va a ≥3:1.
`--color-border-strong` (#CBD5E1) da 1.49:1. El token correcto lo creó la
auditoría 0004 F-005 y es `--color-border-control` (3.58:1); la primitiva
no lo estaba usando. La escalera de estados se mantiene: reposo #7E8899 →
hover `--color-secondary` #5B708B → halo de foco. */
border: 1px solid var(--color-border-control);
border-radius: var(--radius-md);
transition:
border-color var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
.Input_wrapper__C3t_D:hover:not(.Input_disabled__HDNxZ):not(.Input_invalid__Zp_7s):not(.Input_readonly__laXyK) {
border-color: var(--color-secondary);
}
.Input_wrapper__C3t_D.Input_focused__Jg3nO:not(.Input_disabled__HDNxZ) {
box-shadow: var(--shadow-focus-ring);
}
.Input_wrapper__C3t_D.Input_invalid__Zp_7s {
border-color: var(--color-danger);
background: var(--color-danger-bg);
}
.Input_wrapper__C3t_D.Input_invalid__Zp_7s.Input_focused__Jg3nO {
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}
.Input_wrapper__C3t_D.Input_disabled__HDNxZ {
background: var(--color-surface-subtle);
cursor: not-allowed;
opacity: 0.7;
}
.Input_wrapper__C3t_D.Input_readonly__laXyK {
background: var(--color-surface);
}
.Input_input__a5J6C {
flex: 1 1 auto;
min-width: 0;
background: transparent;
border: none;
outline: none;
font-family: inherit;
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text-primary);
padding: var(--space-2) var(--space-3);
}
.Input_input__a5J6C::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.Input_input__a5J6C:disabled {
cursor: not-allowed;
}
/* Slots flank the input on the inside of the wrapper. They inherit the
wrapper's hover/focus border via the parent `.wrapper.*` selectors. */
.Input_slot__DA3Ff {
display: inline-flex;
align-items: center;
padding: 0 var(--space-3);
color: var(--color-text-secondary);
font-size: var(--text-sm);
pointer-events: none;
flex: 0 0 auto;
}
.Input_slot__DA3Ff.Input_leading__5gMJu {
border-right: 1px solid var(--color-border-subtle);
}
.Input_slot__DA3Ff.Input_trailing__r5HgY {
border-left: 1px solid var(--color-border-subtle);
}
/* Tercera señal del estado inválido (junto a borde y fondo): distingue el
error del foco naranja sin depender solo del color (daltonismo). */
.Input_errorIcon__YB22W {
display: inline-flex;
align-items: center;
padding-right: var(--space-3);
color: var(--color-danger);
pointer-events: none;
flex: 0 0 auto;
}
.Input_errorIcon__YB22W svg {
width: var(--space-4);
height: var(--space-4);
flex: none;
}
/* ============================================================
* Sizes — apply to the wrapper, the input inherits padding.
* ============================================================ */
.Input_size-sm__tIsnV .Input_input__a5J6C { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); min-height: 2rem; }
.Input_size-md__2q1fJ .Input_input__a5J6C { font-size: var(--text-base); padding: var(--space-2) var(--space-3); min-height: 2.5rem; }
.Input_size-lg__IbXNU .Input_input__a5J6C { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); min-height: 3rem; }
/* ============================================================
* Hint / error message under the input.
* ============================================================ */
.Input_helper__KSSbk {
font-size: var(--text-xs);
line-height: var(--leading-normal);
color: var(--color-text-secondary);
}
.Input_helper__KSSbk.Input_error__Nqe_D {
color: var(--color-danger);
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/KpiValue/KpiValue.module.css ***!
\******************************************************************************************************************************************************************************************************************************************************************************************/
/* KpiValue — un número solo, sin Plotly.
Value: proporcional, NO tabular-nums (eso es para columnas de tabla que
deben alinear verticalmente — un valor grande suelto se ve más prolijo
con las figuras por defecto de la fuente). */
.KpiValue_kpi__T5qfC {
height: 100%;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
}
.KpiValue_kpiLabel__3LJje {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-secondary);
text-align: center;
}
.KpiValue_kpiValue__s1ly9 {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-dark);
line-height: 1.1;
text-align: center;
word-break: break-word;
}
/* En la respuesta el número tiene toda la caja del gráfico para él: puede
respirar más que en una tarjeta del dashboard. */
.KpiValue_kpiValuePage__OEDXf {
font-size: clamp(2.5rem, 6vw, 4rem);
}
.KpiValue_kpiEmpty__FXkCP {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--color-border-strong);
text-transform: uppercase;
}
.KpiValue_kpiDelta__Uq0Z0 {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums; /* el delta SÍ es una comparación corta, alinea bien tabular */
}
.KpiValue_kpiDelta__Uq0Z0 svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.KpiValue_kpiDeltaLabel__EvQ4k {
font-weight: 500;
color: var(--color-text-muted);
margin-left: 0.125rem;
}
/* Semáforo — paleta reservada de la capa de datos (Gauge/KPI), distinta de
los estados de UI genéricos (--color-success/warning/danger). */
.KpiValue_trendGood__rSSQB { color: var(--data-status-good); }
.KpiValue_trendWarn__AsXQf { color: var(--data-status-warn); }
.KpiValue_trendCritical__IUjSM { color: var(--data-status-critical); }
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/ui/PromptDialog/PromptDialog.module.css ***!
\**************************************************************************************************************************************************************************************************************************************************************************************************/
/**
* PromptDialog — el `