/* QuicklyCSS v2 | generated file | do not edit directly */
/* ===== src/css/foundation.css ===== */
/* ==========================================================================
QuicklyCSS v2 — foundation.css
Escala base modular 0–100px en rem (1px = 0.0625rem, 1rem = 16px)
========================================================================== */
:root {
/* ------------------------------------------------------------
Unidades base (0–100px en px para claridad)
------------------------------------------------------------ */
--q-units-0: 0px;
--q-units-1: 1px;
--q-units-2: 2px;
--q-units-3: 3px;
--q-units-4: 4px;
--q-units-5: 5px;
--q-units-6: 6px;
--q-units-7: 7px;
--q-units-8: 8px;
--q-units-9: 9px;
--q-units-10: 10px;
--q-units-11: 11px;
--q-units-12: 12px;
--q-units-13: 13px;
--q-units-14: 14px;
--q-units-15: 15px;
--q-units-16: 16px;
--q-units-17: 17px;
--q-units-18: 18px;
--q-units-19: 19px;
--q-units-20: 20px;
--q-units-21: 21px;
--q-units-22: 22px;
--q-units-23: 23px;
--q-units-24: 24px;
--q-units-25: 25px;
--q-units-26: 26px;
--q-units-27: 27px;
--q-units-28: 28px;
--q-units-29: 29px;
--q-units-30: 30px;
--q-units-31: 31px;
--q-units-32: 32px;
--q-units-33: 33px;
--q-units-34: 34px;
--q-units-35: 35px;
--q-units-36: 36px;
--q-units-37: 37px;
--q-units-38: 38px;
--q-units-39: 39px;
--q-units-40: 40px;
--q-units-41: 41px;
--q-units-42: 42px;
--q-units-43: 43px;
--q-units-44: 44px;
--q-units-45: 45px;
--q-units-46: 46px;
--q-units-47: 47px;
--q-units-48: 48px;
--q-units-49: 49px;
--q-units-50: 50px;
--q-units-51: 51px;
--q-units-52: 52px;
--q-units-53: 53px;
--q-units-54: 54px;
--q-units-55: 55px;
--q-units-56: 56px;
--q-units-57: 57px;
--q-units-58: 58px;
--q-units-59: 59px;
--q-units-60: 60px;
--q-units-61: 61px;
--q-units-62: 62px;
--q-units-63: 63px;
--q-units-64: 64px;
--q-units-65: 65px;
--q-units-66: 66px;
--q-units-67: 67px;
--q-units-68: 68px;
--q-units-69: 69px;
--q-units-70: 70px;
--q-units-71: 71px;
--q-units-72: 72px;
--q-units-73: 73px;
--q-units-74: 74px;
--q-units-75: 75px;
--q-units-76: 76px;
--q-units-77: 77px;
--q-units-78: 78px;
--q-units-79: 79px;
--q-units-80: 80px;
--q-units-81: 81px;
--q-units-82: 82px;
--q-units-83: 83px;
--q-units-84: 84px;
--q-units-85: 85px;
--q-units-86: 86px;
--q-units-87: 87px;
--q-units-88: 88px;
--q-units-89: 89px;
--q-units-90: 90px;
--q-units-91: 91px;
--q-units-92: 92px;
--q-units-93: 93px;
--q-units-94: 94px;
--q-units-95: 95px;
--q-units-96: 96px;
--q-units-97: 97px;
--q-units-98: 98px;
--q-units-99: 99px;
--q-units-100: 100px;
/* ------------------------------------------------------------
Quickly — Bordes base (semánticos)
------------------------------------------------------------ */
--q-border-thin: var(--q-units-1); /* 1px */
--q-border-base: var(--q-units-3); /* 3px */
--q-border-thick: var(--q-units-6); /* 6px */
--q-radius-0: 0;
--q-radius-2: var(--q-units-2); /* 2px */
--q-radius-4: var(--q-units-4); /* 4px */
--q-radius-8: var(--q-units-8); /* 8px */
--q-radius-12: var(--q-units-12); /* 12px */
--q-radius-16: var(--q-units-16); /* 16px */
--q-radius-20: var(--q-units-20); /* 20px */
--q-radius-24: var(--q-units-24); /* 24px */
--q-radius-28: var(--q-units-28); /* 28px */
--q-radius-32: var(--q-units-32); /* 32px */
--q-radius-36: var(--q-units-36); /* 36px */
--q-radius-40: var(--q-units-40); /* 40px */
--q-radius-44: var(--q-units-44); /* 44px */
--q-radius-48: var(--q-units-48); /* 48px */
--q-radius-52: var(--q-units-52); /* 52px */
--q-radius-56: var(--q-units-56); /* 56px */
--q-radius-60: var(--q-units-60); /* 60px */
--q-radius-64: var(--q-units-64); /* 64px */
--q-radius-68: var(--q-units-68); /* 68px */
--q-radius-72: var(--q-units-72); /* 72px */
--q-radius-76: var(--q-units-76); /* 76px */
--q-radius-80: var(--q-units-80); /* 80px */
--q-radius-84: var(--q-units-84); /* 84px */
--q-radius-88: var(--q-units-88); /* 88px */
--q-radius-92: var(--q-units-92); /* 92px */
--q-radius-96: var(--q-units-96); /* 96px */
--q-radius-100: var(--q-units-100);/* 100px */
--q-radius-full: 9999px;
/* ------------------------------------------------------------
Breakpoints Quickly — tokens de referencia
------------------------------------------------------------ */
--q-bp-640: 640px;
--q-bp-768: 768px;
--q-bp-1024: 1024px;
--q-bp-1280: 1280px;
--q-bp-1536: 1536px;
--q-bp-1920: 1920px;
--q-bp-2560: 2560px;
--q-bp-3840: 3840px;
--q-bp-6016: 6016px;
/* ------------------------------------------------------------
Tipografía base y escalas
------------------------------------------------------------ */
/* Line-height presets */
--q-leading-none: 1;
--q-leading-tight: 1.25;
--q-leading-snug: 1.375;
--q-leading-normal: 1.5;
--q-leading-relaxed: 1.625;
--q-leading-loose: 2;
/* ===========================================================
QuicklyCSS v2 — Font Scale Tokens
=========================================================== */
--q-font-base: 1rem; /* 16px */
/* Tamaño compacto único --------------------------------- */
/* Mínimo compartido por texto auxiliar e iconos */
--q-fs-01: 0.6875rem; /* 11px */
/* Escala principal (desde el base hacia arriba) ----------- */
/* font-size-1 usa 1rem = 16px */
--q-fs-1: 1rem; /* 16px */
--q-fs-2: 1.125rem; /* 18px */
--q-fs-3: 1.25rem; /* 20px */
--q-fs-4: 1.5rem; /* 24px */
--q-fs-5: 1.875rem; /* 30px */
--q-fs-6: 2.25rem; /* 36px */
--q-fs-7: 3rem; /* 48px */
--q-fs-8: 3.75rem; /* 60px */
--q-fs-9: 4.5rem; /* 72px */
--q-fs-10: 5rem; /* 80px */
--q-fs-11: 5.5rem; /* 88px */
--q-fs-12: 6rem; /* 96px */
--q-fs-13: 6.25rem; /* 100px */
/* Line-height sugerido (refinado) */
--q-lh-s: 1.4; /* microtexto, labels, meta */
--q-lh-1: 1.5; /* 16px → body base */
--q-lh-2: 1.48; /* 18px */
--q-lh-3: 1.45; /* 20px */
--q-lh-4: 1.40; /* 24px */
--q-lh-5: 1.35; /* 30px */
--q-lh-6: 1.30; /* 36px */
--q-lh-7: 1.25; /* 48px */
--q-lh-8: 1.20; /* 60px */
--q-lh-9: 1.16; /* 72px */
--q-lh-10: 1.12; /* 80px */
--q-lh-11: 1.08; /* 88px */
--q-lh-12: 1.05; /* 96px */
--q-lh-13: 1.02; /* 100px */
/* Pesos tipográficos */
--q-font-thin: 100;
--q-font-extralight: 200;
--q-font-light: 300;
--q-font-regular: 400;
--q-font-medium: 500;
--q-font-semibold: 600;
--q-font-bold: 700;
--q-font-extrabold: 800;
--q-font-black: 900;
/* Tracking (letter-spacing) */
--q-tracking-tighter: -0.05em; /* más compacto */
--q-tracking-tight: -0.025em; /* sutilmente cerrado */
--q-tracking-normal: 0em; /* espaciado normal */
--q-tracking-wide: 0.025em; /* ligeramente abierto */
--q-tracking-wider: 0.05em; /* más abierto */
--q-tracking-widest: 0.1em; /* muy espaciado */
/* Word-spacing (espaciado entre palabras) */
--q-word-tighter: -0.05em; /* palabras más juntas */
--q-word-tight: -0.025em;
--q-word-normal: 0em; /* espaciado normal */
--q-word-wide: 0.05em; /* ligeramente abierto */
--q-word-wider: 0.1em; /* más abierto */
--q-word-widest: 0.2em; /* muy espaciado */
}
/* ===== src/css/tokens/semantic.css ===== */
/* ==========================================================================
QuicklyCSS v2 — semantic.css
Contrato semántico de tema. Los componentes deben consumir estos tokens
antes que valores cromáticos concretos.
========================================================================== */
:root {
/* Tipografía */
--q-font-family-sans: Ubuntu, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--q-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
/* Superficies */
--q-surface-page: var(--qy-white, #ffffff);
--q-surface-default: var(--qy-white, #ffffff);
--q-surface-subtle: var(--qy-slate-50, #f8fafc);
--q-surface-muted: var(--qy-slate-100, #f1f5f9);
--q-surface-raised: var(--qy-white, #ffffff);
--q-surface-overlay: var(--qy-white, #ffffff);
--q-overlay-backdrop: rgba(15, 23, 42, 0.64);
/* Texto */
--q-text-primary: var(--qy-slate-900, #0f172a);
--q-text-secondary: var(--qy-slate-600, #475569);
--q-text-muted: var(--qy-slate-500, #64748b);
--q-text-disabled: var(--qy-slate-400, #94a3b8);
--q-text-inverse: var(--qy-white, #ffffff);
/* Bordes y foco */
--q-border-default-color: var(--qy-slate-200, #e2e8f0);
--q-border-strong-color: var(--qy-slate-300, #cbd5e1);
--q-border-disabled-color: var(--qy-slate-200, #e2e8f0);
--q-focus-color: var(--qy-sky-500, #0ea5e9);
--q-focus-ring: 0 0 0 3px color-mix(in srgb, var(--q-focus-color) 28%, transparent);
/* Acciones */
--q-action-primary: var(--qy-sky-600, #0284c7);
--q-action-primary-hover: var(--qy-sky-700, #0369a1);
--q-action-secondary: var(--qy-violet-600, #7c3aed);
--q-action-disabled: var(--qy-slate-300, #cbd5e1);
/* Estados */
--q-status-info: var(--qy-sky-600, #0284c7);
--q-status-success: var(--qy-green-600, #16a34a);
--q-status-warning: var(--qy-amber-500, #f59e0b);
--q-status-danger: var(--qy-red-600, #dc2626);
/* Movimiento */
--q-duration-fast: 120ms;
--q-duration-normal: 200ms;
--q-duration-slow: 320ms;
--q-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--q-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
/* Elevación */
--q-z-base: 0;
--q-z-dropdown: 1000;
--q-z-sticky: 1100;
--q-z-overlay: 1200;
--q-z-modal: 1300;
--q-z-toast: 1400;
--q-z-tooltip: 1500;
}
[data-q-theme="dark"] {
color-scheme: dark;
--q-surface-page: var(--qy-slate-950, #020617);
--q-surface-default: var(--qy-slate-900, #0f172a);
--q-surface-subtle: var(--qy-slate-800, #1e293b);
--q-surface-muted: var(--qy-slate-700, #334155);
--q-surface-raised: var(--qy-slate-800, #1e293b);
--q-surface-overlay: var(--qy-slate-900, #0f172a);
--q-text-primary: var(--qy-slate-50, #f8fafc);
--q-text-secondary: var(--qy-slate-300, #cbd5e1);
--q-text-muted: var(--qy-slate-400, #94a3b8);
--q-text-disabled: var(--qy-slate-500, #64748b);
--q-border-default-color: var(--qy-slate-700, #334155);
--q-border-strong-color: var(--qy-slate-600, #475569);
}
/* ===== src/css/base/base.css ===== */
/* ==========================================================================
QuicklyCSS v2 — base.css
Normalización mínima y accesible. No define la apariencia de componentes.
========================================================================== */
:where(*, *::before, *::after) {
box-sizing: border-box;
}
:where(html) {
color-scheme: light;
font-family: var(--q-font-family-sans);
line-height: var(--q-leading-normal, 1.5);
text-size-adjust: 100%;
}
:where(body) {
margin: 0;
background: var(--q-surface-page);
color: var(--q-text-primary);
}
:where(button, input, select, textarea) {
color: inherit;
font: inherit;
}
:where(img, picture, video, canvas, svg) {
display: block;
max-width: 100%;
}
:where([hidden]) {
display: none !important;
}
:where(:focus-visible) {
outline: 2px solid var(--q-focus-color);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where(html) {
scroll-behavior: auto;
}
}
/* ===== src/css/estructura/containers.css ===== */
/* ============================================================
QuicklyCSS v2 — Containers (fluido y porcentual)
Breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016
Mobile-first con max-width. Sin gutters.
============================================================ */
/* Escala de anchos porcentuales reutilizable */
:root {
--width-50: 50%;
--width-60: 60%;
--width-70: 70%;
--width-80: 80%;
--width-90: 90%;
--width-100: 100%;
}
/* Base estructural para todos los contenedores */
[class^="qy-cont"],
.qy-cont-fluid {
width: 100%;
margin-inline: auto;
box-sizing: border-box;
}
/* Alias (opcional pero recomendado) */
.qy-cont { max-width: var(--width-100); }
/* Variantes porcentuales base */
.qy-cont-fluid,
.qy-cont-10 { max-width: var(--width-100); }
.qy-cont-9 { max-width: var(--width-90); }
.qy-cont-8 { max-width: var(--width-80); }
.qy-cont-7 { max-width: var(--width-70); }
.qy-cont-6 { max-width: var(--width-60); }
.qy-cont-5 { max-width: var(--width-50); }
/* ============================================================
BREAKPOINTS
(solo max-width por variante; la estructura ya está aplicada)
============================================================ */
/* 6K — 6016px */
@media (max-width: 6016px) {
.qy-cont-6016-10 { max-width: var(--width-100); }
.qy-cont-6016-9 { max-width: var(--width-90); }
.qy-cont-6016-8 { max-width: var(--width-80); }
.qy-cont-6016-7 { max-width: var(--width-70); }
.qy-cont-6016-6 { max-width: var(--width-60); }
.qy-cont-6016-5 { max-width: var(--width-50); }
}
/* 4K — 3840px */
@media (max-width: 3840px) {
.qy-cont-3840-10 { max-width: var(--width-100); }
.qy-cont-3840-9 { max-width: var(--width-90); }
.qy-cont-3840-8 { max-width: var(--width-80); }
.qy-cont-3840-7 { max-width: var(--width-70); }
.qy-cont-3840-6 { max-width: var(--width-60); }
.qy-cont-3840-5 { max-width: var(--width-50); }
}
/* 2K — 2560px */
@media (max-width: 2560px) {
.qy-cont-2560-10 { max-width: var(--width-100); }
.qy-cont-2560-9 { max-width: var(--width-90); }
.qy-cont-2560-8 { max-width: var(--width-80); }
.qy-cont-2560-7 { max-width: var(--width-70); }
.qy-cont-2560-6 { max-width: var(--width-60); }
.qy-cont-2560-5 { max-width: var(--width-50); }
}
/* 1536px */
@media (max-width: 1536px) {
.qy-cont-1536-10 { max-width: var(--width-100); }
.qy-cont-1536-9 { max-width: var(--width-90); }
.qy-cont-1536-8 { max-width: var(--width-80); }
.qy-cont-1536-7 { max-width: var(--width-70); }
.qy-cont-1536-6 { max-width: var(--width-60); }
.qy-cont-1536-5 { max-width: var(--width-50); }
}
/* 1280px */
@media (max-width: 1280px) {
.qy-cont-1280-10 { max-width: var(--width-100); }
.qy-cont-1280-9 { max-width: var(--width-90); }
.qy-cont-1280-8 { max-width: var(--width-80); }
.qy-cont-1280-7 { max-width: var(--width-70); }
.qy-cont-1280-6 { max-width: var(--width-60); }
.qy-cont-1280-5 { max-width: var(--width-50); }
}
/* 1024px */
@media (max-width: 1024px) {
.qy-cont-1024-10 { max-width: var(--width-100); }
.qy-cont-1024-9 { max-width: var(--width-90); }
.qy-cont-1024-8 { max-width: var(--width-80); }
.qy-cont-1024-7 { max-width: var(--width-70); }
.qy-cont-1024-6 { max-width: var(--width-60); }
.qy-cont-1024-5 { max-width: var(--width-50); }
}
/* 768px */
@media (max-width: 768px) {
.qy-cont-768-10 { max-width: var(--width-100); }
.qy-cont-768-9 { max-width: var(--width-90); }
.qy-cont-768-8 { max-width: var(--width-80); }
.qy-cont-768-7 { max-width: var(--width-70); }
.qy-cont-768-6 { max-width: var(--width-60); }
.qy-cont-768-5 { max-width: var(--width-50); }
}
/* 640px */
@media (max-width: 640px) {
.qy-cont-640-10 { max-width: var(--width-100); }
.qy-cont-640-9 { max-width: var(--width-90); }
.qy-cont-640-8 { max-width: var(--width-80); }
.qy-cont-640-7 { max-width: var(--width-70); }
.qy-cont-640-6 { max-width: var(--width-60); }
.qy-cont-640-5 { max-width: var(--width-50); }
}
/* ===== src/css/estructura/display.css ===== */
/* ==========================================================================
QuicklyCSS v2 — display.css
Utilidades de display, visibilidad y helpers de presencia en layout
--------------------------------------------------------------------------
¿Qué resuelve?
- Controlar cómo se renderiza un elemento en el flujo del documento:
block, inline, inline-block, flex, grid, none, etc.
- Mostrar / ocultar elementos sin eliminar su espacio (visibility).
- Helpers de accesibilidad para contenido solo para lectores de pantalla.
Nomenclatura:
- .display-block, .display-inline, .display-flex, ...
- .visible, .invisible
- .sr-only, .sr-only-focusable
Nota:
- Para layout avanzado (flex/grid) existen archivos dedicados
como flex.css y grid.css (si se definen en el sistema).
========================================================================== */
/* ==========================================================================
1. Display: tipos básicos
========================================================================== */
.display-none { display: none !important; }
.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block{ display: inline-block !important; }
.display-flow-root { display: flow-root !important; }
.display-flex { display: flex !important; }
.display-inline-flex { display: inline-flex !important; }
.display-grid { display: grid !important; }
.display-inline-grid { display: inline-grid !important; }
.display-table { display: table !important; }
.display-table-row { display: table-row !important; }
.display-table-cell { display: table-cell !important; }
.display-contents { display: contents !important; }
/* ==========================================================================
2. Visibilidad
visibility mantiene o quita el espacio en layout.
========================================================================== */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Solo para celdas/filas de tabla (se colapsa el espacio) */
.visible-collapse { visibility: collapse !important; }
/* ==========================================================================
3. Helpers de accesibilidad (screen reader only)
Contenido solo visible para lectores de pantalla.
========================================================================== */
/* Totalmente oculto visualmente, pero accesible a tecnologías asistivas. */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Solo visible cuando recibe focus (teclado / accesibilidad). */
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
}
/* ==========================================================================
4. Ejemplos de uso (comentado)
--------------------------------------------------------------------------
- Mostrar/ocultar:
Oculto
Visible como bloque
- Componentes flex y grid:
...
...
- Tabla semántica:
...
... |
- Texto solo para lectores de pantalla:
Descripción accesible
- "Saltar al contenido" visible solo al enfocar:
Saltar al contenido
========================================================================== */
/* ==========================================================================
FIN display.css — QuicklyCSS v2
========================================================================== */
/* ===== src/css/estructura/flex-col-span.css ===== */
/* ==========================================================================
QuicklyCSS v2 — flex-span.css
Sistema de columnas para layouts FLEX (12 columnas)
Cada item ocupa N/12 del ancho disponible.
Breakpoints (max-width): 640, 768, 1024, 1280, 1536, 2560, 3840, 6016
========================================================================== */
/* --------------------------------------------------------------------------
1. Base: flex-span-N (sin breakpoints)
-------------------------------------------------------------------------- */
.flex-span-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.flex-span-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.flex-span-3 { flex: 0 0 25%; max-width: 25%; }
.flex-span-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.flex-span-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.flex-span-6 { flex: 0 0 50%; max-width: 50%; }
.flex-span-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.flex-span-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.flex-span-9 { flex: 0 0 75%; max-width: 75%; }
.flex-span-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.flex-span-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.flex-span-12 { flex: 0 0 100%; max-width: 100%; }
/* --------------------------------------------------------------------------
2. Breakpoints — flex-span-BP-N (max-width)
-------------------------------------------------------------------------- */
/* --- 640px --- */
@media (max-width: 640px) {
.flex-span-640-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-640-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-640-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-640-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-640-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-640-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-640-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-640-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-640-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-640-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-640-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-640-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 768px --- */
@media (max-width: 768px) {
.flex-span-768-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-768-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-768-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-768-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-768-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-768-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-768-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-768-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-768-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-768-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-768-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-768-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 1024px --- */
@media (max-width: 1024px) {
.flex-span-1024-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-1024-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-1024-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-1024-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-1024-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-1024-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-1024-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-1024-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-1024-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-1024-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-1024-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-1024-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 1280px --- */
@media (max-width: 1280px) {
.flex-span-1280-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-1280-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-1280-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-1280-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-1280-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-1280-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-1280-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-1280-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-1280-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-1280-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-1280-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-1280-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 1536px --- */
@media (max-width: 1536px) {
.flex-span-1536-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-1536-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-1536-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-1536-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-1536-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-1536-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-1536-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-1536-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-1536-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-1536-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-1536-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-1536-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 2560px --- */
@media (max-width: 2560px) {
.flex-span-2560-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-2560-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-2560-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-2560-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-2560-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-2560-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-2560-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-2560-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-2560-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-2560-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-2560-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-2560-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 3840px --- */
@media (max-width: 3840px) {
.flex-span-3840-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-3840-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-3840-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-3840-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-3840-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-3840-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-3840-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-3840-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-3840-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-3840-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-3840-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-3840-12 { flex-basis: 100%; max-width: 100%; }
}
/* --- 6016px --- */
@media (max-width: 6016px) {
.flex-span-6016-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.flex-span-6016-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.flex-span-6016-3 { flex-basis: 25%; max-width: 25%; }
.flex-span-6016-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.flex-span-6016-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.flex-span-6016-6 { flex-basis: 50%; max-width: 50%; }
.flex-span-6016-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.flex-span-6016-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.flex-span-6016-9 { flex-basis: 75%; max-width: 75%; }
.flex-span-6016-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.flex-span-6016-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.flex-span-6016-12 { flex-basis: 100%; max-width: 100%; }
}
/* ===== src/css/estructura/flex-col.css ===== */
/* ==========================================================================
QuicklyCSS v2 — flex.css
Layout flexible basado en columnas
--------------------------------------------------------------------------
¿Qué resuelve?
- Define layouts de columnas usando flexbox en lugar de grid.
- El contenedor decide cuántas columnas hay (.flex-col-3, .flex-col-4, etc.).
- Cada hijo toma el ancho correspondiente (1/N del contenedor).
- Soporta breakpoints con patrón max-width:
.flex-col-640-1, .flex-col-768-2, etc.
Uso básico:
Uso responsivo:
...
Notas:
- .flex activa display:flex + flex-wrap:wrap.
- Las clases flex-col-* se aplican al CONTENEDOR y afectan a sus hijos directos.
========================================================================== */
/* --------------------------------------------------------------------------
1. Contenedores base flex
-------------------------------------------------------------------------- */
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-inline {
display: inline-flex;
flex-wrap: wrap;
}
/* Layout fluido tipo "auto-fit" basado en flex (mínimo 200px por ítem) */
.flex-auto-fit > * ,
.flex-auto-fill > * {
flex: 1 1 200px;
max-width: 100%;
}
/* --------------------------------------------------------------------------
2. Columnas base (sin breakpoint)
flex-col-N → reparte el ancho del contenedor entre N columnas
-------------------------------------------------------------------------- */
.flex-col-1 > * { flex: 0 0 calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-2 > * { flex: 0 0 calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-3 > * { flex: 0 0 calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-4 > * { flex: 0 0 calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-5 > * { flex: 0 0 calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-6 > * { flex: 0 0 calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-7 > * { flex: 0 0 calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-8 > * { flex: 0 0 calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-9 > * { flex: 0 0 calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-10 > * { flex: 0 0 calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-11 > * { flex: 0 0 calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-12 > * { flex: 0 0 calc(100% / 12); max-width: calc(100% / 12); }
/* ==========================================================================
3. BREAKPOINTS (max-width)
Patrón: .flex-col--
- 640, 768, 1024, 1280, 1536, 2560, 3840, 6016
- Se aplican cuando el viewport es MENOR O IGUAL al breakpoint.
========================================================================== */
/* 640px */
@media (max-width: 640px) {
.flex-col-640-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-640-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-640-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-640-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-640-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-640-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-640-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-640-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-640-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-640-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-640-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-640-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 768px */
@media (max-width: 768px) {
.flex-col-768-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-768-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-768-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-768-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-768-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-768-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-768-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-768-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-768-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-768-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-768-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-768-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 1024px */
@media (max-width: 1024px) {
.flex-col-1024-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-1024-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-1024-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-1024-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-1024-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-1024-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-1024-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-1024-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-1024-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-1024-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-1024-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-1024-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 1280px */
@media (max-width: 1280px) {
.flex-col-1280-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-1280-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-1280-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-1280-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-1280-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-1280-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-1280-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-1280-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-1280-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-1280-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-1280-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-1280-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 1536px */
@media (max-width: 1536px) {
.flex-col-1536-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-1536-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-1536-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-1536-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-1536-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-1536-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-1536-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-1536-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-1536-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-1536-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-1536-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-1536-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 2560px */
@media (max-width: 2560px) {
.flex-col-2560-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-2560-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-2560-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-2560-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-2560-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-2560-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-2560-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-2560-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-2560-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-2560-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-2560-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-2560-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 3840px */
@media (max-width: 3840px) {
.flex-col-3840-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-3840-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-3840-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-3840-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-3840-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-3840-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-3840-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-3840-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-3840-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-3840-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-3840-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-3840-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* 6016px */
@media (max-width: 6016px) {
.flex-col-6016-1 > * { flex-basis: calc(100% / 1); max-width: calc(100% / 1); }
.flex-col-6016-2 > * { flex-basis: calc(100% / 2); max-width: calc(100% / 2); }
.flex-col-6016-3 > * { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.flex-col-6016-4 > * { flex-basis: calc(100% / 4); max-width: calc(100% / 4); }
.flex-col-6016-5 > * { flex-basis: calc(100% / 5); max-width: calc(100% / 5); }
.flex-col-6016-6 > * { flex-basis: calc(100% / 6); max-width: calc(100% / 6); }
.flex-col-6016-7 > * { flex-basis: calc(100% / 7); max-width: calc(100% / 7); }
.flex-col-6016-8 > * { flex-basis: calc(100% / 8); max-width: calc(100% / 8); }
.flex-col-6016-9 > * { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
.flex-col-6016-10 > * { flex-basis: calc(100% / 10); max-width: calc(100% / 10); }
.flex-col-6016-11 > * { flex-basis: calc(100% / 11); max-width: calc(100% / 11); }
.flex-col-6016-12 > * { flex-basis: calc(100% / 12); max-width: calc(100% / 12); }
}
/* ==========================================================================
FIN flex.css — QuicklyCSS v2
========================================================================== */
/* ===== src/css/estructura/grid-col-span.css ===== */
/* ============================================================
QuicklyCSS v2 — GRID COLUMN SPANS
Control para definir cuántas columnas ocupa un ítem en un grid
------------------------------------------------------------
Nomenclatura:
- .grid-col-span-N
- .grid-col-span--N
Breakpoints (max-width):
640, 768, 1024, 1280, 1536, 2560, 3840, 6016
Ejemplo:
============================================================ */
/* ============================================================
1. GRID — COLUMN SPAN BASE
============================================================ */
.grid-col-span-1 { grid-column: span 1; }
.grid-col-span-2 { grid-column: span 2; }
.grid-col-span-3 { grid-column: span 3; }
.grid-col-span-4 { grid-column: span 4; }
.grid-col-span-5 { grid-column: span 5; }
.grid-col-span-6 { grid-column: span 6; }
.grid-col-span-7 { grid-column: span 7; }
.grid-col-span-8 { grid-column: span 8; }
.grid-col-span-9 { grid-column: span 9; }
.grid-col-span-10 { grid-column: span 10; }
.grid-col-span-11 { grid-column: span 11; }
.grid-col-span-12 { grid-column: span 12; }
/* ============================================================
2. BREAKPOINTS — max-width pattern
============================================================ */
/* ---------- 640px ---------- */
@media (max-width: 640px) {
.grid-col-span-640-1 { grid-column: span 1; }
.grid-col-span-640-2 { grid-column: span 2; }
.grid-col-span-640-3 { grid-column: span 3; }
.grid-col-span-640-4 { grid-column: span 4; }
.grid-col-span-640-5 { grid-column: span 5; }
.grid-col-span-640-6 { grid-column: span 6; }
.grid-col-span-640-7 { grid-column: span 7; }
.grid-col-span-640-8 { grid-column: span 8; }
.grid-col-span-640-9 { grid-column: span 9; }
.grid-col-span-640-10 { grid-column: span 10; }
.grid-col-span-640-11 { grid-column: span 11; }
.grid-col-span-640-12 { grid-column: span 12; }
}
/* ---------- 768px ---------- */
@media (max-width: 768px) {
.grid-col-span-768-1 { grid-column: span 1; }
.grid-col-span-768-2 { grid-column: span 2; }
.grid-col-span-768-3 { grid-column: span 3; }
.grid-col-span-768-4 { grid-column: span 4; }
.grid-col-span-768-5 { grid-column: span 5; }
.grid-col-span-768-6 { grid-column: span 6; }
.grid-col-span-768-7 { grid-column: span 7; }
.grid-col-span-768-8 { grid-column: span 8; }
.grid-col-span-768-9 { grid-column: span 9; }
.grid-col-span-768-10 { grid-column: span 10; }
.grid-col-span-768-11 { grid-column: span 11; }
.grid-col-span-768-12 { grid-column: span 12; }
}
/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
.grid-col-span-1024-1 { grid-column: span 1; }
.grid-col-span-1024-2 { grid-column: span 2; }
.grid-col-span-1024-3 { grid-column: span 3; }
.grid-col-span-1024-4 { grid-column: span 4; }
.grid-col-span-1024-5 { grid-column: span 5; }
.grid-col-span-1024-6 { grid-column: span 6; }
.grid-col-span-1024-7 { grid-column: span 7; }
.grid-col-span-1024-8 { grid-column: span 8; }
.grid-col-span-1024-9 { grid-column: span 9; }
.grid-col-span-1024-10 { grid-column: span 10; }
.grid-col-span-1024-11 { grid-column: span 11; }
.grid-col-span-1024-12 { grid-column: span 12; }
}
/* ---------- 1280px ---------- */
@media (max-width: 1280px) {
.grid-col-span-1280-1 { grid-column: span 1; }
.grid-col-span-1280-2 { grid-column: span 2; }
.grid-col-span-1280-3 { grid-column: span 3; }
.grid-col-span-1280-4 { grid-column: span 4; }
.grid-col-span-1280-5 { grid-column: span 5; }
.grid-col-span-1280-6 { grid-column: span 6; }
.grid-col-span-1280-7 { grid-column: span 7; }
.grid-col-span-1280-8 { grid-column: span 8; }
.grid-col-span-1280-9 { grid-column: span 9; }
.grid-col-span-1280-10 { grid-column: span 10; }
.grid-col-span-1280-11 { grid-column: span 11; }
.grid-col-span-1280-12 { grid-column: span 12; }
}
/* ---------- 1536px ---------- */
@media (max-width: 1536px) {
.grid-col-span-1536-1 { grid-column: span 1; }
.grid-col-span-1536-2 { grid-column: span 2; }
.grid-col-span-1536-3 { grid-column: span 3; }
.grid-col-span-1536-4 { grid-column: span 4; }
.grid-col-span-1536-5 { grid-column: span 5; }
.grid-col-span-1536-6 { grid-column: span 6; }
.grid-col-span-1536-7 { grid-column: span 7; }
.grid-col-span-1536-8 { grid-column: span 8; }
.grid-col-span-1536-9 { grid-column: span 9; }
.grid-col-span-1536-10 { grid-column: span 10; }
.grid-col-span-1536-11 { grid-column: span 11; }
.grid-col-span-1536-12 { grid-column: span 12; }
}
/* ---------- 2560px ---------- */
@media (max-width: 2560px) {
.grid-col-span-2560-1 { grid-column: span 1; }
.grid-col-span-2560-2 { grid-column: span 2; }
.grid-col-span-2560-3 { grid-column: span 3; }
.grid-col-span-2560-4 { grid-column: span 4; }
.grid-col-span-2560-5 { grid-column: span 5; }
.grid-col-span-2560-6 { grid-column: span 6; }
.grid-col-span-2560-7 { grid-column: span 7; }
.grid-col-span-2560-8 { grid-column: span 8; }
.grid-col-span-2560-9 { grid-column: span 9; }
.grid-col-span-2560-10 { grid-column: span 10; }
.grid-col-span-2560-11 { grid-column: span 11; }
.grid-col-span-2560-12 { grid-column: span 12; }
}
/* ---------- 3840px ---------- */
@media (max-width: 3840px) {
.grid-col-span-3840-1 { grid-column: span 1; }
.grid-col-span-3840-2 { grid-column: span 2; }
.grid-col-span-3840-3 { grid-column: span 3; }
.grid-col-span-3840-4 { grid-column: span 4; }
.grid-col-span-3840-5 { grid-column: span 5; }
.grid-col-span-3840-6 { grid-column: span 6; }
.grid-col-span-3840-7 { grid-column: span 7; }
.grid-col-span-3840-8 { grid-column: span 8; }
.grid-col-span-3840-9 { grid-column: span 9; }
.grid-col-span-3840-10 { grid-column: span 10; }
.grid-col-span-3840-11 { grid-column: span 11; }
.grid-col-span-3840-12 { grid-column: span 12; }
}
/* ---------- 6016px ---------- */
@media (max-width: 6016px) {
.grid-col-span-6016-1 { grid-column: span 1; }
.grid-col-span-6016-2 { grid-column: span 2; }
.grid-col-span-6016-3 { grid-column: span 3; }
.grid-col-span-6016-4 { grid-column: span 4; }
.grid-col-span-6016-5 { grid-column: span 5; }
.grid-col-span-6016-6 { grid-column: span 6; }
.grid-col-span-6016-7 { grid-column: span 7; }
.grid-col-span-6016-8 { grid-column: span 8; }
.grid-col-span-6016-9 { grid-column: span 9; }
.grid-col-span-6016-10 { grid-column: span 10; }
.grid-col-span-6016-11 { grid-column: span 11; }
.grid-col-span-6016-12 { grid-column: span 12; }
}
/* ============================================================
FIN grid-col-span.css — QuicklyCSS v2
============================================================ */
/* ===== src/css/estructura/grid-col.css ===== */
/* ============================================================
QuicklyCSS v2 — grid-cols.css
Control de columnas en GRID (grid-col-N)
------------------------------------------------------------
¿Qué resuelve?
- Define cuántas columnas tiene un grid en distintos bp.
- Permite grillas 1–12 columnas, auto-fit y auto-fill.
- Alineado al sistema de breakpoints QuicklyCSS.
Uso básico:
...
Ejemplo responsivo:
...
Breakpoints (max-width):
640, 768, 1280, 1536, 2560, 3840, 6016
Nomenclatura:
- .grid → display:grid
- .grid-auto → 12 columnas iguales
- .grid-auto-fit → auto-fit con minmax(200px, 1fr)
- .grid-auto-fill → auto-fill con minmax(200px, 1fr)
- .grid-col-N → N columnas base
- .grid-col-640-N → N columnas a ≤ 640px
- .grid-col-768-N → N columnas a ≤ 768px
- etc...
============================================================ */
/* ---------- Grid base ---------- */
.grid {
display: grid;
}
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: auto;
}
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: auto;
}
.grid-auto {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
}
/* ---------- Columnas (sin breakpoint) ---------- */
.grid-col-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-12 { grid-template-columns: repeat(12, 1fr); }
/* ============================================================
BREAKPOINTS (max-width) → .grid-col--
============================================================ */
/* 640px */
@media (max-width: 640px) {
.grid-col-640-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-640-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-640-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-640-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-640-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-640-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-640-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-640-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-640-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-640-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-640-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-640-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 768px */
@media (max-width: 768px) {
.grid-col-768-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-768-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-768-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-768-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-768-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-768-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-768-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-768-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-768-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-768-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-768-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-768-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 1280px */
@media (max-width: 1280px) {
.grid-col-1280-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-1280-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-1280-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-1280-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-1280-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-1280-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-1280-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-1280-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-1280-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-1280-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-1280-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-1280-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 1536px */
@media (max-width: 1536px) {
.grid-col-1536-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-1536-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-1536-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-1536-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-1536-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-1536-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-1536-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-1536-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-1536-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-1536-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-1536-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-1536-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 2560px */
@media (max-width: 2560px) {
.grid-col-2560-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-2560-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-2560-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-2560-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-2560-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-2560-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-2560-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-2560-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-2560-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-2560-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-2560-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-2560-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 3840px */
@media (max-width: 3840px) {
.grid-col-3840-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-3840-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-3840-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-3840-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-3840-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-3840-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-3840-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-3840-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-3840-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-3840-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-3840-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-3840-12 { grid-template-columns: repeat(12, 1fr); }
}
/* 6016px */
@media (max-width: 6016px) {
.grid-col-6016-1 { grid-template-columns: repeat(1, 1fr); }
.grid-col-6016-2 { grid-template-columns: repeat(2, 1fr); }
.grid-col-6016-3 { grid-template-columns: repeat(3, 1fr); }
.grid-col-6016-4 { grid-template-columns: repeat(4, 1fr); }
.grid-col-6016-5 { grid-template-columns: repeat(5, 1fr); }
.grid-col-6016-6 { grid-template-columns: repeat(6, 1fr); }
.grid-col-6016-7 { grid-template-columns: repeat(7, 1fr); }
.grid-col-6016-8 { grid-template-columns: repeat(8, 1fr); }
.grid-col-6016-9 { grid-template-columns: repeat(9, 1fr); }
.grid-col-6016-10 { grid-template-columns: repeat(10, 1fr); }
.grid-col-6016-11 { grid-template-columns: repeat(11, 1fr); }
.grid-col-6016-12 { grid-template-columns: repeat(12, 1fr); }
}
/* ===== src/css/estructura/grid-row-span.css ===== */
/* ==========================================================================
QuicklyCSS v2 — grid-row-span.css
Control de altura en GRID mediante row-span
--------------------------------------------------------------------------
¿Qué resuelve?
- Permite que un elemento ocupe 1–12 filas en un grid.
- Ideal para layouts tipo dashboard, tarjetas de distintos tamaños,
mosaicos visuales, galerías y "fake masonry".
Uso básico:
Breakpoints (max-width):
640, 768, 1024, 1280, 1536, 2560, 3840, 6016
Ejemplo responsivo:
Nota:
- Requiere display:grid en el contenedor.
- Compatible con cualquier configuración de grid-template-rows.
========================================================================== */
/* --------------------------------------------------------------------------
1. Row span base (sin breakpoints)
-------------------------------------------------------------------------- */
.grid-row-span-1 { grid-row: span 1; }
.grid-row-span-2 { grid-row: span 2; }
.grid-row-span-3 { grid-row: span 3; }
.grid-row-span-4 { grid-row: span 4; }
.grid-row-span-5 { grid-row: span 5; }
.grid-row-span-6 { grid-row: span 6; }
.grid-row-span-7 { grid-row: span 7; }
.grid-row-span-8 { grid-row: span 8; }
.grid-row-span-9 { grid-row: span 9; }
.grid-row-span-10 { grid-row: span 10; }
.grid-row-span-11 { grid-row: span 11; }
.grid-row-span-12 { grid-row: span 12; }
/* --------------------------------------------------------------------------
2. BREAKPOINTS — max-width pattern (same as QuicklyCSS containers)
-------------------------------------------------------------------------- */
/* 640px */
@media (max-width: 640px) {
.grid-row-span-640-1 { grid-row: span 1; }
.grid-row-span-640-2 { grid-row: span 2; }
.grid-row-span-640-3 { grid-row: span 3; }
.grid-row-span-640-4 { grid-row: span 4; }
.grid-row-span-640-5 { grid-row: span 5; }
.grid-row-span-640-6 { grid-row: span 6; }
.grid-row-span-640-7 { grid-row: span 7; }
.grid-row-span-640-8 { grid-row: span 8; }
.grid-row-span-640-9 { grid-row: span 9; }
.grid-row-span-640-10 { grid-row: span 10; }
.grid-row-span-640-11 { grid-row: span 11; }
.grid-row-span-640-12 { grid-row: span 12; }
}
/* 768px */
@media (max-width: 768px) {
.grid-row-span-768-1 { grid-row: span 1; }
.grid-row-span-768-2 { grid-row: span 2; }
.grid-row-span-768-3 { grid-row: span 3; }
.grid-row-span-768-4 { grid-row: span 4; }
.grid-row-span-768-5 { grid-row: span 5; }
.grid-row-span-768-6 { grid-row: span 6; }
.grid-row-span-768-7 { grid-row: span 7; }
.grid-row-span-768-8 { grid-row: span 8; }
.grid-row-span-768-9 { grid-row: span 9; }
.grid-row-span-768-10 { grid-row: span 10; }
.grid-row-span-768-11 { grid-row: span 11; }
.grid-row-span-768-12 { grid-row: span 12; }
}
/* 1024px */
@media (max-width: 1024px) {
.grid-row-span-1024-1 { grid-row: span 1; }
.grid-row-span-1024-2 { grid-row: span 2; }
.grid-row-span-1024-3 { grid-row: span 3; }
.grid-row-span-1024-4 { grid-row: span 4; }
.grid-row-span-1024-5 { grid-row: span 5; }
.grid-row-span-1024-6 { grid-row: span 6; }
.grid-row-span-1024-7 { grid-row: span 7; }
.grid-row-span-1024-8 { grid-row: span 8; }
.grid-row-span-1024-9 { grid-row: span 9; }
.grid-row-span-1024-10 { grid-row: span 10; }
.grid-row-span-1024-11 { grid-row: span 11; }
.grid-row-span-1024-12 { grid-row: span 12; }
}
/* 1280px */
@media (max-width: 1280px) {
.grid-row-span-1280-1 { grid-row: span 1; }
.grid-row-span-1280-2 { grid-row: span 2; }
.grid-row-span-1280-3 { grid-row: span 3; }
.grid-row-span-1280-4 { grid-row: span 4; }
.grid-row-span-1280-5 { grid-row: span 5; }
.grid-row-span-1280-6 { grid-row: span 6; }
.grid-row-span-1280-7 { grid-row: span 7; }
.grid-row-span-1280-8 { grid-row: span 8; }
.grid-row-span-1280-9 { grid-row: span 9; }
.grid-row-span-1280-10 { grid-row: span 10; }
.grid-row-span-1280-11 { grid-row: span 11; }
.grid-row-span-1280-12 { grid-row: span 12; }
}
/* 1536px */
@media (max-width: 1536px) {
.grid-row-span-1536-1 { grid-row: span 1; }
.grid-row-span-1536-2 { grid-row: span 2; }
.grid-row-span-1536-3 { grid-row: span 3; }
.grid-row-span-1536-4 { grid-row: span 4; }
.grid-row-span-1536-5 { grid-row: span 5; }
.grid-row-span-1536-6 { grid-row: span 6; }
.grid-row-span-1536-7 { grid-row: span 7; }
.grid-row-span-1536-8 { grid-row: span 8; }
.grid-row-span-1536-9 { grid-row: span 9; }
.grid-row-span-1536-10 { grid-row: span 10; }
.grid-row-span-1536-11 { grid-row: span 11; }
.grid-row-span-1536-12 { grid-row: span 12; }
}
/* 2560px */
@media (max-width: 2560px) {
.grid-row-span-2560-1 { grid-row: span 1; }
.grid-row-span-2560-2 { grid-row: span 2; }
.grid-row-span-2560-3 { grid-row: span 3; }
.grid-row-span-2560-4 { grid-row: span 4; }
.grid-row-span-2560-5 { grid-row: span 5; }
.grid-row-span-2560-6 { grid-row: span 6; }
.grid-row-span-2560-7 { grid-row: span 7; }
.grid-row-span-2560-8 { grid-row: span 8; }
.grid-row-span-2560-9 { grid-row: span 9; }
.grid-row-span-2560-10 { grid-row: span 10; }
.grid-row-span-2560-11 { grid-row: span 11; }
.grid-row-span-2560-12 { grid-row: span 12; }
}
/* 3840px */
@media (max-width: 3840px) {
.grid-row-span-3840-1 { grid-row: span 1; }
.grid-row-span-3840-2 { grid-row: span 2; }
.grid-row-span-3840-3 { grid-row: span 3; }
.grid-row-span-3840-4 { grid-row: span 4; }
.grid-row-span-3840-5 { grid-row: span 5; }
.grid-row-span-3840-6 { grid-row: span 6; }
.grid-row-span-3840-7 { grid-row: span 7; }
.grid-row-span-3840-8 { grid-row: span 8; }
.grid-row-span-3840-9 { grid-row: span 9; }
.grid-row-span-3840-10 { grid-row: span 10; }
.grid-row-span-3840-11 { grid-row: span 11; }
.grid-row-span-3840-12 { grid-row: span 12; }
}
/* 6016px */
@media (max-width: 6016px) {
.grid-row-span-6016-1 { grid-row: span 1; }
.grid-row-span-6016-2 { grid-row: span 2; }
.grid-row-span-6016-3 { grid-row: span 3; }
.grid-row-span-6016-4 { grid-row: span 4; }
.grid-row-span-6016-5 { grid-row: span 5; }
.grid-row-span-6016-6 { grid-row: span 6; }
.grid-row-span-6016-7 { grid-row: span 7; }
.grid-row-span-6016-8 { grid-row: span 8; }
.grid-row-span-6016-9 { grid-row: span 9; }
.grid-row-span-6016-10 { grid-row: span 10; }
.grid-row-span-6016-11 { grid-row: span 11; }
.grid-row-span-6016-12 { grid-row: span 12; }
}
/* ===== src/css/contenidos/buttons.css ===== */
/* ==========================================================================
QuicklyCSS v2 — buttons.css
Sistema de botones escalables por tipografía + variantes semánticas
Depende de tokens Quickly (--q-color-*, --q-radius-*, etc.) definidos en foundation.css
--------------------------------------------------------------------------
Nomenclatura
- Base botón: .btn
- Icon-only: .btn-ico
- Variantes sólidas: .btn-primary | .btn-p, .btn-secondary | .btn-s, etc.
- Escala fuente: .btn-font-size-{01–07,0–40} + alias .btn-fs-{01–07,0–40}
- Idea clave: El botón crece proporcional al tamaño de la fuente (EM-based)
========================================================================== */
/* --------------------------------------------------------------------------
Variables específicas de botones (overrideables en otros layers)
-------------------------------------------------------------------------- */
:root {
--q-btn-line-height: 1.2;
/* Foco accesible */
--q-btn-focus-ring: var(--qy-blue-600, #2563eb);
/* Radio relativo al font-size del botón */
--q-btn-radius: 0.55em;
/* Colores (fallbacks si no existen tokens globales) */
--q-color-btn-primary: var(--q-color-primary, var(--qy-blue-700, #1d4ed8));
--q-color-btn-primary-h: var(--q-color-primary-h, var(--qy-blue-800, #1e40af));
--q-color-btn-primary-border: var(--q-color-primary-border, var(--qy-blue-500, #3b82f6));
--q-color-btn-primary-border-h: var(--q-color-primary-border-h, var(--qy-blue-400, #60a5fa));
--q-color-btn-secondary: var(--q-color-secondary, #6b7280);
--q-color-btn-secondary-h: var(--q-color-secondary-h, #4b5563);
--q-color-btn-success: var(--q-color-success, #16a34a);
--q-color-btn-success-h: var(--q-color-success-h, #15803d);
--q-color-btn-danger: var(--q-color-danger, #dc2626);
--q-color-btn-danger-h: var(--q-color-danger-h, #b91c1c);
--q-color-btn-warning: var(--q-color-warning, #f59e0b);
--q-color-btn-warning-h: var(--q-color-warning-h, #d97706);
--q-color-btn-dark: var(--q-color-dark, #111827);
--q-color-btn-dark-h: var(--q-color-dark-h, var(--qy-slate-700, #334155));
--q-color-btn-dark-border: var(--q-color-dark-border, var(--qy-slate-500, #64748b));
--q-color-btn-light: var(--q-color-light, #f9fafb);
--q-color-btn-light-h: var(--q-color-light-h, #e5e7eb);
--q-color-btn-white: #ffffff;
--q-color-btn-text: #0f172a;
}
/* ==========================================================================
BASE .btn (escala 100% proporcional al font-size → usa em)
========================================================================== */
.btn,
.btn-ico {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-weight: 500;
line-height: var(--q-btn-line-height);
/* Todo proporcional al tamaño de texto del botón */
padding: 0.55em 1.25em;
min-height: 2.6em;
border-radius: var(--q-btn-radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
color: inherit;
transition:
background-color 0.18s ease-out,
border-color 0.18s ease-out,
color 0.18s ease-out,
box-shadow 0.18s ease-out,
transform 0.12s ease-out;
-webkit-tap-highlight-color: transparent;
}
/* Permitir como botón */
a.btn,
a.btn-ico {
display: inline-flex;
}
/* Hover / active genérico */
.btn:hover,
.btn-ico:hover {
transform: none;
}
.btn:active,
.btn-ico:active {
transform: none;
}
/* Focus accesible */
.btn:focus-visible,
.btn-ico:focus-visible {
outline: 3px solid var(--q-btn-focus-ring);
outline-offset: 3px;
}
/* Disabled genérico */
.btn[disabled],
.btn-ico[disabled],
.btn.is-disabled,
.btn-ico.is-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
transform: none;
}
/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn,
.btn-ico {
transition: none;
}
}
/* ==========================================================================
ESCALA TIPOGRÁFICA PARA BOTONES (01–07 menores, 0 base, 1–40 mayores)
- 0 es la base del body (16px)
- Niveles 01–07: se restan px desde 16 → 15px–9px
- Niveles 0–40: se suman px desde 16 → 16px–56px
- Alias corto: .btn-fs-{01–07,0–40}
========================================================================== */
/* Menores que la base (UI compacta, chips, badges, etc.) */
.btn-font-size-01, .btn-fs-01 { font-size: 0.9375rem; } /* 15px */
.btn-font-size-02, .btn-fs-02 { font-size: 0.875rem; } /* 14px */
.btn-font-size-03, .btn-fs-03 { font-size: 0.8125rem; } /* 13px */
.btn-font-size-04, .btn-fs-04 { font-size: 0.75rem; } /* 12px */
.btn-font-size-05, .btn-fs-05 { font-size: 0.6875rem; } /* 11px */
.btn-font-size-06, .btn-fs-06 { font-size: 0.625rem; } /* 10px */
.btn-font-size-07, .btn-fs-07 { font-size: 0.5625rem; } /* 9px */
/* Base body (16px) */
.btn-font-size-0, .btn-fs-0 { font-size: 1rem; } /* 16px */
/* De aquí hacia arriba: crece 1px por nivel */
.btn-font-size-1, .btn-fs-1 { font-size: 1.0625rem; } /* 17px */
.btn-font-size-2, .btn-fs-2 { font-size: 1.125rem; } /* 18px */
.btn-font-size-3, .btn-fs-3 { font-size: 1.1875rem; } /* 19px */
.btn-font-size-4, .btn-fs-4 { font-size: 1.25rem; } /* 20px */
.btn-font-size-5, .btn-fs-5 { font-size: 1.3125rem; } /* 21px */
.btn-font-size-6, .btn-fs-6 { font-size: 1.375rem; } /* 22px */
.btn-font-size-7, .btn-fs-7 { font-size: 1.4375rem; } /* 23px */
.btn-font-size-8, .btn-fs-8 { font-size: 1.5rem; } /* 24px */
.btn-font-size-9, .btn-fs-9 { font-size: 1.5625rem; } /* 25px */
.btn-font-size-10, .btn-fs-10 { font-size: 1.625rem; } /* 26px */
.btn-font-size-11, .btn-fs-11 { font-size: 1.6875rem; } /* 27px */
.btn-font-size-12, .btn-fs-12 { font-size: 1.75rem; } /* 28px */
.btn-font-size-13, .btn-fs-13 { font-size: 1.8125rem; } /* 29px */
.btn-font-size-14, .btn-fs-14 { font-size: 1.875rem; } /* 30px */
.btn-font-size-15, .btn-fs-15 { font-size: 1.9375rem; } /* 31px */
.btn-font-size-16, .btn-fs-16 { font-size: 2rem; } /* 32px */
.btn-font-size-17, .btn-fs-17 { font-size: 2.0625rem; } /* 33px */
.btn-font-size-18, .btn-fs-18 { font-size: 2.125rem; } /* 34px */
.btn-font-size-19, .btn-fs-19 { font-size: 2.1875rem; } /* 35px */
.btn-font-size-20, .btn-fs-20 { font-size: 2.25rem; } /* 36px */
.btn-font-size-21, .btn-fs-21 { font-size: 2.3125rem; } /* 37px */
.btn-font-size-22, .btn-fs-22 { font-size: 2.375rem; } /* 38px */
.btn-font-size-23, .btn-fs-23 { font-size: 2.4375rem; } /* 39px */
.btn-font-size-24, .btn-fs-24 { font-size: 2.5rem; } /* 40px */
.btn-font-size-25, .btn-fs-25 { font-size: 2.5625rem; } /* 41px */
.btn-font-size-26, .btn-fs-26 { font-size: 2.625rem; } /* 42px */
.btn-font-size-27, .btn-fs-27 { font-size: 2.6875rem; } /* 43px */
.btn-font-size-28, .btn-fs-28 { font-size: 2.75rem; } /* 44px */
.btn-font-size-29, .btn-fs-29 { font-size: 2.8125rem; } /* 45px */
.btn-font-size-30, .btn-fs-30 { font-size: 2.875rem; } /* 46px */
.btn-font-size-31, .btn-fs-31 { font-size: 2.9375rem; } /* 47px */
.btn-font-size-32, .btn-fs-32 { font-size: 3rem; } /* 48px */
.btn-font-size-33, .btn-fs-33 { font-size: 3.0625rem; } /* 49px */
.btn-font-size-34, .btn-fs-34 { font-size: 3.125rem; } /* 50px */
.btn-font-size-35, .btn-fs-35 { font-size: 3.1875rem; } /* 51px */
.btn-font-size-36, .btn-fs-36 { font-size: 3.25rem; } /* 52px */
.btn-font-size-37, .btn-fs-37 { font-size: 3.3125rem; } /* 53px */
.btn-font-size-38, .btn-fs-38 { font-size: 3.375rem; } /* 54px */
.btn-font-size-39, .btn-fs-39 { font-size: 3.4375rem; } /* 55px */
.btn-font-size-40, .btn-fs-40 { font-size: 3.5rem; } /* 56px */
/* ==========================================================================
VARIANTES SÓLIDAS (con alias cortos)
========================================================================== */
/* Primary */
.btn-primary,
.btn-p {
background-color: var(--q-color-btn-primary);
border-color: var(--q-color-btn-primary-border);
color: var(--q-color-btn-white);
}
.btn-primary:hover,
.btn-p:hover {
background-color: var(--q-color-btn-primary-h);
border-color: var(--q-color-btn-primary-border-h);
}
/* Secondary */
.btn-secondary,
.btn-s {
background-color: var(--q-color-btn-secondary);
border-color: var(--q-color-btn-secondary);
color: var(--q-color-btn-white);
}
.btn-secondary:hover,
.btn-s:hover {
background-color: var(--q-color-btn-secondary-h);
border-color: var(--q-color-btn-secondary-h);
}
/* Success */
.btn-success,
.btn-g {
background-color: var(--q-color-btn-success);
border-color: var(--q-color-btn-success);
color: var(--q-color-btn-white);
}
.btn-success:hover,
.btn-g:hover {
background-color: var(--q-color-btn-success-h);
border-color: var(--q-color-btn-success-h);
}
/* Danger */
.btn-danger,
.btn-d {
background-color: var(--q-color-btn-danger);
border-color: var(--q-color-btn-danger);
color: var(--q-color-btn-white);
}
.btn-danger:hover,
.btn-d:hover {
background-color: var(--q-color-btn-danger-h);
border-color: var(--q-color-btn-danger-h);
}
/* Warning */
.btn-warning,
.btn-w {
background-color: var(--q-color-btn-warning);
border-color: var(--q-color-btn-warning);
color: var(--q-color-btn-text);
}
.btn-warning:hover,
.btn-w:hover {
background-color: var(--q-color-btn-warning-h);
border-color: var(--q-color-btn-warning-h);
}
/* Dark */
.btn-dark,
.btn-k {
background-color: var(--q-color-btn-dark);
border-color: var(--q-color-btn-dark-border);
color: var(--q-color-btn-white);
}
.btn-dark:hover,
.btn-k:hover {
background-color: var(--q-color-btn-dark-h);
border-color: var(--q-color-btn-dark-border);
}
/* Light */
.btn-light,
.btn-l {
background-color: var(--q-color-btn-light);
border-color: var(--q-color-btn-light-h);
color: var(--q-color-btn-text);
}
.btn-light:hover,
.btn-l:hover {
background-color: var(--q-color-btn-light-h);
}
/* ==========================================================================
BOTONES ICON-ONLY (.btn-ico)
- Cuadrados, mantienen proporción por font-size
========================================================================== */
.btn-ico {
padding-inline: 0;
min-width: 2.6em;
min-height: 2.6em;
}
/* Iconos dentro de botones (svg, i, span.ico, etc.) */
.btn .ico,
.btn-ico .ico,
.btn svg,
.btn-ico svg {
flex-shrink: 0;
width: 1em;
height: 1em;
}
/* Helper opcional para icono a la derecha/izquierda */
.btn .ico-left { margin-right: 0.5em; }
.btn .ico-right { margin-left: 0.5em; }
/* ===== src/css/utilidades/borders.css ===== */
/* ===================================================================
QuicklyCSS v2 – borders.css
Utilidades base de box-sizing, bordes y radios.
Este archivo no define variantes responsivas de grosor o radio.
Las variantes responsivas de color viven en el módulo unificado color.css.
=================================================================== */
/* --------------------------------------------------------------------------
1. Modelos base
-------------------------------------------------------------------------- */
/* Modo moderno recomendado: incluye padding y border en width/height */
.box-border {
box-sizing: border-box !important;
}
/* Modo clásico: padding y border se suman al width/height */
.box-content {
box-sizing: content-box !important;
}
/* --------------------------------------------------------------------------
2. Resets y herencia
-------------------------------------------------------------------------- */
/* Restaura el valor inicial definido por el navegador */
.box-initial {
box-sizing: initial !important;
}
/* Hereda el box-sizing desde el padre */
.box-inherit {
box-sizing: inherit !important;
}
/* Elimina overrides y usa el valor por defecto según el contexto */
.box-unset {
box-sizing: unset !important;
}
/* Revierte al valor del user-agent / hoja anterior */
.box-revert {
box-sizing: revert !important;
}
/* ----------------------------- Base ------------------------------------- */
/* Estas utilidades crean la estructura del borde. El grosor, el estilo y el
color pueden modificarse después con sus utilidades especializadas. */
.border {
border-width: var(--q-border-thin);
border-style: solid;
}
/* Ejes */
.border-x {
border-left-width: var(--q-border-thin);
border-right-width: var(--q-border-thin);
border-left-style: solid;
border-right-style: solid;
}
.border-y {
border-top-width: var(--q-border-thin);
border-bottom-width: var(--q-border-thin);
border-top-style: solid;
border-bottom-style: solid;
}
/* Lados (1px por defecto) */
.border-t {
border-top-width: var(--q-border-thin);
border-top-style: solid;
}
.border-r {
border-right-width: var(--q-border-thin);
border-right-style: solid;
}
.border-b {
border-bottom-width: var(--q-border-thin);
border-bottom-style: solid;
}
.border-l {
border-left-width: var(--q-border-thin);
border-left-style: solid;
}
/* Estilos de borde (shorthand) */
.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-double { border-style: double !important; }
.border-hidden { border-style: hidden !important; }
.border-none { border-style: none !important; }
/* --------------------------- Ancho de borde ----------------------------- */
/* Escala 0..10 (px). 0 equivale a sin borde visual (mantiene style). */
.border-0 { border-width: var(--q-units-0) !important; }
.border-1 { border-width: var(--q-units-1) !important; }
.border-2 { border-width: var(--q-units-2) !important; }
.border-3 { border-width: var(--q-units-3) !important; }
.border-4 { border-width: var(--q-units-4) !important; }
.border-5 { border-width: var(--q-units-5) !important; }
.border-6 { border-width: var(--q-units-6) !important; }
.border-7 { border-width: var(--q-units-7) !important; }
.border-8 { border-width: var(--q-units-8) !important; }
.border-9 { border-width: var(--q-units-9) !important; }
.border-10 { border-width: var(--q-units-10) !important; }
/* Ancho por lado (0..10 px) */
.border-t-0 { border-top-width: var(--q-units-0) !important; }
.border-t-1 { border-top-width: var(--q-units-1) !important; }
.border-t-2 { border-top-width: var(--q-units-2) !important; }
.border-t-3 { border-top-width: var(--q-units-3) !important; }
.border-t-4 { border-top-width: var(--q-units-4) !important; }
.border-t-5 { border-top-width: var(--q-units-5) !important; }
.border-t-6 { border-top-width: var(--q-units-6) !important; }
.border-t-7 { border-top-width: var(--q-units-7) !important; }
.border-t-8 { border-top-width: var(--q-units-8) !important; }
.border-t-9 { border-top-width: var(--q-units-9) !important; }
.border-t-10 { border-top-width: var(--q-units-10) !important; }
.border-r-0 { border-right-width: var(--q-units-0) !important; }
.border-r-1 { border-right-width: var(--q-units-1) !important; }
.border-r-2 { border-right-width: var(--q-units-2) !important; }
.border-r-3 { border-right-width: var(--q-units-3) !important; }
.border-r-4 { border-right-width: var(--q-units-4) !important; }
.border-r-5 { border-right-width: var(--q-units-5) !important; }
.border-r-6 { border-right-width: var(--q-units-6) !important; }
.border-r-7 { border-right-width: var(--q-units-7) !important; }
.border-r-8 { border-right-width: var(--q-units-8) !important; }
.border-r-9 { border-right-width: var(--q-units-9) !important; }
.border-r-10 { border-right-width: var(--q-units-10) !important; }
.border-b-0 { border-bottom-width: var(--q-units-0) !important; }
.border-b-1 { border-bottom-width: var(--q-units-1) !important; }
.border-b-2 { border-bottom-width: var(--q-units-2) !important; }
.border-b-3 { border-bottom-width: var(--q-units-3) !important; }
.border-b-4 { border-bottom-width: var(--q-units-4) !important; }
.border-b-5 { border-bottom-width: var(--q-units-5) !important; }
.border-b-6 { border-bottom-width: var(--q-units-6) !important; }
.border-b-7 { border-bottom-width: var(--q-units-7) !important; }
.border-b-8 { border-bottom-width: var(--q-units-8) !important; }
.border-b-9 { border-bottom-width: var(--q-units-9) !important; }
.border-b-10 { border-bottom-width: var(--q-units-10) !important; }
.border-l-0 { border-left-width: var(--q-units-0) !important; }
.border-l-1 { border-left-width: var(--q-units-1) !important; }
.border-l-2 { border-left-width: var(--q-units-2) !important; }
.border-l-3 { border-left-width: var(--q-units-3) !important; }
.border-l-4 { border-left-width: var(--q-units-4) !important; }
.border-l-5 { border-left-width: var(--q-units-5) !important; }
.border-l-6 { border-left-width: var(--q-units-6) !important; }
.border-l-7 { border-left-width: var(--q-units-7) !important; }
.border-l-8 { border-left-width: var(--q-units-8) !important; }
.border-l-9 { border-left-width: var(--q-units-9) !important; }
.border-l-10 { border-left-width: var(--q-units-10) !important; }
/* ----------------------------- Radius (4px * n) ------------------------- */
/* Nomenclatura nueva: .rounded-4, .rounded-8, ..., .rounded-100 (px) */
.rounded-0 { border-radius: 0 !important; }
.rounded { border-radius: var(--q-radius-2) !important; }
.rounded-2 { border-radius: var(--q-radius-2) !important; }
.rounded-4 { border-radius: var(--q-radius-4) !important; }
.rounded-8 { border-radius: var(--q-radius-8) !important; }
.rounded-12 { border-radius: var(--q-radius-12) !important; }
.rounded-16 { border-radius: var(--q-radius-16) !important; }
.rounded-20 { border-radius: var(--q-radius-20) !important; }
.rounded-24 { border-radius: var(--q-radius-24) !important; }
.rounded-28 { border-radius: var(--q-radius-28) !important; }
.rounded-32 { border-radius: var(--q-radius-32) !important; }
.rounded-36 { border-radius: var(--q-radius-36) !important; }
.rounded-40 { border-radius: var(--q-radius-40) !important; }
.rounded-44 { border-radius: var(--q-radius-44) !important; }
.rounded-48 { border-radius: var(--q-radius-48) !important; }
.rounded-52 { border-radius: var(--q-radius-52) !important; }
.rounded-56 { border-radius: var(--q-radius-56) !important; }
.rounded-60 { border-radius: var(--q-radius-60) !important; }
.rounded-64 { border-radius: var(--q-radius-64) !important; }
.rounded-68 { border-radius: var(--q-radius-68) !important; }
.rounded-72 { border-radius: var(--q-radius-72) !important; }
.rounded-76 { border-radius: var(--q-radius-76) !important; }
.rounded-80 { border-radius: var(--q-radius-80) !important; }
.rounded-84 { border-radius: var(--q-radius-84) !important; }
.rounded-88 { border-radius: var(--q-radius-88) !important; }
.rounded-92 { border-radius: var(--q-radius-92) !important; }
.rounded-96 { border-radius: var(--q-radius-96) !important; }
.rounded-100 { border-radius: var(--q-radius-100) !important; }
/* Formas rápidas */
.rounded-c { border-radius: var(--q-radius-full) !important; } /* círculo si el elemento es cuadrado */
.rounded-p { border-radius: var(--q-radius-full) !important; } /* píldora (depende de w/h) */
/* Lados con radius (multiplicador de 4px) */
.rounded-t-4 { border-top-left-radius: var(--q-radius-4) !important; border-top-right-radius: var(--q-radius-4) !important; }
.rounded-r-4 { border-top-right-radius: var(--q-radius-4) !important; border-bottom-right-radius: var(--q-radius-4) !important; }
.rounded-b-4 { border-bottom-right-radius: var(--q-radius-4) !important; border-bottom-left-radius: var(--q-radius-4) !important; }
.rounded-l-4 { border-top-left-radius: var(--q-radius-4) !important; border-bottom-left-radius: var(--q-radius-4) !important; }
.rounded-t-8 { border-top-left-radius: var(--q-radius-8) !important; border-top-right-radius: var(--q-radius-8) !important; }
.rounded-r-8 { border-top-right-radius: var(--q-radius-8) !important; border-bottom-right-radius: var(--q-radius-8) !important; }
.rounded-b-8 { border-bottom-right-radius: var(--q-radius-8) !important; border-bottom-left-radius: var(--q-radius-8) !important; }
.rounded-l-8 { border-top-left-radius: var(--q-radius-8) !important; border-bottom-left-radius: var(--q-radius-8) !important; }
.rounded-t-12 { border-top-left-radius: var(--q-radius-12) !important; border-top-right-radius: var(--q-radius-12) !important; }
.rounded-r-12 { border-top-right-radius: var(--q-radius-12) !important; border-bottom-right-radius: var(--q-radius-12) !important; }
.rounded-b-12 { border-bottom-right-radius: var(--q-radius-12) !important; border-bottom-left-radius: var(--q-radius-12) !important; }
.rounded-l-12 { border-top-left-radius: var(--q-radius-12) !important; border-bottom-left-radius: var(--q-radius-12) !important; }
.rounded-t-16 { border-top-left-radius: var(--q-radius-16) !important; border-top-right-radius: var(--q-radius-16) !important; }
.rounded-r-16 { border-top-right-radius: var(--q-radius-16) !important; border-bottom-right-radius: var(--q-radius-16) !important; }
.rounded-b-16 { border-bottom-right-radius: var(--q-radius-16) !important; border-bottom-left-radius: var(--q-radius-16) !important; }
.rounded-l-16 { border-top-left-radius: var(--q-radius-16) !important; border-bottom-left-radius: var(--q-radius-16) !important; }
.rounded-t-20 { border-top-left-radius: var(--q-radius-20) !important; border-top-right-radius: var(--q-radius-20) !important; }
.rounded-r-20 { border-top-right-radius: var(--q-radius-20) !important; border-bottom-right-radius: var(--q-radius-20) !important; }
.rounded-b-20 { border-bottom-right-radius: var(--q-radius-20) !important; border-bottom-left-radius: var(--q-radius-20) !important; }
.rounded-l-20 { border-top-left-radius: var(--q-radius-20) !important; border-bottom-left-radius: var(--q-radius-20) !important; }
/* Esquinas selectivas (a=TL, b=TR, c=BR, d=BL) */
.rounded-s-a-4 { border-top-left-radius: var(--q-radius-4) !important; }
.rounded-s-b-4 { border-top-right-radius: var(--q-radius-4) !important; }
.rounded-s-c-4 { border-bottom-right-radius: var(--q-radius-4) !important; }
.rounded-s-d-4 { border-bottom-left-radius: var(--q-radius-4) !important; }
.rounded-s-a-8 { border-top-left-radius: var(--q-radius-8) !important; }
.rounded-s-b-8 { border-top-right-radius: var(--q-radius-8) !important; }
.rounded-s-c-8 { border-bottom-right-radius: var(--q-radius-8) !important; }
.rounded-s-d-8 { border-bottom-left-radius: var(--q-radius-8) !important; }
.rounded-s-a-12 { border-top-left-radius: var(--q-radius-12) !important; }
.rounded-s-b-12 { border-top-right-radius: var(--q-radius-12) !important; }
.rounded-s-c-12 { border-bottom-right-radius: var(--q-radius-12) !important; }
.rounded-s-d-12 { border-bottom-left-radius: var(--q-radius-12) !important; }
.rounded-s-a-16 { border-top-left-radius: var(--q-radius-16) !important; }
.rounded-s-b-16 { border-top-right-radius: var(--q-radius-16) !important; }
.rounded-s-c-16 { border-bottom-right-radius: var(--q-radius-16) !important; }
.rounded-s-d-16 { border-bottom-left-radius: var(--q-radius-16) !important; }
.rounded-s-a-20 { border-top-left-radius: var(--q-radius-20) !important; }
.rounded-s-b-20 { border-top-right-radius: var(--q-radius-20) !important; }
.rounded-s-c-20 { border-bottom-right-radius: var(--q-radius-20) !important; }
.rounded-s-d-20 { border-bottom-left-radius: var(--q-radius-20) !important; }
/* ----------------------------------------------------------------------- */
/* Los colores se componen desde color.css:
.bc-{token} selecciona el color y .border / .border-{lado} lo aplica.
También existen alias directos como .border-primary o .border-l-danger.
*/
/* ===== src/css/contenidos/color.css ===== */
/* ==========================================================================
QuicklyCSS v2 — color.css
Sistema unificado de tokens y utilidades para texto, fondos y bordes.
Namespace de tokens: --qy-*
Familias de clases:
- .color-* → color
- .bg-* → background-color
- .bc-* → selecciona el color de énfasis consumido por componentes
- .border-* → aplica color de borde directamente
========================================================================== */
/* ==========================================================
TOKENS DE COLOR (THEME)
Paleta cromática del sistema Quickly V2.
========================================================== */
:root {
/* Básicos */
--qy-white: #ffffff;
--qy-black: #000000;
/* ------------------------------
SLATE
------------------------------ */
--qy-slate-50: #f8fafc;
--qy-slate-100: #f1f5f9;
--qy-slate-200: #e2e8f0;
--qy-slate-300: #cbd5e1;
--qy-slate-400: #94a3b8;
--qy-slate-500: #64748b;
--qy-slate-600: #475569;
--qy-slate-700: #334155;
--qy-slate-800: #1e293b;
--qy-slate-900: #0f172a;
--qy-slate-950: #020617;
/* ------------------------------
GRAY
------------------------------ */
--qy-gray-50: #f9fafb;
--qy-gray-100: #f3f4f6;
--qy-gray-200: #e5e7eb;
--qy-gray-300: #d1d5db;
--qy-gray-400: #9ca3af;
--qy-gray-500: #6b7280;
--qy-gray-600: #4b5563;
--qy-gray-700: #374151;
--qy-gray-800: #1f2937;
--qy-gray-900: #111827;
--qy-gray-950: #030712;
/* ------------------------------
ZINC
------------------------------ */
--qy-zinc-50: #fafafa;
--qy-zinc-100: #f4f4f5;
--qy-zinc-200: #e4e4e7;
--qy-zinc-300: #d4d4d8;
--qy-zinc-400: #a1a1aa;
--qy-zinc-500: #71717a;
--qy-zinc-600: #52525b;
--qy-zinc-700: #3f3f46;
--qy-zinc-800: #27272a;
--qy-zinc-900: #18181b;
--qy-zinc-950: #09090b;
/* ------------------------------
NEUTRAL
------------------------------ */
--qy-neutral-50: #fafafa;
--qy-neutral-100: #f5f5f5;
--qy-neutral-200: #e5e5e5;
--qy-neutral-300: #d4d4d4;
--qy-neutral-400: #a3a3a3;
--qy-neutral-500: #737373;
--qy-neutral-600: #525252;
--qy-neutral-700: #404040;
--qy-neutral-800: #262626;
--qy-neutral-900: #171717;
--qy-neutral-950: #0a0a0a;
/* ------------------------------
STONE
------------------------------ */
--qy-stone-50: #fafaf9;
--qy-stone-100: #f5f5f4;
--qy-stone-200: #e7e5e4;
--qy-stone-300: #d6d3d1;
--qy-stone-400: #a8a29e;
--qy-stone-500: #78716c;
--qy-stone-600: #57534e;
--qy-stone-700: #44403c;
--qy-stone-800: #292524;
--qy-stone-900: #1c1917;
--qy-stone-950: #0c0a09;
/* ------------------------------
RED
------------------------------ */
--qy-red-50: #fef2f2;
--qy-red-100: #fee2e2;
--qy-red-200: #fecaca;
--qy-red-300: #fca5a5;
--qy-red-400: #f87171;
--qy-red-500: #ef4444;
--qy-red-600: #dc2626;
--qy-red-700: #b91c1c;
--qy-red-800: #991b1b;
--qy-red-900: #7f1d1d;
--qy-red-950: #450a0a;
/* ------------------------------
ORANGE
------------------------------ */
--qy-orange-50: #fff7ed;
--qy-orange-100: #ffedd5;
--qy-orange-200: #fed7aa;
--qy-orange-300: #fdba74;
--qy-orange-400: #fb923c;
--qy-orange-500: #f97316;
--qy-orange-600: #ea580c;
--qy-orange-700: #c2410c;
--qy-orange-800: #9a3412;
--qy-orange-900: #7c2d12;
--qy-orange-950: #431407;
/* ------------------------------
AMBER
------------------------------ */
--qy-amber-50: #fffbeb;
--qy-amber-100: #fef3c7;
--qy-amber-200: #fde68a;
--qy-amber-300: #fcd34d;
--qy-amber-400: #fbbf24;
--qy-amber-500: #f59e0b;
--qy-amber-600: #d97706;
--qy-amber-700: #b45309;
--qy-amber-800: #92400e;
--qy-amber-900: #78350f;
--qy-amber-950: #451a03;
/* ------------------------------
YELLOW
------------------------------ */
--qy-yellow-50: #fefce8;
--qy-yellow-100: #fef9c3;
--qy-yellow-200: #fef08a;
--qy-yellow-300: #fde047;
--qy-yellow-400: #facc15;
--qy-yellow-500: #eab308;
--qy-yellow-600: #ca8a04;
--qy-yellow-700: #a16207;
--qy-yellow-800: #854d0e;
--qy-yellow-900: #713f12;
--qy-yellow-950: #422006;
/* ------------------------------
LIME
------------------------------ */
--qy-lime-50: #f7fee7;
--qy-lime-100: #ecfccb;
--qy-lime-200: #d9f99d;
--qy-lime-300: #bef264;
--qy-lime-400: #a3e635;
--qy-lime-500: #84cc16;
--qy-lime-600: #65a30d;
--qy-lime-700: #4d7c0f;
--qy-lime-800: #3f6212;
--qy-lime-900: #365314;
--qy-lime-950: #1a2e05;
/* ------------------------------
GREEN
------------------------------ */
--qy-green-50: #f0fdf4;
--qy-green-100: #dcfce7;
--qy-green-200: #bbf7d0;
--qy-green-300: #86efac;
--qy-green-400: #4ade80;
--qy-green-500: #22c55e;
--qy-green-600: #16a34a;
--qy-green-700: #15803d;
--qy-green-800: #166534;
--qy-green-900: #14532d;
--qy-green-950: #052e16;
/* ------------------------------
EMERALD
------------------------------ */
--qy-emerald-50: #ecfdf5;
--qy-emerald-100: #d1fae5;
--qy-emerald-200: #a7f3d0;
--qy-emerald-300: #6ee7b7;
--qy-emerald-400: #34d399;
--qy-emerald-500: #10b981;
--qy-emerald-600: #059669;
--qy-emerald-700: #047857;
--qy-emerald-800: #065f46;
--qy-emerald-900: #064e3b;
--qy-emerald-950: #022c22;
/* ------------------------------
TEAL
------------------------------ */
--qy-teal-50: #f0fdfa;
--qy-teal-100: #ccfbf1;
--qy-teal-200: #99f6e4;
--qy-teal-300: #5eead4;
--qy-teal-400: #2dd4bf;
--qy-teal-500: #14b8a6;
--qy-teal-600: #0d9488;
--qy-teal-700: #0f766e;
--qy-teal-800: #115e59;
--qy-teal-900: #134e4a;
--qy-teal-950: #042f2e;
/* ------------------------------
CYAN
------------------------------ */
--qy-cyan-50: #ecfeff;
--qy-cyan-100: #cffafe;
--qy-cyan-200: #a5f3fc;
--qy-cyan-300: #67e8f9;
--qy-cyan-400: #22d3ee;
--qy-cyan-500: #06b6d4;
--qy-cyan-600: #0891b2;
--qy-cyan-700: #0e7490;
--qy-cyan-800: #155e75;
--qy-cyan-900: #164e63;
--qy-cyan-950: #083344;
/* ------------------------------
SKY
------------------------------ */
--qy-sky-50: #f0f9ff;
--qy-sky-100: #e0f2fe;
--qy-sky-200: #bae6fd;
--qy-sky-300: #7dd3fc;
--qy-sky-400: #38bdf8;
--qy-sky-500: #0ea5e9;
--qy-sky-600: #0284c7;
--qy-sky-700: #0369a1;
--qy-sky-800: #075985;
--qy-sky-900: #0c4a6e;
--qy-sky-950: #082f49;
/* ------------------------------
BLUE
------------------------------ */
--qy-blue-50: #eff6ff;
--qy-blue-100: #dbeafe;
--qy-blue-200: #bfdbfe;
--qy-blue-300: #93c5fd;
--qy-blue-400: #60a5fa;
--qy-blue-500: #3b82f6;
--qy-blue-600: #2563eb;
--qy-blue-700: #1d4ed8;
--qy-blue-800: #1e40af;
--qy-blue-900: #1e3a8a;
--qy-blue-950: #172554;
/* ------------------------------
INDIGO
------------------------------ */
--qy-indigo-50: #eef2ff;
--qy-indigo-100: #e0e7ff;
--qy-indigo-200: #c7d2fe;
--qy-indigo-300: #a5b4fc;
--qy-indigo-400: #818cf8;
--qy-indigo-500: #6366f1;
--qy-indigo-600: #4f46e5;
--qy-indigo-700: #4338ca;
--qy-indigo-800: #3730a3;
--qy-indigo-900: #312e81;
--qy-indigo-950: #1e1b4b;
/* ------------------------------
VIOLET
------------------------------ */
--qy-violet-50: #f5f3ff;
--qy-violet-100: #ede9fe;
--qy-violet-200: #ddd6fe;
--qy-violet-300: #c4b5fd;
--qy-violet-400: #a78bfa;
--qy-violet-500: #8b5cf6;
--qy-violet-600: #7c3aed;
--qy-violet-700: #6d28d9;
--qy-violet-800: #5b21b6;
--qy-violet-900: #4c1d95;
--qy-violet-950: #2e1065;
/* ------------------------------
PURPLE
------------------------------ */
--qy-purple-50: #faf5ff;
--qy-purple-100: #f3e8ff;
--qy-purple-200: #e9d5ff;
--qy-purple-300: #d8b4fe;
--qy-purple-400: #c084fc;
--qy-purple-500: #a855f7;
--qy-purple-600: #9333ea;
--qy-purple-700: #7e22ce;
--qy-purple-800: #6b21a8;
--qy-purple-900: #581c87;
--qy-purple-950: #3b0764;
/* ------------------------------
FUCHSIA
------------------------------ */
--qy-fuchsia-50: #fdf4ff;
--qy-fuchsia-100: #fae8ff;
--qy-fuchsia-200: #f5d0fe;
--qy-fuchsia-300: #f0abfc;
--qy-fuchsia-400: #e879f9;
--qy-fuchsia-500: #d946ef;
--qy-fuchsia-600: #c026d3;
--qy-fuchsia-700: #a21caf;
--qy-fuchsia-800: #86198f;
--qy-fuchsia-900: #701a75;
--qy-fuchsia-950: #4a044e;
/* ------------------------------
PINK
------------------------------ */
--qy-pink-50: #fdf2f8;
--qy-pink-100: #fce7f3;
--qy-pink-200: #fbcfe8;
--qy-pink-300: #f9a8d4;
--qy-pink-400: #f472b6;
--qy-pink-500: #ec4899;
--qy-pink-600: #db2777;
--qy-pink-700: #be185d;
--qy-pink-800: #9d174d;
--qy-pink-900: #831843;
--qy-pink-950: #500724;
/* ------------------------------
ROSE
------------------------------ */
--qy-rose-50: #fff1f2;
--qy-rose-100: #ffe4e6;
--qy-rose-200: #fecdd3;
--qy-rose-300: #fda4af;
--qy-rose-400: #fb7185;
--qy-rose-500: #f43f5e;
--qy-rose-600: #e11d48;
--qy-rose-700: #be123c;
--qy-rose-800: #9f1239;
--qy-rose-900: #881337;
--qy-rose-950: #4c0519;
/* ------------------------------
ESCALAS SEMÁNTICAS
Estos alias permiten cambiar la identidad visual del tema sin modificar
las utilidades. Primary usa blue, secondary violet, success green,
warning amber, danger red e info cyan de forma predeterminada.
------------------------------ */
--qy-primary-50: var(--qy-blue-50);
--qy-primary-100: var(--qy-blue-100);
--qy-primary-200: var(--qy-blue-200);
--qy-primary-300: var(--qy-blue-300);
--qy-primary-400: var(--qy-blue-400);
--qy-primary-500: var(--qy-blue-500);
--qy-primary-600: var(--qy-blue-600);
--qy-primary-700: var(--qy-blue-700);
--qy-primary-800: var(--qy-blue-800);
--qy-primary-900: var(--qy-blue-900);
--qy-primary-950: var(--qy-blue-950);
--qy-secondary-50: var(--qy-violet-50);
--qy-secondary-100: var(--qy-violet-100);
--qy-secondary-200: var(--qy-violet-200);
--qy-secondary-300: var(--qy-violet-300);
--qy-secondary-400: var(--qy-violet-400);
--qy-secondary-500: var(--qy-violet-500);
--qy-secondary-600: var(--qy-violet-600);
--qy-secondary-700: var(--qy-violet-700);
--qy-secondary-800: var(--qy-violet-800);
--qy-secondary-900: var(--qy-violet-900);
--qy-secondary-950: var(--qy-violet-950);
--qy-success-50: var(--qy-green-50);
--qy-success-100: var(--qy-green-100);
--qy-success-200: var(--qy-green-200);
--qy-success-300: var(--qy-green-300);
--qy-success-400: var(--qy-green-400);
--qy-success-500: var(--qy-green-500);
--qy-success-600: var(--qy-green-600);
--qy-success-700: var(--qy-green-700);
--qy-success-800: var(--qy-green-800);
--qy-success-900: var(--qy-green-900);
--qy-success-950: var(--qy-green-950);
--qy-warning-50: var(--qy-amber-50);
--qy-warning-100: var(--qy-amber-100);
--qy-warning-200: var(--qy-amber-200);
--qy-warning-300: var(--qy-amber-300);
--qy-warning-400: var(--qy-amber-400);
--qy-warning-500: var(--qy-amber-500);
--qy-warning-600: var(--qy-amber-600);
--qy-warning-700: var(--qy-amber-700);
--qy-warning-800: var(--qy-amber-800);
--qy-warning-900: var(--qy-amber-900);
--qy-warning-950: var(--qy-amber-950);
--qy-danger-50: var(--qy-red-50);
--qy-danger-100: var(--qy-red-100);
--qy-danger-200: var(--qy-red-200);
--qy-danger-300: var(--qy-red-300);
--qy-danger-400: var(--qy-red-400);
--qy-danger-500: var(--qy-red-500);
--qy-danger-600: var(--qy-red-600);
--qy-danger-700: var(--qy-red-700);
--qy-danger-800: var(--qy-red-800);
--qy-danger-900: var(--qy-red-900);
--qy-danger-950: var(--qy-red-950);
--qy-info-50: var(--qy-cyan-50);
--qy-info-100: var(--qy-cyan-100);
--qy-info-200: var(--qy-cyan-200);
--qy-info-300: var(--qy-cyan-300);
--qy-info-400: var(--qy-cyan-400);
--qy-info-500: var(--qy-cyan-500);
--qy-info-600: var(--qy-cyan-600);
--qy-info-700: var(--qy-cyan-700);
--qy-info-800: var(--qy-cyan-800);
--qy-info-900: var(--qy-cyan-900);
--qy-info-950: var(--qy-cyan-950);
}
/* ==========================================================
UTILIDADES DE COLOR DE TEXTO
.color-{color}-{tone}
========================================================== */
/* Helper para white / black */
.color-white { color: var(--qy-white); }
.color-black { color: var(--qy-black); }
/* SLATE */
.color-slate-50 { color: var(--qy-slate-50); }
.color-slate-100 { color: var(--qy-slate-100); }
.color-slate-200 { color: var(--qy-slate-200); }
.color-slate-300 { color: var(--qy-slate-300); }
.color-slate-400 { color: var(--qy-slate-400); }
.color-slate-500 { color: var(--qy-slate-500); }
.color-slate-600 { color: var(--qy-slate-600); }
.color-slate-700 { color: var(--qy-slate-700); }
.color-slate-800 { color: var(--qy-slate-800); }
.color-slate-900 { color: var(--qy-slate-900); }
.color-slate-950 { color: var(--qy-slate-950); }
/* GRAY */
.color-gray-50 { color: var(--qy-gray-50); }
.color-gray-100 { color: var(--qy-gray-100); }
.color-gray-200 { color: var(--qy-gray-200); }
.color-gray-300 { color: var(--qy-gray-300); }
.color-gray-400 { color: var(--qy-gray-400); }
.color-gray-500 { color: var(--qy-gray-500); }
.color-gray-600 { color: var(--qy-gray-600); }
.color-gray-700 { color: var(--qy-gray-700); }
.color-gray-800 { color: var(--qy-gray-800); }
.color-gray-900 { color: var(--qy-gray-900); }
.color-gray-950 { color: var(--qy-gray-950); }
/* ZINC */
.color-zinc-50 { color: var(--qy-zinc-50); }
.color-zinc-100 { color: var(--qy-zinc-100); }
.color-zinc-200 { color: var(--qy-zinc-200); }
.color-zinc-300 { color: var(--qy-zinc-300); }
.color-zinc-400 { color: var(--qy-zinc-400); }
.color-zinc-500 { color: var(--qy-zinc-500); }
.color-zinc-600 { color: var(--qy-zinc-600); }
.color-zinc-700 { color: var(--qy-zinc-700); }
.color-zinc-800 { color: var(--qy-zinc-800); }
.color-zinc-900 { color: var(--qy-zinc-900); }
.color-zinc-950 { color: var(--qy-zinc-950); }
/* NEUTRAL */
.color-neutral-50 { color: var(--qy-neutral-50); }
.color-neutral-100 { color: var(--qy-neutral-100); }
.color-neutral-200 { color: var(--qy-neutral-200); }
.color-neutral-300 { color: var(--qy-neutral-300); }
.color-neutral-400 { color: var(--qy-neutral-400); }
.color-neutral-500 { color: var(--qy-neutral-500); }
.color-neutral-600 { color: var(--qy-neutral-600); }
.color-neutral-700 { color: var(--qy-neutral-700); }
.color-neutral-800 { color: var(--qy-neutral-800); }
.color-neutral-900 { color: var(--qy-neutral-900); }
.color-neutral-950 { color: var(--qy-neutral-950); }
/* STONE */
.color-stone-50 { color: var(--qy-stone-50); }
.color-stone-100 { color: var(--qy-stone-100); }
.color-stone-200 { color: var(--qy-stone-200); }
.color-stone-300 { color: var(--qy-stone-300); }
.color-stone-400 { color: var(--qy-stone-400); }
.color-stone-500 { color: var(--qy-stone-500); }
.color-stone-600 { color: var(--qy-stone-600); }
.color-stone-700 { color: var(--qy-stone-700); }
.color-stone-800 { color: var(--qy-stone-800); }
.color-stone-900 { color: var(--qy-stone-900); }
.color-stone-950 { color: var(--qy-stone-950); }
/* RED */
.color-red-50 { color: var(--qy-red-50); }
.color-red-100 { color: var(--qy-red-100); }
.color-red-200 { color: var(--qy-red-200); }
.color-red-300 { color: var(--qy-red-300); }
.color-red-400 { color: var(--qy-red-400); }
.color-red-500 { color: var(--qy-red-500); }
.color-red-600 { color: var(--qy-red-600); }
.color-red-700 { color: var(--qy-red-700); }
.color-red-800 { color: var(--qy-red-800); }
.color-red-900 { color: var(--qy-red-900); }
.color-red-950 { color: var(--qy-red-950); }
/* ORANGE */
.color-orange-50 { color: var(--qy-orange-50); }
.color-orange-100 { color: var(--qy-orange-100); }
.color-orange-200 { color: var(--qy-orange-200); }
.color-orange-300 { color: var(--qy-orange-300); }
.color-orange-400 { color: var(--qy-orange-400); }
.color-orange-500 { color: var(--qy-orange-500); }
.color-orange-600 { color: var(--qy-orange-600); }
.color-orange-700 { color: var(--qy-orange-700); }
.color-orange-800 { color: var(--qy-orange-800); }
.color-orange-900 { color: var(--qy-orange-900); }
.color-orange-950 { color: var(--qy-orange-950); }
/* AMBER */
.color-amber-50 { color: var(--qy-amber-50); }
.color-amber-100 { color: var(--qy-amber-100); }
.color-amber-200 { color: var(--qy-amber-200); }
.color-amber-300 { color: var(--qy-amber-300); }
.color-amber-400 { color: var(--qy-amber-400); }
.color-amber-500 { color: var(--qy-amber-500); }
.color-amber-600 { color: var(--qy-amber-600); }
.color-amber-700 { color: var(--qy-amber-700); }
.color-amber-800 { color: var(--qy-amber-800); }
.color-amber-900 { color: var(--qy-amber-900); }
.color-amber-950 { color: var(--qy-amber-950); }
/* YELLOW */
.color-yellow-50 { color: var(--qy-yellow-50); }
.color-yellow-100 { color: var(--qy-yellow-100); }
.color-yellow-200 { color: var(--qy-yellow-200); }
.color-yellow-300 { color: var(--qy-yellow-300); }
.color-yellow-400 { color: var(--qy-yellow-400); }
.color-yellow-500 { color: var(--qy-yellow-500); }
.color-yellow-600 { color: var(--qy-yellow-600); }
.color-yellow-700 { color: var(--qy-yellow-700); }
.color-yellow-800 { color: var(--qy-yellow-800); }
.color-yellow-900 { color: var(--qy-yellow-900); }
.color-yellow-950 { color: var(--qy-yellow-950); }
/* LIME */
.color-lime-50 { color: var(--qy-lime-50); }
.color-lime-100 { color: var(--qy-lime-100); }
.color-lime-200 { color: var(--qy-lime-200); }
.color-lime-300 { color: var(--qy-lime-300); }
.color-lime-400 { color: var(--qy-lime-400); }
.color-lime-500 { color: var(--qy-lime-500); }
.color-lime-600 { color: var(--qy-lime-600); }
.color-lime-700 { color: var(--qy-lime-700); }
.color-lime-800 { color: var(--qy-lime-800); }
.color-lime-900 { color: var(--qy-lime-900); }
.color-lime-950 { color: var(--qy-lime-950); }
/* GREEN */
.color-green-50 { color: var(--qy-green-50); }
.color-green-100 { color: var(--qy-green-100); }
.color-green-200 { color: var(--qy-green-200); }
.color-green-300 { color: var(--qy-green-300); }
.color-green-400 { color: var(--qy-green-400); }
.color-green-500 { color: var(--qy-green-500); }
.color-green-600 { color: var(--qy-green-600); }
.color-green-700 { color: var(--qy-green-700); }
.color-green-800 { color: var(--qy-green-800); }
.color-green-900 { color: var(--qy-green-900); }
.color-green-950 { color: var(--qy-green-950); }
/* EMERALD */
.color-emerald-50 { color: var(--qy-emerald-50); }
.color-emerald-100 { color: var(--qy-emerald-100); }
.color-emerald-200 { color: var(--qy-emerald-200); }
.color-emerald-300 { color: var(--qy-emerald-300); }
.color-emerald-400 { color: var(--qy-emerald-400); }
.color-emerald-500 { color: var(--qy-emerald-500); }
.color-emerald-600 { color: var(--qy-emerald-600); }
.color-emerald-700 { color: var(--qy-emerald-700); }
.color-emerald-800 { color: var(--qy-emerald-800); }
.color-emerald-900 { color: var(--qy-emerald-900); }
.color-emerald-950 { color: var(--qy-emerald-950); }
/* TEAL */
.color-teal-50 { color: var(--qy-teal-50); }
.color-teal-100 { color: var(--qy-teal-100); }
.color-teal-200 { color: var(--qy-teal-200); }
.color-teal-300 { color: var(--qy-teal-300); }
.color-teal-400 { color: var(--qy-teal-400); }
.color-teal-500 { color: var(--qy-teal-500); }
.color-teal-600 { color: var(--qy-teal-600); }
.color-teal-700 { color: var(--qy-teal-700); }
.color-teal-800 { color: var(--qy-teal-800); }
.color-teal-900 { color: var(--qy-teal-900); }
.color-teal-950 { color: var(--qy-teal-950); }
/* CYAN */
.color-cyan-50 { color: var(--qy-cyan-50); }
.color-cyan-100 { color: var(--qy-cyan-100); }
.color-cyan-200 { color: var(--qy-cyan-200); }
.color-cyan-300 { color: var(--qy-cyan-300); }
.color-cyan-400 { color: var(--qy-cyan-400); }
.color-cyan-500 { color: var(--qy-cyan-500); }
.color-cyan-600 { color: var(--qy-cyan-600); }
.color-cyan-700 { color: var(--qy-cyan-700); }
.color-cyan-800 { color: var(--qy-cyan-800); }
.color-cyan-900 { color: var(--qy-cyan-900); }
.color-cyan-950 { color: var(--qy-cyan-950); }
/* SKY */
.color-sky-50 { color: var(--qy-sky-50); }
.color-sky-100 { color: var(--qy-sky-100); }
.color-sky-200 { color: var(--qy-sky-200); }
.color-sky-300 { color: var(--qy-sky-300); }
.color-sky-400 { color: var(--qy-sky-400); }
.color-sky-500 { color: var(--qy-sky-500); }
.color-sky-600 { color: var(--qy-sky-600); }
.color-sky-700 { color: var(--qy-sky-700); }
.color-sky-800 { color: var(--qy-sky-800); }
.color-sky-900 { color: var(--qy-sky-900); }
.color-sky-950 { color: var(--qy-sky-950); }
/* BLUE */
.color-blue-50 { color: var(--qy-blue-50); }
.color-blue-100 { color: var(--qy-blue-100); }
.color-blue-200 { color: var(--qy-blue-200); }
.color-blue-300 { color: var(--qy-blue-300); }
.color-blue-400 { color: var(--qy-blue-400); }
.color-blue-500 { color: var(--qy-blue-500); }
.color-blue-600 { color: var(--qy-blue-600); }
.color-blue-700 { color: var(--qy-blue-700); }
.color-blue-800 { color: var(--qy-blue-800); }
.color-blue-900 { color: var(--qy-blue-900); }
.color-blue-950 { color: var(--qy-blue-950); }
/* INDIGO */
.color-indigo-50 { color: var(--qy-indigo-50); }
.color-indigo-100 { color: var(--qy-indigo-100); }
.color-indigo-200 { color: var(--qy-indigo-200); }
.color-indigo-300 { color: var(--qy-indigo-300); }
.color-indigo-400 { color: var(--qy-indigo-400); }
.color-indigo-500 { color: var(--qy-indigo-500); }
.color-indigo-600 { color: var(--qy-indigo-600); }
.color-indigo-700 { color: var(--qy-indigo-700); }
.color-indigo-800 { color: var(--qy-indigo-800); }
.color-indigo-900 { color: var(--qy-indigo-900); }
.color-indigo-950 { color: var(--qy-indigo-950); }
/* VIOLET */
.color-violet-50 { color: var(--qy-violet-50); }
.color-violet-100 { color: var(--qy-violet-100); }
.color-violet-200 { color: var(--qy-violet-200); }
.color-violet-300 { color: var(--qy-violet-300); }
.color-violet-400 { color: var(--qy-violet-400); }
.color-violet-500 { color: var(--qy-violet-500); }
.color-violet-600 { color: var(--qy-violet-600); }
.color-violet-700 { color: var(--qy-violet-700); }
.color-violet-800 { color: var(--qy-violet-800); }
.color-violet-900 { color: var(--qy-violet-900); }
.color-violet-950 { color: var(--qy-violet-950); }
/* PURPLE */
.color-purple-50 { color: var(--qy-purple-50); }
.color-purple-100 { color: var(--qy-purple-100); }
.color-purple-200 { color: var(--qy-purple-200); }
.color-purple-300 { color: var(--qy-purple-300); }
.color-purple-400 { color: var(--qy-purple-400); }
.color-purple-500 { color: var(--qy-purple-500); }
.color-purple-600 { color: var(--qy-purple-600); }
.color-purple-700 { color: var(--qy-purple-700); }
.color-purple-800 { color: var(--qy-purple-800); }
.color-purple-900 { color: var(--qy-purple-900); }
.color-purple-950 { color: var(--qy-purple-950); }
/* FUCHSIA */
.color-fuchsia-50 { color: var(--qy-fuchsia-50); }
.color-fuchsia-100 { color: var(--qy-fuchsia-100); }
.color-fuchsia-200 { color: var(--qy-fuchsia-200); }
.color-fuchsia-300 { color: var(--qy-fuchsia-300); }
.color-fuchsia-400 { color: var(--qy-fuchsia-400); }
.color-fuchsia-500 { color: var(--qy-fuchsia-500); }
.color-fuchsia-600 { color: var(--qy-fuchsia-600); }
.color-fuchsia-700 { color: var(--qy-fuchsia-700); }
.color-fuchsia-800 { color: var(--qy-fuchsia-800); }
.color-fuchsia-900 { color: var(--qy-fuchsia-900); }
.color-fuchsia-950 { color: var(--qy-fuchsia-950); }
/* PINK */
.color-pink-50 { color: var(--qy-pink-50); }
.color-pink-100 { color: var(--qy-pink-100); }
.color-pink-200 { color: var(--qy-pink-200); }
.color-pink-300 { color: var(--qy-pink-300); }
.color-pink-400 { color: var(--qy-pink-400); }
.color-pink-500 { color: var(--qy-pink-500); }
.color-pink-600 { color: var(--qy-pink-600); }
.color-pink-700 { color: var(--qy-pink-700); }
.color-pink-800 { color: var(--qy-pink-800); }
.color-pink-900 { color: var(--qy-pink-900); }
.color-pink-950 { color: var(--qy-pink-950); }
/* ROSE */
.color-rose-50 { color: var(--qy-rose-50); }
.color-rose-100 { color: var(--qy-rose-100); }
.color-rose-200 { color: var(--qy-rose-200); }
.color-rose-300 { color: var(--qy-rose-300); }
.color-rose-400 { color: var(--qy-rose-400); }
.color-rose-500 { color: var(--qy-rose-500); }
.color-rose-600 { color: var(--qy-rose-600); }
.color-rose-700 { color: var(--qy-rose-700); }
.color-rose-800 { color: var(--qy-rose-800); }
.color-rose-900 { color: var(--qy-rose-900); }
.color-rose-950 { color: var(--qy-rose-950); }
/* ==========================================================
UTILIDADES DE FONDO
.bg-{color}-{tone}
========================================================== */
/* white / black */
.bg-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white); }
.bg-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black); }
/* SLATE */
.bg-slate-50 { --qy-bg-color: var(--qy-slate-50); background-color: var(--qy-slate-50); }
.bg-slate-100 { --qy-bg-color: var(--qy-slate-100); background-color: var(--qy-slate-100); }
.bg-slate-200 { --qy-bg-color: var(--qy-slate-200); background-color: var(--qy-slate-200); }
.bg-slate-300 { --qy-bg-color: var(--qy-slate-300); background-color: var(--qy-slate-300); }
.bg-slate-400 { --qy-bg-color: var(--qy-slate-400); background-color: var(--qy-slate-400); }
.bg-slate-500 { --qy-bg-color: var(--qy-slate-500); background-color: var(--qy-slate-500); }
.bg-slate-600 { --qy-bg-color: var(--qy-slate-600); background-color: var(--qy-slate-600); }
.bg-slate-700 { --qy-bg-color: var(--qy-slate-700); background-color: var(--qy-slate-700); }
.bg-slate-800 { --qy-bg-color: var(--qy-slate-800); background-color: var(--qy-slate-800); }
.bg-slate-900 { --qy-bg-color: var(--qy-slate-900); background-color: var(--qy-slate-900); }
.bg-slate-950 { --qy-bg-color: var(--qy-slate-950); background-color: var(--qy-slate-950); }
/* GRAY */
.bg-gray-50 { --qy-bg-color: var(--qy-gray-50); background-color: var(--qy-gray-50); }
.bg-gray-100 { --qy-bg-color: var(--qy-gray-100); background-color: var(--qy-gray-100); }
.bg-gray-200 { --qy-bg-color: var(--qy-gray-200); background-color: var(--qy-gray-200); }
.bg-gray-300 { --qy-bg-color: var(--qy-gray-300); background-color: var(--qy-gray-300); }
.bg-gray-400 { --qy-bg-color: var(--qy-gray-400); background-color: var(--qy-gray-400); }
.bg-gray-500 { --qy-bg-color: var(--qy-gray-500); background-color: var(--qy-gray-500); }
.bg-gray-600 { --qy-bg-color: var(--qy-gray-600); background-color: var(--qy-gray-600); }
.bg-gray-700 { --qy-bg-color: var(--qy-gray-700); background-color: var(--qy-gray-700); }
.bg-gray-800 { --qy-bg-color: var(--qy-gray-800); background-color: var(--qy-gray-800); }
.bg-gray-900 { --qy-bg-color: var(--qy-gray-900); background-color: var(--qy-gray-900); }
.bg-gray-950 { --qy-bg-color: var(--qy-gray-950); background-color: var(--qy-gray-950); }
/* ZINC */
.bg-zinc-50 { --qy-bg-color: var(--qy-zinc-50); background-color: var(--qy-zinc-50); }
.bg-zinc-100 { --qy-bg-color: var(--qy-zinc-100); background-color: var(--qy-zinc-100); }
.bg-zinc-200 { --qy-bg-color: var(--qy-zinc-200); background-color: var(--qy-zinc-200); }
.bg-zinc-300 { --qy-bg-color: var(--qy-zinc-300); background-color: var(--qy-zinc-300); }
.bg-zinc-400 { --qy-bg-color: var(--qy-zinc-400); background-color: var(--qy-zinc-400); }
.bg-zinc-500 { --qy-bg-color: var(--qy-zinc-500); background-color: var(--qy-zinc-500); }
.bg-zinc-600 { --qy-bg-color: var(--qy-zinc-600); background-color: var(--qy-zinc-600); }
.bg-zinc-700 { --qy-bg-color: var(--qy-zinc-700); background-color: var(--qy-zinc-700); }
.bg-zinc-800 { --qy-bg-color: var(--qy-zinc-800); background-color: var(--qy-zinc-800); }
.bg-zinc-900 { --qy-bg-color: var(--qy-zinc-900); background-color: var(--qy-zinc-900); }
.bg-zinc-950 { --qy-bg-color: var(--qy-zinc-950); background-color: var(--qy-zinc-950); }
/* NEUTRAL */
.bg-neutral-50 { --qy-bg-color: var(--qy-neutral-50); background-color: var(--qy-neutral-50); }
.bg-neutral-100 { --qy-bg-color: var(--qy-neutral-100); background-color: var(--qy-neutral-100); }
.bg-neutral-200 { --qy-bg-color: var(--qy-neutral-200); background-color: var(--qy-neutral-200); }
.bg-neutral-300 { --qy-bg-color: var(--qy-neutral-300); background-color: var(--qy-neutral-300); }
.bg-neutral-400 { --qy-bg-color: var(--qy-neutral-400); background-color: var(--qy-neutral-400); }
.bg-neutral-500 { --qy-bg-color: var(--qy-neutral-500); background-color: var(--qy-neutral-500); }
.bg-neutral-600 { --qy-bg-color: var(--qy-neutral-600); background-color: var(--qy-neutral-600); }
.bg-neutral-700 { --qy-bg-color: var(--qy-neutral-700); background-color: var(--qy-neutral-700); }
.bg-neutral-800 { --qy-bg-color: var(--qy-neutral-800); background-color: var(--qy-neutral-800); }
.bg-neutral-900 { --qy-bg-color: var(--qy-neutral-900); background-color: var(--qy-neutral-900); }
.bg-neutral-950 { --qy-bg-color: var(--qy-neutral-950); background-color: var(--qy-neutral-950); }
/* STONE */
.bg-stone-50 { --qy-bg-color: var(--qy-stone-50); background-color: var(--qy-stone-50); }
.bg-stone-100 { --qy-bg-color: var(--qy-stone-100); background-color: var(--qy-stone-100); }
.bg-stone-200 { --qy-bg-color: var(--qy-stone-200); background-color: var(--qy-stone-200); }
.bg-stone-300 { --qy-bg-color: var(--qy-stone-300); background-color: var(--qy-stone-300); }
.bg-stone-400 { --qy-bg-color: var(--qy-stone-400); background-color: var(--qy-stone-400); }
.bg-stone-500 { --qy-bg-color: var(--qy-stone-500); background-color: var(--qy-stone-500); }
.bg-stone-600 { --qy-bg-color: var(--qy-stone-600); background-color: var(--qy-stone-600); }
.bg-stone-700 { --qy-bg-color: var(--qy-stone-700); background-color: var(--qy-stone-700); }
.bg-stone-800 { --qy-bg-color: var(--qy-stone-800); background-color: var(--qy-stone-800); }
.bg-stone-900 { --qy-bg-color: var(--qy-stone-900); background-color: var(--qy-stone-900); }
.bg-stone-950 { --qy-bg-color: var(--qy-stone-950); background-color: var(--qy-stone-950); }
/* RED */
.bg-red-50 { --qy-bg-color: var(--qy-red-50); background-color: var(--qy-red-50); }
.bg-red-100 { --qy-bg-color: var(--qy-red-100); background-color: var(--qy-red-100); }
.bg-red-200 { --qy-bg-color: var(--qy-red-200); background-color: var(--qy-red-200); }
.bg-red-300 { --qy-bg-color: var(--qy-red-300); background-color: var(--qy-red-300); }
.bg-red-400 { --qy-bg-color: var(--qy-red-400); background-color: var(--qy-red-400); }
.bg-red-500 { --qy-bg-color: var(--qy-red-500); background-color: var(--qy-red-500); }
.bg-red-600 { --qy-bg-color: var(--qy-red-600); background-color: var(--qy-red-600); }
.bg-red-700 { --qy-bg-color: var(--qy-red-700); background-color: var(--qy-red-700); }
.bg-red-800 { --qy-bg-color: var(--qy-red-800); background-color: var(--qy-red-800); }
.bg-red-900 { --qy-bg-color: var(--qy-red-900); background-color: var(--qy-red-900); }
.bg-red-950 { --qy-bg-color: var(--qy-red-950); background-color: var(--qy-red-950); }
/* ORANGE */
.bg-orange-50 { --qy-bg-color: var(--qy-orange-50); background-color: var(--qy-orange-50); }
.bg-orange-100 { --qy-bg-color: var(--qy-orange-100); background-color: var(--qy-orange-100); }
.bg-orange-200 { --qy-bg-color: var(--qy-orange-200); background-color: var(--qy-orange-200); }
.bg-orange-300 { --qy-bg-color: var(--qy-orange-300); background-color: var(--qy-orange-300); }
.bg-orange-400 { --qy-bg-color: var(--qy-orange-400); background-color: var(--qy-orange-400); }
.bg-orange-500 { --qy-bg-color: var(--qy-orange-500); background-color: var(--qy-orange-500); }
.bg-orange-600 { --qy-bg-color: var(--qy-orange-600); background-color: var(--qy-orange-600); }
.bg-orange-700 { --qy-bg-color: var(--qy-orange-700); background-color: var(--qy-orange-700); }
.bg-orange-800 { --qy-bg-color: var(--qy-orange-800); background-color: var(--qy-orange-800); }
.bg-orange-900 { --qy-bg-color: var(--qy-orange-900); background-color: var(--qy-orange-900); }
.bg-orange-950 { --qy-bg-color: var(--qy-orange-950); background-color: var(--qy-orange-950); }
/* AMBER */
.bg-amber-50 { --qy-bg-color: var(--qy-amber-50); background-color: var(--qy-amber-50); }
.bg-amber-100 { --qy-bg-color: var(--qy-amber-100); background-color: var(--qy-amber-100); }
.bg-amber-200 { --qy-bg-color: var(--qy-amber-200); background-color: var(--qy-amber-200); }
.bg-amber-300 { --qy-bg-color: var(--qy-amber-300); background-color: var(--qy-amber-300); }
.bg-amber-400 { --qy-bg-color: var(--qy-amber-400); background-color: var(--qy-amber-400); }
.bg-amber-500 { --qy-bg-color: var(--qy-amber-500); background-color: var(--qy-amber-500); }
.bg-amber-600 { --qy-bg-color: var(--qy-amber-600); background-color: var(--qy-amber-600); }
.bg-amber-700 { --qy-bg-color: var(--qy-amber-700); background-color: var(--qy-amber-700); }
.bg-amber-800 { --qy-bg-color: var(--qy-amber-800); background-color: var(--qy-amber-800); }
.bg-amber-900 { --qy-bg-color: var(--qy-amber-900); background-color: var(--qy-amber-900); }
.bg-amber-950 { --qy-bg-color: var(--qy-amber-950); background-color: var(--qy-amber-950); }
/* YELLOW */
.bg-yellow-50 { --qy-bg-color: var(--qy-yellow-50); background-color: var(--qy-yellow-50); }
.bg-yellow-100 { --qy-bg-color: var(--qy-yellow-100); background-color: var(--qy-yellow-100); }
.bg-yellow-200 { --qy-bg-color: var(--qy-yellow-200); background-color: var(--qy-yellow-200); }
.bg-yellow-300 { --qy-bg-color: var(--qy-yellow-300); background-color: var(--qy-yellow-300); }
.bg-yellow-400 { --qy-bg-color: var(--qy-yellow-400); background-color: var(--qy-yellow-400); }
.bg-yellow-500 { --qy-bg-color: var(--qy-yellow-500); background-color: var(--qy-yellow-500); }
.bg-yellow-600 { --qy-bg-color: var(--qy-yellow-600); background-color: var(--qy-yellow-600); }
.bg-yellow-700 { --qy-bg-color: var(--qy-yellow-700); background-color: var(--qy-yellow-700); }
.bg-yellow-800 { --qy-bg-color: var(--qy-yellow-800); background-color: var(--qy-yellow-800); }
.bg-yellow-900 { --qy-bg-color: var(--qy-yellow-900); background-color: var(--qy-yellow-900); }
.bg-yellow-950 { --qy-bg-color: var(--qy-yellow-950); background-color: var(--qy-yellow-950); }
/* LIME */
.bg-lime-50 { --qy-bg-color: var(--qy-lime-50); background-color: var(--qy-lime-50); }
.bg-lime-100 { --qy-bg-color: var(--qy-lime-100); background-color: var(--qy-lime-100); }
.bg-lime-200 { --qy-bg-color: var(--qy-lime-200); background-color: var(--qy-lime-200); }
.bg-lime-300 { --qy-bg-color: var(--qy-lime-300); background-color: var(--qy-lime-300); }
.bg-lime-400 { --qy-bg-color: var(--qy-lime-400); background-color: var(--qy-lime-400); }
.bg-lime-500 { --qy-bg-color: var(--qy-lime-500); background-color: var(--qy-lime-500); }
.bg-lime-600 { --qy-bg-color: var(--qy-lime-600); background-color: var(--qy-lime-600); }
.bg-lime-700 { --qy-bg-color: var(--qy-lime-700); background-color: var(--qy-lime-700); }
.bg-lime-800 { --qy-bg-color: var(--qy-lime-800); background-color: var(--qy-lime-800); }
.bg-lime-900 { --qy-bg-color: var(--qy-lime-900); background-color: var(--qy-lime-900); }
.bg-lime-950 { --qy-bg-color: var(--qy-lime-950); background-color: var(--qy-lime-950); }
/* GREEN */
.bg-green-50 { --qy-bg-color: var(--qy-green-50); background-color: var(--qy-green-50); }
.bg-green-100 { --qy-bg-color: var(--qy-green-100); background-color: var(--qy-green-100); }
.bg-green-200 { --qy-bg-color: var(--qy-green-200); background-color: var(--qy-green-200); }
.bg-green-300 { --qy-bg-color: var(--qy-green-300); background-color: var(--qy-green-300); }
.bg-green-400 { --qy-bg-color: var(--qy-green-400); background-color: var(--qy-green-400); }
.bg-green-500 { --qy-bg-color: var(--qy-green-500); background-color: var(--qy-green-500); }
.bg-green-600 { --qy-bg-color: var(--qy-green-600); background-color: var(--qy-green-600); }
.bg-green-700 { --qy-bg-color: var(--qy-green-700); background-color: var(--qy-green-700); }
.bg-green-800 { --qy-bg-color: var(--qy-green-800); background-color: var(--qy-green-800); }
.bg-green-900 { --qy-bg-color: var(--qy-green-900); background-color: var(--qy-green-900); }
.bg-green-950 { --qy-bg-color: var(--qy-green-950); background-color: var(--qy-green-950); }
/* EMERALD */
.bg-emerald-50 { --qy-bg-color: var(--qy-emerald-50); background-color: var(--qy-emerald-50); }
.bg-emerald-100 { --qy-bg-color: var(--qy-emerald-100); background-color: var(--qy-emerald-100); }
.bg-emerald-200 { --qy-bg-color: var(--qy-emerald-200); background-color: var(--qy-emerald-200); }
.bg-emerald-300 { --qy-bg-color: var(--qy-emerald-300); background-color: var(--qy-emerald-300); }
.bg-emerald-400 { --qy-bg-color: var(--qy-emerald-400); background-color: var(--qy-emerald-400); }
.bg-emerald-500 { --qy-bg-color: var(--qy-emerald-500); background-color: var(--qy-emerald-500); }
.bg-emerald-600 { --qy-bg-color: var(--qy-emerald-600); background-color: var(--qy-emerald-600); }
.bg-emerald-700 { --qy-bg-color: var(--qy-emerald-700); background-color: var(--qy-emerald-700); }
.bg-emerald-800 { --qy-bg-color: var(--qy-emerald-800); background-color: var(--qy-emerald-800); }
.bg-emerald-900 { --qy-bg-color: var(--qy-emerald-900); background-color: var(--qy-emerald-900); }
.bg-emerald-950 { --qy-bg-color: var(--qy-emerald-950); background-color: var(--qy-emerald-950); }
/* TEAL */
.bg-teal-50 { --qy-bg-color: var(--qy-teal-50); background-color: var(--qy-teal-50); }
.bg-teal-100 { --qy-bg-color: var(--qy-teal-100); background-color: var(--qy-teal-100); }
.bg-teal-200 { --qy-bg-color: var(--qy-teal-200); background-color: var(--qy-teal-200); }
.bg-teal-300 { --qy-bg-color: var(--qy-teal-300); background-color: var(--qy-teal-300); }
.bg-teal-400 { --qy-bg-color: var(--qy-teal-400); background-color: var(--qy-teal-400); }
.bg-teal-500 { --qy-bg-color: var(--qy-teal-500); background-color: var(--qy-teal-500); }
.bg-teal-600 { --qy-bg-color: var(--qy-teal-600); background-color: var(--qy-teal-600); }
.bg-teal-700 { --qy-bg-color: var(--qy-teal-700); background-color: var(--qy-teal-700); }
.bg-teal-800 { --qy-bg-color: var(--qy-teal-800); background-color: var(--qy-teal-800); }
.bg-teal-900 { --qy-bg-color: var(--qy-teal-900); background-color: var(--qy-teal-900); }
.bg-teal-950 { --qy-bg-color: var(--qy-teal-950); background-color: var(--qy-teal-950); }
/* CYAN */
.bg-cyan-50 { --qy-bg-color: var(--qy-cyan-50); background-color: var(--qy-cyan-50); }
.bg-cyan-100 { --qy-bg-color: var(--qy-cyan-100); background-color: var(--qy-cyan-100); }
.bg-cyan-200 { --qy-bg-color: var(--qy-cyan-200); background-color: var(--qy-cyan-200); }
.bg-cyan-300 { --qy-bg-color: var(--qy-cyan-300); background-color: var(--qy-cyan-300); }
.bg-cyan-400 { --qy-bg-color: var(--qy-cyan-400); background-color: var(--qy-cyan-400); }
.bg-cyan-500 { --qy-bg-color: var(--qy-cyan-500); background-color: var(--qy-cyan-500); }
.bg-cyan-600 { --qy-bg-color: var(--qy-cyan-600); background-color: var(--qy-cyan-600); }
.bg-cyan-700 { --qy-bg-color: var(--qy-cyan-700); background-color: var(--qy-cyan-700); }
.bg-cyan-800 { --qy-bg-color: var(--qy-cyan-800); background-color: var(--qy-cyan-800); }
.bg-cyan-900 { --qy-bg-color: var(--qy-cyan-900); background-color: var(--qy-cyan-900); }
.bg-cyan-950 { --qy-bg-color: var(--qy-cyan-950); background-color: var(--qy-cyan-950); }
/* SKY */
.bg-sky-50 { --qy-bg-color: var(--qy-sky-50); background-color: var(--qy-sky-50); }
.bg-sky-100 { --qy-bg-color: var(--qy-sky-100); background-color: var(--qy-sky-100); }
.bg-sky-200 { --qy-bg-color: var(--qy-sky-200); background-color: var(--qy-sky-200); }
.bg-sky-300 { --qy-bg-color: var(--qy-sky-300); background-color: var(--qy-sky-300); }
.bg-sky-400 { --qy-bg-color: var(--qy-sky-400); background-color: var(--qy-sky-400); }
.bg-sky-500 { --qy-bg-color: var(--qy-sky-500); background-color: var(--qy-sky-500); }
.bg-sky-600 { --qy-bg-color: var(--qy-sky-600); background-color: var(--qy-sky-600); }
.bg-sky-700 { --qy-bg-color: var(--qy-sky-700); background-color: var(--qy-sky-700); }
.bg-sky-800 { --qy-bg-color: var(--qy-sky-800); background-color: var(--qy-sky-800); }
.bg-sky-900 { --qy-bg-color: var(--qy-sky-900); background-color: var(--qy-sky-900); }
.bg-sky-950 { --qy-bg-color: var(--qy-sky-950); background-color: var(--qy-sky-950); }
/* BLUE */
.bg-blue-50 { --qy-bg-color: var(--qy-blue-50); background-color: var(--qy-blue-50); }
.bg-blue-100 { --qy-bg-color: var(--qy-blue-100); background-color: var(--qy-blue-100); }
.bg-blue-200 { --qy-bg-color: var(--qy-blue-200); background-color: var(--qy-blue-200); }
.bg-blue-300 { --qy-bg-color: var(--qy-blue-300); background-color: var(--qy-blue-300); }
.bg-blue-400 { --qy-bg-color: var(--qy-blue-400); background-color: var(--qy-blue-400); }
.bg-blue-500 { --qy-bg-color: var(--qy-blue-500); background-color: var(--qy-blue-500); }
.bg-blue-600 { --qy-bg-color: var(--qy-blue-600); background-color: var(--qy-blue-600); }
.bg-blue-700 { --qy-bg-color: var(--qy-blue-700); background-color: var(--qy-blue-700); }
.bg-blue-800 { --qy-bg-color: var(--qy-blue-800); background-color: var(--qy-blue-800); }
.bg-blue-900 { --qy-bg-color: var(--qy-blue-900); background-color: var(--qy-blue-900); }
.bg-blue-950 { --qy-bg-color: var(--qy-blue-950); background-color: var(--qy-blue-950); }
/* INDIGO */
.bg-indigo-50 { --qy-bg-color: var(--qy-indigo-50); background-color: var(--qy-indigo-50); }
.bg-indigo-100 { --qy-bg-color: var(--qy-indigo-100); background-color: var(--qy-indigo-100); }
.bg-indigo-200 { --qy-bg-color: var(--qy-indigo-200); background-color: var(--qy-indigo-200); }
.bg-indigo-300 { --qy-bg-color: var(--qy-indigo-300); background-color: var(--qy-indigo-300); }
.bg-indigo-400 { --qy-bg-color: var(--qy-indigo-400); background-color: var(--qy-indigo-400); }
.bg-indigo-500 { --qy-bg-color: var(--qy-indigo-500); background-color: var(--qy-indigo-500); }
.bg-indigo-600 { --qy-bg-color: var(--qy-indigo-600); background-color: var(--qy-indigo-600); }
.bg-indigo-700 { --qy-bg-color: var(--qy-indigo-700); background-color: var(--qy-indigo-700); }
.bg-indigo-800 { --qy-bg-color: var(--qy-indigo-800); background-color: var(--qy-indigo-800); }
.bg-indigo-900 { --qy-bg-color: var(--qy-indigo-900); background-color: var(--qy-indigo-900); }
.bg-indigo-950 { --qy-bg-color: var(--qy-indigo-950); background-color: var(--qy-indigo-950); }
/* VIOLET */
.bg-violet-50 { --qy-bg-color: var(--qy-violet-50); background-color: var(--qy-violet-50); }
.bg-violet-100 { --qy-bg-color: var(--qy-violet-100); background-color: var(--qy-violet-100); }
.bg-violet-200 { --qy-bg-color: var(--qy-violet-200); background-color: var(--qy-violet-200); }
.bg-violet-300 { --qy-bg-color: var(--qy-violet-300); background-color: var(--qy-violet-300); }
.bg-violet-400 { --qy-bg-color: var(--qy-violet-400); background-color: var(--qy-violet-400); }
.bg-violet-500 { --qy-bg-color: var(--qy-violet-500); background-color: var(--qy-violet-500); }
.bg-violet-600 { --qy-bg-color: var(--qy-violet-600); background-color: var(--qy-violet-600); }
.bg-violet-700 { --qy-bg-color: var(--qy-violet-700); background-color: var(--qy-violet-700); }
.bg-violet-800 { --qy-bg-color: var(--qy-violet-800); background-color: var(--qy-violet-800); }
.bg-violet-900 { --qy-bg-color: var(--qy-violet-900); background-color: var(--qy-violet-900); }
.bg-violet-950 { --qy-bg-color: var(--qy-violet-950); background-color: var(--qy-violet-950); }
/* PURPLE */
.bg-purple-50 { --qy-bg-color: var(--qy-purple-50); background-color: var(--qy-purple-50); }
.bg-purple-100 { --qy-bg-color: var(--qy-purple-100); background-color: var(--qy-purple-100); }
.bg-purple-200 { --qy-bg-color: var(--qy-purple-200); background-color: var(--qy-purple-200); }
.bg-purple-300 { --qy-bg-color: var(--qy-purple-300); background-color: var(--qy-purple-300); }
.bg-purple-400 { --qy-bg-color: var(--qy-purple-400); background-color: var(--qy-purple-400); }
.bg-purple-500 { --qy-bg-color: var(--qy-purple-500); background-color: var(--qy-purple-500); }
.bg-purple-600 { --qy-bg-color: var(--qy-purple-600); background-color: var(--qy-purple-600); }
.bg-purple-700 { --qy-bg-color: var(--qy-purple-700); background-color: var(--qy-purple-700); }
.bg-purple-800 { --qy-bg-color: var(--qy-purple-800); background-color: var(--qy-purple-800); }
.bg-purple-900 { --qy-bg-color: var(--qy-purple-900); background-color: var(--qy-purple-900); }
.bg-purple-950 { --qy-bg-color: var(--qy-purple-950); background-color: var(--qy-purple-950); }
/* FUCHSIA */
.bg-fuchsia-50 { --qy-bg-color: var(--qy-fuchsia-50); background-color: var(--qy-fuchsia-50); }
.bg-fuchsia-100 { --qy-bg-color: var(--qy-fuchsia-100); background-color: var(--qy-fuchsia-100); }
.bg-fuchsia-200 { --qy-bg-color: var(--qy-fuchsia-200); background-color: var(--qy-fuchsia-200); }
.bg-fuchsia-300 { --qy-bg-color: var(--qy-fuchsia-300); background-color: var(--qy-fuchsia-300); }
.bg-fuchsia-400 { --qy-bg-color: var(--qy-fuchsia-400); background-color: var(--qy-fuchsia-400); }
.bg-fuchsia-500 { --qy-bg-color: var(--qy-fuchsia-500); background-color: var(--qy-fuchsia-500); }
.bg-fuchsia-600 { --qy-bg-color: var(--qy-fuchsia-600); background-color: var(--qy-fuchsia-600); }
.bg-fuchsia-700 { --qy-bg-color: var(--qy-fuchsia-700); background-color: var(--qy-fuchsia-700); }
.bg-fuchsia-800 { --qy-bg-color: var(--qy-fuchsia-800); background-color: var(--qy-fuchsia-800); }
.bg-fuchsia-900 { --qy-bg-color: var(--qy-fuchsia-900); background-color: var(--qy-fuchsia-900); }
.bg-fuchsia-950 { --qy-bg-color: var(--qy-fuchsia-950); background-color: var(--qy-fuchsia-950); }
/* PINK */
.bg-pink-50 { --qy-bg-color: var(--qy-pink-50); background-color: var(--qy-pink-50); }
.bg-pink-100 { --qy-bg-color: var(--qy-pink-100); background-color: var(--qy-pink-100); }
.bg-pink-200 { --qy-bg-color: var(--qy-pink-200); background-color: var(--qy-pink-200); }
.bg-pink-300 { --qy-bg-color: var(--qy-pink-300); background-color: var(--qy-pink-300); }
.bg-pink-400 { --qy-bg-color: var(--qy-pink-400); background-color: var(--qy-pink-400); }
.bg-pink-500 { --qy-bg-color: var(--qy-pink-500); background-color: var(--qy-pink-500); }
.bg-pink-600 { --qy-bg-color: var(--qy-pink-600); background-color: var(--qy-pink-600); }
.bg-pink-700 { --qy-bg-color: var(--qy-pink-700); background-color: var(--qy-pink-700); }
.bg-pink-800 { --qy-bg-color: var(--qy-pink-800); background-color: var(--qy-pink-800); }
.bg-pink-900 { --qy-bg-color: var(--qy-pink-900); background-color: var(--qy-pink-900); }
.bg-pink-950 { --qy-bg-color: var(--qy-pink-950); background-color: var(--qy-pink-950); }
/* ROSE */
.bg-rose-50 { --qy-bg-color: var(--qy-rose-50); background-color: var(--qy-rose-50); }
.bg-rose-100 { --qy-bg-color: var(--qy-rose-100); background-color: var(--qy-rose-100); }
.bg-rose-200 { --qy-bg-color: var(--qy-rose-200); background-color: var(--qy-rose-200); }
.bg-rose-300 { --qy-bg-color: var(--qy-rose-300); background-color: var(--qy-rose-300); }
.bg-rose-400 { --qy-bg-color: var(--qy-rose-400); background-color: var(--qy-rose-400); }
.bg-rose-500 { --qy-bg-color: var(--qy-rose-500); background-color: var(--qy-rose-500); }
.bg-rose-600 { --qy-bg-color: var(--qy-rose-600); background-color: var(--qy-rose-600); }
.bg-rose-700 { --qy-bg-color: var(--qy-rose-700); background-color: var(--qy-rose-700); }
.bg-rose-800 { --qy-bg-color: var(--qy-rose-800); background-color: var(--qy-rose-800); }
.bg-rose-900 { --qy-bg-color: var(--qy-rose-900); background-color: var(--qy-rose-900); }
.bg-rose-950 { --qy-bg-color: var(--qy-rose-950); background-color: var(--qy-rose-950); }
/* ==========================================================
UTILIDADES DE BORDE
.border-{color}-{tone}
========================================================== */
.border-white { border-color: var(--qy-white) !important; }
.border-black { border-color: var(--qy-black) !important; }
/* SLATE */
.border-slate-50 { border-color: var(--qy-slate-50); }
.border-slate-100 { border-color: var(--qy-slate-100); }
.border-slate-200 { border-color: var(--qy-slate-200); }
.border-slate-300 { border-color: var(--qy-slate-300); }
.border-slate-400 { border-color: var(--qy-slate-400); }
.border-slate-500 { border-color: var(--qy-slate-500); }
.border-slate-600 { border-color: var(--qy-slate-600); }
.border-slate-700 { border-color: var(--qy-slate-700); }
.border-slate-800 { border-color: var(--qy-slate-800); }
.border-slate-900 { border-color: var(--qy-slate-900); }
.border-slate-950 { border-color: var(--qy-slate-950); }
/* GRAY */
.border-gray-50 { border-color: var(--qy-gray-50); }
.border-gray-100 { border-color: var(--qy-gray-100); }
.border-gray-200 { border-color: var(--qy-gray-200); }
.border-gray-300 { border-color: var(--qy-gray-300); }
.border-gray-400 { border-color: var(--qy-gray-400); }
.border-gray-500 { border-color: var(--qy-gray-500); }
.border-gray-600 { border-color: var(--qy-gray-600); }
.border-gray-700 { border-color: var(--qy-gray-700); }
.border-gray-800 { border-color: var(--qy-gray-800); }
.border-gray-900 { border-color: var(--qy-gray-900); }
.border-gray-950 { border-color: var(--qy-gray-950); }
/* ZINC */
.border-zinc-50 { border-color: var(--qy-zinc-50); }
.border-zinc-100 { border-color: var(--qy-zinc-100); }
.border-zinc-200 { border-color: var(--qy-zinc-200); }
.border-zinc-300 { border-color: var(--qy-zinc-300); }
.border-zinc-400 { border-color: var(--qy-zinc-400); }
.border-zinc-500 { border-color: var(--qy-zinc-500); }
.border-zinc-600 { border-color: var(--qy-zinc-600); }
.border-zinc-700 { border-color: var(--qy-zinc-700); }
.border-zinc-800 { border-color: var(--qy-zinc-800); }
.border-zinc-900 { border-color: var(--qy-zinc-900); }
.border-zinc-950 { border-color: var(--qy-zinc-950); }
/* NEUTRAL */
.border-neutral-50 { border-color: var(--qy-neutral-50); }
.border-neutral-100 { border-color: var(--qy-neutral-100); }
.border-neutral-200 { border-color: var(--qy-neutral-200); }
.border-neutral-300 { border-color: var(--qy-neutral-300); }
.border-neutral-400 { border-color: var(--qy-neutral-400); }
.border-neutral-500 { border-color: var(--qy-neutral-500); }
.border-neutral-600 { border-color: var(--qy-neutral-600); }
.border-neutral-700 { border-color: var(--qy-neutral-700); }
.border-neutral-800 { border-color: var(--qy-neutral-800); }
.border-neutral-900 { border-color: var(--qy-neutral-900); }
.border-neutral-950 { border-color: var(--qy-neutral-950); }
/* STONE */
.border-stone-50 { border-color: var(--qy-stone-50); }
.border-stone-100 { border-color: var(--qy-stone-100); }
.border-stone-200 { border-color: var(--qy-stone-200); }
.border-stone-300 { border-color: var(--qy-stone-300); }
.border-stone-400 { border-color: var(--qy-stone-400); }
.border-stone-500 { border-color: var(--qy-stone-500); }
.border-stone-600 { border-color: var(--qy-stone-600); }
.border-stone-700 { border-color: var(--qy-stone-700); }
.border-stone-800 { border-color: var(--qy-stone-800); }
.border-stone-900 { border-color: var(--qy-stone-900); }
.border-stone-950 { border-color: var(--qy-stone-950); }
/* RED */
.border-red-50 { border-color: var(--qy-red-50); }
.border-red-100 { border-color: var(--qy-red-100); }
.border-red-200 { border-color: var(--qy-red-200); }
.border-red-300 { border-color: var(--qy-red-300); }
.border-red-400 { border-color: var(--qy-red-400); }
.border-red-500 { border-color: var(--qy-red-500); }
.border-red-600 { border-color: var(--qy-red-600); }
.border-red-700 { border-color: var(--qy-red-700); }
.border-red-800 { border-color: var(--qy-red-800); }
.border-red-900 { border-color: var(--qy-red-900); }
.border-red-950 { border-color: var(--qy-red-950); }
/* ORANGE */
.border-orange-50 { border-color: var(--qy-orange-50); }
.border-orange-100 { border-color: var(--qy-orange-100); }
.border-orange-200 { border-color: var(--qy-orange-200); }
.border-orange-300 { border-color: var(--qy-orange-300); }
.border-orange-400 { border-color: var(--qy-orange-400); }
.border-orange-500 { border-color: var(--qy-orange-500); }
.border-orange-600 { border-color: var(--qy-orange-600); }
.border-orange-700 { border-color: var(--qy-orange-700); }
.border-orange-800 { border-color: var(--qy-orange-800); }
.border-orange-900 { border-color: var(--qy-orange-900); }
.border-orange-950 { border-color: var(--qy-orange-950); }
/* AMBER */
.border-amber-50 { border-color: var(--qy-amber-50); }
.border-amber-100 { border-color: var(--qy-amber-100); }
.border-amber-200 { border-color: var(--qy-amber-200); }
.border-amber-300 { border-color: var(--qy-amber-300); }
.border-amber-400 { border-color: var(--qy-amber-400); }
.border-amber-500 { border-color: var(--qy-amber-500); }
.border-amber-600 { border-color: var(--qy-amber-600); }
.border-amber-700 { border-color: var(--qy-amber-700); }
.border-amber-800 { border-color: var(--qy-amber-800); }
.border-amber-900 { border-color: var(--qy-amber-900); }
.border-amber-950 { border-color: var(--qy-amber-950); }
/* YELLOW */
.border-yellow-50 { border-color: var(--qy-yellow-50); }
.border-yellow-100 { border-color: var(--qy-yellow-100); }
.border-yellow-200 { border-color: var(--qy-yellow-200); }
.border-yellow-300 { border-color: var(--qy-yellow-300); }
.border-yellow-400 { border-color: var(--qy-yellow-400); }
.border-yellow-500 { border-color: var(--qy-yellow-500); }
.border-yellow-600 { border-color: var(--qy-yellow-600); }
.border-yellow-700 { border-color: var(--qy-yellow-700); }
.border-yellow-800 { border-color: var(--qy-yellow-800); }
.border-yellow-900 { border-color: var(--qy-yellow-900); }
.border-yellow-950 { border-color: var(--qy-yellow-950); }
/* LIME */
.border-lime-50 { border-color: var(--qy-lime-50); }
.border-lime-100 { border-color: var(--qy-lime-100); }
.border-lime-200 { border-color: var(--qy-lime-200); }
.border-lime-300 { border-color: var(--qy-lime-300); }
.border-lime-400 { border-color: var(--qy-lime-400); }
.border-lime-500 { border-color: var(--qy-lime-500); }
.border-lime-600 { border-color: var(--qy-lime-600); }
.border-lime-700 { border-color: var(--qy-lime-700); }
.border-lime-800 { border-color: var(--qy-lime-800); }
.border-lime-900 { border-color: var(--qy-lime-900); }
.border-lime-950 { border-color: var(--qy-lime-950); }
/* GREEN */
.border-green-50 { border-color: var(--qy-green-50); }
.border-green-100 { border-color: var(--qy-green-100); }
.border-green-200 { border-color: var(--qy-green-200); }
.border-green-300 { border-color: var(--qy-green-300); }
.border-green-400 { border-color: var(--qy-green-400); }
.border-green-500 { border-color: var(--qy-green-500); }
.border-green-600 { border-color: var(--qy-green-600); }
.border-green-700 { border-color: var(--qy-green-700); }
.border-green-800 { border-color: var(--qy-green-800); }
.border-green-900 { border-color: var(--qy-green-900); }
.border-green-950 { border-color: var(--qy-green-950); }
/* EMERALD */
.border-emerald-50 { border-color: var(--qy-emerald-50); }
.border-emerald-100 { border-color: var(--qy-emerald-100); }
.border-emerald-200 { border-color: var(--qy-emerald-200); }
.border-emerald-300 { border-color: var(--qy-emerald-300); }
.border-emerald-400 { border-color: var(--qy-emerald-400); }
.border-emerald-500 { border-color: var(--qy-emerald-500); }
.border-emerald-600 { border-color: var(--qy-emerald-600); }
.border-emerald-700 { border-color: var(--qy-emerald-700); }
.border-emerald-800 { border-color: var(--qy-emerald-800); }
.border-emerald-900 { border-color: var(--qy-emerald-900); }
.border-emerald-950 { border-color: var(--qy-emerald-950); }
/* TEAL */
.border-teal-50 { border-color: var(--qy-teal-50); }
.border-teal-100 { border-color: var(--qy-teal-100); }
.border-teal-200 { border-color: var(--qy-teal-200); }
.border-teal-300 { border-color: var(--qy-teal-300); }
.border-teal-400 { border-color: var(--qy-teal-400); }
.border-teal-500 { border-color: var(--qy-teal-500); }
.border-teal-600 { border-color: var(--qy-teal-600); }
.border-teal-700 { border-color: var(--qy-teal-700); }
.border-teal-800 { border-color: var(--qy-teal-800); }
.border-teal-900 { border-color: var(--qy-teal-900); }
.border-teal-950 { border-color: var(--qy-teal-950); }
/* CYAN */
.border-cyan-50 { border-color: var(--qy-cyan-50); }
.border-cyan-100 { border-color: var(--qy-cyan-100); }
.border-cyan-200 { border-color: var(--qy-cyan-200); }
.border-cyan-300 { border-color: var(--qy-cyan-300); }
.border-cyan-400 { border-color: var(--qy-cyan-400); }
.border-cyan-500 { border-color: var(--qy-cyan-500); }
.border-cyan-600 { border-color: var(--qy-cyan-600); }
.border-cyan-700 { border-color: var(--qy-cyan-700); }
.border-cyan-800 { border-color: var(--qy-cyan-800); }
.border-cyan-900 { border-color: var(--qy-cyan-900); }
.border-cyan-950 { border-color: var(--qy-cyan-950); }
/* SKY */
.border-sky-50 { border-color: var(--qy-sky-50); }
.border-sky-100 { border-color: var(--qy-sky-100); }
.border-sky-200 { border-color: var(--qy-sky-200); }
.border-sky-300 { border-color: var(--qy-sky-300); }
.border-sky-400 { border-color: var(--qy-sky-400); }
.border-sky-500 { border-color: var(--qy-sky-500); }
.border-sky-600 { border-color: var(--qy-sky-600); }
.border-sky-700 { border-color: var(--qy-sky-700); }
.border-sky-800 { border-color: var(--qy-sky-800); }
.border-sky-900 { border-color: var(--qy-sky-900); }
.border-sky-950 { border-color: var(--qy-sky-950); }
/* BLUE */
.border-blue-50 { border-color: var(--qy-blue-50); }
.border-blue-100 { border-color: var(--qy-blue-100); }
.border-blue-200 { border-color: var(--qy-blue-200); }
.border-blue-300 { border-color: var(--qy-blue-300); }
.border-blue-400 { border-color: var(--qy-blue-400); }
.border-blue-500 { border-color: var(--qy-blue-500); }
.border-blue-600 { border-color: var(--qy-blue-600); }
.border-blue-700 { border-color: var(--qy-blue-700); }
.border-blue-800 { border-color: var(--qy-blue-800); }
.border-blue-900 { border-color: var(--qy-blue-900); }
.border-blue-950 { border-color: var(--qy-blue-950); }
/* INDIGO */
.border-indigo-50 { border-color: var(--qy-indigo-50); }
.border-indigo-100 { border-color: var(--qy-indigo-100); }
.border-indigo-200 { border-color: var(--qy-indigo-200); }
.border-indigo-300 { border-color: var(--qy-indigo-300); }
.border-indigo-400 { border-color: var(--qy-indigo-400); }
.border-indigo-500 { border-color: var(--qy-indigo-500); }
.border-indigo-600 { border-color: var(--qy-indigo-600); }
.border-indigo-700 { border-color: var(--qy-indigo-700); }
.border-indigo-800 { border-color: var(--qy-indigo-800); }
.border-indigo-900 { border-color: var(--qy-indigo-900); }
.border-indigo-950 { border-color: var(--qy-indigo-950); }
/* VIOLET */
.border-violet-50 { border-color: var(--qy-violet-50); }
.border-violet-100 { border-color: var(--qy-violet-100); }
.border-violet-200 { border-color: var(--qy-violet-200); }
.border-violet-300 { border-color: var(--qy-violet-300); }
.border-violet-400 { border-color: var(--qy-violet-400); }
.border-violet-500 { border-color: var(--qy-violet-500); }
.border-violet-600 { border-color: var(--qy-violet-600); }
.border-violet-700 { border-color: var(--qy-violet-700); }
.border-violet-800 { border-color: var(--qy-violet-800); }
.border-violet-900 { border-color: var(--qy-violet-900); }
.border-violet-950 { border-color: var(--qy-violet-950); }
/* PURPLE */
.border-purple-50 { border-color: var(--qy-purple-50); }
.border-purple-100 { border-color: var(--qy-purple-100); }
.border-purple-200 { border-color: var(--qy-purple-200); }
.border-purple-300 { border-color: var(--qy-purple-300); }
.border-purple-400 { border-color: var(--qy-purple-400); }
.border-purple-500 { border-color: var(--qy-purple-500); }
.border-purple-600 { border-color: var(--qy-purple-600); }
.border-purple-700 { border-color: var(--qy-purple-700); }
.border-purple-800 { border-color: var(--qy-purple-800); }
.border-purple-900 { border-color: var(--qy-purple-900); }
.border-purple-950 { border-color: var(--qy-purple-950); }
/* FUCHSIA */
.border-fuchsia-50 { border-color: var(--qy-fuchsia-50); }
.border-fuchsia-100 { border-color: var(--qy-fuchsia-100); }
.border-fuchsia-200 { border-color: var(--qy-fuchsia-200); }
.border-fuchsia-300 { border-color: var(--qy-fuchsia-300); }
.border-fuchsia-400 { border-color: var(--qy-fuchsia-400); }
.border-fuchsia-500 { border-color: var(--qy-fuchsia-500); }
.border-fuchsia-600 { border-color: var(--qy-fuchsia-600); }
.border-fuchsia-700 { border-color: var(--qy-fuchsia-700); }
.border-fuchsia-800 { border-color: var(--qy-fuchsia-800); }
.border-fuchsia-900 { border-color: var(--qy-fuchsia-900); }
.border-fuchsia-950 { border-color: var(--qy-fuchsia-950); }
/* PINK */
.border-pink-50 { border-color: var(--qy-pink-50); }
.border-pink-100 { border-color: var(--qy-pink-100); }
.border-pink-200 { border-color: var(--qy-pink-200); }
.border-pink-300 { border-color: var(--qy-pink-300); }
.border-pink-400 { border-color: var(--qy-pink-400); }
.border-pink-500 { border-color: var(--qy-pink-500); }
.border-pink-600 { border-color: var(--qy-pink-600); }
.border-pink-700 { border-color: var(--qy-pink-700); }
.border-pink-800 { border-color: var(--qy-pink-800); }
.border-pink-900 { border-color: var(--qy-pink-900); }
.border-pink-950 { border-color: var(--qy-pink-950); }
/* ROSE */
.border-rose-50 { border-color: var(--qy-rose-50); }
.border-rose-100 { border-color: var(--qy-rose-100); }
.border-rose-200 { border-color: var(--qy-rose-200); }
.border-rose-300 { border-color: var(--qy-rose-300); }
.border-rose-400 { border-color: var(--qy-rose-400); }
.border-rose-500 { border-color: var(--qy-rose-500); }
.border-rose-600 { border-color: var(--qy-rose-600); }
.border-rose-700 { border-color: var(--qy-rose-700); }
.border-rose-800 { border-color: var(--qy-rose-800); }
.border-rose-900 { border-color: var(--qy-rose-900); }
.border-rose-950 { border-color: var(--qy-rose-950); }
/* ==========================================================================
TOKENS SEMÁNTICOS
Todos los alias conservan el namespace --qy-* y apuntan a la paleta base.
========================================================================== */
:root {
/* Texto */
--qy-text: var(--qy-color-text, var(--qy-zinc-900));
--qy-text-muted: var(--qy-color-text-muted, var(--qy-gray-500));
--qy-text-inverse: var(--qy-color-text-inverse, var(--qy-white));
--qy-text-primary: var(--qy-primary-600, var(--qy-blue-600));
--qy-text-secondary: var(--qy-secondary-600, var(--qy-violet-600));
--qy-text-success: var(--qy-success-600, var(--qy-green-600));
--qy-text-warning: var(--qy-warning-600, var(--qy-amber-600));
--qy-text-danger: var(--qy-danger-600, var(--qy-red-600));
--qy-text-info: var(--qy-info-600, var(--qy-cyan-600));
--qy-text-900: var(--qy-neutral-900);
--qy-text-800: var(--qy-neutral-800);
--qy-text-700: var(--qy-neutral-700);
--qy-text-600: var(--qy-neutral-600);
--qy-text-500: var(--qy-neutral-500);
--qy-text-400: var(--qy-neutral-400);
--qy-text-300: var(--qy-neutral-300);
--qy-text-200: var(--qy-neutral-200);
--qy-text-100: var(--qy-neutral-100);
/* Fondos */
--qy-bg: var(--qy-color-bg, var(--qy-white));
--qy-bg-muted: var(--qy-color-bg-muted, var(--qy-neutral-100));
--qy-bg-inverse: var(--qy-color-bg-inverse, var(--qy-neutral-900));
--qy-bg-primary: var(--qy-primary-50, var(--qy-blue-50));
--qy-bg-secondary: var(--qy-secondary-50, var(--qy-violet-50));
--qy-bg-success: var(--qy-success-50, var(--qy-green-50));
--qy-bg-warning: var(--qy-warning-50, var(--qy-amber-50));
--qy-bg-danger: var(--qy-danger-50, var(--qy-red-50));
--qy-bg-info: var(--qy-info-50, var(--qy-cyan-50));
--qy-bg-900: var(--qy-neutral-900);
--qy-bg-800: var(--qy-neutral-800);
--qy-bg-700: var(--qy-neutral-700);
--qy-bg-600: var(--qy-neutral-600);
--qy-bg-500: var(--qy-neutral-500);
--qy-bg-400: var(--qy-neutral-400);
--qy-bg-300: var(--qy-neutral-300);
--qy-bg-200: var(--qy-neutral-200);
--qy-bg-100: var(--qy-neutral-100);
--qy-bg-50: var(--qy-neutral-50);
/* Bordes */
--qy-bc: var(--qy-color-border, var(--qy-neutral-200));
--qy-bc-muted: var(--qy-color-border-muted, var(--qy-neutral-200));
--qy-bc-inverse: var(--qy-color-border-inverse, var(--qy-neutral-900));
--qy-bc-primary: var(--qy-primary-600, var(--qy-blue-600));
--qy-bc-secondary: var(--qy-secondary-600, var(--qy-violet-600));
--qy-bc-success: var(--qy-success-600, var(--qy-green-600));
--qy-bc-warning: var(--qy-warning-600, var(--qy-amber-600));
--qy-bc-danger: var(--qy-danger-600, var(--qy-red-600));
--qy-bc-info: var(--qy-info-600, var(--qy-cyan-600));
--qy-bc-900: var(--qy-neutral-900);
--qy-bc-800: var(--qy-neutral-800);
--qy-bc-700: var(--qy-neutral-700);
--qy-bc-600: var(--qy-neutral-600);
--qy-bc-500: var(--qy-neutral-500);
--qy-bc-400: var(--qy-neutral-400);
--qy-bc-300: var(--qy-neutral-300);
--qy-bc-200: var(--qy-neutral-200);
--qy-bc-100: var(--qy-neutral-100);
--qy-bc-50: var(--qy-neutral-50);
}
/* ==========================================================================
UTILIDADES SEMÁNTICAS DE TEXTO
========================================================================== */
.color-inherit {
color: inherit !important;
}
.color-current {
color: currentColor !important;
}
.color-transparent {
color: transparent !important;
}
/* ===========================================================
2) Colores base del sistema
=========================================================== */
.color {
color: var(--qy-text) !important;
}
.color-muted {
color: var(--qy-text-muted) !important;
}
.color-inverse {
color: var(--qy-text-inverse) !important;
}
/* ===========================================================
3) Paleta semántica
=========================================================== */
.color-primary {
color: var(--qy-text-primary) !important;
}
.color-secondary {
color: var(--qy-text-secondary) !important;
}
.color-success {
color: var(--qy-text-success) !important;
}
.color-warning {
color: var(--qy-text-warning) !important;
}
.color-danger {
color: var(--qy-text-danger) !important;
}
.color-info {
color: var(--qy-text-info) !important;
}
/* ===========================================================
4) Escala de color (100–900)
=========================================================== */
.color-900 { color: var(--qy-text-900) !important; }
.color-800 { color: var(--qy-text-800) !important; }
.color-700 { color: var(--qy-text-700) !important; }
.color-600 { color: var(--qy-text-600) !important; }
.color-500 { color: var(--qy-text-500) !important; }
.color-400 { color: var(--qy-text-400) !important; }
.color-300 { color: var(--qy-text-300) !important; }
.color-200 { color: var(--qy-text-200) !important; }
.color-100 { color: var(--qy-text-100) !important; }
/* ===========================================================
5) Colores puros
=========================================================== */
/* ==========================================================================
UTILIDADES SEMÁNTICAS Y RESPONSIVAS DE FONDO
========================================================================== */
/* --------------------------------------------------------------------------
2) Clases base
-------------------------------------------------------------------------- */
.bg-inherit { --qy-bg-color: inherit; background-color: inherit !important; }
.bg-current { --qy-bg-color: currentColor; background-color: currentColor !important; }
.bg-transparent { --qy-bg-color: transparent; background-color: transparent !important; }
.bg { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
/* --------------------------------------------------------------------------
3) Variantes responsivas (min-width)
Patrón: .bg-{bp}-{token}
-------------------------------------------------------------------------- */
/* 640 */
@media (min-width: 640px) {
.bg-640 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-640-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-640-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-640-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-640-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-640-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-640-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-640-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-640-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-640-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-640-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-640-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-640-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-640-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-640-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-640-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-640-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-640-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-640-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-640-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-640-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 768 */
@media (min-width: 768px) {
.bg-768 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-768-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-768-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-768-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-768-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-768-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-768-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-768-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-768-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-768-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-768-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-768-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-768-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-768-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-768-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-768-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-768-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-768-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-768-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-768-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-768-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 1024 */
@media (min-width: 1024px) {
.bg-1024 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-1024-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-1024-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-1024-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-1024-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-1024-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-1024-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-1024-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-1024-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-1024-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-1024-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-1024-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-1024-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-1024-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-1024-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-1024-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-1024-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-1024-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-1024-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-1024-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-1024-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 1280 */
@media (min-width: 1280px) {
.bg-1280 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-1280-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-1280-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-1280-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-1280-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-1280-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-1280-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-1280-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-1280-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-1280-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-1280-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-1280-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-1280-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-1280-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-1280-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-1280-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-1280-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-1280-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-1280-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-1280-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-1280-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 1536 */
@media (min-width: 1536px) {
.bg-1536 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-1536-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-1536-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-1536-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-1536-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-1536-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-1536-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-1536-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-1536-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-1536-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-1536-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-1536-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-1536-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-1536-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-1536-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-1536-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-1536-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-1536-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-1536-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-1536-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-1536-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 2560 */
@media (min-width: 2560px) {
.bg-2560 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-2560-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-2560-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-2560-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-2560-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-2560-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-2560-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-2560-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-2560-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-2560-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-2560-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-2560-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-2560-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-2560-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-2560-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-2560-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-2560-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-2560-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-2560-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-2560-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-2560-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 3840 */
@media (min-width: 3840px) {
.bg-3840 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-3840-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-3840-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-3840-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-3840-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-3840-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-3840-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-3840-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-3840-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-3840-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-3840-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-3840-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-3840-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-3840-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-3840-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-3840-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-3840-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-3840-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-3840-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-3840-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-3840-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* 6016 */
@media (min-width: 6016px) {
.bg-6016 { --qy-bg-color: var(--qy-bg); background-color: var(--qy-bg) !important; }
.bg-6016-muted { --qy-bg-color: var(--qy-bg-muted); background-color: var(--qy-bg-muted) !important; }
.bg-6016-inverse { --qy-bg-color: var(--qy-bg-inverse); background-color: var(--qy-bg-inverse) !important; }
.bg-6016-primary { --qy-bg-color: var(--qy-bg-primary); background-color: var(--qy-bg-primary) !important; }
.bg-6016-secondary { --qy-bg-color: var(--qy-bg-secondary); background-color: var(--qy-bg-secondary) !important; }
.bg-6016-success { --qy-bg-color: var(--qy-bg-success); background-color: var(--qy-bg-success) !important; }
.bg-6016-warning { --qy-bg-color: var(--qy-bg-warning); background-color: var(--qy-bg-warning) !important; }
.bg-6016-danger { --qy-bg-color: var(--qy-bg-danger); background-color: var(--qy-bg-danger) !important; }
.bg-6016-info { --qy-bg-color: var(--qy-bg-info); background-color: var(--qy-bg-info) !important; }
.bg-6016-900 { --qy-bg-color: var(--qy-bg-900); background-color: var(--qy-bg-900) !important; }
.bg-6016-800 { --qy-bg-color: var(--qy-bg-800); background-color: var(--qy-bg-800) !important; }
.bg-6016-700 { --qy-bg-color: var(--qy-bg-700); background-color: var(--qy-bg-700) !important; }
.bg-6016-600 { --qy-bg-color: var(--qy-bg-600); background-color: var(--qy-bg-600) !important; }
.bg-6016-500 { --qy-bg-color: var(--qy-bg-500); background-color: var(--qy-bg-500) !important; }
.bg-6016-400 { --qy-bg-color: var(--qy-bg-400); background-color: var(--qy-bg-400) !important; }
.bg-6016-300 { --qy-bg-color: var(--qy-bg-300); background-color: var(--qy-bg-300) !important; }
.bg-6016-200 { --qy-bg-color: var(--qy-bg-200); background-color: var(--qy-bg-200) !important; }
.bg-6016-100 { --qy-bg-color: var(--qy-bg-100); background-color: var(--qy-bg-100) !important; }
.bg-6016-50 { --qy-bg-color: var(--qy-bg-50); background-color: var(--qy-bg-50) !important; }
.bg-6016-black { --qy-bg-color: var(--qy-black); background-color: var(--qy-black) !important; }
.bg-6016-white { --qy-bg-color: var(--qy-white); background-color: var(--qy-white) !important; }
}
/* ==========================================================================
UTILIDADES SEMÁNTICAS, LATERALES Y RESPONSIVAS DE BORDE
========================================================================== */
.bc { --qy-bc-current: var(--qy-bc); }
.bc-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-success { --qy-bc-current: var(--qy-bc-success); }
.bc-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-info { --qy-bc-current: var(--qy-bc-info); }
.bc-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-black { --qy-bc-current: var(--qy-black); }
.bc-white { --qy-bc-current: var(--qy-white); }
/* --------------------------------------------------------------------------
3) COMPOSICIÓN
--------------------------------------------------------------------------
Las utilidades estructurales .border, .border-x, .border-y, .border-t,
.border-r, .border-b y .border-l viven exclusivamente en
utilidades/borders.css y no declaran color. Las clases de paleta y los alias
semánticos son los únicos responsables de colorear el borde.
-------------------------------------------------------------------------- */
.border-inherit { border-color: inherit !important; }
.border-current { border-color: currentColor !important; }
.border-transparent { border-color: transparent !important; }
/* --------------------------------------------------------------------------
4) ALIAS DIRECTOS (por si prefieres una sola clase) — Base (sin bp)
-------------------------------------------------------------------------- */
/* Todos los lados */
.border-muted { border-color: var(--qy-bc-muted) !important; }
.border-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-primary { border-color: var(--qy-bc-primary) !important; }
.border-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-success { border-color: var(--qy-bc-success) !important; }
.border-warning { border-color: var(--qy-bc-warning) !important; }
.border-danger { border-color: var(--qy-bc-danger) !important; }
.border-info { border-color: var(--qy-bc-info) !important; }
.border-900 { border-color: var(--qy-bc-900) !important; }
.border-800 { border-color: var(--qy-bc-800) !important; }
.border-700 { border-color: var(--qy-bc-700) !important; }
.border-600 { border-color: var(--qy-bc-600) !important; }
.border-500 { border-color: var(--qy-bc-500) !important; }
.border-400 { border-color: var(--qy-bc-400) !important; }
.border-300 { border-color: var(--qy-bc-300) !important; }
.border-200 { border-color: var(--qy-bc-200) !important; }
.border-100 { border-color: var(--qy-bc-100) !important; }
.border-50 { border-color: var(--qy-bc-50) !important; }
/* Ejes */
.border-x-muted { border-left-color: var(--qy-bc-muted) !important; border-right-color: var(--qy-bc-muted) !important; }
.border-x-inverse { border-left-color: var(--qy-bc-inverse) !important; border-right-color: var(--qy-bc-inverse) !important; }
.border-x-primary { border-left-color: var(--qy-bc-primary) !important; border-right-color: var(--qy-bc-primary) !important; }
.border-x-secondary { border-left-color: var(--qy-bc-secondary) !important; border-right-color: var(--qy-bc-secondary) !important; }
.border-x-success { border-left-color: var(--qy-bc-success) !important; border-right-color: var(--qy-bc-success) !important; }
.border-x-warning { border-left-color: var(--qy-bc-warning) !important; border-right-color: var(--qy-bc-warning) !important; }
.border-x-danger { border-left-color: var(--qy-bc-danger) !important; border-right-color: var(--qy-bc-danger) !important; }
.border-x-info { border-left-color: var(--qy-bc-info) !important; border-right-color: var(--qy-bc-info) !important; }
.border-x-900 { border-left-color: var(--qy-bc-900) !important; border-right-color: var(--qy-bc-900) !important; }
.border-x-800 { border-left-color: var(--qy-bc-800) !important; border-right-color: var(--qy-bc-800) !important; }
.border-x-700 { border-left-color: var(--qy-bc-700) !important; border-right-color: var(--qy-bc-700) !important; }
.border-x-600 { border-left-color: var(--qy-bc-600) !important; border-right-color: var(--qy-bc-600) !important; }
.border-x-500 { border-left-color: var(--qy-bc-500) !important; border-right-color: var(--qy-bc-500) !important; }
.border-x-400 { border-left-color: var(--qy-bc-400) !important; border-right-color: var(--qy-bc-400) !important; }
.border-x-300 { border-left-color: var(--qy-bc-300) !important; border-right-color: var(--qy-bc-300) !important; }
.border-x-200 { border-left-color: var(--qy-bc-200) !important; border-right-color: var(--qy-bc-200) !important; }
.border-x-100 { border-left-color: var(--qy-bc-100) !important; border-right-color: var(--qy-bc-100) !important; }
.border-x-50 { border-left-color: var(--qy-bc-50) !important; border-right-color: var(--qy-bc-50) !important; }
/* Lados (top, right, bottom, left) — semánticos + escala neutral completa */
.border-t-muted { border-top-color: var(--qy-bc-muted) !important; }
.border-t-inverse { border-top-color: var(--qy-bc-inverse) !important; }
.border-t-primary { border-top-color: var(--qy-bc-primary) !important; }
.border-t-secondary { border-top-color: var(--qy-bc-secondary) !important; }
.border-t-success { border-top-color: var(--qy-bc-success) !important; }
.border-t-warning { border-top-color: var(--qy-bc-warning) !important; }
.border-t-danger { border-top-color: var(--qy-bc-danger) !important; }
.border-t-info { border-top-color: var(--qy-bc-info) !important; }
.border-t-900 { border-top-color: var(--qy-bc-900) !important; }
.border-t-800 { border-top-color: var(--qy-bc-800) !important; }
.border-t-700 { border-top-color: var(--qy-bc-700) !important; }
.border-t-600 { border-top-color: var(--qy-bc-600) !important; }
.border-t-500 { border-top-color: var(--qy-bc-500) !important; }
.border-t-400 { border-top-color: var(--qy-bc-400) !important; }
.border-t-300 { border-top-color: var(--qy-bc-300) !important; }
.border-t-200 { border-top-color: var(--qy-bc-200) !important; }
.border-t-100 { border-top-color: var(--qy-bc-100) !important; }
.border-t-50 { border-top-color: var(--qy-bc-50) !important; }
.border-t-black { border-top-color: var(--qy-black) !important; }
.border-t-white { border-top-color: var(--qy-white) !important; }
.border-r-muted { border-right-color: var(--qy-bc-muted) !important; }
.border-r-inverse { border-right-color: var(--qy-bc-inverse) !important; }
.border-r-primary { border-right-color: var(--qy-bc-primary) !important; }
.border-r-secondary { border-right-color: var(--qy-bc-secondary) !important; }
.border-r-success { border-right-color: var(--qy-bc-success) !important; }
.border-r-warning { border-right-color: var(--qy-bc-warning) !important; }
.border-r-danger { border-right-color: var(--qy-bc-danger) !important; }
.border-r-info { border-right-color: var(--qy-bc-info) !important; }
.border-r-900 { border-right-color: var(--qy-bc-900) !important; }
.border-r-800 { border-right-color: var(--qy-bc-800) !important; }
.border-r-700 { border-right-color: var(--qy-bc-700) !important; }
.border-r-600 { border-right-color: var(--qy-bc-600) !important; }
.border-r-500 { border-right-color: var(--qy-bc-500) !important; }
.border-r-400 { border-right-color: var(--qy-bc-400) !important; }
.border-r-300 { border-right-color: var(--qy-bc-300) !important; }
.border-r-200 { border-right-color: var(--qy-bc-200) !important; }
.border-r-100 { border-right-color: var(--qy-bc-100) !important; }
.border-r-50 { border-right-color: var(--qy-bc-50) !important; }
.border-r-black { border-right-color: var(--qy-black) !important; }
.border-r-white { border-right-color: var(--qy-white) !important; }
.border-b-muted { border-bottom-color: var(--qy-bc-muted) !important; }
.border-b-inverse { border-bottom-color: var(--qy-bc-inverse) !important; }
.border-b-primary { border-bottom-color: var(--qy-bc-primary) !important; }
.border-b-secondary { border-bottom-color: var(--qy-bc-secondary) !important; }
.border-b-success { border-bottom-color: var(--qy-bc-success) !important; }
.border-b-warning { border-bottom-color: var(--qy-bc-warning) !important; }
.border-b-danger { border-bottom-color: var(--qy-bc-danger) !important; }
.border-b-info { border-bottom-color: var(--qy-bc-info) !important; }
.border-b-900 { border-bottom-color: var(--qy-bc-900) !important; }
.border-b-800 { border-bottom-color: var(--qy-bc-800) !important; }
.border-b-700 { border-bottom-color: var(--qy-bc-700) !important; }
.border-b-600 { border-bottom-color: var(--qy-bc-600) !important; }
.border-b-500 { border-bottom-color: var(--qy-bc-500) !important; }
.border-b-400 { border-bottom-color: var(--qy-bc-400) !important; }
.border-b-300 { border-bottom-color: var(--qy-bc-300) !important; }
.border-b-200 { border-bottom-color: var(--qy-bc-200) !important; }
.border-b-100 { border-bottom-color: var(--qy-bc-100) !important; }
.border-b-50 { border-bottom-color: var(--qy-bc-50) !important; }
.border-b-black { border-bottom-color: var(--qy-black) !important; }
.border-b-white { border-bottom-color: var(--qy-white) !important; }
.border-l-muted { border-left-color: var(--qy-bc-muted) !important; }
.border-l-inverse { border-left-color: var(--qy-bc-inverse) !important; }
.border-l-primary { border-left-color: var(--qy-bc-primary) !important; }
.border-l-secondary { border-left-color: var(--qy-bc-secondary) !important; }
.border-l-success { border-left-color: var(--qy-bc-success) !important; }
.border-l-warning { border-left-color: var(--qy-bc-warning) !important; }
.border-l-danger { border-left-color: var(--qy-bc-danger) !important; }
.border-l-info { border-left-color: var(--qy-bc-info) !important; }
.border-l-900 { border-left-color: var(--qy-bc-900) !important; }
.border-l-800 { border-left-color: var(--qy-bc-800) !important; }
.border-l-700 { border-left-color: var(--qy-bc-700) !important; }
.border-l-600 { border-left-color: var(--qy-bc-600) !important; }
.border-l-500 { border-left-color: var(--qy-bc-500) !important; }
.border-l-400 { border-left-color: var(--qy-bc-400) !important; }
.border-l-300 { border-left-color: var(--qy-bc-300) !important; }
.border-l-200 { border-left-color: var(--qy-bc-200) !important; }
.border-l-100 { border-left-color: var(--qy-bc-100) !important; }
.border-l-50 { border-left-color: var(--qy-bc-50) !important; }
.border-l-black { border-left-color: var(--qy-black) !important; }
.border-l-white { border-left-color: var(--qy-white) !important; }
/* --------------------------------------------------------------------------
5) TOKENS RESPONSIVOS (definen --qy-bc-current por breakpoint)
Los consumen los componentes que admiten color de énfasis contextual.
-------------------------------------------------------------------------- */
/* 640 */
@media (min-width: 640px) {
.bc-640 { --qy-bc-current: var(--qy-bc); }
.bc-640-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-640-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-640-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-640-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-640-success { --qy-bc-current: var(--qy-bc-success); }
.bc-640-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-640-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-640-info { --qy-bc-current: var(--qy-bc-info); }
.bc-640-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-640-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-640-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-640-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-640-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-640-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-640-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-640-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-640-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-640-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-640-black { --qy-bc-current: var(--qy-black); }
.bc-640-white { --qy-bc-current: var(--qy-white); }
}
/* 768 */
@media (min-width: 768px) {
.bc-768 { --qy-bc-current: var(--qy-bc); }
.bc-768-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-768-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-768-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-768-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-768-success { --qy-bc-current: var(--qy-bc-success); }
.bc-768-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-768-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-768-info { --qy-bc-current: var(--qy-bc-info); }
.bc-768-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-768-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-768-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-768-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-768-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-768-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-768-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-768-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-768-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-768-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-768-black { --qy-bc-current: var(--qy-black); }
.bc-768-white { --qy-bc-current: var(--qy-white); }
}
/* 1024 */
@media (min-width: 1024px) {
.bc-1024 { --qy-bc-current: var(--qy-bc); }
.bc-1024-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-1024-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-1024-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-1024-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-1024-success { --qy-bc-current: var(--qy-bc-success); }
.bc-1024-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-1024-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-1024-info { --qy-bc-current: var(--qy-bc-info); }
.bc-1024-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-1024-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-1024-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-1024-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-1024-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-1024-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-1024-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-1024-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-1024-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-1024-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-1024-black { --qy-bc-current: var(--qy-black); }
.bc-1024-white { --qy-bc-current: var(--qy-white); }
}
/* 1280 */
@media (min-width: 1280px) {
.bc-1280 { --qy-bc-current: var(--qy-bc); }
.bc-1280-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-1280-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-1280-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-1280-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-1280-success { --qy-bc-current: var(--qy-bc-success); }
.bc-1280-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-1280-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-1280-info { --qy-bc-current: var(--qy-bc-info); }
.bc-1280-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-1280-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-1280-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-1280-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-1280-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-1280-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-1280-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-1280-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-1280-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-1280-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-1280-black { --qy-bc-current: var(--qy-black); }
.bc-1280-white { --qy-bc-current: var(--qy-white); }
}
/* 1536 */
@media (min-width: 1536px) {
.bc-1536 { --qy-bc-current: var(--qy-bc); }
.bc-1536-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-1536-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-1536-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-1536-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-1536-success { --qy-bc-current: var(--qy-bc-success); }
.bc-1536-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-1536-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-1536-info { --qy-bc-current: var(--qy-bc-info); }
.bc-1536-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-1536-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-1536-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-1536-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-1536-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-1536-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-1536-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-1536-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-1536-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-1536-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-1536-black { --qy-bc-current: var(--qy-black); }
.bc-1536-white { --qy-bc-current: var(--qy-white); }
}
/* 2560 */
@media (min-width: 2560px) {
.bc-2560 { --qy-bc-current: var(--qy-bc); }
.bc-2560-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-2560-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-2560-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-2560-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-2560-success { --qy-bc-current: var(--qy-bc-success); }
.bc-2560-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-2560-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-2560-info { --qy-bc-current: var(--qy-bc-info); }
.bc-2560-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-2560-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-2560-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-2560-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-2560-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-2560-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-2560-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-2560-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-2560-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-2560-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-2560-black { --qy-bc-current: var(--qy-black); }
.bc-2560-white { --qy-bc-current: var(--qy-white); }
}
/* 3840 */
@media (min-width: 3840px) {
.bc-3840 { --qy-bc-current: var(--qy-bc); }
.bc-3840-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-3840-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-3840-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-3840-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-3840-success { --qy-bc-current: var(--qy-bc-success); }
.bc-3840-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-3840-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-3840-info { --qy-bc-current: var(--qy-bc-info); }
.bc-3840-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-3840-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-3840-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-3840-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-3840-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-3840-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-3840-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-3840-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-3840-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-3840-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-3840-black { --qy-bc-current: var(--qy-black); }
.bc-3840-white { --qy-bc-current: var(--qy-white); }
}
/* 6016 */
@media (min-width: 6016px) {
.bc-6016 { --qy-bc-current: var(--qy-bc); }
.bc-6016-muted { --qy-bc-current: var(--qy-bc-muted); }
.bc-6016-inverse { --qy-bc-current: var(--qy-bc-inverse); }
.bc-6016-primary { --qy-bc-current: var(--qy-bc-primary); }
.bc-6016-secondary { --qy-bc-current: var(--qy-bc-secondary); }
.bc-6016-success { --qy-bc-current: var(--qy-bc-success); }
.bc-6016-warning { --qy-bc-current: var(--qy-bc-warning); }
.bc-6016-danger { --qy-bc-current: var(--qy-bc-danger); }
.bc-6016-info { --qy-bc-current: var(--qy-bc-info); }
.bc-6016-900 { --qy-bc-current: var(--qy-bc-900); }
.bc-6016-800 { --qy-bc-current: var(--qy-bc-800); }
.bc-6016-700 { --qy-bc-current: var(--qy-bc-700); }
.bc-6016-600 { --qy-bc-current: var(--qy-bc-600); }
.bc-6016-500 { --qy-bc-current: var(--qy-bc-500); }
.bc-6016-400 { --qy-bc-current: var(--qy-bc-400); }
.bc-6016-300 { --qy-bc-current: var(--qy-bc-300); }
.bc-6016-200 { --qy-bc-current: var(--qy-bc-200); }
.bc-6016-100 { --qy-bc-current: var(--qy-bc-100); }
.bc-6016-50 { --qy-bc-current: var(--qy-bc-50); }
.bc-6016-black { --qy-bc-current: var(--qy-black); }
.bc-6016-white { --qy-bc-current: var(--qy-white); }
}
/* --------------------------------------------------------------------------
6) ALIAS RESPONSIVOS (por si prefieres una sola clase desde bp)
Nota: para evitar un bundle gigante, incluimos todos los lados; ejes/lados
puedes obtenerlos combinando `.bc-{bp}-{token}` + `.border-x / .border-t`.
Si IGUAL quieres alias por lado/eje en responsive, duplica la sección base
dentro del @media correspondiente.
-------------------------------------------------------------------------- */
/* 640 — todos los lados */
@media (min-width: 640px) {
.border-640 { border-color: var(--qy-bc) !important; }
.border-640-muted { border-color: var(--qy-bc-muted) !important; }
.border-640-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-640-primary { border-color: var(--qy-bc-primary) !important; }
.border-640-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-640-success { border-color: var(--qy-bc-success) !important; }
.border-640-warning { border-color: var(--qy-bc-warning) !important; }
.border-640-danger { border-color: var(--qy-bc-danger) !important; }
.border-640-info { border-color: var(--qy-bc-info) !important; }
.border-640-900 { border-color: var(--qy-bc-900) !important; }
.border-640-800 { border-color: var(--qy-bc-800) !important; }
.border-640-700 { border-color: var(--qy-bc-700) !important; }
.border-640-600 { border-color: var(--qy-bc-600) !important; }
.border-640-500 { border-color: var(--qy-bc-500) !important; }
.border-640-400 { border-color: var(--qy-bc-400) !important; }
.border-640-300 { border-color: var(--qy-bc-300) !important; }
.border-640-200 { border-color: var(--qy-bc-200) !important; }
.border-640-100 { border-color: var(--qy-bc-100) !important; }
.border-640-50 { border-color: var(--qy-bc-50) !important; }
.border-640-black { border-color: var(--qy-black) !important; }
.border-640-white { border-color: var(--qy-white) !important; }
}
/* 768 — todos los lados */
@media (min-width: 768px) {
.border-768 { border-color: var(--qy-bc) !important; }
.border-768-muted { border-color: var(--qy-bc-muted) !important; }
.border-768-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-768-primary { border-color: var(--qy-bc-primary) !important; }
.border-768-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-768-success { border-color: var(--qy-bc-success) !important; }
.border-768-warning { border-color: var(--qy-bc-warning) !important; }
.border-768-danger { border-color: var(--qy-bc-danger) !important; }
.border-768-info { border-color: var(--qy-bc-info) !important; }
.border-768-900 { border-color: var(--qy-bc-900) !important; }
.border-768-800 { border-color: var(--qy-bc-800) !important; }
.border-768-700 { border-color: var(--qy-bc-700) !important; }
.border-768-600 { border-color: var(--qy-bc-600) !important; }
.border-768-500 { border-color: var(--qy-bc-500) !important; }
.border-768-400 { border-color: var(--qy-bc-400) !important; }
.border-768-300 { border-color: var(--qy-bc-300) !important; }
.border-768-200 { border-color: var(--qy-bc-200) !important; }
.border-768-100 { border-color: var(--qy-bc-100) !important; }
.border-768-50 { border-color: var(--qy-bc-50) !important; }
.border-768-black { border-color: var(--qy-black) !important; }
.border-768-white { border-color: var(--qy-white) !important; }
}
/* 1024 — todos los lados */
@media (min-width: 1024px) {
.border-1024 { border-color: var(--qy-bc) !important; }
.border-1024-muted { border-color: var(--qy-bc-muted) !important; }
.border-1024-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-1024-primary { border-color: var(--qy-bc-primary) !important; }
.border-1024-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-1024-success { border-color: var(--qy-bc-success) !important; }
.border-1024-warning { border-color: var(--qy-bc-warning) !important; }
.border-1024-danger { border-color: var(--qy-bc-danger) !important; }
.border-1024-info { border-color: var(--qy-bc-info) !important; }
.border-1024-900 { border-color: var(--qy-bc-900) !important; }
.border-1024-800 { border-color: var(--qy-bc-800) !important; }
.border-1024-700 { border-color: var(--qy-bc-700) !important; }
.border-1024-600 { border-color: var(--qy-bc-600) !important; }
.border-1024-500 { border-color: var(--qy-bc-500) !important; }
.border-1024-400 { border-color: var(--qy-bc-400) !important; }
.border-1024-300 { border-color: var(--qy-bc-300) !important; }
.border-1024-200 { border-color: var(--qy-bc-200) !important; }
.border-1024-100 { border-color: var(--qy-bc-100) !important; }
.border-1024-50 { border-color: var(--qy-bc-50) !important; }
.border-1024-black { border-color: var(--qy-black) !important; }
.border-1024-white { border-color: var(--qy-white) !important; }
}
/* 1280 — todos los lados */
@media (min-width: 1280px) {
.border-1280 { border-color: var(--qy-bc) !important; }
.border-1280-muted { border-color: var(--qy-bc-muted) !important; }
.border-1280-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-1280-primary { border-color: var(--qy-bc-primary) !important; }
.border-1280-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-1280-success { border-color: var(--qy-bc-success) !important; }
.border-1280-warning { border-color: var(--qy-bc-warning) !important; }
.border-1280-danger { border-color: var(--qy-bc-danger) !important; }
.border-1280-info { border-color: var(--qy-bc-info) !important; }
.border-1280-900 { border-color: var(--qy-bc-900) !important; }
.border-1280-800 { border-color: var(--qy-bc-800) !important; }
.border-1280-700 { border-color: var(--qy-bc-700) !important; }
.border-1280-600 { border-color: var(--qy-bc-600) !important; }
.border-1280-500 { border-color: var(--qy-bc-500) !important; }
.border-1280-400 { border-color: var(--qy-bc-400) !important; }
.border-1280-300 { border-color: var(--qy-bc-300) !important; }
.border-1280-200 { border-color: var(--qy-bc-200) !important; }
.border-1280-100 { border-color: var(--qy-bc-100) !important; }
.border-1280-50 { border-color: var(--qy-bc-50) !important; }
.border-1280-black { border-color: var(--qy-black) !important; }
.border-1280-white { border-color: var(--qy-white) !important; }
}
/* 1536 — todos los lados */
@media (min-width: 1536px) {
.border-1536 { border-color: var(--qy-bc) !important; }
.border-1536-muted { border-color: var(--qy-bc-muted) !important; }
.border-1536-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-1536-primary { border-color: var(--qy-bc-primary) !important; }
.border-1536-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-1536-success { border-color: var(--qy-bc-success) !important; }
.border-1536-warning { border-color: var(--qy-bc-warning) !important; }
.border-1536-danger { border-color: var(--qy-bc-danger) !important; }
.border-1536-info { border-color: var(--qy-bc-info) !important; }
.border-1536-900 { border-color: var(--qy-bc-900) !important; }
.border-1536-800 { border-color: var(--qy-bc-800) !important; }
.border-1536-700 { border-color: var(--qy-bc-700) !important; }
.border-1536-600 { border-color: var(--qy-bc-600) !important; }
.border-1536-500 { border-color: var(--qy-bc-500) !important; }
.border-1536-400 { border-color: var(--qy-bc-400) !important; }
.border-1536-300 { border-color: var(--qy-bc-300) !important; }
.border-1536-200 { border-color: var(--qy-bc-200) !important; }
.border-1536-100 { border-color: var(--qy-bc-100) !important; }
.border-1536-50 { border-color: var(--qy-bc-50) !important; }
.border-1536-black { border-color: var(--qy-black) !important; }
.border-1536-white { border-color: var(--qy-white) !important; }
}
/* 2560 — todos los lados */
@media (min-width: 2560px) {
.border-2560 { border-color: var(--qy-bc) !important; }
.border-2560-muted { border-color: var(--qy-bc-muted) !important; }
.border-2560-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-2560-primary { border-color: var(--qy-bc-primary) !important; }
.border-2560-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-2560-success { border-color: var(--qy-bc-success) !important; }
.border-2560-warning { border-color: var(--qy-bc-warning) !important; }
.border-2560-danger { border-color: var(--qy-bc-danger) !important; }
.border-2560-info { border-color: var(--qy-bc-info) !important; }
.border-2560-900 { border-color: var(--qy-bc-900) !important; }
.border-2560-800 { border-color: var(--qy-bc-800) !important; }
.border-2560-700 { border-color: var(--qy-bc-700) !important; }
.border-2560-600 { border-color: var(--qy-bc-600) !important; }
.border-2560-500 { border-color: var(--qy-bc-500) !important; }
.border-2560-400 { border-color: var(--qy-bc-400) !important; }
.border-2560-300 { border-color: var(--qy-bc-300) !important; }
.border-2560-200 { border-color: var(--qy-bc-200) !important; }
.border-2560-100 { border-color: var(--qy-bc-100) !important; }
.border-2560-50 { border-color: var(--qy-bc-50) !important; }
.border-2560-black { border-color: var(--qy-black) !important; }
.border-2560-white { border-color: var(--qy-white) !important; }
}
/* 3840 — todos los lados */
@media (min-width: 3840px) {
.border-3840 { border-color: var(--qy-bc) !important; }
.border-3840-muted { border-color: var(--qy-bc-muted) !important; }
.border-3840-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-3840-primary { border-color: var(--qy-bc-primary) !important; }
.border-3840-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-3840-success { border-color: var(--qy-bc-success) !important; }
.border-3840-warning { border-color: var(--qy-bc-warning) !important; }
.border-3840-danger { border-color: var(--qy-bc-danger) !important; }
.border-3840-info { border-color: var(--qy-bc-info) !important; }
.border-3840-900 { border-color: var(--qy-bc-900) !important; }
.border-3840-800 { border-color: var(--qy-bc-800) !important; }
.border-3840-700 { border-color: var(--qy-bc-700) !important; }
.border-3840-600 { border-color: var(--qy-bc-600) !important; }
.border-3840-500 { border-color: var(--qy-bc-500) !important; }
.border-3840-400 { border-color: var(--qy-bc-400) !important; }
.border-3840-300 { border-color: var(--qy-bc-300) !important; }
.border-3840-200 { border-color: var(--qy-bc-200) !important; }
.border-3840-100 { border-color: var(--qy-bc-100) !important; }
.border-3840-50 { border-color: var(--qy-bc-50) !important; }
.border-3840-black { border-color: var(--qy-black) !important; }
.border-3840-white { border-color: var(--qy-white) !important; }
}
/* 6016 — todos los lados */
@media (min-width: 6016px) {
.border-6016 { border-color: var(--qy-bc) !important; }
.border-6016-muted { border-color: var(--qy-bc-muted) !important; }
.border-6016-inverse { border-color: var(--qy-bc-inverse) !important; }
.border-6016-primary { border-color: var(--qy-bc-primary) !important; }
.border-6016-secondary { border-color: var(--qy-bc-secondary) !important; }
.border-6016-success { border-color: var(--qy-bc-success) !important; }
.border-6016-warning { border-color: var(--qy-bc-warning) !important; }
.border-6016-danger { border-color: var(--qy-bc-danger) !important; }
.border-6016-info { border-color: var(--qy-bc-info) !important; }
.border-6016-900 { border-color: var(--qy-bc-900) !important; }
.border-6016-800 { border-color: var(--qy-bc-800) !important; }
.border-6016-700 { border-color: var(--qy-bc-700) !important; }
.border-6016-600 { border-color: var(--qy-bc-600) !important; }
.border-6016-500 { border-color: var(--qy-bc-500) !important; }
.border-6016-400 { border-color: var(--qy-bc-400) !important; }
.border-6016-300 { border-color: var(--qy-bc-300) !important; }
.border-6016-200 { border-color: var(--qy-bc-200) !important; }
.border-6016-100 { border-color: var(--qy-bc-100) !important; }
.border-6016-50 { border-color: var(--qy-bc-50) !important; }
.border-6016-black { border-color: var(--qy-black) !important; }
.border-6016-white { border-color: var(--qy-white) !important; }
}
/* ===== src/css/contenidos/font-size.css ===== */
/* ===========================================================
QuicklyCSS v2 — Font Scale
Archivo: font-size.css
=========================================================== */
/* 3) Escala principal ----------------------------------------- */
.font-size-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
/* 4) Tamaño compacto único ------------------------------------ */
.font-size-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
/* 5) Utilidades de line-height ------------------------------- */
.leading-none { line-height: var(--q-leading-none); }
.leading-tight { line-height: var(--q-leading-tight); }
.leading-snug { line-height: var(--q-leading-snug); }
.leading-normal { line-height: var(--q-leading-normal); }
.leading-relaxed { line-height: var(--q-leading-relaxed); }
.leading-loose { line-height: var(--q-leading-loose); }
/* 6) Tipografía fluida (para headers opcionales) ------------- */
/* ===========================================================
QuicklyCSS v2 — Font Fluid
Archivo: font-fluid.css
Clases fluidas (automáticamente escalables con el viewport)
=========================================================== */
/* ===========================================================
QuicklyCSS v2 — Font Fluid
Clases fluidas — sin necesidad de breakpoints
=========================================================== */
.font-size-fluid-1 {
font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* ~24 → 48px */
line-height: 1.25;
}
.font-size-fluid-2 {
font-size: clamp(2rem, 1.2rem + 3vw, 4rem); /* ~32 → 64px */
line-height: 1.2;
}
.font-size-fluid-3 {
font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* ~40 → 80px */
line-height: 1.15;
}
.font-size-fluid-4 {
font-size: clamp(3rem, 1.8rem + 5vw, 6rem); /* ~48 → 96px */
line-height: 1.1;
}
.font-size-fluid-5 {
font-size: clamp(3.5rem, 2rem + 6vw, 7rem); /* ~56 → 112px */
line-height: 1.05;
}
.font-size-fluid-6 {
font-size: clamp(4rem, 2.2rem + 7vw, 8rem); /* ~64 → 128px */
line-height: 1;
}
/* Tip:
- Usa estas clases solo para encabezados hero, landing o layouts que necesiten
adaptación automática de fuente entre dispositivos.
- Para control total, prefiere la escala regular: .text-[n] o .text-[bp]-[n].
*/
/* 8) Breakpoints opcionales ---------------------------------- */
/* ===========================================================
QuicklyCSS v2 — Font Scale (Breakpoints por ancho)
Nomenclatura: .text-- | .text--s-
Requiere variables definidas en :root del font-scale.css
=========================================================== */
/* >= 640px */
@media (min-width: 640px){
.font-size-640-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-640-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-640-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-640-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-640-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-640-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-640-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-640-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-640-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-640-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-640-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-640-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-640-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-640-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 768px */
@media (min-width: 768px){
.font-size-768-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-768-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-768-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-768-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-768-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-768-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-768-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-768-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-768-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-768-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-768-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-768-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-768-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-768-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 1024px */
@media (min-width: 1024px){
.font-size-1024-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-1024-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-1024-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-1024-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-1024-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-1024-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-1024-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-1024-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-1024-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-1024-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-1024-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-1024-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-1024-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-1024-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 1280px */
@media (min-width: 1280px){
.font-size-1280-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-1280-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-1280-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-1280-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-1280-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-1280-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-1280-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-1280-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-1280-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-1280-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-1280-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-1280-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-1280-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-1280-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 1536px */
@media (min-width: 1536px){
.font-size-1536-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-1536-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-1536-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-1536-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-1536-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-1536-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-1536-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-1536-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-1536-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-1536-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-1536-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-1536-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-1536-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-1536-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 1920px */
@media (min-width: 1920px){
.font-size-1920-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-1920-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-1920-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-1920-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-1920-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-1920-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-1920-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-1920-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-1920-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-1920-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-1920-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-1920-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-1920-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-1920-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 2560px */
@media (min-width: 2560px){
.font-size-2560-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-2560-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-2560-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-2560-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-2560-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-2560-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-2560-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-2560-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-2560-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-2560-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-2560-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-2560-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-2560-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-2560-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 3840px */
@media (min-width: 3840px){
.font-size-3840-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-3840-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-3840-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-3840-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-3840-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-3840-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-3840-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-3840-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-3840-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-3840-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-3840-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-3840-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-3840-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-3840-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* >= 6016px */
@media (min-width: 6016px){
.font-size-6016-01 { font-size: var(--q-fs-01); line-height: var(--q-lh-s); }
.font-size-6016-1 { font-size: var(--q-fs-1); line-height: var(--q-lh-1); }
.font-size-6016-2 { font-size: var(--q-fs-2); line-height: var(--q-lh-2); }
.font-size-6016-3 { font-size: var(--q-fs-3); line-height: var(--q-lh-3); }
.font-size-6016-4 { font-size: var(--q-fs-4); line-height: var(--q-lh-4); }
.font-size-6016-5 { font-size: var(--q-fs-5); line-height: var(--q-lh-5); }
.font-size-6016-6 { font-size: var(--q-fs-6); line-height: var(--q-lh-6); }
.font-size-6016-7 { font-size: var(--q-fs-7); line-height: var(--q-lh-7); }
.font-size-6016-8 { font-size: var(--q-fs-8); line-height: var(--q-lh-8); }
.font-size-6016-9 { font-size: var(--q-fs-9); line-height: var(--q-lh-9); }
.font-size-6016-10 { font-size: var(--q-fs-10); line-height: var(--q-lh-10); }
.font-size-6016-11 { font-size: var(--q-fs-11); line-height: var(--q-lh-11); }
.font-size-6016-12 { font-size: var(--q-fs-12); line-height: var(--q-lh-12); }
.font-size-6016-13 { font-size: var(--q-fs-13); line-height: var(--q-lh-13); }
}
/* ===== src/css/contenidos/font-style.css ===== */
/* ==========================================================================
QuicklyCSS v2 — font-style.css
Estilos tipográficos: estilo, transformación, decoración, alineación
y espaciado entre letras (tracking)
--------------------------------------------------------------------------
Nomenclatura:
- .italic / .not-italic → estilo de fuente
- .uppercase / .lowercase → transformación de texto
- .capitalize → capitalización inicial
- .normal-case → sin transformación
- .underline / .line-through → decoración de texto
- .no-underline → sin decoración
- .text-* → alineación (left, center, right, justify)
- .tracking-* → espaciado entre letras (escalable)
- Breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016
========================================================================== */
/* --------------------------------------------------------------------------
1. Estilo tipográfico (font-style)
-------------------------------------------------------------------------- */
.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }
/* --------------------------------------------------------------------------
2. Transformación de texto (text-transform)
-------------------------------------------------------------------------- */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }
/* --------------------------------------------------------------------------
3. Decoración de texto (text-decoration)
-------------------------------------------------------------------------- */
.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }
/* --------------------------------------------------------------------------
4. Alineación de texto (text-align)
-------------------------------------------------------------------------- */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
/* --------------------------------------------------------------------------
5. Espaciado entre letras (letter-spacing)
--------------------------------------------------------------------------
🔸 Usa unidades en em (no rem ni px)
- Se escala proporcionalmente al tamaño del texto.
- Mantiene coherencia visual entre títulos grandes y textos pequeños.
- Ejemplo: 0.05em ≈ 0.8px si font-size = 16px, 1.6px si font-size = 32px.
========================================================================== */
.tracking-tighter { letter-spacing: var(--q-tracking-tighter) !important; }
.tracking-tight { letter-spacing: var(--q-tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--q-tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--q-tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--q-tracking-wider) !important; }
.tracking-widest { letter-spacing: var(--q-tracking-widest) !important; }
/* --------------------------------------------------------------------------
6. Variantes responsivas (alineación y transformación)
-------------------------------------------------------------------------- */
/* 640px */
@media (min-width: 640px) {
.text-640-left { text-align: left !important; }
.text-640-center { text-align: center !important; }
.text-640-right { text-align: right !important; }
.text-640-justify { text-align: justify !important; }
.uppercase-640 { text-transform: uppercase !important; }
.lowercase-640 { text-transform: lowercase !important; }
.capitalize-640 { text-transform: capitalize !important; }
.normalcase-640 { text-transform: none !important; }
}
/* 768px */
@media (min-width: 768px) {
.text-768-left { text-align: left !important; }
.text-768-center { text-align: center !important; }
.text-768-right { text-align: right !important; }
.text-768-justify { text-align: justify !important; }
.uppercase-768 { text-transform: uppercase !important; }
.lowercase-768 { text-transform: lowercase !important; }
.capitalize-768 { text-transform: capitalize !important; }
.normalcase-768 { text-transform: none !important; }
}
/* 1024px */
@media (min-width: 1024px) {
.text-1024-left { text-align: left !important; }
.text-1024-center { text-align: center !important; }
.text-1024-right { text-align: right !important; }
.text-1024-justify { text-align: justify !important; }
.uppercase-1024 { text-transform: uppercase !important; }
.lowercase-1024 { text-transform: lowercase !important; }
.capitalize-1024 { text-transform: capitalize !important; }
.normalcase-1024 { text-transform: none !important; }
}
/* 1280px */
@media (min-width: 1280px) {
.text-1280-left { text-align: left !important; }
.text-1280-center { text-align: center !important; }
.text-1280-right { text-align: right !important; }
.text-1280-justify { text-align: justify !important; }
.uppercase-1280 { text-transform: uppercase !important; }
.lowercase-1280 { text-transform: lowercase !important; }
.capitalize-1280 { text-transform: capitalize !important; }
.normalcase-1280 { text-transform: none !important; }
}
/* 1536px */
@media (min-width: 1536px) {
.text-1536-left { text-align: left !important; }
.text-1536-center { text-align: center !important; }
.text-1536-right { text-align: right !important; }
.text-1536-justify { text-align: justify !important; }
.uppercase-1536 { text-transform: uppercase !important; }
.lowercase-1536 { text-transform: lowercase !important; }
.capitalize-1536 { text-transform: capitalize !important; }
.normalcase-1536 { text-transform: none !important; }
}
/* 2560px */
@media (min-width: 2560px) {
.text-2560-left { text-align: left !important; }
.text-2560-center { text-align: center !important; }
.text-2560-right { text-align: right !important; }
.text-2560-justify { text-align: justify !important; }
.uppercase-2560 { text-transform: uppercase !important; }
.lowercase-2560 { text-transform: lowercase !important; }
.capitalize-2560 { text-transform: capitalize !important; }
.normalcase-2560 { text-transform: none !important; }
}
/* 3840px */
@media (min-width: 3840px) {
.text-3840-left { text-align: left !important; }
.text-3840-center { text-align: center !important; }
.text-3840-right { text-align: right !important; }
.text-3840-justify { text-align: justify !important; }
.uppercase-3840 { text-transform: uppercase !important; }
.lowercase-3840 { text-transform: lowercase !important; }
.capitalize-3840 { text-transform: capitalize !important; }
.normalcase-3840 { text-transform: none !important; }
}
/* 6016px */
@media (min-width: 6016px) {
.text-6016-left { text-align: left !important; }
.text-6016-center { text-align: center !important; }
.text-6016-right { text-align: right !important; }
.text-6016-justify { text-align: justify !important; }
.uppercase-6016 { text-transform: uppercase !important; }
.lowercase-6016 { text-transform: lowercase !important; }
.capitalize-6016 { text-transform: capitalize !important; }
.normalcase-6016 { text-transform: none !important; }
}
/* ===== src/css/contenidos/font-weight.css ===== */
/* ==========================================================================
QuicklyCSS v2 — font-weight.css
Escala de pesos tipográficos (font-weight)
--------------------------------------------------------------------------
Nomenclatura:
- .font-{peso} : aplica el peso de fuente
- Basado en el estándar CSS (100–900)
- Incluye variantes semánticas y responsivas
- Breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016
========================================================================== */
/* --------------------------------------------------------------------------
2. Clases base (sin breakpoint)
-------------------------------------------------------------------------- */
.font-thin { font-weight: var(--q-font-thin) !important; }
.font-extralight { font-weight: var(--q-font-extralight) !important; }
.font-light { font-weight: var(--q-font-light) !important; }
.font-regular { font-weight: var(--q-font-regular) !important; }
.font-medium { font-weight: var(--q-font-medium) !important; }
.font-semibold { font-weight: var(--q-font-semibold) !important; }
.font-bold { font-weight: var(--q-font-bold) !important; }
.font-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-black { font-weight: var(--q-font-black) !important; }
/* --------------------------------------------------------------------------
3. Variantes responsivas por breakpoint
-------------------------------------------------------------------------- */
/* 640px */
@media (min-width: 640px) {
.font-640-thin { font-weight: var(--q-font-thin) !important; }
.font-640-extralight { font-weight: var(--q-font-extralight) !important; }
.font-640-light { font-weight: var(--q-font-light) !important; }
.font-640-regular { font-weight: var(--q-font-regular) !important; }
.font-640-medium { font-weight: var(--q-font-medium) !important; }
.font-640-semibold { font-weight: var(--q-font-semibold) !important; }
.font-640-bold { font-weight: var(--q-font-bold) !important; }
.font-640-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-640-black { font-weight: var(--q-font-black) !important; }
}
/* 768px */
@media (min-width: 768px) {
.font-768-thin { font-weight: var(--q-font-thin) !important; }
.font-768-extralight { font-weight: var(--q-font-extralight) !important; }
.font-768-light { font-weight: var(--q-font-light) !important; }
.font-768-regular { font-weight: var(--q-font-regular) !important; }
.font-768-medium { font-weight: var(--q-font-medium) !important; }
.font-768-semibold { font-weight: var(--q-font-semibold) !important; }
.font-768-bold { font-weight: var(--q-font-bold) !important; }
.font-768-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-768-black { font-weight: var(--q-font-black) !important; }
}
/* 1024px */
@media (min-width: 1024px) {
.font-1024-thin { font-weight: var(--q-font-thin) !important; }
.font-1024-extralight { font-weight: var(--q-font-extralight) !important; }
.font-1024-light { font-weight: var(--q-font-light) !important; }
.font-1024-regular { font-weight: var(--q-font-regular) !important; }
.font-1024-medium { font-weight: var(--q-font-medium) !important; }
.font-1024-semibold { font-weight: var(--q-font-semibold) !important; }
.font-1024-bold { font-weight: var(--q-font-bold) !important; }
.font-1024-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-1024-black { font-weight: var(--q-font-black) !important; }
}
/* 1280px */
@media (min-width: 1280px) {
.font-1280-thin { font-weight: var(--q-font-thin) !important; }
.font-1280-extralight { font-weight: var(--q-font-extralight) !important; }
.font-1280-light { font-weight: var(--q-font-light) !important; }
.font-1280-regular { font-weight: var(--q-font-regular) !important; }
.font-1280-medium { font-weight: var(--q-font-medium) !important; }
.font-1280-semibold { font-weight: var(--q-font-semibold) !important; }
.font-1280-bold { font-weight: var(--q-font-bold) !important; }
.font-1280-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-1280-black { font-weight: var(--q-font-black) !important; }
}
/* 1536px */
@media (min-width: 1536px) {
.font-1536-thin { font-weight: var(--q-font-thin) !important; }
.font-1536-extralight { font-weight: var(--q-font-extralight) !important; }
.font-1536-light { font-weight: var(--q-font-light) !important; }
.font-1536-regular { font-weight: var(--q-font-regular) !important; }
.font-1536-medium { font-weight: var(--q-font-medium) !important; }
.font-1536-semibold { font-weight: var(--q-font-semibold) !important; }
.font-1536-bold { font-weight: var(--q-font-bold) !important; }
.font-1536-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-1536-black { font-weight: var(--q-font-black) !important; }
}
/* 2560px */
@media (min-width: 2560px) {
.font-2560-thin { font-weight: var(--q-font-thin) !important; }
.font-2560-extralight { font-weight: var(--q-font-extralight) !important; }
.font-2560-light { font-weight: var(--q-font-light) !important; }
.font-2560-regular { font-weight: var(--q-font-regular) !important; }
.font-2560-medium { font-weight: var(--q-font-medium) !important; }
.font-2560-semibold { font-weight: var(--q-font-semibold) !important; }
.font-2560-bold { font-weight: var(--q-font-bold) !important; }
.font-2560-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-2560-black { font-weight: var(--q-font-black) !important; }
}
/* 3840px */
@media (min-width: 3840px) {
.font-3840-thin { font-weight: var(--q-font-thin) !important; }
.font-3840-extralight { font-weight: var(--q-font-extralight) !important; }
.font-3840-light { font-weight: var(--q-font-light) !important; }
.font-3840-regular { font-weight: var(--q-font-regular) !important; }
.font-3840-medium { font-weight: var(--q-font-medium) !important; }
.font-3840-semibold { font-weight: var(--q-font-semibold) !important; }
.font-3840-bold { font-weight: var(--q-font-bold) !important; }
.font-3840-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-3840-black { font-weight: var(--q-font-black) !important; }
}
/* 6016px */
@media (min-width: 6016px) {
.font-6016-thin { font-weight: var(--q-font-thin) !important; }
.font-6016-extralight { font-weight: var(--q-font-extralight) !important; }
.font-6016-light { font-weight: var(--q-font-light) !important; }
.font-6016-regular { font-weight: var(--q-font-regular) !important; }
.font-6016-medium { font-weight: var(--q-font-medium) !important; }
.font-6016-semibold { font-weight: var(--q-font-semibold) !important; }
.font-6016-bold { font-weight: var(--q-font-bold) !important; }
.font-6016-extrabold { font-weight: var(--q-font-extrabold) !important; }
.font-6016-black { font-weight: var(--q-font-black) !important; }
}
/* ===== src/css/contenidos/icons.css ===== */
/* ==========================================================================
QuicklyCSS v2 — Iconos
--------------------------------------------------------------------------
Uso recomendado:
- Asigna la clase .icon a cualquier