/*!
* HanezUI — design system de WOW Desarrollos Digitales
* Bundle generado automáticamente por scripts/build-bundle.js
* No editar a mano. Ejecutar: npm run build
*/
/* ==========================================
Foundations
========================================== */
/* --- styles/fonts.css --- */
/* =========================================================
HanezUI — Fonts
Inter para UI/texto, JetBrains Mono para código y números
tabulares. Se cargan desde Google Fonts con display=swap
para evitar FOUT.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
html, body {
font-family: var(--wow-font-sans);
font-feature-settings: 'cv11', 'ss01', 'ss03';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
code, pre, kbd, samp {
font-family: var(--wow-font-mono);
font-feature-settings: 'calt', 'liga';
}
/* --- styles/reset.css --- */
/* HanezUI — reset + base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body {
height: 100%;
background: var(--wow-bg);
color: var(--wow-text);
font-family: var(--wow-font-sans);
font-size: var(--wow-text-base);
line-height: var(--wow-leading-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
color: var(--wow-text-strong);
font-weight: var(--wow-weight-semibold);
line-height: var(--wow-leading-tight);
}
h1 { font-size: var(--wow-text-3xl); }
h2 { font-size: var(--wow-text-2xl); }
h3 { font-size: var(--wow-text-xl); }
h4 { font-size: var(--wow-text-lg); }
a {
color: var(--wow-accent);
text-decoration: none;
transition: color var(--wow-transition-fast);
}
a:hover { color: var(--wow-accent-hover); }
code, pre { font-family: var(--wow-font-mono); font-size: 0.9em; }
::selection { background: var(--wow-accent-soft); color: var(--wow-text-strong); }
/* Scrollbar discreto para tema oscuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wow-bg); }
::-webkit-scrollbar-thumb {
background: var(--wow-border-strong);
border-radius: var(--wow-radius-full);
border: 2px solid var(--wow-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--wow-text-subtle); }
/* Focus visible consistente */
:focus-visible {
outline: 2px solid var(--wow-accent);
outline-offset: 2px;
border-radius: var(--wow-radius-sm);
}
/* --- styles/tokens.css --- */
/* =========================================================
HanezUI — Design Tokens
Única fuente de verdad para colores, tipografía, espaciado,
radios, sombras y transiciones. Todos los productos WOW
(Hanez, DataHub, WowFlow) deben consumir estas variables.
========================================================= */
:root {
/* ---------- Paleta base — Negro azulado ---------- */
--wow-bg: #0B0F1A; /* fondo app */
--wow-bg-elevated: #0F1524; /* fondo secciones elevadas */
--wow-surface: #111827; /* tarjetas, modales, inputs */
--wow-surface-hover: #1A2233; /* hover de superficies */
--wow-border: #1F2937; /* bordes sutiles */
--wow-border-strong: #2D3748; /* bordes enfatizados */
/* ---------- Texto ---------- */
--wow-text: #E5E7EB; /* texto principal */
--wow-text-strong: #F9FAFB; /* títulos */
--wow-text-muted: #9CA3AF; /* texto secundario */
--wow-text-subtle: #6B7280; /* placeholders, labels */
--wow-text-inverse: #0B0F1A; /* texto sobre acento */
/* ---------- Acento (brand) ---------- */
--wow-accent: #38BDF8; /* azul cian — acción primaria */
--wow-accent-hover: #0EA5E9;
--wow-accent-active: #0284C7;
--wow-accent-soft: rgba(56, 189, 248, 0.12);
--wow-accent-ring: rgba(56, 189, 248, 0.35);
/* ---------- Estados semánticos ---------- */
--wow-success: #10B981;
--wow-success-soft: rgba(16, 185, 129, 0.12);
--wow-warning: #F59E0B;
--wow-warning-soft: rgba(245, 158, 11, 0.12);
--wow-danger: #EF4444;
--wow-danger-soft: rgba(239, 68, 68, 0.12);
--wow-info: #6366F1;
--wow-info-soft: rgba(99, 102, 241, 0.12);
/* ---------- Tipografía ---------- */
--wow-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--wow-font-mono: 'JetBrains Mono', ui-monospace, 'Fira Code',
Menlo, Consolas, monospace;
/* Escala tipográfica (1rem = 16px) */
--wow-text-xs: 0.75rem; /* 12px */
--wow-text-sm: 0.875rem; /* 14px */
--wow-text-base: 1rem; /* 16px */
--wow-text-lg: 1.125rem; /* 18px */
--wow-text-xl: 1.25rem; /* 20px */
--wow-text-2xl: 1.5rem; /* 24px */
--wow-text-3xl: 1.875rem; /* 30px */
--wow-text-4xl: 2.25rem; /* 36px */
/* Pesos */
--wow-weight-regular: 400;
--wow-weight-medium: 500;
--wow-weight-semibold: 600;
--wow-weight-bold: 700;
/* Interlineado */
--wow-leading-tight: 1.25;
--wow-leading-normal: 1.5;
--wow-leading-relaxed: 1.75;
/* ---------- Espaciado (escala 4px) ---------- */
--wow-space-0: 0;
--wow-space-1: 0.25rem; /* 4px */
--wow-space-2: 0.5rem; /* 8px */
--wow-space-3: 0.75rem; /* 12px */
--wow-space-4: 1rem; /* 16px */
--wow-space-5: 1.25rem; /* 20px */
--wow-space-6: 1.5rem; /* 24px */
--wow-space-8: 2rem; /* 32px */
--wow-space-10: 2.5rem; /* 40px */
--wow-space-12: 3rem; /* 48px */
--wow-space-16: 4rem; /* 64px */
/* ---------- Radios ---------- */
--wow-radius-none: 0;
--wow-radius-sm: 4px;
--wow-radius-md: 6px;
--wow-radius-lg: 8px;
--wow-radius-xl: 12px;
--wow-radius-2xl: 16px;
--wow-radius-full: 9999px;
/* ---------- Sombras (ajustadas para tema oscuro) ---------- */
--wow-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--wow-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
--wow-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
--wow-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
--wow-shadow-glow: 0 0 0 3px var(--wow-accent-ring);
/* ---------- Transiciones ---------- */
--wow-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
--wow-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
--wow-transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);
/* ---------- Charts (paleta de series) ---------- */
--wow-chart-1: #38BDF8;
--wow-chart-2: #818CF8;
--wow-chart-3: #34D399;
--wow-chart-4: #FBBF24;
--wow-chart-5: #F87171;
--wow-chart-6: #FB923C;
--wow-chart-7: #A78BFA;
--wow-chart-8: #2DD4BF;
/* ---------- Categorías funcionales (para badges, pills, card borders) ---------- */
--wow-cat-sales: #22C55E; /* ventas — verde */
--wow-cat-marketing: #6366F1; /* marketing — índigo */
--wow-cat-finance: #F59E0B; /* finanzas — ámbar */
--wow-cat-operations: #06B6D4; /* operaciones — cian */
--wow-cat-general: #8B8FA3; /* general / sin categoría — gris */
--wow-cat-product: #A855F7; /* producto — púrpura */
--wow-cat-support: #EC4899; /* soporte — rosa */
--wow-cat-analytics: #0EA5E9; /* analytics — azul */
/* ---------- Syntax highlighting (SQL / código) ---------- */
--wow-syntax-keyword: #7C3AED; /* SELECT, FROM, WHERE — violeta */
--wow-syntax-string: #16A34A; /* literales 'texto' — verde */
--wow-syntax-number: #EA580C; /* 42, 3.14 — naranja */
--wow-syntax-comment: #6B7280; /* -- comentarios — gris */
--wow-syntax-function: #0284C7; /* COUNT(), NOW() — azul */
--wow-syntax-punct: #64748B; /* paréntesis, comas — gris azulado */
--wow-syntax-variable: #D97706; /* {{variable}} — ámbar */
--wow-syntax-system: #0EA5E9; /* {{TOKEN_SISTEMA}} — cian */
--wow-syntax-org: #A21CAF; /* {{TOKENS_ORG}} — magenta */
--wow-syntax-legacy: #0D9488; /* {{snippet: legacy}} — teal */
--wow-syntax-invalid: #DC2626; /* tokens desconocidos — rojo */
/* ---------- JOIN visuals (editor de joins, diagramas) ---------- */
--wow-join-inner: var(--wow-success); /* inner join — verde */
--wow-join-left: var(--wow-accent); /* left join — cian */
--wow-join-right: var(--wow-warning); /* right join — ámbar */
--wow-join-full: var(--wow-info); /* full outer join — índigo */
/* ---------- Data type colors (columnas: raw, number, date, text) ---------- */
--wow-dtype-raw: var(--wow-accent);
--wow-dtype-number: #2E7D32;
--wow-dtype-date: #1565C0;
--wow-dtype-text: #6A1B9A;
/* ---------- Highlights semánticos (pivot, group-by, etc.) ---------- */
--wow-highlight-pivot: #EC4899; /* columnas marcadas como pivot */
--wow-highlight-pivot-soft: rgba(236, 72, 153, 0.08);
--wow-highlight-group: #22C55E; /* columnas marcadas como group-by */
--wow-highlight-group-soft: rgba(34, 197, 94, 0.08);
/* ---------- Z-index ---------- */
--wow-z-base: 1;
--wow-z-dropdown: 100;
--wow-z-sticky: 200;
--wow-z-overlay: 900;
--wow-z-modal: 1000;
--wow-z-toast: 1100;
--wow-z-tooltip: 1200;
/* ---------- Layout ---------- */
--wow-container-sm: 640px;
--wow-container-md: 768px;
--wow-container-lg: 1024px;
--wow-container-xl: 1280px;
--wow-sidebar-w: 240px;
--wow-header-h: 56px;
/* ---------- Breakpoints (referencia — usar en media queries) ----------
xs: 0 Móvil pequeño (< 640px)
sm: 640px Móvil grande / tablet vertical
md: 768px Tablet horizontal
lg: 1024px Laptop / desktop pequeño
xl: 1280px Desktop
2xl:1536px Desktop grande
*/
--wow-bp-sm: 640px;
--wow-bp-md: 768px;
--wow-bp-lg: 1024px;
--wow-bp-xl: 1280px;
--wow-bp-2xl:1536px;
}
/* =========================================================
Utilidades responsive — ocultar/mostrar por breakpoint.
Uso: class="wow-hide-mobile" oculta < sm. class="wow-only-mobile" solo muestra < sm.
========================================================= */
.wow-only-mobile { display: initial; }
.wow-hide-mobile { display: none; }
.wow-only-tablet { display: none; }
.wow-only-desktop { display: none; }
@media (min-width: 640px) {
.wow-only-mobile { display: none; }
.wow-hide-mobile { display: initial; }
.wow-only-tablet { display: initial; }
}
@media (min-width: 1024px) {
.wow-only-tablet { display: none; }
.wow-only-desktop { display: initial; }
}
/* Contenedor centrado con ancho máximo por breakpoint */
.wow-container {
width: 100%;
margin: 0 auto;
padding: 0 var(--wow-space-4);
}
@media (min-width: 640px) { .wow-container { max-width: var(--wow-container-sm); padding: 0 var(--wow-space-5); } }
@media (min-width: 768px) { .wow-container { max-width: var(--wow-container-md); } }
@media (min-width: 1024px) { .wow-container { max-width: var(--wow-container-lg); padding: 0 var(--wow-space-6); } }
@media (min-width: 1280px) { .wow-container { max-width: var(--wow-container-xl); } }
/* --- styles/themes.css --- */
/* =========================================================
HanezUI — Themes
Permite alternar entre tema oscuro (default) y claro,
y cambiar el color de acento (cyan/purple/emerald/orange).
Uso:
========================================================= */
/* ---------- Tema claro ----------
Fondo blanco + acento oscuro (slate-900) para botones y énfasis.
Estados semánticos (success/warning/danger/info) conservan su color propio.
*/
[data-theme="light"] {
--wow-bg: #FFFFFF;
--wow-bg-elevated: #FFFFFF;
--wow-surface: #FFFFFF;
--wow-surface-hover: #F1F5F9;
--wow-border: #E2E8F0;
--wow-border-strong: #CBD5E1;
--wow-text: #1E293B;
--wow-text-strong: #0F172A;
--wow-text-muted: #64748B;
--wow-text-subtle: #94A3B8;
--wow-text-inverse: #FFFFFF;
--wow-accent: #0A0A0A;
--wow-accent-hover: #262626;
--wow-accent-active: #000000;
--wow-accent-soft: rgba(10, 10, 10, 0.08);
--wow-accent-ring: rgba(10, 10, 10, 0.30);
--wow-success-soft: rgba(16, 185, 129, 0.14);
--wow-warning-soft: rgba(245, 158, 11, 0.14);
--wow-danger-soft: rgba(239, 68, 68, 0.14);
--wow-info-soft: rgba(99, 102, 241, 0.14);
--wow-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--wow-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
--wow-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
--wow-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
}
/* ---------- Acentos alternativos ---------- */
[data-accent="cyan"] {
--wow-accent: #38BDF8;
--wow-accent-hover: #0EA5E9;
--wow-accent-active: #0284C7;
--wow-accent-soft: rgba(56, 189, 248, 0.14);
--wow-accent-ring: rgba(56, 189, 248, 0.35);
}
[data-accent="purple"] {
--wow-accent: #A855F7;
--wow-accent-hover: #9333EA;
--wow-accent-active: #7E22CE;
--wow-accent-soft: rgba(168, 85, 247, 0.14);
--wow-accent-ring: rgba(168, 85, 247, 0.35);
}
[data-accent="emerald"] {
--wow-accent: #10B981;
--wow-accent-hover: #059669;
--wow-accent-active: #047857;
--wow-accent-soft: rgba(16, 185, 129, 0.14);
--wow-accent-ring: rgba(16, 185, 129, 0.35);
}
[data-accent="orange"] {
--wow-accent: #F97316;
--wow-accent-hover: #EA580C;
--wow-accent-active: #C2410C;
--wow-accent-soft: rgba(249, 115, 22, 0.14);
--wow-accent-ring: rgba(249, 115, 22, 0.35);
}
[data-accent="rose"] {
--wow-accent: #F43F5E;
--wow-accent-hover: #E11D48;
--wow-accent-active: #BE123C;
--wow-accent-soft: rgba(244, 63, 94, 0.14);
--wow-accent-ring: rgba(244, 63, 94, 0.35);
}
[data-accent="gold"] {
--wow-accent: #D4AF37;
--wow-accent-hover: #B8941F;
--wow-accent-active: #9C7D15;
--wow-accent-soft: rgba(212, 175, 55, 0.16);
--wow-accent-ring: rgba(212, 175, 55, 0.40);
}
/* ---------- Tema Noir — negro profundo + acento dorado por defecto ---------- */
[data-theme="noir"] {
--wow-bg: #050505;
--wow-bg-elevated: #0C0C0C;
--wow-surface: #141414;
--wow-surface-hover: #1F1F1F;
--wow-border: #262626;
--wow-border-strong: #3A3A3A;
--wow-text: #EDE4C4;
--wow-text-strong: #FFF8E1;
--wow-text-muted: #9A8E6B;
--wow-text-subtle: #6B6045;
--wow-text-inverse: #0A0A0A;
--wow-accent: #D4AF37;
--wow-accent-hover: #E6C255;
--wow-accent-active: #B8941F;
--wow-accent-soft: rgba(212, 175, 55, 0.14);
--wow-accent-ring: rgba(212, 175, 55, 0.40);
--wow-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
--wow-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
--wow-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
--wow-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.6);
--wow-shadow-glow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}
/* --- styles/brand.css --- */
/* =========================================================
Marca Hanez — logo discreto implícito en todas las vistas
Uso:
========================================================= */
:root {
--wow-brand-logo: url('/logo.jpg');
--wow-brand-size: 20px;
--wow-brand-opacity: 0.55;
}
.wow-brand-mark {
display: inline-block;
width: var(--wow-brand-size);
height: var(--wow-brand-size);
background-image: var(--wow-brand-logo);
background-size: cover;
background-position: center;
border-radius: var(--wow-radius-sm);
opacity: var(--wow-brand-opacity);
flex-shrink: 0;
transition: opacity var(--wow-transition-fast);
vertical-align: middle;
}
.wow-brand-mark:hover { opacity: 1; }
/* Variante inline con texto "Hanez" al lado */
.wow-brand-mark--inline {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
height: auto;
padding: 2px 6px;
background-image: none;
color: var(--wow-text-subtle);
font-size: var(--wow-text-xs);
font-weight: var(--wow-weight-medium);
letter-spacing: 0.04em;
}
.wow-brand-mark--inline::before {
content: '';
width: 14px;
height: 14px;
background-image: var(--wow-brand-logo);
background-size: cover;
background-position: center;
border-radius: var(--wow-radius-sm);
opacity: var(--wow-brand-opacity);
flex-shrink: 0;
}
.wow-brand-mark--inline:hover { color: var(--wow-text-muted); }
.wow-brand-mark--inline:hover::before { opacity: 1; }
/* Variante esquina: pequeña, fija en la esquina inferior derecha del contenedor.
El contenedor padre debe tener position: relative. */
.wow-brand-mark--corner {
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
opacity: 0.35;
pointer-events: none;
}
/* Variante footer: bloque centrado bajo el contenido */
.wow-brand-mark--footer {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
width: auto;
height: auto;
margin-top: var(--wow-space-4);
padding: var(--wow-space-2);
background-image: none;
color: var(--wow-text-subtle);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.7;
}
.wow-brand-mark--footer::before {
content: '';
width: 12px;
height: 12px;
background-image: var(--wow-brand-logo);
background-size: cover;
background-position: center;
border-radius: var(--wow-radius-sm);
flex-shrink: 0;
}
/* Tamaños opcionales */
.wow-brand-mark--sm { --wow-brand-size: 14px; }
.wow-brand-mark--md { --wow-brand-size: 20px; }
.wow-brand-mark--lg { --wow-brand-size: 28px; }
/* --- styles/backgrounds.css --- */
/* Backgrounds — patrones de fondo reutilizables para alinear elementos
en tableros, editores, canvases o secciones. Todos usan tokens del tema. */
/* Base (solo color) */
.wow-bg { background-color: var(--wow-bg); }
.wow-bg-surface { background-color: var(--wow-surface); }
.wow-bg-elevated { background-color: var(--wow-bg-elevated); }
/* Puntos — el más usado por canvas/flowchart */
.wow-bg--dotted {
background-color: var(--wow-bg);
background-image: radial-gradient(circle, var(--wow-border) 1px, transparent 1px);
background-size: 24px 24px;
background-position: 0 0;
}
.wow-bg--dotted-sm { background-size: 16px 16px; }
.wow-bg--dotted-lg { background-size: 32px 32px; }
/* Grid — cuadrícula fina */
.wow-bg--grid {
background-color: var(--wow-bg);
background-image:
linear-gradient(var(--wow-border) 1px, transparent 1px),
linear-gradient(90deg, var(--wow-border) 1px, transparent 1px);
background-size: 24px 24px;
background-position: 0 0;
}
.wow-bg--grid-sm { background-size: 16px 16px; }
.wow-bg--grid-lg { background-size: 32px 32px; }
/* Grid con líneas punteadas (dashed) */
.wow-bg--grid-dashed {
background-color: var(--wow-bg);
background-image:
repeating-linear-gradient(
0deg,
transparent 0, transparent 23px,
var(--wow-border) 23px, var(--wow-border) 24px
),
repeating-linear-gradient(
90deg,
transparent 0, transparent 23px,
var(--wow-border) 23px, var(--wow-border) 24px
);
}
/* Diagonal (rayas 45°) */
.wow-bg--diagonal {
background-color: var(--wow-bg);
background-image: repeating-linear-gradient(
45deg,
var(--wow-border) 0, var(--wow-border) 1px,
transparent 1px, transparent 14px
);
}
/* Cruz (+) — cada nodo de la grilla muestra un pequeño + */
.wow-bg--cross {
background-color: var(--wow-bg);
background-image:
linear-gradient(var(--wow-border) 1px, transparent 1px),
linear-gradient(90deg, var(--wow-border) 1px, transparent 1px);
background-size: 24px 24px;
background-position: 12px 12px;
-webkit-mask: radial-gradient(circle, #000 2px, transparent 2.2px) 0 0 / 24px 24px;
mask: radial-gradient(circle, #000 2px, transparent 2.2px) 0 0 / 24px 24px;
}
/* Blueprint — grid grande + sub-grid fino (estilo plano técnico) */
.wow-bg--blueprint {
background-color: var(--wow-bg);
background-image:
linear-gradient(var(--wow-border-strong) 1px, transparent 1px),
linear-gradient(90deg, var(--wow-border-strong) 1px, transparent 1px),
linear-gradient(var(--wow-border) 1px, transparent 1px),
linear-gradient(90deg, var(--wow-border) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
/* --- styles/responsive.css --- */
/* Responsive — utilidades y tokens para diseño responsive/mobile-first.
Breakpoints alineados con Tailwind/industria:
sm < 640px (mobile)
md 640–767 (mobile-xl / phablet)
lg 768–1023 (tablet)
xl 1024+ (laptop / desktop)
*/
:root {
--wow-bp-sm: 640px;
--wow-bp-md: 768px;
--wow-bp-lg: 1024px;
--wow-bp-xl: 1280px;
--wow-touch-target: 44px; /* tamaño mínimo accesible en pantallas táctiles */
}
/* ===== Visibilidad por rango ===== */
/* Ocultar según tamaño de pantalla */
@media (max-width: 639px) { .wow-hide-mobile { display: none !important; } }
@media (min-width: 640px) and (max-width: 1023px) { .wow-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .wow-hide-desktop { display: none !important; } }
/* Mostrar solo en un rango */
.wow-show-mobile-only,
.wow-show-tablet-only,
.wow-show-desktop-only { display: none; }
@media (max-width: 639px) { .wow-show-mobile-only { display: revert !important; } }
@media (min-width: 640px) and (max-width: 1023px) { .wow-show-tablet-only { display: revert !important; } }
@media (min-width: 1024px) { .wow-show-desktop-only { display: revert !important; } }
/* ===== Layout: stacking ===== */
/* Cambia flex-direction a column bajo un breakpoint */
@media (max-width: 639px) {
.wow-stack-mobile { flex-direction: column !important; align-items: stretch !important; }
.wow-full-mobile { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 1023px) {
.wow-stack-tablet { flex-direction: column !important; align-items: stretch !important; }
.wow-full-tablet { width: 100% !important; }
}
/* Grids responsive: colapsan a 1 columna en mobile */
@media (max-width: 639px) {
.wow-grid-auto-mobile { grid-template-columns: 1fr !important; }
}
@media (max-width: 1023px) {
.wow-grid-auto-tablet { grid-template-columns: 1fr !important; }
}
/* ===== Touch / accesibilidad táctil ===== */
.wow-touch-target {
min-height: var(--wow-touch-target);
min-width: var(--wow-touch-target);
}
/* En mobile cualquier botón/link con wow-touch-auto sube a 44px */
@media (max-width: 767px) {
.wow-touch-auto { min-height: var(--wow-touch-target); min-width: var(--wow-touch-target); }
}
/* ===== Safe areas (iOS notch / bottom indicator) ===== */
.wow-safe-top { padding-top: env(safe-area-inset-top, 0); }
.wow-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.wow-safe-left { padding-left: env(safe-area-inset-left, 0); }
.wow-safe-right { padding-right: env(safe-area-inset-right, 0); }
/* ===== Frame de previsualización móvil ===== */
.wow-mobile-frame {
max-width: 430px;
width: 100%;
margin: 0 auto;
min-height: 100vh;
background: var(--wow-bg);
position: relative;
overflow: hidden;
border-left: 1px solid var(--wow-border);
border-right: 1px solid var(--wow-border);
}
.wow-mobile-frame--bordered {
height: 844px;
min-height: 844px;
border-radius: 36px;
border: 10px solid #0F172A;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
overflow: hidden;
}
/* ===== Scroll horizontal ===== */
/* Contenedor con scroll horizontal suave y snap (para tabs/toolbars largos en mobile) */
.wow-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scroll-snap-type: x mandatory;
}
.wow-scroll-x > * { scroll-snap-align: start; }
.wow-scroll-x::-webkit-scrollbar { height: 4px; }
.wow-scroll-x::-webkit-scrollbar-thumb { background: var(--wow-border-strong); border-radius: 2px; }
/* ===== Tipografía fluida ===== */
.wow-text-fluid-xl { font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem); }
.wow-text-fluid-lg { font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); }
/* ===== Utilidad anti-overflow para tablas/cards ===== */
.wow-scroll-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}