/*
* fuse.css — Design System Fuse Academy
* Versão: 3.2 · abril/2026
*
* USO:
* Tema: class="light" no via /assets/fuse-theme.js
*
* FONTES no :
*
*
* CHANGELOG v3.2:
* — Tokens aprofundados (#07061a base), --bg-row, --glass-hi, --text4, --cyan
* — Exo 2 substitui Syne como --font-display
* — Hover: -3px em cards standalone; :active scale(.98) squash & stretch
* — reveal usa .is-visible (não .visible)
* — Topbar centralizada via fuse-topbar.js (não reescrever por página)
* — stat-card, glass-panel, status-chip, icon-btn adicionados
* — prefers-reduced-motion em todos os loops de animação
*/
/* No topo do fuse.css, dentro do :root */
:root {
--logo-url: url('/assets/logo-dark.svg');
}
/* Quando o tema for light, a variável muda automaticamente */
[data-theme="light"] {
--logo-url: url('/assets/logo-light.svg');
}
/* Classe Única e Inteligente para a Logo */
.brand-logo {
display: inline-block;
background-image: var(--logo-url);
background-size: contain;
background-repeat: no-repeat;
background-position: center left;
transition: background-image 0.3s ease;
/* Dimensões Base (Desktop) */
width: 100%;
max-width: 160px;
aspect-ratio: 4/1; /* Ajuste conforme a proporção real da sua logo */
height: auto;
}
/* Ajuste específico para Telas Pequenas (Mobile) */
@media (max-width: 600px) {
.brand-logo {
max-width: 100px; /* Diminui a largura máxima no celular */
}
}
/* ══════════════════════════
1. TOKENS DARK (padrão)
══════════════════════════ */
:root {
--bg: #07061a;
--bg2: #0f0e26;
--bg3: #171633;
--bg4: #1f1e40;
--bg-glass: rgba(15,14,38,.65);
--bg-row: rgba(255,255,255,.028);
--glass-hi: inset 0 1px 0 rgba(255,255,255,.10);
--border: rgba(255,255,255,.06);
--border2: rgba(255,255,255,.12);
--border3: rgba(255,255,255,.22);
--border-glass: rgba(255,255,255,.10);
--text: #eeeaff;
--text2: #a8a4cc;
--text3: #5c587c;
--text4: #3a3760;
--purple: #8b86f0;
--purple-light: #b3b0ff;
--purple-bg: rgba(139,134,240,.13);
--purple-bg2: rgba(139,134,240,.07);
--purple-br: rgba(139,134,240,.28);
--purple-glow: rgba(139,134,240,.20);
--purple-glow2: rgba(139,134,240,.38);
--green: #34d399;
--green-light: #6ee7b7;
--green-bg: rgba(52,211,153,.10);
--green-br: rgba(52,211,153,.25);
--green-glow: rgba(52,211,153,.16);
--amber: #fbbf24;
--amber-light: #fcd34d;
--amber-bg: rgba(251,191,36,.10);
--amber-br: rgba(251,191,36,.25);
--blue: #5ba8f5;
--blue-bg: rgba(91,168,245,.10);
--blue-br: rgba(91,168,245,.25);
--cyan: #22d3ee;
--cyan-light: #67e8f9;
--cyan-bg: rgba(34,211,238,.09);
--cyan-br: rgba(34,211,238,.26);
--cyan-glow: rgba(34,211,238,.18);
--coral: #f87171;
--coral-bg: rgba(248,113,113,.10);
--coral-br: rgba(248,113,113,.25);
--teal: #3ecfcf;
--teal-bg: rgba(62,207,207,.10);
--teal-br: rgba(62,207,207,.25);
--shadow-sm: 0 1px 3px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
--shadow-md: 0 4px 16px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.30);
--shadow-lg: 0 8px 48px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
--shadow-glow: 0 0 24px rgba(139,134,240,.18);
--shadow-glow-strong: 0 0 48px rgba(139,134,240,.28);
--font-display: 'Exo 2', sans-serif;
--font-body: 'DM Sans', sans-serif;
--text-label: 11px;
--text-caption: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 21px;
--text-2xl: 28px;
--ease-snap: cubic-bezier(0.4,0,0.2,1);
--ease-premium: cubic-bezier(0.16,1,0.3,1);
--ease-luxury: cubic-bezier(0.25,0.1,0.0,1.0);
--ease-spring: cubic-bezier(0.34,1.56,0.64,1);
--dur-fast: 160ms;
--dur-base: 260ms;
--dur-slow: 420ms;
--dur-enter: 500ms;
--space-1:4px; --space-2:8px; --space-3:16px; --space-4:32px; --space-5:64px; --space-6:128px;
--topbar-h: 56px;
--sidebar-w: 264px;
--content-max: 860px;
--content-pad-x: 48px;
--content-pad-y: 48px;
}
/* ══════════════════════════
2. TOKENS LIGHT
══════════════════════════ */
html.light {
--bg:#f0f0f8; --bg2:#ffffff; --bg3:#f5f4ff; --bg4:#ebebf8;
--bg-glass:rgba(255,255,255,0.78); --bg-row:rgba(0,0,0,.018);
--glass-hi:inset 0 1px 0 rgba(255,255,255,.70);
--border:rgba(0,0,0,.08); --border2:rgba(0,0,0,.14); --border3:rgba(0,0,0,.22);
--border-glass:rgba(255,255,255,.7);
--text:#0d0c22; --text2:#3d3b60; --text3:#8a88aa; --text4:#b8b6d0;
--purple:#6c63d8; --purple-light:#8b86f0;
--purple-bg:rgba(108,99,216,.10); --purple-bg2:rgba(108,99,216,.05);
--purple-br:rgba(108,99,216,.22); --purple-glow:rgba(108,99,216,.14); --purple-glow2:rgba(108,99,216,.26);
--green:#2ea86e; --green-light:#3dc47f; --green-bg:rgba(46,168,110,.10); --green-br:rgba(46,168,110,.22); --green-glow:rgba(46,168,110,.12);
--amber:#d4840a; --amber-light:#e8960f; --amber-bg:rgba(212,132,10,.10); --amber-br:rgba(212,132,10,.22);
--blue:#2a7fd4; --blue-bg:rgba(42,127,212,.10); --blue-br:rgba(42,127,212,.22);
--cyan:#0891b2; --cyan-light:#0ea5c9; --cyan-bg:rgba(8,145,178,.10); --cyan-br:rgba(8,145,178,.22); --cyan-glow:rgba(8,145,178,.12);
--coral:#d44a4a; --coral-bg:rgba(212,74,74,.10); --coral-br:rgba(212,74,74,.22);
--teal:#1faaaa; --teal-bg:rgba(31,170,170,.10); --teal-br:rgba(31,170,170,.22);
--shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12); --shadow-lg:0 8px 32px rgba(0,0,0,.16);
--shadow-glow:0 0 24px rgba(108,99,216,.12); --shadow-glow-strong:0 0 40px rgba(108,99,216,.18);
}
/*
* fuse-light-patch.css
* Adicionar ao FINAL de /assets/fuse.css
* Compatível com fuse-theme.js que aplica class="light" no
* e também com data-theme="light" (ambos cobertos)
*
* Cobre todos os tokens CSS usados pelo fuse-shell.js v4.3
* e pelas demais páginas do Academy que possam ter tokens residuais
*/
/* ─── seletores de tema light ─── */
html.light,
[data-theme="light"] {
/* backgrounds */
--bg: #f0f0f8;
--bg2: #ffffff;
--bg3: #f5f4ff;
--bg4: #ebebf8;
--bg-glass: rgba(255,255,255,.82);
--bg-row: rgba(0,0,0,.03);
/* borders */
--border: rgba(0,0,0,.08);
--border2: rgba(0,0,0,.14);
--border3: rgba(0,0,0,.22);
--border-glass: rgba(255,255,255,.72);
/* glass highlight — mais sutil no light */
--glass-hi: inset 0 1px 0 rgba(255,255,255,.60);
/* text */
--text: #0d0c22;
--text2: #3d3b60;
--text3: #8a88aa;
--text4: #bcbad8;
/* purple */
--purple: #6c63d8;
--purple-light: #8b84ef;
--purple-bg: rgba(108,99,216,.10);
--purple-bg2: rgba(108,99,216,.06);
--purple-br: rgba(108,99,216,.22);
--purple-glow: rgba(108,99,216,.12);
--purple-glow2: rgba(108,99,216,.22);
/* green */
--green: #2ea86e;
--green-light: #3dc87f;
--green-bg: rgba(46,168,110,.10);
--green-br: rgba(46,168,110,.22);
--green-glow: rgba(46,168,110,.12);
/* amber */
--amber: #d4840a;
--amber-light: #e8960f;
--amber-bg: rgba(212,132,10,.10);
--amber-br: rgba(212,132,10,.22);
/* blue */
--blue: #2a7fd4;
--blue-bg: rgba(42,127,212,.10);
--blue-br: rgba(42,127,212,.22);
/* cyan */
--cyan: #0d9db8;
--cyan-light: #15b8d6;
--cyan-bg: rgba(13,157,184,.09);
--cyan-br: rgba(13,157,184,.22);
--cyan-glow: rgba(13,157,184,.12);
/* coral */
--coral: #d44a4a;
--coral-bg: rgba(212,74,74,.10);
--coral-br: rgba(212,74,74,.22);
/* teal */
--teal: #1faaaa;
--teal-bg: rgba(31,170,170,.10);
--teal-br: rgba(31,170,170,.22);
/* shadows — very subtle no light */
--shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,.13), 0 4px 10px rgba(0,0,0,.07);
--shadow-glow: 0 0 24px rgba(108,99,216,.10);
--shadow-glow-strong: 0 0 40px rgba(108,99,216,.16);
}
/* ─── body background no tema light ─── */
html.light body,
[data-theme="light"] body {
background:
radial-gradient(ellipse 70% 50% at 20% 10%, rgba(108,99,216,.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 80% 90%, rgba(46,168,110,.04) 0%, transparent 60%),
var(--bg);
color: var(--text);
}
/* ─── cards e superfícies glass no light ─── */
html.light .card,
[data-theme="light"] .card {
background: var(--bg2);
border-color: var(--border2);
box-shadow: var(--shadow-sm);
}
html.light .card:hover,
[data-theme="light"] .card:hover {
box-shadow: var(--shadow-md), var(--shadow-glow);
border-color: var(--purple-br);
}
/* ─── shimmer no light ─── */
html.light .is-loading,
[data-theme="light"] .is-loading {
background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
background-size: 200% 100%;
}
/* ─── grid de fundo (páginas técnicas) no light ─── */
html.light .bg-grid,
[data-theme="light"] .bg-grid {
background-image:
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
}
/* ─── scrollbar no light ─── */
html.light ::-webkit-scrollbar-track,
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg3); }
html.light ::-webkit-scrollbar-thumb,
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border3); }
html.light ::-webkit-scrollbar-thumb:hover,
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--text3); }
/* ─── seleção de texto no light ─── */
html.light ::selection,
[data-theme="light"] ::selection {
background: var(--purple-bg);
color: var(--purple);
}
/* ─── focus outline consistente ─── */
html.light *:focus-visible,
[data-theme="light"] *:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 2px;
}
/* //fim do patch css */
/* ══════════════════════════
3. RESET & BASE
══════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,video{max-width:100%;display:block}
html,body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:radial-gradient(ellipse 80% 60% at 20% 20%,rgba(139,134,240,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(34,211,238,.06) 0%,transparent 60%),var(--bg)}
html.light body{background:radial-gradient(ellipse 80% 60% at 20% 20%,rgba(108,99,216,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 80%,rgba(8,145,178,.04) 0%,transparent 60%),var(--bg)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;transition:background var(--dur-fast) var(--ease-snap)}
::-webkit-scrollbar-thumb:hover{background:var(--purple-br)}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ══════════════════════════
4. TOPBAR
Renderizada por fuse-topbar.js
Nunca reescrever por página
══════════════════════════ */
.topbar{position:sticky;top:0;z-index:100;height:var(--topbar-h);background:var(--bg-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border);box-shadow:var(--glass-hi);display:flex;align-items:center;justify-content:space-between;padding:0 24px;transition:background var(--dur-base) var(--ease-snap),border-color var(--dur-base) var(--ease-snap)}
.tb-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-brand{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--text);letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:8px;text-decoration:none}
.tb-brand-logo{width:22px;height:22px;background:var(--purple);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.tb-sep{width:1px;height:14px;background:var(--border2);flex-shrink:0}
.tb-sub{font-size:var(--text-caption);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-caption);color:var(--text3);min-width:0}
.tb-breadcrumb a{color:var(--text3);text-decoration:none;transition:color var(--dur-fast) var(--ease-snap);white-space:nowrap}
.tb-breadcrumb a:hover{color:var(--text)}
.tb-breadcrumb-sep{opacity:.4;flex-shrink:0}
.tb-breadcrumb-current{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-ver{font-size:10px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:2px 10px;white-space:nowrap;flex-shrink:0}
.tb-back{font-size:var(--text-caption);color:var(--text3);text-decoration:none;padding:5px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:color var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap),background var(--dur-fast) var(--ease-snap)}
.tb-back:hover{border-color:var(--purple-br);color:var(--purple);background:var(--purple-bg)}
.tb-menu-btn{display:none;background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:7px;transition:background var(--dur-fast) var(--ease-snap);flex-shrink:0}
.tb-menu-btn:hover{background:var(--bg3)}
.tb-menu-btn svg{display:block}
@media(max-width:639px){.topbar{padding:0 16px}.tb-sub,.tb-ver{display:none}.tb-menu-btn{display:flex;align-items:center;justify-content:center}}
/* ══════════════════════════
5. SIDEBAR
══════════════════════════ */
.sidebar,.sidenav,.sb{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));width:var(--sidebar-w);overflow-y:auto;border-right:1px solid var(--border);padding:22px 0;flex-shrink:0;background:var(--bg-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--glass-hi);transition:background var(--dur-base) var(--ease-snap)}
.sb-sec,.sn-sec{padding:0 14px;margin-bottom:20px}
.sb-lbl,.sn-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text4);margin-bottom:7px;padding:0 8px}
.sb-item,.sn-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:var(--text-sm);color:var(--text2);border:1px solid transparent;margin-bottom:2px;text-decoration:none;user-select:none;transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap)}
.sb-item:hover,.sn-item:hover{background:var(--purple-bg);color:var(--text)}
.sb-item.active,.sn-item.active{background:var(--purple-bg);border-color:var(--purple-br);color:var(--text);box-shadow:inset 0 0 0 1px var(--purple-br)}
.sb-dot,.sn-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background var(--dur-fast) var(--ease-snap)}
.sb-item.active .sb-dot,.sn-item.active .sn-dot{background:var(--purple)}
.sb-div,.sn-div{height:1px;background:var(--border);margin:10px 16px}
.sb-ver,.sn-ver{padding:12px 22px 0;font-size:var(--text-caption);color:var(--text3);line-height:1.6}
.sb-overlay,.sn-overlay{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-snap)}
.sb-overlay.visible,.sn-overlay.visible,.sb-overlay.open,.sn-overlay.open{opacity:1;pointer-events:all}
@media(max-width:1023px){.sidebar,.sidenav,.sb{position:fixed;left:0;top:0;bottom:0;z-index:90;height:100%;padding-top:var(--topbar-h);transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-snap)}.sidebar.open,.sidenav.open,.sb.open{transform:translateX(0)}}
/* ══════════════════════════
6. LAYOUT
══════════════════════════ */
.app-shell{display:flex;min-height:calc(100vh - var(--topbar-h))}
.main-content{flex:1;min-width:0;padding:var(--content-pad-y) var(--content-pad-x)}
.content-wrap{max-width:var(--content-max);margin:0 auto}
@media(max-width:1023px){.main-content{padding:32px 24px}}
@media(max-width:639px){.main-content{padding:24px 16px}}
/* ══════════════════════════
7. CARDS
══════════════════════════ */
.card{background:var(--bg-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm),var(--glass-hi);position:relative;overflow:hidden;transition:transform var(--dur-base) var(--ease-snap),box-shadow var(--dur-base) var(--ease-snap),border-color var(--dur-base) var(--ease-snap)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md),var(--shadow-glow),var(--glass-hi);border-color:var(--purple-br)}
.card:active{transform:scale(.98) translateY(0);transition-duration:120ms}
.card--accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-color,var(--purple));opacity:.7}
.card--featured{background:var(--bg3);border-color:var(--purple-br);box-shadow:var(--shadow-md),var(--shadow-glow),var(--glass-hi)}
.card--hero{background:linear-gradient(135deg,var(--bg3) 0%,var(--bg2) 100%);border-color:var(--purple-br);box-shadow:var(--shadow-lg),var(--shadow-glow-strong),var(--glass-hi)}
.card--hero:hover{transform:none}
.card-head{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--text);line-height:1.2}
.card-body{font-size:var(--text-sm);color:var(--text2);line-height:1.55}
.card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:4px}
.card-icon--purple{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-br)}
.card-icon--green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-br)}
.card-icon--amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-br)}
.card-icon--blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-br)}
.card-icon--cyan{background:var(--cyan-bg);color:var(--cyan);border:1px solid var(--cyan-br)}
.card-icon--coral{background:var(--coral-bg);color:var(--coral);border:1px solid var(--coral-br)}
.card-icon--teal{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-br)}
/* Glass panel */
.glass-panel{background:var(--bg-glass);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:var(--glass-hi),var(--shadow-md)}
.gp-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.gp-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--text)}
.icon-btn{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:13px;transition:background var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-spring)}
.icon-btn:hover{background:var(--purple-bg);border-color:var(--purple-br);color:var(--purple-light);transform:scale(1.06)}
.icon-btn:active{transform:scale(.96)}
/* Infra grid */
.infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:639px){.infra-grid{grid-template-columns:1fr}}
.infra-card{background:var(--bg-glass);backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-sm),var(--glass-hi);transition:transform var(--dur-base) var(--ease-snap),box-shadow var(--dur-base) var(--ease-snap),border-color var(--dur-base) var(--ease-snap)}
.infra-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--shadow-glow);border-color:var(--purple-br)}
.infra-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:7px}
.infra-desc{font-size:var(--text-caption);color:var(--text3);line-height:1.65}
.infra-path{font-size:var(--text-label);color:var(--text3);font-family:monospace;margin-top:8px;padding:4px 9px;background:var(--bg4);border-radius:5px;display:inline-block}
/* ══════════════════════════
8. BOTÕES
══════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;font-family:var(--font-body);font-size:var(--text-base);font-weight:500;cursor:pointer;border:1px solid var(--border);text-decoration:none;transition:opacity var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),background var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap)}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn:active{transform:scale(.97);opacity:1}
.btn-p{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 2px 12px var(--purple-glow)}
.btn-p:hover{box-shadow:0 6px 24px var(--purple-glow2)}
.btn-gh{background:var(--bg3);color:var(--text2);border-color:var(--border)}
.btn-gh:hover{border-color:var(--purple-br);color:var(--purple);background:var(--purple-bg)}
.btn-sm{font-size:var(--text-sm);padding:6px 14px;border-radius:7px;background:var(--bg3);color:var(--text3)}
.btn-sm:hover{color:var(--text);border-color:var(--border2);background:var(--bg4)}
.btn-sm.ok{color:var(--green);border-color:var(--green-br)}
/* ══════════════════════════
9. FORMULÁRIOS
══════════════════════════ */
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:var(--text-label);font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
.field-input{padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:var(--text-base);font-family:var(--font-body);outline:none;transition:border-color var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),background var(--dur-fast) var(--ease-snap)}
.field-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-bg);background:var(--bg3)}
.field-input::placeholder{color:var(--text3)}
.fi,.fta,.fsel{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:10px 14px;color:var(--text);font-family:var(--font-body);font-size:var(--text-base);outline:none;transition:border-color var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),background var(--dur-base) var(--ease-snap)}
.fi:focus,.fta:focus,.fsel:focus{border-color:var(--purple-br);box-shadow:0 0 0 3px var(--purple-bg);background:var(--bg2)}
.fi::placeholder,.fta::placeholder{color:var(--text3)}
.fta{resize:none;line-height:1.55}
.fsel{appearance:none;cursor:pointer}
.mf{margin-bottom:16px}
.fl{font-size:var(--text-caption);font-weight:500;color:var(--text3);margin-bottom:6px;letter-spacing:.02em}
@media(max-width:639px){input,select,textarea,.fi,.fta,.fsel,.field-input{font-size:16px!important}}
/* ══════════════════════════
10. BADGES & TAGS
══════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;font-size:var(--text-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.b-ativo .b-dot{animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:.8}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.b-ativo .b-dot{animation:none}}
.b-ativo{background:var(--green-bg);border:1px solid var(--green-br);color:var(--green)}
.b-atualizar{background:var(--amber-bg);border:1px solid var(--amber-br);color:var(--amber)}
.b-pendente{background:var(--blue-bg);border:1px solid var(--blue-br);color:var(--blue)}
.b-skill{background:var(--purple-bg);border:1px solid var(--purple-br);color:var(--purple)}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:var(--text-sm);font-weight:500;white-space:nowrap}
.tag-p{background:var(--purple-bg);color:var(--purple)}.tag-g{background:var(--green-bg);color:var(--green)}
.tag-a{background:var(--amber-bg);color:var(--amber)}.tag-b{background:var(--blue-bg);color:var(--blue)}
.tag-c{background:var(--coral-bg);color:var(--coral)}.tag-t{background:var(--teal-bg);color:var(--teal)}
/* Status chip */
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:var(--text-label);font-weight:500}
.status-chip--active{background:var(--green-bg);border:1px solid var(--green-br);color:var(--green-light)}
.status-chip--delivery{background:var(--cyan-bg);border:1px solid var(--cyan-br);color:var(--cyan-light)}
.status-chip--pending{background:var(--amber-bg);border:1px solid var(--amber-br);color:var(--amber-light)}
.status-chip--error{background:var(--coral-bg);border:1px solid var(--coral-br);color:var(--coral)}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse-dot 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.status-dot{animation:none}}
/* ══════════════════════════
11. ALERTAS
══════════════════════════ */
.alerta,.al{border-radius:8px;padding:10px 16px;font-size:var(--text-sm);line-height:1.5;border-left:3px solid currentColor;margin-bottom:16px}
.al-info{background:var(--blue-bg);color:var(--blue)}.al-warn{background:var(--amber-bg);color:var(--amber)}
.al-ok{background:var(--green-bg);color:var(--green)}.al-coral{background:var(--coral-bg);color:var(--coral)}
/* ══════════════════════════
12. LIVE BADGE
══════════════════════════ */
.live-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;margin-bottom:20px;background:var(--green-bg);border:1px solid var(--green-br);color:var(--green);font-size:var(--text-sm);font-weight:500}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse-dot 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}
/* ══════════════════════════
13. FAQ (grid-template-rows)
══════════════════════════ */
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:14px 0;cursor:pointer;font-size:var(--text-base);color:var(--text2);gap:12px;user-select:none;transition:color var(--dur-fast) var(--ease-snap)}
.faq-q:hover{color:var(--text)}
.faq-chev{flex-shrink:0;color:var(--text3);transition:transform var(--dur-base) var(--ease-snap),color var(--dur-base) var(--ease-snap)}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--purple)}
.faq-item.open .faq-q{color:var(--text)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-premium)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-inner{overflow:hidden;font-size:var(--text-sm);color:var(--text2);line-height:1.8}
.faq-item.open .faq-inner{padding-bottom:14px}
.faq-inner strong{color:var(--text);font-weight:500}
/* ══════════════════════════
14. MODAL
══════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay.hidden{display:none}
.modal{background:var(--bg2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-glass);border-radius:16px;padding:40px;width:min(480px,92vw);box-shadow:var(--shadow-lg),var(--shadow-glow-strong)}
html.light .modal{background:rgba(255,255,255,.92)}
.modal-logo{font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--purple);margin-bottom:18px}
.modal-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--text);margin-bottom:6px}
.modal-sub{font-size:var(--text-sm);color:var(--text2);margin-bottom:26px;line-height:1.65}
.modal-fuse-btn{display:flex;align-items:center;gap:10px;width:100%;background:var(--purple-bg);border:1px solid var(--purple-br);border-radius:10px;padding:12px 16px;cursor:pointer;margin-bottom:18px;text-align:left;transition:background var(--dur-fast) var(--ease-snap),border-color var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap)}
.modal-fuse-btn:hover{background:rgba(139,134,240,.22);border-color:var(--purple);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.modal-fuse-btn:active{transform:scale(.98)}
.modal-fuse-btn-ic{font-size:18px;flex-shrink:0}.modal-fuse-btn-body{flex:1}
.modal-fuse-btn-label{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:2px}
.modal-fuse-btn-name{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.modal-fuse-btn-desc{font-size:var(--text-caption);color:var(--text3);margin-top:1px}
.modal-divider{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.modal-divider-line{flex:1;height:1px;background:var(--border)}.modal-divider-txt{font-size:10px;color:var(--text3);white-space:nowrap}
.mbtn{width:100%;background:var(--purple);color:#fff;border:none;border-radius:10px;padding:13px;font-family:var(--font-body);font-size:var(--text-base);font-weight:600;cursor:pointer;box-shadow:0 2px 16px var(--purple-glow);transition:opacity var(--dur-fast) var(--ease-snap),transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap)}
.mbtn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 22px var(--purple-glow2)}
.mbtn:active{transform:scale(.97)}
/* ══════════════════════════
15. TABELAS
══════════════════════════ */
.tabela{width:100%;border-collapse:collapse;background:var(--bg-glass);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm),var(--glass-hi)}
.tabela thead tr{background:rgba(255,255,255,.03);border-bottom:1px solid var(--border2)}
html.light .tabela thead tr{background:rgba(0,0,0,.03)}
.tabela th{padding:10px 14px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);text-align:left}
.tabela td{padding:13px 14px;font-size:var(--text-sm);color:var(--text2);border-bottom:1px solid var(--border);vertical-align:top;line-height:1.55;transition:background var(--dur-fast) var(--ease-snap)}
.tabela tr:last-child td{border-bottom:none}
.tabela tr:hover td{background:var(--purple-bg)}
.f-nome{font-size:var(--text-sm);font-weight:500;color:var(--text)}
.f-path{font-size:var(--text-label);color:var(--text3);margin-top:2px;font-family:monospace}
.f-link{text-decoration:none;color:var(--purple);font-size:var(--text-label);margin-top:3px;display:inline-flex;align-items:center;gap:3px;transition:color var(--dur-fast) var(--ease-snap)}
.f-link:hover{color:var(--text)}
@media(max-width:639px){.tabela th:nth-child(2),.tabela td:nth-child(2){display:none}}
/* ══════════════════════════
16. STAT CARD (v3.2)
══════════════════════════ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.stat-card{background:var(--bg-glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:16px;padding:20px 22px 16px;box-shadow:var(--glass-hi),var(--shadow-sm);position:relative;overflow:hidden;cursor:default;transition:transform var(--dur-base) var(--ease-premium),border-color var(--dur-base) var(--ease-snap),box-shadow var(--dur-base) var(--ease-snap)}
.stat-card:hover{transform:translateY(-3px);border-color:var(--stat-br,var(--border2));box-shadow:var(--glass-hi),var(--shadow-lg),0 0 48px var(--stat-glow,rgba(139,134,240,.10))}
.stat-card::after{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;background:var(--stat-orb,var(--purple-bg));filter:blur(28px);pointer-events:none}
.stat-card--purple{--stat-br:var(--purple-br);--stat-glow:rgba(139,134,240,.13);--stat-orb:rgba(139,134,240,.18)}
.stat-card--cyan{--stat-br:var(--cyan-br);--stat-glow:rgba(34,211,238,.10);--stat-orb:rgba(34,211,238,.16)}
.stat-card--green{--stat-br:var(--green-br);--stat-glow:rgba(52,211,153,.09);--stat-orb:rgba(52,211,153,.15)}
.stat-card--amber{--stat-br:var(--amber-br);--stat-glow:rgba(251,191,36,.09);--stat-orb:rgba(251,191,36,.15)}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.stat-label{font-size:var(--text-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);display:flex;align-items:center;gap:6px}
.stat-dot{width:5px;height:5px;border-radius:50%;background:var(--purple);flex-shrink:0;animation:pulse-dot 2s ease-in-out infinite}
.stat-card--cyan .stat-dot{background:var(--cyan)}.stat-card--green .stat-dot{background:var(--green)}.stat-card--amber .stat-dot{background:var(--amber)}
@media(prefers-reduced-motion:reduce){.stat-dot{animation:none}}
.stat-period{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid var(--border);font-size:10px;color:var(--text3);cursor:pointer;transition:background var(--dur-fast) var(--ease-snap),color var(--dur-fast) var(--ease-snap)}
.stat-period:hover{background:rgba(255,255,255,.09);color:var(--text2)}
.stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.stat-unit{font-size:16px;font-weight:500}
.stat-card--purple .stat-unit{color:var(--purple-light)}.stat-card--cyan .stat-unit{color:var(--cyan-light)}
.stat-card--green .stat-unit{color:var(--green-light)}.stat-card--amber .stat-unit{color:var(--amber-light)}
.stat-change{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:var(--text-label);font-weight:600;white-space:nowrap;flex-shrink:0}
.stat-change--up{color:var(--green);background:var(--green-bg);border:1px solid var(--green-br)}
.stat-change--down{color:var(--coral);background:var(--coral-bg);border:1px solid var(--coral-br)}
/* ══════════════════════════
17. COMPONENTES REUNIÃO
══════════════════════════ */
.fala{border-left:2px solid var(--purple);background:var(--purple-bg);border-radius:0 8px 8px 0;padding:12px 16px}
.fala-tag{font-size:var(--text-sm);color:var(--purple);font-weight:500;margin-bottom:6px}
.fala-text{font-style:italic;color:var(--text2);line-height:1.6}
.var-consultor{color:var(--purple)}.var-cliente{color:var(--green)}
.pergunta{display:flex;gap:12px;align-items:flex-start}
.pq-icon{color:var(--purple);font-size:18px;flex-shrink:0;margin-top:2px}
.pq-text{font-style:italic;color:var(--text);font-size:var(--text-base);margin-bottom:4px}
.pq-why{font-size:var(--text-sm);color:var(--text3)}
.acao-row{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.acao-badge{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.ac-f{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-br)}
.ac-c{background:var(--green-bg);color:var(--green);border:1px solid var(--green-br)}
.ac-ck{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-br)}
.acao-txt{font-size:var(--text-sm);color:var(--text2)}
/* ══════════════════════════
18. ANIMAÇÕES (v3.2)
.reveal usa .is-visible
══════════════════════════ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-enter) var(--ease-premium),transform var(--dur-enter) var(--ease-premium)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes shimmer{from{background-position:-200% center}to{background-position:200% center}}
.is-loading{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.4s var(--ease-snap) infinite}
@media(prefers-reduced-motion:reduce){.is-loading{animation:none}}
/* ══════════════════════════
19. MISC
══════════════════════════ */
.secao{margin-bottom:38px}
.secao-titulo{font-family:var(--font-display);font-size:var(--text-label);font-weight:700;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:10px;letter-spacing:.07em;text-transform:uppercase}
.secao-linha{flex:1;height:1px;background:var(--border)}
.nota{font-size:var(--text-caption);color:var(--text2);background:var(--purple-bg);border:1px solid var(--purple-br);border-radius:9px;padding:11px 15px;margin-bottom:22px;line-height:1.65}
.legenda{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.legenda-item{display:flex;align-items:center;gap:6px;font-size:var(--text-caption);color:var(--text3)}
.footer-nota{margin-top:48px;padding-top:20px;border-top:1px solid var(--border);font-size:var(--text-caption);color:var(--text3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.tl{display:flex;flex-direction:column;margin-bottom:24px}
.tl-item{display:flex;gap:16px;padding-bottom:22px}
.tl-item:last-child{padding-bottom:0}
.tl-left{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-label);font-weight:700;box-shadow:var(--shadow-sm);flex-shrink:0}
.tl-line{width:1px;flex:1;background:var(--border);margin-top:5px}
.tl-item:last-child .tl-line{display:none}
.tl-body{padding-top:6px;flex:1}
.tl-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--text);margin-bottom:3px}
.tl-desc{font-size:var(--text-sm);color:var(--text2);line-height:1.65}
.nav-bottom{padding-bottom:max(8px, env(safe-area-inset-bottom))}