/* =========================================================================
MANTO SUPPLY · styles.css (final v3)
---------------------------------------------------------------------------
▸ LIGHT por padrão (paper-like premium)
▸ DARK opt-in via `` — togglável por usuário
▸ Toda a polish do v1+v2 mantida nos dois temas
▸ Zero alteração em ids/classes JS
========================================================================= */
/* ─── 01 · TOKENS · LIGHT (padrão) ──────────────────────────────────────── */
:root {
/* Brand */
--brand-navy: #0D1B2A;
--brand-navy-soft: #1a2f4d;
--brand-navy-deep: #081320;
--brand-gold: #C9A84C;
--brand-gold-bright: #E0BE63;
--brand-gold-deep: #A88838;
--brand-gold-soft: rgba(201, 168, 76, 0.12);
--brand-bordo: #8B3247;
--brand-bordo-soft: rgba(139, 50, 71, 0.10);
/* Aliases legados */
--navy: var(--brand-navy); --navy-light: var(--brand-navy-soft);
--gold: var(--brand-gold); --gold-bright: var(--brand-gold-bright);
--wine: var(--brand-bordo);
/* Surfaces — paper */
--surface-0: #F5F4F0;
--surface-1: #FFFFFF;
--surface-2: #FFFFFF;
--surface-3: #F8F6F0;
--surface-4: #EFEDE6;
--bg: var(--surface-0);
--bg-soft: var(--surface-3);
--card-bg: var(--surface-1);
--sidebar-bg: var(--surface-1);
/* Foreground */
--text-hi: #0D1B2A;
--text: #1d1d1f;
--text-muted: #6E6E73;
--text-faint: #9CA3AF;
--fg-on-dark: #F5F4F0;
/* Borders */
--border: #E8E6DF;
--border-strong: #D1CFC8;
--border-soft: #EFEDE6;
--border-gold: rgba(201, 168, 76, 0.32);
/* Radii */
--radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
--radius-lg: 12px; --radius-pill: 999px;
/* Shadows — calibradas pra light */
--shadow-rim: inset 0 1px 0 rgba(255, 255, 255, 0.7);
--shadow-rim-gold: inset 0 1px 0 rgba(201, 168, 76, 0.35);
--shadow-1: 0 1px 2px rgba(13, 27, 42, 0.04);
--shadow-2: 0 4px 16px rgba(13, 27, 42, 0.06);
--shadow-3: 0 12px 32px rgba(13, 27, 42, 0.10);
--shadow-gold: 0 8px 24px rgba(201, 168, 76, 0.20);
--shadow: var(--shadow-2);
/* Halos */
--glow-gold: 0 0 0 1px rgba(201, 168, 76, 0.20), 0 8px 32px -8px rgba(201, 168, 76, 0.30);
--glow-bordo: 0 0 0 1px rgba(139, 50, 71, 0.20), 0 8px 32px -8px rgba(139, 50, 71, 0.30);
/* Glassmorphism — light */
--glass-bg: rgba(255, 255, 255, 0.78);
--glass-bg-strong: rgba(255, 255, 255, 0.92);
--glass-bg-dark: rgba(13, 27, 42, 0.45);
--glass-thin: rgba(255, 255, 255, 0.65);
--glass-blur: blur(20px) saturate(140%);
--glass-blur-lg: blur(24px) saturate(180%);
--glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.8);
/* Canvas ambient (vinheta + grain) — quase invisível em light */
--canvas-vinheta:
radial-gradient(ellipse 60% 50% at 100% -10%, rgba(201, 168, 76, 0.05) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at -10% 110%, rgba(139, 50, 71, 0.03) 0%, transparent 50%);
--canvas-grain-opacity: 0;
--canvas-grain-blend: multiply;
/* Motion */
--ease-ios: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
--ease-luxe: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-silk: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms;
--transition: all var(--dur-base) var(--ease-ios);
/* Tipografia */
--font-display: 'Outfit', -apple-system, sans-serif;
--font-body: 'Inter', -apple-system, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Z-index */
--z-nav: 100; --z-topbar: 200; --z-sidebar: 300;
--z-dropdown: 400; --z-overlay: 500; --z-modal: 600;
--z-toast: 700; --z-login: 800;
/* ── Component tokens (theme-aware) ── */
--btn-primary-bg: linear-gradient(180deg, var(--brand-navy-soft) 0%, var(--brand-navy) 100%);
--btn-primary-fg: #fff;
--btn-primary-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 20px -8px rgba(13, 27, 42, 0.35);
--btn-primary-shadow-hover: 0 1px 0 rgba(0,0,0,0.06), 0 16px 32px -10px rgba(13, 27, 42, 0.45);
--btn-primary-shine: rgba(255, 255, 255, 0.30);
--card-overlay: linear-gradient(180deg, rgba(13, 27, 42, 0.015) 0%, transparent 30%);
--card-halo: radial-gradient(circle at center, rgba(201, 168, 76, 0.16) 0%, transparent 60%);
--card-shadow: 0 1px 0 rgba(13, 27, 42, 0.03), 0 12px 24px -16px rgba(13, 27, 42, 0.10);
--card-shadow-hover: 0 1px 0 rgba(13, 27, 42, 0.04), 0 20px 40px -20px rgba(13, 27, 42, 0.18);
--th-bg: rgba(13, 27, 42, 0.025);
--row-hover: linear-gradient(
90deg,
rgba(201, 168, 76, 0.08) 0%,
rgba(13, 27, 42, 0.015) 30%,
transparent 100%
);
--featured-bg:
radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
linear-gradient(180deg, #fff 0%, #FBF8EF 100%);
}
/* ─── 02 · TOKENS · DARK (opt-in via [data-theme="dark"]) ───────────────── */
[data-theme="dark"] {
--surface-0: #050B14;
--surface-1: #0A1421;
--surface-2: #122438;
--surface-3: #18293E;
--surface-4: #243752;
--bg: var(--surface-0);
--bg-soft: var(--surface-2);
--card-bg: var(--surface-2);
--sidebar-bg: var(--surface-1);
--text-hi: #F5F4F0;
--text: #D8DCE3;
--text-muted: #8A93A3;
--text-faint: #5A6478;
/* Fix legacy aliases for dark mode contrast */
--navy: #93B4DE;
--navy-light: #4A6B9C;
--wine: #D88EA0;
--border: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.10);
--border-soft: rgba(255, 255, 255, 0.04);
--border-gold: rgba(201, 168, 76, 0.24);
--shadow-rim: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--shadow-rim-gold: inset 0 1px 0 rgba(201, 168, 76, 0.20);
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), var(--shadow-rim);
--shadow-2: 0 4px 16px rgba(0, 0, 0, 0.32), var(--shadow-rim);
--shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), var(--shadow-rim);
--shadow-gold: 0 8px 32px rgba(201, 168, 76, 0.30);
--glass-bg: rgba(13, 27, 42, 0.72);
--glass-bg-strong: rgba(13, 27, 42, 0.88);
--glass-bg-dark: rgba(5, 11, 20, 0.78);
--glass-thin: rgba(18, 36, 56, 0.55);
--glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--canvas-vinheta:
radial-gradient(ellipse 60% 50% at 100% -10%, rgba(201, 168, 76, 0.08) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at -10% 110%, rgba(139, 50, 71, 0.10) 0%, transparent 50%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(13, 27, 42, 0.40) 0%, transparent 70%);
--canvas-grain-opacity: 0.025;
--canvas-grain-blend: overlay;
/* Component tokens overrides */
--btn-primary-bg: linear-gradient(180deg, var(--brand-gold-bright) 0%, var(--brand-gold) 100%);
--btn-primary-fg: var(--brand-navy);
--btn-primary-shadow: var(--shadow-rim-gold), 0 1px 0 rgba(0, 0, 0, 0.25), 0 8px 20px -8px rgba(201, 168, 76, 0.55);
--btn-primary-shadow-hover: var(--shadow-rim-gold), 0 1px 0 rgba(0, 0, 0, 0.25), 0 16px 32px -10px rgba(201, 168, 76, 0.65);
--btn-primary-shine: rgba(255, 255, 255, 0.45);
--card-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 30%);
--card-halo: radial-gradient(circle at center, rgba(201, 168, 76, 0.10) 0%, transparent 60%);
--card-shadow: var(--shadow-rim), 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 24px -16px rgba(0, 0, 0, 0.5);
--card-shadow-hover: var(--shadow-rim), 0 1px 0 rgba(0, 0, 0, 0.4), 0 20px 40px -20px rgba(0, 0, 0, 0.7);
--th-bg: rgba(0, 0, 0, 0.18);
--row-hover: linear-gradient(
90deg,
rgba(201, 168, 76, 0.04) 0%,
rgba(255, 255, 255, 0.015) 30%,
transparent 100%
);
--featured-bg:
radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
var(--brand-navy-deep);
}
/* ─── 03 · BASE / RESET / BODY ──────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; border-radius: 4px; }
html, body { height: 100%; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
overflow: hidden;
overscroll-behavior: contain;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11", "tnum";
position: relative;
transition: background 400ms var(--ease-silk), color 400ms var(--ease-silk);
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background: var(--canvas-vinheta);
transition: background 400ms var(--ease-silk);
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: var(--canvas-grain-opacity);
mix-blend-mode: var(--canvas-grain-blend);
background-image: url("data:image/svg+xml;utf8,");
transition: opacity 400ms var(--ease-silk);
}
.app-container, .app-shell { display: flex; height: 100vh; position: relative; z-index: 1; }
.display, h1, h2, .breadcrumb, .kpi-value, .login-tagline,
.page-header h2, .calc-commission-total, .comm-summary-value,
.tier-card-name {
font-family: var(--font-display);
}
body.privacy-hidden .privacy-sensitive {
filter: blur(14px);
pointer-events: none;
transition: filter 0.3s ease;
color: var(--text-faint) !important;
}
/* ─── 04 · SIDEBAR (paper glass + rail gold pulsante) ───────────────────── */
.sidebar {
width: 260px;
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
box-shadow: var(--shadow-rim), 1px 0 0 rgba(255, 255, 255, 0.02);
display: flex;
flex-direction: column;
padding: 1.75rem 1rem;
flex-shrink: 0;
z-index: var(--z-sidebar);
transition: background 400ms var(--ease-silk), border-color 400ms;
}
[data-theme="dark"] .sidebar {
background: linear-gradient(180deg, var(--glass-bg-strong) 0%, rgba(8, 19, 32, 0.88) 100%);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
}
.sidebar-header {
padding: 0.5rem 0.4rem 1.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
text-align: center;
}
.logo-wrapper { width: 100%; max-width: 140px; margin: 0 auto; }
.sidebar-logo { width: 100%; max-width: 130px; height: auto; object-fit: contain; }
.sidebar-header::after {
content: 'GESTÃO ELITE';
display: block;
font-family: var(--font-body);
font-size: 0.58rem;
font-weight: 600;
color: var(--brand-gold);
letter-spacing: 0.32em;
text-align: center;
margin-top: 0.65rem;
opacity: 0.85;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 1rem;
min-height: 40px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.875rem;
transition: var(--transition);
width: 100%;
text-align: left;
}
.nav-item > i, .nav-item > svg {
width: 17px; height: 17px;
stroke-width: 1.75;
opacity: 0.8;
flex-shrink: 0;
transition: transform 240ms var(--ease-silk), opacity 240ms;
}
.nav-item:hover {
background: rgba(13, 27, 42, 0.04);
color: var(--text-hi);
}
[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.035); }
.nav-item:hover > i, .nav-item:hover > svg { opacity: 1; transform: translateX(2px); }
.nav-item.active {
background: linear-gradient(90deg, var(--brand-gold-soft) 0%, rgba(201, 168, 76, 0.02) 100%);
color: var(--text-hi);
font-weight: 600;
}
.nav-item.active > i, .nav-item.active > svg { color: var(--brand-gold-deep); opacity: 1; }
[data-theme="dark"] .nav-item.active > i,
[data-theme="dark"] .nav-item.active > svg { color: var(--brand-gold); }
.nav-item.active::before {
content: '';
position: absolute;
left: -1rem;
top: 22%;
bottom: 22%;
width: 3px;
background: var(--brand-gold);
border-radius: 0 2px 2px 0;
box-shadow: 0 0 12px rgba(201, 168, 76, 0.55), 0 0 4px rgba(201, 168, 76, 0.85);
animation: railPulse 3.2s ease-in-out infinite;
}
@keyframes railPulse {
0%, 100% { box-shadow: 0 0 12px rgba(201, 168, 76, 0.45), 0 0 4px rgba(201, 168, 76, 0.7); }
50% { box-shadow: 0 0 20px rgba(201, 168, 76, 0.70), 0 0 6px rgba(201, 168, 76, 0.95); }
}
.nav-logout { color: var(--brand-bordo) !important; }
.nav-logout:hover { background: var(--brand-bordo-soft); }
.nav-divider { height: 1px; background: var(--border); margin: 0.75rem 0.5rem; flex-shrink: 0; }
.nav-item[data-tab="configuracoes"] { margin-top: auto; }
/* Badge — pull para a direita usando margin-left:auto (substitui absolute do original) */
.nav-alert-badge {
margin-left: auto;
position: static;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--brand-bordo);
color: #fff;
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 1px rgba(139, 50, 71, 0.4), 0 0 8px rgba(139, 50, 71, 0.25);
pointer-events: none;
}
.mobile-nav-list .nav-alert-badge { margin-left: auto; }
/* ─── 05 · TOP-BAR (frosted + live dot) ─────────────────────────────────── */
.main-content { flex-grow: 1; overflow-y: auto; padding: 0; }
.top-bar {
position: sticky;
top: 0;
height: 64px;
padding: 0 clamp(1rem, 2vw + 0.5rem, 2.5rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--glass-thin);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border-bottom: 1px solid var(--border);
box-shadow: var(--glass-rim), 0 1px 0 rgba(13, 27, 42, 0.02);
z-index: var(--z-topbar);
}
[data-theme="dark"] .top-bar {
box-shadow: var(--glass-rim), 0 1px 0 rgba(0, 0, 0, 0.4);
}
.top-bar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.35) 50%, transparent 100%);
opacity: 0;
transition: opacity 400ms;
}
.top-bar.scrolled::after { opacity: 1; }
.breadcrumb {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.2rem;
color: var(--text-hi);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
.breadcrumb::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--brand-gold);
box-shadow: 0 0 10px var(--brand-gold);
animation: livePulse 2.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes livePulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1); }
}
.top-bar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.content-body { padding: 2.25rem 2.75rem 3rem; }
/* ─── 06 · BENTO GRID + CARDS ───────────────────────────────────────────── */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
margin-bottom: 2.5rem;
}
/* Aliases legacy (continuam funcionando) */
.card-1 { grid-column: span 3; }
.card-2 { grid-column: span 4; }
.card-3 { grid-column: span 6; }
.card-4 { grid-column: span 8; }
.card-6 { grid-column: span 12; }
/* Novos helpers */
.card-span-3 { grid-column: span 3; }
.card-span-4 { grid-column: span 4; }
.card-span-5 { grid-column: span 5; }
.card-span-6 { grid-column: span 6; }
.card-span-7 { grid-column: span 7; }
.card-span-8 { grid-column: span 8; }
.card-span-12 { grid-column: span 12; }
.card {
background: var(--card-overlay), var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem 1.6rem;
box-shadow: var(--shadow-rim), var(--card-shadow);
min-height: 140px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 280ms var(--ease-silk),
border-color 280ms,
box-shadow 400ms var(--ease-silk),
background 400ms;
}
.card::after {
content: '';
position: absolute;
top: -40%; right: -20%;
width: 60%; height: 80%;
background: var(--card-halo);
opacity: 0;
transition: opacity 400ms var(--ease-silk);
pointer-events: none;
}
.card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-rim), var(--card-shadow-hover);
}
.card:hover::after { opacity: 1; }
.card-accent::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--brand-gold) 50%, transparent 100%);
}
/* Featured / countdown */
.countdown-card, .featured-card {
background: var(--featured-bg);
border-color: var(--border-gold);
box-shadow: var(--shadow-rim-gold), var(--glow-gold);
}
.countdown-card .kpi-label, .featured-card .kpi-label { color: var(--brand-gold-deep); }
[data-theme="dark"] .countdown-card .kpi-label,
[data-theme="dark"] .featured-card .kpi-label { color: rgba(201, 168, 76, 0.9); }
[data-theme="dark"] .countdown-card .kpi-value,
[data-theme="dark"] .featured-card .kpi-value { color: var(--text-hi); }
/* KPI typography */
.kpi-label {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.45rem;
}
.kpi-label > i, .kpi-label > svg { width: 13px; height: 13px; stroke-width: 1.5; opacity: 0.7; }
.kpi-value {
font-family: var(--font-display);
font-size: clamp(2.2rem, 2.6vw, 2.8rem);
font-weight: 300;
color: var(--text-hi);
letter-spacing: -0.025em;
line-height: 0.95;
font-variant-numeric: tabular-nums;
}
.kpi-value .currency, .kpi-value .unit {
font-size: 0.5em;
color: var(--text-muted);
font-weight: 400;
margin: 0 0.15em;
}
.kpi-sub {
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 500;
margin-top: 0.85rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.3rem;
}
.kpi-sub > i, .kpi-sub > svg { width: 13px; height: 13px; stroke-width: 2; }
.kpi-sub.up { color: #2e7d32; }
.kpi-sub.down { color: #c62828; }
.kpi-sub.gold { color: var(--brand-gold-deep); }
[data-theme="dark"] .kpi-sub.up { color: #7AC79B; }
[data-theme="dark"] .kpi-sub.down { color: #D88080; }
[data-theme="dark"] .kpi-sub.gold { color: var(--brand-gold); }
/* ─── 07 · TABELAS ──────────────────────────────────────────────────────── */
.table-container {
background: var(--card-overlay), var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-rim), var(--card-shadow);
overflow: hidden;
}
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-container table { min-width: 600px; }
table { width: 100%; border-collapse: collapse; }
th {
text-align: left;
padding: 0.9rem 1.5rem;
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
background: var(--th-bg);
text-transform: uppercase;
letter-spacing: 0.14em;
}
td {
padding: 1.1rem 1.5rem;
border-bottom: 1px solid var(--border);
font-size: 0.88rem;
color: var(--text);
vertical-align: middle;
}
tbody tr { transition: background 200ms var(--ease-silk); }
tbody tr:hover td { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: none; }
td.mono {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
font-weight: 500;
}
td.amount, td[data-amount] {
font-family: var(--font-display);
font-weight: 400;
font-size: 0.95rem;
color: var(--text-hi);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* ─── 08 · BADGES ───────────────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.55rem;
border-radius: 4px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
font-family: var(--font-body);
border: 1px solid transparent;
}
.badge::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.badge-gold,
.badge-yellow { background: var(--brand-gold-soft); color: var(--brand-gold-deep); border-color: rgba(201, 168, 76, 0.30); }
.badge-success,
.badge-green { background: rgba(46, 125, 50, 0.10); color: #1f6028; border-color: rgba(46, 125, 50, 0.25); }
.badge-info,
.badge-blue { background: rgba(13, 27, 42, 0.06); color: var(--brand-navy); border-color: rgba(13, 27, 42, 0.15); }
.badge-bordo,
.badge-wine,
.badge-red { background: var(--brand-bordo-soft); color: var(--brand-bordo); border-color: rgba(139, 50, 71, 0.25); }
.badge-muted { background: rgba(13, 27, 42, 0.04); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-green { background: rgba(122, 199, 155, 0.10); color: #7AC79B; border-color: rgba(122, 199, 155, 0.20); }
[data-theme="dark"] .badge-info,
[data-theme="dark"] .badge-blue { background: rgba(120, 160, 220, 0.10); color: #93B4DE; border-color: rgba(120, 160, 220, 0.20); }
[data-theme="dark"] .badge-bordo,
[data-theme="dark"] .badge-wine,
[data-theme="dark"] .badge-red { background: var(--brand-bordo-soft); color: #D88EA0; border-color: rgba(216, 142, 160, 0.20); }
[data-theme="dark"] .badge-gold,
[data-theme="dark"] .badge-yellow { background: var(--brand-gold-soft); color: var(--brand-gold); border-color: rgba(201, 168, 76, 0.20); }
[data-theme="dark"] .badge-muted { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border-color: var(--border); }
/* ─── 09 · FORMS ────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
display: block;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.form-control {
width: 100%;
padding: 0.85rem 1.1rem;
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-hi);
transition: var(--transition);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover { border-color: var(--border-strong); }
.form-control:focus {
background: var(--surface-1);
border-color: var(--brand-gold);
box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.12);
outline: none;
}
[data-theme="dark"] .form-control:focus { background: var(--surface-1); }
select.form-control {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1em;
padding-right: 2.5rem;
}
/* ─── 10 · BUTTONS (primário com shine sweep) ───────────────────────────── */
.btn-primary {
position: relative;
overflow: hidden;
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
border: none;
padding: 0.65rem 1.25rem;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.88rem;
letter-spacing: 0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--btn-primary-shadow);
transition: transform 240ms var(--ease-luxe),
box-shadow 240ms var(--ease-silk),
filter 160ms;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent 20%, var(--btn-primary-shine) 50%, transparent 80%);
transform: skewX(-20deg);
transition: left 700ms var(--ease-silk);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--btn-primary-shadow-hover);
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:active { transform: translateY(0); filter: brightness(0.96); }
.btn-primary > i, .btn-primary > svg { width: 15px; height: 15px; stroke-width: 2; }
/* SECONDARY / GHOST */
.btn-ghost, .btn-secondary {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
padding: 0.55rem 1rem;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-ghost:hover, .btn-secondary:hover {
background: var(--bg-soft);
color: var(--text-hi);
border-color: var(--border-strong);
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-secondary:hover { background: rgba(255, 255, 255, 0.04); }
.btn-ghost > i, .btn-ghost > svg, .btn-secondary > i, .btn-secondary > svg { width: 15px; height: 15px; stroke-width: 1.75; }
/* ICON BUTTON */
.btn-icon {
width: 38px; height: 38px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface-1);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--transition);
position: relative;
}
[data-theme="dark"] .btn-icon { background: rgba(255, 255, 255, 0.025); }
.btn-icon:hover {
background: var(--bg-soft);
border-color: var(--border-strong);
color: var(--text-hi);
}
[data-theme="dark"] .btn-icon:hover { background: var(--surface-3); }
.btn-icon > i, .btn-icon > svg { width: 17px; height: 17px; stroke-width: 1.75; }
/* "+" add-global ativo */
.btn-add-global { transition: all 0.2s ease; }
.btn-add-global.active {
background: var(--brand-navy);
border-color: var(--brand-navy);
color: #fff;
}
[data-theme="dark"] .btn-add-global.active {
background: var(--brand-gold);
border-color: var(--brand-gold);
color: var(--brand-navy);
}
.btn-add-global.active > i, .btn-add-global.active > svg { transform: rotate(45deg); }
/* ─── 11 · THEME TOGGLE BUTTON ──────────────────────────────────────────── */
/* Botão de alternância sol ↔ lua. Veja snippet HTML+JS abaixo. */
.btn-theme-toggle { position: relative; }
.btn-theme-toggle .theme-icon-light { display: none; }
[data-theme="dark"] .btn-theme-toggle .theme-icon-dark { display: none; }
[data-theme="dark"] .btn-theme-toggle .theme-icon-light { display: inline-block; color: var(--brand-gold); }
.btn-theme-toggle:hover > i, .btn-theme-toggle:hover > svg {
transform: rotate(20deg);
transition: transform 300ms var(--ease-luxe);
}
/* ─── 12 · SEARCH BAR (caso adicione) ───────────────────────────────────── */
/* Seletores robustos: funciona com antes E depois da
substituição por