/* QueLicitar · Design System v1.0 · 2026
* Stack: vanilla CSS + Web Components + HTMX
* Arquitectura: Cascade layers + ITCSS-lite + BEM
* Ver: specs/transversales/frontend-design-system/
*/
@layer reset, tokens, base, layout, components, utilities;
@layer tokens {
/* ============================================================================
* tokens/index.css · barrel de design tokens
* ============================================================================ */
/* ============================================================================
* tokens/color.css · QueLicitar Design System · paleta vibrante
* Basada en el logo oficial: azul eléctrico + coral rojo + charcoal.
* Brand primary: #2447F7 (aprox oklch(52% 0.24 268)).
* Coral accent: #F33E2C (aprox oklch(63% 0.22 28)).
* Neutrals cool con tinte hacia azul.
* Contraste WCAG AA: bg/fg >= 4.5:1, bordes >= 3:1.
* ============================================================================ */
:root {
color-scheme: light;
/* --- Brand azul eléctrico (hue 268) · ref #2447F7 ------------------------ */
--brand-blue-50: oklch(97.5% 0.020 268);
--brand-blue-100: oklch(94% 0.045 268);
--brand-blue-200: oklch(88% 0.085 268);
--brand-blue-300: oklch(78% 0.135 268);
--brand-blue-400: oklch(66% 0.185 268);
--brand-blue-500: oklch(58% 0.230 268);
--brand-blue-600: oklch(52% 0.240 268); /* ~ #2447F7 */
--brand-blue-700: oklch(45% 0.220 268);
--brand-blue-800: oklch(36% 0.180 268);
--brand-blue-900: oklch(27% 0.130 268);
--brand-blue-950: oklch(19% 0.090 268);
/* --- Coral accent (hue 28) · ref #F33E2C -------------------------------- */
--coral-50: oklch(97% 0.022 28);
--coral-100: oklch(93% 0.055 28);
--coral-200: oklch(87% 0.110 28);
--coral-300: oklch(78% 0.170 28);
--coral-400: oklch(70% 0.200 28);
--coral-500: oklch(63% 0.220 28); /* ~ #F33E2C */
--coral-600: oklch(56% 0.215 28);
--coral-700: oklch(48% 0.190 28);
--coral-800: oklch(38% 0.150 28);
--coral-900: oklch(28% 0.110 28);
/* --- Neutral (hue 260 tinte frío hacia azul) ---------------------------- */
--neutral-50: oklch(98.5% 0.005 260);
--neutral-100: oklch(96.5% 0.008 260);
--neutral-200: oklch(92% 0.012 260);
--neutral-300: oklch(85% 0.016 260);
--neutral-400: oklch(70% 0.018 260);
--neutral-500: oklch(55% 0.020 260);
--neutral-600: oklch(43% 0.022 260);
--neutral-700: oklch(33% 0.022 260);
--neutral-800: oklch(23% 0.020 260);
--neutral-900: oklch(16% 0.018 260); /* body fg charcoal */
--neutral-950: oklch(10% 0.015 260);
/* --- Accent amber (warnings) -------------------------------------------- */
--amber-100: oklch(95% 0.050 85);
--amber-400: oklch(78% 0.160 75);
--amber-500: oklch(72% 0.175 72);
--amber-600: oklch(64% 0.170 65);
--amber-700: oklch(54% 0.150 55);
/* --- Success verde ------------------------------------------------------ */
--success-100: oklch(95% 0.050 155);
--success-500: oklch(65% 0.170 155);
--success-600: oklch(55% 0.170 155);
/* --- Semantic roles · Light (default) ----------------------------------- */
--color-bg: var(--neutral-50);
--color-bg-subtle: var(--neutral-100);
--color-bg-muted: var(--neutral-200);
--color-surface: oklch(100% 0 0);
--color-surface-raised: oklch(100% 0 0);
--color-fg: var(--neutral-900);
--color-fg-muted: var(--neutral-700);
--color-fg-subtle: var(--neutral-500);
--color-border: var(--neutral-200);
--color-border-strong: var(--neutral-300);
/* Accent primario = azul eléctrico del logo */
--color-accent: var(--brand-blue-600);
--color-accent-hover: var(--brand-blue-700);
--color-accent-fg: oklch(99% 0.005 268);
--color-accent-subtle: var(--brand-blue-50);
/* Accent secundario = coral del punto del logo */
--color-accent-2: var(--coral-500);
--color-accent-2-fg: oklch(99% 0.005 28);
--color-accent-2-subtle: var(--coral-50);
--color-success: var(--success-600);
--color-success-fg: oklch(99% 0.005 150);
--color-success-subtle: var(--success-100);
--color-warning: var(--amber-600);
--color-warning-fg: oklch(20% 0.04 70);
--color-warning-subtle: var(--amber-100);
--color-danger: var(--coral-600);
--color-danger-fg: oklch(99% 0.005 28);
--color-danger-subtle: var(--coral-100);
--color-info: var(--brand-blue-500);
--color-info-fg: oklch(99% 0.005 268);
--color-info-subtle: var(--brand-blue-50);
--color-focus-ring: color-mix(in oklch, var(--color-accent) 55%, transparent);
}
/* --- Dark mode (solo cuando usuario lo activa explícitamente via toggle) -- */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--neutral-950);
--color-bg-subtle: oklch(12% 0.015 260);
--color-bg-muted: var(--neutral-900);
--color-surface: oklch(14% 0.015 260);
--color-surface-raised: oklch(18% 0.016 260);
--color-fg: var(--neutral-100);
--color-fg-muted: var(--neutral-300);
--color-fg-subtle: var(--neutral-400);
--color-border: oklch(24% 0.018 260);
--color-border-strong: oklch(32% 0.020 260);
--color-accent: var(--brand-blue-400);
--color-accent-hover: var(--brand-blue-300);
--color-accent-fg: oklch(10% 0.02 268);
--color-accent-subtle: color-mix(in oklch, var(--brand-blue-500) 22%, transparent);
--color-accent-2: var(--coral-400);
--color-accent-2-fg: oklch(15% 0.03 28);
--color-accent-2-subtle: color-mix(in oklch, var(--coral-500) 22%, transparent);
--color-success: oklch(72% 0.16 155);
--color-success-fg: oklch(12% 0.03 155);
--color-success-subtle: color-mix(in oklch, oklch(60% 0.17 155) 22%, transparent);
--color-warning: var(--amber-400);
--color-warning-fg: oklch(15% 0.04 70);
--color-warning-subtle: color-mix(in oklch, var(--amber-500) 22%, transparent);
--color-danger: oklch(72% 0.20 28);
--color-danger-fg: oklch(12% 0.03 28);
--color-danger-subtle: color-mix(in oklch, var(--coral-500) 22%, transparent);
--color-info: var(--brand-blue-400);
--color-info-fg: oklch(12% 0.03 268);
--color-info-subtle: color-mix(in oklch, var(--brand-blue-500) 22%, transparent);
--color-focus-ring: color-mix(in oklch, var(--color-accent) 60%, transparent);
}
/* NOTA: quitado el bloque `@media (prefers-color-scheme: dark)` auto.
Default es light SIEMPRE, salvo que el usuario active dark via toggle
(qlc-theme) que aplica `data-theme="dark"` al . */
/* ============================================================================
* tokens/typography.css · QueLicitar Design System
* Familias, escala fluid (clamp), line-heights, pesos, letter spacing.
* ============================================================================ */
:root {
/* --- Familias --------------------------------------------------------- */
/* Display: sans geometric moderno (logo, headings, hero). */
--font-display: "Plus Jakarta Sans", "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Sans: UI body, párrafos, forms. */
--font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Monospace: code, kbd. */
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace;
/* Serif (opcional, deprecated): alias a display para retrocompat. */
--font-serif: var(--font-display);
/* --- Escala fluid ----------------------------------------------------- */
--fs-50: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem); /* 11 - 12 */
--fs-100: clamp(0.75rem, 0.70rem + 0.2vw, 0.875rem); /* 12 - 14 */
--fs-200: clamp(0.875rem, 0.80rem + 0.3vw, 1rem); /* 14 - 16 */
--fs-300: clamp(1rem, 0.92rem + 0.35vw, 1.125rem); /* 16 - 18 body */
--fs-400: clamp(1.125rem, 1.03rem + 0.4vw, 1.25rem); /* 18 - 20 */
--fs-500: clamp(1.25rem, 1.10rem + 0.7vw, 1.5rem); /* 20 - 24 */
--fs-600: clamp(1.5rem, 1.28rem + 1.0vw, 1.875rem); /* 24 - 30 h4 */
--fs-700: clamp(1.875rem, 1.55rem + 1.5vw, 2.5rem); /* 30 - 40 h3 */
--fs-800: clamp(2.5rem, 1.95rem + 2.6vw, 3.5rem); /* 40 - 56 h2 */
--fs-900: clamp(3rem, 2rem + 5vw, 5.5rem); /* 48 - 88 h1 hero */
/* --- Line heights ----------------------------------------------------- */
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.7;
/* --- Pesos ------------------------------------------------------------ */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* --- Letter spacing --------------------------------------------------- */
--tracking-tight: -0.03em;
--tracking-tighter: -0.045em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
}
/* ============================================================================
* tokens/space.css · QueLicitar Design System
* Escala modular base 4px.
* ============================================================================ */
:root {
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2 */
--space-1: 0.25rem; /* 4 */
--space-1-5: 0.375rem; /* 6 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--space-40: 10rem; /* 160 */
--space-48: 12rem; /* 192 */
--space-56: 14rem; /* 224 */
--space-64: 16rem; /* 256 */
}
/* ============================================================================
* tokens/motion.css · QueLicitar Design System
* Easings + duraciones. Reduce motion -> 0ms.
* ============================================================================ */
:root {
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--ease-decelerated: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerated: cubic-bezier(0.4, 0, 1, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-instant: 80ms;
--dur-fast: 140ms;
--dur-medium: 240ms;
--dur-slow: 400ms;
--dur-slower: 700ms;
}
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 0ms;
--dur-fast: 0ms;
--dur-medium: 0ms;
--dur-slow: 0ms;
--dur-slower: 0ms;
}
}
/* ============================================================================
* tokens/elevation.css · QueLicitar Design System
* 5 niveles de sombra oklch con alpha (layer-friendly light+dark).
* ============================================================================ */
:root {
/* Shadow color base · neutral oscuro con alpha para que funcione igual en dark */
--shadow-color: oklch(20% 0.02 240);
--shadow-xs:
0 1px 1px color-mix(in oklch, var(--shadow-color) 6%, transparent);
--shadow-sm:
0 1px 2px color-mix(in oklch, var(--shadow-color) 6%, transparent),
0 1px 3px color-mix(in oklch, var(--shadow-color) 8%, transparent);
--shadow-md:
0 2px 4px color-mix(in oklch, var(--shadow-color) 7%, transparent),
0 4px 8px color-mix(in oklch, var(--shadow-color) 10%, transparent);
--shadow-lg:
0 4px 8px color-mix(in oklch, var(--shadow-color) 8%, transparent),
0 12px 24px color-mix(in oklch, var(--shadow-color) 12%, transparent);
--shadow-xl:
0 8px 16px color-mix(in oklch, var(--shadow-color) 10%, transparent),
0 24px 48px color-mix(in oklch, var(--shadow-color) 16%, transparent);
--shadow-ring: 0 0 0 3px var(--color-focus-ring);
}
[data-theme="dark"] {
--shadow-color: oklch(0% 0 0);
--shadow-xs:
0 1px 1px color-mix(in oklch, var(--shadow-color) 25%, transparent);
--shadow-sm:
0 1px 2px color-mix(in oklch, var(--shadow-color) 30%, transparent),
0 1px 3px color-mix(in oklch, var(--shadow-color) 35%, transparent);
--shadow-md:
0 2px 4px color-mix(in oklch, var(--shadow-color) 35%, transparent),
0 4px 8px color-mix(in oklch, var(--shadow-color) 40%, transparent);
--shadow-lg:
0 4px 8px color-mix(in oklch, var(--shadow-color) 40%, transparent),
0 12px 24px color-mix(in oklch, var(--shadow-color) 50%, transparent);
--shadow-xl:
0 8px 16px color-mix(in oklch, var(--shadow-color) 45%, transparent),
0 24px 48px color-mix(in oklch, var(--shadow-color) 55%, transparent);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]),
:root[data-theme="system"] {
--shadow-color: oklch(0% 0 0);
--shadow-xs:
0 1px 1px color-mix(in oklch, var(--shadow-color) 25%, transparent);
--shadow-sm:
0 1px 2px color-mix(in oklch, var(--shadow-color) 30%, transparent),
0 1px 3px color-mix(in oklch, var(--shadow-color) 35%, transparent);
--shadow-md:
0 2px 4px color-mix(in oklch, var(--shadow-color) 35%, transparent),
0 4px 8px color-mix(in oklch, var(--shadow-color) 40%, transparent);
--shadow-lg:
0 4px 8px color-mix(in oklch, var(--shadow-color) 40%, transparent),
0 12px 24px color-mix(in oklch, var(--shadow-color) 50%, transparent);
--shadow-xl:
0 8px 16px color-mix(in oklch, var(--shadow-color) 45%, transparent),
0 24px 48px color-mix(in oklch, var(--shadow-color) 55%, transparent);
}
}
/* ============================================================================
* tokens/radii.css · QueLicitar Design System
* ============================================================================ */
:root {
--radius-xs: 0.25rem;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-pill: 9999px;
--radius-circle: 50%;
}
/* ============================================================================
* tokens/breakpoints.css · QueLicitar Design System
* Custom props para usar en container queries y media queries.
* ============================================================================ */
:root {
--bp-xs: 24rem; /* 384 */
--bp-sm: 36rem; /* 576 */
--bp-md: 48rem; /* 768 */
--bp-lg: 64rem; /* 1024 */
--bp-xl: 80rem; /* 1280 */
--bp-2xl: 96rem; /* 1536 */
}
/* ============================================================================
* tokens/z-index.css · QueLicitar Design System
* Stacking scale jerarquica.
* ============================================================================ */
:root {
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-nav: 300;
--z-drawer: 400;
--z-modal: 500;
--z-popover: 600;
--z-toast: 700;
--z-tooltip: 800;
}
}
@layer base {
/* ============================================================================
* base/index.css · barrel de base layer
* ============================================================================ */
/* ============================================================================
* base/reset.css · Reset moderno estilo Josh Comeau + ajustes QueLicitar
* ============================================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
/* Fuerza que el atributo HTML `hidden` oculte el elemento incluso cuando
el CSS componente declara `display: flex/block` explícito. Sin esto,
componentes como qlc-menu, qlc-chat, qlc-drawer aparecen abiertos por
default porque la regla de componente (flex) gana sobre `display: none`
implícita del attribute. */
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
/* Corta cualquier overflow horizontal que escape el viewport
(drawers cerrados, modales con transform, decoraciones).
`clip` no rompe `position: sticky` (a diferencia de `hidden`). */
overflow-x: clip;
}
body {
line-height: calc(1em + 0.5rem);
min-height: 100vh;
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Drawers, modales y elementos con transform translateX(±100%) quedan
fuera del viewport pero su bbox sigue contando para scrollWidth.
`overflow-x: clip` corta el desbordamiento horizontal SIN romper
`position: sticky` (a diferencia de `overflow-x: hidden`). */
overflow-x: clip;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
ul[role="list"], ol[role="list"] {
list-style: none;
padding: 0;
}
#root, #__next {
isolation: isolate;
}
/* ============================================================================
* base/_fonts.css · @font-face declarations (self-hosted)
* Plus Jakarta Sans (display/headings) + Inter (body/UI).
* Ver static/fonts/*/README.md.
* ============================================================================ */
/* --- Plus Jakarta Sans (display · headings, brand) ----------------------- */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/plus-jakarta-sans/PlusJakartaSans.a8c28b27501f.woff2") format("woff2-variations"),
url("/static/fonts/plus-jakarta-sans/PlusJakartaSans.a8c28b27501f.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: italic;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/plus-jakarta-sans/PlusJakartaSans-Italic.291e7d3e1fd4.woff2") format("woff2-variations"),
url("/static/fonts/plus-jakarta-sans/PlusJakartaSans-Italic.291e7d3e1fd4.woff2") format("woff2");
}
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("/static/fonts/plus-jakarta-sans/PlusJakartaSans-LatinExt.feb32a783dde.woff2") format("woff2-variations"),
url("/static/fonts/plus-jakarta-sans/PlusJakartaSans-LatinExt.feb32a783dde.woff2") format("woff2");
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Inter Variable (body · UI) ------------------------------------------ */
@font-face {
font-family: "Inter Variable";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/inter/InterVariable.2bf3d951bf9d.woff2") format("woff2-variations");
size-adjust: 100%;
}
@font-face {
font-family: "Inter Variable";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/inter/InterVariable-Italic.8d1dc86da258.woff2") format("woff2-variations");
size-adjust: 100%;
}
/* --- Space Grotesk (solo para el wordmark NUBIQ en el footer) ------------ */
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/static/fonts/space-grotesk/SpaceGrotesk-Variable.ddb6f760d070.woff2") format("woff2-variations"),
url("/static/fonts/space-grotesk/SpaceGrotesk-Variable.ddb6f760d070.woff2") format("woff2");
}
/* ============================================================================
* base/typography.css · Estilos base tipograficos
* ============================================================================ */
body {
font-family: var(--font-sans);
font-size: var(--fs-300);
font-weight: var(--fw-regular);
line-height: var(--lh-normal);
color: var(--color-fg);
background: var(--color-bg);
font-feature-settings: "cv11", "ss01", "ss03";
font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-fg);
}
h1 { font-size: var(--fs-900); letter-spacing: var(--tracking-tighter); font-weight: 800; }
h2 { font-size: var(--fs-800); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }
h5 { font-size: var(--fs-500); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-400); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }
p {
max-inline-size: 70ch;
}
small {
font-size: var(--fs-200);
color: var(--color-fg-muted);
}
strong, b {
font-weight: var(--fw-semibold);
}
a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.2em;
text-decoration-color: color-mix(in oklch, var(--color-accent) 45%, transparent);
transition: color var(--dur-fast) var(--ease-standard),
text-decoration-color var(--dur-fast) var(--ease-standard),
opacity var(--dur-fast) var(--ease-standard);
}
a:hover {
text-decoration-color: currentColor;
opacity: 0.85;
}
ul, ol {
padding-inline-start: 1.5em;
}
li + li {
margin-block-start: var(--space-1);
}
blockquote {
border-inline-start: 3px solid var(--color-border-strong);
padding-inline-start: var(--space-4);
color: var(--color-fg-muted);
font-style: italic;
}
pre, code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.9em;
}
code {
background: var(--color-bg-subtle);
padding: 0.125em 0.35em;
border-radius: var(--radius-xs);
border: 1px solid var(--color-border);
}
pre {
background: var(--color-bg-subtle);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
overflow-x: auto;
line-height: var(--lh-snug);
}
pre code {
background: none;
border: 0;
padding: 0;
}
kbd {
background: var(--color-bg-muted);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xs);
padding: 0.1em 0.4em;
font-size: 0.85em;
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin-block: var(--space-6);
}
::selection {
background: oklch(from var(--color-accent) l c h / 0.2);
color: var(--color-fg);
}
abbr[title] {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
cursor: help;
}
/* ============================================================================
* base/forms.css · Normalizacion de inputs nativos
* ============================================================================ */
input, textarea, select {
min-height: 2.5rem;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: var(--lh-normal);
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
width: 100%;
max-width: 100%;
}
textarea {
min-height: 6rem;
resize: vertical;
line-height: var(--lh-normal);
}
select {
cursor: pointer;
padding-inline-end: var(--space-8);
background-image: linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%),
linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%);
background-position:
calc(100% - var(--space-4)) center,
calc(100% - var(--space-3)) center;
background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
background-repeat: no-repeat;
appearance: none;
}
input[type="checkbox"],
input[type="radio"] {
min-height: auto;
width: 1rem;
height: 1rem;
padding: 0;
accent-color: var(--color-accent);
cursor: pointer;
}
input[type="range"] {
min-height: auto;
padding: 0;
border: 0;
background: transparent;
accent-color: var(--color-accent);
}
input[type="file"] {
padding: var(--space-2);
cursor: pointer;
}
input::placeholder,
textarea::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
input:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
border-color: var(--color-fg-subtle);
}
}
input:disabled,
textarea:disabled,
select:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--color-bg-muted);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
border-color: var(--color-danger);
}
fieldset {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
}
legend {
padding-inline: var(--space-2);
font-weight: var(--fw-medium);
color: var(--color-fg-muted);
font-size: var(--fs-200);
}
label {
display: inline-block;
font-size: var(--fs-200);
font-weight: var(--fw-medium);
color: var(--color-fg);
margin-block-end: var(--space-1);
}
/* Focus ring consistente (no outline:none sin reemplazo) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: var(--shadow-ring);
}
/* ============================================================================
* base/focus.css · Global :focus-visible styles
* ============================================================================ */
:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-radius: var(--radius-xs);
transition: box-shadow var(--dur-fast) var(--ease-standard);
}
/* Click con mouse -> sin outline molesto, pero manteniendo accesibilidad teclado */
:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
/* Sitios donde el elemento ya tiene su propio manejo (forms) no duplicamos */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid transparent;
}
/* ============================================================================
* base/touch.css · QueLicitar Design System
* ----------------------------------------------------------------------------
* Hardening para dispositivos touch (coarse pointer):
* · Suprime el flash gris de iOS Safari al tocar (`-webkit-tap-highlight`).
* · Habilita `touch-action: manipulation` en interactivos para eliminar el
* delay de 300ms en `click` y prevenir double-tap zoom incidental.
*
* Convivimos con `responsive.css` (touch targets 44x44 px y inputs 16px).
* Los hover guards viven dentro de cada componente como
* `@media (hover: hover) and (pointer: fine) { ... }`.
* ============================================================================ */
:root {
-webkit-tap-highlight-color: transparent;
}
button,
[role="button"],
a,
.qlc-button,
.qlc-tab,
.qlc-sidebar-app__link,
.qlc-card--interactive {
touch-action: manipulation;
}
/* ============================================================================
* base/media.css · Imagenes y media responsive
* ============================================================================ */
img, svg, video {
display: block;
max-width: 100%;
height: auto;
}
img {
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 1rem;
}
iframe {
border: 0;
max-width: 100%;
}
figure {
margin: 0;
}
figcaption {
font-size: var(--fs-100);
color: var(--color-fg-muted);
margin-block-start: var(--space-2);
}
/* Aspect-ratio helpers (utility-lite) */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-photo { aspect-ratio: 4 / 5; }
/* ============================================================================
* base/theme.css · color-scheme handoff al navegador
* Los VALORES de los tokens ya estan en tokens/color.css; aqui solo
* informamos al UA que tipo de color-scheme aplicar (scrollbars, form controls).
* ============================================================================ */
:root {
color-scheme: light;
}
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]),
:root[data-theme="system"] {
color-scheme: dark;
}
}
/* ============================================================================
* base/_icons.css · estilos base para iconos SVG del design system QueLicitar.
*
* Ver template tag {% icon %} en apps/core/templatetags/icons.py y el builder
* scripts/build_sprite.py. Los iconos escalan con el font-size vigente.
* ============================================================================ */
.qlc-icon {
inline-size: 1em;
block-size: 1em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
vertical-align: -0.125em;
}
.qlc-icon--xs { font-size: 0.75rem; }
.qlc-icon--sm { font-size: 0.875rem; }
.qlc-icon--md { font-size: 1rem; }
.qlc-icon--lg { font-size: 1.25rem; }
.qlc-icon--xl { font-size: 1.5rem; }
.qlc-icon--2xl { font-size: 2rem; }
}
@layer layout {
/* ============================================================================
* layout/index.css · barrel de primitives layout
* ============================================================================ */
/* ============================================================================
* layout/container.css · .qlc-container
* ============================================================================ */
.qlc-container {
width: 100%;
max-width: var(--container-max, 72rem);
margin-inline: auto;
padding-inline: var(--container-padding, var(--space-4));
}
.qlc-container--narrow { --container-max: 48rem; }
.qlc-container--wide { --container-max: 88rem; }
.qlc-container--full { --container-max: 100%; }
/* ============================================================================
* layout/stack.css · .qlc-stack · vertical rhythm via > * + *
* ============================================================================ */
.qlc-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.qlc-stack > * + * {
margin-block-start: var(--stack-space, var(--space-4));
}
.qlc-stack--xs > * + * { --stack-space: var(--space-1); }
.qlc-stack--sm > * + * { --stack-space: var(--space-2); }
.qlc-stack--md > * + * { --stack-space: var(--space-4); }
.qlc-stack--lg > * + * { --stack-space: var(--space-6); }
.qlc-stack--xl > * + * { --stack-space: var(--space-10); }
/* ============================================================================
* layout/cluster.css · .qlc-cluster · inline wrap con gap
* ============================================================================ */
.qlc-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--cluster-gap, var(--space-3));
align-items: var(--cluster-align, center);
justify-content: var(--cluster-justify, flex-start);
}
.qlc-cluster--between { --cluster-justify: space-between; }
.qlc-cluster--end { --cluster-justify: flex-end; }
.qlc-cluster--center { --cluster-justify: center; }
.qlc-cluster--baseline { --cluster-align: baseline; }
.qlc-cluster--stretch { --cluster-align: stretch; }
/* ============================================================================
* layout/sidebar.css · .qlc-sidebar · Every Layout
* Primer hijo = sidebar, segundo = contenido principal.
* ============================================================================ */
.qlc-sidebar {
display: flex;
flex-wrap: wrap;
gap: var(--sidebar-gap, var(--space-6));
}
.qlc-sidebar > :first-child {
flex-basis: var(--sidebar-width, 16rem);
flex-grow: 1;
}
.qlc-sidebar > :last-child {
flex-basis: 0;
flex-grow: 999;
min-inline-size: var(--sidebar-content-min, 60%);
}
.qlc-sidebar--reverse { flex-direction: row-reverse; }
/* ============================================================================
* layout/switcher.css · .qlc-switcher · Every Layout
* Horizontal cuando cabe, vertical cuando el ancho es menor al threshold.
* ============================================================================ */
.qlc-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--switcher-gap, var(--space-4));
}
.qlc-switcher > * {
flex-grow: 1;
flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}
/* 5+ hijos -> forzar full width (mantiene legibilidad) */
.qlc-switcher > :nth-last-child(n+5),
.qlc-switcher > :nth-last-child(n+5) ~ * {
flex-basis: 100%;
}
/* ============================================================================
* layout/grid.css · .qlc-grid · auto-fit responsive grid
* ============================================================================ */
.qlc-grid {
display: grid;
gap: var(--grid-gap, var(--space-6));
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--grid-min, 16rem), 100%), 1fr)
);
}
.qlc-grid--tight { --grid-gap: var(--space-3); }
.qlc-grid--loose { --grid-gap: var(--space-10); }
.qlc-grid--dense { grid-auto-flow: dense; }
/* ============================================================================
* layout/center.css · .qlc-center · centrado horizontal con max-inline-size
* ============================================================================ */
.qlc-center {
box-sizing: content-box;
max-inline-size: var(--center-max, 60ch);
margin-inline: auto;
padding-inline: var(--center-gutter, var(--space-4));
}
.qlc-center--intrinsic {
display: flex;
flex-direction: column;
align-items: center;
}
.qlc-center--prose { --center-max: 70ch; }
.qlc-center--wide { --center-max: 80ch; }
/* ============================================================================
* layout/cover.css · .qlc-cover · hero fullscreen con elemento centrado
* ============================================================================ */
.qlc-cover {
display: flex;
flex-direction: column;
min-block-size: var(--cover-min, 100svh);
padding: var(--cover-padding, var(--space-6));
}
.qlc-cover > * {
margin-block: var(--cover-space, var(--space-4));
}
.qlc-cover > :first-child:not(.qlc-cover__centered) {
margin-block-start: 0;
}
.qlc-cover > :last-child:not(.qlc-cover__centered) {
margin-block-end: 0;
}
.qlc-cover > .qlc-cover__centered {
margin-block: auto;
}
/* ============================================================================
* layout/frame.css · .qlc-frame · aspect ratio wrapper
* ============================================================================ */
.qlc-frame {
aspect-ratio: var(--frame-ratio, 16 / 9);
overflow: hidden;
display: flex;
}
.qlc-frame > img,
.qlc-frame > video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--frame-position, center);
}
.qlc-frame--square { --frame-ratio: 1 / 1; }
.qlc-frame--portrait { --frame-ratio: 4 / 5; }
.qlc-frame--wide { --frame-ratio: 21 / 9; }
}
@layer components {
/* ============================================================================
* components/index.css · QueLicitar Design System · barrel components layer
* Orden: forms → contenido → overlays → navegación → datos → singletons.
* ============================================================================ */
/* DS-05 · Forms */
/* ============================================================================
* components/button.css · qlc-button
* Buttons: primary / secondary / ghost / danger / icon, con sizes sm/md/lg,
* estados hover/focus/active/disabled/busy y slot para icono.
* ============================================================================ */
.qlc-button {
--_qlc-btn-bg: var(--color-bg-subtle);
--_qlc-btn-fg: var(--color-fg);
--_qlc-btn-bd: var(--color-border-strong);
--_qlc-btn-hover-bg: var(--color-bg-muted);
--_qlc-btn-active-bg: var(--color-bg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 2.5rem;
padding-inline: var(--space-4);
padding-block: var(--space-2);
border: 1px solid var(--_qlc-btn-bd);
border-radius: var(--radius-md);
background: var(--_qlc-btn-bg);
color: var(--_qlc-btn-fg);
font-family: var(--font-sans);
font-size: var(--fs-200);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-normal);
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition:
background-color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
box-shadow: var(--shadow-xs);
}
@media (hover: hover) and (pointer: fine) {
.qlc-button:hover:not(:disabled):not([aria-busy="true"]) {
background: var(--_qlc-btn-hover-bg);
border-color: var(--color-fg-subtle);
}
}
.qlc-button:active:not(:disabled):not([aria-busy="true"]) {
background: var(--_qlc-btn-active-bg);
transform: translateY(1px);
}
.qlc-button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-color: var(--color-accent);
}
.qlc-button:disabled,
.qlc-button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-button--sm {
min-height: 2rem;
padding-inline: var(--space-3);
padding-block: var(--space-1);
font-size: var(--fs-100);
border-radius: var(--radius-sm);
gap: var(--space-1-5);
}
.qlc-button--md {
min-height: 2.5rem;
padding-inline: var(--space-4);
padding-block: var(--space-2);
}
.qlc-button--lg {
min-height: 3rem;
padding-inline: var(--space-6);
padding-block: var(--space-3);
font-size: var(--fs-300);
border-radius: var(--radius-lg);
gap: var(--space-3);
}
/* --- Variants ------------------------------------------------------------- */
.qlc-button--primary {
--_qlc-btn-bg: var(--color-accent);
--_qlc-btn-fg: var(--color-accent-fg);
--_qlc-btn-bd: transparent;
--_qlc-btn-hover-bg: color-mix(in oklch, var(--color-accent) 85%, black);
--_qlc-btn-active-bg: color-mix(in oklch, var(--color-accent) 75%, black);
box-shadow: var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
.qlc-button--primary:hover:not(:disabled):not([aria-busy="true"]) {
border-color: transparent;
}
}
.qlc-button--secondary {
--_qlc-btn-bg: var(--color-surface);
--_qlc-btn-fg: var(--color-fg);
--_qlc-btn-bd: var(--color-border-strong);
--_qlc-btn-hover-bg: var(--color-bg-subtle);
--_qlc-btn-active-bg: var(--color-bg-muted);
}
.qlc-button--ghost {
--_qlc-btn-bg: transparent;
--_qlc-btn-fg: var(--color-fg);
--_qlc-btn-bd: transparent;
--_qlc-btn-hover-bg: var(--color-bg-subtle);
--_qlc-btn-active-bg: var(--color-bg-muted);
box-shadow: none;
}
.qlc-button--danger {
--_qlc-btn-bg: var(--color-danger);
--_qlc-btn-fg: var(--color-danger-fg);
--_qlc-btn-bd: transparent;
--_qlc-btn-hover-bg: color-mix(in oklch, var(--color-danger) 85%, black);
--_qlc-btn-active-bg: color-mix(in oklch, var(--color-danger) 75%, black);
box-shadow: var(--shadow-sm);
}
/* --- Icon-only ------------------------------------------------------------ */
.qlc-button--icon {
padding-inline: 0;
padding-block: 0;
inline-size: 2.5rem;
min-inline-size: 2.5rem;
aspect-ratio: 1;
gap: 0;
}
.qlc-button--icon.qlc-button--sm {
inline-size: 2rem;
min-inline-size: 2rem;
}
.qlc-button--icon.qlc-button--lg {
inline-size: 3rem;
min-inline-size: 3rem;
}
/* --- Icon slot ------------------------------------------------------------ */
.qlc-button__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
/* --- Loading / busy ------------------------------------------------------- */
.qlc-button[aria-busy="true"] {
cursor: progress;
color: transparent !important;
pointer-events: none;
position: relative;
}
.qlc-button[aria-busy="true"]::after {
content: "";
position: absolute;
inline-size: 1em;
block-size: 1em;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: var(--radius-circle);
color: var(--_qlc-btn-fg);
animation: qlc-button-spin var(--dur-slower) linear infinite;
}
@keyframes qlc-button-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.qlc-button[aria-busy="true"]::after {
animation-duration: 2s;
}
.qlc-button:active:not(:disabled):not([aria-busy="true"]) {
transform: none;
}
}
/* --- Full-width modifier (formularios, CTAs mobile) ---------------------- */
.qlc-button--full,
.qlc-button--block {
display: flex;
inline-size: 100%;
width: 100%;
}
/* --- Button group --------------------------------------------------------- */
.qlc-button-group {
display: inline-flex;
isolation: isolate;
}
.qlc-button-group > .qlc-button {
border-radius: 0;
margin-inline-start: -1px;
}
.qlc-button-group > .qlc-button:first-child {
border-start-start-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
margin-inline-start: 0;
}
.qlc-button-group > .qlc-button:last-child {
border-start-end-radius: var(--radius-md);
border-end-end-radius: var(--radius-md);
}
.qlc-button-group > .qlc-button:hover,
.qlc-button-group > .qlc-button:focus-visible {
z-index: 1;
}
/* ============================================================================
* components/input.css · qlc-input
* Refuerza estilos base/forms.css con wrapper para leading/trailing icons.
* ============================================================================ */
.qlc-input {
display: block;
inline-size: 100%;
min-height: 2.5rem;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: var(--lh-normal);
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
.qlc-input::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
}
.qlc-input:hover:not(:disabled):not(:focus) {
border-color: var(--color-fg-subtle);
}
.qlc-input:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: var(--shadow-ring);
}
.qlc-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--color-bg-muted);
}
.qlc-input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.qlc-input[aria-invalid="true"]:focus-visible {
box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 35%, transparent);
}
.qlc-input[readonly] {
background: var(--color-bg-subtle);
cursor: default;
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-input--sm {
min-height: 2rem;
padding: var(--space-1) var(--space-2);
font-size: var(--fs-100);
border-radius: var(--radius-sm);
}
.qlc-input--lg {
min-height: 3rem;
padding: var(--space-3) var(--space-4);
font-size: var(--fs-300);
border-radius: var(--radius-lg);
}
/* --- Wrapper con leading/trailing icons ----------------------------------- */
.qlc-input-wrapper {
position: relative;
display: block;
inline-size: 100%;
}
.qlc-input-wrapper__icon {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-fg-subtle);
pointer-events: none;
}
.qlc-input-wrapper__icon--leading {
inset-inline-start: var(--space-3);
}
.qlc-input-wrapper__icon--trailing {
inset-inline-end: var(--space-3);
}
.qlc-input-wrapper:has(.qlc-input-wrapper__icon--leading) .qlc-input {
padding-inline-start: var(--space-8);
}
.qlc-input-wrapper:has(.qlc-input-wrapper__icon--trailing) .qlc-input {
padding-inline-end: var(--space-8);
}
/* Trailing action (button) pointer-events activos */
.qlc-input-wrapper__action {
position: absolute;
inset-block-start: 50%;
inset-inline-end: var(--space-2);
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-subtle);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-input-wrapper__action:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
/* ============================================================================
* components/field.css · qlc-field
* Wrapper semántico para label + control + hint + error.
* ============================================================================ */
.qlc-field {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
min-inline-size: 0;
}
.qlc-field__label {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-sans);
font-size: var(--fs-200);
font-weight: var(--fw-medium);
color: var(--color-fg);
margin: 0;
}
.qlc-field__label--required::after {
content: "*";
color: var(--color-danger);
margin-inline-start: var(--space-0-5);
}
.qlc-field__label-optional {
margin-inline-start: var(--space-1);
font-weight: var(--fw-regular);
color: var(--color-fg-subtle);
font-size: var(--fs-100);
}
.qlc-field__control {
display: block;
inline-size: 100%;
}
.qlc-field__hint {
display: block;
font-size: var(--fs-100);
color: var(--color-fg-muted);
line-height: var(--lh-normal);
margin: 0;
}
.qlc-field__error {
display: inline-flex;
align-items: flex-start;
gap: var(--space-1);
font-size: var(--fs-100);
color: var(--color-danger);
line-height: var(--lh-normal);
margin: 0;
}
.qlc-field__error-icon {
flex-shrink: 0;
margin-block-start: 0.15em;
}
.qlc-field--invalid .qlc-field__label {
color: var(--color-danger);
}
.qlc-field--disabled {
opacity: 0.65;
pointer-events: none;
}
/* Inline (label a la izquierda) */
.qlc-field--inline {
flex-direction: row;
align-items: center;
gap: var(--space-3);
}
.qlc-field--inline .qlc-field__label {
flex-shrink: 0;
min-inline-size: 8rem;
}
.qlc-field--inline .qlc-field__control {
flex: 1 1 auto;
}
/* ============================================================================
* components/textarea.css · qlc-textarea
* Multi-line text input. Hereda estilos de base/forms.css.
* ============================================================================ */
.qlc-textarea {
display: block;
inline-size: 100%;
min-block-size: 6rem;
padding: var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: var(--lh-normal);
resize: vertical;
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
.qlc-textarea::placeholder {
color: var(--color-fg-subtle);
opacity: 1;
}
.qlc-textarea:hover:not(:disabled):not(:focus) {
border-color: var(--color-fg-subtle);
}
.qlc-textarea:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: var(--shadow-ring);
}
.qlc-textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--color-bg-muted);
}
.qlc-textarea[aria-invalid="true"] {
border-color: var(--color-danger);
}
.qlc-textarea--no-resize {
resize: none;
}
.qlc-textarea--autosize {
resize: none;
overflow: hidden;
field-sizing: content;
}
/* ============================================================================
* components/select.css · qlc-select
* Native select con caret personalizado via SVG inline (chevron-down).
* ============================================================================ */
.qlc-select {
display: block;
inline-size: 100%;
min-height: 2.5rem;
padding: var(--space-2) var(--space-3);
padding-inline-end: var(--space-10);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: var(--lh-normal);
cursor: pointer;
appearance: none;
/* chevron-down inline SVG (cero CDN). currentColor no funciona en background,
así que usamos el fg-muted actual via filter no es portable: usamos
stroke="%23657"... en realidad encodeamos el color semantico mediante
filter sobre el SVG no es trivial; dejamos un color neutro que luce bien
en ambos themes gracias a opacidad. */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 1rem 1rem;
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.qlc-select:hover:not(:disabled):not(:focus) {
border-color: var(--color-fg-subtle);
}
}
.qlc-select:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--color-accent);
box-shadow: var(--shadow-ring);
}
.qlc-select:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--color-bg-muted);
}
.qlc-select[aria-invalid="true"] {
border-color: var(--color-danger);
}
.qlc-select--sm {
min-height: 2rem;
padding: var(--space-1) var(--space-2);
padding-inline-end: var(--space-8);
font-size: var(--fs-100);
background-size: 0.875rem 0.875rem;
}
.qlc-select--lg {
min-height: 3rem;
padding: var(--space-3) var(--space-4);
padding-inline-end: var(--space-12);
font-size: var(--fs-300);
}
/* Multi-select (no chevron) */
.qlc-select[multiple] {
padding-inline-end: var(--space-3);
background-image: none;
min-height: 8rem;
}
/* ============================================================================
* components/checkbox.css · qlc-checkbox
* Custom styled checkbox. Input nativo + pseudo-element check.
* ============================================================================ */
.qlc-checkbox {
display: inline-flex;
align-items: flex-start;
gap: var(--space-2);
cursor: pointer;
user-select: none;
min-height: 1.5rem;
line-height: var(--lh-snug);
}
.qlc-checkbox__input {
appearance: none;
flex-shrink: 0;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: 0;
margin-block-start: 0.125rem;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xs);
background: var(--color-surface);
color: var(--color-accent);
cursor: pointer;
position: relative;
transition:
border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.qlc-checkbox__input:hover:not(:disabled) {
border-color: var(--color-accent);
}
.qlc-checkbox__input:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-color: var(--color-accent);
}
.qlc-checkbox__input:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.qlc-checkbox__input:checked::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-accent-fg);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
inline-size: 65%;
block-size: 65%;
margin: auto;
}
.qlc-checkbox__input:indeterminate {
background: var(--color-accent);
border-color: var(--color-accent);
}
.qlc-checkbox__input:indeterminate::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 20%;
inset-inline-end: 20%;
block-size: 2px;
background: var(--color-accent-fg);
transform: translateY(-50%);
border-radius: var(--radius-pill);
}
.qlc-checkbox__input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.qlc-checkbox__input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.qlc-checkbox__label {
font-size: var(--fs-200);
color: var(--color-fg);
}
.qlc-checkbox__hint {
display: block;
margin-block-start: var(--space-0-5);
font-size: var(--fs-100);
color: var(--color-fg-muted);
font-weight: var(--fw-regular);
}
/* ============================================================================
* components/radio.css · qlc-radio
* Custom styled radio. Input nativo + pseudo-element dot.
* ============================================================================ */
.qlc-radio {
display: inline-flex;
align-items: flex-start;
gap: var(--space-2);
cursor: pointer;
user-select: none;
min-height: 1.5rem;
line-height: var(--lh-snug);
}
.qlc-radio__input {
appearance: none;
flex-shrink: 0;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: 0;
margin-block-start: 0.125rem;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-circle);
background: var(--color-surface);
cursor: pointer;
position: relative;
transition:
border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.qlc-radio__input:hover:not(:disabled) {
border-color: var(--color-accent);
}
.qlc-radio__input:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-color: var(--color-accent);
}
.qlc-radio__input:checked {
border-color: var(--color-accent);
border-width: 1px;
}
.qlc-radio__input:checked::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
inline-size: 0.5rem;
block-size: 0.5rem;
border-radius: var(--radius-circle);
background: var(--color-accent);
}
.qlc-radio__input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.qlc-radio__input[aria-invalid="true"] {
border-color: var(--color-danger);
}
.qlc-radio__label {
font-size: var(--fs-200);
color: var(--color-fg);
}
.qlc-radio__hint {
display: block;
margin-block-start: var(--space-0-5);
font-size: var(--fs-100);
color: var(--color-fg-muted);
font-weight: var(--fw-regular);
}
/* Radio group */
.qlc-radio-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.qlc-radio-group--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4);
}
/* ============================================================================
* components/switch.css · qlc-switch
* Toggle tipo switch con thumb animado.
* ============================================================================ */
.qlc-switch {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
user-select: none;
min-height: 1.5rem;
line-height: var(--lh-snug);
}
.qlc-switch__input {
appearance: none;
flex-shrink: 0;
position: relative;
inline-size: 2.25rem;
block-size: 1.25rem;
margin: 0;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--color-bg-muted);
cursor: pointer;
transition:
background-color var(--dur-medium) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.qlc-switch__input::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0.125rem;
inline-size: 0.875rem;
block-size: 0.875rem;
border-radius: var(--radius-circle);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
transform: translateY(-50%);
transition:
inset-inline-start var(--dur-medium) var(--ease-emphasized),
background-color var(--dur-fast) var(--ease-standard);
}
.qlc-switch__input:hover:not(:disabled) {
border-color: var(--color-fg-subtle);
}
.qlc-switch__input:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-color: var(--color-accent);
}
.qlc-switch__input:checked {
background: var(--color-accent);
border-color: var(--color-accent);
}
.qlc-switch__input:checked::after {
inset-inline-start: calc(100% - 0.875rem - 0.125rem);
background: var(--color-accent-fg);
}
.qlc-switch__input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.qlc-switch__label {
font-size: var(--fs-200);
color: var(--color-fg);
}
.qlc-switch__hint {
display: block;
margin-block-start: var(--space-0-5);
font-size: var(--fs-100);
color: var(--color-fg-muted);
}
.qlc-switch--lg .qlc-switch__input {
inline-size: 2.75rem;
block-size: 1.5rem;
}
.qlc-switch--lg .qlc-switch__input::after {
inline-size: 1.125rem;
block-size: 1.125rem;
}
.qlc-switch--lg .qlc-switch__input:checked::after {
inset-inline-start: calc(100% - 1.125rem - 0.125rem);
}
@media (prefers-reduced-motion: reduce) {
.qlc-switch__input,
.qlc-switch__input::after {
transition: none;
}
}
/* DS-06 · Contenido */
/* ============================================================================
* components/card.css · qlc-card
* Card surface con slots header / body / footer / actions.
* Modifiers: --elevated, --outlined, --interactive.
* ============================================================================ */
.qlc-card {
display: flex;
flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
container-type: inline-size;
transition:
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-medium) var(--ease-standard),
transform var(--dur-medium) var(--ease-standard);
}
.qlc-card__header,
.qlc-card__body,
.qlc-card__footer {
padding: var(--space-6);
}
.qlc-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
border-block-end: 1px solid var(--color-border);
}
.qlc-card__title {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-400);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--color-fg);
}
.qlc-card__subtitle {
margin: var(--space-1) 0 0;
font-size: var(--fs-100);
color: var(--color-fg-muted);
font-weight: var(--fw-regular);
}
.qlc-card__body {
flex: 1 1 auto;
color: var(--color-fg);
font-size: var(--fs-200);
line-height: var(--lh-normal);
}
.qlc-card__footer {
border-block-start: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
.qlc-card__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.qlc-card__media {
display: block;
inline-size: 100%;
block-size: auto;
object-fit: cover;
}
/* --- Variants ------------------------------------------------------------- */
.qlc-card--elevated {
border-color: transparent;
box-shadow: var(--shadow-md);
}
.qlc-card--outlined {
box-shadow: none;
background: transparent;
}
.qlc-card--interactive {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.qlc-card--interactive:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
}
.qlc-card--interactive:focus-within {
border-color: var(--color-accent);
box-shadow: var(--shadow-ring);
}
@media (prefers-reduced-motion: reduce) {
.qlc-card--interactive:hover {
transform: none;
}
}
/* --- Sizing variants ------------------------------------------------------ */
.qlc-card--compact .qlc-card__header,
.qlc-card--compact .qlc-card__body,
.qlc-card--compact .qlc-card__footer {
padding: var(--space-4);
}
/* --- Container queries ---------------------------------------------------- */
@container (inline-size < 24rem) {
.qlc-card__header {
flex-direction: column;
align-items: stretch;
}
.qlc-card__actions {
width: 100%;
}
}
/* ============================================================================
* components/badge.css · qlc-badge
* Pill inline. Variantes por level (info/success/warning/danger/neutral)
* y por sólidez (subtle default / solid / outline).
* ============================================================================ */
.qlc-badge {
--_qlc-badge-bg: var(--color-bg-muted);
--_qlc-badge-fg: var(--color-fg);
--_qlc-badge-bd: transparent;
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-2);
padding-block: var(--space-0-5);
background: var(--_qlc-badge-bg);
color: var(--_qlc-badge-fg);
border: 1px solid var(--_qlc-badge-bd);
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-normal);
white-space: nowrap;
vertical-align: baseline;
}
.qlc-badge__dot {
display: inline-block;
inline-size: 0.375rem;
block-size: 0.375rem;
border-radius: var(--radius-circle);
background: currentColor;
flex-shrink: 0;
}
.qlc-badge__icon {
flex-shrink: 0;
}
/* --- Levels (subtle por default) ------------------------------------------ */
.qlc-badge--neutral {
--_qlc-badge-bg: var(--color-bg-muted);
--_qlc-badge-fg: var(--color-fg-muted);
}
.qlc-badge--info {
--_qlc-badge-bg: var(--color-info-subtle);
--_qlc-badge-fg: var(--color-info);
}
.qlc-badge--success {
--_qlc-badge-bg: var(--color-success-subtle);
--_qlc-badge-fg: var(--color-success);
}
.qlc-badge--warning {
--_qlc-badge-bg: var(--color-warning-subtle);
--_qlc-badge-fg: var(--color-warning);
}
.qlc-badge--danger {
--_qlc-badge-bg: var(--color-danger-subtle);
--_qlc-badge-fg: var(--color-danger);
}
.qlc-badge--accent {
--_qlc-badge-bg: var(--color-accent-subtle);
--_qlc-badge-fg: var(--color-accent);
}
/* --- Solid ---------------------------------------------------------------- */
.qlc-badge--solid.qlc-badge--neutral {
--_qlc-badge-bg: var(--color-fg-muted);
--_qlc-badge-fg: var(--color-bg);
}
.qlc-badge--solid.qlc-badge--info {
--_qlc-badge-bg: var(--color-info);
--_qlc-badge-fg: var(--color-info-fg);
}
.qlc-badge--solid.qlc-badge--success {
--_qlc-badge-bg: var(--color-success);
--_qlc-badge-fg: var(--color-success-fg);
}
.qlc-badge--solid.qlc-badge--warning {
--_qlc-badge-bg: var(--color-warning);
--_qlc-badge-fg: var(--color-warning-fg);
}
.qlc-badge--solid.qlc-badge--danger {
--_qlc-badge-bg: var(--color-danger);
--_qlc-badge-fg: var(--color-danger-fg);
}
.qlc-badge--solid.qlc-badge--accent {
--_qlc-badge-bg: var(--color-accent);
--_qlc-badge-fg: var(--color-accent-fg);
}
/* --- Outline -------------------------------------------------------------- */
.qlc-badge--outline {
--_qlc-badge-bg: transparent;
}
.qlc-badge--outline.qlc-badge--neutral { --_qlc-badge-bd: var(--color-border-strong); --_qlc-badge-fg: var(--color-fg-muted); }
.qlc-badge--outline.qlc-badge--info { --_qlc-badge-bd: var(--color-info); --_qlc-badge-fg: var(--color-info); }
.qlc-badge--outline.qlc-badge--success { --_qlc-badge-bd: var(--color-success); --_qlc-badge-fg: var(--color-success); }
.qlc-badge--outline.qlc-badge--warning { --_qlc-badge-bd: var(--color-warning); --_qlc-badge-fg: var(--color-warning); }
.qlc-badge--outline.qlc-badge--danger { --_qlc-badge-bd: var(--color-danger); --_qlc-badge-fg: var(--color-danger); }
.qlc-badge--outline.qlc-badge--accent { --_qlc-badge-bd: var(--color-accent); --_qlc-badge-fg: var(--color-accent); }
/* --- Sizes ---------------------------------------------------------------- */
.qlc-badge--sm {
font-size: var(--fs-50);
padding-inline: var(--space-1-5);
}
.qlc-badge--lg {
font-size: var(--fs-200);
padding-inline: var(--space-3);
padding-block: var(--space-1);
}
/* ============================================================================
* components/alert.css · qlc-alert
* Banner contextual con icon + body + actions + dismiss.
* Levels via [data-level].
* ============================================================================ */
.qlc-alert {
--_qlc-alert-bg: var(--color-bg-subtle);
--_qlc-alert-fg: var(--color-fg);
--_qlc-alert-bd: var(--color-border);
--_qlc-alert-accent: var(--color-fg-muted);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: var(--_qlc-alert-bg);
color: var(--_qlc-alert-fg);
border: 1px solid var(--_qlc-alert-bd);
border-radius: var(--radius-md);
font-size: var(--fs-200);
line-height: var(--lh-normal);
position: relative;
/* franja lateral acento */
border-inline-start: 3px solid var(--_qlc-alert-accent);
}
.qlc-alert__icon {
flex-shrink: 0;
color: var(--_qlc-alert-accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-block-start: 0.1em;
}
.qlc-alert__body {
flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.qlc-alert__title {
margin: 0;
font-size: var(--fs-200);
font-weight: var(--fw-semibold);
color: var(--_qlc-alert-fg);
line-height: var(--lh-snug);
}
.qlc-alert__message {
margin: 0;
color: var(--color-fg-muted);
font-size: var(--fs-100);
line-height: var(--lh-normal);
}
.qlc-alert__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-start: var(--space-2);
}
.qlc-alert__close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.5rem;
block-size: 1.5rem;
margin: -0.25rem;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-alert__close:hover {
background: var(--color-bg-muted);
color: var(--color-fg);
}
/* --- Levels --------------------------------------------------------------- */
.qlc-alert[data-level="info"] {
--_qlc-alert-bg: var(--color-info-subtle);
--_qlc-alert-bd: color-mix(in oklch, var(--color-info) 30%, transparent);
--_qlc-alert-accent: var(--color-info);
}
.qlc-alert[data-level="success"] {
--_qlc-alert-bg: var(--color-success-subtle);
--_qlc-alert-bd: color-mix(in oklch, var(--color-success) 30%, transparent);
--_qlc-alert-accent: var(--color-success);
}
.qlc-alert[data-level="warning"] {
--_qlc-alert-bg: var(--color-warning-subtle);
--_qlc-alert-bd: color-mix(in oklch, var(--color-warning) 35%, transparent);
--_qlc-alert-accent: var(--color-warning);
}
.qlc-alert[data-level="danger"] {
--_qlc-alert-bg: var(--color-danger-subtle);
--_qlc-alert-bd: color-mix(in oklch, var(--color-danger) 30%, transparent);
--_qlc-alert-accent: var(--color-danger);
}
/* --- Variant: solid (más enfático) --------------------------------------- */
.qlc-alert--solid[data-level="info"] { --_qlc-alert-bg: var(--color-info); --_qlc-alert-fg: var(--color-info-fg); }
.qlc-alert--solid[data-level="success"] { --_qlc-alert-bg: var(--color-success); --_qlc-alert-fg: var(--color-success-fg); }
.qlc-alert--solid[data-level="warning"] { --_qlc-alert-bg: var(--color-warning); --_qlc-alert-fg: var(--color-warning-fg); }
.qlc-alert--solid[data-level="danger"] { --_qlc-alert-bg: var(--color-danger); --_qlc-alert-fg: var(--color-danger-fg); }
.qlc-alert--solid .qlc-alert__icon,
.qlc-alert--solid .qlc-alert__title,
.qlc-alert--solid .qlc-alert__message,
.qlc-alert--solid .qlc-alert__close {
color: inherit;
}
/* ============================================================================
* components/tag.css · qlc-tag
* Similar a badge pero con slot remove (X). Pensado para selección/filtros.
* ============================================================================ */
.qlc-tag {
--_qlc-tag-bg: var(--color-bg-muted);
--_qlc-tag-fg: var(--color-fg);
--_qlc-tag-bd: var(--color-border);
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
padding-inline-start: var(--space-2);
padding-inline-end: var(--space-1);
padding-block: var(--space-0-5);
background: var(--_qlc-tag-bg);
color: var(--_qlc-tag-fg);
border: 1px solid var(--_qlc-tag-bd);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
white-space: nowrap;
max-inline-size: 100%;
}
.qlc-tag__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-inline-size: 0;
}
.qlc-tag__remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.125rem;
block-size: 1.125rem;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-tag__remove:hover {
background: color-mix(in oklch, var(--color-fg) 12%, transparent);
color: var(--color-fg);
}
.qlc-tag__remove:focus-visible {
outline: 2px solid transparent;
outline-offset: 1px;
box-shadow: var(--shadow-ring);
}
/* --- Variants ------------------------------------------------------------- */
.qlc-tag--accent { --_qlc-tag-bg: var(--color-accent-subtle); --_qlc-tag-fg: var(--color-accent); --_qlc-tag-bd: transparent; }
.qlc-tag--info { --_qlc-tag-bg: var(--color-info-subtle); --_qlc-tag-fg: var(--color-info); --_qlc-tag-bd: transparent; }
.qlc-tag--success { --_qlc-tag-bg: var(--color-success-subtle); --_qlc-tag-fg: var(--color-success); --_qlc-tag-bd: transparent; }
.qlc-tag--warning { --_qlc-tag-bg: var(--color-warning-subtle); --_qlc-tag-fg: var(--color-warning); --_qlc-tag-bd: transparent; }
.qlc-tag--danger { --_qlc-tag-bg: var(--color-danger-subtle); --_qlc-tag-fg: var(--color-danger); --_qlc-tag-bd: transparent; }
.qlc-tag--outline {
--_qlc-tag-bg: transparent;
--_qlc-tag-bd: var(--color-border-strong);
}
/* ============================================================================
* components/avatar.css · qlc-avatar
* Círculo con imagen o iniciales + indicador de estado opcional.
* ============================================================================ */
.qlc-avatar {
--_qlc-avatar-size: 2.5rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--_qlc-avatar-size);
block-size: var(--_qlc-avatar-size);
border-radius: var(--radius-circle);
background: var(--color-bg-muted);
color: var(--color-fg);
font-family: var(--font-sans);
font-weight: var(--fw-semibold);
font-size: calc(var(--_qlc-avatar-size) * 0.4);
line-height: 1;
text-transform: uppercase;
letter-spacing: var(--tracking-tight);
user-select: none;
flex-shrink: 0;
overflow: hidden;
vertical-align: middle;
}
.qlc-avatar__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
}
.qlc-avatar__initials {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-avatar--xs { --_qlc-avatar-size: 1.5rem; }
.qlc-avatar--sm { --_qlc-avatar-size: 2rem; }
.qlc-avatar--md { --_qlc-avatar-size: 2.5rem; }
.qlc-avatar--lg { --_qlc-avatar-size: 3rem; }
.qlc-avatar--xl { --_qlc-avatar-size: 4rem; }
.qlc-avatar--2xl { --_qlc-avatar-size: 5rem; }
/* --- Color variants (color-mix con accent) -------------------------------- */
.qlc-avatar--accent { background: var(--color-accent-subtle); color: var(--color-accent); }
.qlc-avatar--info { background: var(--color-info-subtle); color: var(--color-info); }
.qlc-avatar--success { background: var(--color-success-subtle); color: var(--color-success); }
.qlc-avatar--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.qlc-avatar--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
/* --- Status dot ----------------------------------------------------------- */
.qlc-avatar__status {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inline-size: calc(var(--_qlc-avatar-size) * 0.28);
block-size: calc(var(--_qlc-avatar-size) * 0.28);
min-inline-size: 0.5rem;
min-block-size: 0.5rem;
border-radius: var(--radius-circle);
background: var(--color-fg-subtle);
border: 2px solid var(--color-surface);
box-sizing: content-box;
margin: -2px;
}
.qlc-avatar__status[data-status="online"] { background: var(--color-success); }
.qlc-avatar__status[data-status="away"] { background: var(--color-warning); }
.qlc-avatar__status[data-status="busy"] { background: var(--color-danger); }
.qlc-avatar__status[data-status="offline"] { background: var(--color-fg-subtle); }
/* --- Avatar group (stack) ------------------------------------------------- */
.qlc-avatar-group {
display: inline-flex;
align-items: center;
}
.qlc-avatar-group .qlc-avatar {
border: 2px solid var(--color-surface);
margin-inline-start: -0.5rem;
}
.qlc-avatar-group .qlc-avatar:first-child {
margin-inline-start: 0;
}
/* ============================================================================
* components/kbd.css · qlc-kbd
* Tecla de teclado estilizada (command palette, atajos en docs).
* ============================================================================ */
.qlc-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.5rem;
padding-inline: var(--space-1-5);
padding-block: var(--space-0-5);
border: 1px solid var(--color-border-strong);
border-block-end-width: 2px;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-fg-muted);
font-family: var(--font-mono);
font-size: 0.75em;
font-weight: var(--fw-medium);
line-height: 1.2;
white-space: nowrap;
vertical-align: baseline;
box-shadow: var(--shadow-xs);
}
.qlc-kbd--lg {
min-inline-size: 2rem;
padding-inline: var(--space-2);
padding-block: var(--space-1);
font-size: 0.875em;
}
.qlc-kbd-group {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.qlc-kbd-group__plus {
color: var(--color-fg-subtle);
font-size: 0.75em;
}
/* ============================================================================
* components/code.css · qlc-code (inline) + qlc-code-block (pre)
* Sintaxis monoespaciada con fondo subtle y wrapping suave.
* ============================================================================ */
.qlc-code {
display: inline;
padding-inline: var(--space-1);
padding-block: 0.05em;
border-radius: var(--radius-xs);
background: var(--color-bg-subtle);
color: var(--color-fg);
font-family: var(--font-mono);
font-size: 0.875em;
font-weight: var(--fw-regular);
line-height: 1.4;
border: 1px solid var(--color-border);
word-break: break-word;
}
a > .qlc-code {
color: inherit;
}
.qlc-code-block {
display: block;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-fg);
font-family: var(--font-mono);
font-size: var(--fs-100);
line-height: var(--lh-relaxed);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
tab-size: 2;
white-space: pre;
}
.qlc-code-block code {
font-family: inherit;
font-size: inherit;
line-height: inherit;
background: transparent;
border: 0;
padding: 0;
}
/* Wrapper con header opcional (lenguaje + copy) */
.qlc-code-block-wrapper {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.qlc-code-block-wrapper__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-bg-muted);
border-block-end: 1px solid var(--color-border);
font-size: var(--fs-50);
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.qlc-code-block-wrapper > .qlc-code-block {
border: 0;
border-radius: 0;
}
/* ============================================================================
* components/prose.css · qlc-prose
* Wrapper para contenido long-form (legal, blog, docs).
* Define spacing y tipografía dentro del wrapper sin contaminar el global.
* ============================================================================ */
.qlc-prose {
--_qlc-prose-measure: 65ch;
max-inline-size: var(--_qlc-prose-measure);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--fs-300);
line-height: var(--lh-relaxed);
}
.qlc-prose > * + * {
margin-block-start: var(--space-4);
}
/* Headings */
.qlc-prose h1,
.qlc-prose h2,
.qlc-prose h3,
.qlc-prose h4,
.qlc-prose h5,
.qlc-prose h6 {
font-family: var(--font-serif);
font-weight: var(--fw-regular);
color: var(--color-fg);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
margin-block-start: var(--space-10);
margin-block-end: var(--space-3);
}
.qlc-prose h1 { font-size: var(--fs-800); }
.qlc-prose h2 { font-size: var(--fs-700); }
.qlc-prose h3 { font-size: var(--fs-600); }
.qlc-prose h4 { font-size: var(--fs-500); font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.qlc-prose h5 { font-size: var(--fs-400); font-family: var(--font-sans); font-weight: var(--fw-semibold); }
.qlc-prose h6 { font-size: var(--fs-300); font-family: var(--font-sans); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-fg-muted); }
.qlc-prose h1:first-child,
.qlc-prose h2:first-child,
.qlc-prose h3:first-child {
margin-block-start: 0;
}
/* Párrafos */
.qlc-prose p {
margin: 0;
color: var(--color-fg);
}
.qlc-prose p + p {
margin-block-start: var(--space-4);
}
/* Lead */
.qlc-prose .qlc-prose__lead {
font-size: var(--fs-400);
color: var(--color-fg-muted);
line-height: var(--lh-relaxed);
}
/* Listas */
.qlc-prose ul,
.qlc-prose ol {
padding-inline-start: var(--space-6);
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.qlc-prose ul { list-style: disc; }
.qlc-prose ol { list-style: decimal; }
.qlc-prose li::marker {
color: var(--color-fg-subtle);
}
.qlc-prose li > ul,
.qlc-prose li > ol {
margin-block-start: var(--space-2);
}
/* Énfasis */
.qlc-prose strong {
color: var(--color-fg);
font-weight: var(--fw-semibold);
}
.qlc-prose em {
font-style: italic;
}
/* Links */
.qlc-prose a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-color: color-mix(in oklch, var(--color-accent) 35%, transparent);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-prose a:hover {
text-decoration-color: var(--color-accent);
}
/* Blockquote */
.qlc-prose blockquote {
margin: 0;
padding-inline-start: var(--space-4);
border-inline-start: 3px solid var(--color-accent);
font-family: var(--font-serif);
font-size: var(--fs-400);
font-style: italic;
color: var(--color-fg-muted);
line-height: var(--lh-relaxed);
}
.qlc-prose blockquote cite {
display: block;
margin-block-start: var(--space-2);
font-family: var(--font-sans);
font-size: var(--fs-100);
color: var(--color-fg-subtle);
font-style: normal;
}
/* HR */
.qlc-prose hr {
border: 0;
block-size: 1px;
background: var(--color-border);
margin-block: var(--space-10);
}
/* Code dentro de prose */
.qlc-prose code:not(.qlc-code-block code) {
display: inline;
padding-inline: var(--space-1);
border-radius: var(--radius-xs);
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 0.875em;
}
.qlc-prose pre {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--fs-100);
line-height: var(--lh-relaxed);
}
/* Tablas */
.qlc-prose table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--fs-200);
}
.qlc-prose th,
.qlc-prose td {
padding: var(--space-2) var(--space-3);
text-align: start;
border-block-end: 1px solid var(--color-border);
vertical-align: top;
}
.qlc-prose th {
font-weight: var(--fw-semibold);
color: var(--color-fg);
background: var(--color-bg-subtle);
}
/* Imagen / figure */
.qlc-prose img,
.qlc-prose video {
max-inline-size: 100%;
block-size: auto;
border-radius: var(--radius-md);
}
.qlc-prose figure {
margin: 0;
}
.qlc-prose figcaption {
margin-block-start: var(--space-2);
font-size: var(--fs-100);
color: var(--color-fg-muted);
text-align: center;
}
/* Definition list */
.qlc-prose dl > dt {
font-weight: var(--fw-semibold);
color: var(--color-fg);
margin-block-start: var(--space-3);
}
.qlc-prose dl > dd {
margin-inline-start: var(--space-4);
color: var(--color-fg-muted);
}
/* Variantes */
.qlc-prose--narrow {
--_qlc-prose-measure: 52ch;
}
.qlc-prose--wide {
--_qlc-prose-measure: 80ch;
}
/* DS-07 · Overlay */
/* ============================================================================
* components/modal.css · qlc-modal + qlc-modal__backdrop / __dialog
* Centered overlay, native-dialog friendly. WC añade [open] cuando visible.
* ============================================================================ */
/* Body lock cuando hay overlay abierto */
html.qlc-has-overlay,
body.qlc-has-overlay {
overflow: hidden;
}
.qlc-modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: grid;
place-items: center;
padding: var(--space-4);
pointer-events: none;
visibility: hidden;
}
.qlc-modal[open],
.qlc-modal[aria-hidden="false"] {
pointer-events: auto;
visibility: visible;
}
.qlc-modal__backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal) - 1);
background: color-mix(in oklch, var(--neutral-950) 55%, transparent);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transition:
opacity var(--dur-medium) var(--ease-standard),
visibility 0s linear var(--dur-medium);
visibility: hidden;
}
.qlc-modal__backdrop:not([hidden]) {
opacity: 1;
visibility: visible;
transition:
opacity var(--dur-medium) var(--ease-standard),
visibility 0s linear 0s;
}
.qlc-modal__dialog {
position: relative;
inline-size: 100%;
max-inline-size: min(90vw, 32rem);
max-block-size: calc(100vh - var(--space-8));
background: var(--color-surface-raised);
color: var(--color-fg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
overflow: hidden;
/* Animación apertura */
opacity: 0;
transform: translateY(8px) scale(0.98);
transition:
opacity var(--dur-medium) var(--ease-decelerated),
transform var(--dur-medium) var(--ease-decelerated);
}
.qlc-modal[open] .qlc-modal__dialog,
.qlc-modal[aria-hidden="false"] .qlc-modal__dialog {
opacity: 1;
transform: translateY(0) scale(1);
}
.qlc-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-6);
border-block-end: 1px solid var(--color-border);
}
.qlc-modal__title {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-500);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--color-fg);
}
.qlc-modal__subtitle {
margin: var(--space-1) 0 0;
font-size: var(--fs-100);
color: var(--color-fg-muted);
}
.qlc-modal__close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
margin: -0.25rem;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.qlc-modal__close:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
}
.qlc-modal__body {
flex: 1 1 auto;
padding: var(--space-6);
overflow-y: auto;
font-size: var(--fs-200);
line-height: var(--lh-normal);
color: var(--color-fg);
}
.qlc-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-block-start: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-modal--sm .qlc-modal__dialog { max-inline-size: min(90vw, 24rem); }
.qlc-modal--md .qlc-modal__dialog { max-inline-size: min(90vw, 32rem); }
.qlc-modal--lg .qlc-modal__dialog { max-inline-size: min(95vw, 48rem); }
.qlc-modal--xl .qlc-modal__dialog { max-inline-size: min(95vw, 64rem); }
.qlc-modal--full .qlc-modal__dialog { max-inline-size: calc(100vw - var(--space-8)); }
/* Mobile crítico: padding interior reducido para aprovechar viewport */
@media (max-width: 22.5rem) {
.qlc-modal {
padding: var(--space-2);
}
.qlc-modal__dialog {
max-inline-size: 95vw;
}
.qlc-modal__header,
.qlc-modal__body,
.qlc-modal__footer {
padding-inline: var(--space-4);
}
}
@media (prefers-reduced-motion: reduce) {
.qlc-modal__dialog,
.qlc-modal__backdrop {
transition: opacity var(--dur-fast) linear, visibility 0s linear;
transform: none !important;
}
}
/* ============================================================================
* components/drawer.css · qlc-drawer + qlc-drawer__backdrop
* Slide-in panel desde left/right/bottom según [data-side].
* ============================================================================ */
.qlc-drawer {
position: fixed;
z-index: var(--z-drawer);
background: var(--color-surface-raised);
color: var(--color-fg);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
visibility: hidden;
pointer-events: none;
transition:
transform var(--dur-medium) var(--ease-emphasized),
visibility 0s linear var(--dur-medium);
overflow: hidden;
inline-size: min(20rem, 100vw);
block-size: 100vh;
inset-block-start: 0;
inset-inline-end: 0;
transform: translateX(100%);
border-inline-start: 1px solid var(--color-border);
}
.qlc-drawer[open],
.qlc-drawer[aria-hidden="false"] {
visibility: visible;
pointer-events: auto;
transform: translateX(0);
transition:
transform var(--dur-medium) var(--ease-emphasized),
visibility 0s linear 0s;
}
/* --- Sides ---------------------------------------------------------------- */
.qlc-drawer[data-side="right"] {
inset-block-start: 0;
inset-inline-end: 0;
inset-inline-start: auto;
transform: translateX(100%);
border-inline-start: 1px solid var(--color-border);
border-inline-end: 0;
}
.qlc-drawer[data-side="left"] {
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: auto;
transform: translateX(-100%);
border-inline-end: 1px solid var(--color-border);
border-inline-start: 0;
}
.qlc-drawer[data-side="left"][open],
.qlc-drawer[data-side="left"][aria-hidden="false"],
.qlc-drawer[data-side="right"][open],
.qlc-drawer[data-side="right"][aria-hidden="false"] {
transform: translateX(0);
}
.qlc-drawer[data-side="bottom"] {
inset-block-end: 0;
inset-block-start: auto;
inset-inline: 0;
inline-size: 100%;
block-size: auto;
max-block-size: 80vh;
transform: translateY(100%);
border-block-start: 1px solid var(--color-border);
border-inline-start: 0;
border-start-start-radius: var(--radius-lg);
border-start-end-radius: var(--radius-lg);
}
.qlc-drawer[data-side="bottom"][open],
.qlc-drawer[data-side="bottom"][aria-hidden="false"] {
transform: translateY(0);
}
.qlc-drawer[data-side="top"] {
inset-block-start: 0;
inset-block-end: auto;
inset-inline: 0;
inline-size: 100%;
block-size: auto;
max-block-size: 80vh;
transform: translateY(-100%);
border-block-end: 1px solid var(--color-border);
border-end-start-radius: var(--radius-lg);
border-end-end-radius: var(--radius-lg);
}
.qlc-drawer[data-side="top"][open],
.qlc-drawer[data-side="top"][aria-hidden="false"] {
transform: translateY(0);
}
/* --- Backdrop ------------------------------------------------------------- */
.qlc-drawer__backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-drawer) - 1);
background: color-mix(in oklch, var(--neutral-950) 50%, transparent);
opacity: 0;
transition:
opacity var(--dur-medium) var(--ease-standard),
visibility 0s linear var(--dur-medium);
visibility: hidden;
}
.qlc-drawer__backdrop:not([hidden]) {
opacity: 1;
visibility: visible;
transition:
opacity var(--dur-medium) var(--ease-standard),
visibility 0s linear 0s;
}
/* --- Estructura interna --------------------------------------------------- */
.qlc-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-block-end: 1px solid var(--color-border);
}
.qlc-drawer__title {
margin: 0;
font-size: var(--fs-400);
font-weight: var(--fw-semibold);
color: var(--color-fg);
}
.qlc-drawer__close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.qlc-drawer__close:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
}
.qlc-drawer__body {
flex: 1 1 auto;
padding: var(--space-5);
overflow-y: auto;
}
.qlc-drawer__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-block-start: 1px solid var(--color-border);
background: var(--color-bg-subtle);
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-drawer--sm[data-side="left"],
.qlc-drawer--sm[data-side="right"] { inline-size: min(16rem, 100vw); }
.qlc-drawer--lg[data-side="left"],
.qlc-drawer--lg[data-side="right"] { inline-size: min(28rem, 100vw); }
.qlc-drawer--xl[data-side="left"],
.qlc-drawer--xl[data-side="right"] { inline-size: min(40rem, 100vw); }
@media (max-width: 36rem) {
.qlc-drawer[data-side="left"],
.qlc-drawer[data-side="right"] {
inline-size: 100vw;
}
}
/* Mobile crítico: ningún drawer queda con ancho residual */
@media (max-width: 22.5rem) {
.qlc-drawer,
.qlc-drawer[data-side="left"],
.qlc-drawer[data-side="right"],
.qlc-drawer--sm[data-side="left"],
.qlc-drawer--sm[data-side="right"],
.qlc-drawer--lg[data-side="left"],
.qlc-drawer--lg[data-side="right"],
.qlc-drawer--xl[data-side="left"],
.qlc-drawer--xl[data-side="right"] {
inline-size: 100vw;
max-inline-size: 100vw;
}
}
@media (prefers-reduced-motion: reduce) {
.qlc-drawer,
.qlc-drawer__backdrop {
transition: opacity var(--dur-fast) linear, visibility 0s linear;
transform: none !important;
}
}
/* ============================================================================
* components/toast.css · qlc-toaster + qlc-toast
* Stacking toasts con placement configurable y entry/leave transitions.
* ============================================================================ */
.qlc-toaster {
position: fixed;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
pointer-events: none;
inline-size: min(24rem, calc(100vw - var(--space-8)));
max-block-size: 100vh;
overflow: visible;
}
.qlc-toaster > * {
pointer-events: auto;
}
/* --- Placements ----------------------------------------------------------- */
.qlc-toaster[placement="top-right"] { inset-block-start: 0; inset-inline-end: 0; align-items: flex-end; }
.qlc-toaster[placement="top-left"] { inset-block-start: 0; inset-inline-start: 0; align-items: flex-start; }
.qlc-toaster[placement="bottom-right"] { inset-block-end: 0; inset-inline-end: 0; align-items: flex-end; flex-direction: column-reverse; }
.qlc-toaster[placement="bottom-left"] { inset-block-end: 0; inset-inline-start: 0; align-items: flex-start; flex-direction: column-reverse; }
.qlc-toaster[placement="top-center"] {
inset-block-start: 0;
inset-inline: 0;
margin-inline: auto;
align-items: center;
}
.qlc-toaster[placement="bottom-center"] {
inset-block-end: 0;
inset-inline: 0;
margin-inline: auto;
align-items: center;
flex-direction: column-reverse;
}
/* --- Toast individual ----------------------------------------------------- */
.qlc-toast {
--_qlc-toast-bg: var(--color-surface-raised);
--_qlc-toast-fg: var(--color-fg);
--_qlc-toast-accent: var(--color-fg-muted);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: flex-start;
gap: var(--space-3);
inline-size: 100%;
padding: var(--space-3) var(--space-4);
background: var(--_qlc-toast-bg);
color: var(--_qlc-toast-fg);
border: 1px solid var(--color-border);
border-inline-start: 3px solid var(--_qlc-toast-accent);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--fs-200);
line-height: var(--lh-normal);
/* Entry */
opacity: 0;
transform: translateY(-8px);
animation: qlc-toast-in var(--dur-medium) var(--ease-decelerated) forwards;
}
.qlc-toaster[placement^="bottom"] .qlc-toast {
transform: translateY(8px);
}
.qlc-toast::before {
/* placeholder for icon area when no icon present */
content: "";
display: none;
}
.qlc-toast[data-state="leaving"] {
animation: qlc-toast-out var(--dur-medium) var(--ease-accelerated) forwards;
}
.qlc-toast__icon {
flex-shrink: 0;
color: var(--_qlc-toast-accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-block-start: 0.1em;
}
.qlc-toast__body {
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: var(--space-0-5);
}
.qlc-toast__title {
font-weight: var(--fw-semibold);
color: var(--_qlc-toast-fg);
}
.qlc-toast__message {
color: var(--color-fg-muted);
font-size: var(--fs-100);
}
.qlc-toast__close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.5rem;
block-size: 1.5rem;
margin: -0.125rem;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-fg-muted);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-toast__close:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
/* --- Levels --------------------------------------------------------------- */
.qlc-toast[data-level="info"] { --_qlc-toast-accent: var(--color-info); }
.qlc-toast[data-level="success"] { --_qlc-toast-accent: var(--color-success); }
.qlc-toast[data-level="warning"] { --_qlc-toast-accent: var(--color-warning); }
.qlc-toast[data-level="danger"] { --_qlc-toast-accent: var(--color-danger); }
/* --- Animations ----------------------------------------------------------- */
@keyframes qlc-toast-in {
from {
opacity: 0;
transform: translateY(var(--_qlc-toast-enter-y, -8px)) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes qlc-toast-out {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
}
@media (prefers-reduced-motion: reduce) {
.qlc-toast,
.qlc-toast[data-state="leaving"] {
animation: none;
opacity: 1;
transform: none;
transition: opacity var(--dur-fast) linear;
}
.qlc-toast[data-motion="reduced"][data-state="leaving"] {
opacity: 0;
}
}
/* ============================================================================
* components/chat.css · qlc-chat
* FAB flotante + panel de chat para el asistente público del home.
* ============================================================================ */
.qlc-chat {
position: fixed;
inset-block-end: var(--space-5, 1.25rem);
inset-inline-end: var(--space-5, 1.25rem);
z-index: var(--z-toast, 9000);
display: block;
font-family: inherit;
}
/* --- FAB -------------------------------------------------------------- */
.qlc-chat__fab {
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: 999px;
border: 0;
background: var(--color-accent, #0a5f70);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.35);
transition: transform var(--dur-fast, 0.15s) var(--ease-standard, ease),
box-shadow var(--dur-fast, 0.15s) var(--ease-standard, ease);
}
.qlc-chat__fab:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.45);
}
.qlc-chat__fab:focus-visible {
outline: 2px solid var(--color-accent, #0a5f70);
outline-offset: 3px;
}
.qlc-chat__fab-icon {
inline-size: 1.5rem;
block-size: 1.5rem;
}
.qlc-chat--open .qlc-chat__fab {
transform: scale(0.9);
opacity: 0.85;
}
/* --- Panel ------------------------------------------------------------ */
.qlc-chat__panel {
position: absolute;
inset-block-end: calc(100% + var(--space-3, 0.75rem));
inset-inline-end: 0;
inline-size: min(22rem, calc(100vw - 2rem));
max-block-size: min(32rem, calc(100vh - 6rem));
background: var(--color-surface-raised, #fff);
color: var(--color-fg, #111);
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-lg, 0.75rem);
box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
animation: qlc-chat-in var(--dur-medium, 0.22s) var(--ease-decelerated, ease-out);
}
[data-theme="dark"] .qlc-chat__panel {
background: #1a1d21;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6);
}
@keyframes qlc-chat-in {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- Header ----------------------------------------------------------- */
.qlc-chat__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2, 0.5rem);
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
background: var(--color-accent, #0a5f70);
color: white;
}
.qlc-chat__close {
border: 0;
background: transparent;
color: white;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 50%;
opacity: 0.8;
}
.qlc-chat__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
/* --- Body ------------------------------------------------------------- */
.qlc-chat__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--space-3, 0.75rem);
display: flex;
flex-direction: column;
gap: var(--space-2, 0.5rem);
background: var(--color-bg, #fafafa);
}
[data-theme="dark"] .qlc-chat__body { background: #151719; }
.qlc-chat__msg {
display: flex;
max-inline-size: 90%;
}
.qlc-chat__msg--user {
align-self: flex-end;
justify-content: flex-end;
}
.qlc-chat__msg--assistant { align-self: flex-start; }
.qlc-chat__bubble {
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.45;
white-space: pre-wrap;
word-wrap: break-word;
}
.qlc-chat__msg--user .qlc-chat__bubble {
background: var(--color-accent, #0a5f70);
color: white;
border-bottom-right-radius: 0.25rem;
}
.qlc-chat__msg--assistant .qlc-chat__bubble {
background: var(--color-surface-raised, #fff);
color: var(--color-fg, #111);
border: 1px solid var(--color-border, #e5e7eb);
border-bottom-left-radius: 0.25rem;
}
[data-theme="dark"] .qlc-chat__msg--assistant .qlc-chat__bubble {
background: #232629;
border-color: rgba(255, 255, 255, 0.08);
color: #e5e7eb;
}
.qlc-chat__bubble a {
color: inherit;
text-decoration: underline;
}
/* --- Markdown render dentro del bubble (respuestas del asistente) --- */
.qlc-chat__bubble p {
margin: 0 0 0.5rem 0;
}
.qlc-chat__bubble p:last-child { margin-bottom: 0; }
.qlc-chat__bubble h3,
.qlc-chat__bubble h4,
.qlc-chat__bubble h5,
.qlc-chat__bubble h6 {
margin: 0.4rem 0 0.25rem 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
}
.qlc-chat__bubble ul,
.qlc-chat__bubble ol {
margin: 0.25rem 0 0.5rem 0;
padding-inline-start: 1.25rem;
}
.qlc-chat__bubble li {
margin-block-end: 0.15rem;
line-height: 1.45;
}
.qlc-chat__bubble code.qlc-chat__inline-code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
padding: 0.05rem 0.3rem;
border-radius: 0.25rem;
background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .qlc-chat__bubble code.qlc-chat__inline-code,
.qlc-chat__msg--user .qlc-chat__bubble code.qlc-chat__inline-code {
background: rgba(255, 255, 255, 0.14);
}
.qlc-chat__bubble pre.qlc-chat__code {
margin: 0.4rem 0;
padding: 0.5rem 0.65rem;
background: rgba(0, 0, 0, 0.08);
border-radius: 0.4rem;
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.45;
}
.qlc-chat__bubble pre.qlc-chat__code code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: inherit;
background: transparent;
padding: 0;
}
[data-theme="dark"] .qlc-chat__bubble pre.qlc-chat__code,
.qlc-chat__msg--user .qlc-chat__bubble pre.qlc-chat__code {
background: rgba(255, 255, 255, 0.12);
}
/* Typing dots */
.qlc-chat__msg--typing .qlc-chat__bubble {
display: inline-flex;
gap: 3px;
align-items: center;
padding: 0.6rem 0.9rem;
}
.qlc-chat__dot {
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
animation: qlc-chat-pulse 1.2s infinite ease-in-out both;
}
.qlc-chat__dot:nth-child(2) { animation-delay: 0.2s; }
.qlc-chat__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes qlc-chat-pulse {
0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
40% { opacity: 1; transform: scale(1.3); }
}
/* --- Form ------------------------------------------------------------- */
.qlc-chat__form {
display: flex;
gap: var(--space-2, 0.5rem);
align-items: flex-end;
padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
border-top: 1px solid var(--color-border, #e5e7eb);
background: var(--color-surface-raised, #fff);
}
[data-theme="dark"] .qlc-chat__form {
background: #1a1d21;
border-top-color: rgba(255, 255, 255, 0.08);
}
.qlc-chat__input {
flex: 1 1 auto;
min-inline-size: 0;
resize: none;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font: inherit;
font-size: 0.875rem;
color: inherit;
background: var(--color-bg, #fff);
line-height: 1.4;
max-block-size: 120px;
}
[data-theme="dark"] .qlc-chat__input {
background: #232629;
color: #e5e7eb;
border-color: rgba(255, 255, 255, 0.12);
}
.qlc-chat__input:focus-visible {
outline: 2px solid var(--color-accent, #0a5f70);
outline-offset: -1px;
border-color: var(--color-accent, #0a5f70);
}
.qlc-chat__send {
flex: 0 0 auto;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: 0.5rem;
border: 0;
background: var(--color-accent, #0a5f70);
color: white;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.qlc-chat__send:hover { filter: brightness(1.08); }
.qlc-chat__send:disabled { opacity: 0.5; cursor: not-allowed; }
/* --- Motion reducido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.qlc-chat__panel { animation: none; }
.qlc-chat__dot { animation: none; opacity: 0.6; }
.qlc-chat__fab { transition: none; }
}
/* ============================================================================
* components/tooltip.css · qlc-tooltip
* Popover compacto. Usa CSS anchor positioning si está disponible (fallback JS).
* ============================================================================ */
.qlc-tooltip {
position: absolute;
z-index: var(--z-tooltip);
max-inline-size: 16rem;
padding: var(--space-1-5) var(--space-2-5, var(--space-2));
background: var(--neutral-900);
color: var(--neutral-50);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
box-shadow: var(--shadow-md);
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition:
opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
[data-theme="dark"] .qlc-tooltip {
background: var(--neutral-100);
color: var(--neutral-950);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .qlc-tooltip,
:root[data-theme="system"] .qlc-tooltip {
background: var(--neutral-100);
color: var(--neutral-950);
}
}
.qlc-tooltip[data-state="open"],
.qlc-tooltip:not([hidden]) {
opacity: 1;
transform: translateY(0);
}
/* Arrow opcional via pseudo */
.qlc-tooltip[data-arrow]::after {
content: "";
position: absolute;
inline-size: 0.5rem;
block-size: 0.5rem;
background: inherit;
transform: rotate(45deg);
}
.qlc-tooltip[data-placement^="top"][data-arrow]::after {
inset-block-end: -0.125rem;
inset-inline-start: 50%;
margin-inline-start: -0.25rem;
}
.qlc-tooltip[data-placement^="bottom"][data-arrow]::after {
inset-block-start: -0.125rem;
inset-inline-start: 50%;
margin-inline-start: -0.25rem;
}
.qlc-tooltip[data-placement^="left"][data-arrow]::after {
inset-inline-end: -0.125rem;
inset-block-start: 50%;
margin-block-start: -0.25rem;
}
.qlc-tooltip[data-placement^="right"][data-arrow]::after {
inset-inline-start: -0.125rem;
inset-block-start: 50%;
margin-block-start: -0.25rem;
}
@media (prefers-reduced-motion: reduce) {
.qlc-tooltip {
transition: opacity var(--dur-fast) linear;
transform: none !important;
}
}
/* ============================================================================
* components/popover.css · qlc-popover
* Floating panel para menús, formularios inline, info rica.
* ============================================================================ */
.qlc-popover {
position: absolute;
z-index: var(--z-popover);
inline-size: max-content;
max-inline-size: min(22rem, calc(100vw - var(--space-8)));
padding: var(--space-3);
background: var(--color-surface-raised);
color: var(--color-fg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--fs-200);
line-height: var(--lh-normal);
opacity: 0;
transform: translateY(4px) scale(0.98);
transform-origin: top center;
transition:
opacity var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
.qlc-popover[data-state="open"],
.qlc-popover:not([hidden]) {
opacity: 1;
transform: translateY(0) scale(1);
}
.qlc-popover__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-block-end: var(--space-2);
padding-block-end: var(--space-2);
border-block-end: 1px solid var(--color-border);
}
.qlc-popover__title {
margin: 0;
font-size: var(--fs-200);
font-weight: var(--fw-semibold);
color: var(--color-fg);
}
.qlc-popover__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.qlc-popover__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-block-start: var(--space-3);
padding-block-start: var(--space-2);
border-block-start: 1px solid var(--color-border);
}
/* Native popover API (popover attribute) */
[popover].qlc-popover {
margin: 0;
border: 1px solid var(--color-border);
}
[popover].qlc-popover::backdrop {
background: transparent;
}
@media (prefers-reduced-motion: reduce) {
.qlc-popover {
transition: opacity var(--dur-fast) linear;
transform: none !important;
}
}
/* DS-08 · Navegación */
/* ============================================================================
* components/nav.css · QueLicitar · Topbar + Footer + Sidebar
* Layout horizontal desktop + responsive mobile drawer.
* ============================================================================ */
/* --- Topbar (público y app) ---------------------------------------------- */
.qlc-topbar {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: color-mix(in oklch, var(--color-bg) 85%, transparent);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--color-border);
}
.qlc-topbar__inner {
display: flex;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-3);
padding-inline: var(--space-4);
max-inline-size: var(--container-max, 80rem);
margin-inline: auto;
}
.qlc-topbar--public .qlc-topbar__inner { max-inline-size: 80rem; }
.qlc-topbar--app .qlc-topbar__inner { max-inline-size: 100%; padding-inline: var(--space-6); }
.qlc-topbar__brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: inherit;
flex: 0 0 auto;
}
.qlc-topbar__logo {
display: block;
block-size: auto;
inline-size: auto;
max-block-size: 2.25rem;
}
/* Logo switching: mostrar el light en modo light, dark en modo dark.
Fallback: si solo se sirvió el logo light (templates externos), en dark
aplicamos un filter que lo convierte a silueta blanca legible. */
.qlc-topbar__logo--dark { display: none; }
[data-theme="dark"] .qlc-topbar__logo--light { display: none; }
[data-theme="dark"] .qlc-topbar__logo--dark { display: block; }
[data-theme="dark"] .qlc-topbar__logo:not(.qlc-topbar__logo--dark):not(.qlc-topbar__logo--light) {
filter: brightness(0) invert(1);
}
.qlc-topbar__nav {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.qlc-topbar__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--space-5);
align-items: center;
}
.qlc-topbar__links a {
color: var(--color-fg-muted);
text-decoration: none;
font-weight: var(--fw-medium);
font-size: var(--fs-200);
padding-block: var(--space-2);
transition: color var(--dur-fast) var(--ease-standard);
}
.qlc-topbar__links a:focus-visible {
color: var(--color-fg);
}
@media (hover: hover) and (pointer: fine) {
.qlc-topbar__links a:hover {
color: var(--color-fg);
}
}
.qlc-topbar__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.qlc-topbar__menu-btn {
display: none;
background: none;
border: 0;
padding: var(--space-2);
color: var(--color-fg);
cursor: pointer;
border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
.qlc-topbar__menu-btn:hover { background: var(--color-bg-subtle); }
}
.qlc-topbar__search {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-fg-muted);
cursor: pointer;
font-size: var(--fs-200);
min-inline-size: 14rem;
}
@media (hover: hover) and (pointer: fine) {
.qlc-topbar__search:hover { border-color: var(--color-border-strong); }
}
.qlc-topbar__search-placeholder { flex: 1; text-align: start; }
.qlc-topbar__notifications {
position: relative;
background: none;
border: 0;
padding: var(--space-2);
color: var(--color-fg-muted);
cursor: pointer;
border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
.qlc-topbar__notifications:hover { color: var(--color-fg); background: var(--color-bg-subtle); }
}
.qlc-topbar__badge {
position: absolute;
inset-block-start: 2px;
inset-inline-end: 2px;
min-inline-size: 1rem;
padding: 0 0.25rem;
border-radius: var(--radius-pill);
background: var(--color-accent-2);
color: var(--color-accent-2-fg);
font-size: 0.6875rem;
font-weight: var(--fw-bold);
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 56rem) {
.qlc-topbar__nav { display: none; }
.qlc-topbar__menu-btn { display: inline-flex; }
.qlc-topbar__search { display: none; }
.qlc-topbar__links-auth-only { display: none; }
}
/* --- Footer público ------------------------------------------------------ */
.qlc-footer--public {
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
padding-block: var(--space-12) var(--space-8);
}
.qlc-footer__inner {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
max-inline-size: 80rem;
margin-inline: auto;
padding-inline: var(--space-4);
}
.qlc-footer__brand-col { grid-column: span 1; }
.qlc-footer__logo { max-block-size: 2.5rem; block-size: auto; inline-size: auto; display: block; }
.qlc-footer__logo--dark { display: none; }
[data-theme="dark"] .qlc-footer__logo--light { display: none; }
[data-theme="dark"] .qlc-footer__logo--dark { display: block; }
[data-theme="dark"] .qlc-footer__logo:not(.qlc-footer__logo--dark):not(.qlc-footer__logo--light) {
filter: brightness(0) invert(1);
}
/* --- Créditos (Desarrollado con ♥ por aGo lab | con tecnología NUBIQ) ---- */
.qlc-footer__credits {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-4);
margin-block-start: var(--space-6);
border-top: 1px solid var(--color-border);
font-size: var(--fs-100);
color: var(--color-fg-muted);
text-align: center;
}
.qlc-footer__credits-made,
.qlc-footer__credits-tech {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.qlc-footer__credits-heart {
color: #e11d48;
font-size: 0.95em;
line-height: 1;
animation: qlc-credits-pulse 1.6s ease-in-out infinite;
}
@keyframes qlc-credits-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
.qlc-footer__credits-heart { animation: none; }
}
.qlc-footer__credits-sep {
opacity: 0.4;
font-weight: var(--fw-light);
user-select: none;
}
.qlc-footer__credits-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none;
color: inherit;
transition: opacity var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.qlc-footer__credits-link:hover {
opacity: 0.75;
}
}
.qlc-footer__credits-link img {
block-size: 1.25rem;
inline-size: auto;
display: block;
}
.qlc-footer__credits-link--nubiq img {
block-size: 1.1rem;
}
.qlc-footer__credits-ago-wordmark,
.qlc-footer__credits-nubiq-wordmark {
font-family: "Space Grotesk", system-ui, sans-serif;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-fg);
}
[data-theme="dark"] .qlc-footer__credits-ago-wordmark,
[data-theme="dark"] .qlc-footer__credits-nubiq-wordmark {
color: var(--color-fg);
}
.qlc-footer__tagline {
color: var(--color-fg-muted);
margin-block-start: var(--space-3);
font-size: var(--fs-200);
}
.qlc-footer__copy {
margin-block-start: var(--space-4);
color: var(--color-fg-subtle);
}
.qlc-footer__heading {
font-family: var(--font-display);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: var(--fw-semibold);
color: var(--color-fg-subtle);
margin-block-end: var(--space-3);
}
.qlc-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.qlc-footer__col a {
color: var(--color-fg-muted);
text-decoration: none;
font-size: var(--fs-200);
}
@media (hover: hover) and (pointer: fine) {
.qlc-footer__col a:hover { color: var(--color-accent); text-decoration: underline; }
}
.qlc-footer__newsletter-hint { color: var(--color-fg-muted); font-size: var(--fs-100); margin-block-end: var(--space-3); }
.qlc-footer__newsletter-form { display: flex; flex-direction: column; gap: var(--space-2); }
/* --- Footer app ---------------------------------------------------------- */
.qlc-footer--app {
border-top: 1px solid var(--color-border);
padding-block: var(--space-4);
color: var(--color-fg-subtle);
font-size: var(--fs-100);
}
.qlc-footer--app .qlc-footer__inner {
display: flex;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
grid-template-columns: none;
}
.qlc-footer--app a { color: var(--color-fg-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
.qlc-footer--app a:hover { color: var(--color-accent); }
}
/* --- Sidebar app --------------------------------------------------------- */
.qlc-sidebar-app {
inline-size: 15rem;
border-inline-end: 1px solid var(--color-border);
padding-block: var(--space-4);
padding-inline: var(--space-3);
background: var(--color-bg);
position: sticky;
inset-block-start: 3.5rem;
max-block-size: calc(100vh - 3.5rem);
overflow-y: auto;
}
.qlc-sidebar-app__group + .qlc-sidebar-app__group { margin-block-start: var(--space-5); }
.qlc-sidebar-app__heading {
font-family: var(--font-display);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-fg-subtle);
margin-block-end: var(--space-2);
padding-inline: var(--space-3);
}
.qlc-sidebar-app__list { list-style: none; padding: 0; margin: 0; }
.qlc-sidebar-app__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
color: var(--color-fg-muted);
text-decoration: none;
border-radius: var(--radius-sm);
font-size: var(--fs-200);
transition: background var(--dur-fast), color var(--dur-fast);
}
.qlc-sidebar-app__link:focus-visible {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
@media (hover: hover) and (pointer: fine) {
.qlc-sidebar-app__link:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
}
.qlc-sidebar-app__link[aria-current="page"] {
background: var(--color-accent-subtle);
color: var(--color-accent);
font-weight: var(--fw-semibold);
}
/* --- App layout ---------------------------------------------------------- */
.qlc-app-layout {
display: flex;
align-items: flex-start;
gap: 0;
min-block-size: calc(100vh - 3.5rem);
}
.qlc-app-layout__main {
flex: 1 1 auto;
min-inline-size: 0;
padding-block: var(--space-6);
padding-inline: var(--space-6);
}
@media (max-width: 56rem) {
.qlc-sidebar-app { display: none; }
.qlc-app-layout__main { padding-inline: var(--space-4); }
}
/* --- Page header --------------------------------------------------------- */
.qlc-page-header {
margin-block-end: var(--space-6);
padding-block-end: var(--space-5);
border-block-end: 1px solid var(--color-border);
}
.qlc-page-header__title {
font-size: var(--fs-700);
margin: 0;
}
.qlc-page-header__sub {
color: var(--color-fg-muted);
margin-block-start: var(--space-2);
max-inline-size: 60ch;
}
/* --- Skip link ----------------------------------------------------------- */
.qlc-skip {
position: absolute;
inset-block-start: -100px;
inset-inline-start: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--color-accent);
color: var(--color-accent-fg);
text-decoration: none;
border-radius: var(--radius-sm);
z-index: var(--z-toast);
transition: inset-block-start var(--dur-fast);
}
.qlc-skip:focus-visible {
inset-block-start: var(--space-3);
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* ============================================================================
* components/tabs.css · qlc-tabs / qlc-tab / qlc-tab-panel
* El WC asigna role="tablist" al , role="tab" a hijos qlc-tab y
* role="tabpanel" a qlc-tab-panel. Estilo: underline horizontal acento.
* ============================================================================ */
/* Tira de tabs (tablist) en horizontal: layout flex con border-bottom */
.qlc-tabs[role="tablist"] {
display: flex;
flex-wrap: wrap;
align-items: stretch;
border-block-end: 1px solid var(--color-border);
gap: 0;
min-inline-size: 0;
}
/* Los panels son hijos directos: ocupan toda la fila y van debajo */
.qlc-tabs[role="tablist"] > .qlc-tab-panel,
.qlc-tabs[role="tablist"] > qlc-tab-panel {
flex-basis: 100%;
margin-block-start: var(--space-4);
}
/* --- Tab button ----------------------------------------------------------- */
.qlc-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-inline: var(--space-3);
padding-block: var(--space-2);
border: 0;
background: transparent;
color: var(--color-fg-muted);
font-family: var(--font-sans);
font-size: var(--fs-200);
font-weight: var(--fw-medium);
line-height: var(--lh-snug);
cursor: pointer;
white-space: nowrap;
position: relative;
border-block-end: 2px solid transparent;
margin-block-end: -1px;
transition:
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.qlc-tab:hover:not([disabled]) {
color: var(--color-fg);
background: var(--color-bg-subtle);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
}
.qlc-tab:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
border-radius: var(--radius-sm);
}
.qlc-tab[active],
.qlc-tab[aria-selected="true"] {
color: var(--color-accent);
border-block-end-color: var(--color-accent);
}
.qlc-tab[disabled],
.qlc-tab[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
/* --- Vertical orientation ------------------------------------------------- */
.qlc-tabs[orientation="vertical"][role="tablist"] {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-6);
border-block-end: 0;
align-items: start;
}
.qlc-tabs[orientation="vertical"] > .qlc-tab,
.qlc-tabs[orientation="vertical"] > qlc-tab {
border-block-end: 0;
border-inline-end: 2px solid transparent;
margin-block-end: 0;
margin-inline-end: -1px;
justify-content: flex-start;
text-align: start;
padding-inline: var(--space-3);
padding-block: var(--space-2);
}
.qlc-tabs[orientation="vertical"] > .qlc-tab[active],
.qlc-tabs[orientation="vertical"] > .qlc-tab[aria-selected="true"],
.qlc-tabs[orientation="vertical"] > qlc-tab[active],
.qlc-tabs[orientation="vertical"] > qlc-tab[aria-selected="true"] {
border-inline-end-color: var(--color-accent);
background: var(--color-accent-subtle);
}
.qlc-tabs[orientation="vertical"] > .qlc-tab-panel,
.qlc-tabs[orientation="vertical"] > qlc-tab-panel {
border-inline-start: 1px solid var(--color-border);
padding-inline-start: var(--space-6);
margin-block-start: 0;
}
/* --- Tab panel ------------------------------------------------------------ */
.qlc-tab-panel {
display: block;
padding-block-start: var(--space-2);
color: var(--color-fg);
font-size: var(--fs-200);
line-height: var(--lh-normal);
animation: qlc-tab-panel-fade var(--dur-medium) var(--ease-decelerated);
}
.qlc-tab-panel[hidden] {
display: none !important;
}
@keyframes qlc-tab-panel-fade {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.qlc-tab-panel { animation: none; }
}
/* --- Mobile: stack vertical full-width ----------------------------------- */
@media (max-width: 48rem) {
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) {
flex-direction: column;
align-items: stretch;
border-block-end: 0;
gap: var(--space-1);
}
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > .qlc-tab,
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > qlc-tab {
inline-size: 100%;
justify-content: flex-start;
border-block-end: 0;
border-inline-start: 2px solid transparent;
margin-block-end: 0;
padding-block: var(--space-3);
border-radius: var(--radius-sm);
}
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > .qlc-tab[active],
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > .qlc-tab[aria-selected="true"],
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > qlc-tab[active],
.qlc-tabs[role="tablist"]:not([orientation="vertical"]):not(.qlc-tabs--pills) > qlc-tab[aria-selected="true"] {
border-block-end-color: transparent;
border-inline-start-color: var(--color-accent);
background: var(--color-accent-subtle);
}
}
/* --- Modifier: pills ------------------------------------------------------ */
.qlc-tabs--pills[role="tablist"] {
border-block-end: 0;
gap: var(--space-1);
background: var(--color-bg-subtle);
padding: var(--space-1);
border-radius: var(--radius-md);
inline-size: max-content;
max-inline-size: 100%;
}
.qlc-tabs--pills > .qlc-tab,
.qlc-tabs--pills > qlc-tab {
border-block-end: 0;
margin-block-end: 0;
border-radius: var(--radius-sm);
padding-inline: var(--space-3);
}
.qlc-tabs--pills > .qlc-tab[active],
.qlc-tabs--pills > .qlc-tab[aria-selected="true"],
.qlc-tabs--pills > qlc-tab[active],
.qlc-tabs--pills > qlc-tab[aria-selected="true"] {
background: var(--color-surface);
color: var(--color-fg);
box-shadow: var(--shadow-xs);
}
/* ============================================================================
* components/accordion.css · qlc-disclosure (WC) + native /
* Disclosure pattern accesible.
* ============================================================================ */
qlc-disclosure,
.qlc-disclosure {
display: block;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
qlc-disclosure + qlc-disclosure,
.qlc-disclosure + .qlc-disclosure {
margin-block-start: var(--space-2);
}
.qlc-disclosure > details > summary,
qlc-disclosure > details > summary,
.qlc-disclosure__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
list-style: none;
cursor: pointer;
user-select: none;
font-family: var(--font-sans);
font-size: var(--fs-200);
font-weight: var(--fw-medium);
color: var(--color-fg);
transition: background-color var(--dur-fast) var(--ease-standard);
}
.qlc-disclosure > details > summary::-webkit-details-marker,
qlc-disclosure > details > summary::-webkit-details-marker {
display: none;
}
.qlc-disclosure > details > summary::marker,
qlc-disclosure > details > summary::marker {
content: "";
}
.qlc-disclosure > details > summary:hover,
qlc-disclosure > details > summary:hover {
background: var(--color-bg-subtle);
}
.qlc-disclosure > details > summary:focus-visible,
qlc-disclosure > details > summary:focus-visible {
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: inset 0 0 0 2px var(--color-accent);
}
.qlc-disclosure__icon {
flex-shrink: 0;
color: var(--color-fg-muted);
transition: transform var(--dur-medium) var(--ease-emphasized);
}
.qlc-disclosure > details[open] > summary .qlc-disclosure__icon,
qlc-disclosure > details[open] > summary .qlc-disclosure__icon {
transform: rotate(180deg);
}
.qlc-disclosure__body {
padding: var(--space-3) var(--space-4) var(--space-4);
color: var(--color-fg);
font-size: var(--fs-200);
line-height: var(--lh-relaxed);
border-block-start: 1px solid var(--color-border);
animation: qlc-disclosure-open var(--dur-medium) var(--ease-decelerated);
}
@keyframes qlc-disclosure-open {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.qlc-disclosure__icon { transition: none; }
.qlc-disclosure__body { animation: none; }
}
/* --- Variant flush (sin border externo, separado por dividers) ------------ */
.qlc-disclosure--flush {
border: 0;
border-radius: 0;
border-block-end: 1px solid var(--color-border);
background: transparent;
}
.qlc-disclosure--flush + .qlc-disclosure--flush {
margin-block-start: 0;
}
.qlc-disclosure--flush .qlc-disclosure__body {
padding-inline: 0;
}
.qlc-disclosure--flush > details > summary,
qlc-disclosure.qlc-disclosure--flush > details > summary {
padding-inline: 0;
}
/* ============================================================================
* components/breadcrumb.css · qlc-breadcrumb
* Lista horizontal con separadores. Último elemento sin link, fg-muted.
* ============================================================================ */
.qlc-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
padding: 0;
margin: 0;
list-style: none;
font-family: var(--font-sans);
font-size: var(--fs-100);
color: var(--color-fg-muted);
line-height: var(--lh-snug);
}
.qlc-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-inline-size: 0;
}
.qlc-breadcrumb__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-1);
padding-block: var(--space-0-5);
border-radius: var(--radius-xs);
color: var(--color-fg-muted);
text-decoration: none;
transition:
color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
max-inline-size: 18ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qlc-breadcrumb__link:hover {
color: var(--color-fg);
background: var(--color-bg-subtle);
}
.qlc-breadcrumb__separator {
display: inline-flex;
align-items: center;
color: var(--color-fg-subtle);
flex-shrink: 0;
user-select: none;
}
.qlc-breadcrumb__item[aria-current="page"],
.qlc-breadcrumb__item:last-child {
color: var(--color-fg);
font-weight: var(--fw-medium);
}
.qlc-breadcrumb__item:last-child .qlc-breadcrumb__separator {
display: none;
}
/* Truncate inteligente: oculta intermedios en pantallas pequeñas */
@media (max-width: 36rem) {
.qlc-breadcrumb__item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
display: none;
}
}
/* ============================================================================
* components/pagination.css · qlc-pagination
* Cluster de items numerados + prev/next + ellipsis.
* ============================================================================ */
.qlc-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
padding: 0;
margin: 0;
list-style: none;
font-family: var(--font-sans);
font-size: var(--fs-200);
}
.qlc-pagination__item {
display: inline-flex;
}
.qlc-pagination__link,
.qlc-pagination__current,
.qlc-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 2.25rem;
block-size: 2.25rem;
padding-inline: var(--space-2);
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-fg-muted);
text-decoration: none;
font-weight: var(--fw-medium);
transition:
background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.qlc-pagination__link:hover {
background: var(--color-bg-subtle);
color: var(--color-fg);
border-color: var(--color-border);
}
.qlc-pagination__link:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--shadow-ring);
}
.qlc-pagination__current,
.qlc-pagination__link[aria-current="page"] {
background: var(--color-accent);
color: var(--color-accent-fg);
border-color: var(--color-accent);
cursor: default;
}
.qlc-pagination__ellipsis {
cursor: default;
color: var(--color-fg-subtle);
}
.qlc-pagination__nav {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-3);
}
.qlc-pagination__nav[aria-disabled="true"],
.qlc-pagination__item--disabled .qlc-pagination__link {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* --- Compact --------------------------------------------------------------- */
.qlc-pagination--compact .qlc-pagination__link,
.qlc-pagination--compact .qlc-pagination__current {
min-inline-size: 2rem;
block-size: 2rem;
font-size: var(--fs-100);
}
/* ============================================================================
* components/menu.css · qlc-menu
* Dropdown menu (action menus, user menu). Usado dentro de qlc-popover.
* ============================================================================ */
.qlc-menu {
display: flex;
flex-direction: column;
gap: var(--space-0-5);
padding: var(--space-1);
margin: 0;
list-style: none;
min-inline-size: 12rem;
font-family: var(--font-sans);
font-size: var(--fs-200);
color: var(--color-fg);
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
/* Si menu va dentro de un popover ya estilado, anulamos el chrome */
.qlc-popover .qlc-menu,
.qlc-menu--bare {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.qlc-menu__item {
display: block;
margin: 0;
}
.qlc-menu__link,
.qlc-menu__button {
display: flex;
align-items: center;
gap: var(--space-2);
inline-size: 100%;
padding: var(--space-2) var(--space-3);
border: 0;
background: transparent;
color: var(--color-fg);
font-family: inherit;
font-size: inherit;
line-height: var(--lh-snug);
text-align: start;
text-decoration: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.qlc-menu__link:hover,
.qlc-menu__button:hover,
.qlc-menu__link:focus-visible,
.qlc-menu__button:focus-visible {
background: var(--color-bg-subtle);
color: var(--color-fg);
}
.qlc-menu__link:focus-visible,
.qlc-menu__button:focus-visible {
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: inset 0 0 0 2px var(--color-accent);
}
.qlc-menu__icon {
flex-shrink: 0;
color: var(--color-fg-muted);
}
.qlc-menu__label {
flex: 1 1 auto;
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qlc-menu__shortcut {
flex-shrink: 0;
margin-inline-start: var(--space-4);
color: var(--color-fg-subtle);
}
.qlc-menu__separator {
block-size: 1px;
background: var(--color-border);
margin-block: var(--space-1);
border: 0;
}
.qlc-menu__group-label {
padding: var(--space-1) var(--space-3);
font-size: var(--fs-50);
font-weight: var(--fw-semibold);
color: var(--color-fg-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* Variant: danger item */
.qlc-menu__link--danger,
.qlc-menu__button--danger {
color: var(--color-danger);
}
.qlc-menu__link--danger:hover,
.qlc-menu__button--danger:hover {
background: var(--color-danger-subtle);
color: var(--color-danger);
}
/* Disabled */
.qlc-menu__link[aria-disabled="true"],
.qlc-menu__button:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
/* Estado activo (filtro/option seleccionada) */
.qlc-menu__link[aria-current="true"],
.qlc-menu__button[aria-pressed="true"] {
color: var(--color-accent);
background: var(--color-accent-subtle);
}
/* DS-09 · Datos */
/* ============================================================================
* components/table.css · qlc-table + qlc-table-wrapper
* Tabla responsive con scroll horizontal en mobile.
* ============================================================================ */
.qlc-table-wrapper {
display: block;
inline-size: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.qlc-table {
inline-size: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-200);
color: var(--color-fg);
line-height: var(--lh-snug);
}
.qlc-table thead {
background: var(--color-bg-subtle);
}
.qlc-table th {
padding: var(--space-3) var(--space-4);
text-align: start;
font-weight: var(--fw-semibold);
color: var(--color-fg-muted);
font-size: var(--fs-100);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
border-block-end: 1px solid var(--color-border);
white-space: nowrap;
vertical-align: middle;
}
.qlc-table td {
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--color-border);
vertical-align: middle;
color: var(--color-fg);
}
.qlc-table tbody tr:last-child td {
border-block-end: 0;
}
.qlc-table tbody tr {
transition: background-color var(--dur-fast) var(--ease-standard);
}
.qlc-table tbody tr:hover {
background: var(--color-bg-subtle);
}
.qlc-table tfoot td {
background: var(--color-bg-subtle);
font-weight: var(--fw-semibold);
border-block-start: 1px solid var(--color-border);
border-block-end: 0;
}
/* Numeric / right-align utility */
.qlc-table th[data-align="end"],
.qlc-table td[data-align="end"],
.qlc-table th--num,
.qlc-table td--num {
text-align: end;
font-variant-numeric: tabular-nums;
}
.qlc-table th[data-align="center"],
.qlc-table td[data-align="center"] {
text-align: center;
}
/* Sticky header */
.qlc-table--sticky thead th {
position: sticky;
inset-block-start: 0;
z-index: 1;
}
/* --- Modifiers ------------------------------------------------------------ */
.qlc-table--compact th,
.qlc-table--compact td {
padding: var(--space-2) var(--space-3);
}
.qlc-table--striped tbody tr:nth-child(even) {
background: var(--color-bg-subtle);
}
.qlc-table--striped tbody tr:nth-child(even):hover {
background: var(--color-bg-muted);
}
.qlc-table--bordered th,
.qlc-table--bordered td {
border-inline-end: 1px solid var(--color-border);
}
.qlc-table--bordered th:last-child,
.qlc-table--bordered td:last-child {
border-inline-end: 0;
}
/* Selectable rows */
.qlc-table tr[aria-selected="true"] {
background: var(--color-accent-subtle);
}
.qlc-table tr[aria-selected="true"]:hover {
background: color-mix(in oklch, var(--color-accent-subtle) 80%, var(--color-accent));
}
/* Caption */
.qlc-table caption {
caption-side: top;
text-align: start;
padding: var(--space-3) var(--space-4);
font-size: var(--fs-100);
font-weight: var(--fw-semibold);
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* ============================================================================
* components/list.css · qlc-list (ul/ol)
* Variantes: --plain, --check, --divided.
* ============================================================================ */
.qlc-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-inline-start: var(--space-6);
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: var(--lh-relaxed);
color: var(--color-fg);
}
.qlc-list > li::marker {
color: var(--color-fg-subtle);
}
/* --- Plain ---------------------------------------------------------------- */
.qlc-list--plain {
list-style: none;
padding-inline-start: 0;
}
.qlc-list--plain > li::marker {
content: "";
}
/* --- Check (iconos check en lugar de bullets) ----------------------------- */
.qlc-list--check {
list-style: none;
padding-inline-start: 0;
}
.qlc-list--check > li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.qlc-list--check > li::before {
content: "";
flex-shrink: 0;
inline-size: 1.125rem;
block-size: 1.125rem;
margin-block-start: 0.15em;
background-color: var(--color-success);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* --- Divided (separadores horizontales) ----------------------------------- */
.qlc-list--divided {
list-style: none;
padding-inline-start: 0;
gap: 0;
}
.qlc-list--divided > li {
padding-block: var(--space-3);
border-block-end: 1px solid var(--color-border);
}
.qlc-list--divided > li:first-child { padding-block-start: 0; }
.qlc-list--divided > li:last-child { padding-block-end: 0; border-block-end: 0; }
/* --- Inline (cluster horizontal) ------------------------------------------ */
.qlc-list--inline {
list-style: none;
padding-inline-start: 0;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
/* --- Sized ---------------------------------------------------------------- */
.qlc-list--sm { font-size: var(--fs-100); gap: var(--space-1); }
.qlc-list--lg { font-size: var(--fs-300); gap: var(--space-3); }
/* ============================================================================
* components/stat.css · qlc-stat
* Card de métrica con label, value y delta opcional.
* ============================================================================ */
.qlc-stat {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
container-type: inline-size;
}
.qlc-stat__label {
font-family: var(--font-sans);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
color: var(--color-fg-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin: 0;
}
.qlc-stat__value {
font-family: var(--font-serif);
font-size: var(--fs-700);
font-weight: var(--fw-regular);
line-height: var(--lh-tight);
color: var(--color-fg);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
margin: 0;
}
.qlc-stat__unit {
font-family: var(--font-sans);
font-size: 0.5em;
font-weight: var(--fw-medium);
color: var(--color-fg-muted);
margin-inline-start: 0.25em;
vertical-align: baseline;
letter-spacing: var(--tracking-normal);
}
.qlc-stat__delta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
align-self: flex-start;
padding-inline: var(--space-2);
padding-block: var(--space-0-5);
margin-block-start: var(--space-2);
border-radius: var(--radius-pill);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
font-variant-numeric: tabular-nums;
background: var(--color-bg-muted);
color: var(--color-fg-muted);
}
.qlc-stat__delta--positive { background: var(--color-success-subtle); color: var(--color-success); }
.qlc-stat__delta--negative { background: var(--color-danger-subtle); color: var(--color-danger); }
.qlc-stat__delta--neutral { background: var(--color-bg-muted); color: var(--color-fg-muted); }
.qlc-stat__delta-icon {
flex-shrink: 0;
}
.qlc-stat__hint {
font-size: var(--fs-100);
color: var(--color-fg-subtle);
margin: 0;
}
/* Container query para reducir padding en stats pequeños */
@container (inline-size < 16rem) {
.qlc-stat {
padding: var(--space-3);
}
.qlc-stat__value {
font-size: var(--fs-600);
}
}
/* Variant: stat en línea (icono al lado) */
.qlc-stat--inline {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--space-3);
}
.qlc-stat__icon {
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: var(--radius-md);
background: var(--color-accent-subtle);
color: var(--color-accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================================
* components/score-ring.css · qlc-score-ring
* Anillo SVG progress + texto central. Base del futuro WC M4.
* El SVG espera viewBox="0 0 36 36" y dos circles (track + indicator).
* ============================================================================ */
.qlc-score-ring {
--_qlc-ring-size: 6rem;
--_qlc-ring-thickness: 3; /* SVG stroke-width */
--_qlc-ring-track: var(--color-bg-muted);
--_qlc-ring-indicator: var(--color-accent);
--_qlc-ring-value: 0; /* 0..100 */
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
inline-size: var(--_qlc-ring-size);
}
.qlc-score-ring__svg {
inline-size: 100%;
block-size: auto;
display: block;
transform: rotate(-90deg);
overflow: visible;
}
.qlc-score-ring__track {
fill: none;
stroke: var(--_qlc-ring-track);
stroke-width: var(--_qlc-ring-thickness);
}
.qlc-score-ring__indicator {
fill: none;
stroke: var(--_qlc-ring-indicator);
stroke-width: var(--_qlc-ring-thickness);
stroke-linecap: round;
stroke-dasharray: 100, 100;
stroke-dashoffset: calc(100 - var(--_qlc-ring-value));
transition: stroke-dashoffset var(--dur-slow) var(--ease-emphasized),
stroke var(--dur-fast) var(--ease-standard);
}
.qlc-score-ring__value {
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
transform: translateY(-65%);
text-align: center;
font-family: var(--font-serif);
font-size: calc(var(--_qlc-ring-size) * 0.32);
line-height: 1;
color: var(--color-fg);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-tight);
pointer-events: none;
}
.qlc-score-ring__label {
font-family: var(--font-sans);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
color: var(--color-fg-muted);
text-align: center;
margin: 0;
}
/* --- Sizes ---------------------------------------------------------------- */
.qlc-score-ring--sm { --_qlc-ring-size: 4rem; }
.qlc-score-ring--md { --_qlc-ring-size: 6rem; }
.qlc-score-ring--lg { --_qlc-ring-size: 8rem; }
.qlc-score-ring--xl { --_qlc-ring-size: 10rem; }
/* --- Score levels (color-coded) ------------------------------------------- */
.qlc-score-ring[data-level="low"] { --_qlc-ring-indicator: var(--color-danger); }
.qlc-score-ring[data-level="medium"] { --_qlc-ring-indicator: var(--color-warning); }
.qlc-score-ring[data-level="high"] { --_qlc-ring-indicator: var(--color-success); }
.qlc-score-ring[data-level="info"] { --_qlc-ring-indicator: var(--color-info); }
@media (prefers-reduced-motion: reduce) {
.qlc-score-ring__indicator { transition: none; }
}
/* ============================================================================
* components/progress.css · qlc-progress
* Barra lineal: