/* ════════════════════════════════════════════════════════════════
SG V2 — Sistema Gym Design System v2.0
════════════════════════════════════════════════════════════════
Aesthetic: visitors.now (Godly) — light base + lavender accent.
Single source of truth for all modules migrated to v2 UX.
Naming: every class is `sgv-*`. Zero clash with legacy `sg-*`,
`nh-*`, `wk-*`, `ec-*` so v1 and v2 modules coexist.
Usage in templates:
... then use class names below.
════════════════════════════════════════════════════════════════ */
:root,
[data-theme],
[data-theme="glassmorphism"],
[data-theme="carbon"],
[data-theme="paper"],
[data-theme="apple"],
[data-theme="material"],
[data-theme="material-light"],
[data-theme="nordic"],
[data-theme="sunset"],
[data-theme="unthread"],
html[data-theme],
body[data-theme] {
/* ─── Legacy bridge: force themes.css / sg-tokens.css vars to v2 ─── */
--bg-primary: #F9FAFB;
--bg-card: #FFFFFF;
--bg-card-hover: #F9FAFB;
--bg-glass: #FFFFFF;
--bg-glass-soft: #F9FAFB;
--bg-input: #FFFFFF;
--bg-hover: rgba(149,128,255,0.06);
--bg-overlay: rgba(15,17,29,0.5);
--border-glass: rgba(17,24,39,0.06);
--border-subtle: rgba(17,24,39,0.05);
--border-hairline: rgba(17,24,39,0.05);
--border-strong: rgba(17,24,39,0.10);
--text-primary: #181925;
--text-secondary: #374151; /* gray-700, ratio ~10.4 — antes 4B5563 era OK pero bumpeado para mejor contraste editorial */
--text-muted: #6B7280; /* gray-500, ratio ~4.83 — antes 9CA3AF fallaba WCAG AA en superficies blancas */
--accent: #9580FF;
--accent-rgb: 149,128,255;
--accent-hover: #918DF6;
--accent-secondary: #9580FF;
--accent-secondary-rgb: 149,128,255;
--accent-glow: rgba(149,128,255,0.18);
--gradient-accent: linear-gradient(135deg, #9580FF, #918DF6);
--gradient-accent-soft: linear-gradient(135deg, rgba(149,128,255,0.10), rgba(149,128,255,0.04));
--gradient-card: linear-gradient(180deg, #FFFFFF, #F9FAFB);
--shadow-card: 0 1px 2px rgba(17,24,39,0.04);
--radius-sm: 0.4rem;
--radius-md: 0.55rem;
--radius-lg: 0.85rem;
--radius-xl: 1.25rem;
--blur: 18px;
--nav-bg: rgba(255,255,255,0.85);
/* ─── Surfaces ─────────────────────────────────────────────── */
--sgv-bg: #FFFFFF;
--sgv-page: #F9FAFB;
--sgv-page-strong: #F3F4F6;
/* ─── Text ─────────────────────────────────────────────────── */
--sgv-text: #181925;
--sgv-text-body: #374151; /* gray-700, ratio ~10.4 — bump desde 4B5563 para mejor lectura */
--sgv-text-mute: #6B7280; /* gray-500, ratio ~4.83 — bump desde 9CA3AF que fallaba WCAG AA */
--sgv-text-inverse: #FFFFFF;
/* ─── Accent (lavender) ────────────────────────────────────── */
--sgv-accent: #9580FF;
--sgv-accent-2: #918DF6;
--sgv-accent-soft: rgba(149, 128, 255, 0.10);
--sgv-accent-line: rgba(149, 128, 255, 0.22);
--sgv-accent-glow: rgba(149, 128, 255, 0.18);
/* ─── Lines / strokes ──────────────────────────────────────── */
--sgv-line: rgba(17, 24, 39, 0.06);
--sgv-line-strong: rgba(17, 24, 39, 0.10);
/* ─── Semantic (status) ────────────────────────────────────── */
--sgv-success: #16a34a;
--sgv-success-soft: rgba(74, 222, 128, 0.12);
--sgv-success-line: rgba(74, 222, 128, 0.25);
--sgv-warning: #d97706;
--sgv-warning-soft: rgba(251, 191, 36, 0.14);
--sgv-warning-line: rgba(251, 191, 36, 0.28);
--sgv-danger: #e11d48;
--sgv-danger-soft: rgba(244, 63, 94, 0.12);
--sgv-danger-line: rgba(244, 63, 94, 0.25);
--sgv-info: #6366F1;
--sgv-info-soft: rgba(99, 102, 241, 0.10);
/* ─── Radii ────────────────────────────────────────────────── */
--sgv-r-xs: 0.4rem;
--sgv-r-sm: 0.55rem;
--sgv-r-md: 0.85rem;
--sgv-r-lg: 1.25rem;
--sgv-r-xl: 1.5rem;
--sgv-pill: 9999px;
/* ─── Shadows ──────────────────────────────────────────────── */
--sgv-shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04);
--sgv-shadow-card: 0 6px 22px -10px rgba(17, 24, 39, 0.12);
--sgv-shadow-card-hover: 0 12px 32px -12px rgba(17, 24, 39, 0.18);
--sgv-shadow-modal: 0 -10px 60px rgba(0, 0, 0, 0.35);
--sgv-shadow-accent: 0 6px 14px -6px rgba(149, 128, 255, 0.55);
/* ─── Type ─────────────────────────────────────────────────── */
--sgv-font: "Open Runde", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--sgv-tracking: -0.01em;
/* ─── Z-index ──────────────────────────────────────────────── */
--sgv-z-sticky: 30;
--sgv-z-modal: 60;
--sgv-z-video: 70;
--sgv-z-toast: 80;
}
/* ─────────────────────────────────────────────────────────────
PAGE / RESET
───────────────────────────────────────────────────────────── */
.sgv * { box-sizing: border-box; }
.sgv {
background: var(--sgv-page);
color: var(--sgv-text);
font-family: var(--sgv-font);
letter-spacing: var(--sgv-tracking);
min-height: 100%;
overflow-x: hidden;
max-width: 100vw;
}
.sgv a { color: inherit; text-decoration: none; }
.sgv button { font-family: inherit; }
.sgv-page {
max-width: 72rem;
margin: 0 auto;
padding: 1rem 1rem 3rem;
}
.sgv-page--narrow { max-width: 56rem; }
.sgv-page--wide { max-width: 88rem; }
/* ─────────────────────────────────────────────────────────────
TOPBAR (sticky)
───────────────────────────────────────────────────────────── */
.sgv-topbar {
position: sticky; top: 0; z-index: var(--sgv-z-sticky);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--sgv-line);
}
.sgv-topbar__inner {
max-width: 72rem; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
padding: 0.75rem 1rem; min-height: 3.25rem;
}
.sgv-topbar__left {
display: flex; align-items: center; gap: 0.75rem;
min-width: 0; flex: 1;
}
.sgv-topbar__title {
font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sgv-topbar__sub {
font-size: 0.72rem; color: var(--sgv-text-mute); margin-top: 0.1rem;
}
.sgv-back {
display: inline-flex; align-items: center; justify-content: center;
width: 2.25rem; height: 2.25rem;
border-radius: var(--sgv-pill);
background: var(--sgv-page);
border: 1px solid var(--sgv-line);
color: var(--sgv-text-body);
flex-shrink: 0;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.sgv-back:hover { background: var(--sgv-page-strong); color: var(--sgv-text); }
/* ─────────────────────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────────────────────── */
.sgv-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
border-radius: var(--sgv-pill);
font-size: 0.85rem; font-weight: 600;
padding: 0.55rem 1.1rem;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
border: 1px solid transparent;
line-height: 1.2;
white-space: nowrap;
}
.sgv-btn--sm { font-size: 0.8rem; padding: 0.45rem 0.85rem; }
.sgv-btn--lg { font-size: 0.95rem; padding: 0.7rem 1.3rem; }
.sgv-btn--primary {
background: var(--sgv-accent);
color: #fff;
box-shadow: var(--sgv-shadow-accent);
}
.sgv-btn--primary:hover { background: var(--sgv-accent-2); }
.sgv-btn--primary[disabled],
.sgv-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }
.sgv-btn--ghost {
background: transparent;
border-color: var(--sgv-line);
color: var(--sgv-text-body);
}
.sgv-btn--ghost:hover { background: var(--sgv-page); color: var(--sgv-text); }
.sgv-btn--danger {
background: var(--sgv-danger);
color: #fff;
}
.sgv-btn--danger:hover { background: #be123c; }
.sgv-btn--soft {
background: var(--sgv-accent-soft);
color: var(--sgv-accent);
border-color: var(--sgv-accent-line);
}
.sgv-btn--soft:hover { background: var(--sgv-accent); color: #fff; }
.sgv-btn--icon {
width: 2.25rem; height: 2.25rem;
padding: 0;
border-radius: var(--sgv-pill);
}
/* ─────────────────────────────────────────────────────────────
SEARCH
───────────────────────────────────────────────────────────── */
.sgv-search {
position: relative;
margin-bottom: 0.85rem;
}
.sgv-search__input {
width: 100%;
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
color: var(--sgv-text);
border-radius: var(--sgv-pill);
padding: 0.65rem 1.1rem 0.65rem 2.4rem;
font-size: 0.9rem;
outline: none;
box-shadow: var(--sgv-shadow-soft);
font-family: inherit;
}
.sgv-search__input:focus {
border-color: var(--sgv-accent);
box-shadow: 0 0 0 3px var(--sgv-accent-soft);
}
.sgv-search__icon {
position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
color: var(--sgv-text-mute); font-size: 0.85rem;
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────────
PILL FILTERS (horizontal scroll)
───────────────────────────────────────────────────────────── */
.sgv-pills {
display: flex; gap: 0.4rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 1rem;
padding-bottom: 0.25rem;
}
.sgv-pills::-webkit-scrollbar { display: none; }
.sgv-pill {
flex-shrink: 0;
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
color: var(--sgv-text-body);
border-radius: var(--sgv-pill);
padding: 0.35rem 0.85rem;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
text-transform: capitalize;
white-space: nowrap;
font-family: inherit;
}
.sgv-pill:hover { border-color: var(--sgv-accent); color: var(--sgv-accent); }
.sgv-pill.is-active {
background: var(--sgv-accent);
border-color: var(--sgv-accent);
color: #fff;
}
/* ─────────────────────────────────────────────────────────────
GRID
───────────────────────────────────────────────────────────── */
.sgv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.85rem;
}
.sgv-grid--tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.65rem; }
.sgv-grid--loose { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
/* ─────────────────────────────────────────────────────────────
CARDS (with cover + body)
───────────────────────────────────────────────────────────── */
.sgv-card {
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
border-radius: var(--sgv-r-lg);
overflow: hidden;
box-shadow: var(--sgv-shadow-soft);
min-width: 0;
display: flex; flex-direction: column;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
position: relative;
}
.sgv-card--clickable { cursor: pointer; }
.sgv-card--clickable:hover {
border-color: var(--sgv-accent);
transform: translateY(-2px);
box-shadow: var(--sgv-shadow-card);
}
.sgv-card__cover {
position: relative;
height: 8.5rem;
background: linear-gradient(135deg, var(--cv-from, #9580FF), var(--cv-to, #6B5BFF));
overflow: hidden;
}
.sgv-card__cover--tall { height: 11rem; }
.sgv-card__cover--short { height: 6rem; }
.sgv-card__cover img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.sgv-card__cover::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,17,29,0.55) 100%);
pointer-events: none;
}
.sgv-card__cover-label {
position: absolute; left: 0.7rem; bottom: 0.55rem;
color: #fff; font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
z-index: 2;
}
.sgv-card__cover-flag {
position: absolute; right: 0.55rem; top: 0.55rem;
display: inline-flex; align-items: center; gap: 0.25rem;
background: rgba(255,255,255,0.92);
color: var(--sgv-accent);
font-size: 0.6rem; font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: var(--sgv-pill);
text-transform: uppercase; letter-spacing: 0.05em;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.sgv-card__cover-action {
position: absolute; right: 0.55rem; bottom: 0.55rem;
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem;
background: rgba(255,255,255,0.95);
color: var(--sgv-text);
border-radius: 999px;
z-index: 2;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
font-size: 0.7rem;
border: none; cursor: pointer;
transition: transform 0.12s ease, color 0.12s ease;
}
.sgv-card__cover-action:hover { background: rgba(149,128,255,0.10); color: var(--sgv-accent); }
.sgv-card__body {
padding: 0.75rem 0.9rem 0.9rem;
display: flex; flex-direction: column; gap: 0.4rem;
flex: 1;
}
.sgv-card__title {
font-size: 0.92rem; font-weight: 600;
color: var(--sgv-text); margin: 0;
overflow-wrap: break-word;
line-height: 1.25;
}
.sgv-card__desc {
font-size: 0.78rem; color: var(--sgv-text-body);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.sgv-card__desc--3 { -webkit-line-clamp: 3; }
.sgv-card__meta {
display: flex; gap: 0.35rem; flex-wrap: wrap;
font-size: 0.7rem;
color: var(--sgv-text-mute);
text-transform: capitalize;
}
.sgv-card__meta span {
display: inline-flex; align-items: center; gap: 0.25rem;
}
.sgv-card__meta i { font-size: 0.65rem; opacity: 0.8; }
/* ─────────────────────────────────────────────────────────────
CHIPS (inline metadata)
───────────────────────────────────────────────────────────── */
.sgv-chip {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.72rem;
padding: 0.25rem 0.6rem;
border-radius: var(--sgv-pill);
background: var(--sgv-page);
color: var(--sgv-text-body);
border: 1px solid var(--sgv-line);
text-transform: capitalize;
}
.sgv-chip i { font-size: 0.65rem; opacity: 0.8; }
.sgv-chip--accent {
background: var(--sgv-accent-soft);
color: var(--sgv-accent);
border-color: var(--sgv-accent-line);
}
.sgv-chip--success {
background: var(--sgv-success-soft);
color: var(--sgv-success);
border-color: var(--sgv-success-line);
}
.sgv-chip--warning {
background: var(--sgv-warning-soft);
color: var(--sgv-warning);
border-color: var(--sgv-warning-line);
}
.sgv-chip--danger {
background: var(--sgv-danger-soft);
color: var(--sgv-danger);
border-color: var(--sgv-danger-line);
}
/* ─────────────────────────────────────────────────────────────
BADGES (status — color via data-status)
───────────────────────────────────────────────────────────── */
.sgv-badge {
display: inline-flex; align-items: center; gap: 0.25rem;
font-size: 0.65rem; font-weight: 600;
padding: 0.15rem 0.5rem;
border-radius: var(--sgv-pill);
background: var(--sgv-page);
color: var(--sgv-text-body);
text-transform: capitalize;
border: 1px solid var(--sgv-line);
align-self: flex-start;
}
.sgv-badge[data-status="success"],
.sgv-badge[data-status="ok"],
.sgv-badge[data-status="active"],
.sgv-badge[data-status="paid"],
.sgv-badge[data-status="completed"],
.sgv-badge[data-status="principiante"] {
background: var(--sgv-success-soft);
color: var(--sgv-success);
border-color: var(--sgv-success-line);
}
.sgv-badge[data-status="warning"],
.sgv-badge[data-status="pending"],
.sgv-badge[data-status="intermedio"] {
background: var(--sgv-warning-soft);
color: var(--sgv-warning);
border-color: var(--sgv-warning-line);
}
.sgv-badge[data-status="danger"],
.sgv-badge[data-status="error"],
.sgv-badge[data-status="expired"],
.sgv-badge[data-status="overdue"],
.sgv-badge[data-status="avanzado"] {
background: var(--sgv-danger-soft);
color: var(--sgv-danger);
border-color: var(--sgv-danger-line);
}
/* ─────────────────────────────────────────────────────────────
HERO BANNER (filter / module hero)
───────────────────────────────────────────────────────────── */
.sgv-hero {
position: relative;
height: 10rem;
border-radius: var(--sgv-r-lg);
overflow: hidden;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--sgv-accent), var(--sgv-accent-2));
box-shadow: var(--sgv-shadow-card);
animation: sgvHeroIn 0.28s ease-out;
}
.sgv-hero--tall { height: 13rem; }
@keyframes sgvHeroIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
.sgv-hero img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.sgv-hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(15,17,29,0.62) 0%, rgba(15,17,29,0.18) 60%, rgba(15,17,29,0) 100%);
pointer-events: none;
}
.sgv-hero__body {
position: absolute; left: 1.2rem; bottom: 1rem; right: 1.2rem;
color: #fff;
z-index: 2;
text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.sgv-hero__kicker {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em;
opacity: 0.92; font-weight: 600; margin: 0 0 0.2rem;
}
.sgv-hero__title {
font-size: 1.55rem; font-weight: 700; margin: 0;
text-transform: capitalize; line-height: 1.05;
}
.sgv-hero__meta {
font-size: 0.8rem; opacity: 0.92; margin: 0.25rem 0 0;
}
@media (min-width: 700px) {
.sgv-hero { height: 12rem; }
.sgv-hero__title { font-size: 1.85rem; }
}
/* ─────────────────────────────────────────────────────────────
EMPTY STATE
───────────────────────────────────────────────────────────── */
.sgv-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--sgv-text-mute);
background: var(--sgv-bg);
border: 1px dashed var(--sgv-line-strong);
border-radius: var(--sgv-r-lg);
}
.sgv-empty i { font-size: 1.8rem; margin-bottom: 0.6rem; display: block; color: var(--sgv-accent); }
.sgv-empty p { margin: 0.2rem 0; font-size: 0.88rem; }
/* ─────────────────────────────────────────────────────────────
MODAL (bottom-sheet on mobile → centered on desktop)
───────────────────────────────────────────────────────────── */
.sgv-modal {
position: fixed; inset: 0; z-index: var(--sgv-z-modal);
display: none;
align-items: flex-end; justify-content: center;
background: rgba(15, 17, 29, 0.5);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
padding: 0;
}
.sgv-modal.is-open { display: flex; }
@media (min-width: 700px) {
.sgv-modal { align-items: center; padding: 1.5rem; }
}
.sgv-modal__card {
background: var(--sgv-bg);
border-radius: var(--sgv-r-xl) var(--sgv-r-xl) 0 0;
width: 100%; max-width: 30rem;
padding: 0;
max-height: 92vh;
display: flex; flex-direction: column;
box-shadow: var(--sgv-shadow-modal);
}
.sgv-modal__card--wide { max-width: 44rem; }
@media (min-width: 700px) {
.sgv-modal__card { border-radius: var(--sgv-r-xl); max-height: 88vh; }
}
.sgv-modal__hero {
position: relative;
height: 9rem;
background: linear-gradient(135deg, var(--cv-from, #9580FF), var(--cv-to, #6B5BFF));
border-radius: var(--sgv-r-xl) var(--sgv-r-xl) 0 0;
overflow: hidden;
flex-shrink: 0;
}
.sgv-modal__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgv-modal__hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(15,17,29,0.55) 100%);
pointer-events: none;
}
.sgv-modal__close {
position: absolute; top: 0.6rem; right: 0.6rem;
width: 2rem; height: 2rem;
border-radius: 999px;
background: rgba(255,255,255,0.94);
border: none; cursor: pointer;
color: var(--sgv-text);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.85rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 3;
}
.sgv-modal__hero-title {
position: absolute; left: 1rem; right: 4rem; bottom: 0.7rem;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.4);
z-index: 2;
}
.sgv-modal__hero-title p {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
opacity: 0.9; margin: 0 0 0.15rem; font-weight: 600;
}
.sgv-modal__hero-title h2 {
font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.2;
}
.sgv-modal__body {
padding: 1rem 1.2rem 1.2rem;
overflow-y: auto;
flex: 1;
}
.sgv-modal__head {
padding: 1rem 1.2rem 0.5rem;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--sgv-line);
padding-bottom: 0.85rem;
margin-bottom: 0.6rem;
}
.sgv-modal__head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.sgv-modal__section {
margin-bottom: 0.9rem;
}
.sgv-modal__section-label {
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--sgv-text-mute); font-weight: 600;
margin-bottom: 0.3rem;
}
.sgv-modal__section-body {
font-size: 0.86rem; color: var(--sgv-text-body); line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
}
.sgv-modal__chips {
display: flex; gap: 0.4rem; flex-wrap: wrap;
margin-bottom: 0.85rem;
}
.sgv-modal__actions {
display: flex; gap: 0.5rem; justify-content: flex-end;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.sgv-modal__actions--split { justify-content: space-between; }
/* ─────────────────────────────────────────────────────────────
FORM FIELDS
───────────────────────────────────────────────────────────── */
.sgv-field { margin-bottom: 0.85rem; }
.sgv-field__label {
display: block;
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--sgv-text-mute); font-weight: 600;
margin-bottom: 0.3rem;
}
.sgv-field__input,
.sgv-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sgv-field select,
.sgv-field textarea {
width: 100%;
background: var(--sgv-page);
border: 1px solid var(--sgv-line);
color: var(--sgv-text);
border-radius: var(--sgv-r-sm);
padding: 0.55rem 0.75rem;
font-size: 0.9rem;
outline: none;
font-family: inherit;
}
.sgv-field textarea { resize: vertical; min-height: 4rem; }
.sgv-field__input:focus,
.sgv-field input:focus,
.sgv-field select:focus,
.sgv-field textarea:focus {
border-color: var(--sgv-accent);
background: var(--sgv-bg);
box-shadow: 0 0 0 3px var(--sgv-accent-soft);
}
.sgv-field__hint {
font-size: 0.7rem; color: var(--sgv-text-mute);
margin: 0.3rem 0 0;
}
.sgv-field--row {
display: flex; gap: 0.6rem; align-items: end;
}
.sgv-field--row > * { flex: 1; }
/* ─────────────────────────────────────────────────────────────
IMAGE PICKER (file upload + preview)
───────────────────────────────────────────────────────────── */
.sgv-imgpick {
display: flex; gap: 0.7rem; align-items: stretch;
}
.sgv-imgpick__preview {
width: 4.5rem; height: 4.5rem;
border-radius: var(--sgv-r-md);
background: var(--sgv-page);
border: 1px dashed var(--sgv-line-strong);
overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
color: var(--sgv-text-mute);
flex-shrink: 0;
}
.sgv-imgpick__preview img {
width: 100%; height: 100%;
object-fit: cover;
}
.sgv-imgpick__preview--wide {
width: 100%; height: 8rem;
max-width: 14rem;
}
.sgv-imgpick__controls {
flex: 1;
display: flex; flex-direction: column; gap: 0.35rem;
justify-content: center;
}
.sgv-imgpick__btn {
display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--sgv-page);
border: 1px solid var(--sgv-line);
color: var(--sgv-text-body);
padding: 0.45rem 0.85rem;
border-radius: var(--sgv-pill);
font-size: 0.8rem;
cursor: pointer;
align-self: flex-start;
font-family: inherit;
}
.sgv-imgpick__btn:hover { border-color: var(--sgv-accent); color: var(--sgv-accent); }
.sgv-imgpick__btn--danger:hover { border-color: var(--sgv-danger); color: var(--sgv-danger); }
.sgv-imgpick__hint { font-size: 0.7rem; color: var(--sgv-text-mute); margin: 0; }
.sgv-imgpick__file { display: none; }
/* ─────────────────────────────────────────────────────────────
VIDEO MODAL (YouTube / HTML5)
───────────────────────────────────────────────────────────── */
.sgv-video-modal {
position: fixed; inset: 0; z-index: var(--sgv-z-video);
display: none; align-items: center; justify-content: center;
background: rgba(0,0,0,0.82);
padding: 1rem;
}
.sgv-video-modal.is-open { display: flex; }
.sgv-video-modal__card {
background: #111; border-radius: var(--sgv-r-lg);
width: 100%; max-width: 56rem;
position: relative;
overflow: hidden;
}
.sgv-video-modal__head {
padding: 0.7rem 1rem;
display: flex; align-items: center; justify-content: space-between;
color: #fff;
background: rgba(255,255,255,0.05);
}
.sgv-video-modal__head p { margin: 0; font-size: 0.9rem; font-weight: 600; }
.sgv-video-modal__close {
background: rgba(255,255,255,0.1);
border: none; color: #fff;
width: 2rem; height: 2rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit;
}
.sgv-video-modal__body {
position: relative;
padding-bottom: 56.25%;
height: 0;
background: #000;
}
.sgv-video-modal__body iframe,
.sgv-video-modal__body video {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: none;
background: #000;
}
/* ─────────────────────────────────────────────────────────────
TOAST
───────────────────────────────────────────────────────────── */
.sgv-toast {
position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
background: rgba(17, 24, 39, 0.92);
color: #fff;
padding: 0.55rem 1rem;
border-radius: var(--sgv-pill);
font-size: 0.82rem;
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
opacity: 0; pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: var(--sgv-z-toast);
backdrop-filter: blur(8px);
}
.sgv-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(-2px); }
/* ─────────────────────────────────────────────────────────────
STAT TILES (numeric KPIs, dashboard-style)
───────────────────────────────────────────────────────────── */
.sgv-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.7rem;
margin-bottom: 1rem;
}
.sgv-stat {
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
border-radius: var(--sgv-r-md);
padding: 0.85rem 1rem;
box-shadow: var(--sgv-shadow-soft);
}
.sgv-stat__label {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--sgv-text-mute); font-weight: 600;
margin: 0 0 0.25rem;
}
.sgv-stat__value {
font-size: 1.45rem; font-weight: 700;
color: var(--sgv-text);
margin: 0;
line-height: 1.1;
}
.sgv-stat__delta {
font-size: 0.72rem; font-weight: 500;
margin: 0.25rem 0 0;
color: var(--sgv-text-mute);
}
.sgv-stat__delta--up { color: var(--sgv-success); }
.sgv-stat__delta--down { color: var(--sgv-danger); }
/* ─────────────────────────────────────────────────────────────
SECTION HEADER (between blocks within a page)
───────────────────────────────────────────────────────────── */
.sgv-section-head {
display: flex; align-items: center; justify-content: space-between;
margin: 1.2rem 0 0.6rem;
gap: 0.6rem;
}
.sgv-section-head h2 {
font-size: 0.95rem; font-weight: 600;
margin: 0;
color: var(--sgv-text);
}
.sgv-section-head__action {
font-size: 0.78rem; color: var(--sgv-accent);
cursor: pointer;
}
.sgv-section-head__action:hover { text-decoration: underline; }
/* ─────────────────────────────────────────────────────────────
LIST (vertical list, plain)
───────────────────────────────────────────────────────────── */
.sgv-list {
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
border-radius: var(--sgv-r-md);
overflow: hidden;
box-shadow: var(--sgv-shadow-soft);
}
.sgv-list__item {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--sgv-line);
cursor: pointer;
transition: background 0.12s ease;
}
.sgv-list__item:last-child { border-bottom: none; }
.sgv-list__item:hover { background: var(--sgv-page); }
.sgv-list__item-avatar {
width: 2.4rem; height: 2.4rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--sgv-page-strong);
}
.sgv-list__item-body { flex: 1; min-width: 0; }
.sgv-list__item-title {
font-size: 0.88rem; font-weight: 600;
color: var(--sgv-text);
margin: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sgv-list__item-sub {
font-size: 0.74rem; color: var(--sgv-text-mute);
margin: 0.1rem 0 0;
}
/* ─────────────────────────────────────────────────────────────
FAB (floating action button, mobile)
───────────────────────────────────────────────────────────── */
.sgv-fab {
position: fixed; right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom));
width: 3.4rem; height: 3.4rem;
border-radius: 999px;
background: var(--sgv-accent);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 10px 24px -8px rgba(149, 128, 255, 0.55);
font-size: 1.05rem;
z-index: var(--sgv-z-sticky);
display: inline-flex; align-items: center; justify-content: center;
}
.sgv-fab:hover { background: var(--sgv-accent-2); box-shadow: 0 14px 32px -8px rgba(149, 128, 255, 0.72); }
@media (min-width: 768px) {
.sgv-fab { bottom: 1.4rem; }
}
/* ─────────────────────────────────────────────────────────────
UTILITIES (tiny set, opt-in)
───────────────────────────────────────────────────────────── */
.sgv-u-row { display: flex; align-items: center; gap: 0.5rem; }
.sgv-u-col { display: flex; flex-direction: column; gap: 0.5rem; }
.sgv-u-spread { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.sgv-u-mute { color: var(--sgv-text-mute); }
.sgv-u-body { color: var(--sgv-text-body); }
.sgv-u-bold { font-weight: 600; }
.sgv-u-pad-safe { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
.sgv-u-pad-safe { padding-bottom: 2rem; }
}
/* ════════════════════════════════════════════════════════════════
GLOBAL TAILWIND COLOR SWEEP (v2.0 — lavender across the app)
Replaces hardcoded green/emerald/teal/cyan/indigo/purple/violet
Tailwind classes everywhere they appear (inline templates, JS
innerHTML, third-party widgets). Semantic colors (red/amber)
preserved as-is. Apply globally — no opt-out for now.
════════════════════════════════════════════════════════════════ */
/* text-* */
.text-green-300, .text-green-400, .text-green-500, .text-green-600, .text-green-700,
.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-emerald-700,
.text-teal-400, .text-teal-500, .text-teal-600,
.text-cyan-400, .text-cyan-500, .text-cyan-600,
.text-indigo-400, .text-indigo-500, .text-indigo-600,
.text-purple-300, .text-purple-400, .text-purple-500, .text-purple-600, .text-purple-700,
.text-violet-400, .text-violet-500, .text-violet-600 {
color: var(--sgv-accent) !important;
}
/* bg-* solid (mid + strong) */
.bg-green-300, .bg-green-400, .bg-green-500, .bg-green-600,
.bg-emerald-300, .bg-emerald-400, .bg-emerald-500, .bg-emerald-600,
.bg-teal-300, .bg-teal-400, .bg-teal-500, .bg-teal-600,
.bg-cyan-300, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600,
.bg-indigo-300, .bg-indigo-400, .bg-indigo-500, .bg-indigo-600,
.bg-purple-300, .bg-purple-400, .bg-purple-500, .bg-purple-600,
.bg-violet-300, .bg-violet-400, .bg-violet-500, .bg-violet-600,
.hover\:bg-green-600:hover, .hover\:bg-emerald-600:hover,
.hover\:bg-teal-600:hover, .hover\:bg-cyan-600:hover,
.hover\:bg-indigo-600:hover, .hover\:bg-purple-600:hover,
.hover\:bg-violet-600:hover {
background-color: var(--sgv-accent) !important;
}
.hover\:bg-green-700:hover, .hover\:bg-emerald-700:hover,
.hover\:bg-teal-700:hover, .hover\:bg-cyan-700:hover,
.hover\:bg-indigo-700:hover, .hover\:bg-purple-700:hover {
background-color: var(--sgv-accent-2) !important;
}
/* bg-* soft (50/100/200) */
.bg-green-50, .bg-emerald-50, .bg-teal-50, .bg-cyan-50,
.bg-indigo-50, .bg-purple-50, .bg-violet-50 {
background-color: var(--sgv-accent-soft) !important;
}
.bg-green-100, .bg-emerald-100, .bg-teal-100, .bg-cyan-100,
.bg-indigo-100, .bg-purple-100, .bg-violet-100 {
background-color: rgba(149, 128, 255, 0.12) !important;
}
.bg-green-200, .bg-emerald-200, .bg-teal-200, .bg-cyan-200,
.bg-purple-200, .bg-violet-200 {
background-color: rgba(149, 128, 255, 0.18) !important;
}
/* border-* */
.border-green-200, .border-emerald-200, .border-teal-200, .border-cyan-200,
.border-sky-200, .border-blue-200,
.border-indigo-200, .border-purple-200, .border-violet-200 {
border-color: var(--sgv-accent-line) !important;
}
.border-green-400, .border-emerald-400, .border-teal-400, .border-cyan-400,
.border-sky-400, .border-blue-400,
.border-green-500, .border-emerald-500, .border-teal-500, .border-cyan-500,
.border-sky-500, .border-blue-500,
.border-indigo-400, .border-indigo-500,
.border-purple-400, .border-purple-500,
.border-violet-400, .border-violet-500 {
border-color: var(--sgv-accent) !important;
}
/* border with opacity (border-cyan-500/30 etc.) */
[class*="border-cyan-"][class*="\/"], [class*="border-sky-"][class*="\/"],
[class*="border-teal-"][class*="\/"], [class*="border-blue-"][class*="\/"],
[class*="border-indigo-"][class*="\/"], [class*="border-violet-"][class*="\/"],
[class*="border-purple-"][class*="\/"], [class*="border-emerald-"][class*="\/"] {
border-color: rgba(149, 128, 255, 0.30) !important;
}
/* bg with opacity (bg-cyan-500/10 etc. — JS-injected utility blends; matches only opacity variants) */
[class*="bg-cyan-500/"], [class*="bg-cyan-400/"], [class*="bg-cyan-600/"],
[class*="bg-sky-500/"], [class*="bg-sky-400/"],
[class*="bg-teal-500/"], [class*="bg-teal-400/"],
[class*="bg-indigo-500/"], [class*="bg-indigo-400/"], [class*="bg-indigo-600/"],
[class*="bg-violet-500/"], [class*="bg-violet-400/"], [class*="bg-violet-600/"],
[class*="bg-purple-500/"], [class*="bg-purple-400/"], [class*="bg-purple-600/"] {
background-color: rgba(149, 128, 255, 0.10) !important;
}
/* gradient-from / gradient-to / gradient-via */
[class*="bg-gradient-to"][class*="from-green-"],
[class*="bg-gradient-to"][class*="from-emerald-"],
[class*="bg-gradient-to"][class*="from-teal-"],
[class*="bg-gradient-to"][class*="from-cyan-"],
[class*="bg-gradient-to"][class*="from-sky-"],
[class*="bg-gradient-to"][class*="from-blue-"],
[class*="bg-gradient-to"][class*="from-indigo-"],
[class*="bg-gradient-to"][class*="from-purple-"],
[class*="bg-gradient-to"][class*="from-violet-"] {
background-image: linear-gradient(135deg, var(--sgv-accent), var(--sgv-accent-2)) !important;
}
/* shadows tinted (incluye cyan/sky/teal/pink/fuchsia/rose/violet) */
.shadow-green-500\/15, .shadow-emerald-500\/15,
.shadow-indigo-500\/15, .shadow-purple-500\/15,
.shadow-green-500\/20, .shadow-emerald-500\/20,
.shadow-indigo-500\/20, .shadow-purple-500\/20,
.shadow-cyan-500\/5, .shadow-cyan-500\/10, .shadow-cyan-500\/15, .shadow-cyan-500\/20,
.shadow-sky-500\/5, .shadow-sky-500\/10, .shadow-sky-500\/15, .shadow-sky-500\/20,
.shadow-teal-500\/10, .shadow-teal-500\/15, .shadow-teal-500\/20,
.shadow-pink-500\/15, .shadow-pink-500\/20, .shadow-pink-500\/30,
.shadow-fuchsia-500\/15, .shadow-fuchsia-500\/20,
.shadow-violet-500\/15, .shadow-violet-500\/20, .shadow-violet-500\/30 {
box-shadow: 0 6px 14px -6px var(--sgv-accent-glow) !important;
}
/* ring (focus) */
.ring-green-400, .ring-green-500, .ring-emerald-400, .ring-emerald-500,
.ring-teal-400, .ring-teal-500, .ring-cyan-400, .ring-cyan-500,
.ring-sky-400, .ring-sky-500, .ring-blue-400, .ring-blue-500,
.ring-indigo-400, .ring-indigo-500, .ring-violet-400, .ring-violet-500,
.ring-purple-400, .ring-purple-500 {
--tw-ring-color: var(--sgv-accent) !important;
}
/* ring with opacity (e.g. ring-cyan-500/40) */
[class*="ring-cyan-"][class*="\/"], [class*="ring-sky-"][class*="\/"],
[class*="ring-teal-"][class*="\/"], [class*="ring-blue-"][class*="\/"],
[class*="ring-indigo-"][class*="\/"], [class*="ring-violet-"][class*="\/"],
[class*="ring-purple-"][class*="\/"], [class*="ring-emerald-"][class*="\/"] {
--tw-ring-color: rgba(149, 128, 255, 0.45) !important;
}
/* SVG fills/strokes (chart libraries, icons coded with green/emerald) */
[fill="#10B981"], [fill="#22C55E"], [fill="#16A34A"], [fill="#4CAF50"], [fill="#8BC34A"],
[stroke="#10B981"], [stroke="#22C55E"], [stroke="#4CAF50"] {
fill: var(--sgv-accent) !important;
stroke: var(--sgv-accent) !important;
}
/* Dark surfaces (bg-gray-700/800/900, bg-black/X, bg-slate-700/800/900) — invert to light */
.bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-slate-700, .bg-slate-800, .bg-slate-900,
.bg-zinc-700, .bg-zinc-800, .bg-zinc-900,
.bg-neutral-700, .bg-neutral-800, .bg-neutral-900,
.bg-stone-700, .bg-stone-800, .bg-stone-900,
.bg-black { background-color: var(--sgv-bg) !important; color: var(--sgv-text) !important; }
.bg-black\/10, .bg-black\/20, .bg-black\/30, .bg-black\/40 {
background-color: var(--sgv-page) !important;
}
.border-gray-600, .border-gray-700, .border-gray-800,
.border-slate-600, .border-slate-700, .border-slate-800,
.border-zinc-600, .border-zinc-700, .border-zinc-800 {
border-color: var(--sgv-line) !important;
}
.bg-white\/5, .bg-white\/10, .bg-white\/20 {
background-color: var(--sgv-accent-soft) !important;
}
.border-white\/5, .border-white\/10, .border-white\/20 {
border-color: var(--sgv-line) !important;
}
/* Heading-y text-white (likely titles, not CTA labels) — inside cards/panels */
.glass-panel .text-white, .card-premium .text-white, .glass-card .text-white,
.glass-soft .text-white, .bg-gray-700 .text-white, .bg-gray-800 .text-white,
.bg-slate-700 .text-white, .bg-slate-800 .text-white,
h1.text-white, h2.text-white, h3.text-white, h4.text-white,
label.text-white, p.text-white,
.text-white.font-semibold, .text-white.font-medium, .text-white.font-bold {
color: var(--sgv-text) !important;
}
.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500,
.text-zinc-400, .text-zinc-500, .text-neutral-400, .text-neutral-500 {
color: var(--sgv-text-mute) !important;
}
.text-white\/30 { color: var(--sgv-text-mute) !important; }
.text-white\/50, .text-white\/40 { color: var(--sgv-text-mute) !important; }
.text-white\/70, .text-white\/60 { color: var(--sgv-text-body) !important; }
.text-white\/90 { color: var(--sgv-text) !important; }
.hover\:text-white:hover { color: var(--sgv-accent) !important; }
.focus\:border-cyan-500:focus, .focus\:border-blue-500:focus,
.focus\:border-emerald-500:focus, .focus\:border-indigo-500:focus,
.focus\:border-purple-500:focus, .focus\:border-violet-500:focus {
border-color: var(--sgv-accent) !important;
box-shadow: 0 0 0 3px var(--sgv-accent-soft) !important;
}
/* ════════════════════════════════════════════════════════════════
LEGACY MODULE PATTERNS — module-hero / module-info / nav-tabs
Many fragments use these shared classes. Force light + lavender.
════════════════════════════════════════════════════════════════ */
.module-hero {
background: linear-gradient(135deg, rgba(149,128,255,0.10), rgba(149,128,255,0.04)) !important;
border: 1px solid rgba(149,128,255,0.22) !important;
border-radius: 1.25rem !important;
padding: 1.25rem 1.5rem !important;
color: var(--sgv-text) !important;
box-shadow: var(--sgv-shadow-soft) !important;
}
.module-hero-icon {
width: 3rem; height: 3rem;
border-radius: 0.85rem;
background: rgba(149,128,255,0.15) !important;
color: var(--sgv-accent) !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.module-hero-header { display: flex; align-items: flex-start; gap: 1rem; }
.module-hero-title {
font-size: 1.55rem !important;
font-weight: 700 !important;
color: var(--sgv-text) !important;
margin: 0 !important;
line-height: 1.1 !important;
letter-spacing: -0.015em;
}
.module-hero-description {
font-size: 0.85rem !important;
color: var(--sgv-text-body) !important;
margin: 0.35rem 0 0 !important;
line-height: 1.45;
max-width: 36rem;
}
.module-hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 700px) {
.module-hero-title { font-size: 1.75rem !important; }
}
.module-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.85rem;
}
.module-info-card {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-r-md) !important;
padding: 1rem 1.1rem !important;
box-shadow: var(--sgv-shadow-soft) !important;
display: flex; gap: 0.85rem; align-items: flex-start;
color: var(--sgv-text) !important;
}
.module-info-icon {
width: 2.4rem; height: 2.4rem;
border-radius: 0.7rem;
background: rgba(149,128,255,0.10) !important;
color: var(--sgv-accent) !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
.module-info-title {
font-size: 0.88rem !important;
font-weight: 600 !important;
color: var(--sgv-text) !important;
margin: 0 !important;
line-height: 1.2;
}
.module-info-text {
font-size: 0.76rem !important;
color: var(--sgv-text-body) !important;
margin: 0.2rem 0 0 !important;
line-height: 1.45;
}
/* Generic chip used in legacy templates */
.chip {
display: inline-flex; align-items: center; gap: 0.3rem;
background: var(--sgv-accent-soft) !important;
color: var(--sgv-accent) !important;
border: 1px solid var(--sgv-accent-line) !important;
border-radius: var(--sgv-pill);
padding: 0.25rem 0.7rem;
font-size: 0.72rem;
font-weight: 600;
text-transform: capitalize;
}
/* Bootstrap nav-tabs (legacy) */
.nav-tabs {
border-bottom: 1px solid var(--sgv-line) !important;
gap: 0.25rem;
display: flex; flex-wrap: wrap;
}
.nav-tabs .nav-link {
color: var(--sgv-text-body) !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: 0.55rem 0.95rem !important;
font-size: 0.85rem !important;
font-weight: 500;
transition: color 0.12s ease, border-color 0.12s ease;
}
.nav-tabs .nav-link:hover {
color: var(--sgv-accent) !important;
}
.nav-tabs .nav-link.active {
color: var(--sgv-accent) !important;
border-bottom-color: var(--sgv-accent) !important;
font-weight: 600;
background: transparent !important;
}
/* user-data-panel & stack-lg containers — give them a v2 card chrome */
.user-data-panel {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-r-lg) !important;
box-shadow: var(--sgv-shadow-soft) !important;
padding: 1.2rem !important;
color: var(--sgv-text) !important;
}
.stack-lg > * + * { margin-top: 1rem; }
/* ════════════════════════════════════════════════════════════════
APP SHELL — light + lavender (override the dark navbar globally)
════════════════════════════════════════════════════════════════ */
body, .app-main, .container, .app-shell, [data-theme] body {
background-color: var(--sgv-page) !important;
color: var(--sgv-text);
letter-spacing: -0.01em;
}
.app-main { padding: 1rem; }
@media (min-width: 768px) { .app-main { padding: 1.5rem; } }
@media (min-width: 1024px) { .app-main { padding: 1.75rem 2rem; } }
/* Top navbar — light blur with lavender accent for icons */
.nav-premium {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: saturate(180%) blur(12px) !important;
-webkit-backdrop-filter: saturate(180%) blur(12px) !important;
border-bottom: 1px solid var(--sgv-line) !important;
box-shadow: var(--sgv-shadow-soft) !important;
}
.nav-shell { color: var(--sgv-text); }
.gym-switcher__select {
background: var(--sgv-bg) !important;
color: var(--sgv-text) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-pill) !important;
padding: 0.4rem 2rem 0.4rem 0.85rem !important;
font-size: 0.85rem !important;
font-weight: 600;
appearance: none;
}
.gym-switcher__chev { color: var(--sgv-text-mute) !important; }
.nav-icon-btn {
background: var(--sgv-bg) !important;
color: var(--sgv-text-body) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-pill) !important;
width: 2.25rem !important; height: 2.25rem !important;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.nav-icon-btn:hover {
background: var(--sgv-accent-soft) !important;
color: var(--sgv-accent) !important;
border-color: var(--sgv-accent-line) !important;
}
.nav-badge {
background: var(--sgv-danger) !important;
color: #fff !important;
border: 2px solid #fff !important;
}
/* Sidebar (light v2) */
aside#sidebarMenu {
background: var(--sgv-bg) !important;
border-right: 1px solid var(--sgv-line) !important;
color: var(--sgv-text);
}
.sb-profile {
background: var(--sgv-page) !important;
border-radius: var(--sgv-r-md) !important;
color: var(--sgv-text) !important;
padding: 0.7rem !important;
margin: 0.7rem !important;
display: flex; align-items: center; gap: 0.6rem;
text-decoration: none;
}
.sb-profile__avatar {
width: 2.4rem; height: 2.4rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: var(--sgv-page-strong);
}
.sb-profile__name {
font-size: 0.88rem; font-weight: 600;
color: var(--sgv-text) !important;
margin: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-profile__sub {
font-size: 0.72rem; color: var(--sgv-text-mute) !important;
margin: 0.1rem 0 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-divider {
height: 1px;
background: var(--sgv-line);
margin: 0.5rem 0.7rem;
}
/* Sidebar items (defined in sg-dashboard.css) */
.sidebar-item, .sb-item, .sb-link {
color: var(--sgv-text-body) !important;
}
.sidebar-item:hover, .sb-item:hover, .sb-link:hover,
.sidebar-item.active, .sb-item.is-active, .sb-link.is-active {
background: var(--sgv-accent-soft) !important;
color: var(--sgv-accent) !important;
}
/* ── Unthread theme overrides (themes.css hardcodes red #9580FF here) ── */
[data-theme="unthread"] .sidebar-item-premium:hover i,
.sidebar-item-premium:hover i { color: var(--sgv-accent) !important; }
[data-theme="unthread"] .sidebar-item-premium.active,
.sidebar-item-premium.active {
background: var(--sgv-accent-soft) !important;
border-left-color: var(--sgv-accent) !important;
}
[data-theme="unthread"] .sidebar-item-premium.active i,
.sidebar-item-premium.active i { color: var(--sgv-accent) !important; }
[data-theme="unthread"] .sidebar-item-premium.active .sidebar-label-premium,
.sidebar-item-premium.active .sidebar-label-premium { color: var(--sgv-accent) !important; }
/* Sidebar group toggle (section headers) — never red, mute when closed,
lavender when open */
.sidebar-group-toggle span,
[data-theme="unthread"] .sidebar-group-toggle span {
color: var(--sgv-text-mute) !important;
}
.sidebar-group-toggle.open span,
[data-theme="unthread"] .sidebar-group-toggle.open span {
color: var(--sgv-accent) !important;
}
.sidebar-group-toggle i.group-icon,
[data-theme="unthread"] .sidebar-group-toggle i.group-icon {
color: var(--sgv-text-mute) !important;
}
.sidebar-group-toggle.open i.group-icon,
[data-theme="unthread"] .sidebar-group-toggle.open i.group-icon {
color: var(--sgv-accent) !important;
}
.sidebar-group-toggle:hover,
[data-theme="unthread"] .sidebar-group-toggle:hover {
background: var(--sgv-accent-soft) !important;
}
/* Bottom-nav mobile — cubre TODOS los selectores en uso: .sg-bottom-nav (sg-bottom-nav.css),
.bottom-nav y .bn-root (legacy). El default de sg-bottom-nav.css es dark glass; lo invertimos
a light glass para el tema v2 lavender. */
.sg-bottom-nav, .bottom-nav, .bn-root {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border-top: 1px solid var(--sgv-line) !important;
color: var(--sgv-text);
box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.06) !important;
}
.sg-bn__item, .bottom-nav a, .bn-item {
color: var(--sgv-text-mute) !important;
}
.sg-bn__item:active, .sg-bn__item:hover {
background: rgba(149, 128, 255, 0.06) !important;
}
.sg-bn__item.is-active, .sg-bn__item.is-active i,
.bottom-nav a.active, .bn-item.is-active, .bn-item--active {
color: var(--sgv-accent) !important;
}
.sg-bn__item.is-active::before {
background: var(--sgv-accent) !important;
}
/* Generic primary button (.btn-primary from Bootstrap-ish legacy) */
.btn-primary, button.btn-primary {
background: var(--sgv-accent) !important;
border-color: var(--sgv-accent) !important;
color: #fff !important;
box-shadow: var(--sgv-shadow-accent) !important;
}
.btn-primary:hover, button.btn-primary:hover {
background: var(--sgv-accent-2) !important;
border-color: var(--sgv-accent-2) !important;
}
.btn-secondary, button.btn-secondary {
background: var(--sgv-bg) !important;
border-color: var(--sgv-line) !important;
color: var(--sgv-text-body) !important;
}
/* ── Sidebar Rail Mode (desktop hamburger colapsa a iconos) ────────────────
Cuando body.is-sidebar-rail está activo y viewport >= 768px:
- #sidebarMenu shrinks from 14rem to 4.5rem
- Profile name, item labels, group titles se ocultan (solo iconos visibles)
- Iconos quedan centrados
- Items siguen siendo clickeables, tooltips via title atributo
*/
@media (min-width: 768px) {
body.is-sidebar-rail #sidebarMenu {
width: 4.5rem !important;
transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
body.is-sidebar-rail #sidebarMenu .sb-profile-name,
body.is-sidebar-rail #sidebarMenu .sb-profile-meta,
body.is-sidebar-rail #sidebarMenu .sb-profile,
body.is-sidebar-rail #sidebarMenu .sidebar-label-premium,
body.is-sidebar-rail #sidebarMenu .sidebar-group-title,
body.is-sidebar-rail #sidebarMenu .sidebar-group-toggle span,
body.is-sidebar-rail #sidebarMenu .sb-item span:not(.sg-badge),
body.is-sidebar-rail #sidebarMenu .sidebar-item-premium span,
body.is-sidebar-rail #sidebarMenu i.fa-chevron-down,
body.is-sidebar-rail #sidebarMenu i.fa-chevron-up {
display: none !important;
}
body.is-sidebar-rail #sidebarMenu .sb-item,
body.is-sidebar-rail #sidebarMenu .sidebar-item-premium,
body.is-sidebar-rail #sidebarMenu .sidebar-group-toggle {
justify-content: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Profile area: shrink to just avatar circle */
body.is-sidebar-rail #sidebarMenu .sb-profile-card,
body.is-sidebar-rail #sidebarMenu .sb-profile-avatar {
margin: 0 auto !important;
}
/* Tooltip-on-hover replacement: expand to 14rem when hovering the rail */
body.is-sidebar-rail #sidebarMenu:hover {
width: 14rem !important;
z-index: 60;
background: var(--sgv-bg, #FFFFFF);
box-shadow: 4px 0 18px rgba(17,24,39,0.08);
}
body.is-sidebar-rail #sidebarMenu:hover .sb-profile-name,
body.is-sidebar-rail #sidebarMenu:hover .sb-profile-meta,
body.is-sidebar-rail #sidebarMenu:hover .sb-profile,
body.is-sidebar-rail #sidebarMenu:hover .sidebar-label-premium,
body.is-sidebar-rail #sidebarMenu:hover .sidebar-group-title,
body.is-sidebar-rail #sidebarMenu:hover .sidebar-group-toggle span,
body.is-sidebar-rail #sidebarMenu:hover .sb-item span:not(.sg-badge),
body.is-sidebar-rail #sidebarMenu:hover .sidebar-item-premium span,
body.is-sidebar-rail #sidebarMenu:hover i.fa-chevron-down,
body.is-sidebar-rail #sidebarMenu:hover i.fa-chevron-up {
display: revert !important;
}
}
/* Tables — give legacy tables a v2 chrome */
table.sg-table, .table, table.table {
background: var(--sgv-bg) !important;
color: var(--sgv-text) !important;
border-radius: var(--sgv-r-md) !important;
overflow: hidden;
border-collapse: separate;
border-spacing: 0;
}
table.sg-table thead, .table thead, table.table thead {
background: var(--sgv-page) !important;
color: var(--sgv-text-mute) !important;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
table.sg-table th, .table th, table.table th {
padding: 0.7rem 1rem !important;
border-bottom: 1px solid var(--sgv-line) !important;
text-align: left;
font-weight: 600;
}
table.sg-table td, .table td, table.table td {
padding: 0.65rem 1rem !important;
border-bottom: 1px solid var(--sgv-line) !important;
font-size: 0.85rem;
}
table.sg-table tr:hover, .table tr:hover {
background: var(--sgv-page) !important;
}
/* Card patterns commonly used */
.sg-card, .dashboard-card, .glass-card, .card,
.card-premium, .glass-panel, .premium-card, .info-card,
.glass-soft, .glass, .neo-card {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-r-lg) !important;
box-shadow: var(--sgv-shadow-soft) !important;
color: var(--sgv-text) !important;
}
/* btn-ghost (Bootstrap-ish legacy) */
.btn-ghost, button.btn-ghost {
background: transparent !important;
border: 1px solid var(--sgv-line) !important;
color: var(--sgv-text-body) !important;
padding: 0.5rem 0.95rem !important;
border-radius: var(--sgv-pill) !important;
cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.btn-ghost:hover { background: var(--sgv-page) !important; color: var(--sgv-text) !important; }
/* Common dark-utility text/borders inside such cards */
.glass-panel .text-white,
.card-premium .text-white,
.glass-card .text-white,
.dashboard-card .text-white { color: var(--sgv-text) !important; }
.glass-panel .text-white\/50,
.card-premium .text-white\/50,
.dashboard-card .text-white\/50 { color: var(--sgv-text-mute) !important; }
.glass-panel .text-textsoft,
.card-premium .text-textsoft { color: var(--sgv-text-mute) !important; }
.glass-panel .border-white\/10,
.card-premium .border-white\/10 { border-color: var(--sgv-line) !important; }
/* page-header pattern (productos, expenses, list-employee etc.) */
.page-header {
display: flex; flex-wrap: wrap; gap: 1rem;
align-items: center; justify-content: space-between;
padding: 1.1rem 1.25rem;
background: linear-gradient(135deg, rgba(149,128,255,0.10), rgba(149,128,255,0.04));
border: 1px solid rgba(149,128,255,0.22);
border-radius: var(--sgv-r-lg);
margin-bottom: 1rem;
box-shadow: var(--sgv-shadow-soft);
}
.page-header__main { display: flex; align-items: flex-start; gap: 0.85rem; flex: 1; min-width: 0; }
.page-header__icon {
width: 2.6rem; height: 2.6rem;
border-radius: 0.85rem;
background: rgba(149,128,255,0.15);
color: var(--sgv-accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem;
flex-shrink: 0;
}
.page-header__title {
font-size: 1.35rem !important;
font-weight: 700 !important;
color: var(--sgv-text) !important;
margin: 0 !important;
letter-spacing: -0.015em;
line-height: 1.15;
}
.page-header__subtitle {
font-size: 0.82rem !important;
color: var(--sgv-text-body) !important;
margin: 0.25rem 0 0 !important;
}
.page-header__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 700px) {
.page-header__title { font-size: 1.55rem !important; }
}
/* toolbar (productos / ventas tab bar) */
.toolbar {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.5rem;
background: var(--sgv-bg);
border: 1px solid var(--sgv-line);
border-radius: var(--sgv-pill);
box-shadow: var(--sgv-shadow-soft);
margin-bottom: 1rem;
flex-wrap: wrap;
}
.toolbar__spacer { flex: 1; }
.toolbar .nav-link {
color: var(--sgv-text-body) !important;
border-radius: var(--sgv-pill) !important;
border: none !important;
padding: 0.45rem 0.95rem !important;
background: transparent !important;
font-size: 0.82rem !important;
}
.toolbar .nav-link:hover {
background: var(--sgv-accent-soft) !important;
color: var(--sgv-accent) !important;
}
.toolbar .nav-link.active {
background: var(--sgv-accent) !important;
color: #FFFFFF !important;
border-bottom: none !important;
}
/* .surface (single-level card surface) */
.surface {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-r-lg) !important;
box-shadow: var(--sgv-shadow-soft) !important;
padding: 0.85rem !important;
color: var(--sgv-text) !important;
}
.surface:hover {
border-color: var(--sgv-accent-line) !important;
box-shadow: var(--sgv-shadow-card) !important;
}
/* .product card (productos) */
.product { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.product:hover { transform: translateY(-2px); }
.prod-class { color: var(--sgv-text) !important; }
/* .input pattern */
.input, input.input, select.input, textarea.input,
input[type="text"]:not([class*="form-control"]):not([class*="bg-"]):not([class*="border-"]):not(.sgv-keep):not(.input-with-icon):not(.input-premium),
input[type="email"]:not([class*="form-control"]):not([class*="bg-"]):not([class*="border-"]):not(.sgv-keep):not(.input-with-icon):not(.input-premium),
input[type="number"]:not([class*="form-control"]):not([class*="bg-"]):not([class*="border-"]):not(.sgv-keep):not(.input-with-icon):not(.input-premium),
input[type="search"]:not([class*="form-control"]):not([class*="bg-"]):not([class*="border-"]):not(.sgv-keep):not(.input-with-icon):not(.input-premium) {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
color: var(--sgv-text) !important;
border-radius: var(--sgv-r-sm) !important;
padding: 0.55rem 0.85rem !important;
font-size: 0.9rem !important;
outline: none;
}
.input:focus, input.input:focus, select.input:focus, textarea.input:focus {
border-color: var(--sgv-accent) !important;
box-shadow: 0 0 0 3px var(--sgv-accent-soft) !important;
}
/* .select pattern — el legacy tailwind.output.css lo deja dark glass por defecto.
En el tema v2 lavender lo hacemos light y reemplazamos la flechita SVG blanca
por una gris/lavender que se ve sobre fondo blanco. */
select.select, .select {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
color: var(--sgv-text) !important;
border-radius: var(--sgv-r-sm) !important;
padding: 0.55rem 2.25rem 0.55rem 0.85rem !important;
font-size: 0.9rem !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23475569' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 0.6rem center !important;
background-size: 14px 14px !important;
}
select.select:focus, .select:focus {
border-color: var(--sgv-accent) !important;
box-shadow: 0 0 0 3px var(--sgv-accent-soft) !important;
outline: none !important;
}
select.select option, .select option {
background: #FFFFFF;
color: var(--sgv-text);
}
/* grid utilities (used across modules) */
.grid-auto-md { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.65rem; }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.stack-md > * + * { margin-top: 0.85rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
/* Modals legacy (.modal / Bootstrap-ish) */
.modal-content, .modal-dialog .modal-content {
background: var(--sgv-bg) !important;
color: var(--sgv-text) !important;
border: 1px solid var(--sgv-line) !important;
border-radius: var(--sgv-r-xl) !important;
box-shadow: var(--sgv-shadow-modal) !important;
}
.modal-header {
border-bottom: 1px solid var(--sgv-line) !important;
padding: 1rem 1.2rem !important;
}
.modal-footer {
border-top: 1px solid var(--sgv-line) !important;
padding: 0.85rem 1.2rem !important;
}
.modal-title { color: var(--sgv-text) !important; font-weight: 600 !important; }
/* Labels and form-control legacy */
.form-label, label:not(.sgv-keep) {
color: var(--sgv-text-body);
font-size: 0.78rem;
font-weight: 500;
margin-bottom: 0.3rem;
display: block;
}
.form-control, input.form-control, select.form-control, textarea.form-control {
background: var(--sgv-bg) !important;
border: 1px solid var(--sgv-line) !important;
color: var(--sgv-text) !important;
border-radius: var(--sgv-r-sm) !important;
padding: 0.55rem 0.85rem !important;
font-size: 0.9rem !important;
}
.form-control:focus {
border-color: var(--sgv-accent) !important;
box-shadow: 0 0 0 3px var(--sgv-accent-soft) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
v2.0 — CONTRAST UPLIFT (a11y / readability)
Tailwind utilities text-{slate,gray}-{300,400} fallaban WCAG AA en
superficies blancas. Las re-mapeamos a gray-500/600 (4.83-8.9 ratio).
═══════════════════════════════════════════════════════════════════════ */
[data-theme="unthread"] .text-slate-300, [data-theme="unthread"] .text-slate-400,
[data-theme="unthread"] .text-gray-300, [data-theme="unthread"] .text-gray-400,
[data-theme="unthread"] .text-zinc-300, [data-theme="unthread"] .text-zinc-400,
[data-theme="unthread"] .text-neutral-300, [data-theme="unthread"] .text-neutral-400,
[data-theme="unthread"] .text-white\/30, [data-theme="unthread"] .text-white\/40,
[data-theme="unthread"] .text-white\/50, [data-theme="unthread"] .text-white\/60 {
color: #6B7280 !important; /* gray-500, ~4.83 — pasa WCAG AA */
}
[data-theme="unthread"] .text-slate-500, [data-theme="unthread"] .text-gray-500,
[data-theme="unthread"] .text-zinc-500, [data-theme="unthread"] .text-neutral-500,
[data-theme="unthread"] .text-white\/70, [data-theme="unthread"] .text-white\/80 {
color: #4B5563 !important; /* gray-600, ~8.9 — texto secundario sólido */
}
/* Placeholder más legible (Tailwind por defecto es muy claro) */
[data-theme="unthread"] input::placeholder,
[data-theme="unthread"] textarea::placeholder,
[data-theme="unthread"] .input::placeholder,
[data-theme="unthread"] .form-control::placeholder {
color: #9CA3AF !important; /* gray-400 OK para placeholder porque NO es contenido */
opacity: 1 !important;
}
/* Labels en mayúsculas (eyebrow / tracking-wider) más oscuros para legibilidad */
[data-theme="unthread"] .uppercase.tracking-wider,
[data-theme="unthread"] .uppercase.tracking-widest,
[data-theme="unthread"] .tracking-wider.text-xs,
[data-theme="unthread"] [class*="uppercase"][class*="text-xs"]:not(.bg-) {
color: #4B5563;
}
/* ═══════════════════════════════════════════════════════════════════════
v2.0 — GLOBAL HOVER GLOW/SHINE
Replica el efecto premium del módulo Workout (lift + lavender glow +
shimmer diagonal) en todas las superficies clickeables del sistema.
Aplica automáticamente a las clases de card más comunes.
═══════════════════════════════════════════════════════════════════════ */
@keyframes sgv-shine {
0% { transform: translateX(-120%) rotate(20deg); }
60%, 100% { transform: translateX(120%) rotate(20deg); }
}
.sgv-card,
.sgv-card-cover,
.nh-card,
.module-info-card,
.rpt-section-card,
.rpt-kpi,
.gm-card,
.bn-card,
.mkt-flow-card,
.mkt-stat-card,
.mkt-tpl-card,
.emp-card,
.mem-card,
.prf-action,
.prf-info-card,
.cs-stat,
.cs-info-card,
.cs-class-card,
.product,
.ad-kpi,
.ck-k-card,
.crm-lead-card,
.lead-card,
.lead-tile,
.dw-card,
.gc-card,
.exp-card,
.delivery-card,
.ob-card,
.os-card,
.pn-card,
.uc-card,
.kpi-card,
.ast-stat-card,
.mk-testim-card,
.mkt-chart-card,
[data-theme="unthread"] .card,
[data-theme="unthread"] .card-premium,
[data-theme="unthread"] .glass-panel {
position: relative;
overflow: hidden;
isolation: isolate;
transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.sgv-card::after,
.sgv-card-cover::after,
.nh-card::after,
.module-info-card::after,
.rpt-section-card::after,
.rpt-kpi::after,
.gm-card::after,
.bn-card::after,
.mkt-flow-card::after,
.mkt-stat-card::after,
.mkt-tpl-card::after,
.emp-card::after,
.mem-card::after,
.prf-action::after,
.prf-info-card::after,
.cs-stat::after,
.cs-info-card::after,
.cs-class-card::after,
.product::after,
.ad-kpi::after,
.ck-k-card::after,
.crm-lead-card::after,
.lead-card::after,
.lead-tile::after,
.dw-card::after,
.gc-card::after,
.exp-card::after,
.delivery-card::after,
.ob-card::after,
.os-card::after,
.pn-card::after,
.uc-card::after,
.kpi-card::after,
.ast-stat-card::after,
.mk-testim-card::after,
.mkt-chart-card::after,
[data-theme="unthread"] .card::after,
[data-theme="unthread"] .card-premium::after,
[data-theme="unthread"] .glass-panel::after {
content: "";
position: absolute;
inset: -60% 0 auto 0;
width: 80%;
height: 220%;
background: linear-gradient(115deg, transparent 30%, rgba(149,128,255,0.14) 45%, transparent 60%);
transform: translateX(-120%) rotate(20deg);
pointer-events: none;
z-index: 0;
will-change: transform;
}
.sgv-card > *,
.sgv-card-cover > *,
.nh-card > *,
.module-info-card > *,
.rpt-section-card > *,
.rpt-kpi > *,
.gm-card > *,
.bn-card > *,
.mkt-flow-card > *,
.mkt-stat-card > *,
.mkt-tpl-card > *,
.emp-card > *,
.mem-card > *,
.prf-action > *,
.prf-info-card > *,
.cs-stat > *,
.cs-info-card > *,
.cs-class-card > *,
.product > *,
.ad-kpi > *,
.ck-k-card > *,
.crm-lead-card > *,
.lead-card > *,
.lead-tile > *,
.dw-card > *,
.gc-card > *,
.exp-card > *,
.delivery-card > *,
.ob-card > *,
.os-card > *,
.pn-card > *,
.uc-card > *,
.kpi-card > *,
.ast-stat-card > *,
.mk-testim-card > *,
.mkt-chart-card > *,
[data-theme="unthread"] .card > *,
[data-theme="unthread"] .card-premium > *,
[data-theme="unthread"] .glass-panel > * {
position: relative;
z-index: 1;
}
.sgv-card:hover,
.sgv-card-cover:hover,
.nh-card:hover,
.module-info-card:hover,
.rpt-section-card:hover,
.rpt-kpi:hover,
.gm-card:hover,
.bn-card:hover,
.mkt-flow-card:hover,
.mkt-stat-card:hover,
.mkt-tpl-card:hover,
.emp-card:hover,
.mem-card:hover,
.prf-action:hover,
.prf-info-card:hover,
.cs-stat:hover,
.cs-info-card:hover,
.cs-class-card:hover,
.product:hover,
.ad-kpi:hover,
.ck-k-card:hover,
.crm-lead-card:hover,
.lead-card:hover,
.lead-tile:hover,
.dw-card:hover,
.gc-card:hover,
.exp-card:hover,
.delivery-card:hover,
.ob-card:hover,
.os-card:hover,
.pn-card:hover,
.uc-card:hover,
.kpi-card:hover,
.ast-stat-card:hover,
.mk-testim-card:hover,
.mkt-chart-card:hover,
[data-theme="unthread"] .card:hover,
[data-theme="unthread"] .card-premium:hover,
[data-theme="unthread"] .glass-panel:hover {
border-color: rgba(149, 128, 255, 0.45) !important;
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(24, 25, 37, 0.04),
0 12px 28px -8px rgba(149, 128, 255, 0.16),
0 4px 12px -4px rgba(24, 25, 37, 0.08) !important;
}
.sgv-card:hover::after,
.sgv-card-cover:hover::after,
.nh-card:hover::after,
.module-info-card:hover::after,
.rpt-section-card:hover::after,
.rpt-kpi:hover::after,
.gm-card:hover::after,
.bn-card:hover::after,
.mkt-flow-card:hover::after,
.mkt-stat-card:hover::after,
.mkt-tpl-card:hover::after,
.emp-card:hover::after,
.mem-card:hover::after,
.prf-action:hover::after,
.prf-info-card:hover::after,
.cs-stat:hover::after,
.cs-info-card:hover::after,
.cs-class-card:hover::after,
.product:hover::after,
.ad-kpi:hover::after,
.ck-k-card:hover::after,
.crm-lead-card:hover::after,
.lead-card:hover::after,
.lead-tile:hover::after,
.dw-card:hover::after,
.gc-card:hover::after,
.exp-card:hover::after,
.delivery-card:hover::after,
.ob-card:hover::after,
.os-card:hover::after,
.pn-card:hover::after,
.uc-card:hover::after,
.kpi-card:hover::after,
.ast-stat-card:hover::after,
.mk-testim-card:hover::after,
.mkt-chart-card:hover::after,
[data-theme="unthread"] .card:hover::after,
[data-theme="unthread"] .card-premium:hover::after,
[data-theme="unthread"] .glass-panel:hover::after {
animation: sgv-shine 1.1s ease-out both;
}
/* Buttons primary y soft también con brillo sutil en hover */
.sgv-btn--primary, .btn-primary {
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
.sgv-btn--primary:hover, .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px -4px rgba(149, 128, 255, 0.55) !important;
}
/* Sidebar items: highlight más definido en hover */
.sb-item, .sidebar-item-premium {
transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.sb-item:hover, .sidebar-item-premium:hover {
background: rgba(149, 128, 255, 0.08) !important;
color: #181925 !important;
}
/* Respeta reduced-motion: nadie quiere shimmers si el usuario lo desactivó */
@media (prefers-reduced-motion: reduce) {
.sgv-card::after, .sgv-card-cover::after, .nh-card::after, .module-info-card::after,
.rpt-section-card::after, .rpt-kpi::after, .gm-card::after, .bn-card::after, .mkt-flow-card::after,
.mkt-stat-card::after, .mkt-tpl-card::after, .emp-card::after, .mem-card::after,
.prf-action::after, .prf-info-card::after, .cs-stat::after, .cs-info-card::after, .cs-class-card::after,
.product::after, .ad-kpi::after, .ck-k-card::after,
.crm-lead-card::after, .lead-card::after, .lead-tile::after,
.dw-card::after, .gc-card::after, .exp-card::after, .delivery-card::after,
.ob-card::after, .os-card::after, .pn-card::after, .uc-card::after, .kpi-card::after,
.ast-stat-card::after, .mk-testim-card::after, .mkt-chart-card::after {
display: none;
}
.sgv-card:hover, .sgv-card-cover:hover, .nh-card:hover, .module-info-card:hover,
.rpt-section-card:hover, .rpt-kpi:hover, .gm-card:hover, .bn-card:hover, .mkt-flow-card:hover,
.mkt-stat-card:hover, .mkt-tpl-card:hover, .emp-card:hover, .mem-card:hover,
.prf-action:hover, .prf-info-card:hover, .cs-stat:hover, .cs-info-card:hover, .cs-class-card:hover,
.product:hover, .ad-kpi:hover, .ck-k-card:hover,
.crm-lead-card:hover, .lead-card:hover, .lead-tile:hover,
.dw-card:hover, .gc-card:hover, .exp-card:hover, .delivery-card:hover,
.ob-card:hover, .os-card:hover, .pn-card:hover, .uc-card:hover, .kpi-card:hover,
.ast-stat-card:hover, .mk-testim-card:hover, .mkt-chart-card:hover {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
v2.0 — MODAL UPLIFT (estilo Workout)
Los modales por defecto usan Tailwind: bg blanco 20% + blur. En un tema
light queda lifeless/cuadrado. Aplicamos el patrón premium del módulo
Workout: solid white + radius generoso + shadow lavender + animation
fadeInUp + sticky header/footer cuando hay form, bottom-sheet en mobile.
═══════════════════════════════════════════════════════════════════════ */
/* Backdrop: menos negro plomo, más glass lavender */
[data-theme="unthread"] .modal-backdrop,
.modal-backdrop {
background-color: rgba(15, 23, 42, 0.58) !important;
backdrop-filter: blur(8px) saturate(140%) !important;
-webkit-backdrop-filter: blur(8px) saturate(140%) !important;
padding: 24px 16px !important;
}
@media (max-width: 640px) {
[data-theme="unthread"] .modal-backdrop,
.modal-backdrop {
align-items: flex-end !important;
padding: 0 !important;
}
}
/* Card: sólido blanco con shadow lavender + radius generoso.
Top: strip lavender 4px (accent rail). Resto solid white. */
[data-theme="unthread"] .modal-card,
.modal-card {
background-color: #FFFFFF !important;
border: 1px solid rgba(149, 128, 255, 0.12) !important;
border-radius: 1.25rem !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow:
0 1px 2px rgba(24, 25, 37, 0.04),
0 24px 56px -12px rgba(24, 25, 37, 0.18),
0 0 0 1px rgba(149, 128, 255, 0.06),
0 -2px 24px rgba(149, 128, 255, 0.08) !important;
color: #181925 !important;
animation: sgv-modal-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
overflow: hidden !important;
display: flex;
flex-direction: column;
max-height: min(90vh, 900px);
position: relative;
padding: 0 !important;
}
/* Accent rail at top — gradient lavender 4px */
[data-theme="unthread"] .modal-card::before,
.modal-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #9580FF 0%, #918DF6 50%, #6B5BFF 100%);
z-index: 5;
pointer-events: none;
border-radius: 1.25rem 1.25rem 0 0;
}
@keyframes sgv-modal-in {
from { opacity: 0; transform: translateY(12px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Body del modal scrolea, no el card outer */
.modal-card > form,
.modal-card > .modal-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
padding: 1rem 1.5rem 1.25rem;
}
.modal-card > form > *:not(:last-child),
.modal-card > .modal-body > *:not(:last-child) {
margin-bottom: 0.9rem;
}
/* Header: HERO style — gradient bg lavender soft + icon circle a la izquierda
del título + título grande tipo "page". El icono lo creamos via ::before
con FontAwesome content based on data-modal-icon (fallback genérico). */
.modal-card > .flex.justify-between:first-child,
.modal-card > .modal-header {
position: sticky;
top: 0;
z-index: 3;
margin: 0 !important;
padding: 1.6rem 1.5rem 1.25rem 1.5rem !important;
background: linear-gradient(180deg, rgba(149,128,255,0.06) 0%, rgba(255,255,255,1) 100%) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 1px solid rgba(17, 24, 39, 0.06);
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
}
/* Icon circle: SOLO se inyecta cuando el header NO tiene su propio icono.
Usamos :has() para detectar si ya hay un ,