/* =====================================================================
FluxImp · Design System v4
Cohesive glassmorphism, 3-color discipline, intentional motion.
Authored under the principle: "the whole experience is cohesive".
Easing, duration, color and material decisions are made once at the
top of this file and reused by every component below.
Three colors. Three roles. No exceptions:
- Indigo → identity, primary actions, focused selection, neutral
brand signal
- Emerald → positive money flow, completed states, available
balances
- Amber → attention, pending, deserves-the-user's-eye states
Other pages should consume the tokens declared in :root, not invent
their own palette.
===================================================================== */
/* =====================================================================
TOKENS — organizados en 3 capas para el motor de temas (theming).
Capa A · SEMILLA → lo que el usuario elige; el motor las sobreescribe.
Capa B · DERIVADO → hoy con valores fijos; el motor los calculará
desde las semillas (con contraste garantizado).
Capa C · FIJO → estructura; NUNCA depende del tema.
Default = personalidad "Noche Sobria" (idéntico a antes del refactor:
esta Fase 1 no cambia nada visual). Ver docs/theming/FASE-0-mapa-tokens.md
===================================================================== */
:root {
/* ============ Capa A · SEMILLA (editable por el usuario) ============ */
--fx-primary: 99 102 241; /* indigo-500 — marca */
/* Roles semánticos: el SIGNIFICADO es fijo (verde=entra, ámbar=pendiente,
rosa=borrar). El motor solo armoniza su tono con el modo claro/oscuro. */
--fx-success: 16 185 129; /* emerald-500 — dinero que entra */
--fx-attention: 245 158 11; /* amber-500 — pendiente / atención */
/* (--fx-danger / rosa vive en el 2º :root, junto a las capas z) */
/* ============ Capa B · DERIVADO (lo calculará el motor) ============ */
/* Variantes de marca y rol */
--fx-primary-soft: 129 140 248; /* indigo-400 (texto/íconos sobre oscuro) */
--fx-primary-deep: 79 70 229; /* indigo-600 (estado presionado) */
--fx-success-soft: 52 211 153; /* emerald-400 */
--fx-attention-soft: 251 191 36; /* amber-400 */
/* Texto SOBRE relleno de color (reemplazará los color:#fff quemados) */
--fx-on-primary: 255 255 255; /* texto sobre la marca */
--fx-on-accent: 15 18 32; /* texto sobre ámbar/verde brillante */
/* Neutros de fondo (slate con sesgo indigo) */
--fx-bg-0: 8 11 22; /* fondo de página */
--fx-bg-1: 14 18 32; /* fondo de sección */
--fx-bg-2: 20 26 44; /* cuerpo de tarjeta */
--fx-bg-3: 28 36 58; /* elevado */
/* Fondo de página (hoy quemado en .bg-navy-mate; se migra en Fase 4) */
--fx-page-spot: 35 48 76; /* #23304c — brillo superior del radial */
--fx-page-base: 18 24 39; /* #121827 — base */
--fx-page-deep: 9 12 21; /* #090c15 — fondo profundo */
/* Texto */
--fx-text: 226 232 240; /* texto principal */
--fx-text-muted: 148 163 184; /* texto secundario */
--fx-text-dim: 100 116 139; /* pista/hint */
/* Hairlines y vidrio (derivan de texto/fondo + alpha) */
--fx-hairline: rgba(148, 163, 184, 0.10);
--fx-hairline-strong: rgba(148, 163, 184, 0.22);
--fx-glass-bg: rgb(var(--fx-bg-2) / 0.55);
--fx-glass-bg-soft: rgb(var(--fx-bg-1) / 0.45);
/* Elevación (en modo claro el motor las vuelve gris frío, no negro) */
--fx-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset;
--fx-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
--fx-shadow-3: 0 18px 40px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255,255,255,0.05) inset;
/* ============ Capa C · FIJO (estructura; nunca cambia con el tema) ===== */
/* Radio del desenfoque de vidrio. El coste GPU del backdrop-filter crece
~cuadráticamente con el radio, así que 10px da el mismo look premium que
14px pero con mucho menos repintado al hacer scroll (clave en pantallas
4K/Retina, donde hay 4× más píxeles que difuminar). */
--fx-glass-blur: 10px;
/* Radios — el motor solo MULTIPLICA esta escala por seed.shape */
--fx-r-sm: 10px;
--fx-r-md: 14px;
--fx-r-lg: 20px;
--fx-r-xl: 28px;
/* Espaciado (siempre múltiplos de 4) */
--fx-s-1: 4px;
--fx-s-2: 8px;
--fx-s-3: 12px;
--fx-s-4: 16px;
--fx-s-5: 24px;
--fx-s-6: 32px;
--fx-s-7: 48px;
/* Movimiento — solo curvas propias */
--fx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--fx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--fx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--fx-dur-instant: 100ms;
--fx-dur-fast: 160ms;
--fx-dur-base: 220ms;
--fx-dur-slow: 380ms;
--fx-dur-enter: 500ms;
}
/* =====================================================================
ENCHUFE DEL MOTOR DE TEMAS (se conecta en Fase 2/3)
El motor pondrá y/o escribirá variables
inline en :root ANTES de pintar (anti-parpadeo). Las personalidades
"Cercano Cálido" y "Claro Limpio" se conectarán como bloques de abajo.
Vacío por ahora a propósito: el default sigue siendo "Noche Sobria"
(arriba), por eso esta fase no cambia nada visual.
Ver docs/theming/plantillas-bocetos.md
===================================================================== */
/* [data-fx-theme="calido"] { ...semillas violeta + formas redondeadas... } */
/* [data-fx-mode="light"] { ...modo claro: texto/vidrio/sombras invertidos... } */
/* =====================================================================
BOTONES SIGUEN LA PALETA (ambos temas)
Muchos botones de acción usan azul/indigo quemado de Tailwind en vez del
token de marca. Se remapean al color primario para que respeten la
plantilla elegida. Se usa ~= (token exacto) para tocar SOLO rellenos
sólidos (bg-blue-600), nunca los tintes (bg-blue-500/10) ni el texto.
===================================================================== */
[class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"],
[class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"] {
background-color: rgb(var(--fx-primary)) !important;
}
[class~="bg-blue-500"]:hover, [class~="bg-blue-600"]:hover, [class~="bg-blue-700"]:hover,
[class~="bg-indigo-500"]:hover, [class~="bg-indigo-600"]:hover, [class~="bg-indigo-700"]:hover,
[class~="hover:bg-blue-600"]:hover, [class~="hover:bg-blue-700"]:hover,
[class~="hover:bg-indigo-600"]:hover, [class~="hover:bg-indigo-700"]:hover {
background-color: rgb(var(--fx-primary-deep)) !important;
}
/* Gradientes azul→indigo (botones/realces) → marca sólida */
[class~="from-blue-500"], [class~="from-blue-600"], [class~="from-indigo-500"], [class~="from-indigo-600"],
[class~="to-blue-500"], [class~="to-blue-600"], [class~="to-indigo-500"], [class~="to-indigo-600"] {
background-image: none !important;
background-color: rgb(var(--fx-primary)) !important;
}
/* =====================================================================
MODO CLARO — correcciones de contraste para utilidades Tailwind quemadas.
Etiquetas/textos que en OSCURO van claros (rose/amber/emerald/sky-100,
text-white) y en CLARO quedarían ilegibles sobre fondo blanco/tinte.
Solo se activan con data-fx-theme="claro"; el tema oscuro no se toca.
El :not([class*="bg-"]) preserva el blanco cuando el texto va sobre un
relleno de color (la propia clase trae su fondo).
===================================================================== */
/* Etiquetas de alerta "suaves" (van sobre tinte claro): se oscurecen.
NO usamos remapeos amplios de text-white/slate-300/400 porque romperían
el texto claro que vive dentro de componentes oscuros a propósito
(tooltips fx-tip, notas). El grueso ya lo cubren los tokens. */
/* 1) Texto NEUTRO claro (blanco/slate-100..300) sobre vidrio/transparente →
texto oscuro legible. El :not([class*="bg-"]) preserva el blanco cuando
el elemento trae su propio relleno de color (botón/píldora/chip sólido). */
[data-fx-mode="light"] :is(.text-white, .text-slate-100, .text-slate-200, .text-slate-300):not([class*="bg-rose-"]):not([class*="bg-red-"]):not([class*="bg-emerald-"]):not([class*="bg-green-"]):not([class*="bg-blue-"]):not([class*="bg-sky-"]):not([class*="bg-indigo-"]):not([class*="bg-violet-"]):not([class*="bg-purple-"]):not([class*="bg-fuchsia-"]):not([class*="bg-pink-"]):not([class*="bg-amber-"]):not([class*="bg-orange-"]):not([class*="bg-yellow-"]):not([class*="bg-teal-"]):not([class*="bg-cyan-"]):not([class*="bg-lime-"]) { color: rgb(var(--fx-text)) !important; }
[data-fx-mode="light"] :is(.text-slate-400, .text-slate-500):not([class*="bg-rose-"]):not([class*="bg-red-"]):not([class*="bg-emerald-"]):not([class*="bg-green-"]):not([class*="bg-blue-"]):not([class*="bg-sky-"]):not([class*="bg-indigo-"]):not([class*="bg-violet-"]):not([class*="bg-purple-"]):not([class*="bg-fuchsia-"]):not([class*="bg-pink-"]):not([class*="bg-amber-"]):not([class*="bg-orange-"]):not([class*="bg-yellow-"]):not([class*="bg-teal-"]):not([class*="bg-cyan-"]):not([class*="bg-lime-"]) { color: rgb(var(--fx-text-muted)) !important; }
/* 1b) Texto DENTRO de botones de marca sólidos/gradiente (el relleno está en el
padre): debe quedar blanco, no oscurecerse. ~= = solo rellenos sólidos. */
[data-fx-mode="light"] :is([class~="bg-blue-500"],[class~="bg-blue-600"],[class~="bg-blue-700"],[class~="bg-indigo-500"],[class~="bg-indigo-600"],[class~="bg-indigo-700"],[class~="from-blue-500"],[class~="from-blue-600"],[class~="from-indigo-500"],[class~="from-indigo-600"]) :is(.text-white, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400) {
color: rgb(var(--fx-on-primary)) !important;
}
/* 1c) Texto claro dentro de tarjetas con tinte oscuro -900 (ej. notificaciones
bg-purple-900/20) → en claro el tinte se aclara, el texto debe oscurecer. */
[data-fx-mode="light"] :is([class*="bg-purple-900"], [class*="bg-indigo-900"], [class*="bg-blue-900"], [class*="bg-rose-900"], [class*="bg-red-900"], [class*="bg-emerald-900"], [class*="bg-green-900"], [class*="bg-amber-900"], [class*="bg-sky-900"], [class*="bg-teal-900"]) :is(.text-white, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400) {
color: rgb(var(--fx-text)) !important;
}
/* 2) Texto de COLOR claro (etiquetas/badges, normalmente sobre tinte suave):
se oscurece a su tono ~700 para leer bien sobre claro. */
[data-fx-mode="light"] :is(.text-amber-100, .text-amber-200, .text-amber-300, .text-amber-400, .text-yellow-200, .text-yellow-300, .text-yellow-400) { color: rgb(180 83 9) !important; }
[data-fx-mode="light"] :is(.text-emerald-100, .text-emerald-200, .text-emerald-300, .text-emerald-400, .text-green-200, .text-green-300, .text-green-400) { color: rgb(4 120 87) !important; }
[data-fx-mode="light"] :is(.text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-sky-100, .text-sky-200, .text-sky-300, .text-sky-400){ color: rgb(3 105 161) !important; }
[data-fx-mode="light"] :is(.text-indigo-200, .text-indigo-300, .text-indigo-400, .text-violet-200, .text-violet-300, .text-violet-400, .text-purple-200, .text-purple-300, .text-purple-400) { color: rgb(67 56 202) !important; }
[data-fx-mode="light"] :is(.text-rose-100, .text-rose-200, .text-rose-300, .text-rose-400, .text-red-200, .text-red-300, .text-red-400){ color: rgb(190 18 60) !important; }
[data-fx-mode="light"] :is(.text-pink-200, .text-pink-300, .text-pink-400, .text-fuchsia-300, .text-fuchsia-400) { color: rgb(190 24 93) !important; }
[data-fx-mode="light"] :is(.text-teal-200, .text-teal-300, .text-teal-400, .text-cyan-200, .text-cyan-300, .text-cyan-400) { color: rgb(15 118 110) !important; }
/* 3) Superficies "vidrio" locales de páginas (clases propias con valores
oscuros quemados) → usan el token de vidrio para adaptarse a claro. */
[data-fx-mode="light"] :is(.glass-card, .glass-panel, .glass) {
background: var(--fx-glass-bg) !important;
border-color: var(--fx-hairline) !important;
}
/* 3c) Sombra suave a las TARJETAS en claro (sobre fondo blanco se ven planas
sin elevación). Solo a contenedores tipo tarjeta, no a inputs/chips. */
[data-fx-mode="light"] :is(.fx-glass, .glass-card, .glass-panel, .fx-kpi-tile, .fx-stat-card, .fx-metric, .cfg-card) {
box-shadow: var(--fx-shadow-2) !important;
}
/* 3b) Superficies OSCURAS quemadas (Tailwind slate-800/900/950 y hex oscuros
arbitrarios bg-[#0b1120], bg-[#141a2c], etc.) → en claro pasan a
superficies claras tokenizadas. Selector por subcadena = cubre todas
las variantes de opacidad (/50,/70…) y sirve a todas las páginas. */
[data-fx-mode="light"] [class*="bg-slate-9"],
[data-fx-mode="light"] [class*="bg-[#0b1120]" i],
[data-fx-mode="light"] [class*="bg-[#0b141a]" i],
[data-fx-mode="light"] [class*="bg-[#0a0e1c]" i],
[data-fx-mode="light"] [class*="bg-[#0e1220]" i],
[data-fx-mode="light"] [class*="bg-[#07090f]" i],
[data-fx-mode="light"] [class*="bg-[#121827]" i],
[data-fx-mode="light"] [class*="bg-[#121624]" i],
[data-fx-mode="light"] [class*="bg-[#0c111d]" i],
[data-fx-mode="light"] [class*="bg-[#0f1626]" i],
[data-fx-mode="light"] [class*="bg-[#0e1526]" i] {
background-color: rgb(var(--fx-bg-0)) !important;
border-color: var(--fx-hairline) !important;
}
[data-fx-mode="light"] [class*="bg-slate-8"],
[data-fx-mode="light"] [class*="bg-[#141a2c]" i],
[data-fx-mode="light"] [class*="bg-[#171c2b]" i],
[data-fx-mode="light"] [class*="bg-[#1a1f33]" i],
[data-fx-mode="light"] [class*="bg-[#1e2436]" i],
[data-fx-mode="light"] [class*="bg-[#101526]" i],
[data-fx-mode="light"] [class*="bg-[#161f33]" i],
[data-fx-mode="light"] [class*="bg-[#1a1e2b]" i],
[data-fx-mode="light"] [class*="bg-[#20222b]" i] {
background-color: rgb(var(--fx-bg-2)) !important;
border-color: var(--fx-hairline) !important;
}
/* slate-600/700 (superficie media: chips, botones secundarios) → gris claro */
[data-fx-mode="light"] [class*="bg-slate-7"],
[data-fx-mode="light"] [class*="bg-slate-6"] {
background-color: rgb(var(--fx-bg-3)) !important;
border-color: var(--fx-hairline) !important;
}
/* 3d) Headers/paneles con GRADIENTE navy oscuro (Tailwind from-[#0b1120] etc.,
típico en barras sticky superior/inferior) → en claro se aplanan a claro.
Solo hexes navy oscuros (no toca gradientes de color como from-[#10b981]). */
[data-fx-mode="light"] :is(
[class*="from-[#0b1120]" i], [class*="from-[#0c111d]" i], [class*="from-[#121624]" i],
[class*="from-[#121827]" i], [class*="from-[#07090f]" i], [class*="from-[#0e1220]" i],
[class*="from-[#0f1626]" i], [class*="from-[#0a0e1c]" i], [class*="from-[#0e1526]" i],
[class*="from-[#0b141a]" i], [class*="from-[#101526]" i], [class*="from-[#141a2c]" i]) {
background-image: none !important;
background-color: rgb(var(--fx-bg-0)) !important;
border-color: var(--fx-hairline) !important;
}
/* Fondo de página local quemado (algunas páginas redefinen .bg-navy-mate) */
[data-fx-mode="light"] body.bg-navy-mate {
background-color: rgb(var(--fx-page-base)) !important;
background-image: radial-gradient(circle at 50% -20%, rgb(var(--fx-page-spot)) 0%, rgb(var(--fx-page-base)) 60%, rgb(var(--fx-page-deep)) 100%) !important;
}
/* Red de seguridad: en claro, el lienzo raíz (html/body) y los contenedores de
scroll quedan claros, para que al hacer scroll/overscroll NUNCA asome oscuro. */
html[data-fx-mode="light"], [data-fx-mode="light"] body {
background-color: rgb(var(--fx-page-base)) !important;
}
[data-fx-mode="light"] main, [data-fx-mode="light"] .fx-smooth-scroll {
background-color: transparent !important;
}
/* 4) Puntuales */
[data-fx-mode="light"] #avisoEntregasNum { color: rgb(190 18 60) !important; }
[data-fx-mode="light"] .fx-switch__opt:not(.is-active) { color: rgb(var(--fx-text-muted)) !important; }
/* ---------- Helpers (color() functions for token use) ---------- */
.fx-text { color: rgb(var(--fx-text)); }
.fx-text-muted { color: rgb(var(--fx-text-muted)); }
.fx-text-dim { color: rgb(var(--fx-text-dim)); }
.fx-text-primary { color: rgb(var(--fx-primary-soft)); }
.fx-text-success { color: rgb(var(--fx-success-soft)); }
.fx-text-attention{ color: rgb(var(--fx-attention-soft)); }
/* =====================================================================
Base materials
===================================================================== */
.fx-glass {
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-xl);
box-shadow: var(--fx-shadow-1);
position: relative;
transition: border-color var(--fx-dur-base) var(--fx-ease-out);
}
.fx-glass--soft { background: var(--fx-glass-bg-soft); }
.fx-glass--compact{ padding: var(--fx-s-5); border-radius: var(--fx-r-lg); }
/* Subtle highlight along the top edge — gives the glass its physicality */
.fx-glass--shine::before {
content: "";
position: absolute;
top: 0; left: 8%; right: 8%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
pointer-events: none;
border-radius: inherit;
}
.fx-glass:hover { border-color: var(--fx-hairline-strong); }
/* =====================================================================
Aurora background — single subtle layer of depth
===================================================================== */
.fx-aurora {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* Aísla el repintado de los orbes del resto de la página: su animación en
bucle no obliga a recomponer el contenido que scrollea encima. */
contain: layout paint style;
}
.fx-aurora__orb {
position: absolute;
border-radius: 999px;
/* blur(56px) mantiene el mismo halo suave que blur(80px) pero genera una
textura difuminada mucho más barata de rasterizar (importa en 4K). */
filter: blur(56px);
will-change: transform;
opacity: 0.55;
}
.fx-aurora__orb--1 {
top: -15%; left: -10%;
width: 42vw; height: 42vw;
background: radial-gradient(circle, rgb(var(--fx-primary) / 0.28), transparent 70%);
animation: fxOrbDrift 26s ease-in-out infinite;
}
.fx-aurora__orb--2 {
bottom: -18%; right: -12%;
width: 46vw; height: 46vw;
background: radial-gradient(circle, rgb(var(--fx-primary) / 0.20), transparent 70%);
animation: fxOrbDriftAlt 32s ease-in-out infinite;
}
.fx-aurora__orb--3 {
top: 35%; right: 22%;
width: 26vw; height: 26vw;
background: radial-gradient(circle, rgb(var(--fx-success) / 0.10), transparent 70%);
animation: fxOrbDrift 30s ease-in-out infinite;
animation-delay: -10s;
opacity: 0.4;
}
/* Solo desplazamiento (sin scale): mover una capa difuminada es composición
barata; escalarla obligaba a re-renderizar el blur en cada frame (lag). */
@keyframes fxOrbDrift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(4%, -3%, 0); }
}
@keyframes fxOrbDriftAlt {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-3%, 4%, 0); }
}
/* =====================================================================
Modo ligero (data-fx-perf="lite")
---------------------------------------------------------------------
Se activa SOLO en equipos modestos (lo detecta fx-theme.js ANTES de
pintar, por RAM/núcleos). Apaga lo más caro para gama baja: el desenfoque
de fondo (backdrop-filter), la animación de la aurora y los parpadeos
decorativos. La app se ve igual de limpia, pero fluida. Los spinners y
skeletons de carga NO se tocan (son feedback útil y breve).
===================================================================== */
[data-fx-perf="lite"] *,
[data-fx-perf="lite"] *::before,
[data-fx-perf="lite"] *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-fx-perf="lite"] .fx-aurora__orb {
animation: none !important;
filter: blur(55px);
will-change: auto;
}
[data-fx-perf="lite"] .fx-coach-tag,
[data-fx-perf="lite"] .fx-cta-pulse,
[data-fx-perf="lite"] .fx-statpill.is-hot,
[data-fx-perf="lite"] .fx-tcol--proceso .fx-tcol__dot,
[data-fx-perf="lite"] .fx-urgent-banner {
animation: none !important;
}
/* =====================================================================
Scroll, smoothness & page rhythm
===================================================================== */
.fx-smooth-scroll {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-padding-top: var(--fx-s-5);
}
.fx-smooth-scroll::-webkit-scrollbar { width: 6px; }
.fx-smooth-scroll::-webkit-scrollbar-track { background: transparent; }
.fx-smooth-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgb(var(--fx-primary) / 0.4), rgb(var(--fx-primary) / 0.15));
border-radius: 999px;
}
.fx-smooth-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgb(var(--fx-primary) / 0.7), rgb(var(--fx-primary) / 0.3));
}
/* Page-level vertical rhythm — gap scales with viewport, breathes more on desktop */
.fx-rhythm {
display: flex;
flex-direction: column;
gap: clamp(2rem, 4vw, 3.5rem);
}
/* =====================================================================
Section header — small, calm, consistent
===================================================================== */
.fx-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--fx-s-4);
flex-wrap: wrap;
margin-bottom: var(--fx-s-5);
}
.fx-section-head__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-section-head__actions {
display: inline-flex;
align-items: center;
gap: var(--fx-s-2);
flex-wrap: wrap;
}
.fx-section-title {
display: flex;
align-items: center;
gap: var(--fx-s-3);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
color: rgb(var(--fx-text));
margin: 0;
text-transform: none;
}
.fx-section-title i {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-md);
background: color-mix(in srgb, currentColor 12%, transparent);
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
font-size: 16px;
flex-shrink: 0;
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
.fx-section-title i {
background: rgb(var(--fx-primary) / 0.12);
border-color: rgb(var(--fx-primary) / 0.22);
}
}
.fx-section-sub {
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0;
color: rgb(var(--fx-text-muted));
margin: 0;
}
/* =====================================================================
Buttons — small, mini, ghost
===================================================================== */
.fx-btn-mini {
display: inline-flex;
align-items: center;
gap: var(--fx-s-2);
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-primary) / 0.10);
color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.22);
cursor: pointer;
white-space: nowrap;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
text-decoration: none;
}
.fx-btn-mini:hover {
background: rgb(var(--fx-primary) / 0.18);
border-color: rgb(var(--fx-primary) / 0.4);
}
.fx-btn-mini:active { transform: scale(0.97); }
.fx-btn-mini i { font-size: 13px; }
.fx-btn-mini--success {
background: rgb(var(--fx-success) / 0.10);
color: rgb(var(--fx-success-soft));
border-color: rgb(var(--fx-success) / 0.25);
}
.fx-btn-mini--success:hover {
background: rgb(var(--fx-success) / 0.18);
border-color: rgb(var(--fx-success) / 0.45);
}
.fx-btn-mini--ghost {
background: transparent;
color: rgb(var(--fx-text-muted));
border-color: var(--fx-hairline-strong);
}
.fx-btn-mini--ghost:hover {
background: rgb(var(--fx-primary) / 0.08);
color: rgb(var(--fx-primary-soft));
}
/* =====================================================================
Fund cards — the new unified pattern (replaces hero + mini)
Four equal cards. Same material. Only differentiated by a 2px
accent band at the top and the icon color.
===================================================================== */
.fx-funds-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--fx-s-4);
}
@media (min-width: 640px) {
.fx-funds-grid { grid-template-columns: repeat(2, 1fr); gap: var(--fx-s-4); }
}
@media (min-width: 1280px) {
.fx-funds-grid { grid-template-columns: repeat(4, 1fr); gap: var(--fx-s-4); }
}
.fx-fund-card {
position: relative;
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-xl);
padding: 22px;
display: flex;
flex-direction: column;
gap: var(--fx-s-3);
overflow: hidden;
transition: border-color var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
min-height: 180px;
}
.fx-fund-card:hover { transform: translateY(-2px); border-color: var(--fx-hairline-strong); }
.fx-fund-card__accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.fx-fund-card--primary .fx-fund-card__accent { background: linear-gradient(90deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0.4)); }
.fx-fund-card--success .fx-fund-card__accent { background: linear-gradient(90deg, rgb(var(--fx-success)), rgb(var(--fx-success) / 0.4)); }
.fx-fund-card--attention .fx-fund-card__accent { background: linear-gradient(90deg, rgb(var(--fx-attention)), rgb(var(--fx-attention) / 0.4)); }
.fx-fund-card--neutral .fx-fund-card__accent { background: linear-gradient(90deg, rgb(var(--fx-text-muted)), rgb(var(--fx-text-muted) / 0.3)); }
.fx-fund-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fx-s-3);
}
.fx-fund-card__icon {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-md);
font-size: 18px;
background: color-mix(in srgb, currentColor 12%, transparent);
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
flex-shrink: 0;
}
.fx-fund-card--primary .fx-fund-card__icon { color: rgb(var(--fx-primary-soft)); }
.fx-fund-card--success .fx-fund-card__icon { color: rgb(var(--fx-success-soft)); }
.fx-fund-card--attention .fx-fund-card__icon { color: rgb(var(--fx-attention-soft)); }
.fx-fund-card--neutral .fx-fund-card__icon { color: rgb(var(--fx-text-muted)); }
.fx-fund-card__pct {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
color: rgb(var(--fx-text-muted));
padding: 3px 9px;
border-radius: 999px;
background: rgb(var(--fx-bg-2) / 0.5);
border: 1px solid var(--fx-hairline-strong);
line-height: 1.4;
}
.fx-fund-card__label {
font-size: 12px;
font-weight: 600;
color: rgb(var(--fx-text-muted));
margin: 0;
letter-spacing: 0;
}
.fx-fund-card__value {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: rgb(var(--fx-text));
line-height: 1.1;
margin: 0;
word-break: break-word;
}
.fx-fund-card__value .fx-money__sub {
display: block;
font-size: 11.5px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
letter-spacing: 0.02em;
margin-top: 4px;
text-shadow: none;
}
.fx-fund-card__value .fx-money__sub::before { content: "\2248\0020"; opacity: 0.7; }
.fx-fund-card__hint {
font-size: 11.5px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
margin: 0;
line-height: 1.4;
}
.fx-fund-card__actions {
display: flex;
gap: var(--fx-s-2);
margin-top: auto;
padding-top: var(--fx-s-3);
border-top: 1px solid var(--fx-hairline);
}
.fx-fund-card__action {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-primary) / 0.10);
color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.22);
cursor: pointer;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-fund-card__action:hover { background: rgb(var(--fx-primary) / 0.18); }
.fx-fund-card__action:active { transform: scale(0.97); }
/* Flechitas para navegar los meses de reinversión (Fondo para Compras).
Antes casi transparentes (6% blanco, sin borde); ahora leen claramente como
botones clicables, con hover y estado deshabilitado. */
.fx-reinv-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex: 0 0 auto;
font-size: 13px;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-primary) / 0.16);
color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.42);
cursor: pointer;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-reinv-nav:hover { background: rgb(var(--fx-primary) / 0.30); border-color: rgb(var(--fx-primary) / 0.65); transform: translateY(-1px); }
.fx-reinv-nav:active { transform: translateY(0); }
.fx-reinv-nav:disabled { opacity: 0.25; pointer-events: none; }
.fx-fund-card--success .fx-fund-card__action {
background: rgb(var(--fx-success) / 0.10);
color: rgb(var(--fx-success-soft));
border-color: rgb(var(--fx-success) / 0.25);
}
.fx-fund-card--success .fx-fund-card__action:hover { background: rgb(var(--fx-success) / 0.20); }
.fx-fund-card--attention .fx-fund-card__action {
background: rgb(var(--fx-attention) / 0.10);
color: rgb(var(--fx-attention-soft));
border-color: rgb(var(--fx-attention) / 0.25);
}
.fx-fund-card--attention .fx-fund-card__action:hover { background: rgb(var(--fx-attention) / 0.20); }
.fx-fund-card--neutral .fx-fund-card__action {
background: transparent;
color: rgb(var(--fx-text-muted));
border-color: var(--fx-hairline-strong);
}
.fx-fund-card--neutral .fx-fund-card__action:hover {
background: rgb(var(--fx-primary) / 0.08);
color: rgb(var(--fx-primary-soft));
}
/* =====================================================================
KPI strip — compact horizontal tiles for "Resumen del mes"
===================================================================== */
.fx-kpi-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fx-s-3);
}
@media (min-width: 768px) {
.fx-kpi-strip { grid-template-columns: repeat(4, 1fr); gap: var(--fx-s-3); }
}
.fx-kpi-tile {
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-lg);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
transition: border-color var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
min-height: 96px;
}
.fx-kpi-tile:hover { transform: translateY(-2px); border-color: var(--fx-hairline-strong); }
.fx-kpi-tile__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fx-s-2);
}
.fx-kpi-tile__icon {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
font-size: 13px;
background: color-mix(in srgb, currentColor 12%, transparent);
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.fx-kpi-tile--primary .fx-kpi-tile__icon { color: rgb(var(--fx-primary-soft)); }
.fx-kpi-tile--success .fx-kpi-tile__icon { color: rgb(var(--fx-success-soft)); }
.fx-kpi-tile--attention .fx-kpi-tile__icon { color: rgb(var(--fx-attention-soft)); }
.fx-kpi-tile--neutral .fx-kpi-tile__icon { color: rgb(var(--fx-text-muted)); }
.fx-kpi-tile__label {
font-size: 11px;
font-weight: 600;
color: rgb(var(--fx-text-muted));
margin: 0;
letter-spacing: 0;
line-height: 1.3;
}
.fx-kpi-tile__value {
font-size: 22px;
font-weight: 700;
color: rgb(var(--fx-text));
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
word-break: break-word;
}
.fx-kpi-tile__value .fx-money__sub {
display: block;
font-size: 10.5px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
margin-top: 2px;
}
.fx-kpi-tile__hint {
font-size: 11px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
margin: 0;
display: flex;
align-items: center;
gap: 4px;
}
.fx-kpi-tile__hint i { font-size: 11px; opacity: 0.7; }
.fx-kpi-tile--attention .fx-kpi-tile__hint { color: rgb(var(--fx-attention-soft)); }
/* =====================================================================
Bank account card (horizontal carousel)
===================================================================== */
.fx-bank-card {
flex-shrink: 0;
width: 85%;
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-xl);
padding: 18px 20px;
position: relative;
overflow: hidden;
scroll-snap-align: start;
transition: border-color var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
min-height: 130px;
display: flex;
flex-direction: column;
gap: var(--fx-s-3);
}
@media (min-width: 768px) {
.fx-bank-card { width: 280px; }
}
@media (min-width: 1024px) {
.fx-bank-card { width: 290px; }
}
.fx-bank-card:hover { transform: translateY(-2px); border-color: var(--fx-hairline-strong); }
.fx-bank-card__head {
display: flex;
align-items: center;
gap: var(--fx-s-3);
}
.fx-bank-card__icon {
width: 36px; height: 36px;
border-radius: var(--fx-r-md);
display: inline-flex; align-items: center; justify-content: center;
background: rgb(var(--fx-primary) / 0.12);
color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.22);
font-size: 16px;
flex-shrink: 0;
}
.fx-bank-card__name {
font-size: 12px;
font-weight: 600;
color: rgb(var(--fx-text-muted));
letter-spacing: 0;
line-height: 1.3;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fx-bank-card__delete {
width: 30px; height: 30px;
border-radius: 8px;
background: transparent;
color: rgb(var(--fx-text-dim));
border: 1px solid transparent;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out);
font-size: 13px;
}
.fx-bank-card:hover .fx-bank-card__delete { opacity: 1; }
.fx-bank-card__delete:hover {
background: rgb(var(--fx-attention) / 0.12);
color: rgb(var(--fx-attention-soft));
}
@media (hover: none) {
.fx-bank-card__delete { opacity: 1; }
}
.fx-bank-card__value {
font-size: 24px;
font-weight: 700;
color: rgb(var(--fx-text));
letter-spacing: -0.02em;
line-height: 1.1;
margin-top: auto;
word-break: break-word;
}
.fx-bank-card__value .fx-money__sub {
display: block;
font-size: 11px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
margin-top: 4px;
}
.fx-bank-card__value .fx-money__sub::before { content: "\2248\0020"; opacity: 0.7; }
/* =====================================================================
Currency display (dual USD + BCV) — base classes
===================================================================== */
.fx-money__sub {
display: block;
font-size: 11px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
letter-spacing: 0;
line-height: 1.2;
margin-top: 4px;
text-transform: none;
}
.fx-money__sub::before { content: "\2248\0020"; opacity: 0.7; }
.fx-money__sub--inline { display: inline-block; margin-top: 0; margin-left: 6px; }
.fx-money__sub-light { color: rgba(255, 255, 255, 0.55); }
/* =====================================================================
Sub-panels (Por cobrar / Gastos fijos)
===================================================================== */
.fx-stat-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fx-s-3);
margin-bottom: var(--fx-s-4);
}
.fx-stat-card {
background: rgb(var(--fx-bg-2) / 0.5);
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-md);
padding: 12px 14px;
position: relative;
}
.fx-stat-card--primary { border-color: rgb(var(--fx-primary) / 0.22); }
.fx-stat-card--success { border-color: rgb(var(--fx-success) / 0.22); }
.fx-stat-card--attention { border-color: rgb(var(--fx-attention) / 0.22); }
.fx-stat-card__label {
font-size: 11px;
font-weight: 600;
color: rgb(var(--fx-text-muted));
margin: 0 0 4px;
letter-spacing: 0;
}
.fx-stat-card--success .fx-stat-card__label { color: rgb(var(--fx-success-soft)); }
.fx-stat-card--attention .fx-stat-card__label { color: rgb(var(--fx-attention-soft)); }
.fx-stat-card__value {
font-size: 18px;
font-weight: 700;
color: rgb(var(--fx-text));
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
word-break: break-word;
}
.fx-stat-card__value .fx-money__sub {
font-size: 10px;
margin-top: 2px;
}
.fx-stat-card__hint {
font-size: 10.5px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
margin: 4px 0 0;
}
.fx-stat-card--success .fx-stat-card__hint { color: rgb(var(--fx-success) / 0.7); }
.fx-stat-card--attention .fx-stat-card__hint { color: rgb(var(--fx-attention) / 0.7); }
/* =====================================================================
Progress bar (single solid bar, no rainbow gradients)
===================================================================== */
.fx-progress {
position: relative;
width: 100%;
height: 5px;
background: rgb(var(--fx-text-muted) / 0.14);
border-radius: 999px;
overflow: hidden;
}
.fx-progress__bar {
height: 100%;
border-radius: 999px;
transition: width var(--fx-dur-slow) var(--fx-ease-out);
background: rgb(var(--fx-primary));
}
.fx-progress__bar--success { background: rgb(var(--fx-success)); }
.fx-progress__bar--attention { background: rgb(var(--fx-attention)); }
/* =====================================================================
List rows (cuentas por cobrar / gastos fijos)
===================================================================== */
.fx-mini-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fx-s-3);
padding: 10px 12px;
border-radius: var(--fx-r-md);
border: 1px solid var(--fx-hairline);
background: rgb(var(--fx-bg-2) / 0.4);
transition: border-color var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-mini-row:hover {
background: rgb(var(--fx-bg-2) / 0.7);
border-color: var(--fx-hairline-strong);
}
.fx-mini-row + .fx-mini-row { margin-top: 6px; }
/* =====================================================================
Chips (state pills)
===================================================================== */
.fx-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.fx-chip--primary { background: rgb(var(--fx-primary) / 0.12); color: rgb(var(--fx-primary-soft)); border: 1px solid rgb(var(--fx-primary) / 0.28); }
.fx-chip--success { background: rgb(var(--fx-success) / 0.12); color: rgb(var(--fx-success-soft)); border: 1px solid rgb(var(--fx-success) / 0.28); }
.fx-chip--attention{ background: rgb(var(--fx-attention) / 0.12); color: rgb(var(--fx-attention-soft)); border: 1px solid rgb(var(--fx-attention) / 0.28); }
.fx-chip--muted { background: rgb(var(--fx-text-muted) / 0.10); color: rgb(var(--fx-text-muted)); border: 1px solid var(--fx-hairline-strong); }
/* Contador de créditos de IA: píldora con ✨ que se tiñe ámbar (poco) o rose
(agotado). La pinta y actualiza ui-globals.js (window.fxRenderCreditosIA). */
.fx-credito-ia {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px; line-height: 1;
font-size: 12px; font-weight: 800; letter-spacing: 0; white-space: nowrap;
background: rgb(var(--fx-primary) / .12);
border: 1px solid rgb(var(--fx-primary) / .28);
color: rgb(var(--fx-primary-soft));
transition: background .2s var(--fx-ease-out), color .2s var(--fx-ease-out), border-color .2s var(--fx-ease-out);
}
.fx-credito-ia i { font-size: 14px; }
.fx-credito-ia.is-low { background: rgb(var(--fx-attention) / .14); border-color: rgb(var(--fx-attention) / .32); color: rgb(var(--fx-attention-soft)); }
.fx-credito-ia.is-empty { background: rgb(var(--fx-danger) / .14); border-color: rgb(var(--fx-danger) / .32); color: rgb(var(--fx-danger-soft)); }
/* Aliases for backwards compat */
.fx-chip--info { background: rgb(var(--fx-primary) / 0.12); color: rgb(var(--fx-primary-soft)); border: 1px solid rgb(var(--fx-primary) / 0.28); }
.fx-chip--ok { background: rgb(var(--fx-success) / 0.12); color: rgb(var(--fx-success-soft)); border: 1px solid rgb(var(--fx-success) / 0.28); }
.fx-chip--warn { background: rgb(var(--fx-attention) / 0.12); color: rgb(var(--fx-attention-soft)); border: 1px solid rgb(var(--fx-attention) / 0.28); }
.fx-chip--danger{ background: rgb(var(--fx-attention) / 0.12); color: rgb(var(--fx-attention-soft)); border: 1px solid rgb(var(--fx-attention) / 0.28); }
/* =====================================================================
Tabs (segmented control)
===================================================================== */
.fx-tabs {
display: inline-flex;
padding: 4px;
background: rgb(var(--fx-bg-2) / 0.55);
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-md);
gap: 2px;
}
.fx-tab {
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
border-radius: 10px;
color: rgb(var(--fx-text-muted));
cursor: pointer;
background: transparent;
border: none;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-tab:hover { color: rgb(var(--fx-text)); }
.fx-tab.is-active {
background: rgb(var(--fx-primary) / 0.18);
color: rgb(var(--fx-primary-soft));
}
/* =====================================================================
Empty states
===================================================================== */
.fx-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 18px;
border-radius: var(--fx-r-lg);
background: rgb(var(--fx-bg-2) / 0.4);
border: 1px dashed var(--fx-hairline-strong);
}
.fx-empty__icon {
width: 50px; height: 50px;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--fx-bg-2) / 0.7);
border: 1px solid var(--fx-hairline-strong);
color: rgb(var(--fx-text-muted));
margin-bottom: 12px;
}
.fx-empty__title {
font-size: 14px; font-weight: 700;
color: rgb(var(--fx-text)); margin-bottom: 4px;
}
.fx-empty__hint {
font-size: 12.5px; color: rgb(var(--fx-text-muted));
max-width: 320px; line-height: 1.5; margin: 0;
}
/* =====================================================================
Tooltip "?" (legacy support — same visual style)
===================================================================== */
.fx-tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 999px;
background: rgb(var(--fx-bg-3) / 0.6); /* tokenizado: adapta a claro */
border: 1px solid var(--fx-hairline-strong);
color: rgb(var(--fx-text-muted));
font-size: 11px;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-tip:hover, .fx-tip:focus, .fx-tip.is-open {
background: rgb(var(--fx-primary) / 0.18);
color: rgb(var(--fx-primary-soft));
border-color: rgb(var(--fx-primary) / 0.5);
outline: none;
}
.fx-tip__bubble {
position: fixed;
width: max-content;
max-width: 260px;
background: rgb(var(--fx-bg-3) / 0.97); /* tokenizado: adapta a claro */
border: 1px solid rgb(var(--fx-primary) / 0.40);
border-radius: var(--fx-r-md);
padding: 12px 14px;
font-size: 12px;
line-height: 1.5;
color: rgb(var(--fx-text));
font-weight: 500;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transform: translateY(-4px) scale(0.96);
transition: opacity var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out),
visibility var(--fx-dur-base);
z-index: 9999;
text-align: left;
pointer-events: none;
}
.fx-tip__bubble::before {
content: "";
position: absolute;
width: 10px; height: 10px;
background: rgb(var(--fx-bg-2) / 0.97);
border-left: 1px solid rgb(var(--fx-primary) / 0.40);
border-top: 1px solid rgb(var(--fx-primary) / 0.40);
transform: rotate(45deg);
}
.fx-tip__bubble.is-arrow-top::before { top: -6px; }
.fx-tip__bubble.is-arrow-bottom::before { bottom: -6px; transform: rotate(225deg); }
.fx-tip__bubble.is-arrow-right::before { right: 14px; }
.fx-tip__bubble.is-arrow-left::before { left: 14px; right: auto; }
.fx-tip__bubble.is-arrow-center::before { left: 50%; margin-left: -5px; right: auto; }
.fx-tip__bubble.is-open {
opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}
.fx-tip__bubble strong { color: rgb(var(--fx-primary-soft)); font-weight: 700; }
.fx-tip__bubble em { color: rgb(var(--fx-success-soft)); font-style: normal; font-weight: 600; }
/* =====================================================================
History row (movement timeline) — clean, no side-stripe
===================================================================== */
.fx-hist-row {
display: flex;
align-items: center;
gap: var(--fx-s-3);
padding: 12px 14px;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-bg-2) / 0.4);
border: 1px solid var(--fx-hairline);
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-hist-row:hover {
background: rgb(var(--fx-bg-2) / 0.7);
border-color: var(--fx-hairline-strong);
}
.fx-hist-row__icon {
width: 38px; height: 38px;
border-radius: var(--fx-r-md);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 16px;
background: color-mix(in srgb, currentColor 12%, transparent);
border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
/* Variante con foto de producto (transacciones de compra/envío) */
.fx-hist-row__icon--img {
background: rgb(var(--fx-bg-2) / 0.6);
border: 1px solid var(--fx-hairline);
padding: 0;
overflow: hidden;
}
.fx-hist-row__icon--img img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: inherit;
}
.fx-hist-row__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.fx-hist-row__desc {
font-size: 13px;
font-weight: 500;
color: rgb(var(--fx-text));
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.fx-hist-row__meta {
display: flex;
align-items: center;
gap: var(--fx-s-3);
font-size: 11px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
}
.fx-hist-row__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.fx-hist-row__meta-item i { font-size: 11px; opacity: 0.7; }
.fx-hist-row__amount {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
.fx-hist-row__amount .fx-money__sub {
font-size: 10px;
margin-top: 1px;
color: rgb(var(--fx-text-dim));
}
@media (max-width: 640px) {
.fx-hist-row {
flex-wrap: wrap;
}
.fx-hist-row__body {
flex-basis: calc(100% - 50px);
}
.fx-hist-row__desc { white-space: normal; }
.fx-hist-row__amount {
flex-basis: 100%;
text-align: right;
margin-top: 4px;
}
}
.fx-day-divider {
display: flex; align-items: center; gap: var(--fx-s-3);
margin: 18px 0 6px;
font-size: 11px; font-weight: 600;
color: rgb(var(--fx-text-muted));
letter-spacing: 0;
}
.fx-day-divider:first-child { margin-top: 0; }
.fx-day-divider__dot {
width: 6px; height: 6px;
border-radius: 999px;
background: rgb(var(--fx-primary-soft));
box-shadow: 0 0 12px rgb(var(--fx-primary) / 0.6);
flex-shrink: 0;
}
.fx-day-divider__sep {
flex: 1; height: 1px;
background: linear-gradient(90deg, var(--fx-hairline-strong), transparent);
}
.fx-day-divider__sub {
color: rgb(var(--fx-text-dim));
letter-spacing: 0;
font-weight: 500;
}
/* Tone variants — used by JS classifier */
.fx-tone--success { color: rgb(var(--fx-success-soft)); }
.fx-tone--attention { color: rgb(var(--fx-attention-soft)); }
.fx-tone--primary { color: rgb(var(--fx-primary-soft)); }
.fx-tone--neutral { color: rgb(var(--fx-text-muted)); }
/* =====================================================================
Skeleton loaders
===================================================================== */
@keyframes fxSkeleton {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.fx-skel,
.fx-skel-block {
display: block;
background: linear-gradient(90deg, rgba(148,163,184,0.05) 0%, rgba(148,163,184,0.16) 50%, rgba(148,163,184,0.05) 100%);
background-size: 200px 100%;
background-repeat: no-repeat;
border-radius: 8px;
animation: fxSkeleton 1.4s var(--fx-ease-in-out) infinite;
}
.fx-skel-line { height: 10px; width: 100%; margin: 6px 0; }
.fx-skel-value { height: 24px; width: 60%; border-radius: 8px; }
.fx-skel-chip { height: 14px; width: 80px; border-radius: 999px; }
.fx-skel-card {
border-radius: var(--fx-r-xl);
padding: 22px;
background: var(--fx-glass-bg-soft);
border: 1px solid var(--fx-hairline);
min-height: 130px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
flex-shrink: 0;
}
.fx-skel-row {
height: 56px;
border-radius: var(--fx-r-md);
background: linear-gradient(90deg, rgba(148,163,184,0.04) 0%, rgba(148,163,184,0.12) 50%, rgba(148,163,184,0.04) 100%);
background-size: 200px 100%;
background-repeat: no-repeat;
animation: fxSkeleton 1.4s var(--fx-ease-in-out) infinite;
border: 1px solid var(--fx-hairline);
}
.fx-skel-row + .fx-skel-row { margin-top: 6px; }
/* =====================================================================
Carousel
===================================================================== */
.fx-carousel { position: relative; }
.fx-carousel__track {
display: flex;
gap: var(--fx-s-3);
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.fx-carousel__track::-webkit-scrollbar { display: none; }
.fx-carousel__track { -ms-overflow-style: none; scrollbar-width: none; }
.fx-carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 999px;
background: rgb(var(--fx-bg-2) / 0.85);
border: 1px solid var(--fx-hairline-strong);
color: rgb(var(--fx-text));
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
backdrop-filter: blur(8px);
transition: background var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-carousel__btn:hover { background: rgb(var(--fx-primary) / 0.5); }
.fx-carousel__btn:active { transform: translateY(-50%) scale(0.95); }
.fx-carousel__btn--prev { left: -8px; }
.fx-carousel__btn--next { right: -8px; }
.fx-carousel:hover .fx-carousel__btn--visible { display: inline-flex; }
/* =====================================================================
Scroll-reveal — strong custom easing, faster, more polish
===================================================================== */
.fx-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--fx-dur-enter) var(--fx-ease-out),
transform var(--fx-dur-enter) var(--fx-ease-out);
will-change: opacity, transform;
}
.fx-reveal--left { transform: translateX(-24px); }
.fx-reveal--right { transform: translateX(24px); }
.fx-reveal--scale { transform: scale(0.97); }
.fx-reveal.is-visible {
opacity: 1;
transform: translate(0, 0) scale(1);
}
/* Stagger children inside a parent .fx-reveal-stagger */
.fx-reveal-stagger > * {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
}
.fx-reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.fx-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 40ms; }
.fx-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.fx-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.fx-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 220ms; }
.fx-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.fx-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 340ms; }
/* =====================================================================
Counter flash (after a number animates to its final value)
===================================================================== */
@keyframes fxValueFlash {
0% { color: rgb(var(--fx-text)); }
35% { color: rgb(var(--fx-primary-soft)); }
100% { color: inherit; }
}
.fx-count-anim { animation: fxValueFlash 700ms var(--fx-ease-out) 1; }
/* =====================================================================
Card-entry stagger (used by JS-rendered lists)
===================================================================== */
.fx-card-enter {
opacity: 0;
transform: translateY(6px);
animation: fxCardEnter 360ms var(--fx-ease-out) forwards;
}
@keyframes fxCardEnter {
to { opacity: 1; transform: translateY(0); }
}
.fx-stagger-1 { animation-delay: 30ms; }
.fx-stagger-2 { animation-delay: 75ms; }
.fx-stagger-3 { animation-delay: 120ms; }
.fx-stagger-4 { animation-delay: 165ms; }
.fx-stagger-5 { animation-delay: 210ms; }
.fx-stagger-6 { animation-delay: 255ms; }
/* =====================================================================
Banner-top placeholder (compatibility)
===================================================================== */
#banner-superior-container { position: relative; z-index: 5; }
/* =====================================================================
Backwards compatibility for OLD classes still in other pages
(fx-fund, fx-fund--hero, fx-fund--mini, fx-metric, etc.)
These are scoped to NOT bleed into the new fx-fund-card / fx-kpi-tile.
===================================================================== */
.fx-fund:not(.fx-fund-card) {
position: relative;
border-radius: var(--fx-r-xl);
padding: 22px;
color: #fff;
overflow: hidden;
border: 1px solid var(--fx-hairline);
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
}
.fx-fund:not(.fx-fund-card):hover { border-color: var(--fx-hairline-strong); }
.fx-metric:not(.fx-kpi-tile) {
position: relative;
border-radius: var(--fx-r-lg);
padding: 14px 16px;
background: var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
display: flex;
flex-direction: column;
gap: 6px;
min-height: 96px;
transition: border-color var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
}
.fx-metric:not(.fx-kpi-tile):hover {
transform: translateY(-2px);
border-color: var(--fx-hairline-strong);
}
.fx-metric__icon { display: none; }
.fx-metric__label {
font-size: 11px;
font-weight: 600;
color: rgb(var(--fx-text-muted));
letter-spacing: 0;
text-transform: none;
}
.fx-metric__value {
font-size: 22px;
font-weight: 700;
color: rgb(var(--fx-text));
letter-spacing: -0.02em;
line-height: 1.1;
word-break: break-word;
}
.fx-metric__hint {
font-size: 11px;
font-weight: 500;
color: rgb(var(--fx-text-dim));
display: flex; align-items: center; gap: 4px;
}
/* =====================================================================
Page-load opacity (so the body fade-in doesn't show stutter)
===================================================================== */
@media (prefers-reduced-motion: reduce) {
.fx-aurora__orb,
.fx-card-enter,
.fx-count-anim,
.fx-skel, .fx-skel-block, .fx-skel-row {
animation: none !important;
}
.fx-reveal, .fx-reveal-stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
*, *::before, *::after {
scroll-behavior: auto !important;
}
}
/* =====================================================================
Mobile refinement
===================================================================== */
@media (max-width: 640px) {
.fx-fund-card { padding: 18px; min-height: 160px; }
.fx-fund-card__value { font-size: 24px; }
.fx-kpi-tile { padding: 12px 14px; min-height: 86px; }
.fx-kpi-tile__value { font-size: 19px; }
.fx-bank-card { padding: 16px 18px; }
.fx-bank-card__value { font-size: 21px; }
.fx-section-title { font-size: 12.5px; }
.fx-section-title i { width: 28px; height: 28px; font-size: 14px; }
.fx-section-head { margin-bottom: var(--fx-s-4); }
.fx-hist-row { padding: 10px 12px; }
.fx-hist-row__amount { font-size: 14px; }
}
/* =====================================================================
Hide scrollbar utility (for carousels)
===================================================================== */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
/* =====================================================================
Custom scrollbar (for inner scrollable containers)
===================================================================== */
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgb(var(--fx-primary) / 0.3);
border-radius: 999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--fx-primary) / 0.5); }
/* =====================================================================
v4.1 — Refinement pass
1. Navy-mate page background
2. Rich-gradient fund cards (replace flat glass for funds)
3. Bank-card differentiation (per method color + icon)
4. Highlighted action buttons
5. Carousel arrow positioning fix
6. Mobile-tight fund cards
===================================================================== */
/* ---------- Navy-mate page background ---------- */
.bg-navy-mate,
body.bg-navy-mate {
/* Migrado a tokens (Fase 2): el motor controla el fondo. Valores
por defecto idénticos a los hex anteriores → sin cambio visual. */
background-color: rgb(var(--fx-page-base));
background-image: radial-gradient(circle at 50% -20%,
rgb(var(--fx-page-spot)) 0%,
rgb(var(--fx-page-base)) 60%,
rgb(var(--fx-page-deep)) 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* When body uses navy-mate, dial aurora WAY down so it doesn't fight the radial */
body.bg-navy-mate .fx-aurora__orb { opacity: 0.18; }
/* ---------- Rich-gradient fund cards (replaces flat dark glass for funds) ---------- */
.fx-fund-card {
/* Override the flat glass with rich, role-specific gradients */
background-image: linear-gradient(135deg, var(--fund-from, #1e293b) 0%, var(--fund-to, #0f172a) 100%);
background-color: var(--fund-to, #0f172a);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 16px 36px var(--fund-shadow, rgba(0, 0, 0, 0.35));
border-color: rgba(255, 255, 255, 0.10);
color: #fff;
padding-bottom: 18px;
}
/* Variante NEUTRA: tarjeta tipo fund-card que NO es un sobre con color (ej. las
tarjetas de gastos fijos). Sigue el tema (glass + texto del tema), en vez de
caer al gradiente slate-900 quemado del fallback. */
.fx-fund-card--plain {
background-image: none !important;
background-color: var(--fx-glass-bg) !important;
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
backdrop-filter: blur(var(--fx-glass-blur));
border-color: var(--fx-hairline) !important;
color: rgb(var(--fx-text)) !important;
box-shadow: var(--fx-shadow-2) !important;
}
/* Decorative background icon for visual differentiation (Point 8) */
.fx-fund-card__bgicon {
position: absolute;
right: -18px;
bottom: -28px;
font-size: 9rem;
line-height: 1;
opacity: 0.10;
color: #fff;
pointer-events: none;
transition: transform 600ms var(--fx-ease-out), opacity 300ms ease;
}
.fx-fund-card:hover .fx-fund-card__bgicon {
transform: scale(1.06) rotate(-4deg);
opacity: 0.16;
}
/* Color presets por rol — ahora DERIVAN del tema (se unifican con la marca y
responden a la plantilla). El color elegido por el usuario para un sobre
concreto se pone inline (--fund-from/--fund-to/--fund-shadow) y manda sobre
estos valores por defecto. */
.fx-fund-card--success {
--fund-from: rgb(var(--fx-success));
--fund-to: color-mix(in srgb, rgb(var(--fx-success)) 42%, #04130d);
--fund-shadow: rgb(var(--fx-success) / 0.30);
}
.fx-fund-card--primary {
--fund-from: rgb(var(--fx-primary));
--fund-to: color-mix(in srgb, rgb(var(--fx-primary)) 42%, #0a0e1a);
--fund-shadow: rgb(var(--fx-primary) / 0.30);
}
.fx-fund-card--attention {
--fund-from: rgb(var(--fx-attention));
--fund-to: color-mix(in srgb, rgb(var(--fx-attention)) 42%, #1a0e02);
--fund-shadow: rgb(var(--fx-attention) / 0.30);
}
.fx-fund-card--neutral {
--fund-from: rgb(var(--fx-primary-soft));
--fund-to: color-mix(in srgb, rgb(var(--fx-primary)) 35%, #0c0a2b);
--fund-shadow: rgb(var(--fx-primary) / 0.28);
}
/* On a colored card, the icon-chip should be white-on-transparent */
.fx-fund-card .fx-fund-card__icon {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.fx-fund-card .fx-fund-card__pct {
background: rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.20);
color: #fff;
font-weight: 800;
backdrop-filter: blur(6px);
}
.fx-fund-card .fx-fund-card__label {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.fx-fund-card .fx-fund-card__value {
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}
.fx-fund-card .fx-fund-card__value .fx-money__sub {
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
text-shadow: none;
}
.fx-fund-card .fx-fund-card__hint {
color: rgba(255, 255, 255, 0.70);
}
.fx-fund-card .fx-fund-card__actions {
border-top-color: rgba(255, 255, 255, 0.15);
}
/* Action buttons stand out clearly (Point 2 - botones resaltan) */
.fx-fund-card .fx-fund-card__action {
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
border-color: rgba(255, 255, 255, 1);
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}
.fx-fund-card .fx-fund-card__action:hover {
background: #fff;
color: #000;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}
.fx-fund-card .fx-fund-card__action:active { transform: scale(0.97); }
/* When there are 2 actions side-by-side (Compras), make second slightly less prominent */
.fx-fund-card__actions .fx-fund-card__action:nth-child(2) {
background: rgba(0, 0, 0, 0.20);
color: #fff;
border-color: rgba(255, 255, 255, 0.30);
box-shadow: none;
}
.fx-fund-card__actions .fx-fund-card__action:nth-child(2):hover {
background: rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.50);
}
/* ====================================================================
SOBRES: selector de color libre + sliders de porcentaje + reparto
==================================================================== */
/* --- Range / slider genérico --- */
.fx-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
outline: none;
cursor: pointer;
accent-color: rgb(var(--fx-primary));
}
.fx-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(var(--fx-primary));
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
cursor: pointer;
transition: transform 120ms ease;
}
.fx-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.fx-range::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%;
background: rgb(var(--fx-primary)); border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); cursor: pointer;
}
.fx-range:disabled { cursor: default; opacity: 0.85; }
.fx-range:disabled::-webkit-slider-thumb { background: rgb(var(--fx-success)); cursor: default; }
.fx-range:disabled::-moz-range-thumb { background: rgb(var(--fx-success)); cursor: default; }
.fx-range--buffer { accent-color: rgb(var(--fx-success)); }
/* --- Fila slider + número (modal de un sobre) --- */
.fx-slider-row {
display: flex;
align-items: center;
gap: 12px;
}
.fx-slider-row .fx-range { flex: 1; }
.fx-input-money--mini { width: 92px; flex-shrink: 0; }
.fx-input-money--mini .fx-input { padding-right: 26px; text-align: right; }
/* --- Selector de color libre --- */
.fx-color-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.fx-color-input {
-webkit-appearance: none;
appearance: none;
width: 42px;
height: 42px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 12px;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.fx-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.fx-color-input::-webkit-color-swatch { border: none; border-radius: 9px; }
.fx-color-input::-moz-color-swatch { border: none; border-radius: 9px; }
.fx-color-swatches {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fx-swatch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
transition: transform 120ms ease, box-shadow 120ms ease;
position: relative;
}
.fx-swatch:hover { transform: scale(1.1); }
.fx-swatch.is-active {
border-color: #fff;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 4px currentColor;
}
/* --- Selector de ícono del sobre (galería) --- */
/* Disparador: muestra el ícono actual + "Cambiar". Se abre una galería con buscador. */
.fx-icon-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: rgb(var(--fx-bg-0) / 0.6);
border: 1px solid var(--fx-hairline-strong);
border-radius: var(--fx-r-md);
cursor: pointer;
color: rgb(var(--fx-text));
font-family: inherit;
transition: border-color var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-icon-trigger:hover { border-color: var(--fx-hairline-strong); background: rgb(var(--fx-bg-0) / 0.85); }
.fx-icon-trigger.is-open { border-color: rgb(var(--fx-primary) / 0.7); box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.16); }
.fx-icon-trigger__preview {
width: 34px; height: 34px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-sm);
background: rgb(var(--fx-primary) / 0.16);
color: rgb(var(--fx-primary));
font-size: 19px;
}
.fx-icon-trigger__txt { flex: 1; text-align: left; font-size: 13.5px; font-weight: 600; color: rgb(var(--fx-text-muted)); }
.fx-icon-trigger__chev { color: rgb(var(--fx-text-dim)); font-size: 14px; transition: transform var(--fx-dur-base) var(--fx-ease-out); }
.fx-icon-trigger.is-open .fx-icon-trigger__chev { transform: rotate(180deg); }
/* Panel de la galería (colapsable, con su propio scroll) */
.fx-icon-picker {
margin-top: 10px;
border: 1px solid var(--fx-hairline-strong);
border-radius: var(--fx-r-md);
background: rgb(var(--fx-bg-0) / 0.45);
overflow: hidden;
animation: fxIconPickerIn var(--fx-dur-base) var(--fx-ease-out);
}
@keyframes fxIconPickerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.fx-icon-picker__search { position: relative; padding: 10px; border-bottom: 1px solid var(--fx-hairline); }
.fx-icon-picker__search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: rgb(var(--fx-text-dim)); font-size: 15px; pointer-events: none; }
.fx-icon-picker__search .fx-input { padding-left: 34px; }
.fx-icon-picker__scroll { max-height: 300px; overflow-y: auto; padding: 4px 12px 14px; }
/* Encabezado de grupo con una pequeña barra-acento indigo */
.fx-icon-picker__group {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: rgb(var(--fx-text-dim));
margin: 16px 2px 10px;
}
.fx-icon-picker__group::before {
content: ''; width: 16px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0));
flex-shrink: 0;
}
.fx-icon-picker__group:first-child { margin-top: 8px; }
.fx-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 9px; }
/* Tarjetita: chip de ícono arriba + nombre corto debajo (look "cajón de apps") */
.fx-icon-opt {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 11px 5px 9px;
border-radius: var(--fx-r-md);
border: 1px solid var(--fx-hairline);
background: rgba(255, 255, 255, 0.022);
cursor: pointer;
transition: transform var(--fx-dur-base) var(--fx-ease-out),
border-color var(--fx-dur-base) var(--fx-ease-out),
background var(--fx-dur-base) var(--fx-ease-out),
box-shadow var(--fx-dur-base) var(--fx-ease-out);
}
.fx-icon-opt__chip {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
font-size: 22px;
color: rgb(199 210 254);
background: rgb(var(--fx-primary) / 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform var(--fx-dur-base) var(--fx-ease-out),
background var(--fx-dur-base) var(--fx-ease-out),
color var(--fx-dur-base) var(--fx-ease-out),
box-shadow var(--fx-dur-base) var(--fx-ease-out);
}
.fx-icon-opt__name {
font-size: 10.5px; font-weight: 600; line-height: 1.1;
color: rgb(var(--fx-text-dim));
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: color var(--fx-dur-base) var(--fx-ease-out);
}
.fx-icon-opt:hover {
transform: translateY(-3px);
border-color: rgb(var(--fx-primary) / 0.4);
background: rgba(255, 255, 255, 0.045);
box-shadow: 0 12px 26px -14px rgb(var(--fx-primary) / 0.6);
}
.fx-icon-opt:hover .fx-icon-opt__chip { color: #fff; background: rgb(var(--fx-primary) / 0.24); transform: scale(1.06); }
.fx-icon-opt:hover .fx-icon-opt__name { color: rgb(var(--fx-text)); }
.fx-icon-opt:active { transform: scale(0.95); }
.fx-icon-opt.is-active {
border-color: rgb(var(--fx-primary) / 0.7);
background: rgb(var(--fx-primary) / 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgb(var(--fx-primary) / 0.35);
}
.fx-icon-opt.is-active .fx-icon-opt__chip {
color: #fff;
background: linear-gradient(160deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0.55));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -7px rgb(var(--fx-primary) / 0.85);
}
.fx-icon-opt.is-active .fx-icon-opt__name { color: rgb(199 210 254); font-weight: 700; }
/* Palomita en la esquina de la tarjeta seleccionada */
.fx-icon-opt.is-active::after {
content: '\2713';
position: absolute; top: 5px; right: 7px;
font-size: 10px; font-weight: 800; color: rgb(199 210 254);
opacity: .85;
}
.fx-icon-picker__empty { padding: 26px 10px; text-align: center; font-size: 12.5px; color: rgb(var(--fx-text-dim)); }
/* --- Filas del reparto por porcentajes --- */
.fx-reparto-row {
padding: 11px 0;
border-bottom: 1px solid var(--fx-hairline);
}
.fx-reparto-row__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.fx-reparto-row__name {
font-size: 13.5px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.fx-reparto-row__tag {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgb(var(--fx-success));
background: rgb(var(--fx-success) / 0.12);
padding: 2px 7px;
border-radius: 999px;
white-space: nowrap;
}
.fx-reparto-row__val {
font-size: 18px;
font-weight: 800;
color: rgb(var(--fx-success));
flex-shrink: 0;
}
.fx-reparto-row__hint {
font-size: 11px;
color: rgb(var(--fx-text-dim));
margin-top: 6px;
}
.fx-reparto-row--buffer {
background: rgb(var(--fx-success) / 0.05);
border: 1px solid rgb(var(--fx-success) / 0.20);
border-radius: 12px;
padding: 12px;
margin-top: 6px;
}
/* Punto de color del sobre en la fila de reparto */
.fx-reparto-dot {
display: inline-block;
width: 9px; height: 9px;
border-radius: 50%;
margin-right: 7px;
vertical-align: middle;
box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
/* Tarjeta destacada de Ganancia (colchón) en el reparto */
.fx-reparto-buffer {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 14px 16px;
border-radius: 14px;
background: rgb(var(--fx-success) / 0.08);
border: 1px solid rgb(var(--fx-success) / 0.28);
}
.fx-reparto-buffer__icon {
width: 42px; height: 42px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--fx-success) / 0.18);
color: rgb(var(--fx-success));
font-size: 21px;
flex-shrink: 0;
}
.fx-reparto-buffer__info { flex: 1; min-width: 0; }
.fx-reparto-buffer__title {
font-size: 14px; font-weight: 800; color: #fff; margin: 0;
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.fx-reparto-buffer__tag {
font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
color: rgb(var(--fx-success));
background: rgb(var(--fx-success) / 0.15);
padding: 2px 7px; border-radius: 999px;
}
.fx-reparto-buffer__sub { font-size: 11px; color: rgb(var(--fx-text-dim)); margin: 2px 0 0; }
.fx-reparto-buffer__val { font-size: 26px; font-weight: 900; color: rgb(var(--fx-success)); flex-shrink: 0; }
/* ---------- Bank-card differentiation per method (Point 8) ---------- */
.fx-bank-card {
background-image: linear-gradient(135deg, var(--bank-from, #1e293b) 0%, var(--bank-to, #0f172a) 100%);
background-color: var(--bank-to, #0f172a);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 10px 26px var(--bank-shadow, rgba(0, 0, 0, 0.30));
border-color: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.fx-bank-card__bgicon {
position: absolute;
right: -14px;
top: -16px;
font-size: 6.5rem;
line-height: 1;
opacity: 0.10;
color: #fff;
pointer-events: none;
transition: transform 500ms var(--fx-ease-out), opacity 300ms ease;
}
.fx-bank-card:hover .fx-bank-card__bgicon {
opacity: 0.16;
transform: scale(1.04);
}
.fx-bank-card .fx-bank-card__icon {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.fx-bank-card .fx-bank-card__name {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.fx-bank-card .fx-bank-card__value {
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
}
.fx-bank-card .fx-bank-card__value .fx-money__sub {
color: rgba(255, 255, 255, 0.6);
}
.fx-bank-card .fx-bank-card__delete:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
/* Method presets */
.fx-bank-card--zelle { --bank-from: #7c3aed; --bank-to: #2e1065; --bank-shadow: rgba(124, 58, 237, 0.28); }
.fx-bank-card--binance { --bank-from: #f0b90b; --bank-to: #5c4408; --bank-shadow: rgba(240, 185, 11, 0.30); }
.fx-bank-card--efectivo { --bank-from: #16a34a; --bank-to: #14532d; --bank-shadow: rgba(22, 163, 74, 0.30); }
.fx-bank-card--pago-movil { --bank-from: #06b6d4; --bank-to: #164e63; --bank-shadow: rgba(6, 182, 212, 0.28); }
.fx-bank-card--bdv { --bank-from: #dc2626; --bank-to: #7f1d1d; --bank-shadow: rgba(220, 38, 38, 0.28); }
.fx-bank-card--banesco { --bank-from: #0ea5e9; --bank-to: #0c4a6e; --bank-shadow: rgba(14, 165, 233, 0.28); }
.fx-bank-card--mercantil{ --bank-from: #ea580c; --bank-to: #7c2d12; --bank-shadow: rgba(234, 88, 12, 0.28); }
.fx-bank-card--bbva { --bank-from: #2563eb; --bank-to: #1e3a8a; --bank-shadow: rgba(37, 99, 235, 0.28); }
.fx-bank-card--bancaribe{ --bank-from: #0891b2; --bank-to: #155e75; --bank-shadow: rgba(8, 145, 178, 0.28); }
.fx-bank-card--default { --bank-from: #475569; --bank-to: #0f172a; --bank-shadow: rgba(0, 0, 0, 0.40); }
/* ---------- Highlighted action buttons (Point 4) ---------- */
/* Solid filled variant — for primary "do this now" actions */
.fx-btn-mini--solid {
background: linear-gradient(135deg, rgb(var(--fx-primary) / 1), rgb(var(--fx-primary-deep) / 1));
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 6px 18px rgb(var(--fx-primary) / 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
font-weight: 700;
}
.fx-btn-mini--solid:hover {
background: linear-gradient(135deg, rgb(var(--fx-primary-soft) / 1), rgb(var(--fx-primary) / 1));
box-shadow: 0 8px 22px rgb(var(--fx-primary) / 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
transform: translateY(-1px);
}
.fx-btn-mini--solid-success {
background: linear-gradient(135deg, rgb(var(--fx-success)), #047857);
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 6px 18px rgb(var(--fx-success) / 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
font-weight: 700;
}
.fx-btn-mini--solid-success:hover {
background: linear-gradient(135deg, rgb(var(--fx-success-soft)), rgb(var(--fx-success)));
box-shadow: 0 8px 22px rgb(var(--fx-success) / 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
transform: translateY(-1px);
}
/* ---------- Carousel arrow positioning fix (Point 9) ---------- */
/* Default carousel has no extra padding on mobile (arrows hidden anyway). */
.fx-carousel { padding: 0; }
.fx-carousel__btn {
width: 36px; height: 36px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
background: rgba(15, 18, 32, 0.95);
border-color: rgba(99, 102, 241, 0.35);
}
.fx-carousel__btn:hover {
background: rgba(28, 133, 253, 0.85);
border-color: rgba(28, 133, 253, 0.6);
}
/* On desktop where arrows can appear, reserve gutter inside the carousel so
they sit in empty space, never on top of cards. */
@media (min-width: 768px) {
.fx-carousel { padding: 0 44px; }
.fx-carousel__btn--prev { left: 2px; }
.fx-carousel__btn--next { right: 2px; }
.fx-carousel__track { scroll-padding-left: 0; scroll-padding-right: 0; }
}
/* ---------- KPI tile accent (Point 5 — colored tiles for important data) ---------- */
.fx-kpi-tile--filled-primary {
background-image: linear-gradient(135deg, rgba(28, 133, 253, 0.18), rgba(12, 56, 112, 0.10));
border-color: rgba(28, 133, 253, 0.28);
}
.fx-kpi-tile--filled-success {
background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 78, 59, 0.10));
border-color: rgba(16, 185, 129, 0.28);
}
.fx-kpi-tile--filled-attention {
background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(120, 53, 15, 0.10));
border-color: rgba(245, 158, 11, 0.32);
animation: fxAttentionPulse 3s ease-in-out infinite;
}
@keyframes fxAttentionPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10); }
}
/* ---------- Mobile-tight fund cards (Point 6) ---------- */
@media (max-width: 768px) {
.fx-funds-grid { gap: 12px; }
.fx-fund-card {
min-height: 0;
padding: 14px 16px;
gap: 8px;
}
.fx-fund-card__head { margin-bottom: 0; }
.fx-fund-card__icon { width: 30px; height: 30px; font-size: 14px; }
.fx-fund-card__pct { padding: 2px 7px; font-size: 10px; }
.fx-fund-card__label { font-size: 10.5px; }
.fx-fund-card__value {
font-size: 22px;
margin: 2px 0 0;
}
.fx-fund-card__hint {
font-size: 10.5px;
margin: 2px 0 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.fx-fund-card__bgicon { font-size: 6rem; right: -10px; bottom: -16px; }
.fx-fund-card__actions {
padding-top: 8px;
margin-top: 4px;
}
.fx-fund-card__action {
padding: 7px 10px;
font-size: 11px;
}
}
/* Two-up grid breakpoint — keep cards 2 per row from 480px onwards */
@media (min-width: 480px) and (max-width: 1279px) {
.fx-funds-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Sobres como carrusel deslizable en teléfonos ----------
En pantallas chicas el grid apilado hacía la sección muy alta. Aquí se
convierte en un carrusel horizontal: la altura es la de UNA sola tarjeta
y el usuario desliza para ver el resto (igual que las cuentas bancarias). */
@media (max-width: 639px) {
.fx-funds-grid {
display: flex;
flex-wrap: nowrap;
align-items: flex-start; /* cada tarjeta a su propia altura (no se estiran) */
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-bottom: 6px;
scrollbar-width: none;
}
.fx-funds-grid::-webkit-scrollbar { display: none; }
.fx-fund-card {
flex: 0 0 82%;
max-width: 300px;
scroll-snap-align: center;
}
/* En el carrusel móvil, botones aún más compactos. */
.fx-fund-card__actions .fx-fund-card__action { font-size: 11px; padding: 7px 8px; }
}
/* ---------- Botones de acción: máximo 2 por fila (responsive en todo ancho) ----------
Antes 3 botones (Reinversión/Ingresar/Retirar) se apretaban en una fila y se
veían grandes/cortados. Ahora se acomodan de a 2 y el 3º baja a otra línea. */
.fx-fund-card__actions { flex-wrap: wrap; gap: 6px; }
.fx-fund-card__actions .fx-fund-card__action {
flex: 1 1 auto;
min-width: calc(50% - 4px);
}
/* ---------- Botón de eliminar bien visible (rojo sólido + icono blanco) ----------
Selector de alta especificidad para ganarle a .fx-fund-card__action:nth-child(2). */
.fx-fund-card .fx-fund-card__actions .fx-fund-card__action.fx-fund-card__action--danger {
background: rgb(var(--fx-danger));
color: #fff;
border-color: rgb(var(--fx-danger));
box-shadow: none;
flex: 0 0 auto;
min-width: 0;
padding: 9px 14px;
}
.fx-fund-card .fx-fund-card__actions .fx-fund-card__action.fx-fund-card__action--danger:hover {
background: rgb(var(--fx-danger));
color: #fff;
filter: brightness(1.12);
}
/* ---------- Nota adhesiva "Reinvierte" pegada al sobre (estilo post-it) ----------
Va superpuesta (position:absolute) para NO alterar la altura de la tarjeta. */
.fx-coach-tag {
position: absolute;
top: 14px;
right: 12px;
transform: rotate(4deg);
background: #fde68a; /* papel amarillo */
color: #5b3d00;
font-size: 10.5px;
font-weight: 800;
line-height: 1.15;
text-align: center;
padding: 8px 12px 7px;
border-radius: 2px;
border: none;
cursor: pointer;
z-index: 6;
max-width: 60%;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.38);
animation: fxCoachTagPulse 2.6s ease-in-out infinite;
}
/* Cinta adhesiva translúcida sobre la nota (vende el "pegado al sobre"). */
.fx-coach-tag::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 40px;
height: 15px;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.fx-coach-tag:hover { transform: rotate(2deg) scale(1.05); }
@keyframes fxCoachTagPulse {
0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,.38); }
50% { box-shadow: 0 6px 20px rgba(251,191,36,.55); }
}
@media (prefers-reduced-motion: reduce) { .fx-coach-tag { animation: none; } }
/* ---------- CTA grande con latido (ej: registrar primer producto) ---------- */
.fx-cta-pulse {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 30px;
border-radius: 16px;
font-size: 16px;
font-weight: 800;
color: rgb(var(--fx-on-primary));
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary-deep)));
border: none;
cursor: pointer;
animation: fxCtaPulse 1.8s ease-in-out infinite;
transition: transform .15s var(--fx-ease-out);
}
.fx-cta-pulse i { font-size: 20px; }
.fx-cta-pulse:hover { transform: translateY(-2px) scale(1.02); }
.fx-cta-pulse:active { transform: scale(.98); }
@keyframes fxCtaPulse {
0%, 100% { box-shadow: 0 8px 24px rgba(99,102,241,.30), 0 0 0 0 rgba(99,102,241,.45); }
50% { box-shadow: 0 10px 30px rgba(99,102,241,.45), 0 0 0 14px rgba(99,102,241,0); }
}
@media (prefers-reduced-motion: reduce) { .fx-cta-pulse { animation: none; } }
/* ---------- Banner above sections — fade-down highlight ---------- */
.fx-banner-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
background: rgb(var(--fx-primary) / 0.15);
color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.30);
}
/* ---------- Refined animation: scroll-snap with offset for arrow ---------- */
.fx-carousel__track {
scroll-padding-left: 8px;
scroll-padding-right: 8px;
}
/* ---------- Section panel (optional — for sections that want a soft enclosure) ---------- */
.fx-section-panel {
background-color: rgb(var(--fx-page-base));
background-image: radial-gradient(circle at 50% -10%, rgb(var(--fx-page-spot) / 0.65) 0%, rgb(var(--fx-page-base) / 0.4) 60%, rgb(var(--fx-page-deep) / 0.15) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--fx-r-xl);
padding: clamp(18px, 3vw, 28px);
position: relative;
overflow: hidden;
}
/* =====================================================================
v4.2 — Polish pass: shadow clipping, FAB buttons, mobile fund carousel
===================================================================== */
/* ---------- Fix shadow clipping on carousel tracks (Point 1) ---------- */
/* `overflow-x: auto` implicitly clips overflow-y. Bank cards have
box-shadow 0 10px 26px (extends ~36px below), so need 48px room. */
.fx-carousel__track {
padding-top: 12px;
padding-bottom: 48px;
margin-bottom: -36px; /* pull the next section up so the breathing room
doesn't add visible empty gap */
}
/* Re-center carousel arrows over the cards (not the track box) — the track
now has asymmetric padding for shadows, so arrows would drift down. */
@media (min-width: 768px) {
.fx-carousel__btn--prev,
.fx-carousel__btn--next {
top: calc(50% - 18px);
}
}
/* ---------- Floating Action Buttons (FABs) — Point 2 ---------- */
/* Pill-style elevated buttons for high-priority section actions.
"Floating" via shadow + slight lift on hover. */
.fx-fab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
background: linear-gradient(135deg, rgb(var(--fx-primary)) 0%, rgb(var(--fx-primary-deep)) 100%);
color: rgb(var(--fx-on-primary));
box-shadow:
0 10px 24px rgb(var(--fx-primary) / 0.45),
0 2px 6px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: transform var(--fx-dur-fast) var(--fx-ease-out),
box-shadow var(--fx-dur-fast) var(--fx-ease-out),
filter var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-fab:hover {
transform: translateY(-2px);
box-shadow:
0 14px 32px rgb(var(--fx-primary) / 0.55),
0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
filter: brightness(1.08);
}
.fx-fab:active { transform: scale(0.97) translateY(-1px); }
.fx-fab i { font-size: 14px; }
.fx-fab--indigo {
background: linear-gradient(135deg, rgb(var(--fx-primary)) 0%, rgb(var(--fx-primary-deep)) 100%);
box-shadow:
0 10px 24px rgb(var(--fx-primary) / 0.45),
0 2px 6px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fx-fab--indigo:hover {
box-shadow:
0 14px 32px rgb(var(--fx-primary) / 0.55),
0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.fx-fab--success {
background: linear-gradient(135deg, #10b981 0%, #047857 100%);
box-shadow:
0 10px 24px rgba(16, 185, 129, 0.45),
0 2px 6px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fx-fab--success:hover {
box-shadow:
0 14px 32px rgba(16, 185, 129, 0.55),
0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
/* Icon-only round variant — most "floating" looking */
.fx-fab--round {
width: 42px; height: 42px;
padding: 0;
justify-content: center;
border-radius: 999px;
}
.fx-fab--round i { font-size: 16px; }
@media (max-width: 640px) {
.fx-fab {
padding: 8px 12px;
font-size: 11px;
gap: 5px;
letter-spacing: 0;
}
.fx-fab i { font-size: 12.5px; }
.fx-fab--round { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
.fx-fab { padding: 7px 10px; font-size: 10.5px; }
}
/* ---------- Fund cards as horizontal carousel on mobile (Point 3) ---------- */
/* On screens up to 768px, the funds grid becomes a snap-scroll carousel.
Order preserved from DOM (Mi sueldo, Compras, Publicidad, Imprevistos).
JS positions the initial scroll at Compras on load. */
@media (max-width: 768px) {
.fx-funds-grid {
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 12px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/* Generous padding-bottom so fund-card box-shadow (~52px) isn't clipped */
padding: 12px 4px 56px;
margin: 0 -4px -40px; /* pull next section up so the gap doesn't show */
scrollbar-width: none;
-ms-overflow-style: none;
}
.fx-funds-grid::-webkit-scrollbar { display: none; }
.fx-fund-card {
flex: 0 0 78%;
max-width: 320px;
min-width: 240px;
scroll-snap-align: start;
min-height: 0;
padding: 14px 16px;
}
}
/* Even tighter on small phones */
@media (max-width: 380px) {
.fx-fund-card { flex-basis: 82%; min-width: 220px; }
.fx-fund-card__value { font-size: 20px; }
}
/* ---------- Floating action cluster for section header (right-side FABs) ---------- */
.fx-fab-cluster {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 640px) {
.fx-fab-cluster { gap: 8px; }
}
/* =====================================================================
v4.6 — Global overlay system: modals, confirm dialogs, toasts.
One material, one motion language, reused everywhere. Other pages
build modals from these classes (or the FX.* JS API) instead of
hand-rolling slate boxes. Glass here is purposeful: the backdrop
blurs the busy dashboard so the eye lands on a single floating panel.
Color roles extend the base three with ONE addition:
--fx-danger → errors and destructive confirmations only.
It is deliberately distinct from amber (pending/attention) so a
"delete forever" never reads as a soft "heads up".
===================================================================== */
:root {
--fx-danger: 244 63 94; /* rose-500 — errors & destructive only */
--fx-danger-soft: 251 113 133; /* rose-400 (text on dark) */
/* Layering scale for overlays (kept above page content + sidebar z-40) */
--fx-z-modal: 1000;
--fx-z-stacked: 1100; /* a modal opened on top of another modal */
--fx-z-confirm: 1200; /* confirm always sits above any modal */
--fx-z-loader: 1300;
--fx-z-toast: 1400; /* feedback is never hidden behind anything */
}
/* ---------- Backdrop / overlay ---------- */
.fx-overlay {
position: fixed;
inset: 0;
z-index: var(--fx-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--fx-s-4);
background: rgba(6, 9, 18, 0.6);
backdrop-filter: blur(10px) saturate(115%);
-webkit-backdrop-filter: blur(10px) saturate(115%);
overscroll-behavior: contain;
animation: fxOverlayIn var(--fx-dur-base) var(--fx-ease-out);
}
/* Legacy compatibility: pages toggle visibility with the `hidden` class.
This wins on specificity (0,2,0) so display:flex never leaks through. */
.fx-overlay.hidden { display: none; }
.fx-overlay--stacked { z-index: var(--fx-z-stacked); }
.fx-overlay.is-closing { animation: fxOverlayOut var(--fx-dur-fast) var(--fx-ease-out) forwards; }
@keyframes fxOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxOverlayOut { from { opacity: 1; } to { opacity: 0; } }
/* ---------- Modal panel ---------- */
.fx-modal {
--fx-accent: var(--fx-primary);
--fx-accent-soft: var(--fx-primary-soft);
position: relative;
width: 100%;
max-width: 30rem; /* md default */
max-height: min(90vh, 760px);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--fx-r-xl);
background:
radial-gradient(120% 80% at 50% -10%, rgb(var(--fx-accent) / 0.10) 0%, transparent 55%),
var(--fx-glass-bg);
background-color: rgb(var(--fx-bg-2) / 0.92);
backdrop-filter: blur(calc(var(--fx-glass-blur) + 6px)) saturate(130%);
-webkit-backdrop-filter: blur(calc(var(--fx-glass-blur) + 6px)) saturate(130%);
border: 1px solid var(--fx-hairline-strong);
box-shadow:
0 32px 64px -16px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: fxModalIn var(--fx-dur-slow) var(--fx-ease-out);
transform-origin: center bottom;
}
.fx-overlay.is-closing .fx-modal { animation: fxModalOut var(--fx-dur-fast) var(--fx-ease-out) forwards; }
/* The accent line that gives every panel its identity colour */
.fx-modal::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
rgb(var(--fx-accent)) 22%,
rgb(var(--fx-accent-soft)) 50%,
rgb(var(--fx-accent)) 78%,
transparent);
box-shadow: 0 0 18px rgb(var(--fx-accent) / 0.5);
z-index: 2;
}
.fx-modal--sm { max-width: 24rem; }
.fx-modal--md { max-width: 30rem; }
.fx-modal--lg { max-width: 42rem; }
.fx-modal--xl { max-width: 56rem; }
.fx-modal--full-h { height: 90vh; }
.fx-modal--primary { --fx-accent: var(--fx-primary); --fx-accent-soft: var(--fx-primary-soft); }
.fx-modal--success { --fx-accent: var(--fx-success); --fx-accent-soft: var(--fx-success-soft); }
.fx-modal--attention { --fx-accent: var(--fx-attention); --fx-accent-soft: var(--fx-attention-soft); }
.fx-modal--danger { --fx-accent: var(--fx-danger); --fx-accent-soft: var(--fx-danger-soft); }
@keyframes fxModalIn {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fxModalOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
/* ---------- Modal header ---------- */
.fx-modal__header {
display: flex;
align-items: flex-start;
gap: var(--fx-s-4);
padding: var(--fx-s-5) var(--fx-s-5) var(--fx-s-4);
border-bottom: 1px solid var(--fx-hairline);
flex-shrink: 0;
}
.fx-modal__icon {
flex-shrink: 0;
width: 46px; height: 46px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-md);
font-size: 22px;
color: rgb(var(--fx-accent-soft));
background: rgb(var(--fx-accent) / 0.14);
border: 1px solid rgb(var(--fx-accent) / 0.30);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fx-modal__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-modal__title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
color: rgb(var(--fx-text));
margin: 0;
line-height: 1.25;
}
.fx-modal__sub {
font-size: 12.5px;
font-weight: 500;
color: rgb(var(--fx-text-muted));
margin: 0;
line-height: 1.45;
}
.fx-modal__close {
flex-shrink: 0;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-sm);
background: rgba(148, 163, 184, 0.08);
border: 1px solid var(--fx-hairline);
color: rgb(var(--fx-text-dim));
cursor: pointer;
font-size: 17px;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-modal__close:hover {
background: rgb(var(--fx-danger) / 0.14);
border-color: rgb(var(--fx-danger) / 0.32);
color: rgb(var(--fx-danger-soft));
}
.fx-modal__close:active { transform: scale(0.92); }
/* ---------- Modal body & footer ---------- */
.fx-modal__body {
padding: var(--fx-s-5);
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--fx-s-4);
}
.fx-modal__body::-webkit-scrollbar { width: 5px; }
.fx-modal__body::-webkit-scrollbar-track { background: transparent; }
.fx-modal__body::-webkit-scrollbar-thumb { background: rgb(var(--fx-primary) / 0.3); border-radius: 999px; }
.fx-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--fx-s-3);
padding: var(--fx-s-4) var(--fx-s-5);
border-top: 1px solid var(--fx-hairline);
background: rgb(var(--fx-bg-0) / 0.4);
flex-shrink: 0;
}
.fx-modal__footer--split { justify-content: space-between; }
/* A soft callout used inside modals to surface key context (balances, etc.) */
.fx-modal__note {
display: flex;
align-items: center;
gap: var(--fx-s-3);
padding: 12px 14px;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-accent) / 0.08);
border: 1px solid rgb(var(--fx-accent) / 0.22);
font-size: 12.5px;
color: rgb(var(--fx-text-muted));
line-height: 1.45;
}
.fx-modal__note i { color: rgb(var(--fx-accent-soft)); font-size: 18px; flex-shrink: 0; }
/* ---------- Form fields (consistent across every modal) ---------- */
.fx-field { display: flex; flex-direction: column; gap: 6px; }
.fx-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgb(var(--fx-text-muted));
}
.fx-label__hint { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgb(var(--fx-text-dim)); }
.fx-input, .fx-select, .fx-textarea {
width: 100%;
padding: 11px 13px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
color: rgb(var(--fx-text));
background: rgb(var(--fx-bg-0) / 0.6);
border: 1px solid var(--fx-hairline-strong);
border-radius: var(--fx-r-md);
outline: none;
transition: border-color var(--fx-dur-fast) var(--fx-ease-out),
box-shadow var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-input::placeholder, .fx-textarea::placeholder { color: rgb(var(--fx-text-dim)); }
.fx-input:focus, .fx-select:focus, .fx-textarea:focus {
border-color: rgb(var(--fx-primary) / 0.7);
box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.16);
background: rgb(var(--fx-bg-0) / 0.85);
}
.fx-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.fx-select {
-webkit-appearance: none; appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%2394a3b8' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 38px;
}
/* Money input with a leading currency mark */
.fx-input-money { position: relative; display: flex; align-items: center; }
.fx-input-money__mark {
position: absolute; left: 13px;
font-size: 14px; font-weight: 700;
color: rgb(var(--fx-text-dim));
pointer-events: none;
}
.fx-input-money .fx-input { padding-left: 28px; }
/* ---------- Buttons (modal footers & confirm) ---------- */
.fx-btn {
--fx-accent: var(--fx-primary);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
letter-spacing: 0.01em;
border-radius: var(--fx-r-md);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
box-shadow var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-btn:active { transform: scale(0.97); }
.fx-btn i { font-size: 15px; }
.fx-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.fx-btn--solid {
background: linear-gradient(135deg, rgb(var(--fx-accent)), rgb(var(--fx-accent) / 0.78));
color: #fff;
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 8px 20px rgb(var(--fx-accent) / 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fx-btn--solid:hover {
filter: brightness(1.08);
box-shadow: 0 10px 26px rgb(var(--fx-accent) / 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
}
.fx-btn--ghost {
background: rgba(148, 163, 184, 0.06);
color: rgb(var(--fx-text-muted));
border-color: var(--fx-hairline-strong);
}
.fx-btn--ghost:hover { background: rgba(148, 163, 184, 0.12); color: rgb(var(--fx-text)); }
.fx-btn--primary { --fx-accent: var(--fx-primary); }
.fx-btn--success { --fx-accent: var(--fx-success); }
.fx-btn--attention { --fx-accent: var(--fx-attention); }
.fx-btn--danger { --fx-accent: var(--fx-danger); }
.fx-btn--block { width: 100%; }
/* ---------- Toast notifications (success / error / info / warning) ---------- */
.fx-toast-stack {
position: fixed;
top: max(var(--fx-s-4), env(safe-area-inset-top));
right: max(var(--fx-s-4), env(safe-area-inset-right));
z-index: var(--fx-z-toast);
display: flex;
flex-direction: column;
gap: var(--fx-s-3);
width: min(380px, calc(100vw - 2 * var(--fx-s-4)));
pointer-events: none;
}
.fx-toast {
--fx-accent: var(--fx-primary);
--fx-accent-soft: var(--fx-primary-soft);
position: relative;
display: flex;
align-items: flex-start;
gap: var(--fx-s-3);
padding: 13px 14px;
border-radius: var(--fx-r-md);
overflow: hidden;
pointer-events: auto;
background: rgb(var(--fx-bg-2) / 0.86);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgb(var(--fx-accent) / 0.34);
box-shadow:
0 18px 40px -12px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: fxToastIn var(--fx-dur-slow) var(--fx-ease-out);
will-change: transform, opacity;
}
.fx-toast.is-leaving { animation: fxToastOut var(--fx-dur-base) var(--fx-ease-out) forwards; }
.fx-toast--success { --fx-accent: var(--fx-success); --fx-accent-soft: var(--fx-success-soft); }
.fx-toast--error,
.fx-toast--danger { --fx-accent: var(--fx-danger); --fx-accent-soft: var(--fx-danger-soft); }
.fx-toast--info,
.fx-toast--primary { --fx-accent: var(--fx-primary); --fx-accent-soft: var(--fx-primary-soft); }
.fx-toast--warning,
.fx-toast--attention { --fx-accent: var(--fx-attention); --fx-accent-soft: var(--fx-attention-soft); }
.fx-toast__icon {
flex-shrink: 0;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
font-size: 19px;
color: rgb(var(--fx-accent-soft));
background: rgb(var(--fx-accent) / 0.16);
border: 1px solid rgb(var(--fx-accent) / 0.3);
}
.fx-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.fx-toast__title {
font-size: 12.5px;
font-weight: 700;
color: rgb(var(--fx-accent-soft));
letter-spacing: 0.01em;
margin: 0;
}
.fx-toast__msg {
font-size: 13px;
font-weight: 500;
color: rgb(var(--fx-text));
line-height: 1.45;
margin: 0;
word-break: break-word;
}
.fx-toast__close {
flex-shrink: 0;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px;
background: transparent;
border: none;
color: rgb(var(--fx-text-dim));
cursor: pointer;
font-size: 14px;
transition: background var(--fx-dur-fast) var(--fx-ease-out), color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-toast__close:hover { background: rgba(148, 163, 184, 0.14); color: rgb(var(--fx-text)); }
/* Depleting timer bar — lets users perceive how long the toast stays */
.fx-toast__bar {
position: absolute;
left: 0; bottom: 0;
height: 2.5px;
width: 100%;
transform-origin: left center;
background: linear-gradient(90deg, rgb(var(--fx-accent-soft)), rgb(var(--fx-accent) / 0.6));
animation: fxToastBar var(--fx-toast-life, 4000ms) linear forwards;
}
.fx-toast:hover .fx-toast__bar { animation-play-state: paused; }
@keyframes fxToastIn {
from { opacity: 0; transform: translateX(24px) scale(0.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fxToastOut {
from { opacity: 1; transform: translateX(0) scale(1); max-height: 120px; margin-bottom: 0; }
to { opacity: 0; transform: translateX(24px) scale(0.96); max-height: 0; margin-bottom: calc(-1 * var(--fx-s-3)); }
}
@keyframes fxToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ---------- Global loader (glass refresh of the legacy loader) ---------- */
#global-loader {
z-index: var(--fx-z-loader) !important;
background: rgba(6, 9, 18, 0.62) !important;
backdrop-filter: blur(8px) saturate(115%);
-webkit-backdrop-filter: blur(8px) saturate(115%);
}
.fx-loader-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 28px 36px;
border-radius: var(--fx-r-lg);
background: rgb(var(--fx-bg-2) / 0.9);
border: 1px solid var(--fx-hairline-strong);
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
animation: fxModalIn var(--fx-dur-base) var(--fx-ease-out);
}
.fx-loader-ring {
width: 44px; height: 44px;
border-radius: 999px;
border: 3px solid rgb(var(--fx-primary) / 0.2);
border-top-color: rgb(var(--fx-primary-soft));
animation: fxSpin 0.8s linear infinite;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }
/* ---------- Responsive + reduced motion ---------- */
@media (max-width: 540px) {
.fx-overlay { padding: 0; align-items: flex-end; }
.fx-modal {
max-width: 100%;
max-height: 92vh;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transform-origin: center bottom;
animation: fxSheetIn var(--fx-dur-slow) var(--fx-ease-drawer);
}
.fx-overlay.is-closing .fx-modal { animation: fxSheetOut var(--fx-dur-base) var(--fx-ease-drawer) forwards; }
.fx-modal__header, .fx-modal__body { padding-left: var(--fx-s-4); padding-right: var(--fx-s-4); }
.fx-modal__footer { padding-left: var(--fx-s-4); padding-right: var(--fx-s-4); }
.fx-toast-stack { width: calc(100vw - 2 * var(--fx-s-3)); right: var(--fx-s-3); top: var(--fx-s-3); }
}
@keyframes fxSheetIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes fxSheetOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
.fx-overlay, .fx-modal, .fx-toast, .fx-loader-card,
.fx-overlay.is-closing, .fx-overlay.is-closing .fx-modal, .fx-toast.is-leaving {
animation-duration: 1ms !important;
}
.fx-toast__bar { animation: fxToastBar var(--fx-toast-life, 4000ms) linear forwards !important; }
.fx-loader-ring { animation-duration: 0.8s !important; }
}
/* =====================================================================
v4.7 — Tareas / Kanban de equipo
Tablero de gestión de tareas (tareas.html). Columnas de vidrio,
tarjetas con acento de prioridad, nota de "por qué no se hizo",
acuse "visto" y aviso persistente de tareas urgentes.
Misma disciplina de 3 colores: indigo (marca/normal), emerald
(completado), amber (atención/urgente/vencida). Rose jamás como aviso.
===================================================================== */
/* ---------- Columnas ---------- */
.fx-tcol {
display: flex; flex-direction: column; overflow: hidden; position: relative;
background: var(--fx-glass-bg-soft);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid var(--fx-hairline);
border-radius: var(--fx-r-xl);
box-shadow: var(--fx-shadow-2);
}
.fx-tcol--proceso { border-color: rgb(var(--fx-primary) / 0.22); }
.fx-tcol--done { border-color: rgb(var(--fx-success) / 0.20); }
.fx-tcol__head {
display: flex; align-items: center; justify-content: space-between;
padding: 15px 18px;
border-bottom: 1px solid var(--fx-hairline);
background: rgba(255, 255, 255, 0.03);
flex-shrink: 0;
}
.fx-tcol--proceso .fx-tcol__head { background: rgb(var(--fx-primary) / 0.07); border-bottom-color: rgb(var(--fx-primary) / 0.12); }
.fx-tcol--done .fx-tcol__head { background: rgb(var(--fx-success) / 0.07); border-bottom-color: rgb(var(--fx-success) / 0.12); }
.fx-tcol__title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
color: rgb(var(--fx-text-muted)); margin: 0;
}
.fx-tcol--proceso .fx-tcol__title { color: rgb(var(--fx-primary-soft)); }
.fx-tcol--done .fx-tcol__title { color: rgb(var(--fx-success-soft)); }
.fx-tcol__dot {
width: 9px; height: 9px; border-radius: 999px;
background: rgb(var(--fx-text-dim)); box-shadow: 0 0 8px rgba(148, 163, 184, 0.6);
}
.fx-tcol--proceso .fx-tcol__dot { background: rgb(var(--fx-primary)); box-shadow: 0 0 8px rgb(var(--fx-primary) / 0.7); animation: fxDotPulse 1.8s ease-in-out infinite; }
.fx-tcol--done .fx-tcol__dot { background: rgb(var(--fx-success)); box-shadow: 0 0 8px rgb(var(--fx-success) / 0.7); }
.fx-tcol__count {
font-size: 11px; font-weight: 700; color: rgb(var(--fx-text-muted));
background: rgb(var(--fx-bg-0) / 0.6); border: 1px solid var(--fx-hairline);
border-radius: 8px; padding: 2px 9px; min-width: 26px; text-align: center;
}
.fx-tcol__body {
flex: 1; overflow-y: auto; padding: 14px;
display: flex; flex-direction: column; gap: 12px;
}
@keyframes fxDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* ---------- Tarjeta de tarea ---------- */
.fx-task {
position: relative;
background: var(--fx-glass-bg);
border: 1px solid var(--fx-hairline);
border-left: 3px solid var(--fx-hairline-strong);
border-radius: var(--fx-r-lg);
padding: 14px 16px;
box-shadow: var(--fx-shadow-1);
transition: transform var(--fx-dur-base) var(--fx-ease-out),
border-color var(--fx-dur-base) var(--fx-ease-out),
box-shadow var(--fx-dur-base) var(--fx-ease-out);
animation: fxTaskIn var(--fx-dur-slow) var(--fx-ease-out) both;
}
.fx-task:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-2); }
.fx-task--alta { border-left-color: rgb(var(--fx-attention)); }
.fx-task--media { border-left-color: rgb(var(--fx-primary)); }
.fx-task--baja { border-left-color: var(--fx-hairline-strong); }
.fx-task.is-vencida {
border-left-color: rgb(var(--fx-attention));
box-shadow: 0 0 0 1px rgb(var(--fx-attention) / 0.30), var(--fx-shadow-1);
}
@keyframes fxTaskIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.fx-task__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fx-task__desc {
font-size: 13.5px; line-height: 1.55; font-weight: 500;
color: rgb(var(--fx-text)); margin: 0 0 12px; word-break: break-word;
}
.fx-task__foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding-top: 12px; border-top: 1px solid var(--fx-hairline);
}
.fx-task__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fx-task__avatar {
width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
background: rgb(var(--fx-bg-0) / 0.5); color: rgb(var(--fx-text-muted));
border: 1px solid var(--fx-hairline-strong);
}
.fx-task__avatar--todos { background: rgb(var(--fx-primary) / 0.16); color: rgb(var(--fx-primary-soft)); border-color: rgb(var(--fx-primary) / 0.30); }
.fx-task__avatar--yo { background: rgb(var(--fx-success) / 0.16); color: rgb(var(--fx-success-soft)); border-color: rgb(var(--fx-success) / 0.30); }
.fx-task__name {
font-size: 11.5px; font-weight: 600; color: rgb(var(--fx-text-muted));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.fx-task__actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.fx-task__seen { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.fx-task__seen--ok { color: rgb(var(--fx-success-soft)); }
.fx-task__seen--no { color: rgb(var(--fx-text-dim)); }
.fx-task__seen i { font-size: 12px; }
/* Nota / razón (por qué se pausó o no se hizo) */
.fx-task__note {
display: flex; gap: 8px; align-items: flex-start;
margin: 0 0 12px; padding: 9px 11px;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-attention) / 0.08);
border: 1px solid rgb(var(--fx-attention) / 0.22);
}
.fx-task__note > i { color: rgb(var(--fx-attention-soft)); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.fx-task__note p { margin: 0; font-size: 12px; line-height: 1.45; color: rgb(var(--fx-text-muted)); min-width: 0; word-break: break-word; }
.fx-task__note b { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--fx-attention-soft)); margin-bottom: 1px; }
/* Botón borrar (solo admin) */
.fx-task__del {
width: 30px; height: 30px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--fx-r-md); cursor: pointer;
background: transparent; border: 1px solid var(--fx-hairline);
color: rgb(var(--fx-text-dim));
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-task__del:hover { color: rgb(var(--fx-danger-soft)); border-color: rgb(var(--fx-danger) / 0.4); background: rgb(var(--fx-danger) / 0.10); }
.fx-task__del:active { transform: scale(0.95); }
/* ---------- Panel del jefe (filas de equipo) ---------- */
.fx-team-row {
display: flex; align-items: center; gap: 12px;
padding: 12px; border-radius: var(--fx-r-md);
background: rgb(var(--fx-bg-0) / 0.4); border: 1px solid var(--fx-hairline);
}
.fx-team-row + .fx-team-row { margin-top: 8px; }
.fx-team-row__avatar {
width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
background: rgb(var(--fx-primary) / 0.14); color: rgb(var(--fx-primary-soft));
border: 1px solid rgb(var(--fx-primary) / 0.28);
}
.fx-team-row__main { flex: 1; min-width: 0; }
.fx-team-row__name { font-size: 13px; font-weight: 700; color: rgb(var(--fx-text)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-team-row__sub { font-size: 11px; color: rgb(var(--fx-text-muted)); margin: 3px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.fx-team-row__sub b { font-weight: 700; color: rgb(var(--fx-text)); }
.fx-team-row__sub .em { color: rgb(var(--fx-success-soft)); }
.fx-team-row__sub .at { color: rgb(var(--fx-attention-soft)); }
/* ---------- Aviso persistente de tareas URGENTES (global) ---------- */
.fx-urgent-banner {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
z-index: var(--fx-z-toast);
width: min(560px, calc(100vw - 28px));
display: flex; align-items: center; gap: 12px;
padding: 13px 15px; border-radius: var(--fx-r-lg);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(120, 53, 15, 0.16)), var(--fx-glass-bg);
backdrop-filter: blur(var(--fx-glass-blur));
-webkit-backdrop-filter: blur(var(--fx-glass-blur));
border: 1px solid rgb(var(--fx-attention) / 0.45);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
animation: fxUrgentIn var(--fx-dur-slow) var(--fx-ease-out) both, fxUrgentPulse 2.2s ease-in-out infinite;
}
.fx-urgent-banner.is-leaving { animation: fxUrgentOut var(--fx-dur-base) var(--fx-ease-out) forwards; }
.fx-urgent-banner__icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff;
background: linear-gradient(135deg, rgb(var(--fx-attention)), #b45309);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fx-urgent-banner__body { flex: 1; min-width: 0; }
.fx-urgent-banner__title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: rgb(var(--fx-text)); }
.fx-urgent-banner__msg { margin: 2px 0 0; font-size: 11.5px; font-weight: 500; color: rgb(var(--fx-attention-soft)); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-urgent-banner__btn {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
padding: 9px 15px; border-radius: 999px; font-size: 12px; font-weight: 700;
color: #3a2503; cursor: pointer; text-decoration: none;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
transition: transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-urgent-banner__btn:hover { transform: translateY(-1px); }
.fx-urgent-banner__btn:active { transform: scale(0.97); }
@keyframes fxUrgentIn { from { opacity: 0; transform: translateX(-50%) translateY(24px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes fxUrgentOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(24px); } }
@keyframes fxUrgentPulse { 0%, 100% { box-shadow: 0 18px 40px rgba(0,0,0,0.5); } 50% { box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 4px rgba(245,158,11,0.22); } }
@media (max-width: 430px) { .fx-urgent-banner__msg { display: none; } }
@media (prefers-reduced-motion: reduce) {
.fx-task { animation: none !important; }
.fx-tcol--proceso .fx-tcol__dot { animation: none !important; }
.fx-urgent-banner { animation: fxUrgentIn 1ms both; }
}
/* =====================================================================
v4.8 — Cabecera que se encoge al hacer scroll (REUTILIZABLE)
Patrón base de FluxImp para que el bloque de cabecera (título +
acciones + KPIs + tabs) NO se coma media pantalla en móvil. Al hacer
scroll, la barra se vuelve sticky compacta y pliega lo accesorio,
liberando alto para el contenido real.
Uso:
1. Contenedor sticky: ...
2. Lo que debe plegarse al bajar (subtítulos, KPIs, hints, banners
de ayuda) lleva además .fx-shrinkbar__collapsible
3. JS: en el onscroll del contenedor scrolleable, alterna .is-shrunk
con histéresis:
if (y > 48) bar.classList.add('is-shrunk');
else if (y < 14) bar.classList.remove('is-shrunk');
Las acciones principales (ej. "Nueva tarea") y la navegación se dejan
FUERA del collapsible para que sigan siempre a la mano.
===================================================================== */
.fx-shrinkbar {
position: sticky; top: 0; z-index: 30;
transition: padding var(--fx-dur-base) var(--fx-ease-out),
background var(--fx-dur-base) var(--fx-ease-out),
box-shadow var(--fx-dur-base) var(--fx-ease-out);
}
.fx-shrinkbar.is-shrunk {
background: rgba(15, 19, 33, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--fx-hairline);
box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Lo accesorio que se pliega al encoger. max-height generoso para que
no recorte; si tu bloque es más alto, súbelo puntualmente. */
.fx-shrinkbar__collapsible {
overflow: hidden;
max-height: 240px; opacity: 1;
transition: max-height var(--fx-dur-slow) var(--fx-ease-out),
opacity var(--fx-dur-fast) var(--fx-ease-out),
margin var(--fx-dur-base) var(--fx-ease-out),
transform var(--fx-dur-base) var(--fx-ease-out);
}
.fx-shrinkbar.is-shrunk .fx-shrinkbar__collapsible {
max-height: 0 !important;
opacity: 0;
margin-top: 0 !important;
transform: translateY(-6px);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.fx-shrinkbar, .fx-shrinkbar__collapsible { transition: none; }
}
/* ---------- Stat pill: resumen compacto en una tira (bajo alto) ---------- */
/* Alternativa esbelta a un fx-kpi-tile cuando el alto importa (cabeceras
móviles). Una píldora con ícono + número + etiqueta, ~30px de alto. */
.fx-statpill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: 12px; font-weight: 600; white-space: nowrap;
background: var(--fx-glass-bg); border: 1px solid var(--fx-hairline);
color: rgb(var(--fx-text-muted));
transition: border-color var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-statpill b { font-size: 14px; font-weight: 800; color: rgb(var(--fx-text)); }
.fx-statpill i { font-size: 14px; }
.fx-statpill--primary { color: rgb(var(--fx-primary-soft)); border-color: rgb(var(--fx-primary) / 0.28); background: rgb(var(--fx-primary) / 0.08); }
.fx-statpill--primary b { color: rgb(var(--fx-primary-soft)); }
.fx-statpill--attention { color: rgb(var(--fx-attention-soft)); border-color: rgb(var(--fx-attention) / 0.30); background: rgb(var(--fx-attention) / 0.10); }
.fx-statpill--attention b { color: rgb(var(--fx-attention-soft)); }
.fx-statpill--muted { color: rgb(var(--fx-text-dim)); border-color: var(--fx-hairline); background: rgb(var(--fx-bg-0) / 0.4); }
.fx-statpill--muted b { color: rgb(var(--fx-text-muted)); }
.fx-statpill.is-hot { animation: fxAttentionPulse 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fx-statpill.is-hot { animation: none; } }
/* ============================================================================
Switch — control segmentado deslizante (el switch oficial de FluxImp)
----------------------------------------------------------------------------
Para elegir UNA opción entre 2..6 (moneda Divisas/BCV, cambio de vista,
período, etc.). Un "pulgar" se desliza bajo la opción activa.
Uso:
(2 opciones por defecto)
- Tono del pulgar con data-tone: "success" (emerald, por defecto) ·
"primary" (indigo) · "attention" (amber).
- Para 3+ opciones: añade style="--fx-switch-n:3" (el nº de botones).
- El JS solo tiene que poner/quitar la clase .is-active en el .fx-switch__opt
activo; el pulgar lo sigue solo (vía :has). No hace falta tocar data-pos.
- Variantes de tamaño: .fx-switch--sm (compacto, p.ej. $/Bs) ·
.fx-switch--compact (texto pequeño para 4-6 opciones).
========================================================================== */
.fx-switch {
position: relative;
display: grid;
grid-template-columns: repeat(var(--fx-switch-n, 2), minmax(0, 1fr));
padding: 5px;
background: rgb(var(--fx-bg-0) / 0.6); /* tokenizado: idéntico en oscuro, correcto en claro */
border: 1px solid var(--fx-hairline-strong);
border-radius: var(--fx-r-md);
isolation: isolate;
}
.fx-switch__thumb {
position: absolute; top: 5px; bottom: 5px; left: 5px;
width: calc((100% - 10px) / var(--fx-switch-n, 2));
border-radius: 10px; z-index: 0;
background: linear-gradient(135deg, rgb(var(--fx-success)), rgb(var(--fx-success) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-success) / 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
background 0.3s var(--fx-ease-out), box-shadow 0.3s var(--fx-ease-out);
}
/* El pulgar sigue a la opción activa — sin bookkeeping de posición en JS. */
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(1).is-active) .fx-switch__thumb { transform: translateX(0); }
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(2).is-active) .fx-switch__thumb { transform: translateX(100%); }
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(3).is-active) .fx-switch__thumb { transform: translateX(200%); }
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(4).is-active) .fx-switch__thumb { transform: translateX(300%); }
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(5).is-active) .fx-switch__thumb { transform: translateX(400%); }
.fx-switch:not(.fx-switch--auto):has(.fx-switch__opt:nth-of-type(6).is-active) .fx-switch__thumb { transform: translateX(500%); }
/* Tonos del pulgar */
.fx-switch[data-tone="primary"] .fx-switch__thumb {
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-primary) / 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.fx-switch[data-tone="attention"] .fx-switch__thumb {
background: linear-gradient(135deg, rgb(var(--fx-attention)), rgb(var(--fx-attention) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-attention) / 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.fx-switch__opt {
position: relative; z-index: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 8px; font-size: 13px; font-weight: 700; line-height: 1;
border: none; background: transparent; cursor: pointer; border-radius: 10px;
color: rgb(var(--fx-text-muted)); white-space: nowrap;
transition: color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-switch__opt i { font-size: 16px; }
.fx-switch__opt.is-active { color: #fff; }
.fx-switch__opt:not(.is-active):hover { color: rgb(var(--fx-text)); }
.fx-switch__opt:active { transform: scale(0.96); }
/* Compacto: texto pequeño para switches de 4-6 opciones (p.ej. período) */
.fx-switch--compact .fx-switch__opt { padding: 8px 6px; font-size: 11px; letter-spacing: 0.02em; gap: 5px; }
.fx-switch--compact .fx-switch__opt i { font-size: 13px; }
/* Pequeño: toggle en línea de 2 opciones cortas (p.ej. $/Bs) */
.fx-switch--sm { display: inline-grid; padding: 3px; }
.fx-switch--sm .fx-switch__thumb { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--fx-switch-n, 2)); border-radius: 8px; }
.fx-switch--sm .fx-switch__opt { padding: 5px 14px; font-size: 11px; border-radius: 8px; gap: 5px; }
.fx-switch--sm .fx-switch__opt i { font-size: 13px; }
/* Mini: segmentado pequeño que CONSERVA el pulgar deslizante (la animación
firma de FluxImp). Pensado para SUBfiltros: más bajo y fino que el de pestañas,
y full-width (grid) para que nunca desborde en móvil. */
.fx-switch--mini { padding: 4px; border-radius: 12px; }
.fx-switch--mini .fx-switch__thumb {
top: 4px; bottom: 4px; left: 4px;
width: calc((100% - 8px) / var(--fx-switch-n, 2)); border-radius: 9px;
}
.fx-switch--mini .fx-switch__opt {
padding: 6px 6px; font-size: clamp(10px, 2.6vw, 12px); gap: 5px; border-radius: 9px;
}
.fx-switch--mini .fx-switch__opt i { font-size: 13px; }
/* ----------------------------------------------------------------------------
Variante ROW — una sola fila a ancho completo con anchos FLEXIBLES: las
etiquetas largas ('Trimestre','Semestre') ocupan lo que necesitan y las cortas
('Mes','Año') menos, de modo que 5-6 opciones caben legibles en línea también
en móvil (igual que en escritorio). Pensada para el filtro de período. Sin
pulgar deslizante (los anchos son desiguales): la opción activa se rellena
directamente con el tono de la barra. La tipografía se ajusta al viewport con
clamp(): ~9px en móvil, hasta 12px en pantallas amplias.
-------------------------------------------------------------------------- */
.fx-switch--row { display: flex; gap: 4px; }
.fx-switch--row .fx-switch__thumb { display: none; }
.fx-switch--row .fx-switch__opt {
flex: 1 1 auto; min-width: 0;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out),
box-shadow var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
/* Opción activa: mismo lenguaje visual que el pulgar, pero pintada en el botón. */
.fx-switch--row .fx-switch__opt.is-active {
color: #fff;
background: linear-gradient(135deg, rgb(var(--fx-success)), rgb(var(--fx-success) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-success) / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fx-switch--row[data-tone="primary"] .fx-switch__opt.is-active {
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-primary) / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fx-switch--row[data-tone="attention"] .fx-switch__opt.is-active {
background: linear-gradient(135deg, rgb(var(--fx-attention)), rgb(var(--fx-attention) / 0.72));
box-shadow: 0 6px 16px rgb(var(--fx-attention) / 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Modificador para el filtro de período (5-6 opciones largas tipo Trimestre/
Semestre): tipografía que se ajusta al ancho con clamp() para caber en una
sola fila también en móvil (~9px) y crecer hasta 12px en pantallas amplias. */
.fx-switch--period .fx-switch__opt { font-size: clamp(9px, 2.4vw, 12px); padding: 9px 5px; letter-spacing: -0.1px; }
/* Badge/contador dentro de una opción (p.ej. "Envíos 3"). */
.fx-switch__badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 17px; padding: 0 5px; margin-left: 2px;
border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1;
background: rgba(148, 163, 184, 0.18); color: rgb(var(--fx-text-muted));
transition: background var(--fx-dur-fast) var(--fx-ease-out), color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-switch__opt.is-active .fx-switch__badge { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* Badge "alerta" (rojo) para avisos que no deben pasarse por alto */
.fx-switch__badge--alert { background: #ef4444; color: #fff; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5); }
.fx-switch__opt.is-active .fx-switch__badge--alert { background: #fff; color: #ef4444; }
/* ----------------------------------------------------------------------------
Variante AUTO — opciones de ancho según su contenido, con scroll horizontal.
Para barras con muchas pestañas o etiquetas largas (no caben en columnas
iguales). El pulgar se posiciona por JS (var --fx-sw-x / --fx-sw-w); el
ayudante global lo mantiene alineado (ver assets/js/fx-switch.js).
-------------------------------------------------------------------------- */
.fx-switch--auto {
display: flex; width: max-content; max-width: 100%;
overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.fx-switch--auto::-webkit-scrollbar { display: none; }
.fx-switch--auto .fx-switch__opt { flex: 0 0 auto; }
.fx-switch--auto .fx-switch__thumb {
left: 0; width: var(--fx-sw-w, 0px);
transform: translateX(var(--fx-sw-x, 0px));
}
/* Mientras el JS no haya medido aún, no mostramos un pulgar de ancho 0. */
.fx-switch--auto:not(.is-ready) .fx-switch__thumb { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fx-switch__thumb { transition: none; } }
/* ============================================================================
Toggle — interruptor encendido/apagado (booleano)
----------------------------------------------------------------------------
Para activar/desactivar UNA cosa (IA activa, modo campaña…). Es un checkbox
accesible disfrazado de interruptor.
Uso:
- Tono encendido con data-tone: "success" (emerald, por defecto) ·
"primary" (indigo) · "attention" (amber).
- .fx-toggle--sm para la versión chica (cabeceras compactas).
========================================================================== */
.fx-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.fx-toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.fx-toggle__track {
position: relative; display: block;
width: 44px; height: 26px; border-radius: 999px;
background: rgb(var(--fx-bg-0) / 0.85);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), inset 0 0 0 1px var(--fx-hairline-strong);
transition: background 0.3s var(--fx-ease-out), box-shadow 0.3s var(--fx-ease-out);
}
.fx-toggle__track::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 999px;
background: rgb(var(--fx-text-muted));
box-shadow: 0 2px 6px rgba(0,0,0,0.45);
transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s var(--fx-ease-out);
}
.fx-toggle input:checked + .fx-toggle__track {
background: linear-gradient(135deg, rgb(var(--fx-success)), rgb(var(--fx-success) / 0.72));
box-shadow: 0 4px 14px rgb(var(--fx-success) / 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.fx-toggle input:checked + .fx-toggle__track::after { transform: translateX(18px); background: #fff; }
.fx-toggle input:focus-visible + .fx-toggle__track { outline: 2px solid rgb(var(--fx-primary)); outline-offset: 2px; }
.fx-toggle input:disabled + .fx-toggle__track { opacity: 0.5; cursor: not-allowed; }
/* Tonos encendido */
.fx-toggle[data-tone="primary"] input:checked + .fx-toggle__track {
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary) / 0.72));
box-shadow: 0 4px 14px rgb(var(--fx-primary) / 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
.fx-toggle[data-tone="attention"] input:checked + .fx-toggle__track {
background: linear-gradient(135deg, rgb(var(--fx-attention)), rgb(var(--fx-attention) / 0.72));
box-shadow: 0 4px 14px rgb(var(--fx-attention) / 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Pequeño */
.fx-toggle--sm .fx-toggle__track { width: 34px; height: 18px; }
.fx-toggle--sm .fx-toggle__track::after { width: 12px; height: 12px; top: 3px; left: 3px; }
.fx-toggle--sm input:checked + .fx-toggle__track::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .fx-toggle__track, .fx-toggle__track::after { transition: none; } }
/* =====================================================================
v4.9 — Sistema de Navegación (App-bar · Sidebar/Drawer · Bottom-nav)
Una sola identidad: vidrio oscuro, acento indigo, easings firmados.
Sustituye el azul Tailwind + arcoíris de íconos del banner/sidebar viejos.
===================================================================== */
/* ---------- 1. App-bar (banner superior) ---------- */
.fx-appbar{
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: var(--fx-s-3);
padding: 10px clamp(12px, 3vw, 28px);
padding-top: max(10px, env(safe-area-inset-top));
background: linear-gradient(180deg, rgb(var(--fx-bg-0) / 0.90), rgb(var(--fx-bg-0) / 0.62));
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border-bottom: 1px solid var(--fx-hairline);
box-shadow: 0 6px 26px rgba(0,0,0,0.30);
}
.fx-appbar__group{ display: flex; align-items: center; gap: var(--fx-s-3); min-width: 0; }
.fx-appbar__group--right{ margin-left: auto; gap: var(--fx-s-2); }
/* Botón redondo de icono (hamburguesa, notif, config, salir) */
.fx-iconbtn{
position: relative; flex: 0 0 auto;
width: 40px; height: 40px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
color: rgb(var(--fx-text-muted));
background: rgb(var(--fx-text) / 0.05);
border: 1px solid var(--fx-hairline);
font-size: 20px; cursor: pointer;
transition: color var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-iconbtn:hover{ color: rgb(var(--fx-primary-soft)); background: rgb(var(--fx-primary) / 0.13); border-color: rgb(var(--fx-primary) / 0.30); }
.fx-iconbtn:active{ transform: scale(0.92); }
.fx-iconbtn--round{ border-radius: 999px; }
.fx-iconbtn--danger:hover{ color: rgb(var(--fx-danger-soft)); background: rgb(var(--fx-danger) / 0.13); border-color: rgb(var(--fx-danger) / 0.30); }
/* Logo del negocio en el app-bar */
.fx-appbar__logo{
width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: rgb(var(--fx-primary) / 0.12);
border: 1px solid rgb(var(--fx-primary) / 0.22);
color: rgb(var(--fx-primary-soft)); font-size: 22px;
}
.fx-appbar__logo img{ width: 100%; height: 100%; object-fit: cover; }
.fx-appbar__titles{ min-width: 0; }
.fx-appbar__name{
font-size: clamp(15px, 4.2vw, 20px); font-weight: 700; letter-spacing: -0.02em;
color: rgb(var(--fx-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-appbar__sub{
display: flex; align-items: center; gap: 6px; margin-top: 1px;
font-size: 11px; font-weight: 600; color: rgb(var(--fx-text-muted));
}
.fx-appbar__dot{
width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto;
background: rgb(var(--fx-success-soft)); box-shadow: 0 0 8px rgb(var(--fx-success) / 0.6);
}
/* Badge de conteo (notif / alertas) — ámbar = "merece tu atención" */
.fx-count-badge{
position: absolute; top: -5px; right: -5px;
min-width: 18px; height: 18px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; color: #1a1206;
border-radius: 999px; background: rgb(var(--fx-attention));
border: 2px solid rgb(var(--fx-bg-0));
box-shadow: 0 0 10px rgb(var(--fx-attention) / 0.55);
}
/* Bloque de usuario (escritorio) */
.fx-userchip{
display: flex; align-items: center; gap: 10px;
padding: 5px 6px; border-radius: 14px; text-decoration: none;
border: 1px solid transparent;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-userchip:hover{ background: rgb(var(--fx-text) / 0.05); border-color: var(--fx-hairline); }
.fx-userchip__meta{ text-align: right; line-height: 1.15; }
.fx-userchip__name{ font-size: 13px; font-weight: 700; color: rgb(var(--fx-text)); }
.fx-userchip__role{ font-size: 10px; font-weight: 600; color: rgb(var(--fx-text-muted)); }
.fx-avatar{
width: 38px; height: 38px; border-radius: 999px; overflow: hidden; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff;
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary-deep)));
border: 1px solid rgb(var(--fx-primary) / 0.4);
box-shadow: 0 0 14px rgb(var(--fx-primary) / 0.32);
}
.fx-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.fx-appbar__divider{ width: 1px; height: 24px; background: var(--fx-hairline); margin: 0 2px; }
/* ---------- 2. Sidebar / Drawer ---------- */
.fx-nav-overlay{
position: fixed; inset: 0; z-index: 45;
background: rgb(var(--fx-bg-0) / 0.78);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; transition: opacity var(--fx-dur-base) var(--fx-ease-out);
}
.fx-nav-overlay.is-on{ opacity: 1; }
.fx-sidebar{
position: fixed; inset-block: 0; left: 0; z-index: 50;
width: 264px; max-width: 84vw; height: 100%;
display: flex; flex-direction: column;
background: linear-gradient(180deg, rgb(var(--fx-bg-1) / 0.94), rgb(var(--fx-bg-0) / 0.96));
backdrop-filter: blur(14px) saturate(115%);
-webkit-backdrop-filter: blur(14px) saturate(115%);
border-right: 1px solid var(--fx-hairline);
box-shadow: 10px 0 44px rgba(0,0,0,0.50);
transform: translateX(-100%);
transition: transform var(--fx-dur-slow) var(--fx-ease-drawer);
}
.fx-sidebar.is-open{ transform: translateX(0); }
@media (min-width: 1024px){
.fx-sidebar{ position: static; transform: none; max-width: none; box-shadow: none; height: 100%; }
.fx-nav-overlay{ display: none; }
}
.fx-sidebar__head{
display: flex; align-items: center; justify-content: space-between;
padding: max(20px, env(safe-area-inset-top)) 18px 0;
}
.fx-brand{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-brand__mark{
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px;
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px;
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary-deep)));
border: 1px solid rgb(var(--fx-primary) / 0.4);
box-shadow: 0 4px 16px rgb(var(--fx-primary) / 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.fx-brand__name{ font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--fx-text)); }
.fx-sidebar__close{
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px;
color: rgb(var(--fx-text-muted)); background: rgb(var(--fx-text) / 0.05); border: 1px solid var(--fx-hairline);
transition: color var(--fx-dur-fast) var(--fx-ease-out), background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-sidebar__close:hover{ color: rgb(var(--fx-text)); background: rgb(var(--fx-text) / 0.10); }
@media (min-width: 1024px){ .fx-sidebar__close{ display: none; } }
/* Perfil del usuario al pie del sidebar (acceso a "Mi cuenta", incl. móvil). */
.fx-sidebar__user{
flex: 0 0 auto;
display: flex; align-items: center; gap: 11px;
margin: 10px 12px calc(14px + env(safe-area-inset-bottom));
padding: 9px 11px; border-radius: 14px; text-decoration: none;
border: 1px solid var(--fx-hairline);
background: rgb(var(--fx-text) / 0.04);
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-sidebar__user:hover{ background: rgb(var(--fx-text) / 0.07); border-color: var(--fx-hairline-strong); }
.fx-sidebar__user:active{ transform: scale(.985); }
.fx-sidebar__user-meta{ min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.fx-sidebar__user-name{ font-size: 14px; font-weight: 700; color: rgb(var(--fx-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-sidebar__user-sub{ font-size: 11px; color: rgb(var(--fx-text-dim)); margin-top: 1px; }
.fx-sidebar__user-chev{ flex: 0 0 auto; font-size: 15px; color: rgb(var(--fx-text-dim)); }
.fx-role{
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
margin: 12px 18px 0; padding: 4px 11px; border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
color: rgb(var(--fx-primary-soft));
background: rgb(var(--fx-primary) / 0.12);
border: 1px solid rgb(var(--fx-primary) / 0.22);
}
.fx-role > i{ font-size: 13px; }
/* ---- Selector de negocio profesional (con logos) ---- */
.fx-bizpicker{ position: relative; margin: 14px 16px 0; }
.fx-bizpicker__trigger{
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--fx-r-md); cursor: pointer;
background: rgb(var(--fx-text) / 0.05); border: 1px solid var(--fx-hairline);
transition: background var(--fx-dur-fast) var(--fx-ease-out), border-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-bizpicker__trigger:hover{ background: rgb(var(--fx-text) / 0.08); border-color: var(--fx-hairline-strong); }
.fx-bizpicker.is-open .fx-bizpicker__trigger{ border-color: rgb(var(--fx-primary) / 0.5); box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.15); }
.fx-bizpicker__logo{
width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: rgb(var(--fx-primary-soft));
background: rgb(var(--fx-primary) / 0.15); border: 1px solid rgb(var(--fx-primary) / 0.20);
}
.fx-bizpicker__logo img{ width: 100%; height: 100%; object-fit: cover; }
.fx-bizpicker__name{
flex: 1; min-width: 0; text-align: left; font-size: 13px; font-weight: 600;
color: rgb(var(--fx-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-bizpicker__chev{ flex: 0 0 auto; color: rgb(var(--fx-text-muted)); font-size: 15px; transition: transform var(--fx-dur-fast) var(--fx-ease-out); }
.fx-bizpicker.is-open .fx-bizpicker__chev{ transform: rotate(180deg); color: rgb(var(--fx-primary-soft)); }
.fx-bizpicker__menu{
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
padding: 6px; border-radius: var(--fx-r-md);
background: rgb(var(--fx-bg-2)); border: 1px solid var(--fx-hairline-strong);
box-shadow: var(--fx-shadow-3);
max-height: 300px; overflow-y: auto;
opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
transition: opacity var(--fx-dur-fast) var(--fx-ease-out), transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-bizpicker.is-open .fx-bizpicker__menu{ opacity: 1; transform: none; pointer-events: auto; }
.fx-bizpicker__opt{
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 10px; cursor: pointer; text-align: left;
background: none; border: none; color: rgb(var(--fx-text-muted));
transition: background var(--fx-dur-fast) var(--fx-ease-out), color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-bizpicker__opt:hover{ background: rgb(var(--fx-text) / 0.06); color: rgb(var(--fx-text)); }
.fx-bizpicker__opt.is-active{ background: rgb(var(--fx-primary) / 0.14); color: rgb(var(--fx-text)); }
.fx-bizpicker__opt .fx-bizpicker__name{ font-weight: 600; }
.fx-bizpicker__opt .fx-bizpicker__check{ flex: 0 0 auto; color: rgb(var(--fx-primary-soft)); font-size: 16px; opacity: 0; }
.fx-bizpicker__opt.is-active .fx-bizpicker__check{ opacity: 1; }
.fx-biz{ position: relative; margin: 14px 16px 0; }
.fx-biz__icon{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--fx-primary-soft)); font-size: 17px; pointer-events: none; }
.fx-biz__chev{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgb(var(--fx-text-muted)); pointer-events: none; }
.fx-biz select{
width: 100%; appearance: none; -webkit-appearance: none;
padding: 12px 38px; border-radius: var(--fx-r-md);
font-size: 13px; font-weight: 600; color: rgb(var(--fx-text)); cursor: pointer;
background: rgb(var(--fx-text) / 0.05); border: 1px solid var(--fx-hairline);
transition: border-color var(--fx-dur-fast) var(--fx-ease-out), background var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-biz select:hover{ background: rgb(var(--fx-text) / 0.08); }
.fx-biz select:focus{ outline: none; border-color: rgb(var(--fx-primary) / 0.5); box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.15); }
.fx-biz select option{ background: #141a26; color: rgb(var(--fx-text)); }
.fx-biz-add{
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 10px 16px 0; height: 42px; border-radius: var(--fx-r-md);
font-size: 12px; font-weight: 700; cursor: pointer;
color: rgb(var(--fx-primary-soft));
background: rgb(var(--fx-primary) / 0.10); border: 1px solid rgb(var(--fx-primary) / 0.22);
transition: color var(--fx-dur-fast) var(--fx-ease-out), background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out), box-shadow var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-biz-add:hover{ color: #fff; background: rgb(var(--fx-primary)); border-color: rgb(var(--fx-primary)); box-shadow: 0 6px 18px rgb(var(--fx-primary) / 0.4); }
.fx-nav{
flex: 1; overflow-y: auto;
padding: 16px 12px calc(18px + env(safe-area-inset-bottom));
margin-top: 14px; border-top: 1px solid var(--fx-hairline);
display: flex; flex-direction: column; gap: 3px;
}
.fx-nav-label{
padding: 0 12px; margin: 16px 0 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: rgb(var(--fx-text-dim));
}
.fx-nav-label:first-child{ margin-top: 2px; }
.fx-navlink{
position: relative; display: flex; align-items: center; gap: 12px;
padding: 11px 14px; border-radius: var(--fx-r-md);
color: rgb(var(--fx-text-muted)); text-decoration: none; border: 1px solid transparent;
transition: color var(--fx-dur-fast) var(--fx-ease-out),
background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-navlink > i{ font-size: 20px; flex: 0 0 auto; transition: color var(--fx-dur-fast) var(--fx-ease-out); }
.fx-navlink > span{ font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.fx-navlink:hover{ color: rgb(var(--fx-text)); background: rgb(var(--fx-text) / 0.05); border-color: var(--fx-hairline); }
.fx-navlink:hover > i{ color: rgb(var(--fx-primary-soft)); }
.fx-navlink.is-active{
color: rgb(var(--fx-text)); font-weight: 700;
background: linear-gradient(90deg, rgb(var(--fx-primary) / 0.22), rgb(var(--fx-primary) / 0.06));
border-color: rgb(var(--fx-primary) / 0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgb(var(--fx-primary) / 0.18);
}
.fx-navlink.is-active > i{ color: rgb(var(--fx-primary-soft)); }
.fx-navlink.is-active > span{ font-weight: 700; }
.fx-navlink.is-active::before{
content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 4px; height: 22px; border-radius: 0 999px 999px 0;
background: rgb(var(--fx-primary)); box-shadow: 0 0 12px rgb(var(--fx-primary) / 0.7);
}
/* Badge de tareas (ámbar = atención) */
.fx-nav-badge{
margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; color: #1a1206; border-radius: 999px;
background: rgb(var(--fx-attention)); box-shadow: 0 0 10px rgb(var(--fx-attention) / 0.5);
}
/* Cascada de entrada de los items del menú.
SOLO se ejecuta cuando el drawer se ABRE en móvil (.fx-sidebar.is-open).
En escritorio el sidebar es persistente → items siempre visibles, sin
re-animar en cada carga de página (evita el "spaciado raro" al navegar). */
@keyframes fxNavIn{ from{ opacity: 0; transform: translateX(-10px); } to{ opacity: 1; transform: translateX(0); } }
.fx-nav > *{ opacity: 1; }
.fx-sidebar.is-open .fx-nav > *{ opacity: 0; animation: fxNavIn var(--fx-dur-enter) var(--fx-ease-out) forwards; }
.fx-sidebar.is-open .fx-nav > *:nth-child(1){ animation-delay: 0.04s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(2){ animation-delay: 0.08s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(3){ animation-delay: 0.12s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(4){ animation-delay: 0.16s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(5){ animation-delay: 0.20s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(6){ animation-delay: 0.24s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(7){ animation-delay: 0.28s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(8){ animation-delay: 0.32s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(9){ animation-delay: 0.36s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(10){ animation-delay: 0.40s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(11){ animation-delay: 0.44s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(12){ animation-delay: 0.48s; }
.fx-sidebar.is-open .fx-nav > *:nth-child(n+13){ animation-delay: 0.52s; }
/* ---------- 3. Bottom-nav (barra inferior · solo móvil/tablet) ---------- */
.fx-botnav{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
display: flex; align-items: flex-end;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgb(var(--fx-bg-1) / 0.86), rgb(var(--fx-bg-0) / 0.97));
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-top: 1px solid var(--fx-hairline);
box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
}
@media (min-width: 1024px){ .fx-botnav{ display: none; } }
.fx-botnav__item{
position: relative; flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 2px; border-radius: 14px; text-decoration: none; cursor: pointer;
color: rgb(var(--fx-text-muted)); background: none; border: none; font-family: inherit;
transition: color var(--fx-dur-fast) var(--fx-ease-out), transform var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-botnav__item > i{ font-size: 22px; line-height: 1; }
.fx-botnav__item > span{ font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
.fx-botnav__item:active{ transform: scale(0.90); }
.fx-botnav__item.is-active{ color: rgb(var(--fx-primary-soft)); }
.fx-botnav__item.is-active > i{ filter: drop-shadow(0 0 8px rgb(var(--fx-primary) / 0.55)); }
.fx-botnav__item.is-active::after{
content: ""; position: absolute; top: 0; width: 18px; height: 3px; border-radius: 999px;
background: rgb(var(--fx-primary)); box-shadow: 0 0 10px rgb(var(--fx-primary) / 0.7);
}
/* Botón central elevado "Vender" (estilo app nativa) */
.fx-botnav__item--accent > i{
width: 48px; height: 48px; margin-top: -22px; border-radius: 16px;
display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary-deep)));
border: 1px solid rgb(var(--fx-primary) / 0.5);
box-shadow: 0 8px 22px rgb(var(--fx-primary) / 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
transition: transform var(--fx-dur-fast) var(--fx-ease-out), box-shadow var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-botnav__item--accent{ color: rgb(var(--fx-text)); }
.fx-botnav__item--accent:active > i{ transform: scale(0.94); }
.fx-botnav__item--accent.is-active{ color: rgb(var(--fx-primary-soft)); }
.fx-botnav__item--accent.is-active > i{ filter: none; }
.fx-botnav__item--accent.is-active::after{ display: none; }
/* Deja aire al final del contenido para que la barra no tape nada */
@media (max-width: 1023px){
body:has(.fx-botnav) main{ padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}
/* En "Vender" (ventas.html), el botón flotante del carrito debe quedar SOBRE la
barra inferior, no encima de sus botones. */
#fabCarrito{ bottom: calc(82px + env(safe-area-inset-bottom)); }
/* ---------- 4. Filtros rápidos de Inventario (móvil) ----------
Agotándose / Top ventas / Estancados bajo la barra de búsqueda, cada uno
con su color identificativo. Solo < md (en md+ ya están en el switch). */
.fx-invfilters{ display: flex; gap: 8px; margin: 12px 0 14px; }
@media (min-width: 768px){ .fx-invfilters{ display: none; } }
.fx-invchip{
flex: 1 1 0; min-width: 0; position: relative;
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
padding: 7px 8px; border-radius: var(--fx-r-md); cursor: pointer;
background: rgb(var(--fx-text) / 0.04); border: 1px solid var(--fx-hairline);
color: rgb(var(--fx-text-muted)); font-family: inherit;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-invchip:hover{ border-color: var(--fx-hairline-strong); color: rgb(var(--fx-text)); }
.fx-invchip:active{ transform: scale(0.97); }
.fx-invchip > i{ font-size: 16px; line-height: 1; flex: 0 0 auto; }
.fx-invchip > span{ font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-invchip__badge{
position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 800; border-radius: 999px;
border: 2px solid rgb(var(--fx-bg-0));
}
/* Color identificativo SIEMPRE visible (ícono); el relleno aparece al activar */
.fx-invchip--attention > i{ color: rgb(var(--fx-attention-soft)); }
.fx-invchip--attention.is-active{ background: rgb(var(--fx-attention) / 0.14); border-color: rgb(var(--fx-attention) / 0.45); color: rgb(var(--fx-attention-soft)); }
.fx-invchip--attention .fx-invchip__badge{ background: rgb(var(--fx-attention)); color: #1a1206; }
.fx-invchip--success > i{ color: rgb(var(--fx-success-soft)); }
.fx-invchip--success.is-active{ background: rgb(var(--fx-success) / 0.14); border-color: rgb(var(--fx-success) / 0.45); color: rgb(var(--fx-success-soft)); }
.fx-invchip--success .fx-invchip__badge{ background: rgb(var(--fx-success)); color: #04140d; }
.fx-invchip--primary > i{ color: rgb(var(--fx-primary-soft)); }
.fx-invchip--primary.is-active{ background: rgb(var(--fx-primary) / 0.16); border-color: rgb(var(--fx-primary) / 0.5); color: rgb(var(--fx-primary-soft)); }
.fx-invchip--primary .fx-invchip__badge{ background: rgb(var(--fx-primary)); color: #fff; }
/* Color identificativo en los íconos del switch de sub-pestañas de inventario.
En el switch visible en móvil (Bodega/En camino/Defectuosos) quedan 3 colores
distintos: indigo / ámbar / rose. */
#subtab-bodega > i,
#subtab-estancados > i{ color: rgb(var(--fx-primary-soft)); }
#subtab-transito > i,
#subtab-agotarse > i{ color: rgb(var(--fx-attention-soft)); }
#subtab-top > i{ color: rgb(var(--fx-success-soft)); }
#subtab-defectuosos > i{ color: rgb(var(--fx-danger-soft)); }
/* Cuando la pestaña está activa, el ícono pasa a blanco para contrastar con el thumb */
#subtabBar .fx-switch__opt.is-active > i{ color: #fff; }
@media (prefers-reduced-motion: reduce){
.fx-nav > *{ animation: none !important; opacity: 1 !important; }
.fx-sidebar, .fx-nav-overlay, .fx-navlink{ transition: none !important; }
}
/* =====================================================================
v5.3 — CATALOGO PUBLICO / VITRINA
Dos zonas:
1) Gestor dentro de la app (.cat-*): tarjetas de catalogo + selector de
productos. Reutiliza el material de vidrio y los tokens.
2) Pagina publica (.cx-*): standalone, sin menu. Toma el color elegido por
el dueno desde --cx-accent (triple RGB). 5 plantillas conmutables.
===================================================================== */
/* ---------- Gestor: tarjeta de catalogo ---------- */
.cat-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1280px){ .cat-grid{ grid-template-columns:1fr 1fr 1fr; } }
.cat-card{
background:var(--fx-glass-bg); backdrop-filter:blur(var(--fx-glass-blur));
-webkit-backdrop-filter:blur(var(--fx-glass-blur));
border:1px solid var(--fx-hairline); border-radius:var(--fx-r-xl);
padding:16px; display:flex; flex-direction:column; gap:13px;
position:relative; overflow:hidden;
transition:transform .22s var(--fx-ease-out), border-color .22s var(--fx-ease-out);
}
.cat-card:hover{ transform:translateY(-2px); border-color:var(--fx-hairline-strong); }
.cat-card__accent{ position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, rgb(var(--cat-c, var(--fx-primary))), rgb(var(--cat-c, var(--fx-primary)) / .25)); }
.cat-card__top{ display:flex; align-items:flex-start; gap:12px; }
.cat-card__thumb{ width:46px; height:46px; border-radius:13px; flex-shrink:0; display:grid; place-items:center;
font-size:22px; background:rgb(var(--cat-c, var(--fx-primary)) / .14); color:rgb(var(--cat-c, var(--fx-primary-soft))); }
.cat-card__name{ font-weight:800; color:rgb(var(--fx-text)); font-size:16px; letter-spacing:-.01em; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-card__sub{ font-size:12px; color:rgb(var(--fx-text-muted)); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cat-card__stats{ display:flex; gap:10px; border-top:1px solid var(--fx-hairline); border-bottom:1px solid var(--fx-hairline); padding:10px 0; }
.cat-card__stat{ flex:1; } .cat-stat-num{ display:block; font-weight:800; color:rgb(var(--fx-text)); font-size:17px; letter-spacing:-.02em; }
.cat-stat-lbl{ display:block; font-size:10.5px; color:rgb(var(--fx-text-dim)); margin-top:1px; text-transform:uppercase; letter-spacing:.04em; }
.cat-card__link{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgb(var(--fx-text-muted));
background:rgb(148 163 184 / .06); border:1px solid var(--fx-hairline); border-radius:var(--fx-r-md); padding:9px 11px; min-width:0; }
.cat-card__link code{ font-family:ui-monospace,monospace; color:rgb(var(--fx-primary-soft)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.cat-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cat-dot--on{ background:rgb(var(--fx-success)); box-shadow:0 0 0 3px rgb(var(--fx-success) / .18); }
.cat-dot--off{ background:rgb(var(--fx-text-dim)); }
/* ---------- Gestor: selector de productos ---------- */
.cat-pick{ display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:var(--fx-r-md);
background:rgb(148 163 184 / .04); border:1px solid var(--fx-hairline);
transition:background .18s var(--fx-ease-out), border-color .18s var(--fx-ease-out); }
/* Seleccionado: mucho más resaltado (color + acento izquierdo + sombra suave) */
.cat-pick.is-on{ background:rgb(var(--fx-primary) / .16); border-color:rgb(var(--fx-primary) / .55);
border-left:3px solid rgb(var(--fx-primary)); box-shadow:0 6px 16px -10px rgb(var(--fx-primary) / .7); }
.cat-pick.is-on .cat-pick__name{ color:rgb(var(--fx-primary-soft)); }
.cat-pick__img{ width:46px; height:46px; border-radius:11px; flex-shrink:0; object-fit:cover;
background:rgb(148 163 184 / .08); display:grid; place-items:center; color:rgb(var(--fx-text-dim)); font-size:20px; }
.cat-pick__body{ min-width:0; flex:1; }
.cat-pick__name{ font-weight:700; color:rgb(var(--fx-text)); font-size:13.5px; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-pick__meta{ font-size:11.5px; color:rgb(var(--fx-text-dim)); margin-top:2px; }
.cat-pick__check{ width:26px; height:26px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
border:1.5px solid var(--fx-hairline-strong); color:transparent; font-size:15px; transition:all .15s var(--fx-ease-out); }
.cat-pick.is-on .cat-pick__check{ background:rgb(var(--fx-primary)); border-color:rgb(var(--fx-primary)); color:#fff; }
/* Producto agrupado: badge con nº de variantes + estado "parcial" (algunas elegidas) */
.cat-pick__badge{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
border-radius:9px; background:rgb(var(--fx-primary) / .16); color:rgb(var(--fx-primary-soft));
font-size:10.5px; font-weight:800; vertical-align:middle; margin-left:2px; }
.cat-pick.is-part{ background:rgb(var(--fx-primary) / .055); border-color:rgb(var(--fx-primary) / .28); }
.cat-pick.is-part .cat-pick__check{ background:transparent; border-color:rgb(var(--fx-primary) / .55); color:rgb(var(--fx-primary-soft)); }
/* Chips de variante dentro de un producto ya elegido (toca para quitar/poner) */
.cat-vchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cat-vchip{ display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px;
border:1.5px solid var(--fx-hairline-strong); background:rgb(148 163 184 / .06);
color:rgb(var(--fx-text-dim)); font-size:11.5px; font-weight:600; cursor:pointer; min-height:30px;
transition:all .15s var(--fx-ease-out); }
.cat-vchip:hover{ border-color:rgb(var(--fx-primary) / .4); color:rgb(var(--fx-text)); }
.cat-vchip.is-on{ background:rgb(var(--fx-primary) / .12); border-color:rgb(var(--fx-primary) / .5);
color:rgb(var(--fx-primary-soft)); }
.cat-vchip:not(.is-on){ opacity:.6; text-decoration:line-through; }
/* Datos del pedido — campos configurables del carrito */
.cat-pcampo{ background:rgb(148 163 184 / .04); border:1px solid var(--fx-hairline); border-radius:14px;
padding:10px 12px; margin-bottom:8px; transition:border-color .18s var(--fx-ease-out), background .18s var(--fx-ease-out); }
.cat-pcampo.is-on{ border-color:rgb(var(--fx-primary) / .28); background:rgb(var(--fx-primary) / .045); }
.cat-pcampo__row{ display:flex; align-items:center; gap:10px; }
.cat-pcampo__ico{ width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
background:rgb(var(--fx-primary) / .12); color:rgb(var(--fx-primary-soft)); font-size:17px; }
.cat-pcampo__name{ flex:1; min-width:0; font-weight:600; color:rgb(var(--fx-text)); font-size:13.5px; }
.cat-pcampo__edit{ flex:1; min-width:0; height:36px; }
.cat-pcampo__req{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
color:rgb(var(--fx-text-dim)); cursor:pointer; white-space:nowrap; user-select:none; }
.cat-pcampo__req input{ accent-color:rgb(var(--fx-attention)); width:15px; height:15px; }
.cat-pcampo__req.is-on{ color:rgb(var(--fx-attention-soft)); }
.cat-pcampo__req input:disabled{ opacity:.4; cursor:not-allowed; }
.cat-pcampo__sub{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--fx-hairline); }
/* Opciones de entrega con tipo (retiro / delivery / agencia) */
.cat-entrega-help{ font-size:11px; color:rgb(var(--fx-text-dim)); margin-bottom:10px; line-height:1.45; }
.cat-entrega-op-card{ position:relative; background:rgb(148 163 184 / .05); border:1px solid var(--fx-hairline);
border-radius:14px; padding:12px; margin-bottom:10px; overflow:hidden;
transition:border-color .18s var(--fx-ease-out), background .18s var(--fx-ease-out), box-shadow .18s var(--fx-ease-out); }
/* Barra de acento a la izquierda según el tipo */
.cat-entrega-op-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgb(var(--cat-ent-rgb)); opacity:.85; }
.cat-entrega-op-card:hover{ border-color:rgb(var(--cat-ent-rgb) / .42); background:rgb(var(--cat-ent-rgb) / .05);
box-shadow:0 4px 16px -10px rgb(var(--cat-ent-rgb) / .5); }
.cat-entrega-op-card{ --cat-ent-rgb:var(--fx-primary); }
.cat-entrega-op-card--tienda{ --cat-ent-rgb:var(--fx-primary); }
.cat-entrega-op-card--delivery{ --cat-ent-rgb:var(--fx-success); }
.cat-entrega-op-card--agencia{ --cat-ent-rgb:var(--fx-attention); }
.cat-entrega-op__head{ display:flex; align-items:center; gap:10px; }
.cat-entrega-ico{ width:40px; height:40px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; font-size:20px;
background:rgb(var(--cat-ent-rgb) / .14); color:rgb(var(--cat-ent-rgb)); }
.cat-entrega-tipo{ flex:1; min-width:0; height:42px; line-height:1.2; font-weight:700; }
.cat-entrega-del{ width:34px; height:34px; flex-shrink:0; border:none; cursor:pointer; border-radius:10px;
background:rgb(148 163 184 / .1); color:rgb(var(--fx-text-dim)); display:grid; place-items:center; font-size:14px;
transition:background .14s var(--fx-ease-out), color .14s var(--fx-ease-out); }
.cat-entrega-del:hover{ background:rgb(var(--fx-danger) / .15); color:rgb(var(--fx-danger)); }
.cat-entrega-op__body{ margin-top:11px; }
.cat-entrega-op__body .fx-input{ height:40px; }
.cat-entrega-extra{ margin-top:10px; }
.cat-entrega-nota{ display:flex; align-items:flex-start; gap:6px; font-size:11px; color:rgb(var(--fx-text-dim)); margin-top:8px; line-height:1.4;
background:rgb(var(--cat-ent-rgb) / .07); border-radius:9px; padding:7px 9px; }
.cat-entrega-nota i{ color:rgb(var(--cat-ent-rgb)); margin-top:1px; flex-shrink:0; }
.fx-label--xs{ font-size:11px; margin-bottom:5px; }
.cat-agencias{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cat-agencia-chip{ display:inline-flex; align-items:center; gap:2px; background:rgb(var(--fx-attention) / .1); border:1px solid rgb(var(--fx-attention) / .28); border-radius:10px; padding:2px 4px 2px 9px; transition:border-color .14s var(--fx-ease-out); }
.cat-agencia-chip:focus-within{ border-color:rgb(var(--fx-attention) / .6); }
.cat-agencia-inp{ border:none; background:transparent; color:rgb(var(--fx-text)); font-size:12px; font-weight:700; width:72px; outline:none; padding:5px 0; }
.cat-agencia-chip button{ width:20px; height:20px; border:none; background:transparent; color:rgb(var(--fx-text-dim)); cursor:pointer; border-radius:6px; display:grid; place-items:center; font-size:11px; flex-shrink:0; }
.cat-agencia-chip button:hover{ background:rgb(var(--fx-danger) / .14); color:rgb(var(--fx-danger)); }
.cat-agencia-add{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 11px; border:1.5px dashed rgb(var(--fx-attention) / .45); border-radius:10px; background:transparent; color:rgb(var(--fx-attention-soft)); font-size:11.5px; font-weight:700; cursor:pointer; transition:background .14s var(--fx-ease-out), border-color .14s var(--fx-ease-out); }
.cat-agencia-add:hover{ border-color:rgb(var(--fx-attention) / .7); background:rgb(var(--fx-attention) / .1); }
.cat-pcampo__lock{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:rgb(var(--fx-primary-soft)); white-space:nowrap; }
@media (max-width:540px){ .cat-pcampo__row{ flex-wrap:wrap; } .cat-pcampo__req{ margin-left:44px; } }
/* Envío gratis — toggle por producto (editor) */
.cat-free-field{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:12px;
border:1px solid var(--fx-hairline); background:rgb(148 163 184 / .04); transition:border-color .18s var(--fx-ease-out), background .18s var(--fx-ease-out); }
.cat-free-field.is-on{ border-color:rgb(var(--fx-success) / .42); background:rgb(var(--fx-success) / .08); }
.cat-free-field__txt{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:rgb(var(--fx-text)); }
.cat-free-field__txt i{ color:rgb(var(--fx-success)); font-size:16px; }
.cat-free-field__txt .fx-label__hint{ flex-basis:100%; font-weight:500; }
/* Etiqueta "Gratis" en la cabecera de la tarjeta de producto (editor) */
.cat-free-tag{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; letter-spacing:.02em;
color:rgb(var(--fx-success)); background:rgb(var(--fx-success) / .14); border-radius:7px; padding:2px 7px; }
/* Lista de revendedores (modal "Compartir con revendedores") */
.cat-rev-item{ margin-bottom:11px; }
.cat-rev-item:last-child{ margin-bottom:0; }
.cat-rev-item__name{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:rgb(var(--fx-text)); margin-bottom:5px; }
.cat-rev-item__name i{ color:rgb(var(--fx-primary-soft)); }
/* Selector de emojis (contenido del catálogo) */
.cat-flabel-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cat-flabel-row .fx-label{ margin-bottom:0; }
.cat-emoji-btn{ width:30px; height:30px; border-radius:9px; border:1px solid var(--fx-hairline-strong);
background:rgb(148 163 184 / .07); color:rgb(var(--fx-attention-soft)); font-size:16px; cursor:pointer;
display:grid; place-items:center; flex-shrink:0; margin-bottom:6px; }
.cat-emoji-btn:active{ transform:scale(.92); }
.cat-emoji-pop{ position:absolute; z-index:1400; width:236px; max-width:92vw; max-height:264px; overflow-y:auto; background:rgb(var(--fx-bg-1));
border:1px solid var(--fx-hairline-strong); border-radius:14px; padding:8px; display:none;
grid-template-columns:repeat(6,1fr); gap:2px; box-shadow:0 22px 54px -16px rgb(2 4 10 / .6); }
.cat-emoji-pop.is-open{ display:grid; }
.cat-emoji-pop button{ height:34px; border:none; background:transparent; border-radius:8px; font-size:19px; cursor:pointer; line-height:1; }
.cat-emoji-pop button:hover{ background:rgb(148 163 184 / .14); }
/* Item ya en el catalogo (editor de detalle por producto) */
.cat-item{ background:rgb(148 163 184 / .04); border:1px solid var(--fx-hairline); border-radius:16px;
padding:12px; display:flex; flex-direction:column; gap:10px; }
.cat-item__row{ display:flex; gap:11px; align-items:center; }
.cat-item__grip{ color:rgb(var(--fx-text-dim)); cursor:grab; font-size:18px; flex-shrink:0; touch-action:none; }
.cat-item__img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex-shrink:0; background:rgb(148 163 184 / .08); }
.cat-item, .cat-item__row{ min-width:0; }
.cat-item__row > div{ min-width:0; }
.cat-mini-price{ display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.cat-mini-price > .fx-field{ min-width:0; }
.cat-mini-price .fx-input, .cat-item .fx-textarea{ width:100%; min-width:0; }
.cat-card, .cat-card__top > div{ min-width:0; }
/* ===== Producto del catálogo: fila COLAPSABLE (toca para editar) ============
Antes todo el formulario de cada producto salía expandido = aglomerado.
Ahora la fila es compacta; el panel de edición se abre al tocarla. */
.cat-prod-card{ border:1px solid var(--fx-hairline); border-radius:14px; overflow:hidden;
background:rgb(148 163 184 / .03); transition:border-color .15s var(--fx-ease-out); min-width:0; }
.cat-prod-card.is-open{ border-color:rgb(var(--fx-primary) / .35); background:rgb(148 163 184 / .05); }
.cat-prod-card__head{ display:flex; align-items:center; gap:10px; padding:9px 10px; cursor:pointer; min-width:0; }
.cat-prod-card__head:hover{ background:rgb(148 163 184 / .06); }
.cat-prod-card__order{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.cat-ord-btn{ width:25px; height:18px; display:grid; place-items:center; border:1px solid var(--fx-hairline);
border-radius:6px; background:rgb(148 163 184 / .06); color:rgb(var(--fx-text-muted)); cursor:pointer; font-size:11px;
transition:border-color .14s var(--fx-ease-out), color .14s var(--fx-ease-out); }
.cat-ord-btn:hover{ border-color:rgb(var(--fx-primary) / .55); color:rgb(var(--fx-primary)); }
.cat-prod-card__head > .cat-item__img{ width:44px; height:44px; }
.cat-prod-card__info{ flex:1; min-width:0; }
/* El nombre puede ocupar 2 líneas (no se corta a "Entre…") */
.cat-prod-card__info .cat-pick__name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; line-height:1.2; }
.cat-prod-card__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:3px;
font-size:11.5px; color:rgb(var(--fx-text-muted)); }
.cat-warn--mini{ font-size:10px; gap:3px; }
.cat-prod-card__price{ font-weight:800; color:rgb(var(--fx-text)); }
.cat-pill-dest{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
color:rgb(var(--fx-attention)); background:rgb(var(--fx-attention) / .12); padding:1px 7px; border-radius:999px; }
/* Estrella "destacar": clara y obvia (no un toggle escondido) */
.cat-star{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; cursor:pointer;
border:1px solid var(--fx-hairline); border-radius:10px; background:transparent; color:rgb(var(--fx-text-dim));
font-size:17px; transition:all .15s var(--fx-ease-out); }
.cat-star:hover{ border-color:rgb(var(--fx-attention) / .5); color:rgb(var(--fx-attention)); }
.cat-star.is-on{ background:rgb(var(--fx-attention) / .15); border-color:rgb(var(--fx-attention) / .45); color:rgb(var(--fx-attention)); }
.cat-prod-card__del{ width:30px; height:30px; font-size:13px; flex-shrink:0; }
.cat-prod-card__body{ display:none; padding:2px 12px 13px; flex-direction:column; gap:11px; min-width:0; }
.cat-prod-card.is-open .cat-prod-card__body{ display:flex; }
.cat-prod-card__body .fx-input, .cat-prod-card__body .fx-textarea{ width:100%; min-width:0; }
/* ── Productos: tarjetas diferenciadas + controles claros ── */
.cat-prod-card{ position:relative; border-left-width:3px; animation:catBnrIn .26s var(--fx-ease-out) both; }
/* Nombre del producto (hasta 2 líneas, sin empujar los controles) */
.cat-prod-card__name{ font-weight:700; font-size:13.5px; color:rgb(var(--fx-text)); white-space:normal;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; }
/* Color distintivo por tarjeta (solo acento, para no confundir productos) */
.cat-prod-card--c0{ border-left-color:rgb(99 102 241); }
.cat-prod-card--c1{ border-left-color:rgb(16 185 129); }
.cat-prod-card--c2{ border-left-color:rgb(245 158 11); }
.cat-prod-card--c3{ border-left-color:rgb(14 165 233); }
.cat-prod-card--c4{ border-left-color:rgb(168 85 247); }
.cat-prod-card--c5{ border-left-color:rgb(244 63 94); }
.cat-prod-card--c0 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(99 102 241 / .35); }
.cat-prod-card--c1 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(16 185 129 / .35); }
.cat-prod-card--c2 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(245 158 11 / .35); }
.cat-prod-card--c3 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(14 165 233 / .35); }
.cat-prod-card--c4 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(168 85 247 / .35); }
.cat-prod-card--c5 .cat-item__img{ box-shadow:inset 0 0 0 2px rgb(244 63 94 / .35); }
.cat-prod-card__head > .cat-item__img{ border-radius:10px; }
/* Destacado: la tarjeta entera se resalta en ámbar */
.cat-prod-card.is-dest{ border-color:rgb(var(--fx-attention) / .55); border-left-color:rgb(var(--fx-attention));
background:rgb(var(--fx-attention) / .06); }
.cat-tag-oferta{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800;
color:#fff; background:rgb(225 29 72); padding:1px 7px; border-radius:999px; }
.cat-tag-oferta i{ font-size:11px; }
/* Flechas de orden (mismo look táctil que en banners) */
.cat-move{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.cat-movebtn{ width:30px; height:24px; display:grid; place-items:center; font-size:13px; cursor:pointer;
border:1px solid var(--fx-hairline); border-radius:7px; background:rgb(148 163 184 / .06); color:rgb(var(--fx-text-muted));
transition:background .15s var(--fx-ease-out), color .15s var(--fx-ease-out), border-color .15s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cat-movebtn:hover:not(:disabled){ background:rgb(var(--fx-primary) / .14); color:rgb(var(--fx-primary)); border-color:rgb(var(--fx-primary) / .4); }
.cat-movebtn:active:not(:disabled){ transform:scale(.9); }
.cat-movebtn:disabled{ opacity:.3; cursor:default; }
/* Botón "Destacar" PROMINENTE (con texto, no una estrellita escondida) */
.cat-dest-btn{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; min-height:34px;
padding:6px 11px; font-size:11.5px; font-weight:700; border-radius:999px;
border:1px solid rgb(var(--fx-attention) / .45); background:rgb(var(--fx-attention) / .1); color:rgb(var(--fx-attention));
transition:background .15s var(--fx-ease-out), transform .12s var(--fx-ease-out), box-shadow .15s var(--fx-ease-out); }
.cat-dest-btn i{ font-size:15px; }
.cat-dest-btn:hover{ background:rgb(var(--fx-attention) / .18); }
.cat-dest-btn:active{ transform:scale(.95); }
.cat-dest-btn.is-on{ background:rgb(var(--fx-attention)); border-color:transparent; color:#231803; box-shadow:0 6px 16px -6px rgb(var(--fx-attention) / .8); }
@media (max-width:380px){ .cat-dest-btn__lbl{ display:none; } .cat-dest-btn{ padding:6px 9px; } }
@media (prefers-reduced-motion: reduce){ .cat-prod-card{ animation:none; } }
/* Casilla "guardar en inventario" — más clara y tocable */
.cat-saveinv{ display:flex; align-items:flex-start; gap:9px; margin-top:9px; padding:9px 11px;
background:rgb(var(--fx-primary) / .05); border:1px solid rgb(var(--fx-primary) / .15); border-radius:10px;
font-size:11.5px; line-height:1.4; color:rgb(var(--fx-text-muted)); cursor:pointer; }
.cat-saveinv input{ accent-color:rgb(var(--fx-primary)); width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.cat-saveinv i{ color:rgb(var(--fx-primary)); }
/* Elección de la descripción del catálogo: usar la del producto / escribir una nueva */
.cat-desc-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 8px; }
.cat-desc-seg label{ display:flex; align-items:center; justify-content:center; gap:6px; text-align:center;
padding:9px 10px; border-radius:11px; border:1px solid var(--fx-hairline); background:rgb(148 163 184 / .06);
color:rgb(var(--fx-text-muted)); font-size:11.5px; font-weight:800; line-height:1.15; cursor:pointer;
transition:border-color .15s var(--fx-ease-out), background .15s var(--fx-ease-out), color .15s var(--fx-ease-out); }
.cat-desc-seg label i{ font-size:14px; flex-shrink:0; }
.cat-desc-seg input{ position:absolute; opacity:0; width:0; height:0; }
.cat-desc-seg label:hover{ border-color:rgb(var(--fx-primary) / .4); color:rgb(var(--fx-text)); }
.cat-desc-seg label:has(input:checked){ border-color:rgb(var(--fx-primary) / .55); background:rgb(var(--fx-primary) / .14);
color:rgb(var(--fx-primary-soft)); box-shadow:0 4px 12px -7px rgb(var(--fx-primary) / .8); }
.cat-desc-seg label.is-disabled{ opacity:.45; cursor:not-allowed; }
.cat-desc-seg label.is-disabled:hover{ border-color:var(--fx-hairline); color:rgb(var(--fx-text-muted)); }
/* Vista de la descripción del producto (cuando se elige "usar la del producto") */
.cat-desc-fromprod{ border:1px solid var(--fx-hairline); background:rgb(var(--fx-bg-0) / .4); border-radius:11px;
padding:10px 12px; font-size:12.5px; line-height:1.5; color:rgb(var(--fx-text-muted)); white-space:pre-wrap;
word-break:break-word; max-height:170px; overflow:auto; }
.cat-desc-fromprod--empty{ color:rgb(var(--fx-text-dim)); font-style:italic; white-space:normal; }
/* Selector de plantilla (miniaturas) */
.cat-tpl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .cat-tpl-grid{ grid-template-columns:repeat(3,1fr); } }
.cat-tpl{ cursor:pointer; border:1.5px solid var(--fx-hairline); border-radius:var(--fx-r-md); padding:10px;
background:rgb(148 163 184 / .04); transition:all .16s var(--fx-ease-out); text-align:center; }
.cat-tpl.is-on{ border-color:rgb(var(--fx-primary)); background:rgb(var(--fx-primary) / .10); }
.cat-tpl__preview{ height:54px; border-radius:8px; background:rgb(148 163 184 / .07); margin-bottom:7px; padding:6px;
display:flex; gap:4px; overflow:hidden; }
.cat-tpl__b{ background:rgb(var(--fx-text-dim) / .5); border-radius:3px; flex:1; }
.cat-tpl__name{ font-size:11.5px; font-weight:700; color:rgb(var(--fx-text)); }
.cat-tpl[data-t="lista"] .cat-tpl__preview{ flex-direction:column; }
.cat-tpl[data-t="lista"] .cat-tpl__b{ height:8px; flex:none; }
.cat-tpl[data-t="revista"] .cat-tpl__b:first-child{ flex:2; }
.cat-tpl[data-t="stories"] .cat-tpl__preview{ flex-direction:column; }
.cat-tpl[data-t="minimal"] .cat-tpl__preview{ background:transparent; border:1px dashed var(--fx-hairline-strong); }
/* Swatches de color de marca */
.cat-swatches{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.cat-swatch{ width:34px; height:34px; border-radius:50%; cursor:pointer; border:2px solid transparent;
transition:transform .15s var(--fx-ease-out); position:relative; }
.cat-swatch:hover{ transform:scale(1.08); }
.cat-swatch.is-on{ border-color:#fff; box-shadow:0 0 0 2px rgb(0 0 0 / .4); }
/* =====================================================================
PUBLICO (.cx) — standalone. Hereda tokens; el acento lo fija el dueno.
===================================================================== */
.cx{ --cx-accent:99 102 241; max-width:1180px; margin:0 auto; padding:0 16px 120px;
color:rgb(var(--fx-text)); }
.cx-hero{ position:relative; border-radius:var(--fx-r-xl); overflow:hidden; margin:16px 0 18px;
background:linear-gradient(135deg, rgb(var(--cx-accent) / .22), rgb(var(--cx-accent) / .04));
border:1px solid rgb(var(--cx-accent) / .25); padding:22px; }
.cx-hero__cover{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; }
.cx-hero__inner{ position:relative; display:flex; align-items:center; gap:16px; }
.cx-hero__logo{ width:84px; height:84px; border-radius:20px; flex-shrink:0; object-fit:cover;
background:rgb(var(--cx-accent) / .16); display:grid; place-items:center; font-size:30px; margin-bottom:4px;
color:rgb(var(--cx-accent)); border:1px solid rgb(var(--cx-accent) / .28);
box-shadow:0 14px 34px -14px rgb(var(--cx-accent) / .5), inset 0 1px 0 rgb(255 255 255 / .12); }
.cx-hero__logo--ini{ font-weight:800; letter-spacing:-.02em; font-size:32px;
background:linear-gradient(150deg, rgb(var(--cx-accent) / .26), rgb(var(--cx-accent) / .1)); }
.cx-hero__biz{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--cx-accent)); }
.cx-hero__title{ font-size:clamp(22px,5vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-top:2px; }
.cx-hero__msg{ font-size:13.5px; color:rgb(var(--fx-text-muted)); margin-top:6px; max-width:60ch; line-height:1.5; }
.cx-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:nowrap; margin-bottom:16px; position:sticky; top:0; z-index:20;
background:rgb(var(--fx-bg-0) / .82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
padding:10px 0; border-bottom:1px solid var(--fx-hairline); }
.cx-search{ flex:1 1 auto; min-width:0; position:relative; }
.cx-search input{ box-sizing:border-box; width:100%; height:42px; border-radius:999px; border:1px solid var(--fx-hairline);
background:rgb(148 163 184 / .06); color:rgb(var(--fx-text)); padding:0 16px 0 40px; font-size:14px; }
.cx-search input:focus{ outline:none; border-color:rgb(var(--cx-accent) / .55); }
.cx-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgb(var(--fx-text-dim)); font-size:17px; }
.cx-iconbtn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
background:rgb(148 163 184 / .07); border:1px solid var(--fx-hairline); color:rgb(var(--fx-text-muted)); cursor:pointer; font-size:18px; }
.cx-iconbtn:hover{ color:rgb(var(--fx-text)); border-color:var(--fx-hairline-strong); }
.cx-iconbtn:active{ transform:scale(.94); }
/* Toggle de moneda (reusa logica del switch, color acento) */
.cx-cur{ display:inline-flex; background:rgb(148 163 184 / .08); border:1px solid var(--fx-hairline); border-radius:999px; padding:3px; gap:2px; }
.cx-cur__opt{ border:none; background:transparent; color:rgb(var(--fx-text-muted)); font-size:12.5px; font-weight:700;
padding:7px 13px; border-radius:999px; cursor:pointer; transition:all .18s var(--fx-ease-out); white-space:nowrap; }
.cx-cur__opt.is-on{ background:rgb(var(--cx-accent)); color:#fff; }
/* Filtros de categoria (chips horizontales) */
.cx-cats{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none; }
.cx-cats::-webkit-scrollbar{ display:none; }
.cx-cat{ flex-shrink:0; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
background:rgb(148 163 184 / .07); border:1px solid var(--fx-hairline); color:rgb(var(--fx-text-muted)); white-space:nowrap; }
.cx-cat.is-on{ background:rgb(var(--cx-accent) / .16); border-color:rgb(var(--cx-accent) / .5); color:rgb(var(--cx-accent)); }
/* ---------- Tarjeta de producto base ---------- */
/* Cada tarjeta a su ALTO NATURAL (no se estira para igualar a la más alta): así NO
queda espacio en blanco dentro de la tarjeta cuando faltan datos (sin categoría,
sin descripción, nombre corto). La imagen ya es de alto fijo, así que la fila se ve
ordenada igual. (studio re-activa el modo "parejo" más abajo.) */
.cx-products{ display:grid; gap:16px; align-items:start; }
.cx-prod{ position:relative; border-radius:16px; overflow:hidden; background:var(--fx-glass-bg);
border:1px solid var(--fx-hairline); display:flex; flex-direction:column;
transition:transform .22s var(--fx-ease-out), border-color .22s var(--fx-ease-out); }
.cx-prod:hover{ transform:translateY(-3px); border-color:rgb(var(--cx-accent) / .4); }
.cx-prod__imgwrap{ position:relative; aspect-ratio:1/1; background:rgb(148 163 184 / .06); overflow:hidden; }
/* Fondo difuminado: la MISMA foto, ampliada y borrosa, rellena lo que sobra cuando
la foto no es cuadrada (p. ej. vertical 1080×1350) → la foto se ve ENTERA, sin
recortarse, y la cuadrícula queda pareja. Mismo recurso que la portada (cx-hero__media-blur). */
.cx-prod__imgbg{ position:absolute; inset:0; background-size:cover; background-position:center;
filter:blur(20px) saturate(1.15); transform:scale(1.2); z-index:0; }
/* Imagen en ABSOLUTO dentro del marco: así el ALTO lo define el marco (aspect-ratio),
nunca la imagen (en flujo, una foto alta estiraba el contenedor). inset:0 respeta el
padding del marco, por lo que studio/onyx conservan su margen. */
.cx-prod__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .4s var(--fx-ease-out); }
.cx-prod:hover .cx-prod__img{ transform:scale(1.05); }
/* Plantillas que muestran el producto sobre su propio fondo limpio (estudio/onyx):
ahí NO va el difuminado para conservar su look. */
.cx--tpl-studio .cx-prod__imgbg, .cx--tpl-onyx .cx-prod__imgbg{ display:none; }
.cx-prod__noimg{ width:100%; height:100%; display:grid; place-items:center; color:rgb(var(--fx-text-dim)); font-size:40px; }
.cx-badge{ position:absolute; top:10px; z-index:4; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
padding:4px 9px; border-radius:999px; }
.cx-badge--dest{ left:10px; background:rgb(var(--cx-accent)); color:#fff; }
.cx-badge--out{ right:10px; background:rgb(15 18 30 / .85); color:rgb(var(--fx-text-muted)); border:1px solid var(--fx-hairline-strong); }
/* "Próximamente" (en camino / tránsito): badge azul info con barquito */
/* "Próximamente" va ABAJO de la imagen (así la OFERTA de arriba no lo tapa). */
.cx-badge--prox{ left:10px; top:auto; bottom:10px; display:inline-flex; align-items:center; gap:4px; background:rgb(var(--cx-accent)); color:#fff; box-shadow:0 4px 12px -4px rgb(var(--cx-accent) / .7); }
.cx-badge--prox i{ font-size:12px; }
/* CATÁLOGO (grilla): cinta OFERTA pequeña y legible sobre la imagen, esquina sup. der.
El imgwrap (overflow:hidden) la recorta como cinta. Va a la derecha → no choca con
el badge "Destacado" (que va a la izquierda). */
.cx-oferta-tag{ position:absolute; top:15px; right:-36px; z-index:6; width:132px; transform:rotate(45deg);
display:flex; align-items:center; justify-content:center; text-align:center;
font-size:9.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#fff; white-space:nowrap;
background:linear-gradient(90deg, rgb(225 29 72), rgb(244 63 94)); padding:4px 0;
box-shadow:0 5px 13px -4px rgb(0 0 0 / .45); animation:cxOfertaPop .4s var(--fx-ease-out) both; }
@keyframes cxOfertaPop{ from{ opacity:0; transform:rotate(45deg) translateY(-10px); } to{ opacity:1; transform:rotate(45deg) translateY(0); } }
@media (prefers-reduced-motion: reduce){ .cx-oferta-tag{ animation:none; } }
/* DESTACADOS: etiqueta OFERTA inclinada, CONTENIDA dentro de la esquina sup. der. de la tarjeta. */
.cx-oferta-corner{ position:absolute; top:14px; right:12px; z-index:9; transform:rotate(6deg); transform-origin:center;
display:inline-flex; align-items:center; gap:5px; pointer-events:none;
font-size:11.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#fff; white-space:nowrap;
background:linear-gradient(90deg, rgb(225 29 72), rgb(244 63 94)); padding:6px 12px; border-radius:999px;
box-shadow:0 9px 22px -8px rgb(225 29 72 / .85); animation:cxOfertaPop2 .4s var(--fx-ease-out) both; }
.cx-oferta-corner i{ font-size:14px; }
.cx-oferta-corner b{ font-weight:900; }
@keyframes cxOfertaPop2{ from{ opacity:0; transform:rotate(6deg) scale(.85); } to{ opacity:1; transform:rotate(6deg) scale(1); } }
@media (prefers-reduced-motion: reduce){ .cx-oferta-corner{ animation:none; } }
/* En Afiche la tarjeta de destacado tenía overflow visible y el sello de precio arriba-der:
lo bajamos para dejar la esquina superior derecha libre para la etiqueta OFERTA. */
.cx--tpl-studio .cx-featured .cx-prod__price{ top:auto; bottom:16px; }
/* Nota "viene en camino" bajo el precio + botón "Me interesa" (tarjeta y detalle) */
.cx-prox-note{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:rgb(var(--cx-accent)); }
.cxbody--dark .cx-prox-note{ color:rgb(var(--cx-accent)); }
.cx-prod__add.cx-prod__add--prox{ text-decoration:none; background:rgb(var(--cx-accent) / .12); color:rgb(var(--cx-accent)); border:1px solid rgb(var(--cx-accent) / .32); }
.cx-prod__add.cx-prod__add--prox:hover{ background:rgb(var(--cx-accent)); color:#fff; border-color:transparent; }
.cxbody--dark .cx-prod__add.cx-prod__add--prox{ color:rgb(var(--cx-accent)); }
.cx-pd__add.cx-pd__add--prox{ text-decoration:none; background:rgb(var(--cx-accent)); color:#fff; box-shadow:0 10px 24px -10px rgb(var(--cx-accent) / .7); }
.cx-pd__add.cx-pd__add--prox:hover{ filter:brightness(1.07); }
.cx-pd__chip--prox{ background:rgb(var(--cx-accent) / .14); color:rgb(var(--cx-accent)); }
.cxbody--dark .cx-pd__chip--prox{ color:rgb(var(--cx-accent)); }
.cx-prod__body{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.cx-prod__cat{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgb(var(--cx-accent)); }
.cx-prod__name{ font-weight:700; font-size:14.5px; line-height:1.3; color:rgb(var(--fx-text)); }
.cx-prod__desc{ font-size:12.5px; color:rgb(var(--fx-text-muted)); line-height:1.5; white-space:pre-line;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cx-prod__spacer{ flex:1; }
.cx-prod__price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:2px; }
.cx-price-main{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:rgb(var(--fx-text)); }
.cx-price-bs{ font-size:12.5px; font-weight:600; color:rgb(var(--fx-text-muted)); }
/* El botón NO lleva margin-top:auto: el .cx-prod__spacer (flex:1) ya empuja TODO el
pie (precio + estado + botón) junto al fondo. Con los dos, el espacio libre se repartía
y el precio quedaba flotando con un hueco feo antes del botón. */
.cx-prod__add{ margin-top:6px; width:100%; height:42px; border:none; border-radius:var(--fx-r-md); cursor:pointer;
background:rgb(var(--cx-accent)); color:#fff; font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:7px;
transition:filter .18s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-prod__add:hover{ filter:brightness(1.08); } .cx-prod__add:active{ transform:scale(.97); }
.cx-prod__add.is-in{ background:rgb(var(--fx-success)); }
.cx-prod.is-out{ opacity:.6; } .cx-prod.is-out .cx-prod__add{ background:rgb(148 163 184 / .15); color:rgb(var(--fx-text-dim)); pointer-events:none; }
/* ---------- Plantilla: CUADRICULA ---------- */
.cx-products--cuadricula{ grid-template-columns:repeat(2,1fr); }
@media (min-width:680px){ .cx-products--cuadricula{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .cx-products--cuadricula{ grid-template-columns:repeat(4,1fr); } }
/* ---------- Plantilla: LISTA (menu / lista de precios) ---------- */
.cx-products--lista{ grid-template-columns:1fr; gap:10px; }
.cx-products--lista .cx-prod{ flex-direction:row; align-items:stretch; }
.cx-products--lista .cx-prod__imgwrap{ width:96px; aspect-ratio:auto; flex-shrink:0; }
.cx-products--lista .cx-prod__body{ padding:11px 13px; }
.cx-products--lista .cx-prod__desc{ -webkit-line-clamp:2; }
.cx-products--lista .cx-prod__add{ width:auto; align-self:flex-start; padding:0 16px; margin-top:8px; }
.cx-products--lista .cx-badge--dest{ top:8px; left:8px; }
/* ---------- Plantilla: REVISTA (tarjetas grandes) ---------- */
.cx-products--revista{ grid-template-columns:1fr; gap:22px; }
@media (min-width:760px){ .cx-products--revista{ grid-template-columns:repeat(2,1fr); } }
.cx-products--revista .cx-prod__imgwrap{ aspect-ratio:4/3; }
.cx-products--revista .cx-prod__body{ padding:18px 20px 20px; gap:9px; }
.cx-products--revista .cx-prod__name{ font-size:19px; letter-spacing:-.01em; }
.cx-products--revista .cx-price-main{ font-size:24px; }
.cx-products--revista .cx-prod__desc{ -webkit-line-clamp:4; font-size:13.5px; }
/* ---------- Plantilla: MINIMAL ---------- */
.cx-products--minimal{ grid-template-columns:repeat(2,1fr); gap:8px 24px; }
@media (min-width:760px){ .cx-products--minimal{ grid-template-columns:repeat(3,1fr); } }
.cx-products--minimal .cx-prod{ background:transparent; border:none; border-radius:0; }
.cx-products--minimal .cx-prod:hover{ transform:none; }
.cx-products--minimal .cx-prod__imgwrap{ border-radius:var(--fx-r-md); border:1px solid var(--fx-hairline); }
.cx-products--minimal .cx-prod__body{ padding:11px 2px 6px; gap:4px; }
.cx-products--minimal .cx-prod__cat{ display:none; }
.cx-products--minimal .cx-prod__add{ background:transparent; color:rgb(var(--cx-accent)); border:1px solid rgb(var(--cx-accent) / .4); height:38px; }
.cx-products--minimal .cx-prod__add.is-in{ background:rgb(var(--fx-success)); color:#fff; border-color:transparent; }
/* ---------- Plantilla: STORIES (vertical full-bleed) ---------- */
.cx-products--stories{ grid-template-columns:1fr; gap:18px; max-width:520px; margin:0 auto; }
.cx-products--stories .cx-prod__imgwrap{ aspect-ratio:4/5; }
.cx-products--stories .cx-prod__body{ padding:16px 18px 18px; }
.cx-products--stories .cx-prod__name{ font-size:18px; }
.cx-products--stories .cx-price-main{ font-size:22px; }
/* ---------- Carrito flotante + bottom-sheet ---------- */
.cx-fab{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:40;
height:54px; padding:0 20px; border:none; border-radius:999px; cursor:pointer;
background:rgb(var(--cx-accent)); color:#fff; font-weight:800; font-size:14px;
display:flex; align-items:center; gap:9px; box-shadow:0 12px 30px rgb(var(--cx-accent) / .45);
transition:transform .18s var(--fx-ease-out), opacity .2s; }
.cx-fab:active{ transform:scale(.96); }
.cx-fab__count{ background:#fff; color:rgb(var(--cx-accent)); min-width:24px; height:24px; border-radius:999px;
display:grid; place-items:center; font-size:12.5px; font-weight:800; padding:0 6px; }
.cx-fab.is-hidden{ transform:translateY(120px); opacity:0; pointer-events:none; }
/* z por encima de la barra de revendedor (z:120): al abrir un producto, el sheet
y su botón grande quedan ARRIBA y la barra ya no los tapa. El overlay además
oscurece la barra mientras el sheet está abierto. */
.cx-sheet-overlay{ position:fixed; inset:0; z-index:130; background:rgb(2 4 10 / .6); backdrop-filter:blur(3px);
opacity:0; pointer-events:none; transition:opacity .25s var(--fx-ease-out); }
.cx-sheet-overlay.is-open{ opacity:1; pointer-events:auto; }
.cx-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:131; max-height:92dvh; display:flex; flex-direction:column;
background:rgb(var(--fx-bg-1)); border-top-left-radius:24px; border-top-right-radius:24px;
border-top:1px solid var(--fx-hairline-strong); padding:8px 16px calc(16px + env(safe-area-inset-bottom));
transform:translateY(100%); transition:transform .32s var(--fx-ease-drawer);
box-shadow:0 -24px 60px -20px rgb(2 4 10 / .55); }
.cx-sheet.is-open{ transform:translateY(0); }
/* Con una hoja abierta (detalle/carrito) se congela el scroll del catálogo de fondo:
así el scroll ocurre SOLO dentro de la hoja y el contenedor de atrás no se mueve. */
body.cx-modal-open{ overflow:hidden; }
.cx-sheet__grip{ width:42px; height:5px; border-radius:999px; background:var(--fx-hairline-strong); margin:8px auto 10px; flex-shrink:0; }
.cx-sheet__x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:10px; border:1px solid var(--fx-hairline);
background:rgb(148 163 184 / .08); color:rgb(var(--fx-text-muted)); font-size:16px; cursor:pointer; display:grid; place-items:center; z-index:2; }
.cx-sheet__x:active{ transform:scale(.92); }
.cx-sheet__title{ font-size:17px; font-weight:800; letter-spacing:-.01em; margin:0 0 10px; flex-shrink:0; display:flex; align-items:center; gap:8px; }
.cx-sheet__title i{ color:rgb(var(--cx-accent)); }
.cx-sheet__scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; min-height:0; margin:0 -2px; padding:0 2px; }
.cx-sheet__totlbl{ color:rgb(var(--fx-text-muted)); font-weight:600; }
.cx-cart-row{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--fx-hairline); }
.cx-cart-row__img{ width:50px; height:50px; border-radius:11px; object-fit:cover; flex-shrink:0; background:rgb(148 163 184 / .08); }
.cx-cart-row__b{ flex:1; min-width:0; }
.cx-cart-row__n{ font-size:13.5px; font-weight:700; color:rgb(var(--fx-text)); line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-cart-row__p{ font-size:12.5px; color:rgb(var(--fx-text-muted)); margin-top:2px; }
.cx-qty{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cx-qty button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--fx-hairline-strong);
background:rgb(148 163 184 / .07); color:rgb(var(--fx-text)); font-size:16px; cursor:pointer; display:grid; place-items:center; }
.cx-qty button:active{ transform:scale(.9); }
.cx-qty span{ min-width:22px; text-align:center; font-weight:700; font-size:14px; }
.cx-sheet__total{ display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 4px;
padding:12px 14px; border-radius:14px; background:rgb(var(--cx-accent) / .08); border:1px solid rgb(var(--cx-accent) / .18); }
.cx-sheet__total b{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:rgb(var(--fx-text)); }
.cx-sheet__send{ width:100%; height:50px; border:none; border-radius:var(--fx-r-md); cursor:pointer; margin-top:12px; flex-shrink:0;
background:rgb(var(--fx-success)); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:9px;
box-shadow:0 12px 26px -12px rgb(var(--fx-success) / .7); }
.cx-sheet__send:active{ transform:scale(.98); }
.cx-sheet__foot{ text-align:center; font-size:11.5px; color:rgb(var(--fx-text-dim)); margin-top:9px; flex-shrink:0; }
/* ===== Detalle del producto (bottom-sheet; en escritorio, tarjeta flotante centrada) ===== */
.cx-sheet--prod{ max-height:94dvh; }
.cx-pd{ display:flex; flex-direction:column; gap:16px; padding-bottom:6px; }
.cx-pd__gallery{ display:flex; flex-direction:column; gap:10px; }
.cx-pd__main{ position:relative; width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden;
background:#fff; border:1px solid var(--fx-hairline); display:grid; place-items:center; }
.cxbody--dark .cx-pd__main{ background:rgb(255 255 255 / .04); }
/* Imagen en ABSOLUTO: el marco (aspect-ratio) define el alto; antes la imagen en
flujo tomaba su alto natural, sobresalía y el overflow:hidden la recortaba abajo. */
.cx-pd__mainimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6%; box-sizing:border-box; }
.cx-pd__main--empty{ color:rgb(var(--fx-text-dim)); font-size:54px; }
.cx-pd__off{ position:absolute; top:12px; right:12px; left:auto; z-index:3; display:inline-flex; align-items:baseline; gap:3px;
padding:5px 11px; border-radius:999px; background:rgb(var(--cx-accent)); color:#fff; font-size:12px; font-weight:800; line-height:1; }
.cx-pd__off b{ font-size:1.15em; }
/* Tira de miniaturas: SCROLL LATERAL cuando hay muchas fotos (caben ≈5 en móvil y
≈6 en escritorio; el resto se desplaza de lado). Snap + scrollbar fina para que
se note que hay más fotos. */
.cx-pd__thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:5px;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
scrollbar-color:rgb(148 163 184 / .4) transparent; }
.cx-pd__thumbs::-webkit-scrollbar{ height:5px; }
.cx-pd__thumbs::-webkit-scrollbar-thumb{ background:rgb(148 163 184 / .4); border-radius:10px; }
.cx-pd__thumb{ flex:0 0 auto; width:62px; height:62px; scroll-snap-align:start; border-radius:12px; overflow:hidden; border:2px solid transparent;
padding:0; cursor:pointer; background:rgb(148 163 184 / .1); }
@media (min-width:640px){ .cx-pd__thumb{ width:64px; height:64px; } }
.cx-pd__thumb.is-on{ border-color:rgb(var(--cx-accent)); }
.cx-pd__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cx-pd__info{ display:flex; flex-direction:column; gap:9px; }
.cx-pd__name{ font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:0; color:rgb(var(--fx-text)); }
.cx-pd__price{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.cx-pd__price .cx-price-main{ font-size:27px; font-weight:800; letter-spacing:-.02em; color:rgb(var(--fx-text)); }
.cx-pd__price .cx-price-cents{ vertical-align:super; font-size:.5em; font-weight:700; }
.cx-pd__price .cx-price-was{ font-size:15px; font-weight:600; text-decoration:line-through; color:rgb(var(--fx-text-dim)); }
.cx-pd__price .cx-price-bs{ font-size:13px; color:rgb(var(--fx-text-muted)); width:100%; }
.cx-pd__meta{ display:flex; flex-wrap:wrap; gap:7px; }
.cx-pd__chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
padding:4px 10px; border-radius:999px; background:rgb(148 163 184 / .12); color:rgb(var(--fx-text-muted)); }
/* "Vendidos" en el detalle: rojo (igual que en la tarjeta) para que destaque. */
.cx-pd__chip--sold{ color:rgb(239 68 68); background:rgb(239 68 68 / .12); }
.cx-pd__chip--sold i{ color:rgb(239 68 68); }
.cx-pd__chip--ok{ background:rgb(var(--fx-success) / .14); color:rgb(var(--fx-success-soft)); }
.cx-pd__chip--out{ background:rgb(244 63 94 / .14); color:rgb(248 113 133); }
.cx-pd__block{ display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.cx-pd__label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgb(var(--fx-text-dim)); }
.cx-pd__desc{ font-size:13.5px; line-height:1.6; color:rgb(var(--fx-text-muted)); white-space:pre-line; }
.cx-pd__add{ margin-top:0; width:100%; height:52px; border:none; border-radius:14px; cursor:pointer;
background:rgb(var(--cx-accent)); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:9px;
box-shadow:0 10px 24px -10px rgb(var(--cx-accent) / .7);
transition:filter .16s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-pd__add:hover{ filter:brightness(1.07); } .cx-pd__add:active{ transform:scale(.98); }
.cx-pd__add.is-in{ background:rgb(var(--fx-success)); box-shadow:0 10px 24px -10px rgb(var(--fx-success) / .7); }
.cx-pd__add:disabled{ background:rgb(148 163 184 / .15); color:rgb(var(--fx-text-dim)); cursor:default; box-shadow:none; }
/* Pie FIJO del detalle: el botón principal SIEMPRE visible (no se pierde al final del scroll) */
.cx-pd__foot{ flex-shrink:0; margin:4px -16px 0; padding:12px 16px calc(8px + env(safe-area-inset-bottom));
border-top:1px solid var(--fx-hairline-strong); background:rgb(var(--fx-bg-1));
box-shadow:0 -10px 24px -16px rgb(2 4 10 / .5); }
.cx-pd__foot:empty{ display:none; }
/* Pie del detalle con dos acciones: el botón principal (agregar / "en tu pedido") y,
al lado, "Mi pedido" para ir al carrito. El principal ocupa el espacio libre y
puede crecer si el texto envuelve; ambos igualan altura. */
.cx-pd__footrow{ display:flex; gap:9px; align-items:stretch; }
.cx-pd__footrow .cx-pd__add{ flex:1 1 auto; min-width:0; height:auto; min-height:52px; padding:8px 12px; font-size:13.5px; line-height:1.2; }
.cx-pd__cart{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:52px; padding:0 12px; border-radius:14px; cursor:pointer;
border:1.5px solid rgb(var(--cx-accent) / .42); background:rgb(var(--cx-accent) / .1); color:rgb(var(--cx-accent)); font-weight:800; font-size:13px; white-space:nowrap;
transition:background .14s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-pd__cart i{ font-size:17px; }
.cx-pd__cart:hover{ background:rgb(var(--cx-accent) / .18); }
.cx-pd__cart:active{ transform:scale(.97); }
.cxbody--dark .cx-pd__cart{ color:rgb(var(--cx-accent)); }
.cx-variants--lg{ gap:8px; }
.cx-variants--lg .cx-variant{ padding:8px 14px; font-size:13px; }
@media (min-width:640px){
.cx-pd{ flex-direction:row; align-items:flex-start; gap:22px; }
.cx-pd__gallery{ flex:1 1 0; min-width:0; }
.cx-pd__info{ flex:1 1 0; min-width:0; padding-top:2px; }
}
@media (min-width:720px){
.cx-sheet--prod{ left:50%; right:auto; width:min(880px,94vw); bottom:3.5vh; max-height:90dvh;
border-radius:24px; transform:translate(-50%,120%); }
.cx-sheet--prod.is-open{ transform:translate(-50%,0); }
}
/* Formulario de datos del cliente dentro del carrito */
.cx-cartform{ margin-top:14px; padding-top:14px; border-top:1px solid var(--fx-hairline); }
.cx-cartform:empty{ display:none; }
.cx-cartform__t{ font-size:13px; font-weight:800; color:rgb(var(--fx-text)); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.cx-cartform__t i{ color:rgb(var(--cx-accent)); }
.cx-ffield{ margin-bottom:11px; }
.cx-flabel{ display:block; font-size:12px; font-weight:600; color:rgb(var(--fx-text-muted)); margin-bottom:5px; }
.cx-req{ color:rgb(var(--fx-danger, 244 63 94)); font-weight:800; }
.cx-finput{ box-sizing:border-box; width:100%; min-height:44px; padding:11px 13px; border-radius:12px; font-size:14px; font-family:inherit;
background:rgb(148 163 184 / .07); border:1.5px solid var(--fx-hairline-strong); color:rgb(var(--fx-text));
transition:border-color .15s var(--fx-ease-out), background .15s var(--fx-ease-out); }
.cx-finput::placeholder{ color:rgb(var(--fx-text-dim)); }
.cx-finput:focus{ outline:none; border-color:rgb(var(--cx-accent) / .65); background:rgb(var(--cx-accent) / .05); }
textarea.cx-finput{ resize:vertical; line-height:1.4; }
select.cx-finput{ appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
/* Aviso de la dirección de retiro (solo lectura) que ve el cliente */
.cx-entrega-info{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:rgb(var(--fx-text-muted));
background:rgb(var(--cx-accent) / .06); border:1px solid rgb(var(--cx-accent) / .18); border-radius:12px; padding:9px 11px; line-height:1.4; }
.cx-entrega-info i{ color:rgb(var(--cx-accent)); margin-top:1px; flex-shrink:0; font-size:15px; }
/* Envío gratis — chip bajo el nombre del producto (tarjeta del catálogo) */
.cx-prod__free{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin:4px 0 2px;
font-size:11.5px; font-weight:700; line-height:1.2; color:rgb(var(--fx-success));
background:rgb(var(--fx-success) / .12); border:1px solid rgb(var(--fx-success) / .26);
border-radius:999px; padding:3px 10px; }
.cx-prod__free i{ font-size:13px; }
/* Chip de envío gratis en el detalle del producto */
.cx-pd__chip--free{ color:rgb(var(--fx-success)); background:rgb(var(--fx-success) / .14); border-color:rgb(var(--fx-success) / .3); }
/* Banner de envío gratis en el formulario del carrito */
.cx-freeship-banner{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
background:rgb(var(--fx-success) / .1); border:1px solid rgb(var(--fx-success) / .3); color:rgb(var(--fx-text)); font-size:13px; }
.cx-freeship-banner i{ font-size:20px; color:rgb(var(--fx-success)); flex-shrink:0; }
.cx-freeship-banner b{ color:rgb(var(--fx-success-soft, 52 211 153)); }
.cx-freeship-note{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11.5px; color:rgb(var(--fx-success-soft, 52 211 153)); font-weight:600; }
/* ===== Modo revendedor: barra inferior premium + herramientas ===== */
.cx-revbar{ position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(115deg, rgb(13 18 33 / .97), rgb(26 24 58 / .97));
border-top:1px solid rgb(var(--fx-success) / .35);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 -12px 34px -14px rgb(2 4 10 / .8);
animation:cxRevUp .42s var(--fx-ease-out) both; }
@keyframes cxRevUp{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .cx-revbar{ animation:none; } }
/* hilo emerald vivo arriba (acento de marca revendedor) */
.cx-revbar::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
background:linear-gradient(90deg, transparent, rgb(var(--fx-success) / .9), transparent); }
.cx-revbar__brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.cx-revbar__icon{ flex-shrink:0; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:20px;
color:rgb(var(--fx-success-soft)); background:rgb(var(--fx-success) / .14); border:1px solid rgb(var(--fx-success) / .3);
box-shadow:inset 0 1px 0 rgb(255 255 255 / .08); }
.cx-revbar__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.25; }
.cx-revbar__txt b{ color:#fff; font-size:13.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-revbar__hint{ color:#94a3b8; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-revbar__acts{ display:flex; gap:8px; flex-shrink:0; }
.cx-revbar__btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:12px; cursor:pointer; white-space:nowrap;
border:1px solid rgb(255 255 255 / .18); background:rgb(255 255 255 / .07); color:#fff; font-size:12.5px; font-weight:700;
transition:background .14s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-revbar__btn i{ font-size:16px; }
.cx-revbar__btn:hover{ background:rgb(255 255 255 / .15); }
.cx-revbar__btn:active{ transform:scale(.95); }
.cx-revbar__btn--main{ border:none; color:#03251a; font-weight:800;
background:linear-gradient(135deg, rgb(var(--fx-success-soft)), rgb(var(--fx-success)));
box-shadow:0 8px 20px -8px rgb(var(--fx-success) / .7); }
.cx-revbar__btn--main:hover{ filter:brightness(1.06); }
body.cx-rev{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
body.cx-rev #cartFab, body.cx-rev .cx-fab{ bottom:calc(76px + env(safe-area-inset-bottom)); }
@media (max-width:560px){
.cx-revbar{ padding:9px 12px calc(9px + env(safe-area-inset-bottom)); gap:9px; }
.cx-revbar__brand{ gap:9px; }
.cx-revbar__icon{ width:34px; height:34px; font-size:18px; }
.cx-revbar__btn{ height:38px; padding:0 11px; font-size:12px; }
}
/* En pantallas angostas el texto del título manda. El subtítulo se oculta primero;
y SOLO si además existe el botón de Videos (barra apretada) ocultamos el ícono,
para que "Modo revendedor" nunca se trunque. Con un único botón el ícono se queda. */
@media (max-width:440px){
.cx-revbar__hint{ display:none; }
.cx-revbar:has(.cx-revbar__btn:not(.cx-revbar__btn--main)) .cx-revbar__icon{ display:none; }
.cx-revbar:has(.cx-revbar__btn:not(.cx-revbar__btn--main)) .cx-revbar__acts{ gap:7px; }
.cx-revbar:has(.cx-revbar__btn:not(.cx-revbar__btn--main)) .cx-revbar__btn{ padding:0 10px; }
}
/* Caja de herramientas del revendedor dentro del DETALLE del producto */
.cx-pd__revtools{ margin-top:4px; padding:12px; border-radius:16px;
background:linear-gradient(135deg, rgb(var(--fx-success) / .08), rgb(var(--cx-accent) / .06));
border:1px solid rgb(var(--fx-success) / .24); }
.cx-pd__revtools-lbl{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:rgb(var(--fx-success-soft)); margin-bottom:10px; }
.cx-pd__revtools-lbl i{ font-size:15px; }
.cx-pd__revtools-row{ display:flex; gap:9px; }
.cx-pd__rtbtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:12px; cursor:pointer;
font-size:13px; font-weight:700; border:1px solid var(--fx-hairline-strong); background:rgb(148 163 184 / .08); color:rgb(var(--fx-text));
transition:background .14s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-pd__rtbtn i{ font-size:17px; }
.cx-pd__rtbtn:hover{ background:rgb(148 163 184 / .15); }
.cx-pd__rtbtn:active{ transform:scale(.97); }
.cx-pd__rtbtn--copy{ border-color:rgb(var(--cx-accent) / .35); color:rgb(var(--cx-accent)); background:rgb(var(--cx-accent) / .1); }
.cx-pd__rtbtn--copy:hover{ background:rgb(var(--cx-accent) / .18); }
.cxbody--dark .cx-pd__rtbtn--copy{ color:rgb(var(--cx-accent)); }
/* Toast minimal del catálogo (feedback de copiar / acciones del revendedor) */
.cx-toast{ position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(12px); z-index:200;
display:inline-flex; align-items:center; gap:9px; max-width:88vw; padding:11px 16px; border-radius:14px;
background:rgb(13 18 33 / .97); color:#fff; font-size:13px; font-weight:600;
border:1px solid rgb(var(--fx-success) / .35); box-shadow:0 14px 34px -12px rgb(2 4 10 / .8);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
opacity:0; pointer-events:none; transition:opacity .22s var(--fx-ease-out), transform .22s var(--fx-ease-out); }
.cx-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
.cx-toast i{ color:rgb(var(--fx-success-soft)); font-size:18px; flex-shrink:0; }
/* ===== Reseñas: estrellas en tarjeta/detalle + modal de lista ===== */
.cx-rate{ display:inline-flex; align-items:center; gap:5px; }
.cx-rate__stars{ display:inline-flex; gap:1px; color:rgb(148 163 184 / .32); line-height:0; }
.cx-rate__stars i{ font-size:14px; }
.cx-rate__stars i.is-on{ color:rgb(var(--fx-attention)); }
.cx-rate__n{ color:rgb(var(--fx-text-dim)); font-weight:600; }
/* Mini (tarjeta) — compacto, no interactivo */
.cx-rate--mini{ align-self:flex-start; font-size:12.5px; font-weight:700; color:rgb(var(--fx-text-muted)); margin:1px 0 2px; }
.cx-rate--mini i{ font-size:13px; color:rgb(var(--fx-attention)); }
.cx-rate--mini b{ color:rgb(var(--fx-text)); }
/* Detalle — fila clickeable que abre las reseñas */
.cx-rate--detail{ width:100%; cursor:pointer; gap:8px; margin:2px 0; padding:8px 12px; border-radius:12px;
background:rgb(var(--fx-attention) / .08); border:1px solid rgb(var(--fx-attention) / .22);
font-size:13.5px; color:rgb(var(--fx-text)); transition:background .14s var(--fx-ease-out); }
.cx-rate--detail:hover{ background:rgb(var(--fx-attention) / .14); }
.cx-rate--detail:active{ transform:scale(.99); }
.cx-rate--detail .cx-rate__stars i{ font-size:16px; }
.cx-rate--detail b{ font-weight:800; }
.cx-rate--detail .cx-rate__go{ margin-left:auto; color:rgb(var(--fx-text-dim)); font-size:14px; }
/* Modal de reseñas (por encima del detalle) */
.cx-sheet-overlay--rev{ z-index:150; }
.cx-sheet--rev{ z-index:151; }
.cx-rev-load{ display:flex; justify-content:center; padding:40px 0; }
.cx-rev-empty{ text-align:center; color:rgb(var(--fx-text-muted)); padding:24px 0; font-size:13.5px; }
.cx-rev-head{ display:flex; align-items:center; gap:14px; padding:12px 0 14px; border-bottom:1px solid var(--fx-hairline); margin-bottom:4px; }
.cx-rev-head__num{ font-size:40px; font-weight:800; letter-spacing:-.03em; color:rgb(var(--fx-text)); line-height:1; }
.cx-rev-head .cx-rate__stars i{ font-size:18px; }
.cx-rev-head__n{ font-size:12.5px; color:rgb(var(--fx-text-muted)); margin-top:4px; }
.cx-rev-list{ display:flex; flex-direction:column; }
.cx-rev-item{ padding:13px 0; border-bottom:1px solid var(--fx-hairline); }
.cx-rev-item:last-child{ border-bottom:none; }
.cx-rev-item__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cx-rev-item__top .cx-rate__stars i{ font-size:15px; }
.cx-rev-item__date{ font-size:11.5px; color:rgb(var(--fx-text-dim)); flex-shrink:0; }
.cx-rev-item__name{ font-size:13px; font-weight:700; color:rgb(var(--fx-text)); margin-top:6px; }
.cx-rev-item__txt{ font-size:13.5px; color:rgb(var(--fx-text-muted)); line-height:1.5; margin-top:4px; white-space:pre-line; }
/* Botón de descarga sobre la imagen (tarjeta). Va ARRIBA-IZQUIERDA y por encima de
todo (z alto): antes estaba abajo-derecha y el badge "Próximamente" (abajo) o el
botón rápido lo tapaban y no se apreciaba. Arriba-izq. solo coincide con el badge
"Destacado", que retrocede en modo revendedor (regla más abajo). */
.cx-dl{ position:absolute; top:8px; left:8px; right:auto; bottom:auto; z-index:8; width:36px; height:36px; border-radius:11px; cursor:pointer;
border:1px solid rgb(255 255 255 / .14); background:rgb(15 23 42 / .8); color:#fff; display:grid; place-items:center; font-size:17px;
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 6px 16px -8px rgb(2 4 10 / .7);
transition:background .14s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cx-dl:hover{ background:rgb(var(--fx-success)); color:#03251a; }
.cx-dl:active{ transform:scale(.92); }
/* En modo revendedor el botón de descarga ocupa la esquina sup-izq → el badge
"Destacado" baja a la esquina inferior-izquierda, que está libre (nunca coincide
con "Próximamente", que es excluyente). Así NO choca con la cinta OFERTA (sup-der). */
body.cx-rev .cx-badge--dest{ top:auto; bottom:10px; left:10px; }
/* El "+" rápido flotante se oculta en modo revendedor (quien mira es el revendedor,
no el comprador; el botón "Agregar" del cuerpo sigue ahí). Deja libre la esquina
inferior-derecha → "Destacado" (abajo-izq) nunca lo roza, ni en pantallas angostas. */
body.cx-rev .cx-quickadd{ display:none; }
/* Descargas en el detalle del producto */
/* Va ARRIBA-IZQUIERDA: antes estaba a la derecha y quedaba muy pegado a la "X" de
cerrar la hoja. La cinta de descuento (-%) se mueve a la derecha para no chocar. */
.cx-pd__dl{ position:absolute; top:10px; left:10px; right:auto; z-index:4; width:38px; height:38px; border-radius:11px; border:none; cursor:pointer;
background:rgb(15 23 42 / .72); color:#fff; display:grid; place-items:center; font-size:17px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cx-pd__dl:hover{ background:rgb(var(--fx-success)); color:#03251a; }
.cx-footer{ text-align:center; padding:28px 0 8px; color:rgb(var(--fx-text-dim)); font-size:12px; }
.cx-footer a{ color:rgb(var(--cx-accent)); text-decoration:none; font-weight:600; }
/* Redes sociales del negocio (Instagram/Facebook/TikTok/web) — compartidas por todos los catálogos */
.cx-social{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 auto 16px; }
.cx-social__lnk{
width:42px; height:42px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
font-size:20px; text-decoration:none;
color:rgb(var(--cx-accent));
background:rgb(var(--cx-accent) / .10);
border:1px solid rgb(var(--cx-accent) / .24);
transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.cx-social__lnk:hover{ transform:translateY(-2px); color:#fff; background:rgb(var(--cx-accent)); border-color:rgb(var(--cx-accent)); }
/* Estado de carga / vacio del publico */
.cx-loading{ display:grid; place-items:center; min-height:60dvh; color:rgb(var(--fx-text-muted)); gap:14px; text-align:center; }
.cx-spin{ width:42px; height:42px; border-radius:50%; border:3px solid rgb(var(--cx-accent) / .2); border-top-color:rgb(var(--cx-accent));
animation:cxspin .8s linear infinite; }
@keyframes cxspin{ to{ transform:rotate(360deg); } }
/* ---------- Impresion / PDF (oculta UI interactiva) ---------- */
@media print{
.cx-toolbar, .cx-fab, .cx-sheet, .cx-sheet-overlay, .cx-prod__add, .cx-cats, .cx-iconbtn{ display:none !important; }
.cx{ padding-bottom:20px; } .cx-prod{ break-inside:avoid; }
body{ background:#fff !important; color:#111 !important; }
}
/* =====================================================================
v5.4 — CATALOGO LANDING: temas, fuentes, fondos, hero, destacados
El JS del publico fija --cx-accent, --cx-font-title/body, la clase de
tema (.cx--light/--cream) y la del fondo en (cxbody--*).
Para fondos claros se REMAPEAN los tokens fx dentro de .cx (cascada a
hijos) — asi no hay que reescribir cada componente .cx-*.
===================================================================== */
/* Fuentes configurables (Google Fonts las carga el JS) */
.cx{ font-family: var(--cx-font-body, 'Inter'), 'Inter', system-ui, sans-serif; }
.cx h1, .cx h2, .cx h3,
.cx-hero__title, .cx-section-head__title, .cx-prod__name, .cx-price-main, .cx-sheet__title{
font-family: var(--cx-font-title, 'Inter'), 'Inter', Georgia, serif;
}
/* Fondo de pagina por tema */
body.cxbody--dark{ background:#0a0d16; background-image:radial-gradient(circle at 50% -10%, #1b2540 0%, #0a0d16 62%, #05070d 100%); background-attachment:fixed; }
body.cxbody--light{ background:#eef2f7; }
body.cxbody--cream{ background:#f4efe6; }
/* Tema CLARO — re-mapea tokens dentro del catalogo (cascada a hijos) */
.cx--light{
--fx-text:17 24 39; --fx-text-muted:71 85 105; --fx-text-dim:148 163 184;
--fx-glass-bg:rgba(255,255,255,.94); --fx-glass-bg-soft:rgba(255,255,255,.82);
--fx-hairline:rgb(var(--fx-bg-2) / .10); --fx-hairline-strong:rgb(var(--fx-bg-2) / .18);
--fx-bg-0:238 242 247; --fx-bg-1:255 255 255; --fx-bg-2:255 255 255; --fx-bg-3:248 250 252;
--fx-success-soft:5 150 105;
}
.cx--light .cx-prod{ box-shadow:0 6px 20px rgb(var(--fx-bg-2) / .06); }
.cx--light .cx-prod__noimg, .cx--light .cx-prod__imgwrap{ background:rgb(241 245 249); }
/* Tema CREMA — calido, boutique */
.cx--cream{
--fx-text:41 37 36; --fx-text-muted:120 113 108; --fx-text-dim:168 162 158;
--fx-glass-bg:rgba(255,253,250,.95); --fx-glass-bg-soft:rgba(255,253,250,.84);
--fx-hairline:rgba(120,113,108,.16); --fx-hairline-strong:rgba(120,113,108,.28);
--fx-bg-0:245 240 232; --fx-bg-1:255 253 250; --fx-bg-2:255 253 250; --fx-bg-3:250 245 238;
--fx-success-soft:5 150 105;
}
.cx--cream .cx-prod{ box-shadow:0 6px 18px rgba(120,90,50,.07); }
.cx--cream .cx-prod__noimg, .cx--cream .cx-prod__imgwrap{ background:rgb(250 245 238); }
/* Los SHEETS (carrito + detalle del producto) viven FUERA de #app, así que NO heredaban el
re-mapeo de .cx--light/.cx--cream → en catálogos claros salían con tokens oscuros (ventana
oscura, fea). Se los damos aquí desde el body para que combinen con la plantilla (Afiche = claro). */
body.cxbody--light .cx-sheet{ --fx-text:17 24 39; --fx-text-muted:71 85 105; --fx-text-dim:148 163 184;
--fx-hairline:rgb(15 23 42 / .10); --fx-hairline-strong:rgb(15 23 42 / .18);
--fx-bg-0:238 242 247; --fx-bg-1:255 255 255; --fx-bg-2:255 255 255; --fx-glass-bg:rgba(255,255,255,.95); }
body.cxbody--cream .cx-sheet{ --fx-text:41 37 36; --fx-text-muted:120 113 108; --fx-text-dim:168 162 158;
--fx-hairline:rgba(120,113,108,.16); --fx-hairline-strong:rgba(120,113,108,.28);
--fx-bg-0:245 240 232; --fx-bg-1:255 253 250; --fx-bg-2:255 253 250; --fx-glass-bg:rgba(255,253,250,.96); }
body.cxbody--light .cx-sheet, body.cxbody--cream .cx-sheet{ box-shadow:0 -24px 60px -20px rgb(15 23 42 / .28); }
/* Forma de botones (modificador en .cx) */
.cx--btn-pildora .cx-prod__add, .cx--btn-pildora .cx-hero__cta, .cx--btn-pildora .cx-sheet__send{ border-radius:999px; }
.cx--btn-recto .cx-prod__add, .cx--btn-recto .cx-hero__cta, .cx--btn-recto .cx-sheet__send{ border-radius:8px; }
.cx--btn-redondo .cx-prod__add,.cx--btn-redondo .cx-hero__cta,.cx--btn-redondo .cx-sheet__send{ border-radius:16px; }
.cx--btn-grande .cx-prod__add, .cx--btn-grande .cx-hero__cta, .cx--btn-grande .cx-sheet__send{ border-radius:22px; }
.cx--btn-cuadrado .cx-prod__add,.cx--btn-cuadrado .cx-hero__cta,.cx--btn-cuadrado .cx-sheet__send{ border-radius:2px; }
/* HERO landing — variantes */
.cx-hero{ padding:clamp(26px,5vw,52px) clamp(20px,4vw,44px); }
.cx-hero--minimal{ background:transparent; border:none; padding-left:0; padding-right:0; }
.cx-hero--imagen{ min-height:clamp(220px,42vw,360px); display:flex; align-items:flex-end; }
.cx-hero--imagen .cx-hero__cover{ opacity:.62; }
.cx-hero--imagen::after{ content:''; position:absolute; inset:0;
background:linear-gradient(to top, rgb(var(--fx-bg-0)) 2%, rgb(var(--fx-bg-0) / .25) 55%, transparent 100%); }
.cx-hero__inner{ position:relative; z-index:2; }
.cx-hero__ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cx-hero__cta{ height:46px; padding:0 22px; border:none; border-radius:var(--cx-btn-radius,14px); cursor:pointer;
background:rgb(var(--cx-accent)); color:#fff; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px;
box-shadow:0 10px 26px rgb(var(--cx-accent) / .4); transition:transform .15s var(--fx-ease-out), filter .2s; text-decoration:none; white-space:nowrap; }
.cx-hero__cta:hover{ filter:brightness(1.08); } .cx-hero__cta:active{ transform:scale(.97); }
.cx-hero__cta--ghost{ background:transparent; color:rgb(var(--cx-accent)); border:1.5px solid rgb(var(--cx-accent) / .5); box-shadow:none; }
/* Encabezado de seccion editorial */
.cx-section-head{ margin:34px 0 16px; }
.cx-section-head__kicker{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--cx-accent)); }
.cx-section-head__title{ font-size:clamp(20px,4vw,29px); font-weight:800; letter-spacing:-.02em; margin-top:4px; color:rgb(var(--fx-text)); }
.cx-section-head__line{ height:3px; width:54px; border-radius:999px; background:rgb(var(--cx-accent)); margin-top:11px; }
/* Destacados (franja superior, tarjetas grandes) */
.cx-featured{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .cx-featured{ grid-template-columns:repeat(2,1fr); } }
.cx-featured .cx-prod__imgwrap{ aspect-ratio:16/10; }
.cx-featured .cx-prod__name{ font-size:17px; }
.cx-featured .cx-price-main{ font-size:22px; }
/* Precio anterior (tachado) cuando hay precio del catalogo distinto */
.cx-price-old{ font-size:13px; color:rgb(var(--fx-text-dim)); text-decoration:line-through; }
/* Reveal al hacer scroll */
.cx-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--fx-ease-out), transform .6s var(--fx-ease-out); }
.cx-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .cx-reveal{ opacity:1; transform:none; transition:none; } }
/* Sin descripcion (badge en el gestor) */
.cat-warn{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
color:rgb(var(--fx-attention)); background:rgb(var(--fx-attention) / .12); border:1px solid rgb(var(--fx-attention) / .3);
padding:3px 8px; border-radius:999px; }
.cat-ai-btn{ border:1px solid rgb(var(--fx-primary) / .4); background:rgb(var(--fx-primary) / .12); color:rgb(var(--fx-primary-soft));
border-radius:var(--fx-r-md); padding:7px 12px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
transition:all .16s var(--fx-ease-out); }
.cat-ai-btn:hover{ background:rgb(var(--fx-primary) / .2); } .cat-ai-btn:active{ transform:scale(.96); }
.cat-ai-btn:disabled{ opacity:.5; cursor:default; }
.cat-ai-spin{ width:14px; height:14px; border-radius:50%; border:2px solid rgb(var(--fx-primary-soft) / .3); border-top-color:rgb(var(--fx-primary-soft)); animation:cxspin .7s linear infinite; display:inline-block; }
/* Editor con vista previa (split en escritorio) */
.cat-ed-split{ display:flex; gap:0; align-items:flex-start; }
.cat-ed-form{ flex:1; min-width:0; }
/* Wizard (editor por pasos) */
.cat-wizard{ position:sticky; top:0; z-index:6; background:rgb(var(--fx-bg-1)); padding:6px 0 12px; margin-bottom:6px;
border-bottom:1px solid var(--fx-hairline); }
.cat-wbar{ height:4px; border-radius:999px; background:rgb(148 163 184 / .14); overflow:hidden; margin-bottom:10px; }
.cat-wbar__fill{ height:100%; width:0; background:rgb(var(--fx-primary)); border-radius:999px; transition:width .3s var(--fx-ease-out); }
.cat-wsteps{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.cat-wsteps::-webkit-scrollbar{ display:none; }
.cat-wstep{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 6px; border-radius:999px; flex-shrink:0;
border:1px solid var(--fx-hairline); background:rgb(148 163 184 / .05); cursor:pointer; transition:all .15s var(--fx-ease-out); }
.cat-wstep__dot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:800;
background:rgb(148 163 184 / .16); color:rgb(var(--fx-text-muted)); flex-shrink:0; }
.cat-wstep__t{ font-size:12px; font-weight:600; color:rgb(var(--fx-text-dim)); white-space:nowrap; }
.cat-wstep.is-on{ border-color:rgb(var(--fx-primary) / .5); background:rgb(var(--fx-primary) / .1); }
.cat-wstep.is-on .cat-wstep__dot{ background:rgb(var(--fx-primary)); color:#fff; }
.cat-wstep.is-on .cat-wstep__t{ color:rgb(var(--fx-primary-soft)); }
.cat-wstep.is-done .cat-wstep__dot{ background:rgb(var(--fx-success)); color:#fff; }
.cat-wstep.is-done .cat-wstep__t{ color:rgb(var(--fx-text-muted)); }
.cat-wiz-footer{ justify-content:space-between; align-items:center; gap:10px; }
.cat-wiz-foot__mid{ font-size:12px; font-weight:600; color:rgb(var(--fx-text-dim)); white-space:nowrap; }
@media (max-width:560px){ .cat-wiz-foot__mid{ display:none; } }
.cat-ed-preview{ display:none; }
@media (min-width:1024px){
.cat-ed-preview{ display:block; width:380px; flex-shrink:0; position:sticky; top:0; align-self:flex-start;
height:min(78vh,780px); margin:-4px -4px -4px 14px; border:1px solid var(--fx-hairline); border-radius:18px; overflow:hidden;
background:rgb(var(--fx-bg-0) / .6); }
.cat-ed-preview__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--fx-hairline); font-size:12px; font-weight:700; color:rgb(var(--fx-text-muted)); }
.cat-ed-preview__bar i{ color:rgb(var(--fx-primary-soft)); }
.cat-ed-preview iframe{ width:100%; height:calc(100% - 44px); border:0; display:block; background:#0a0d16; }
}
.cat-prev-fab{ position:fixed; right:16px; bottom:calc(86px + env(safe-area-inset-bottom)); z-index:1150;
height:46px; padding:0 18px; border:none; border-radius:999px; background:rgb(var(--fx-primary)); color:#fff; font-weight:700; font-size:13px;
box-shadow:var(--fx-shadow-2); display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
@media (min-width:1024px){ .cat-prev-fab{ display:none; } }
/* =====================================================================
v5.5 — CATALOGO: subir portada + fotos por producto
===================================================================== */
/* Público: galería de miniaturas en la tarjeta */
.cx-thumbs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:2px; scrollbar-width:none; }
.cx-thumbs::-webkit-scrollbar{ display:none; }
.cx-thumb{ width:38px; height:38px; flex-shrink:0; border-radius:9px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; background:rgb(148 163 184 / .12); transition:border-color .15s var(--fx-ease-out); }
.cx-thumb.is-on{ border-color:rgb(var(--cx-accent)); }
.cx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Gestor: subir portada (dropzone) */
.cat-cover{ width:100%; aspect-ratio:16/9; border-radius:16px; border:1.5px dashed var(--fx-hairline-strong);
background:rgb(148 163 184 / .05); display:grid; place-items:center; cursor:pointer; overflow:hidden; position:relative;
color:rgb(var(--fx-text-muted)); transition:border-color .16s var(--fx-ease-out), background .16s var(--fx-ease-out); }
.cat-cover:hover{ border-color:rgb(var(--fx-primary) / .5); background:rgb(var(--fx-primary) / .06); }
/* Con imagen: se ve COMPLETA (sin recortar) y sin fondo añadido. La cuadrícula
tenue deja ver la transparencia de los PNG ("solo la imagen"). */
.cat-cover.has-img{ cursor:default; border-style:solid; border-color:var(--fx-hairline);
background-color:rgb(148 163 184 / .04);
background-image:linear-gradient(45deg, rgb(148 163 184 / .1) 25%, transparent 25%, transparent 75%, rgb(148 163 184 / .1) 75%),
linear-gradient(45deg, rgb(148 163 184 / .1) 25%, transparent 25%, transparent 75%, rgb(148 163 184 / .1) 75%);
background-size:18px 18px; background-position:0 0, 9px 9px; }
.cat-cover.has-img.has-fondo{ background-image:none; } /* fondo de color elegido: sin cuadrícula */
.cat-cover img{ width:100%; height:100%; object-fit:contain; }
/* Estado vacío: dimensiones bien resaltadas DENTRO del cuadro */
.cat-cover__empty{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; padding:16px; }
.cat-cover__ico{ font-size:30px; color:rgb(var(--fx-primary-soft)); }
.cat-cover__dims{ font-size:23px; font-weight:800; letter-spacing:.01em; color:rgb(var(--fx-text));
background:rgb(var(--fx-primary) / .12); color:rgb(var(--fx-primary)); padding:5px 16px; border-radius:999px; }
.cat-cover__cta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:rgb(var(--fx-text-muted)); }
.cat-cover__note{ font-size:11px; line-height:1.45; color:rgb(var(--fx-text-dim)); max-width:300px; }
.cat-cover__del{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
background:rgb(2 6 14 / .6); color:#fff; display:grid; place-items:center; font-size:15px; backdrop-filter:blur(4px); z-index:2; }
.cat-cover__del:hover{ background:rgb(var(--fx-danger) / .85); }
.cat-cover.is-loading{ pointer-events:none; }
/* Fondo opcional para la portada */
.cat-cover-bg{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:10px; }
.cat-cover-bg.is-disabled{ opacity:.45; pointer-events:none; }
.cat-cover-bg__lbl{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:rgb(var(--fx-text-muted)); }
.cat-cover-bg__lbl i{ color:rgb(var(--fx-primary-soft)); font-size:14px; }
.cat-cover-bg__opts{ display:flex; gap:6px; flex-wrap:wrap; }
.cat-bgchip{ display:inline-flex; align-items:center; gap:6px; position:relative; min-height:34px; padding:6px 12px; cursor:pointer;
font-size:12px; font-weight:600; color:rgb(var(--fx-text-muted)); border:1px solid var(--fx-hairline); border-radius:999px;
background:rgb(148 163 184 / .05); transition:border-color .15s var(--fx-ease-out), color .15s var(--fx-ease-out), background .15s var(--fx-ease-out); }
.cat-bgchip:hover{ border-color:var(--fx-hairline-strong); color:rgb(var(--fx-text)); }
.cat-bgchip.is-on{ border-color:rgb(var(--fx-primary)); color:rgb(var(--fx-primary)); background:rgb(var(--fx-primary) / .1); }
.cat-bgchip__dot{ width:14px; height:14px; border-radius:50%; border:1px solid var(--fx-hairline-strong); }
.cat-bgchip--pick input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
/* Intro de paso */
.cat-step-intro{ font-size:11.5px; line-height:1.5; color:rgb(var(--fx-text-dim)); margin:-4px 0 14px; }
/* Gestor: fotos por producto */
.cat-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.cat-photo{ width:54px; height:54px; border-radius:10px; overflow:hidden; position:relative; border:1px solid var(--fx-hairline); flex-shrink:0; background:rgb(148 163 184 / .08); }
.cat-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-photo__del{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgb(var(--fx-danger)); color:#fff; border:none; font-size:9px; cursor:pointer; display:grid; place-items:center; line-height:1; }
/* Estrella para elegir esta foto como portada (se ve primero en el catálogo) */
.cat-photo__cover{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; border:none; cursor:pointer;
background:rgb(2 6 14 / .55); color:#fff; font-size:11px; display:grid; place-items:center; line-height:1; backdrop-filter:blur(3px);
transition:background .14s var(--fx-ease-out), color .14s var(--fx-ease-out); }
.cat-photo__cover:hover{ background:rgb(var(--fx-attention)); color:#231803; }
.cat-photo-add{ width:54px; height:54px; border-radius:10px; border:1.5px dashed var(--fx-hairline-strong); background:rgb(148 163 184 / .05);
display:grid; place-items:center; cursor:pointer; color:rgb(var(--fx-primary-soft)); font-size:22px; flex-shrink:0; transition:all .15s var(--fx-ease-out); }
.cat-photo-add:hover{ border-color:rgb(var(--fx-primary) / .5); background:rgb(var(--fx-primary) / .08); }
.cat-photo-add.is-loading{ font-size:0; }
.cat-photo-add.is-loading::after{ content:''; width:18px; height:18px; border-radius:50%; border:2px solid rgb(var(--fx-primary-soft) / .3); border-top-color:rgb(var(--fx-primary-soft)); animation:cxspin .7s linear infinite; }
/* --- Fotos del producto (editor): tiles un poco más grandes, con etiqueta de
"Subir foto" y badge "Portada" en la primera (prioridad sobre el inventario) --- */
.cat-photo, .cat-photo-add{ width:62px; height:62px; }
.cat-photo.is-cover{ border-color:rgb(var(--fx-primary) / .55); box-shadow:0 0 0 2px rgb(var(--fx-primary) / .2); }
.cat-photo__badge{ position:absolute; left:0; right:0; bottom:0; padding:1px 0; text-align:center;
font-size:7.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
background:rgb(var(--fx-primary) / .92); color:#fff; }
/* Etiqueta de la foto que viene del inventario (no es la portada elegida) */
.cat-photo__badge--inv{ background:rgb(100 116 139 / .92); }
.cat-photo-add{ display:flex; flex-direction:column; gap:2px; font-size:19px; }
.cat-photo-add span{ font-size:8px; font-weight:800; letter-spacing:.02em; line-height:1; text-transform:uppercase; }
/* --- Control "Poner en oferta" por producto (editor) --- */
.cat-offer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.cat-offer-switch{ display:inline-flex; align-items:center; cursor:pointer; user-select:none; flex-shrink:0; }
.cat-offer-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cat-offer-switch__tag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.01em;
padding:5px 11px; border-radius:999px; border:1px solid var(--fx-hairline); color:rgb(var(--fx-text-muted));
background:rgb(148 163 184 / .08); transition:all .15s var(--fx-ease-out); }
.cat-offer-switch__tag i{ font-size:13px; }
.cat-offer-switch:hover .cat-offer-switch__tag{ border-color:rgb(var(--fx-attention) / .4); color:rgb(var(--fx-text)); }
.cat-offer-switch.is-on .cat-offer-switch__tag{ color:rgb(var(--fx-attention-soft)); border-color:rgb(var(--fx-attention) / .5);
background:rgb(var(--fx-attention) / .15); }
.cat-offer-panel{ border:1px solid rgb(var(--fx-attention) / .32); background:rgb(var(--fx-attention) / .06);
border-radius:12px; padding:10px 11px; display:flex; flex-direction:column; gap:5px; }
.cat-offer-normal{ font-size:11.5px; color:rgb(var(--fx-text-muted)); }
.cat-offer-normal s{ color:rgb(var(--fx-text-dim)); }
.cat-offer-off{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; line-height:1.4; color:rgb(var(--fx-attention-soft)); }
.cat-offer-off s{ color:rgb(var(--fx-text-dim)); font-weight:600; }
.cat-offer-off b{ color:rgb(var(--fx-attention-soft)); }
/* --- Flechas para reordenar banners (editor) --- */
.cat-banner__head{ display:flex; align-items:center; gap:8px; }
.cat-banner__ord{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; }
/* =====================================================================
v5.6 — CATALOGO PRO: barra de marca, banner, hero premium, tarjetas
profesionales, modos Landing/Catalogo, y controles del editor.
===================================================================== */
/* FIX: el CTA del footer heredaba el color de enlace (texto invisible) */
.cx-footer a.cx-hero__cta{ color:#fff; }
.cx-footer a.cx-hero__cta.cx-hero__cta--ghost{ color:rgb(var(--cx-accent)); }
/* El .cx ahora respira más en escritorio */
.cx{ max-width:1240px; }
@media (min-width:1024px){ .cx{ padding:0 28px 140px; } }
/* ---------- Barra de marca (logo + nombre, sticky arriba) ---------- */
.cx-brandbar{ position:sticky; top:0; z-index:30; display:flex; flex-direction:column; gap:9px;
padding:10px 4px; margin:0 -4px 0; background:rgb(var(--fx-bg-0) / .9);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--fx-hairline); }
.cx-brandbar__row{ display:flex; align-items:center; gap:10px; }
.cx-search--top{ width:100%; }
.cx-search--top input{ padding-right:40px; }
/* Botones de la barra (lupa, WhatsApp) — limpios, cuadrados redondeados */
.cx-toolbtn{ width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; cursor:pointer;
border-radius:12px; border:1px solid var(--fx-hairline); background:rgb(148 163 184 / .08);
color:rgb(var(--fx-text-muted)); font-size:18px; text-decoration:none; transition:all .15s var(--fx-ease-out); }
.cx-toolbtn:hover{ border-color:rgb(var(--cx-accent) / .5); color:rgb(var(--cx-accent)); }
.cx-toolbtn--wa{ color:rgb(var(--fx-success-soft)); border-color:rgb(var(--fx-success) / .32); background:rgb(var(--fx-success) / .12); }
.cx-toolbtn--wa:hover{ border-color:rgb(var(--fx-success) / .6); color:rgb(var(--fx-success-soft)); }
/* Buscador desplegable: contraído por defecto, se abre al tocar la lupa */
.cx-searchwrap{ max-height:0; overflow:hidden; margin-top:0;
transition:max-height .26s var(--fx-ease-out), margin-top .26s var(--fx-ease-out); }
.cx-brandbar.is-search .cx-searchwrap{ max-height:60px; margin-top:9px; }
.cx-brandbar.is-search .cx-searchtoggle{ border-color:rgb(var(--cx-accent) / .5); color:rgb(var(--cx-accent)); background:rgb(var(--cx-accent) / .1); }
.cx-search__x{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px;
display:grid; place-items:center; border:none; background:transparent; color:rgb(var(--fx-text-dim)); cursor:pointer; font-size:14px; }
.cx-search__x:hover{ color:rgb(var(--cx-accent)); }
.cx-brandbar__logo{ width:44px; height:44px; border-radius:13px; flex-shrink:0; object-fit:contain;
background:#fff; padding:5px; box-sizing:border-box; display:grid; place-items:center; color:rgb(var(--cx-accent)); font-size:19px;
border:1px solid var(--fx-hairline); box-shadow:0 2px 8px -2px rgb(0 0 0 / .25); }
/* Sin logo (iniciales): chip de marca con gradiente del acento (no blanco) */
.cx-brandbar__logo--ini{ font-size:16px; font-weight:800; letter-spacing:-.02em; padding:0; color:#fff;
background:linear-gradient(150deg, rgb(var(--cx-accent)), rgb(var(--cx-accent) / .65));
border-color:rgb(var(--cx-accent) / .4); }
.cx-brandbar__name{ font-weight:800; font-size:15.5px; letter-spacing:-.01em; color:rgb(var(--fx-text)); min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-brandbar__spacer{ flex:1; }
.cx-brandbar__wa{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px;
background:rgb(var(--fx-success) / .14); color:rgb(var(--fx-success-soft)); border:1px solid rgb(var(--fx-success) / .3);
font-weight:700; font-size:12.5px; text-decoration:none; flex-shrink:0; }
.cx-brandbar__wa span{ display:none; } @media (min-width:520px){ .cx-brandbar__wa span{ display:inline; } }
/* ---------- Banner promo (franja superior tipo Shopify) ---------- */
.cx-promo{ display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
padding:9px 16px; border-radius:12px; margin:12px 0 0; font-size:12.5px; font-weight:700; letter-spacing:.01em;
background:linear-gradient(90deg, rgb(var(--cx-accent) / .22), rgb(var(--cx-accent2, var(--cx-accent)) / .22));
color:rgb(var(--fx-text)); border:1px solid rgb(var(--cx-accent) / .3); }
.cx-promo i{ color:rgb(var(--cx-accent)); font-size:16px; }
.cx-promo__track{ display:flex; align-items:center; width:100%; justify-content:center; }
.cx-promo__seg{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
/* Cuando el texto no cabe → cinta que se desliza (loop continuo con el clon) */
.cx-promo.is-marquee{ justify-content:flex-start; }
.cx-promo.is-marquee .cx-promo__track{ width:max-content; justify-content:flex-start; animation:cxMarquee 18s linear infinite; }
.cx-promo.is-marquee .cx-promo__seg{ padding:0 30px; }
.cx-promo.is-marquee:hover .cx-promo__track{ animation-play-state:paused; }
@keyframes cxMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cx-promo.is-marquee .cx-promo__track{ animation:none; } }
/* ---------- HERO premium ---------- */
.cx-hero{ border-radius:24px; }
.cx-hero--gradiente{ background:
radial-gradient(120% 140% at 0% 0%, rgb(var(--cx-accent) / .30), transparent 55%),
radial-gradient(120% 140% at 100% 100%, rgb(var(--cx-accent2, var(--cx-accent)) / .22), transparent 55%),
linear-gradient(160deg, rgb(var(--fx-bg-2)), rgb(var(--fx-bg-1))); }
.cx-hero__title{ font-size:clamp(26px,5.2vw,46px); line-height:1.04; }
.cx-hero__msg{ font-size:clamp(13px,1.6vw,16px); max-width:54ch; }
@media (min-width:1024px){
.cx-hero{ padding:clamp(40px,4vw,68px) clamp(36px,4vw,60px); }
.cx-hero__logo{ width:104px; height:104px; font-size:40px; border-radius:24px; }
.cx-hero__logo--ini{ font-size:42px; }
}
/* Hero SPLIT: texto + imagen lado a lado en escritorio */
.cx-hero--split{ padding:0; overflow:hidden; }
.cx-hero--split .cx-hero__inner{ display:grid; grid-template-columns:1fr; align-items:stretch; gap:0; }
.cx-hero--split .cx-hero__txt{ padding:clamp(26px,4vw,52px); align-self:center; }
.cx-hero--split .cx-hero__media{ min-height:200px; background-size:cover; background-position:center; }
@media (min-width:860px){
.cx-hero--split .cx-hero__inner{ grid-template-columns:1.05fr .95fr; }
.cx-hero--split .cx-hero__media{ min-height:340px; }
}
/* ---------- Tarjeta de producto PRO ---------- */
.cx-prod{ border-radius:18px; box-shadow:0 1px 0 rgb(255 255 255 / .03) inset; }
.cx-prod:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -16px rgb(var(--cx-accent) / .4); border-color:rgb(var(--cx-accent) / .45); }
.cx-prod__name{ font-size:15px; letter-spacing:-.01em; }
.cx-prod__price{ align-items:baseline; gap:9px; }
.cx-price-main{ font-size:20px; }
/* Botón flotante de "agregar" sobre la imagen (rápido, tipo tienda) */
.cx-quickadd{ position:absolute; z-index:4; right:10px; bottom:10px; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
background:rgb(var(--cx-accent)); color:#fff; display:grid; place-items:center; font-size:19px; box-shadow:0 8px 20px -6px rgb(var(--cx-accent) / .6);
transform:translateY(6px); opacity:0; transition:opacity .2s var(--fx-ease-out), transform .2s var(--fx-ease-out), filter .15s; }
.cx-prod:hover .cx-quickadd, .cx-quickadd.is-in{ opacity:1; transform:none; }
.cx-quickadd.is-in{ background:rgb(var(--fx-success)); }
.cx-quickadd:active{ filter:brightness(.95); transform:scale(.92); }
@media (hover:none){ .cx-quickadd{ opacity:1; transform:none; } }
/* Cinta de destacado más elegante */
.cx-badge--dest{ background:linear-gradient(90deg, rgb(var(--cx-accent)), rgb(var(--cx-accent2, var(--cx-accent)))); box-shadow:0 4px 12px -4px rgb(var(--cx-accent) / .7); }
/* ---------- MODOS: Landing vs Catalogo ---------- */
/* Landing: más aire, héroe protagonista, tarjetas grandes */
.cx--landing .cx-products{ gap:22px; }
.cx--landing .cx-section-head{ text-align:center; margin:48px 0 22px; }
.cx--landing .cx-section-head__line{ margin-left:auto; margin-right:auto; }
.cx--landing .cx-hero{ text-align:left; }
/* Catalogo: denso, eficiente para explorar */
.cx--catalogo .cx-hero{ padding:clamp(20px,3vw,30px) clamp(20px,3vw,30px); }
.cx--catalogo .cx-hero__title{ font-size:clamp(20px,3.5vw,30px); }
.cx--catalogo .cx-products{ gap:12px; }
.cx--catalogo .cx-section-head{ margin:22px 0 12px; }
/* ---------- Hint de precios (lo que verá el cliente) ---------- */
.cat-price-hint{ font-size:11px; color:rgb(var(--fx-text-dim)); margin-top:5px; line-height:1.4; }
.cat-price-hint b{ color:rgb(var(--fx-text-muted)); font-weight:700; }
/* ---------- Editor: selector de modo (Landing/Catalogo) ---------- */
.cat-modecards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.cat-mode{ cursor:pointer; border:1.5px solid var(--fx-hairline); border-radius:14px; padding:14px; background:rgb(148 163 184 / .04);
transition:all .16s var(--fx-ease-out); }
.cat-mode.is-on{ border-color:rgb(var(--fx-primary)); background:rgb(var(--fx-primary) / .10); }
.cat-mode__ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:20px; margin-bottom:8px;
background:rgb(var(--fx-primary) / .14); color:rgb(var(--fx-primary-soft)); }
.cat-mode__t{ font-weight:800; font-size:14px; color:rgb(var(--fx-text)); }
.cat-mode__d{ font-size:11.5px; color:rgb(var(--fx-text-muted)); margin-top:2px; line-height:1.4; }
/* ---------- Editor: color picker (color libre + secundario) ---------- */
.cat-colorrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cat-colorpick{ position:relative; width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px dashed var(--fx-hairline-strong); cursor:pointer; flex-shrink:0; display:grid; place-items:center; color:rgb(var(--fx-text-dim)); }
.cat-colorpick input{ position:absolute; inset:-6px; width:150%; height:150%; border:0; padding:0; cursor:pointer; opacity:0; }
.cat-colorpick i{ pointer-events:none; font-size:16px; }
/* ---------- Editor: vista previa escritorio/móvil ---------- */
.cat-ed-preview__bar{ justify-content:space-between; }
.cat-prevtoggle{ display:inline-flex; background:rgb(148 163 184 / .1); border-radius:999px; padding:2px; gap:2px; }
.cat-prevtoggle button{ border:none; background:transparent; color:rgb(var(--fx-text-muted)); width:30px; height:24px; border-radius:999px; cursor:pointer; display:grid; place-items:center; font-size:14px; }
.cat-prevtoggle button.is-on{ background:rgb(var(--fx-primary)); color:#fff; }
@media (min-width:1024px){
.cat-ed-preview{ width:clamp(380px, 38vw, 560px); }
.cat-ed-preview.is-mobile{ width:420px; }
.cat-ed-preview.is-mobile .cat-ed-frame{ width:390px; margin:0 auto; box-shadow:0 0 0 1px var(--fx-hairline); border-radius:0; }
.cat-ed-frame{ height:100%; }
}
.cat-ed-frame{ width:100%; height:calc(100% - 44px); }
/* ---------- Plantilla nueva: ESCAPARATE (filas editoriales alternadas) ---------- */
.cx-products--escaparate{ grid-template-columns:1fr; gap:clamp(20px,3vw,34px); }
.cx-products--escaparate .cx-prod{ flex-direction:row; align-items:stretch; border-radius:22px; }
.cx-products--escaparate .cx-prod__imgwrap{ width:48%; aspect-ratio:auto; min-height:260px; flex-shrink:0; }
.cx-products--escaparate .cx-prod__body{ padding:clamp(20px,3vw,40px); justify-content:center; gap:10px; }
.cx-products--escaparate .cx-prod__name{ font-size:clamp(19px,2.4vw,26px); }
.cx-products--escaparate .cx-prod__desc{ -webkit-line-clamp:4; font-size:14px; }
.cx-products--escaparate .cx-price-main{ font-size:clamp(22px,2.6vw,30px); }
.cx-products--escaparate .cx-prod__add{ width:auto; align-self:flex-start; padding:0 26px; height:46px; margin-top:14px; }
.cx-products--escaparate .cx-prod:nth-child(even){ flex-direction:row-reverse; }
@media (max-width:680px){
.cx-products--escaparate .cx-prod, .cx-products--escaparate .cx-prod:nth-child(even){ flex-direction:column; }
.cx-products--escaparate .cx-prod__imgwrap{ width:100%; aspect-ratio:4/3; min-height:0; }
.cx-products--escaparate .cx-prod__add{ width:100%; }
}
/* Refinamiento responsive de las plantillas existentes en escritorio */
@media (min-width:1100px){
.cx-products--cuadricula{ grid-template-columns:repeat(4,1fr); gap:20px; }
.cx-products--minimal{ grid-template-columns:repeat(4,1fr); gap:10px 28px; }
.cx-products--revista{ grid-template-columns:repeat(3,1fr); }
.cx-products--stories{ max-width:600px; }
}
@media (min-width:1500px){ .cx-products--cuadricula{ grid-template-columns:repeat(5,1fr); } }
/* =====================================================================
v5.7 — PLANTILLA PREMIUM "STUDIO" (público)
Minimal/blanco, mucho aire, FOTO protagonista (contain sobre pad claro),
swatches en puntos bajo el nombre (reusa .cx-thumbs), línea fina + precio
grande, botón sobrio. Todo bajo .cx--tpl-studio para NO tocar otras
plantillas. Respeta color (--cx-accent), fuentes, forma de botón y
fondo claro/oscuro/crema que el usuario ya elige.
Inspiración: referencias/7.webp (Aarke) + catalogo3.webp (Carhartt).
===================================================================== */
/* --- Fondo pastel: base crema + leve tinte; las FORMAS ONDULADAS las ponen los
blobs SVG (.cx-studio-decor) que sí tienen borde orgánico, como el modelo. --- */
.cx--tpl-studio{ background:transparent; }
.cx--tpl-studio::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
background:
radial-gradient(42% 32% at 102% 1%, rgb(var(--cx-accent2, 245 158 11) / .10), transparent 60%),
radial-gradient(42% 32% at -2% 101%, rgb(var(--cx-accent) / .08), transparent 60%),
#fcfbfd; }
/* --- Formas onduladas decorativas (blobs SVG) en las esquinas. Fijas, detrás de
todo, coloreadas desde el color de marca (--cx-accent) y el acento 2. --- */
.cx-studio-decor{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.cx-blob{ position:absolute; display:block; }
.cx-blob--tl { top:-7vw; left:-6vw; width:clamp(240px,34vw,460px); }
.cx-blob--tl path{ fill:rgb(var(--cx-accent) / .30); }
.cx-blob--tl2{ top:-9vw; left:5vw; width:clamp(160px,24vw,320px); }
.cx-blob--tl2 path{ fill:rgb(var(--cx-accent2, 245 158 11) / .28); }
.cx-blob--br { bottom:-8vw; right:-6vw; width:clamp(230px,32vw,440px); }
.cx-blob--br path{ fill:rgb(var(--cx-accent) / .22); }
.cx-blob--br2{ bottom:3vw; right:-9vw; width:clamp(150px,22vw,300px); }
.cx-blob--br2 path{ fill:rgb(var(--cx-accent2, 245 158 11) / .20); }
@media (max-width:600px){
.cx-blob--tl { top:-12vw; left:-14vw; width:48vw; }
.cx-blob--tl2{ top:-16vw; left:18vw; width:34vw; }
.cx-blob--br { bottom:-14vw; right:-14vw; width:46vw; }
.cx-blob--br2{ display:none; }
}
/* --- Barra de marca como TARJETA (modelo: logo-chip + nombre | sello + acciones) --- */
.cx--tpl-studio .cx-brandbar{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-bottom:none; padding:16px 0 2px; margin:0; }
.cx--tpl-studio .cx-brandbar__row{ background:#fff; border:1px solid rgb(0 0 0 / .06); border-radius:20px;
padding:9px 11px 9px 9px; gap:11px; box-shadow:0 18px 40px -30px rgb(0 0 0 / .55); }
.cx--tpl-studio .cx-brandbar__logo{ width:42px; height:42px; border-radius:12px; box-shadow:none; border-color:rgb(0 0 0 / .06); }
.cx--tpl-studio .cx-brandbar__name{ font-size:16px; }
.cx--tpl-studio .cx-brandbar.is-search .cx-searchwrap{ max-height:62px; }
.cxbody--dark .cx--tpl-studio .cx-brandbar__row{ background:rgb(255 255 255 / .04); border-color:rgb(255 255 255 / .09); }
/* Sello "Catálogo · mes / año" — rectángulo de borde fino (como "This Month's Catalog 20·21") */
.cx-catbadge{ display:flex; align-items:center; gap:9px; flex-shrink:0; padding:5px 10px;
border:1.5px solid rgb(var(--fx-text) / .8); border-radius:5px; }
.cx-catbadge__txt{ display:flex; flex-direction:column; line-height:1.05; text-align:right; }
.cx-catbadge__txt b{ font-size:12.5px; font-weight:800; letter-spacing:-.01em; color:rgb(var(--fx-text)); }
.cx-catbadge__txt span{ font-size:8px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgb(var(--fx-text-muted)); }
.cx-catbadge__yr{ display:flex; flex-direction:column; line-height:.9; font-weight:800; font-size:15px;
letter-spacing:-.03em; color:rgb(var(--fx-text)); padding-left:9px; border-left:1.5px solid rgb(var(--fx-text) / .8); }
@media (max-width:559px){ .cx-catbadge{ display:none; } }
/* --- Precio estilo afiche: entero grande + centavos en superíndice + tachado --- */
.cx--tpl-studio .cx-price-main{ font-weight:800; letter-spacing:-.02em; color:rgb(var(--fx-text)); }
.cx--tpl-studio .cx-price-cents{ vertical-align:super; font-size:.56em; font-weight:700; }
.cx--tpl-studio .cx-price-was{ text-decoration:line-through; color:rgb(var(--fx-text-dim));
font-weight:600; font-size:.78em; margin-left:7px; }
.cx--tpl-studio .cx-price-bs{ font-size:11.5px; }
/* --- Marca (categoría) en cursiva del acento, como en el modelo --- */
.cx--tpl-studio .cx-prod__cat{ font-style:italic; text-transform:none; letter-spacing:0;
font-weight:600; font-size:12.5px; color:rgb(var(--cx-accent)); }
/* ====== GRILLA "1-2": 2 columnas, tarjeta limpia (foto en blanco + texto) ====== */
.cx-products--studio{ grid-template-columns:repeat(2,1fr); gap:20px 14px; }
@media (min-width:900px){ .cx-products--studio{ grid-template-columns:repeat(3,1fr); gap:30px 22px; } }
.cx--tpl-studio .cx-prod{ background:transparent; border:none; box-shadow:none; overflow:visible; }
.cx--tpl-studio .cx-prod:hover{ transform:none; }
.cx--tpl-studio .cx-prod__imgwrap{ aspect-ratio:1/1; border-radius:20px; background:#fff;
border:1px solid rgb(0 0 0 / .04); display:grid; place-items:center; padding:8%; box-sizing:border-box;
box-shadow:0 18px 36px -22px rgb(0 0 0 / .4); }
.cx--tpl-studio .cx-prod__img{ width:100%; height:100%; object-fit:contain; transition:transform .4s var(--fx-ease-out); }
.cx--tpl-studio .cx-prod:hover .cx-prod__img{ transform:scale(1.05); }
.cx--tpl-studio .cx-prod__noimg{ background:transparent; }
.cx--tpl-studio .cx-quickadd{ display:none; }
.cx--tpl-studio .cx-prod__off{ display:none; }
.cx--tpl-studio .cx-prod__body{ padding:11px 4px 4px; gap:2px; align-items:flex-start; text-align:left; }
.cx--tpl-studio .cx-prod__name{ order:1; font-size:14.5px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:rgb(var(--fx-text)); }
.cx--tpl-studio .cx-prod__cat{ order:2; margin-top:1px; }
.cx--tpl-studio .cx-prod__desc{ order:3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; font-size:11px; line-height:1.45; color:rgb(var(--fx-text-muted)); margin-top:3px; }
.cx--tpl-studio .cx-variants, .cx--tpl-studio .cx-thumbs{ order:4; margin-top:5px; overflow:visible; }
.cx--tpl-studio .cx-prod__price{ order:5; margin-top:8px; align-items:baseline; }
.cx--tpl-studio .cx-price-main{ font-size:23px; color:rgb(var(--fx-text)); }
.cx--tpl-studio .cx-price-cents{ font-size:.5em; }
.cx--tpl-studio .cx-prod__add{ order:6; margin-top:auto; height:38px; border-radius:999px; font-weight:700;
background:rgb(var(--cx-accent) / .12); color:rgb(var(--cx-accent)); border:1px solid rgb(var(--cx-accent) / .25); }
.cx--tpl-studio .cx-prod__add:hover{ background:rgb(var(--cx-accent)); color:#fff; border-color:transparent; }
.cx--tpl-studio .cx-prod__add:active{ transform:scale(.97); }
.cx--tpl-studio .cx-prod__add.is-in{ background:rgb(var(--fx-success)); color:#fff; border-color:transparent; }
.cx--tpl-studio .cx-prod__spacer{ display:block; } /* empuja el botón abajo → tarjetas parejas */
.cx--tpl-studio .cx-thumb{ width:16px; height:16px; border-radius:50%; border:1px solid var(--fx-hairline-strong); }
.cx--tpl-studio .cx-thumb.is-on{ border-color:rgb(var(--cx-accent)); box-shadow:0 0 0 2px rgb(var(--cx-accent) / .25); }
.cx-prod__add--quote{ background:rgb(var(--fx-success) / .12); color:rgb(var(--fx-success-soft)); border:1px solid rgb(var(--fx-success) / .35); }
.cx-prod__add--quote:hover{ background:rgb(var(--fx-success)); color:#fff; border-color:transparent; }
/* ====== DESTACADOS "1-1": afiche grande — producto flotando + %OFF + sello de precio ====== */
.cx--tpl-studio .cx-featured{ display:flex; flex-direction:column; gap:20px; grid-template-columns:none; overflow:visible; padding:0; }
.cx--tpl-studio .cx-featured > .cx-prod{ position:relative; display:grid; grid-template-columns:1fr; gap:6px;
background:#fff; border-radius:26px; padding:20px 18px 18px; border:1px solid rgb(0 0 0 / .05);
box-shadow:0 26px 54px -30px rgb(0 0 0 / .4); overflow:visible; }
.cx--tpl-studio .cx-featured .cx-prod__imgwrap{ aspect-ratio:1/1; border:none; background:transparent;
box-shadow:none; padding:5%; border-radius:0; display:grid; place-items:center; overflow:visible; }
.cx--tpl-studio .cx-featured .cx-prod__img{ width:100%; height:100%; object-fit:contain;
object-position:center; filter:drop-shadow(0 18px 26px rgb(0 0 0 / .18)); }
.cx--tpl-studio .cx-featured .cx-prod__body{ padding:0 4px 4px; gap:3px; }
.cx--tpl-studio .cx-featured .cx-prod__name{ font-size:20px; }
.cx--tpl-studio .cx-featured .cx-prod__cat{ font-size:13.5px; }
.cx--tpl-studio .cx-featured .cx-prod__desc{ order:3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.5; margin-top:4px; }
/* Botón de DESTACADOS: SÓLIDO como el CTA "Ver productos" (la personalización
de estilo de botón del usuario, .cx--btnstyle-*, lo sigue sobreescribiendo). */
.cx--tpl-studio .cx-featured .cx-prod__add{ order:6; max-width:230px; height:46px; font-size:14.5px;
background:rgb(var(--cx-accent)); color:#fff; border:none; box-shadow:0 12px 26px -12px rgb(var(--cx-accent) / .8); }
.cx--tpl-studio .cx-featured .cx-prod__add:hover{ filter:brightness(1.08); background:rgb(var(--cx-accent)); color:#fff; }
.cx--tpl-studio .cx-featured .cx-prod__add.is-in{ background:rgb(var(--fx-success)); }
/* %OFF grande sobre la imagen (solo si hay descuento) */
.cx--tpl-studio .cx-featured .cx-prod__off{ display:block; position:absolute; top:16px; left:18px; z-index:3;
font-size:24px; line-height:.86; font-weight:800; letter-spacing:-.03em; color:rgb(var(--cx-accent));
text-shadow:0 4px 14px rgb(var(--cx-accent) / .3); }
.cx--tpl-studio .cx-featured .cx-prod__off b{ font-size:1.7em; font-weight:900; display:block; }
/* Sello de precio circular punteado (como el modelo) */
.cx--tpl-studio .cx-featured .cx-prod__price{ position:absolute; top:14px; right:14px; z-index:3; margin:0;
width:88px; height:88px; border-radius:50%; display:grid; place-items:center; text-align:center; flex-wrap:nowrap;
background:#fff; border:2px dashed rgb(var(--cx-accent) / .55); box-shadow:0 12px 26px -12px rgb(0 0 0 / .35); }
.cx--tpl-studio .cx-featured .cx-price-main{ font-size:15px; line-height:1; }
.cx--tpl-studio .cx-featured .cx-price-was, .cx--tpl-studio .cx-featured .cx-price-bs{ display:none; }
/* ===== Destacados Afiche: CÍRCULOS de fondo + títulos grandes + reveal escalonado ===== */
/* Círculos decorativos en las esquinas de CADA tarjeta (como los blobs del fondo de la página).
La tarjeta recorta (overflow:hidden) → los círculos quedan como detalles de esquina. */
.cx--tpl-studio .cx-featured > .cx-prod{ overflow:hidden; }
.cx--tpl-studio .cx-featured > .cx-prod::before,
.cx--tpl-studio .cx-featured > .cx-prod::after{ content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
/* Círculo grande arriba-derecha + uno chico (vía box-shadow) — color de marca. */
.cx--tpl-studio .cx-featured > .cx-prod::before{ width:230px; height:230px; top:-90px; right:-70px;
background:rgb(var(--cx-accent) / .13);
box-shadow:-150px 250px 0 -70px rgb(var(--cx-accent) / .10); }
/* Círculo abajo-izquierda + uno chico — color secundario. */
.cx--tpl-studio .cx-featured > .cx-prod::after{ width:180px; height:180px; bottom:-70px; left:-55px;
background:rgb(var(--cx-accent2, 245 158 11) / .13);
box-shadow:230px -120px 0 -60px rgb(var(--cx-accent2, 245 158 11) / .10); }
/* El contenido va por encima de los círculos (los badges absolutos ya tienen su z-index). */
.cx--tpl-studio .cx-featured .cx-prod__imgwrap,
.cx--tpl-studio .cx-featured .cx-prod__body{ position:relative; z-index:1; }
/* Títulos de destacados EXTRA llamativos. */
.cx--tpl-studio .cx-featured .cx-prod__name{ font-size:25px; font-weight:800; line-height:1.08; letter-spacing:-.02em; }
.cx--tpl-studio .cx-featured .cx-prod__cat{ font-size:13px; font-weight:800; letter-spacing:.08em; }
.cx--tpl-studio .cx-featured .cx-prod__desc{ font-size:13px; }
@media (min-width:680px){
.cx--tpl-studio .cx-featured .cx-prod__name{ font-size:36px; }
.cx--tpl-studio .cx-featured .cx-prod__cat{ font-size:14px; }
.cx--tpl-studio .cx-featured .cx-prod__desc{ font-size:14px; -webkit-line-clamp:4; }
}
/* "Próximamente" en escritorio: centrado abajo de la imagen y más grande. */
@media (min-width:680px){
.cx--tpl-studio .cx-featured .cx-badge--prox{ left:50%; right:auto; transform:translateX(-50%); bottom:14px;
font-size:13.5px; padding:8px 18px; gap:7px; box-shadow:0 8px 20px -6px rgb(var(--cx-accent) / .8); }
.cx--tpl-studio .cx-featured .cx-badge--prox i{ font-size:16px; }
}
/* Reveal escalonado: las tarjetas van apareciendo una tras otra al hacer scroll. */
.cx-prod.cx-reveal:not(.is-in){ transform:translateY(24px) scale(.98); }
.cx-featured > .cx-prod:nth-child(2).cx-reveal{ transition-delay:.09s; }
.cx-featured > .cx-prod:nth-child(3).cx-reveal{ transition-delay:.18s; }
.cx-featured > .cx-prod:nth-child(4).cx-reveal{ transition-delay:.27s; }
.cx-featured > .cx-prod:nth-child(n+5).cx-reveal{ transition-delay:.34s; }
.cx-products .cx-prod:nth-child(3n+2).cx-reveal{ transition-delay:.07s; }
.cx-products .cx-prod:nth-child(3n+3).cx-reveal{ transition-delay:.14s; }
@media (prefers-reduced-motion: reduce){ .cx-prod.cx-reveal:not(.is-in){ transform:none; } }
@media (min-width:680px){
.cx--tpl-studio .cx-featured > .cx-prod{ grid-template-columns:1.05fr .95fr; align-items:center; padding:26px; gap:20px; }
.cx--tpl-studio .cx-featured .cx-prod__imgwrap{ aspect-ratio:1/1; }
/* Destacados en zig-zag: los pares van invertidos (imagen a la derecha, texto a la izquierda). */
.cx--tpl-studio .cx-featured > .cx-prod:nth-child(even){ grid-template-columns:.95fr 1.05fr; }
.cx--tpl-studio .cx-featured > .cx-prod:nth-child(even) .cx-prod__imgwrap{ order:2; }
.cx--tpl-studio .cx-featured > .cx-prod:nth-child(even) .cx-prod__body{ order:1; }
}
/* --- Sello rotado "SHOP NOW · ONLINE" en destacados (decorativo, como el modelo) --- */
.cx-shopstamp{ position:absolute; width:72px; height:72px; right:7%; bottom:7%; z-index:4; pointer-events:none;
opacity:.92; filter:drop-shadow(0 4px 10px rgb(0 0 0 / .18)); }
.cx-shopstamp__txt{ font-size:11.6px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; fill:rgb(var(--cx-accent)); }
.cx-shopstamp__mid{ font-size:17px; fill:rgb(var(--cx-accent)); }
@media (min-width:680px){ .cx-shopstamp{ width:86px; height:86px; } }
/* --- Responsive: distribución (2 móvil · 3 tablet · 4 pantallas grandes) --- */
/* MASONRY (estilo Pinterest): cada tarjeta se empaca justo DEBAJO de la anterior
de su misma columna, sin esperar a la más alta de la fila → NO quedan huecos en
blanco bajo las tarjetas cortas (sin variantes / envío gratis / vendidos). Usamos
columnas CSS (no grid) porque están soportadas en todos los móviles, sin JS ni
funciones experimentales. Cada tarjeta evita partirse y lleva su propio margen.
El alto de fila lo da el contenido: una tarjeta corta deja paso de inmediato a la
siguiente de su columna. Nota: el orden de lectura pasa a ser por COLUMNA (baja y
salta a la de al lado), no fila por fila — es el comportamiento natural del masonry. */
.cx-products--studio{ display:block; columns:2; column-gap:11px; align-items:initial; grid-template-columns:none; }
/* La tarjeta como BLOQUE (no flex): dentro de columnas, un contenedor flex se estira a
la altura de la columna y dejaba espacio vacío bajo el cuerpo. Como bloque mide justo
su contenido (imagen + cuerpo) y se empaca pegada a la de arriba, sin huecos.
El cuerpo sigue siendo flex (lo necesita para ordenar nombre/precio/botón). */
.cx-products--studio .cx-prod{ display:block; break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:14px; }
.cx-products--studio .cx-prod__body{ flex:none; }
@media (min-width:540px){
.cx-products--studio{ columns:3; column-gap:15px; }
.cx-products--studio .cx-prod{ margin-bottom:20px; }
}
@media (min-width:1120px){
.cx-products--studio{ columns:4; column-gap:20px; }
.cx-products--studio .cx-prod{ margin-bottom:28px; }
}
.cx--tpl-studio .cx-prod__add{ margin-top:10px; }
/* Catálogo Afiche: todo el cuerpo (nombre, descripción, precio, "disponible" y botón)
va pegado a la imagen, sin hueco. El botón ya NO se clava al fondo (margin-top:auto):
eso era lo que generaba el espacio vacío en las tarjetas con poco contenido. */
.cx-products--studio .cx-prod__spacer{ display:none; }
.cx-products--studio .cx-prod__add{ margin-top:10px; }
/* Aire entre el bloque de precio/disponible y el botón (el gap se suma al auto). */
.cx-products--studio .cx-prod__body{ gap:11px; }
/* Descuento (-%) al lado del precio; los bolívares van en su propia línea. */
.cx-products--studio .cx-prod__price{ column-gap:7px; row-gap:3px; }
.cx-products--studio .cx-price-bs{ width:100%; }
@media (max-width:600px){
.cx-products--studio .cx-price-main{ font-size:18px; }
.cx-products--studio .cx-price-was{ font-size:12px; }
.cx-products--studio .cx-price-off{ font-size:10px; padding:2px 6px; }
}
/* ===== OFERTAS más llamativas + en español (sin "OFF"): chip -N% + sello antes/ahora ===== */
/* Chip "-N%" junto al precio (grilla y plantillas base): píldora sólida del acento */
.cx-price-off{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:-.01em;
padding:2px 8px; border-radius:999px; background:rgb(var(--cx-accent)); color:#fff; line-height:1.35; }
/* %OFF en destacados (Afiche): STICKER sólido circular (más llamativo que el texto) */
.cx--tpl-studio .cx-featured .cx-prod__off{ display:grid; place-items:center; position:absolute; top:12px; left:14px; right:auto; z-index:5;
width:58px; height:58px; padding:0; background:rgb(var(--cx-accent)); color:#fff; border-radius:50%;
box-shadow:0 8px 20px -6px rgb(var(--cx-accent) / .7), 0 0 0 4px rgb(var(--cx-accent) / .18);
font-size:0; text-shadow:none; transform:rotate(-8deg); }
.cx--tpl-studio .cx-featured .cx-prod__off b{ display:block; font-size:18px; font-weight:900; letter-spacing:-.03em; line-height:1; }
/* Sello de precio (Afiche): ANTES (tachado) arriba + AHORA grande del acento; aro punteado marcado */
.cx--tpl-studio .cx-featured .cx-prod__price{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
width:96px; height:96px; border:2.5px dashed rgb(var(--cx-accent) / .7); background:#fff;
box-shadow:0 14px 28px -12px rgb(0 0 0 / .42); }
.cx--tpl-studio .cx-featured .cx-price-was{ display:block; order:-1; font-size:9.5px; font-weight:700;
text-decoration:line-through; color:rgb(var(--fx-text-dim)); margin:0; }
.cx--tpl-studio .cx-featured .cx-price-main{ font-size:18px; font-weight:900; color:rgb(var(--cx-accent)); }
.cx--tpl-studio .cx-featured .cx-price-off{ display:none; } /* el % ya está en el sticker */
/* Sello de precio DENTRO de la imagen (afiche): siempre sobre la foto, móvil y escritorio.
Reemplaza al precio del body como sello → ya no se va sobre el texto en escritorio. */
.cx--tpl-studio .cx-featured .cx-prod__body .cx-prod__price{ display:none; }
.cx-featseal{ position:absolute; top:12px; right:12px; z-index:5; width:94px; height:94px; border-radius:50%;
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px;
box-sizing:border-box; background:#fff; border:2.5px dashed rgb(var(--cx-accent) / .7);
box-shadow:0 14px 28px -12px rgb(0 0 0 / .42); }
.cx-featseal__was{ font-size:10px; font-weight:700; text-decoration:line-through; color:rgb(var(--fx-text-dim)); line-height:1.1; }
.cx-featseal__now{ font-size:18px; font-weight:900; letter-spacing:-.02em; color:rgb(var(--cx-accent)); line-height:1.05; }
.cx-featseal__now .cx-price-cents{ font-size:.5em; vertical-align:super; font-weight:800; }
@media (min-width:680px){ .cx-featseal{ width:104px; height:104px; } .cx-featseal__now{ font-size:20px; } }
/* Miniaturas de fotos (los "circulitos"): MÁS GRANDES solo en destacados; en la grilla quedan
pequeñas a propósito (si no, se salen). Muestran la foto real (cuadradas redondeadas). */
.cx--tpl-studio .cx-featured .cx-thumbs{ gap:8px; margin-top:10px; flex-wrap:wrap; }
.cx--tpl-studio .cx-featured .cx-thumb{ width:48px; height:48px; border-radius:12px; border:2px solid transparent; box-shadow:none; }
.cx--tpl-studio .cx-featured .cx-thumb.is-on{ border-color:rgb(var(--cx-accent)); box-shadow:0 0 0 2px rgb(var(--cx-accent) / .18); }
.cx--tpl-studio .cx-featured .cx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Encabezados de sección (afiche, finos) */
.cx--tpl-studio .cx-section-head__title{ font-weight:800; letter-spacing:-.01em; }
.cx--tpl-studio .cx-section-head__kicker{ letter-spacing:.14em; color:rgb(var(--cx-accent)); }
/* --- Hero editorial Studio: TEXTO claro a la izquierda + FOTO a la derecha ---
Estructura fija (la del dueño): logo + qué vendes + CTA a la izquierda,
imagen de producto/portada a la derecha. Sin tarjeta, mucho aire. Cae a una
columna en móvil (texto primero = claridad). Funciona aunque el hero_estilo
guardado sea minimal/gradiente: .cx--tpl-studio gana por especificidad. */
.cx--tpl-studio .cx-hero{ background:transparent; border:none; box-shadow:none;
padding:8px 0 6px; margin:14px 0 22px; overflow:visible; }
.cx--tpl-studio .cx-hero__cover, .cx--tpl-studio .cx-hero::after{ display:none; }
.cx--tpl-studio .cx-hero__inner{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
.cx--tpl-studio .cx-hero__txt{ padding:0; text-align:left; align-self:center; }
.cx--tpl-studio .cx-hero__logo{ width:54px; height:54px; border-radius:14px; margin-bottom:14px; }
.cx--tpl-studio .cx-hero__logo--ini{ font-size:24px; }
.cx--tpl-studio .cx-hero__biz{ font-size:11px; letter-spacing:.16em; }
.cx--tpl-studio .cx-hero__title{ font-size:clamp(28px,7vw,40px); font-weight:700; letter-spacing:-.025em;
line-height:1.05; margin-top:8px; }
.cx--tpl-studio .cx-hero__msg{ font-size:14.5px; margin-top:12px; max-width:46ch; line-height:1.55; }
.cx--tpl-studio .cx-hero__ctas{ margin-top:22px; }
/* Foto del hero: encuadrada, esquinas suaves, sin pesar (no es banner gigante en móvil).
Se muestra COMPLETA (contain) sobre un fondo difuminado de ella misma → nunca se
corta el contenido ni quedan barras vacías. */
.cx--tpl-studio .cx-hero__media{ position:relative; overflow:hidden; width:100%; aspect-ratio:16/11;
min-height:0; border-radius:18px; border:1px solid var(--fx-hairline); order:-1; background:rgb(248 250 252); }
.cxbody--dark .cx--tpl-studio .cx-hero__media{ border-color:rgb(226 232 240 / .18); background:rgb(15 23 42); }
.cx-hero__media-blur{ position:absolute; inset:0; background-size:cover; background-position:center;
filter:blur(20px) saturate(1.12); transform:scale(1.2); opacity:.5; }
.cx-hero__media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* Portada "limpia": sin difuminado. Sin fondo = transparente; o el color elegido
(que llega por estilo inline y gana sobre estas reglas). */
.cx-hero__media--clean{ background:transparent; }
.cx--tpl-studio .cx-hero__media--clean,
.cxbody--dark .cx--tpl-studio .cx-hero__media--clean{ background:transparent; border-color:transparent; }
/* Escritorio: dos columnas reales (texto izquierda, foto derecha) */
@media (min-width:720px){
.cx--tpl-studio .cx-hero__inner{ grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); }
.cx--tpl-studio .cx-hero__media{ order:0; aspect-ratio:4/3; }
.cx--tpl-studio .cx-hero__title{ font-size:clamp(34px,3.4vw,50px); }
}
/* Agotado en Studio: se atenúa la FOTO (no el card entero), así no choca con la
animación de entrada (cx-reveal.is-in) y se ve premium, no "apagado". */
.cx--tpl-studio .cx-prod.is-out .cx-prod__imgwrap{ opacity:.5; filter:grayscale(.35); }
.cx--tpl-studio .cx-prod.is-out .cx-prod__name{ color:rgb(var(--fx-text-muted)); }
/* Logo en el hero: redundante con el de la barra superior (brandbar) → se oculta.
La marca ya está arriba; el hero arranca con el nombre como antetítulo. */
.cx--tpl-studio .cx-hero__logo{ display:none; }
/* "Descargar PDF" reubicado en el pie (ya no estorba en la barra de búsqueda) */
.cx-footer__pdf{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
border-radius:var(--cx-btn-radius,12px); border:1px solid var(--fx-hairline-strong);
background:transparent; color:rgb(var(--fx-text-muted)); font:inherit; font-size:13px; font-weight:600;
cursor:pointer; transition:border-color .16s var(--fx-ease-out), color .16s var(--fx-ease-out); }
.cx-footer__pdf:hover{ border-color:rgb(var(--cx-accent) / .5); color:rgb(var(--cx-accent)); }
.cx-footer__pdf:active{ transform:scale(.98); }
/* =====================================================================
v5.7 — EDITOR: galería de plantillas premium (con demo en vivo)
===================================================================== */
.cat-gallery{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:520px){ .cat-gallery{ grid-template-columns:1fr 1fr; } }
.cat-gcard{ position:relative; border:1.5px solid var(--fx-hairline); border-radius:16px; overflow:hidden;
background:rgb(148 163 184 / .04); transition:border-color .16s var(--fx-ease-out), box-shadow .16s var(--fx-ease-out); }
.cat-gcard.is-on{ border-color:rgb(var(--fx-primary)); box-shadow:0 0 0 3px rgb(var(--fx-primary) / .15); }
.cat-gcard.is-locked{ opacity:.7; }
.cat-gcard__art{ height:108px; position:relative; overflow:hidden; border-bottom:1px solid var(--fx-hairline);
display:grid; place-items:center; }
.cat-gcard__body{ padding:10px 12px 12px; }
.cat-gcard__name{ font-weight:800; font-size:13.5px; color:rgb(var(--fx-text)); display:flex; align-items:center; gap:6px; }
.cat-gcard__desc{ font-size:11px; color:rgb(var(--fx-text-muted)); margin-top:3px; line-height:1.45; min-height:31px; }
.cat-gcard__soon{ position:absolute; top:8px; right:8px; z-index:2; font-size:9px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgb(var(--fx-attention) / .18);
color:rgb(var(--fx-attention)); border:1px solid rgb(var(--fx-attention) / .3); }
.cat-gcard__actions{ display:flex; gap:8px; margin-top:11px; }
.cat-gbtn{ flex:1; height:34px; border-radius:9px; font-size:11.5px; font-weight:700; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--fx-hairline-strong);
background:transparent; color:rgb(var(--fx-text-muted)); transition:all .15s var(--fx-ease-out); }
.cat-gbtn:hover:not(:disabled){ border-color:rgb(var(--fx-primary) / .5); color:rgb(var(--fx-text)); }
.cat-gbtn--use{ background:rgb(var(--fx-primary)); color:#fff; border-color:transparent; }
.cat-gbtn--use:hover:not(:disabled){ filter:brightness(1.07); color:#fff; }
.cat-gbtn:disabled{ opacity:.45; cursor:not-allowed; }
/* Mini-arte representativo por plantilla (CSS puro, sin imágenes) */
.cat-gart{ position:absolute; inset:0; padding:12px; display:flex; flex-direction:column; gap:6px; }
.cat-gart__row{ display:flex; gap:6px; flex:1; }
.cat-gart__cell{ flex:1; border-radius:5px; background:rgb(148 163 184 / .22); }
.cat-gart--studio{ background:#fff; }
.cat-gart--studio .cat-gart__cell{ background:rgb(226 232 240); border:1px solid rgb(0 0 0 / .04); }
.cat-gart--onyx{ background:linear-gradient(160deg,#0b1020,#1b2440); }
.cat-gart--onyx .cat-gart__cell{ background:rgb(99 102 241 / .35); }
.cat-gart--lumiere{ background:#f6ece2; }
.cat-gart--lumiere .cat-gart__cell{ background:rgb(200 160 120 / .45); }
.cat-gart--atelier{ background:#efe7da; }
.cat-gart--atelier .cat-gart__cell{ background:rgb(150 120 90 / .4); }
.cat-gart--mercado{ background:#fff7ed; }
.cat-gart--mercado .cat-gart__cell{ background:rgb(245 158 11 / .4); }
/* Plantillas clásicas (desplegable, compat) */
.cat-classic-toggle{ display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:none;
cursor:pointer; padding:10px 2px; color:rgb(var(--fx-text-muted)); font-size:12.5px; font-weight:700; }
.cat-classic-toggle i.cat-chev{ margin-left:auto; transition:transform .2s var(--fx-ease-out); }
.cat-classic-toggle.is-open i.cat-chev{ transform:rotate(180deg); }
.cat-classic-wrap{ overflow:hidden; }
/* =====================================================================
v5.8 — PLANTILLAS PREMIUM (Onyx · Lumière · Atelier · Mercado)
+ hero más sobrio (fuera el degradado-glow tipo "banner de IA")
+ carrusel de destacados (móvil) común a las premium.
Cada una tiene ESTRUCTURA, TARJETA y HERO propios (no solo color).
===================================================================== */
/* --- HERO sobrio: el "color" ahora es un panel limpio, sin glow chillón --- */
.cx-hero--gradiente{ background:linear-gradient(180deg, rgb(var(--fx-bg-2)), rgb(var(--fx-bg-1)));
border:1px solid var(--fx-hairline); }
.cx--light .cx-hero--gradiente, .cx--cream .cx-hero--gradiente{ box-shadow:0 16px 40px -28px rgb(var(--fx-bg-2) / .20); }
.cx-hero--minimal{ background:transparent; border:none; padding-left:0; padding-right:0; }
/* --- Carrusel de destacados (móvil) para TODAS las premium --- */
.cx--tpl-onyx .cx-featured, .cx--tpl-lumiere .cx-featured, .cx--tpl-mercado .cx-featured{
display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:4px 0 12px; scrollbar-width:none; }
.cx--tpl-onyx .cx-featured::-webkit-scrollbar, .cx--tpl-lumiere .cx-featured::-webkit-scrollbar,
.cx--tpl-mercado .cx-featured::-webkit-scrollbar{ display:none; }
.cx--tpl-onyx .cx-featured > .cx-prod, .cx--tpl-lumiere .cx-featured > .cx-prod,
.cx--tpl-mercado .cx-featured > .cx-prod{ scroll-snap-align:start; flex:0 0 76%; max-width:300px; }
@media (min-width:760px){
.cx--tpl-onyx .cx-featured, .cx--tpl-lumiere .cx-featured, .cx--tpl-mercado .cx-featured{
display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; padding:0; }
.cx--tpl-onyx .cx-featured > .cx-prod, .cx--tpl-lumiere .cx-featured > .cx-prod,
.cx--tpl-mercado .cx-featured > .cx-prod{ flex:initial; max-width:none; }
}
/* ====== ONYX — oscura, tech, foto a sangre, precio con brillo ====== */
.cx-products--onyx{ grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:680px){ .cx-products--onyx{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (min-width:1100px){ .cx-products--onyx{ grid-template-columns:repeat(4,1fr); } }
/* Tarjeta Onyx: alturas PAREJAS (flex + botón abajo) y la foto en un MARCO
redondeado interior (contain, no recortada de borde a borde). */
.cx--tpl-onyx .cx-prod{ background:linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .02));
border:1px solid rgb(255 255 255 / .09); border-radius:18px; overflow:hidden;
display:flex; flex-direction:column; }
.cx--tpl-onyx .cx-prod:hover{ transform:translateY(-4px); border-color:rgb(var(--cx-accent) / .6);
box-shadow:0 24px 54px -22px rgb(var(--cx-accent) / .6); }
.cx--tpl-onyx .cx-prod__imgwrap{ aspect-ratio:1/1; margin:11px 11px 0; border-radius:13px;
background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .09);
display:grid; place-items:center; padding:9%; box-sizing:border-box; }
.cx--tpl-onyx .cx-prod__img{ width:100%; height:100%; object-fit:contain; }
.cx--tpl-onyx .cx-prod__body{ padding:13px 14px 15px; gap:6px; flex:1; }
.cx--tpl-onyx .cx-prod__add{ margin-top:auto; }
.cx--tpl-onyx .cx-prod__cat{ color:rgb(var(--cx-accent)); }
.cx--tpl-onyx .cx-prod__name{ font-weight:700; }
.cx--tpl-onyx .cx-price-main{ font-size:21px; font-weight:800; color:rgb(var(--cx-accent));
text-shadow:0 0 20px rgb(var(--cx-accent) / .55); }
.cx--tpl-onyx .cx-prod__add{ background:rgb(var(--cx-accent)); color:#fff; border:none;
box-shadow:0 12px 28px -12px rgb(var(--cx-accent) / .85); }
/* HERO de Onyx — oscuro, profundo, con malla tech, halo de acento y título con brillo */
.cx--tpl-onyx .cx-hero{ position:relative; overflow:hidden; border-radius:24px;
background:
radial-gradient(120% 130% at 50% -20%, rgb(var(--cx-accent) / .30), transparent 58%),
radial-gradient(90% 80% at 112% 0%, rgb(var(--cx-accent2, var(--cx-accent)) / .18), transparent 60%),
linear-gradient(180deg, #10131f, #070a12);
border:1px solid rgb(255 255 255 / .10);
box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 70px -34px rgb(var(--cx-accent) / .55); }
/* Fondo animado tipo AURORA: dos resplandores de acento que derivan lento.
Solo transform/opacity → GPU, casi sin costo. Reemplaza la cuadrícula genérica. */
.cx--tpl-onyx .cx-hero::before{ content:''; position:absolute; inset:-30%; pointer-events:none; z-index:0; opacity:.9;
background:
radial-gradient(38% 38% at 28% 30%, rgb(var(--cx-accent) / .42), transparent 68%),
radial-gradient(34% 34% at 76% 64%, rgb(var(--cx-accent2, var(--cx-accent)) / .30), transparent 70%),
radial-gradient(30% 30% at 60% 8%, rgb(255 255 255 / .07), transparent 70%);
filter:blur(18px); will-change:transform;
animation:cxOnyxAurora 20s ease-in-out infinite alternate; }
@keyframes cxOnyxAurora{
0%{ transform:translate3d(-5%,-3%,0) scale(1); }
50%{ transform:translate3d(4%,5%,0) scale(1.1); }
100%{ transform:translate3d(-2%,3%,0) scale(1.05); } }
@media (prefers-reduced-motion: reduce){ .cx--tpl-onyx .cx-hero::before{ animation:none; } }
.cx--tpl-onyx .cx-hero::after{ content:''; position:absolute; left:50%; top:-45%; width:72%; height:130%; transform:translateX(-50%);
pointer-events:none; background:radial-gradient(circle at 50% 50%, rgb(var(--cx-accent) / .35), transparent 60%); filter:blur(26px); }
.cx--tpl-onyx .cx-hero__inner, .cx--tpl-onyx .cx-hero__txt{ position:relative; z-index:2; }
.cx--tpl-onyx .cx-hero__logo{ box-shadow:0 0 0 1px rgb(var(--cx-accent) / .4), 0 18px 42px -14px rgb(var(--cx-accent) / .75); }
.cx--tpl-onyx .cx-hero__biz{ color:rgb(var(--cx-accent)); text-shadow:0 0 18px rgb(var(--cx-accent) / .5); }
.cx--tpl-onyx .cx-hero__title{ background:linear-gradient(180deg, #fff, rgb(255 255 255 / .72));
-webkit-background-clip:text; background-clip:text; color:transparent; }
.cx--tpl-onyx .cx-hero__cta{ box-shadow:0 12px 30px -10px rgb(var(--cx-accent) / .85); }
.cx--tpl-onyx .cx-thumb{ border-radius:6px; }
/* Onyx: hero CENTRADO — el producto flota en el centro con un halo de acento,
y debajo el texto y los botones centrados. Sin tarjeta/marco de fondo. */
.cx--tpl-onyx .cx-hero{ text-align:center; }
.cx--tpl-onyx .cx-hero__inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.cx--tpl-onyx .cx-hero__logo{ display:none; } /* la marca ya está en la barra superior */
.cx--tpl-onyx .cx-hero__txt{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:580px; }
.cx--tpl-onyx .cx-hero__msg{ margin-left:auto; margin-right:auto; }
.cx--tpl-onyx .cx-hero__ctas{ justify-content:center; }
/* Producto centrado, flotando con halo — sin caja ni borde */
.cx--tpl-onyx .cx-hero__media{ order:-1; width:min(100%, 440px); margin:0 auto; aspect-ratio:16/11; position:relative;
background:transparent; border:none; box-shadow:none; overflow:visible; border-radius:0; }
.cx--tpl-onyx .cx-hero__media::before{ content:''; position:absolute; left:50%; top:52%; width:90%; height:90%;
transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:0;
background:radial-gradient(circle, rgb(var(--cx-accent) / .55), transparent 68%); filter:blur(30px); }
.cx--tpl-onyx .cx-hero__media .cx-hero__media-blur{ opacity:.28; filter:blur(40px) saturate(1.3);
-webkit-mask-image:radial-gradient(circle, #000 45%, transparent 72%); mask-image:radial-gradient(circle, #000 45%, transparent 72%); }
.cx--tpl-onyx .cx-hero__media-img{ position:relative; z-index:1; padding:4%; object-fit:contain;
filter:drop-shadow(0 20px 40px rgb(0 0 0 / .6)); }
/* ====== LUMIÈRE — crema/serif, editorial, centrado, botón píldora ====== */
.cx-products--lumiere{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
@media (min-width:900px){ .cx-products--lumiere{ grid-template-columns:repeat(3,1fr); gap:44px 32px; } }
.cx--tpl-lumiere .cx-prod{ background:transparent; border:none; box-shadow:none; }
.cx--tpl-lumiere .cx-prod:hover{ transform:none; box-shadow:none; border:none; }
.cx--tpl-lumiere .cx-prod__imgwrap{ aspect-ratio:3/4; border-radius:4px; background:#fff; }
.cx--tpl-lumiere .cx-prod__img{ object-fit:cover; transition:transform .6s var(--fx-ease-out); }
.cx--tpl-lumiere .cx-prod:hover .cx-prod__img{ transform:scale(1.04); }
.cx--tpl-lumiere .cx-prod__body{ padding:16px 6px 4px; align-items:center; text-align:center; gap:7px; }
.cx--tpl-lumiere .cx-prod__cat{ color:rgb(var(--fx-text-dim)); font-weight:600; letter-spacing:.12em; }
.cx--tpl-lumiere .cx-prod__name{ font-family:var(--cx-font-title); font-size:18px; font-weight:600; letter-spacing:.01em; }
.cx--tpl-lumiere .cx-prod__desc{ display:none; }
.cx--tpl-lumiere .cx-prod__price{ justify-content:center; }
.cx--tpl-lumiere .cx-price-main{ font-family:var(--cx-font-title); font-size:21px; font-weight:600; }
.cx--tpl-lumiere .cx-prod__add{ border-radius:999px; background:transparent; width:auto; align-self:center;
padding:0 28px; border:1px solid rgb(var(--fx-text) / .35); color:rgb(var(--fx-text)); }
.cx--tpl-lumiere .cx-prod__add:hover{ background:rgb(var(--cx-accent)); border-color:transparent; color:#fff; }
.cx--tpl-lumiere .cx-section-head{ text-align:center; }
.cx--tpl-lumiere .cx-section-head__line{ margin-left:auto; margin-right:auto; }
.cx--tpl-lumiere .cx-hero__title{ font-family:var(--cx-font-title); font-weight:600; }
/* ====== ATELIER — editorial, filas alternadas con bloque de color ====== */
.cx-products--atelier{ grid-template-columns:1fr; gap:clamp(18px,3vw,30px); }
.cx--tpl-atelier .cx-prod{ flex-direction:row; align-items:stretch; border:none; border-radius:20px;
overflow:hidden; background:rgb(var(--cx-accent) / .08); }
.cx--tpl-atelier .cx-prod:hover{ transform:none; box-shadow:0 28px 56px -30px rgb(var(--cx-accent) / .5); }
.cx--tpl-atelier .cx-prod__imgwrap{ width:52%; aspect-ratio:auto; min-height:250px; border-radius:0; }
.cx--tpl-atelier .cx-prod__img{ object-fit:cover; }
.cx--tpl-atelier .cx-prod__body{ padding:clamp(20px,3vw,42px); justify-content:center; gap:11px; }
.cx--tpl-atelier .cx-prod__cat{ letter-spacing:.12em; }
.cx--tpl-atelier .cx-prod__name{ font-family:var(--cx-font-title); font-size:clamp(20px,2.5vw,30px); font-weight:700; line-height:1.12; }
.cx--tpl-atelier .cx-prod__desc{ -webkit-line-clamp:4; font-size:14px; }
.cx--tpl-atelier .cx-price-main{ font-size:clamp(22px,2.6vw,30px); font-weight:700; }
.cx--tpl-atelier .cx-prod__add{ width:auto; align-self:flex-start; padding:0 28px; height:46px; margin-top:6px; }
.cx--tpl-atelier .cx-prod:nth-child(even){ flex-direction:row-reverse;
background:rgb(var(--cx-accent2, var(--cx-accent)) / .08); }
@media (max-width:680px){
.cx--tpl-atelier .cx-prod, .cx--tpl-atelier .cx-prod:nth-child(even){ flex-direction:column; }
.cx--tpl-atelier .cx-prod__imgwrap{ width:100%; aspect-ratio:4/3; min-height:0; }
.cx--tpl-atelier .cx-prod__add{ width:100%; }
}
/* ====== MERCADO — densa, vibrante, ofertas, urgencia ====== */
.cx-products--mercado{ grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:680px){ .cx-products--mercado{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .cx-products--mercado{ grid-template-columns:repeat(4,1fr); gap:12px; } }
@media (min-width:1400px){ .cx-products--mercado{ grid-template-columns:repeat(5,1fr); } }
.cx--tpl-mercado .cx-prod{ border-radius:12px; border:1px solid var(--fx-hairline); }
.cx--tpl-mercado .cx-prod__imgwrap{ aspect-ratio:1/1; }
.cx--tpl-mercado .cx-prod__body{ padding:9px 10px 11px; gap:4px; }
.cx--tpl-mercado .cx-prod__cat{ display:none; }
.cx--tpl-mercado .cx-prod__name{ font-size:13px; font-weight:600; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cx--tpl-mercado .cx-prod__desc{ display:none; }
.cx--tpl-mercado .cx-prod__price{ margin-top:auto; }
.cx--tpl-mercado .cx-price-main{ font-size:18px; font-weight:800; color:rgb(var(--cx-accent)); }
.cx--tpl-mercado .cx-prod__add{ height:36px; font-size:12.5px; margin-top:6px; }
.cx--tpl-mercado .cx-badge--dest{ background:rgb(var(--fx-attention)); color:#231803;
box-shadow:0 4px 12px -4px rgb(var(--fx-attention) / .7); }
.cx--tpl-mercado .cx-quickadd{ width:34px; height:34px; font-size:16px; }
/* ---------- Mejora de plantillas CLÁSICAS (mejor forma/distribución) ---------- */
.cx-products--revista .cx-prod{ border-radius:20px; }
.cx-products--revista .cx-prod__imgwrap{ aspect-ratio:3/2; }
.cx-products--cuadricula .cx-prod{ border-radius:16px; }
.cx-products--minimal .cx-prod__name{ font-weight:600; }
.cx-products--lista .cx-prod{ border-radius:16px; }
.cx-products--lista .cx-prod__imgwrap{ width:120px; }
@media (min-width:680px){ .cx-products--lista .cx-prod__imgwrap{ width:160px; } }
/* =====================================================================
v5.9 — LOTE B: + fondos, + estilos de botón, + estilos de tarjeta,
banners múltiples y más bonitos, y editor más amplio/manejable.
===================================================================== */
/* ---------- FONDOS extra (remap de tokens dentro de .cx) ----------
Los claros llevan además .cx--light; los cálidos .cx--cream (ver JS). */
.cx--bg-carbon{ --fx-bg-0:18 18 20; --fx-bg-1:26 26 30; --fx-bg-2:32 32 38;
--fx-glass-bg:rgba(255,255,255,.05); --fx-hairline:rgba(255,255,255,.08); --fx-hairline-strong:rgba(255,255,255,.16); }
.cx--bg-medianoche{ --fx-bg-0:10 14 28; --fx-bg-1:16 22 44; --fx-bg-2:22 30 58;
--fx-glass-bg:rgba(255,255,255,.055); --fx-hairline:rgba(255,255,255,.09); --fx-hairline-strong:rgba(255,255,255,.18); }
.cx--bg-blanco{ --fx-bg-0:255 255 255; --fx-bg-1:255 255 255; --fx-bg-2:255 255 255; --fx-bg-3:250 250 252; }
.cx--bg-gris{ --fx-bg-0:233 236 240; --fx-bg-1:250 251 252; --fx-bg-2:250 251 252; --fx-bg-3:244 246 249; }
.cx--bg-hueso{ --fx-text:38 34 30; --fx-text-muted:110 102 94; --fx-text-dim:160 152 142;
--fx-glass-bg:rgba(255,254,250,.96); --fx-hairline:rgba(60,50,40,.10); --fx-hairline-strong:rgba(60,50,40,.18);
--fx-bg-0:248 245 239; --fx-bg-1:255 254 250; --fx-bg-2:255 254 250; --fx-bg-3:250 247 241; }
.cx--bg-arena{ --fx-text:46 40 32; --fx-text-muted:120 108 92; --fx-text-dim:168 156 138;
--fx-glass-bg:rgba(250,245,236,.96); --fx-hairline:rgba(90,70,45,.12); --fx-hairline-strong:rgba(90,70,45,.22);
--fx-bg-0:238 230 216; --fx-bg-1:249 243 233; --fx-bg-2:249 243 233; --fx-bg-3:244 236 223; }
/* Pad de foto claro en cualquier fondo oscuro extra (look galería en Studio) */
.cx--bg-carbon .cx--tpl-studio .cx-prod__imgwrap,
.cx--bg-medianoche .cx--tpl-studio .cx-prod__imgwrap,
.cxbody--dark .cx--tpl-studio .cx-prod__imgwrap{ background:rgb(248 250 252); }
/* ---------- ESTILOS DE BOTÓN (eje independiente del radio) ----------
No tocan el estado "Agregado" (.is-in) ni el CTA fantasma del hero. */
.cx--btnstyle-contorno .cx-prod__add:not(.is-in){ background:transparent; color:rgb(var(--cx-accent)); border:1.5px solid rgb(var(--cx-accent) / .6); }
.cx--btnstyle-contorno .cx-prod__add:not(.is-in):hover{ background:rgb(var(--cx-accent)); color:#fff; border-color:transparent; }
.cx--btnstyle-contorno .cx-hero__cta:not(.cx-hero__cta--ghost){ background:transparent; color:rgb(var(--cx-accent)); border:1.5px solid rgb(var(--cx-accent) / .6); }
.cx--btnstyle-suave .cx-prod__add:not(.is-in){ background:rgb(var(--cx-accent) / .14); color:rgb(var(--cx-accent)); border:none; }
.cx--btnstyle-suave .cx-prod__add:not(.is-in):hover{ background:rgb(var(--cx-accent) / .24); }
.cx--btnstyle-suave .cx-hero__cta:not(.cx-hero__cta--ghost){ background:rgb(var(--cx-accent) / .16); color:rgb(var(--cx-accent)); }
.cx--btnstyle-fantasma .cx-prod__add:not(.is-in){ background:transparent; color:rgb(var(--cx-accent)); border:none; }
.cx--btnstyle-fantasma .cx-prod__add:not(.is-in):hover{ background:rgb(var(--cx-accent) / .10); }
.cx--btnstyle-sombra .cx-prod__add:not(.is-in){ box-shadow:0 14px 28px -10px rgb(var(--cx-accent) / .85); }
.cx--btnstyle-sombra .cx-hero__cta:not(.cx-hero__cta--ghost){ box-shadow:0 14px 30px -10px rgb(var(--cx-accent) / .8); }
/* ---------- ESTILOS DE TARJETA (eje opcional; default = normal) ---------- */
.cx--card-marco .cx-prod{ border:1.5px solid var(--fx-hairline-strong); box-shadow:none; }
.cx--card-flotante .cx-prod{ box-shadow:0 22px 44px -22px rgba(2,6,23,.5); }
.cx--card-plano .cx-prod{ border:none; box-shadow:none; background:transparent; }
/* Elevada — sombra suave en capas + borde fino; se eleva con acento al pasar el cursor */
.cx--card-elevada .cx-prod{ border:1px solid var(--fx-hairline); border-radius:18px;
box-shadow:0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 26px -18px rgb(2 6 23 / .6);
transition:transform .24s var(--fx-ease-out), box-shadow .24s var(--fx-ease-out), border-color .24s var(--fx-ease-out); }
.cx--card-elevada .cx-prod:hover{ transform:translateY(-6px); border-color:rgb(var(--cx-accent) / .42);
box-shadow:0 1px 0 rgb(255 255 255 / .07) inset, 0 30px 56px -24px rgb(var(--cx-accent) / .5); }
/* Línea fina — contorno hairline elegante + esquinas nítidas + sombra sutil que crece */
.cx--card-linea .cx-prod{ border:1px solid rgb(var(--fx-text) / .14); border-radius:14px; background:transparent;
box-shadow:0 1px 2px rgb(2 6 23 / .12);
transition:transform .22s var(--fx-ease-out), box-shadow .22s var(--fx-ease-out), border-color .22s var(--fx-ease-out); }
.cx--card-linea .cx-prod:hover{ transform:translateY(-3px); border-color:rgb(var(--cx-accent) / .55);
box-shadow:0 14px 30px -18px rgb(var(--cx-accent) / .4); }
/* Vidrio — glassmorphism: translúcida, desenfoque y borde de luz */
.cx--card-vidrio .cx-prod{ background:linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
border:1px solid rgb(255 255 255 / .15); border-radius:18px;
-webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15);
box-shadow:0 1px 0 rgb(255 255 255 / .14) inset, 0 16px 36px -22px rgb(2 6 23 / .55);
transition:transform .22s var(--fx-ease-out), box-shadow .22s var(--fx-ease-out), border-color .22s var(--fx-ease-out); }
.cx--card-vidrio .cx-prod:hover{ transform:translateY(-4px); border-color:rgb(255 255 255 / .28);
box-shadow:0 1px 0 rgb(255 255 255 / .2) inset, 0 26px 50px -24px rgb(2 6 23 / .6); }
/* Vidrio sobre fondos claros: tinte claro para que se lea el efecto */
.cx--light .cx--card-vidrio .cx-prod, .cx--cream .cx--card-vidrio .cx-prod{
background:linear-gradient(180deg, rgb(255 255 255 / .75), rgb(255 255 255 / .45)); border-color:rgb(255 255 255 / .9); }
/* Con acento — borde fino + barra de color (acento) en el borde superior */
.cx--card-acento .cx-prod{ border:1px solid var(--fx-hairline); border-radius:16px;
box-shadow:0 8px 22px -18px rgb(2 6 23 / .55);
transition:transform .22s var(--fx-ease-out), box-shadow .22s var(--fx-ease-out), border-color .22s var(--fx-ease-out); }
.cx--card-acento .cx-prod::after{ content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
background:linear-gradient(90deg, rgb(var(--cx-accent)), rgb(var(--cx-accent) / .35)); }
.cx--card-acento .cx-prod:hover{ transform:translateY(-4px); border-color:rgb(var(--cx-accent) / .45);
box-shadow:0 22px 44px -24px rgb(var(--cx-accent) / .5); }
/* Estos estilos resaltan el borde/sombra: damos más aire interno para que el
título, precio, descripción, botón y "ver detalle" no queden pegados al borde. */
.cx--card-elevada .cx-prod__body,
.cx--card-linea .cx-prod__body,
.cx--card-vidrio .cx-prod__body,
.cx--card-acento .cx-prod__body,
.cx--card-marco .cx-prod__body{ padding:16px 18px 18px; gap:8px; }
/* En grilla compacta (cuadrícula) un punto menos para que respire sin romper columnas */
@media (max-width:560px){
.cx--card-elevada .cx-prod__body,
.cx--card-linea .cx-prod__body,
.cx--card-vidrio .cx-prod__body,
.cx--card-acento .cx-prod__body,
.cx--card-marco .cx-prod__body{ padding:14px 15px 15px; }
}
/* ---------- BANNERS: variantes de estilo + mejor presencia ---------- */
.cx-promo{ font-weight:700; }
.cx-promo--degradado{ background:linear-gradient(90deg, rgb(var(--cx-accent) / .22), rgb(var(--cx-accent2, var(--cx-accent)) / .22)); }
.cx-promo--solido{ background:rgb(var(--cx-accent)); color:#fff; border-color:transparent; }
.cx-promo--solido i{ color:#fff; }
.cx-promo--suave{ background:rgb(var(--cx-accent) / .12); border:1px solid rgb(var(--cx-accent) / .22); }
.cx-promo--contorno{ background:transparent; border:1px solid rgb(var(--cx-accent) / .5); }
.cx-promo + .cx-promo{ margin-top:8px; }
/* Zonas de banners: márgenes para no quedar pegadas a destacados/categorías/productos. */
.cx-bnr-zone{ display:flex; flex-direction:column; gap:8px; }
.cx-bnr-zone > *{ margin-top:0; margin-bottom:0; } /* el espaciado lo da el gap */
.cx-bnr-zone--cover{ margin:0 0 16px; } /* arriba del todo, antes del hero */
.cx-bnr-zone--top{ margin:0 0 26px; } /* encima de "Lo mejor" */
.cx-bnr-zone--mid{ margin:26px 0; } /* separa destacados ↕ categorías */
.cx-bnr-zone--footer{ margin:30px 0 0; } /* al final del catálogo */
/* Banner de IMAGEN (horizontal a lo ancho) */
.cx-promo-img{ margin:12px 0 0; border-radius:14px; overflow:hidden; line-height:0; border:1px solid rgb(var(--cx-accent) / .15); }
.cx-promo-img img{ width:100%; height:auto; display:block; }
/* Banner de VIDEO (mismo marco que la imagen; carga diferida con preload=none) */
.cx-promo-video video{ width:100%; height:auto; display:block; background:#000; }
/* TAMAÑO (ancho) del banner de media en línea — personalizable */
.cx-promo-img.cx-size--s{ max-width:300px; }
.cx-promo-img.cx-size--m{ max-width:480px; }
.cx-promo-img.cx-size--l{ max-width:760px; }
.cx-promo-img.cx-size--full{ max-width:100%; }
/* ALINEACIÓN (izquierda / centro / derecha) cuando no ocupa todo el ancho */
.cx-promo-img.cx-align--center{ margin-left:auto; margin-right:auto; }
.cx-promo-img.cx-align--left{ margin-left:0; margin-right:auto; }
.cx-promo-img.cx-align--right{ margin-left:auto; margin-right:0; }
/* PROPORCIÓN (alto/recorte) — recorta a la relación elegida (cover); 'auto' = original */
.cx-prop--1-1{ aspect-ratio:1/1; }
.cx-prop--16-9{ aspect-ratio:16/9; }
.cx-prop--21-9{ aspect-ratio:21/9; }
.cx-prop--4-5{ aspect-ratio:4/5; }
.cx-promo-img[class*="cx-prop--"] img,
.cx-promo-img[class*="cx-prop--"] video,
.cx-rail-img[class*="cx-prop--"] img,
.cx-rail-img[class*="cx-prop--"] video{ width:100%; height:100%; object-fit:cover; }
/* Compat: banners viejos con la clase cuadrada */
.cx-promo-img--cuadrado{ max-width:420px; margin-left:auto; margin-right:auto; aspect-ratio:1/1; }
.cx-promo-img--cuadrado img,
.cx-promo-img--cuadrado video{ width:100%; height:100%; object-fit:cover; }
/* Cualquier banner clickeable: sin subrayado y con leve realce al pasar */
a.cx-banner-link{ display:block; text-decoration:none; color:inherit; transition:transform .16s ease, filter .16s ease; }
a.cx-banner-link:hover{ transform:translateY(-2px); filter:brightness(1.03); }
a.cx-banner-link .cx-promo{ cursor:pointer; }
/* Banner de OFERTAS (diseñado: título + subtítulo + badge de descuento + CTA) */
.cx-oferta{ --cx-oferta:var(--cx-accent); position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px;
margin:12px 0 0; padding:16px 18px; border-radius:16px; overflow:hidden;
background:linear-gradient(120deg, rgb(var(--cx-oferta) / .92), rgb(var(--cx-oferta) / .62));
color:#fff; box-shadow:0 14px 34px -16px rgb(var(--cx-oferta) / .7); }
.cx-oferta__main{ display:flex; align-items:center; gap:13px; min-width:0; }
.cx-oferta__ico{ font-size:26px; opacity:.95; flex-shrink:0; }
.cx-oferta__txt{ min-width:0; }
.cx-oferta__title{ font-weight:800; font-size:16px; line-height:1.2; }
.cx-oferta__sub{ font-size:12.5px; opacity:.92; margin-top:2px; }
.cx-oferta__cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px;
background:rgb(255 255 255 / .18); border:1px solid rgb(255 255 255 / .35); padding:8px 13px; border-radius:999px; white-space:nowrap; }
.cx-oferta__badge{ position:absolute; top:10px; right:12px; background:#fff; color:rgb(var(--cx-oferta));
font-weight:900; font-size:12px; letter-spacing:.02em; padding:3px 9px; border-radius:999px; box-shadow:0 4px 12px rgb(0 0 0 / .25); }
@media (max-width:560px){
.cx-oferta{ flex-direction:column; align-items:flex-start; gap:10px; }
.cx-oferta__cta{ align-self:stretch; justify-content:center; }
}
/* Oferta v2: badge EN LÍNEA con el título (sin choques) + ícono de fondo (watermark) + capas */
.cx-oferta{ align-items:center; gap:16px; }
.cx-oferta__bgico{ position:absolute; right:-8px; bottom:-18px; font-size:112px; line-height:1; opacity:.13;
color:#fff; pointer-events:none; transform:rotate(-12deg); z-index:0; }
.cx-oferta__main, .cx-oferta__cta{ position:relative; z-index:1; min-width:0; }
.cx-oferta__titlerow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.cx-oferta__title{ overflow-wrap:anywhere; }
.cx-oferta__badge{ position:static; top:auto; right:auto; flex-shrink:0; box-shadow:0 2px 8px rgb(0 0 0 / .2); }
.cx-oferta__cta{ margin-left:auto; }
@media (max-width:560px){ .cx-oferta__cta{ margin-left:0; } }
/* "+N vendidos" (prueba social) */
/* "Vendidos": texto e ícono SIEMPRE en rojo para que destaque. */
.cx-sold{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; margin-top:4px;
color:rgb(239 68 68); }
.cx-sold i{ font-size:13px; color:rgb(239 68 68); }
/* Layout con columna lateral para banners verticales (escritorio); apila en móvil */
.cx-withrail{ display:block; }
.cx-withrail .cx-main{ min-width:0; }
.cx-rail{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.cx-rail-img{ border-radius:14px; overflow:hidden; line-height:0; border:1px solid rgb(var(--cx-accent) / .15); }
.cx-rail-img img{ width:100%; height:auto; display:block; }
@media (min-width:900px){
.cx-withrail.has-rail{ display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; }
.cx-withrail.has-rail .cx-rail{ position:sticky; top:14px; margin-top:0; }
}
/* =====================================================================
v5.9 — EDITOR: modal más amplio (escritorio) y manejable (móvil),
selector de fondos, y repetidor de banners.
===================================================================== */
.cat-ed-modal{ max-width:min(1340px, 96vw); width:96vw; }
@media (min-width:1024px){
.cat-ed-modal{ max-height:94vh; }
.cat-ed-modal .cat-ed-preview{ width:clamp(420px, 42vw, 640px); }
}
@media (max-width:540px){
.cat-ed-modal{ height:96dvh; max-height:96dvh; border-radius:20px 20px 0 0; }
}
/* Selector de fondos (chips visuales) */
.cat-bg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (min-width:560px){ .cat-bg-grid{ grid-template-columns:repeat(5,1fr); } }
.cat-bg{ cursor:pointer; border:2px solid transparent; border-radius:12px; padding:4px; transition:border-color .15s var(--fx-ease-out); }
.cat-bg.is-on{ border-color:rgb(var(--fx-primary)); }
.cat-bg__chip{ height:40px; border-radius:9px; border:1px solid var(--fx-hairline); }
.cat-bg__name{ display:block; font-size:10px; text-align:center; color:rgb(var(--fx-text-muted)); margin-top:4px; font-weight:600; }
/* Repetidor de banners */
.cat-banner{ border:1px solid var(--fx-hairline); border-radius:14px; padding:11px; margin-bottom:9px; background:rgb(148 163 184 / .04); }
.cat-banner__row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cat-banner__icbtn{ width:44px; height:44px; flex-shrink:0; border:1px solid var(--fx-hairline-strong); border-radius:11px;
background:transparent; color:rgb(var(--cx-accent, var(--fx-primary))); font-size:20px; cursor:pointer; display:grid; place-items:center; }
.cat-banner__icbtn:hover{ border-color:rgb(var(--fx-primary)); }
.cat-banner__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cat-banner__head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.cat-banner__img{ border:1.5px dashed var(--fx-hairline-strong); border-radius:11px; min-height:90px; cursor:pointer;
display:grid; place-items:center; overflow:hidden; margin-bottom:8px; background:rgb(148 163 184 / .05);
color:rgb(var(--fx-text-dim)); font-size:12px; text-align:center; padding:6px; }
.cat-banner__img img{ width:100%; max-height:160px; object-fit:contain; border-radius:8px; }
.cat-addbanner{ width:100%; justify-content:center; border-style:dashed; }
/* ── Editor de catálogo · opciones por plantilla ── */
/* Cada bloque de personalización; aplicarOpcionesPlantilla() oculta los que la
plantilla activa no usa. */
.cat-opt{ margin-bottom:16px; }
.cat-opt:last-child{ margin-bottom:0; }
.cat-opt.is-hidden{ display:none; }
/* ── Banners · cabecera limpia + mover entre secciones ── */
.cat-bnr-head{ margin-bottom:11px; }
.cat-bnr-head__t{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:rgb(var(--fx-text)); }
.cat-bnr-head__t i{ color:rgb(var(--fx-primary-soft)); }
.cat-bnr-head__d{ font-size:11.5px; line-height:1.5; color:rgb(var(--fx-text-dim)); margin-top:5px; }
/* Tarjeta de banner: espaciado uniforme entre filas vía gap (sin márgenes sueltos) */
.cat-banner{ display:flex; flex-direction:column; gap:9px; }
.cat-banner__head{ margin-bottom:0; }
.cat-banner__row{ margin-bottom:0; }
.cat-banner__img{ margin-bottom:0; }
/* Selector de tipo ocupa el espacio libre antes de borrar */
.cat-banner__head .cat-bnr-tipo{ flex:1; min-width:0; }
/* Diferenciar cada banner (contarlos y ver dónde empieza/termina): nº + acento por tipo */
.cat-banner{ position:relative; margin-bottom:12px; border-left-width:3px; animation:catBnrIn .28s var(--fx-ease-out) both; }
.cat-bnr-num{ width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
font-size:11.5px; font-weight:800; color:#fff; background:rgb(var(--fx-primary)); }
.cat-banner--oferta{ border-left-color:rgb(var(--fx-attention)); }
.cat-banner--oferta .cat-bnr-num{ background:rgb(var(--fx-attention)); }
.cat-banner--texto{ border-left-color:rgb(var(--fx-primary)); }
.cat-banner--texto .cat-bnr-num{ background:rgb(var(--fx-primary)); }
.cat-banner--imagen, .cat-banner--video{ border-left-color:rgb(var(--fx-success)); }
.cat-banner--imagen .cat-bnr-num, .cat-banner--video .cat-bnr-num{ background:rgb(var(--fx-success)); }
@keyframes catBnrIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cat-banner{ animation:none; } }
/* Intercambiar el banner con otro de su sección (subir/bajar en el orden) */
.cat-bnr-move{ display:flex; gap:2px; flex-shrink:0; padding:2px; border:1px solid var(--fx-hairline); border-radius:9px; background:rgb(148 163 184 / .05); }
.cat-bnr-movebtn{ width:30px; height:30px; display:grid; place-items:center; font-size:14px; cursor:pointer; border:0; border-radius:7px;
background:transparent; color:rgb(var(--fx-text-muted));
transition:background .15s var(--fx-ease-out), color .15s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cat-bnr-movebtn:hover:not(:disabled){ background:rgb(var(--fx-primary) / .14); color:rgb(var(--fx-primary)); }
.cat-bnr-movebtn:active:not(:disabled){ transform:scale(.9); }
.cat-bnr-movebtn:disabled{ opacity:.3; cursor:default; }
/* Control de posición: en qué SECCIÓN del catálogo aparece el banner */
.cat-bnr-pos{ display:flex; align-items:center; justify-content:space-between; gap:8px;
background:rgb(var(--fx-primary) / .08); border:1px solid rgb(var(--fx-primary) / .18);
border-radius:11px; padding:6px 8px 6px 11px; }
.cat-bnr-pos__lbl{ display:flex; align-items:center; gap:7px; min-width:0; line-height:1.3;
font-size:11.5px; font-weight:600; color:rgb(var(--fx-text-muted)); }
.cat-bnr-pos__lbl i{ flex-shrink:0; font-size:14px; color:rgb(var(--fx-primary-soft)); }
.cat-bnr-pos__btns{ display:flex; gap:3px; flex-shrink:0; }
.cat-bnr-posbtn{ width:32px; height:32px; display:grid; place-items:center; font-size:14px; cursor:pointer;
border:1px solid var(--fx-hairline); border-radius:8px; background:rgb(148 163 184 / .06); color:rgb(var(--fx-text-muted));
transition:background .15s var(--fx-ease-out), color .15s var(--fx-ease-out), border-color .15s var(--fx-ease-out), transform .12s var(--fx-ease-out); }
.cat-bnr-posbtn:hover:not(:disabled){ background:rgb(var(--fx-primary) / .16); color:rgb(var(--fx-primary)); border-color:rgb(var(--fx-primary) / .4); }
.cat-bnr-posbtn:active:not(:disabled){ transform:scale(.9); }
.cat-bnr-posbtn:disabled{ opacity:.3; cursor:default; }
.cat-bnr-empty{ display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
font-size:12px; color:rgb(var(--fx-text-dim)); border:1px dashed var(--fx-hairline-strong);
border-radius:12px; padding:14px; margin-bottom:9px; }
.cat-bnr-empty i{ font-size:17px; color:rgb(var(--fx-primary-soft)); }
/* Control de color compacto (swatch + etiqueta corta + reset opcional) */
.cat-bnr-color{ display:flex; align-items:center; gap:8px; min-width:0; }
.cat-color-pill{ display:inline-flex; align-items:center; gap:9px; flex:1; min-width:0; min-height:42px;
font-size:12px; color:rgb(var(--fx-text-muted)); border:1px solid var(--fx-hairline); border-radius:11px; padding:6px 11px; cursor:pointer; }
.cat-color-pill input[type=color]{ width:30px; height:24px; border:none; background:none; cursor:pointer; padding:0; flex-shrink:0; }
.cat-color-pill span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-bnr-colorreset{ width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; font-size:15px;
border:1px solid var(--fx-hairline); border-radius:11px; background:transparent; color:rgb(var(--fx-text-dim)); cursor:pointer;
transition:color .15s var(--fx-ease-out), border-color .15s var(--fx-ease-out); }
.cat-bnr-colorreset:hover{ color:rgb(var(--fx-primary)); border-color:rgb(var(--fx-primary) / .5); }
/* Móvil estrecho: los pares de selects/campos del banner pasan a una columna */
@media (max-width:400px){
.cat-banner__grid{ grid-template-columns:1fr; }
}
/* "Destacar": etiqueta + tip explicativo */
.cat-dest-tip{ display:flex; gap:7px; align-items:flex-start; font-size:11.5px; line-height:1.4; color:rgb(var(--fx-text-muted));
background:rgb(var(--fx-attention) / .08); border:1px solid rgb(var(--fx-attention) / .2); border-radius:11px; padding:9px 11px; margin-top:10px; }
.cat-dest-tip i{ color:rgb(var(--fx-attention-soft)); font-size:15px; margin-top:1px; flex-shrink:0; }
.cat-dest-ctl{ display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.cat-dest-lbl{ font-size:9.5px; font-weight:700; letter-spacing:.02em; color:rgb(var(--fx-attention-soft)); white-space:nowrap; display:flex; align-items:center; gap:2px; }
.cat-dest-lbl i{ font-size:10px; }
/* Picker de íconos (modal) — reusa las clases fx-icon-* del sistema */
.cat-iconsearch{ margin-bottom:10px; }
.cat-icon-scroll{ max-height:min(52vh,420px); overflow-y:auto; padding-right:4px; }
/* ---------- Selector de variantes en la tarjeta (público) ---------- */
.cx-variants{ display:flex; flex-wrap:wrap; gap:6px; }
.cx-variant{ border:1px solid var(--fx-hairline-strong); background:transparent; color:rgb(var(--fx-text-muted));
border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; cursor:pointer; line-height:1.4;
transition:background .14s var(--fx-ease-out), color .14s var(--fx-ease-out), border-color .14s var(--fx-ease-out); }
.cx-variant:hover{ border-color:rgb(var(--cx-accent) / .6); color:rgb(var(--fx-text)); }
.cx-variant.is-on{ background:rgb(var(--cx-accent)); color:#fff; border-color:transparent; }
.cx-variant.is-out{ opacity:.45; text-decoration:line-through; }
.cx--tpl-studio .cx-variants{ order:3; }
.cx--tpl-lumiere .cx-variants{ justify-content:center; }
.cx--tpl-mercado .cx-variant{ padding:2px 8px; font-size:10.5px; }
/* --- Variantes: SOLO 2 visibles + "Y más…"; NUNCA desbordan la tarjeta ---
La causa del overflow era que el item de la grilla no podía encogerse (min-width:auto)
y una fila larga de variantes lo ensanchaba. Con min-width:0 + wrap + ellipsis se contiene. */
.cx-prod{ min-width:0; }
.cx-prod__body{ min-width:0; }
.cx-prod .cx-variants{ flex-wrap:wrap; min-width:0; max-width:100%; overflow:hidden; }
.cx-prod .cx-variant{ max-width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-variant--more{ font-weight:800; color:rgb(var(--cx-accent)); border-color:rgb(var(--cx-accent) / .45); flex-shrink:0; white-space:nowrap; }
.cx-variant--more:hover{ background:rgb(var(--cx-accent) / .12); }
/* --- Margen de los DESTACADOS para que NO se peguen a las categorías/grilla (móvil y escritorio) --- */
.cx--tpl-studio .cx-featured{ margin-bottom:32px; }
@media (min-width:720px){ .cx--tpl-studio .cx-featured{ margin-bottom:48px; } }
/* --- Tarjeta clickeable → abre el detalle; pista "Ver detalle" --- */
.cx-prod--clic{ cursor:pointer; }
.cx-prod__more{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:11px; font-weight:700;
color:rgb(var(--cx-accent)); opacity:0; transform:translateY(-2px); transition:opacity .15s var(--fx-ease-out), transform .15s var(--fx-ease-out); }
.cx-prod--clic:hover .cx-prod__more{ opacity:.9; transform:none; }
/* En móvil/responsive NO mostramos la pista "Ver detalle": la tarjeta entera ya es
clickeable y el texto solo robaba espacio. Se oculta por ancho y en pantallas táctiles. */
@media (max-width:680px){ .cx-prod__more{ display:none; } }
@media (hover:none){ .cx-prod__more{ display:none; } }
.cx--tpl-studio .cx-prod__more{ order:7; }
/* =====================================================================
v5.11 — LANDING DE 1 PRODUCTO (bloques foto+texto apilados)
Se temiza con los tokens/acento de la plantilla y fondo elegidos.
===================================================================== */
.cx-lp{ max-width:1080px; margin:0 auto; }
.cx-lp-hero{ display:grid; grid-template-columns:1fr; gap:22px; align-items:center; margin:10px 0 8px; }
@media (min-width:860px){ .cx-lp-hero{ grid-template-columns:1.02fr .98fr; gap:48px; margin:24px 0 12px; } }
.cx-lp-hero__media{ border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--fx-hairline);
aspect-ratio:1/1; display:grid; place-items:center; }
.cxbody--dark .cx-lp-hero__media{ background:rgb(248 250 252); }
.cx-lp-hero__media img{ width:100%; height:100%; object-fit:contain; padding:6%; box-sizing:border-box; }
.cx-lp-hero__brand{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.cx-lp-hero__logo{ width:54px; height:54px; border-radius:15px; flex-shrink:0; object-fit:cover;
background:rgb(var(--cx-accent) / .16); display:grid; place-items:center; color:rgb(var(--cx-accent)); font-size:24px;
border:1px solid rgb(var(--cx-accent) / .28); box-shadow:0 12px 28px -14px rgb(var(--cx-accent) / .5); }
.cx-lp-hero__logo--ini{ font-weight:800; letter-spacing:-.02em; font-size:21px;
background:linear-gradient(150deg, rgb(var(--cx-accent) / .26), rgb(var(--cx-accent) / .1)); }
.cx-lp-hero__biz{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgb(var(--fx-text-muted)); }
.cx-lp-hero__kicker{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--cx-accent)); margin-bottom:8px; }
.cx-lp-hero__title{ font-family:var(--cx-font-title,'Inter'); font-size:clamp(28px,5vw,46px); line-height:1.06; letter-spacing:-.01em; color:rgb(var(--fx-text)); margin:0 0 14px; }
.cx-lp-hero__price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cx-lp-hero__price .cx-price-main{ font-size:clamp(26px,4vw,38px); font-weight:800; }
.cx-lp-hero__desc{ font-size:15px; line-height:1.7; color:rgb(var(--fx-text-muted)); max-width:52ch; margin:14px 0 0; white-space:pre-line; }
.cx-lp-hero__ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cx-lp-hero__ctas .cx-hero__cta{ cursor:pointer; }
/* Bloques apilados */
.cx-lp-block{ display:grid; grid-template-columns:1fr; gap:18px; align-items:center; margin:34px 0; }
@media (min-width:860px){
.cx-lp-block--left, .cx-lp-block--right{ grid-template-columns:1fr 1fr; gap:44px; }
.cx-lp-block--right .cx-lp-block__media{ order:2; }
}
.cx-lp-block__media{ border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:rgb(148 163 184 / .07); border:1px solid var(--fx-hairline); }
.cx-lp-block__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cx-lp-block--full{ grid-template-columns:1fr; }
.cx-lp-block--full .cx-lp-block__media{ aspect-ratio:16/9; }
.cx-lp-block--full .cx-lp-block__txt{ text-align:center; max-width:62ch; margin:0 auto; }
.cx-lp-block--texto .cx-lp-block__txt{ text-align:center; max-width:64ch; margin:0 auto; }
.cx-lp-block__title{ font-family:var(--cx-font-title,'Inter'); font-size:clamp(20px,3vw,30px); font-weight:700; color:rgb(var(--fx-text)); margin-bottom:10px; line-height:1.15; }
.cx-lp-block__text{ font-size:15px; line-height:1.75; color:rgb(var(--fx-text-muted)); white-space:pre-line; }
/* Llamado final */
.cx-lp-cta{ text-align:center; margin:44px 0 12px; padding:clamp(28px,4vw,48px) 22px; border-radius:26px;
background:linear-gradient(160deg, rgb(var(--cx-accent) / .12), rgb(var(--cx-accent2, var(--cx-accent)) / .10));
border:1px solid rgb(var(--cx-accent) / .22); }
.cx-lp-cta__title{ font-family:var(--cx-font-title,'Inter'); font-size:clamp(20px,3vw,28px); font-weight:700; color:rgb(var(--fx-text)); }
/* =====================================================================
v5.11 — EDITOR: selector de formato y repetidor de bloques de landing
===================================================================== */
.cat-lp-block{ border:1px solid var(--fx-hairline); border-radius:14px; padding:11px; margin-bottom:10px; background:rgb(148 163 184 / .04); }
.cat-lp-block__top{ display:flex; gap:8px; align-items:center; margin-bottom:9px; }
.cat-lp-block__num{ width:26px; height:26px; border-radius:8px; background:rgb(var(--fx-primary) / .14); color:rgb(var(--fx-primary-soft)); font-size:12px; font-weight:800; display:grid; place-items:center; flex-shrink:0; }
.cat-lp-block__img{ width:100%; aspect-ratio:16/9; border-radius:10px; border:1px dashed var(--fx-hairline-strong); background:rgb(148 163 184 / .06); display:grid; place-items:center; cursor:pointer; overflow:hidden; margin-bottom:8px; color:rgb(var(--fx-text-dim)); font-size:12px; }
.cat-lp-block__img img{ width:100%; height:100%; object-fit:cover; }
.cat-addbloque{ width:100%; justify-content:center; border-style:dashed; }
/* v5.11 — Precio: "ocultar precio" y doble equivalente en Bs */
/* "Pregunta el precio" / "Cotiza": solo texto + ícono en el color de marca (sin fondo ni borde). */
.cx-price-ask{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:rgb(var(--cx-accent)); }
.cx-price-ask i{ font-size:16px; }
/* Etiqueta "BCV" junto al precio en dólares (cuando el modo es a tasa BCV). */
.cx-price-tag{ font-size:.55em; font-weight:800; letter-spacing:.04em; vertical-align:middle; margin-left:4px;
padding:2px 6px; border-radius:6px; background:rgb(var(--cx-accent) / .15); color:rgb(var(--cx-accent)); }
.cx--tpl-studio .cx-featured .cx-price-tag{ display:none; } /* en el sello circular no hace falta */
/* Editor · caja de ejemplo de precio */
.cat-price-ex{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px;
font-size:12px; line-height:1.5; color:rgb(var(--fx-text-muted));
background:rgb(var(--fx-primary) / .08); border:1px solid rgb(var(--fx-primary) / .18); }
.cat-price-ex:empty{ display:none; }
.cat-price-ex i{ color:rgb(var(--fx-primary-soft)); font-size:15px; margin-top:1px; flex-shrink:0; }
.cat-price-ex b{ color:rgb(var(--fx-text)); font-weight:800; }
.cat-price-ex.is-warn{ background:rgb(var(--fx-attention) / .1); border-color:rgb(var(--fx-attention) / .3); }
.cat-price-ex.is-warn i{ color:rgb(var(--fx-attention-soft)); }
.cx-price-bs--multi{ display:block; width:100%; line-height:1.5; }
/* Segunda línea "≈ $X a tasa BCV" (modo usd_bcv): dólar equivalente al lado del
dólar principal. Acento de marca + ícono de banco para diferenciarlo del Bs. */
.cx-price-bcv{ display:inline-flex; align-items:center; gap:4px; width:100%; font-weight:700;
color:rgb(var(--cx-accent)); }
.cx-price-bcv i{ font-size:1.05em; opacity:.9; }
.cxbody--dark .cx-price-bcv{ color:rgb(var(--cx-accent)); }
/* =====================================================================
v7.1 — CENTRO DE NOTIFICACIONES (campana) · Fase 1 (rediseño visual)
Filas delicadas y tokenizadas que reemplazan las tarjetas pesadas y el
arcoíris de colores anterior. El COLOR de cada fila lo da una clase
.fx-tone--* (currentColor) → respeta la disciplina 3+1 y cambia con el
tema (claro/oscuro/personalizado) sin tocar nada.
===================================================================== */
/* Velo y panel (antes hardcodeados con hex en BannerSuperior.html) */
.fx-notif-overlay {
position: fixed; inset: 0; z-index: 60;
background: rgb(var(--fx-bg-0) / 0.78);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity var(--fx-dur-base) var(--fx-ease-out);
}
.fx-notif-overlay.is-open { opacity: 1; }
.fx-notif-panel {
position: fixed; top: 0; right: 0; z-index: 70;
height: 100%; width: 100%; max-width: 400px;
display: flex; flex-direction: column;
background: rgb(var(--fx-bg-1) / 0.96);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
border-left: 1px solid var(--fx-hairline);
box-shadow: var(--fx-shadow-3);
transform: translateX(100%);
transition: transform var(--fx-dur-slow) var(--fx-ease-drawer);
}
.fx-notif-panel.is-open { transform: translateX(0); }
/* Cabecera */
.fx-notif-head {
flex-shrink: 0;
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fx-s-3);
padding: 18px 18px 16px;
border-bottom: 1px solid var(--fx-hairline);
background: linear-gradient(180deg, rgb(var(--fx-bg-2) / 0.45), transparent);
}
.fx-notif-head__title {
margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
color: rgb(var(--fx-text));
display: flex; align-items: center; gap: 8px;
}
.fx-notif-head__title i { font-size: 18px; color: rgb(var(--fx-primary-soft)); }
.fx-notif-head__sub { margin: 3px 0 0; font-size: 11px; color: rgb(var(--fx-text-dim)); }
.fx-notif-head__close {
flex-shrink: 0; width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; border: 1px solid var(--fx-hairline);
background: rgb(var(--fx-bg-3) / 0.4); color: rgb(var(--fx-text-muted));
font-size: 16px; cursor: pointer;
transition: color var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-notif-head__close:hover { color: rgb(var(--fx-text)); border-color: var(--fx-hairline-strong); }
/* Barra de filtros (switch) + vaciar */
.fx-notif-tools { flex-shrink: 0; padding: 14px 16px 2px; }
.fx-notif-tools__clear {
margin: 9px 2px 0; width: 100%;
display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
background: none; border: none; cursor: pointer;
font-size: 11px; font-weight: 600; color: rgb(var(--fx-text-dim));
transition: color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-notif-tools__clear i { font-size: 13px; }
.fx-notif-tools__clear:hover { color: rgb(var(--fx-danger-soft)); }
/* Lista + grupos */
/* El color de tono base se hereda desde aquí; cada fila lo sobreescribe con su
.fx-tone--* (regla a nivel de elemento → gana a la herencia). Así el tono NO
queda pisado por una regla de igual especificidad puesta más abajo en el CSS. */
.fx-notif-list { flex: 1; overflow-y: auto; padding: 8px 14px 28px; color: rgb(var(--fx-primary-soft)); }
.fx-notif-group + .fx-notif-group { margin-top: 16px; }
.fx-notif-group__label {
display: flex; align-items: center; gap: 8px;
padding: 6px 4px 9px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
color: rgb(var(--fx-text-dim));
}
.fx-notif-group__count {
min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; font-size: 10px; font-weight: 700;
background: rgb(var(--fx-bg-3) / 0.7); color: rgb(var(--fx-text-muted));
}
/* Fila (el tono = currentColor, lo aplica .fx-tone--*) */
.fx-notif-row {
position: relative;
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 12px;
border-radius: var(--fx-r-md);
background: rgb(var(--fx-bg-2) / 0.35);
border: 1px solid var(--fx-hairline);
text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--fx-dur-fast) var(--fx-ease-out),
border-color var(--fx-dur-fast) var(--fx-ease-out),
transform var(--fx-dur-fast) var(--fx-ease-out),
opacity var(--fx-dur-base) var(--fx-ease-out);
}
.fx-notif-row + .fx-notif-row { margin-top: 8px; }
.fx-notif-row:hover {
background: rgb(var(--fx-bg-2) / 0.6);
border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.fx-notif-row:active { transform: scale(0.985); }
/* Acento de urgencia: barrita izquierda + leve teñido (sin salir de la paleta) */
.fx-notif-row.is-urgent {
background: color-mix(in srgb, currentColor 8%, rgb(var(--fx-bg-2) / 0.35));
border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.fx-notif-row.is-urgent::before {
content: ""; position: absolute; left: 0; top: 11px; bottom: 11px;
width: 3px; border-radius: 0 999px 999px 0; background: currentColor;
}
.fx-notif-row__icon {
flex-shrink: 0; width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; font-size: 16px; color: currentColor;
background: color-mix(in srgb, currentColor 13%, transparent);
border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.fx-notif-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-notif-row__title {
margin: 0; display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; line-height: 1.3; color: rgb(var(--fx-text));
}
.fx-notif-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-notif-row__tag {
flex-shrink: 0;
font-size: 9px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
padding: 1px 6px; border-radius: 999px; color: currentColor;
background: color-mix(in srgb, currentColor 16%, transparent);
}
.fx-notif-row__desc {
margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.4; color: rgb(var(--fx-text-muted));
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fx-notif-row__time {
margin-top: 1px; font-size: 10px; font-weight: 500; color: rgb(var(--fx-text-dim));
display: inline-flex; align-items: center; gap: 4px;
}
.fx-notif-row__time i { font-size: 10px; opacity: 0.7; }
.fx-notif-row__chev {
flex-shrink: 0; font-size: 15px; color: rgb(var(--fx-text-dim));
transition: transform var(--fx-dur-fast) var(--fx-ease-out), color var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-notif-row:hover .fx-notif-row__chev { color: currentColor; transform: translateX(2px); }
/* Descartar (solo filas de "Información"; lo accionable se va al resolverse) */
.fx-notif-row__dismiss {
flex-shrink: 0; width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; border: none; background: transparent;
color: rgb(var(--fx-text-dim)); font-size: 13px; cursor: pointer;
opacity: 0.45;
transition: color var(--fx-dur-fast) var(--fx-ease-out), opacity var(--fx-dur-fast) var(--fx-ease-out);
}
.fx-notif-row:hover .fx-notif-row__dismiss { opacity: 0.8; }
.fx-notif-row__dismiss:hover { opacity: 1; color: rgb(var(--fx-danger-soft)); }
.fx-notif-row.is-leaving { opacity: 0; transform: translateX(26px); }
@media (max-width: 430px) {
.fx-notif-panel { max-width: 100%; }
}
/* =====================================================================
v7.2 — SPOTLIGHT ("remarcar") · Fase 3 deep-link
Cuando llegas a una pantalla desde una notificación, resaltamos el objeto
exacto (tarjeta de pedido, tarea, etc.) con un halo de marca que late y se
apaga solo. Tokenizado (sigue el tema) y reutilizable vía window.fxSpotlight.
===================================================================== */
/* El halo va en un ::after, NO en el box-shadow del propio elemento: así no lo
pisa la regla de modo claro `.fx-glass { box-shadow: ... !important }` y
funciona igual en claro y oscuro, sobre cualquier tarjeta. */
.fx-spotlight { position: relative; z-index: 5; }
.fx-spotlight::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
pointer-events: none;
z-index: 3;
animation: fxSpotlight 2.6s var(--fx-ease-out) both;
}
@keyframes fxSpotlight {
0% { box-shadow: 0 0 0 0 rgb(var(--fx-primary) / 0); opacity: 0; }
14% { box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.9), 0 0 34px 5px rgb(var(--fx-primary) / 0.45); opacity: 1; }
55% { box-shadow: 0 0 0 3px rgb(var(--fx-primary) / 0.55), 0 0 24px 3px rgb(var(--fx-primary) / 0.28); opacity: 1; }
100% { box-shadow: 0 0 0 0 rgb(var(--fx-primary) / 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fx-spotlight::after { animation: none; box-shadow: 0 0 0 2px rgb(var(--fx-primary) / 0.75); opacity: 1; }
}
/* =====================================================================
v7.5 — ONBOARDING "primeros pasos" · timeline premium (mobile-first)
Reemplaza las filas genéricas por una línea de tiempo con nodos y CTAs
atractivos derivados de la marca. 100% tokens.
===================================================================== */
.fx-onboard { display: flex; flex-direction: column; }
.fx-onboard__step {
position: relative;
display: flex; gap: 14px;
padding-bottom: 18px;
}
.fx-onboard__step:last-child { padding-bottom: 0; }
/* Línea vertical del timeline (conecta los nodos) */
.fx-onboard__step::before {
content: ""; position: absolute;
left: 17px; top: 40px; bottom: -2px;
width: 2px; border-radius: 2px;
background: var(--fx-hairline);
}
.fx-onboard__step:last-child::before { display: none; }
.fx-onboard__step.is-done::before { background: rgb(var(--fx-success) / 0.45); }
.fx-onboard__node {
position: relative; z-index: 1;
flex-shrink: 0; width: 36px; height: 36px;
border-radius: 999px; font-size: 16px;
display: inline-flex; align-items: center; justify-content: center;
background: rgb(var(--fx-bg-3) / 0.8);
border: 1px solid var(--fx-hairline-strong);
color: rgb(var(--fx-text-muted));
transition: all var(--fx-dur-base) var(--fx-ease-out);
}
.fx-onboard__step.is-done .fx-onboard__node {
background: rgb(var(--fx-success) / 0.16);
border-color: rgb(var(--fx-success) / 0.4);
color: rgb(var(--fx-success-soft));
}
.fx-onboard__step.is-active .fx-onboard__node {
background: rgb(var(--fx-primary) / 0.18);
border-color: rgb(var(--fx-primary) / 0.55);
color: rgb(var(--fx-primary-soft));
box-shadow: 0 0 0 4px rgb(var(--fx-primary) / 0.12);
}
.fx-onboard__body { flex: 1; min-width: 0; padding-top: 5px; }
.fx-onboard__title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--fx-text)); }
.fx-onboard__step.is-done .fx-onboard__title { color: rgb(var(--fx-text-muted)); text-decoration: line-through; text-decoration-color: rgb(var(--fx-text-dim) / 0.6); }
.fx-onboard__desc { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: rgb(var(--fx-text-dim)); }
/* CTA premium: píldora con gradiente de marca, brillo interior y lift */
.fx-onboard__cta {
margin-top: 12px; width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 18px; border-radius: var(--fx-r-md);
font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
color: rgb(var(--fx-on-primary, 255 255 255));
text-decoration: none; cursor: pointer;
background: linear-gradient(135deg, rgb(var(--fx-primary)), rgb(var(--fx-primary-deep)));
border: 1px solid rgb(var(--fx-primary) / 0.55);
box-shadow: 0 6px 18px rgb(var(--fx-primary) / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.12);
transition: transform var(--fx-dur-fast) var(--fx-ease-out), box-shadow var(--fx-dur-fast) var(--fx-ease-out);
}
@media (min-width: 640px) { .fx-onboard__cta { width: auto; } }
.fx-onboard__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(var(--fx-primary) / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.16); }
.fx-onboard__cta:active { transform: scale(0.97); }
.fx-onboard__cta i { transition: transform var(--fx-dur-fast) var(--fx-ease-out); }
.fx-onboard__cta:hover i { transform: translateX(3px); }
.fx-onboard__cta--success {
background: linear-gradient(135deg, rgb(var(--fx-success)), color-mix(in srgb, rgb(var(--fx-success)), #000 24%));
border-color: rgb(var(--fx-success) / 0.55);
box-shadow: 0 6px 18px rgb(var(--fx-success) / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.fx-onboard__cta--success:hover { box-shadow: 0 10px 26px rgb(var(--fx-success) / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.16); }
/* =====================================================================
v7.6 — PALETIZACIÓN GLOBAL · remapeo de colores "quemados" → tokens
Muchas pantallas usan navy/azul fijo de Tailwind (bg-slate-800/900,
bg-blue-600, text-blue-400, border-slate-700/800) que NO siguen la paleta.
Aquí los reasignamos a tokens para que TODA la app respete la paleta elegida.
Conservador: solo superficies navy sólidas, botones/acentos azules y bordes
slate. NO toca emerald/amber/rose (roles), ni text-white.
Usa !important para ganarle a las utilidades de Tailwind (mismo peso, pero el
CDN se inyecta después). No aplica dentro del catálogo público (.cxbody).
===================================================================== */
body:not(.cxbody) [class~="bg-slate-900"] { background-color: rgb(var(--fx-bg-1)) !important; }
body:not(.cxbody) [class~="bg-slate-800"] { background-color: rgb(var(--fx-bg-2)) !important; }
body:not(.cxbody) [class~="bg-slate-700"] { background-color: rgb(var(--fx-bg-3)) !important; }
/* variantes con opacidad (bg-slate-900/90, bg-slate-800/50, …) */
body:not(.cxbody) [class*="bg-slate-900/"] { background-color: rgb(var(--fx-bg-1) / .92) !important; }
body:not(.cxbody) [class*="bg-slate-800/"] { background-color: rgb(var(--fx-bg-2) / .85) !important; }
body:not(.cxbody) [class*="bg-slate-950"] { background-color: rgb(var(--fx-bg-0)) !important; }
/* botones / acentos azules sólidos → marca */
body:not(.cxbody) [class~="bg-blue-600"],
body:not(.cxbody) [class~="bg-blue-500"] { background-color: rgb(var(--fx-primary)) !important; }
body:not(.cxbody) [class~="hover:bg-blue-600"]:hover,
body:not(.cxbody) [class~="hover:bg-blue-500"]:hover { background-color: rgb(var(--fx-primary-deep)) !important; }
/* texto azul de acento → marca (no toca títulos blancos) */
body:not(.cxbody) [class~="text-blue-300"],
body:not(.cxbody) [class~="text-blue-400"],
body:not(.cxbody) [class~="text-blue-500"] { color: rgb(var(--fx-primary-soft)) !important; }
/* bordes slate → hairline del tema */
body:not(.cxbody) [class~="border-slate-700"],
body:not(.cxbody) [class~="border-slate-800"] { border-color: var(--fx-hairline-strong) !important; }
/* acentos SÓLIDOS de marca (índigo/violeta/púrpura) → color primario del tema */
body:not(.cxbody) [class~="bg-indigo-600"], body:not(.cxbody) [class~="bg-indigo-500"],
body:not(.cxbody) [class~="bg-violet-600"], body:not(.cxbody) [class~="bg-violet-500"],
body:not(.cxbody) [class~="bg-purple-600"], body:not(.cxbody) [class~="bg-purple-500"] { background-color: rgb(var(--fx-primary)) !important; }
body:not(.cxbody) [class~="hover:bg-indigo-500"]:hover, body:not(.cxbody) [class~="hover:bg-indigo-600"]:hover,
body:not(.cxbody) [class~="hover:bg-violet-500"]:hover, body:not(.cxbody) [class~="hover:bg-purple-500"]:hover { background-color: rgb(var(--fx-primary-deep)) !important; }
/* texto índigo/violeta de acento → marca */
body:not(.cxbody) [class~="text-indigo-400"], body:not(.cxbody) [class~="text-indigo-300"], body:not(.cxbody) [class~="text-indigo-500"],
body:not(.cxbody) [class~="text-violet-400"], body:not(.cxbody) [class~="text-purple-400"] { color: rgb(var(--fx-primary-soft)) !important; }
/* Fondo de página: que SIEMPRE siga la paleta (gana al .bg-navy-mate quemado
en los