/* ═══════════════════════════════════════════════════════════════════════════
DROP DESIGN SYSTEM v4 · drop-design-system.css
Fonte: DROP Brandbook · Crystal System
Aplicado a todo o Painel DROP.
ESTADO ATUAL (a verdade são os tokens :root e o @import logo abaixo):
tema ESCURO (galaxy/cristal) · fontes Inter (corpo) + Outfit (display).
Em reformulação ativa. Os blocos "vXX — o que mudou" abaixo são changelog
histórico e podem descrever estados antigos (ex.: tema claro, Oswald/Archivo).
v10.2 — o que mudou:
- Tipografia fechada em 2 famílias: Oswald (display/editorial, via
--drop-font-impact) · Archivo (corpo, chrome de UI, dados e labels).
Roboto saiu. Motivo duplo: é uma das faces mais gastas da web (o
detector do Impeccable a marca como overused-font), e Roboto e Archivo
são AMBAS grotescas, ou seja, o pareamento caía na regra "nunca parear
fontes parecidas mas não idênticas". Uma família em vários pesos é a
estratégia correta. Duas famílias, não três.
v10.1 — o que mudou:
- Nenhuma monoespaçada — JetBrains Mono saiu, Archivo assume o papel de
--drop-font-mono/--drop-font-data.
- Navegação de produto sem menu lateral: barra superior + abas horizontais
de seção (chanfro + losango + filete gradiente na base, nunca pílula) +
submenu que abre/fecha para a seção ativa. Ver "APP SHELL" abaixo.
- --t-primary recalculado para a raiz do gradiente (#4B1372, era #7A1F8E)
e --t-cta para preto sólido (#0A0A0A, era #4B1372) — CTA passa a ser
neutro-forte, a cor de marca fica reservada a ênfase/estado ativo.
- Overhaul geométrico: os últimos componentes com border-radius simples
(card, kpi, modal, toast, empty-icon, skeleton) viraram chanfro real.
Base v9.0 (mantida):
- Paleta oficial (Ultra #7A1F8E · Signal #009FE3 · etc.)
- TEMA (atual): ESCURO (galaxy/cristal) — fundo quase-preto, texto claro,
acentos neon, superfícies de vidro; contraste AA. Todos os componentes
consomem tokens semânticos --t-* definidos UMA vez no :root. O tema é uma
decisão de tokens, reversível (trocar tema = editar o bloco de tokens).
(Histórico: 3 temas comutáveis → claro único (2026-06) → escuro.)
- Vocabulário geométrico — chanfros (.cut-*), formas substitutas (.gx-*),
chips sem oval (.chip-*).
Princípios (Impeccable · product register):
- Profundidade vem da LUZ, não do contorno: escada de superfícies +
faceta no topo + sombra + contorno. As 4 camadas juntas resolvem o
"não dá pra ver onde um elemento termina".
- Hierarquia por escala + peso, não por efeito.
- Motion conta estado (150–300ms, expo-out), nunca decora.
- Contraste AA em todo texto. Foco sempre visível.
Tema do painel: ESCURO (atual). Sem classe de tema no nem variantes
dark: no markup — a paleta é 100% tokens --t-* no :root.
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 0 · TOKENS BASE — independentes de tema (paleta oficial v9.0) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
:root {
/* Marca — paleta oficial v9.0 */
--drop-ultra: #7A1F8E; /* roxo profundo · presença · primário do Escuro */
--drop-ultra-deep: #4B1372; /* raiz do gradiente · primário do Claro */
--drop-ultra-soft: #9B3FB0;
--drop-mid: #1860B8; /* azul-violeta · transição do gradiente */
--drop-signal: #009FE3; /* azul elétrico · ação e dado */
--drop-signal-deep: #0066B3; /* azul submarino */
--drop-signal-light: #7BD8FF; /* cyan claro · primário do Padrão */
--drop-accent: #F37021; /* laranja de atenção · acento raro */
/* Variações claras — texto/ícone de marca sobre superfície escura */
--drop-ultra-lit: #C9A4E8;
--drop-signal-lit: #7BD8FF;
--drop-accent-lit: #FF9A5C;
/* Neutros — escuro */
--drop-obsidian: #0A0A0A;
--drop-obsidian-2: #141422;
--drop-obsidian-3: #1F1F23;
/* Neutros — claro */
--drop-mist: #F4F2EE;
--drop-mist-2: #ECECEC;
--drop-mist-3: #E0E0EC;
--drop-white: #FFFFFF;
/* Feedback — derivam do tema ativo (texto legível em claro e escuro) */
--drop-success: var(--t-success);
--drop-warning: var(--t-warning);
--drop-error: var(--t-error);
--drop-info: var(--t-primary-strong);
/* Gradientes — assinatura prismática */
--drop-grad: linear-gradient(105deg, #009FE3 0%, #1860B8 45%, #7A1F8E 100%);
--drop-grad-rev: linear-gradient(285deg, #009FE3 0%, #1860B8 45%, #7A1F8E 100%);
--drop-grad-deep: linear-gradient(135deg, #0A0A0A 0%, #15102A 28%, #251763 65%, #0066B3 100%);
--drop-grad-ultra: linear-gradient(135deg, #4B1372, #7A1F8E);
--drop-grad-signal: linear-gradient(135deg, #1860B8, #009FE3);
--drop-grad-line: linear-gradient(90deg, transparent, #1860B8 30%, #009FE3 70%, transparent);
/* Tipografia */
--drop-font-impact: 'Outfit', system-ui, sans-serif; /* hero / editorial / títulos */
--drop-font-display: 'Outfit', system-ui, sans-serif; /* chrome de UI (nav · botões · tabs) */
--drop-font-body: 'Inter', system-ui, sans-serif; /* corpo */
--drop-font-mono: 'Inter', system-ui, sans-serif; /* labels técnicos */
--drop-font-data: 'Inter', system-ui, sans-serif; /* dados/números/KPIs */
/* Escala tipográfica (px fixo — product register) */
--drop-text-xs: 11px;
--drop-text-sm: 13px;
--drop-text-base:15px;
--drop-text-md: 17px;
--drop-text-lg: 20px;
--drop-text-xl: 24px;
--drop-text-2xl: 30px;
--drop-text-3xl: 38px;
--drop-text-4xl: 48px;
--drop-text-5xl: 60px;
--drop-text-6xl: 76px;
--drop-text-7xl: 96px;
--drop-text-8xl: 120px; /* hero — capas, 404, ceremonial */
--drop-text-9xl: clamp(96px, 12vw, 172px); /* manifesto / título página gigante */
/* Entrelinha */
--drop-leading-tight: 0.90;
--drop-leading-display: 0.94;
--drop-leading-heading: 1.05;
--drop-leading-body: 1.55;
--drop-leading-relaxed: 1.70;
/* Tracking */
--drop-tracking-tight: -0.02em;
--drop-tracking-normal: 0;
--drop-tracking-wide: 0.04em;
--drop-tracking-wider: 0.08em;
--drop-tracking-widest: 0.12em;
--drop-tracking-display:-0.01em;
/* Espaçamento */
--drop-space-1: 4px;
--drop-space-2: 8px;
--drop-space-3: 12px;
--drop-space-4: 16px;
--drop-space-5: 20px;
--drop-space-6: 24px;
--drop-space-8: 32px;
--drop-space-10: 40px;
--drop-space-12: 48px;
--drop-space-16: 64px;
--drop-space-20: 80px;
--drop-space-24: 96px;
--drop-space-32: 128px;
/* Raio — marca SHARP. Máx 2px. Preferir chanfros .cut-*. */
--drop-radius-none: 0;
--drop-radius-sm: 2px;
--drop-radius-md: 2px;
--drop-radius-pill: 999px; /* só p/ trilhos de barra e scrollbar */
/* Motion — o cristal cai, não pula */
--drop-ease-crystal: cubic-bezier(0.16, 1, 0.3, 1);
--drop-ease-out: cubic-bezier(0, 0, 0.2, 1);
--drop-ease-in: cubic-bezier(0.4, 0, 1, 1);
--drop-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
--drop-dur-micro: 100ms;
--drop-dur-short: 150ms;
--drop-dur-base: 300ms;
--drop-dur-long: 600ms;
--drop-dur-hero: 900ms;
/* Z-index */
--drop-z-base: 0;
--drop-z-raised: 10;
--drop-z-sticky: 100;
--drop-z-popover: 900;
--drop-z-toast: 1000;
--drop-z-modal: 1100;
}
/* ─────────────────────────────────────────────────────────
VANGUARDA: Polimento Premium Global
────────────────────────────────────────────────────────── */
/* Seleção de Texto Neon */
::selection {
background: var(--t-primary-strong);
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: var(--t-primary-strong);
color: #fff;
text-shadow: none;
}
/* Scrollbar Minimalista Escura */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--drop-bg);
}
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.25);
}
/* Efeito Lanterna (Mouse Tracking Glow) aplicado via JS */
.panel::before,
.login-panel::before {
content: '';
position: absolute;
top: var(--y, -100px);
left: var(--x, -100px);
width: 300px;
height: 300px;
background: radial-gradient(circle closest-side, rgba(157, 78, 221, 0.15), transparent);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
transition: opacity 0.3s ease;
opacity: 0;
}
.panel:hover::before,
.login-panel:hover::before {
opacity: 1;
}
.panel > *,
.login-panel > * {
position: relative;
z-index: 1;
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 1 · TEMA ÚNICO (CLARO) — tokens semânticos --t-* ║
║ Definidos UMA vez no :root. Todos os componentes os consomem. ║
║ Off-white com tinta violeta · contraste AA · texto escuro. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
:root {
color-scheme: dark;
--t-bg: #0B0914; /* mist — dark galaxy */
--t-bg-1: rgba(22, 19, 36, 0.45); /* painel flutuante glass */
--t-bg-2: rgba(255, 255, 255, 0.05); /* hover */
--t-bg-3: rgba(30, 25, 45, 0.95); /* modal */
--t-bg-hero: linear-gradient(160deg,#0B0914 0%,#140E26 100%);
--t-inset: rgba(0, 0, 0, 0.25); /* poço / trilho */
--t-ink: #FFFFFF; /* texto principal */
--t-ink-soft: #E2DFEB;
--t-ink-muted: #A39EBA;
--t-ink-faint: #76708F;
--t-success: #22C55E;
--t-warning: #F59E0B;
--t-error: #EF4444;
--t-line: rgba(255, 255, 255, 0.1);
--t-line-2: rgba(255, 255, 255, 0.15);
--t-hairline: rgba(255, 255, 255, 0.05);
--t-primary: #9D4EDD; /* neon purple */
--t-primary-strong: #38BDF8; /* neon blue */
--t-primary-lit: #C77DFF;
--t-primary-soft: rgba(157, 78, 221, 0.15);
--t-accent-warm: #FF8A00;
--t-cta: #FFFFFF;
--t-cta-fg: #0B0914;
--t-facet: inset 0 1px 0 rgba(255,255,255,0.1);
--t-facet-2: inset 0 1px 0 rgba(255,255,255,0.2);
--t-shadow-1: 0 4px 12px rgba(0,0,0,0.3);
--t-shadow-2: 0 8px 24px rgba(0,0,0,0.4);
--t-shadow-3: 0 16px 48px rgba(0,0,0,0.5);
--t-glow: 0 0 32px -4px rgba(157,78,221,0.4);
--t-mesh: none;
}
/* ── BRIDGE · tokens --drop-* semânticos derivam do tema único ─────────── */
:root {
--drop-bg: var(--t-bg);
--drop-inset: var(--t-inset);
--drop-surface: var(--t-bg-1);
--drop-surface-2: var(--t-bg-2);
--drop-surface-3: var(--t-bg-3);
--drop-bg-raised: var(--t-bg-1);
--drop-bg-overlay: var(--t-bg-3);
--drop-fg: var(--t-ink);
--drop-fg-muted: var(--t-ink-soft);
--drop-fg-subtle: var(--t-ink-muted);
--drop-fg-faint: var(--t-ink-faint);
--drop-hairline: var(--t-hairline);
--drop-border: var(--t-line);
--drop-border-strong:var(--t-line-2);
--drop-facet: var(--t-facet);
--drop-facet-strong: var(--t-facet-2);
--drop-shadow-sm: var(--t-shadow-1);
--drop-shadow-md: var(--t-shadow-2);
--drop-shadow-lg: var(--t-shadow-3);
--drop-shadow-crystal: 0 0 0 1px var(--t-primary-soft), var(--t-glow);
--drop-shadow-signal: 0 0 24px -4px rgba(0,159,227,0.50);
--drop-glow-ultra: var(--t-glow);
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 2 · RESET + BASE ║
╚═══════════════════════════════════════════════════════════════════════╝ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--drop-bg);
color: var(--drop-fg);
font-family: var(--drop-font-body);
font-size: var(--drop-text-base);
line-height: var(--drop-leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1;
transition: background-color var(--drop-dur-base) var(--drop-ease-out),
color var(--drop-dur-base) var(--drop-ease-out);
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
::selection { background: var(--t-primary-soft); color: var(--drop-fg); }
:where(input, textarea)::placeholder { color: var(--drop-fg-faint); }
/* Scrollbar — discreta */
* { scrollbar-width: thin; scrollbar-color: var(--drop-border-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--drop-border-strong);
border: 3px solid transparent;
background-clip: padding-box;
border-radius: var(--drop-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--t-ink-faint); background-clip: padding-box; }
/* Foco — anel sempre visível */
:focus-visible {
outline: 2px solid var(--t-primary-strong);
outline-offset: 2px;
border-radius: var(--drop-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · TIPOGRAFIA ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-h1, h1.drop {
font-family: var(--drop-font-impact); font-weight: 700;
font-size: var(--drop-text-6xl); line-height: var(--drop-leading-tight);
letter-spacing: var(--drop-tracking-display); text-transform: uppercase;
text-wrap: balance;
}
.drop-h2, h2.drop {
font-family: var(--drop-font-impact); font-weight: 600;
font-size: var(--drop-text-4xl); line-height: var(--drop-leading-display);
letter-spacing: var(--drop-tracking-display); text-transform: uppercase;
text-wrap: balance;
}
.drop-h3, h3.drop {
font-family: var(--drop-font-impact); font-weight: 500;
font-size: var(--drop-text-2xl); line-height: var(--drop-leading-heading);
letter-spacing: var(--drop-tracking-tight); text-transform: uppercase;
}
.drop-h4, h4.drop {
font-family: var(--drop-font-display); font-weight: 600;
font-size: var(--drop-text-xl); line-height: var(--drop-leading-heading);
text-transform: uppercase; letter-spacing: var(--drop-tracking-wide);
}
.drop-h5, h5.drop {
font-family: var(--drop-font-display); font-weight: 600;
font-size: var(--drop-text-md); line-height: var(--drop-leading-heading);
text-transform: uppercase; letter-spacing: var(--drop-tracking-wide);
}
.drop-body-lg { font-size: var(--drop-text-lg); line-height: var(--drop-leading-relaxed); }
.drop-body { font-size: var(--drop-text-base); line-height: var(--drop-leading-body); }
.drop-body-sm { font-size: var(--drop-text-sm); line-height: var(--drop-leading-body); }
.drop-label {
font-family: var(--drop-font-mono); font-size: var(--drop-text-xs);
letter-spacing: var(--drop-tracking-widest); text-transform: uppercase;
color: var(--drop-fg-subtle);
}
.drop-caption {
font-family: var(--drop-font-mono); font-size: var(--drop-text-xs);
letter-spacing: var(--drop-tracking-wide); color: var(--drop-fg-muted);
}
.drop-code { font-family: var(--drop-font-mono); font-size: var(--drop-text-sm); font-variant-numeric: tabular-nums; }
.drop-num { font-family: var(--drop-font-mono); font-variant-numeric: tabular-nums; }
/* Texto em gradiente — assinatura de marca. USO RESTRITO (v10.2).
SÓ sobre superfície ESCURA (.drop-card-gradient-deep, .drop-mesh-deep,
.drop-glass-dark), onde a extremidade ciano do gradiente atinge 6.18:1.
NUNCA sobre superfície clara: ali o ciano cai para 2.97:1 e reprova em AA
mesmo para texto grande. NUNCA em métricas nem em títulos de página.
Para valor herói em card claro use .drop-kpi-value (tinta sólida). */
/* impeccable-disable gradient-text -- assinatura de marca, restrita a superfície escura (ver acima) */
.drop-text-grad {
background: var(--drop-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · TEXTURA E ATMOSFERA (crystal system) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-grain { position: relative; }
.drop-grain::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
opacity: 0.035; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Malha prismática — glows ambiente, sensíveis ao tema */
.drop-mesh {
background-color: var(--drop-bg);
background-image: var(--t-mesh);
}
.drop-mesh-deep { background: var(--drop-grad-deep); }
.drop-hero-bg { background: var(--t-bg-hero); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · APP SHELL — topbar única (v10.1, sem sidebar, sem submenu)║
║ ║
║ Duas gramáticas de navegação, dois trabalhos distintos: ║
║ • .drop-menu — popup ancorado na aba. Leva a OUTRO lugar. Cascata. ║
║ • .drop-ptabs — abas na página, sob o título. Troca o RECORTE do ║
║ mesmo lugar (ex.: Resumo · Tráfego pago). ║
║ ║
║ Chrome fixo: 56px. Nada de barra de contexto ou submenu empilhado. ║
║ Reaproveitado por cliente/admin/hermes/configurações. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-app { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }
.drop-shell-head {
position: sticky; top: 0; z-index: var(--drop-z-sticky);
background: var(--drop-bg);
display: flex; flex-direction: column;
}
/* A faixa recebe o fundo da PÁGINA: ela some, e as placas das abas passam a
ler como uma camada apoiada sobre ele. Não usar --drop-surface aqui. */
.drop-topbar {
background: var(--drop-bg);
border-bottom: 1px solid var(--drop-border);
display: flex; align-items: center; gap: var(--drop-space-4);
padding: 0 var(--drop-space-6);
min-height: 56px; flex: none;
}
/* Marca: 
*/
.drop-logo { height: 26px; width: auto; display: block; flex: none; }
.drop-topbar-sep { width: 1px; height: 22px; background: var(--drop-border); flex: none; }
.drop-topbar-title {
font-family: var(--drop-font-mono); font-size: 10px;
color: var(--drop-fg-subtle); letter-spacing: var(--drop-tracking-widest);
text-transform: uppercase;
}
.drop-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--drop-space-3); flex: none; }
.drop-topbar-links { display: flex; align-items: center; gap: var(--drop-space-4); }
/* Chip de escopo (projeto no cliente, cliente aberto no admin). Fica SEMPRE
visível: ele diz sob qual recorte os números da tela foram calculados, e
escondê-lo num menu convida a ler um total parcial como se fosse o total. */
.drop-scope {
--c: 3px;
position: relative; display: flex; align-items: center; gap: 7px;
padding: 6px 11px; cursor: pointer; white-space: nowrap;
border: 1px solid var(--drop-signal); background: var(--drop-surface);
font-family: var(--drop-font-display); font-weight: 700; font-size: var(--drop-text-sm);
color: var(--drop-fg);
border-radius: 6px;
}
.drop-scope-label {
font-family: var(--drop-font-mono); font-size: 9px; color: var(--drop-fg-subtle);
letter-spacing: var(--drop-tracking-wider); text-transform: uppercase;
}
.drop-scope-caret { width: 9px; height: 9px; flex: none; opacity: 0.55; }
.drop-scope-wrap { position: relative; flex: none; }
/* Bloco de conta: agora é um botão que abre menu (Minha conta · Sair). */
.drop-topbar-account {
position: relative; display: flex; align-items: center; gap: var(--drop-space-2);
padding: 3px 4px 3px 3px; cursor: pointer;
background: none; border: 0; color: inherit; text-align: left;
}
.drop-topbar-account:focus-visible { outline: 2px solid var(--t-primary-strong); outline-offset: 2px; }
.drop-topbar-avatar { width: 28px; height: 28px; object-fit: contain; flex: none; }
.drop-topbar-account-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.drop-topbar-account-text .name { font-size: var(--drop-text-sm); font-weight: 600; color: var(--drop-fg); }
.drop-topbar-account-text .sub {
font-family: var(--drop-font-mono); font-size: 10px; color: var(--drop-fg-subtle);
letter-spacing: var(--drop-tracking-wide);
}
.drop-account-wrap { position: relative; flex: none; }
.drop-account-wrap .drop-menu { min-width: 200px; }
.drop-topbar-burger {
display: none; flex: none; width: 32px; height: 32px;
align-items: center; justify-content: center;
color: var(--drop-fg); background: var(--drop-surface-2);
border-radius: 6px;
}
.drop-topbar-burger svg { width: 16px; height: 16px; }
.drop-topbar-burger .icon-close { display: none; }
.drop-shell-head.is-nav-open .drop-topbar-burger .icon-burger { display: none; }
.drop-shell-head.is-nav-open .drop-topbar-burger .icon-close { display: block; }
/* ── Abas de seção (nível 1) · PLACA CONTORNADA ─────────────────────────
Inativa: contorno neutro sobre o fundo da página, recuada.
Ativa: única placa preenchida, contorno = gradiente da marca + losango.
ATENÇÃO ao aninhamento. `clip-path` recorta TODOS os descendentes, então um
popup filho da placa simplesmente não aparece. Por isso a placa (.drop-tab,
chanfrada) vive dentro de .drop-tabw (sem clip-path), e .drop-menu é IRMÃO
dela. O chanfro sai de duas camadas: a externa pinta o contorno, a interna
pinta o preenchimento 1px menor. */
/* NÃO colocar overflow-x aqui. Pela especificação, quando um eixo deixa de ser
`visible` o outro passa a ser `auto` — e um `.drop-menu` ancorado numa aba
seria recortado pela caixa de rolagem. Abaixo do breakpoint as abas vão para
o hambúrguer, então rolagem horizontal nunca é necessária. */
.drop-tabs {
display: flex; align-items: center; gap: var(--drop-space-1);
flex: 1; min-width: 0; overflow: visible;
}
.drop-tabw { position: relative; flex: none; }
.drop-tab {
display: block; padding: 1px; cursor: pointer;
background: var(--drop-border-strong);
transition: background var(--drop-dur-short) var(--drop-ease-out);
border-radius: 8px;
}
.drop-tab-in {
display: flex; align-items: center; gap: 7px; white-space: nowrap;
padding: 8px var(--drop-space-4);
background: var(--drop-bg); color: var(--drop-fg-muted);
font-family: var(--drop-font-display); font-weight: 600;
text-transform: uppercase; letter-spacing: var(--drop-tracking-wide);
font-size: var(--drop-text-xs);
transition: background var(--drop-dur-short) var(--drop-ease-out),
color var(--drop-dur-short) var(--drop-ease-out);
border-radius: 7px; /* 1px menor que o container externo para encaixar perfeitamente */
}
.drop-tabw:hover .drop-tab,
.drop-tabw.is-open .drop-tab { background: var(--t-primary-strong); }
.drop-tabw:hover .drop-tab-in,
.drop-tabw.is-open .drop-tab-in { background: var(--drop-surface); color: var(--drop-fg); }
.drop-tabw.is-active .drop-tab { background: var(--drop-grad); }
.drop-tabw.is-active .drop-tab-in { background: var(--drop-surface); color: var(--drop-fg); }
/* Losango: só na ativa, e sem reservar espaço quando ausente. */
.drop-tab-marker {
width: 6px; height: 6px; flex: none; display: none;
background: var(--t-primary-strong); transform: rotate(45deg);
}
.drop-tabw.is-active .drop-tab-marker { display: block; }
/* Chevron: só nas abas que abrem popup (marcadas com .has-menu). */
.drop-tab-caret { width: 9px; height: 9px; flex: none; opacity: 0.5; }
.drop-tabw:not(.has-menu) .drop-tab-caret { display: none; }
.drop-tabw.is-open .drop-tab-caret { transform: rotate(180deg); }
.drop-tab:focus-visible { outline: 2px solid var(--t-primary-strong); outline-offset: 2px; }
.drop-tab .drop-nav-chip { margin-left: 2px; }
/* Label mono pequeno-caixa-alta genérico (usado em headings de bloco de */
/* conteúdo além da navegação — ex.: "Atalhos", "Próximos passos" no admin). */
.drop-sidebar-label {
font-family: var(--drop-font-mono); font-size: 9px; color: var(--drop-fg-faint);
letter-spacing: var(--drop-tracking-widest); text-transform: uppercase;
padding: 0 var(--drop-space-2); margin-bottom: var(--drop-space-2);
}
/* ── .drop-menu · POPUP ANCORADO (navegação estrutural, leva a outro lugar) ─
Abre por hover no desktop e por clique/teclado sempre (JS liga .is-open).
Suporta cascata: um item .has-sub carrega um .drop-menu-sub à direita.
O JS pode acrescentar .is-flip-x (ancora pela direita) e .is-clamped
(altura máxima com rolagem) quando o popup estouraria a janela. */
.drop-menu {
position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--drop-z-overlay);
display: none; min-width: 230px; padding: 7px 6px 6px;
background: var(--drop-surface); border: 1px solid var(--drop-border);
box-shadow: var(--drop-shadow-md);
}
.drop-menu::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--drop-grad);
}
.drop-menu.is-flip-x { left: auto; right: 0; }
.drop-menu.is-clamped { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
.drop-menu.is-open { display: block; }
@media (hover: hover) and (pointer: fine) {
.drop-tabw:hover > .drop-menu { display: block; }
}
/* PONTE DE HOVER. O popup abre 8px abaixo da aba, e esse vão é uma zona morta:
ao descer o mouse em direção ao menu o :hover cai, e o menu some antes de o
ponteiro chegar nele. A ponte é um retângulo transparente que cobre o vão e
pertence ao próprio menu, logo é descendente de .drop-tabw — e :hover vale
para todos os ancestrais do elemento sob o ponteiro. O menu fica aberto na
aba, no vão e no menu, e só nessa região.
Só nos menus DAS ABAS: nos de conta e escopo, que abrem por clique, a ponte
cobriria 10px do próprio botão e engoliria o clique que fecha o menu. */
.drop-tabw > .drop-menu::after {
content: ''; position: absolute; left: 0; right: 0;
top: -10px; height: 10px;
}
/* Na cascata o vão é horizontal: o submenu abre 5px à direita do item pai. */
.drop-tabw .drop-menu-sub::after {
content: ''; position: absolute;
top: 0; bottom: 0; height: auto;
left: -7px; width: 7px; right: auto;
}
.drop-tabw .drop-menu-sub.is-flip-x::after { left: auto; right: -7px; }
.drop-menu-item {
position: relative; display: flex; align-items: center; gap: 9px;
padding: 8px 11px; cursor: pointer; white-space: nowrap;
font-family: var(--drop-font-display); font-size: var(--drop-text-sm); font-weight: 500;
color: var(--drop-fg); background: none; border: 0; width: 100%; text-align: left;
text-decoration: none;
}
.drop-menu-item:hover, .drop-menu-item.is-active { background: var(--t-primary-soft); }
.drop-menu-item:focus-visible { outline: 2px solid var(--t-primary-strong); outline-offset: -2px; }
.drop-menu-item .drop-menu-dot {
width: 5px; height: 5px; flex: none; opacity: 0.55;
background: var(--t-primary-strong); transform: rotate(45deg);
}
.drop-menu-item .drop-menu-arrow { margin-left: auto; width: 9px; height: 9px; flex: none; opacity: 0.45; transform: rotate(-90deg); }
.drop-menu-group {
font-family: var(--drop-font-mono); font-size: 9px; color: var(--drop-fg-faint);
letter-spacing: var(--drop-tracking-widest); text-transform: uppercase;
padding: 9px 11px 5px;
}
.drop-menu-sep { height: 1px; margin: 5px 0; background: var(--drop-hairline); }
/* Cascata (nível 2). Gradiente invertido no filete para sinalizar profundidade. */
.drop-menu-sub { top: -8px; left: calc(100% + 5px); min-width: 210px; }
.drop-menu-sub::before { background: var(--drop-grad-rev); }
.drop-menu-sub.is-flip-x { left: auto; right: calc(100% + 5px); }
@media (hover: hover) and (pointer: fine) {
.drop-menu-item.has-sub:hover > .drop-menu-sub { display: block; }
}
/* ── .drop-ptabs · ABAS NA PÁGINA (troca o recorte do mesmo lugar) ─────────
Vivem abaixo do título da seção, acima do conteúdo. Não custam pixel de
chrome fixo: no topo da página elas simplesmente fazem parte do conteúdo.
Ao rolar, grudam logo abaixo da topbar (56px). Em telas longas como o
Tráfego pago, trocar de aba lá embaixo exigiria voltar ao topo sem isto.
ATENÇÃO: `position: sticky` só funciona se NENHUM ancestral tiver `overflow`
diferente de `visible`. Um `overflow-y: auto` sem altura definida vira um
scrollport que nunca rola, e a aba nunca gruda. */
.drop-ptabs {
position: sticky; top: 56px; z-index: 90;
display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
background: var(--drop-bg);
border-bottom: 1px solid var(--drop-border);
margin-bottom: var(--drop-space-5);
}
.drop-ptab {
--c: 5px;
display: flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
padding: 9px var(--drop-space-3);
margin-bottom: -1px; border: 0; background: none;
border-bottom: 2px solid transparent;
font-family: var(--drop-font-display); font-size: var(--drop-text-sm); font-weight: 500;
color: var(--drop-fg-subtle);
transition: color var(--drop-dur-short) var(--drop-ease-out);
}
.drop-ptab:hover { color: var(--drop-fg); }
.drop-ptab:focus-visible { outline: 2px solid var(--t-primary-strong); outline-offset: -2px; }
.drop-ptab .drop-ptab-dot {
width: 5px; height: 5px; flex: none; opacity: 0;
background: var(--t-primary-strong); transform: rotate(45deg);
}
.drop-ptab.is-active, .drop-ptab.active {
color: var(--drop-fg); font-weight: 600;
border-bottom-color: var(--t-primary-strong);
background: var(--t-primary-soft);
border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.drop-ptab.is-active .drop-ptab-dot, .drop-ptab.active .drop-ptab-dot { opacity: 1; }
/* Encaixe à direita da barra de abas: filtros de período, botões de ação.
Aproveita a metade direita vazia da linha em vez de abrir uma faixa própria.
Os rótulos ("De", "Até") ficam inline, não empilhados sobre o campo. */
.drop-ptabs-actions {
margin-left: auto; display: flex; align-items: center; gap: var(--drop-space-2);
padding-bottom: var(--drop-space-2);
}
.drop-ptabs-actions .drop-field { flex-direction: row; align-items: center; gap: 6px; }
.drop-ptabs-actions .drop-field-label { margin: 0; white-space: nowrap; }
.drop-ptabs-actions .drop-input { padding-top: 5px; padding-bottom: 5px; }
/* Rótulo de grupo entre abas da página (ex.: "Estrutura ◆ Dados ◆ Painel"). */
.drop-ptab-group {
display: flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 0 var(--drop-space-3) 0 var(--drop-space-2);
font-family: var(--drop-font-mono); font-size: 9px; color: var(--drop-fg-faint);
letter-spacing: var(--drop-tracking-widest); text-transform: uppercase;
}
.drop-ptab-group::before { content: '◆'; font-size: 6px; color: var(--t-primary-strong); opacity: 0.6; }
.drop-ptab-group:first-child { padding-left: 0; }
.drop-viewas-banner {
display: flex; align-items: center; gap: var(--drop-space-3);
padding: var(--drop-space-2) var(--drop-space-6);
background: var(--t-primary-soft); border-bottom: 1px solid var(--drop-border);
font-size: var(--drop-text-sm);
}
.drop-main {
flex: 1;
padding: var(--drop-space-8) var(--drop-space-10);
display: flex; flex-direction: column; gap: var(--drop-space-6);
background: var(--drop-bg);
}
/* ── Mobile — abaixo de 1024px as abas saem da topbar e viram hambúrguer ──
O limite subiu de 860px porque as abas agora dividem a linha com a logo, o
chip de escopo e o bloco de conta: no cliente, seis abas + chip + conta
pedem ~950px. Com 1024px as abas nunca precisam rolar na horizontal, o que
permite manter overflow:visible em .drop-tabs (ver nota lá em cima). */
@media (max-width: 1024px) {
.drop-topbar-burger { display: inline-flex; }
.drop-topbar-links { display: none; }
.drop-tabs { display: none; }
.drop-topbar-account-text .sub { display: none; }
.drop-shell-head.is-nav-open {
position: fixed; inset: 0; overflow-y: auto; z-index: var(--drop-z-overlay);
background: var(--drop-bg);
animation: drop-fade var(--drop-dur-base) var(--drop-ease-out);
}
/* Aberta, a topbar quebra em duas linhas: a barra de 56px continua sendo uma
barra (marca à esquerda, conta à direita), e as abas ocupam a linha de
baixo. Sem isto, o `align-items:center` centraliza a marca no meio da
tela inteira, porque a topbar passa a ter a altura da lista de abas. */
.drop-shell-head.is-nav-open .drop-topbar {
flex-wrap: wrap; align-items: center; align-content: flex-start;
padding-bottom: var(--drop-space-2);
}
.drop-shell-head.is-nav-open .drop-topbar > *:not(.drop-tabs) {
height: 56px; display: flex; align-items: center;
}
.drop-shell-head.is-nav-open .drop-topbar-sep { height: 22px; }
.drop-shell-head.is-nav-open .drop-tabs {
flex-basis: 100%; order: 10;
display: flex; flex-direction: column; align-items: stretch;
gap: var(--drop-space-2); padding: var(--drop-space-2) 0; overflow: visible;
}
.drop-shell-head.is-nav-open .drop-tabw { width: 100%; }
.drop-shell-head.is-nav-open .drop-tab-in { padding: 13px var(--drop-space-4); }
/* Sem hover no toque: dentro do hambúrguer o popup DA ABA deixa de ser popup
e vira lista aberta, recuada sob ela. A cascata recua mais um nível.
O menu de conta e o de escopo continuam popups: eles vivem na barra de
56px, não na lista, e abrem por clique. */
.drop-shell-head.is-nav-open .drop-tabw .drop-menu {
position: static; display: block; min-width: 0; padding: 0;
margin: var(--drop-space-2) 0 var(--drop-space-1) var(--drop-space-4);
background: none; border: 0; box-shadow: none; max-height: none; overflow: visible;
}
.drop-shell-head.is-nav-open .drop-tabw .drop-menu::before,
.drop-shell-head.is-nav-open .drop-tabw .drop-menu::after,
.drop-shell-head.is-nav-open .drop-tabw .drop-menu-sub::after { display: none; }
.drop-shell-head.is-nav-open .drop-tabw .drop-menu-sub { margin-left: var(--drop-space-4); }
.drop-shell-head.is-nav-open .drop-tabw .drop-menu-arrow { display: none; }
.drop-main { padding: var(--drop-space-6) var(--drop-space-4); }
/* Abas da página: uma linha só, rolando na horizontal. */
.drop-ptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.drop-ptabs::-webkit-scrollbar { display: none; }
}
/* Filtros de período (De/Até) que vivem na linha das abas: em telas estreitas
não cabem ao lado e sumiam empurrados para a direita no scroll horizontal.
A faixa que OS CONTÉM (só ela, via :has) passa a quebrar, e os filtros ganham
a própria linha, full-width. Faixas sem filtros seguem rolando (regra acima). */
@media (max-width: 640px) {
.drop-ptabs:has(.drop-ptabs-actions) { flex-wrap: wrap; overflow-x: visible; }
.drop-ptabs-actions {
margin-left: 0; flex-basis: 100%; margin-top: var(--drop-space-2);
padding-bottom: 0;
}
.drop-ptabs-actions .drop-field { flex: 1; }
.drop-ptabs-actions .drop-input { width: 100%; }
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · NAV CHIP (contador dentro de aba/lista) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-nav-chip {
margin-left: auto;
font-family: var(--drop-font-mono); font-size: 9px; font-variant-numeric: tabular-nums;
padding: 2px 6px; background: var(--t-primary-soft);
color: var(--t-primary-strong); border: 1px solid var(--drop-border);
}
/* Sem número, sem caixa: senão a aba carrega um retângulo vazio. */
.drop-nav-chip:empty { display: none; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · CABEÇALHO DE PÁGINA ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--drop-space-4); }
.drop-kicker {
font-family: var(--drop-font-mono); font-size: 10px; color: var(--t-primary-strong);
letter-spacing: var(--drop-tracking-widest); text-transform: uppercase;
margin-bottom: var(--drop-space-2);
}
.drop-page-title {
font-family: var(--drop-font-impact); font-weight: 700;
font-size: var(--drop-text-3xl); text-transform: uppercase;
letter-spacing: var(--drop-tracking-display); line-height: 1;
}
.drop-page-actions { display: flex; gap: var(--drop-space-2); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · BOTÕES ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-btn {
font-family: var(--drop-font-display); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: var(--drop-text-xs);
min-height: 42px; padding: 0 var(--drop-space-6);
display: inline-flex; align-items: center; justify-content: center; gap: var(--drop-space-2);
outline: none; border-radius: 8px;
position: relative;
transition: all var(--drop-dur-base) var(--drop-ease-out);
}
.drop-btn:active { transform: scale(0.98); }
.drop-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.drop-btn svg { width: 15px; height: 15px; }
/* Botão Primário: Azul Neon (Vibrant Arredondado) */
.drop-btn-primary {
background: linear-gradient(135deg, var(--t-primary-strong), var(--t-primary)) !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3), inset 0 1px 1px rgba(255,255,255,0.4) !important;
}
.drop-btn-primary:hover {
filter: brightness(1.15);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.5), 0 0 20px rgba(157, 78, 221, 0.4), inset 0 1px 1px rgba(255,255,255,0.5) !important;
}
.drop-btn-secondary {
background: rgba(255,255,255,0.05); color: var(--drop-fg);
border: 1px solid var(--drop-border-strong);
border-radius: 8px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.drop-btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.3);
transform: translateY(-1px) scale(1.02);
}
.drop-btn-ghost { color: var(--drop-fg-subtle); }
.drop-btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--drop-fg); transform: translateY(-1px) scale(1.02); }
.drop-btn-danger { background: var(--drop-error); color: #fff; }
.drop-btn-danger:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -4px rgba(237,74,74,0.5); }
/* Signal — acao de dado/analytics (brandbook v9.0) */
.drop-btn-signal { background: var(--drop-signal); color: #fff; }
.drop-btn-signal:hover { filter: brightness(1.08); box-shadow: var(--drop-shadow-signal); }
/* Accent — atencao rara, usar com parcimonia (brandbook v9.0) */
.drop-btn-accent { background: var(--drop-accent); color: #fff; }
.drop-btn-accent:hover { filter: brightness(1.08); box-shadow: 0 6px 18px -4px rgba(243,112,33,0.5); }
.drop-btn-sm { min-height: 30px; padding: 0 var(--drop-space-3); font-size: 10px; --c: 4px; }
.drop-btn-lg { min-height: 46px; padding: 0 var(--drop-space-6); font-size: var(--drop-text-sm); --c: 8px; }
.drop-btn-block { width: 100%; }
/* Loading state — mantem largura, mostra spinner inline (brandbook v9.0) */
.drop-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.drop-btn.is-loading::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 14px; height: 14px; margin: -7px 0 0 -7px;
border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%;
animation: drop-spin 680ms linear infinite;
color: var(--t-cta-fg);
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · SUPERFÍCIES / CARDS ║
║ 4 camadas de contraste: preenchimento > canvas + faceta + contorno ║
║ + sombra. É o que faz o olho ver onde o cartão começa e termina. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-card, .drop-panel {
background: var(--drop-surface);
border: 1px solid var(--drop-border);
box-shadow: var(--drop-facet), var(--drop-shadow-sm);
padding: var(--drop-space-5);
border-radius: 12px;
}
.drop-card-hover {
transition: border-color var(--drop-dur-base) var(--drop-ease-out),
box-shadow var(--drop-dur-base) var(--drop-ease-out),
transform var(--drop-dur-base) var(--drop-ease-crystal),
background-color var(--drop-dur-base) var(--drop-ease-out);
}
.drop-card-hover:hover {
border-color: var(--drop-border-strong);
background: var(--drop-surface-2);
box-shadow: var(--drop-facet-strong), var(--drop-shadow-md);
transform: translateY(-3px);
}
/* Cartão cristal — aresta superior pega a luz do prisma */
.drop-card-crystal { position: relative; box-shadow: var(--drop-shadow-md); }
.drop-card-crystal::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit; padding: 1px;
background: linear-gradient(160deg, var(--t-primary-lit), transparent 34%, var(--t-primary-strong) 100%);
opacity: 0.5;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.drop-card-highlight {
border-color: var(--t-primary-soft);
box-shadow: var(--drop-facet), var(--drop-shadow-crystal);
position: relative; overflow: hidden;
}
.drop-card-highlight::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 60% 70% at 0% 0%, var(--t-primary-soft), transparent 62%);
}
.drop-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--drop-space-4); gap: var(--drop-space-3);
}
.drop-card-title {
font-family: var(--drop-font-impact); font-weight: 600; /* título de card → Oswald */
font-size: var(--drop-text-md); text-transform: uppercase;
letter-spacing: var(--drop-tracking-wide); color: var(--drop-fg);
}
/* Variantes do brandbook v9.0 — sec 05.2 Componentes / Cards */
.drop-card-gradient-deep {
background: linear-gradient(160deg, #0A0A0A 0%, #1A0E3E 60%, #4B1372 100%);
color: #F4ECFF;
border-color: rgba(177,75,216,0.20);
}
.drop-card-signal-top {
border-top: 2px solid var(--drop-signal);
}
.drop-card-grad-border-left {
border-left: 3px solid transparent;
border-image: linear-gradient(180deg, var(--drop-ultra), var(--drop-signal)) 1;
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · KPI ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-kpi-grid {
display: grid; gap: var(--drop-space-3);
grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
/* v10.2 — card KPI como CRISTAL CISALHADO, centralizado, com profundidade
em camadas. Corte assimétrico (só o canto superior-esquerdo e o inferior-
direito), que lê como o cristal facetado da marca e não um octógono genérico.
Profundidade por `filter: drop-shadow` (segue a silhueta chanfrada; box-shadow
projetaria um retângulo atrás do corte): contato + ambiente + um filete AZUL
deslocado que faz parecer haver uma face por baixo. Sem exagero. */
.drop-kpi {
position: relative; overflow: hidden; text-align: center;
background: var(--drop-surface);
padding: var(--drop-space-6) var(--drop-space-5) var(--drop-space-5);
border-radius: 16px;
/* profundidade grau B (v10.2): contato + ambiente mais encorpada + filete azul.
Encorpada em relação à primeira versão para o card descolar mais do fundo,
sem mexer no fundo (que é global) — a escolha segura. */
filter:
drop-shadow(0 2px 2px rgba(22,19,28,0.14))
drop-shadow(0 16px 30px rgba(22,19,28,0.16))
drop-shadow(3px 5px 0 rgba(24,96,184,0.13));
transition: filter var(--drop-dur-base) var(--drop-ease-out);
}
/* contorno fino desenhado por dentro (segue o corte, ao contrário de border) */
.drop-kpi::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--drop-border);
}
/* faceta de luz: a aresta chanfrada superior recebe a luz primeiro */
.drop-kpi::after {
content: ''; position: absolute; top: 0; left: var(--c); right: 0; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.7));
}
/* hover: a profundidade cresce (filter, não box-shadow, para seguir o corte).
card-hover ainda aplica o translateY; anulo só o box-shadow retangular dele. */
.drop-kpi.card-hover:hover { box-shadow: none; filter:
drop-shadow(0 3px 3px rgba(22,19,28,0.16))
drop-shadow(0 24px 42px rgba(22,19,28,0.20))
drop-shadow(4px 7px 0 rgba(24,96,184,0.16)); }
.drop-kpi-label {
font-family: var(--drop-font-mono); font-size: 10px; color: var(--drop-fg-subtle);
letter-spacing: var(--drop-tracking-wider); text-transform: uppercase;
margin-bottom: var(--drop-space-3);
}
/* v10.2 — valor herói em TINTA SÓLIDA.
O preenchimento do glifo com o gradiente da marca punha a extremidade ciano
(#009FE3) em 2.97:1 sobre a superfície branca do card, abaixo até do mínimo
de 3:1 exigido para texto grande. Na prática, o primeiro dígito de todo KPI
reprovava em AA. Dado existe para ser lido, não decorado: em registro
product a legibilidade vence a assinatura. Agora 18.4:1.
O gradiente continua disponível via .drop-text-grad, restrito a superfícies
escuras, onde o ciano atinge 6.18:1 contra a tinta. */
.drop-kpi-value {
font-family: var(--drop-font-impact); font-weight: 700; /* valor herói → Oswald */
/* v10.2 — 3xl (38px), não 4xl. fmtMoeda gera valor CHEIO ("R$ 124.847,90"),
um token sem quebra; a 48px ele estourava a coluna e era cortado pelo
clip-path (some no mobile 2-col e no desktop 4-col). A 38px cabe em 4-col
(215px < 240px úteis). nowrap: nunca quebra em 2 linhas. */
font-size: var(--drop-text-3xl); line-height: 1.05; letter-spacing: var(--drop-tracking-tight);
font-variant-numeric: tabular-nums; white-space: nowrap;
color: var(--t-ink);
}
/* Retrocompat: .is-neutral já era o valor sólido. Agora é o padrão. */
.drop-kpi-value.is-neutral { color: var(--drop-fg); }
.drop-kpi-delta {
font-family: var(--drop-font-mono); font-size: 11px; margin-top: var(--drop-space-3);
display: flex; align-items: center; justify-content: center; gap: var(--drop-space-1);
}
.drop-delta-up { color: var(--drop-success); }
.drop-delta-down { color: var(--drop-error); }
.drop-delta-txt { color: var(--drop-fg-subtle); margin-left: 3px; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · TABELAS ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.drop-table thead tr { border-bottom: 1px solid var(--drop-border); }
.drop-table th {
font-family: var(--drop-font-mono); font-size: 9.5px; font-weight: 500;
letter-spacing: var(--drop-tracking-wider); color: var(--drop-fg-subtle);
text-transform: uppercase; text-align: left; padding: var(--drop-space-3) var(--drop-space-4);
}
.drop-table th.al-r, .drop-table td.al-r { text-align: right; }
.drop-table td {
padding: 13px var(--drop-space-4); font-size: var(--drop-text-sm);
border-bottom: 1px solid var(--drop-hairline);
color: var(--drop-fg);
}
.drop-table tr:last-child td { border-bottom: 0; }
.drop-table tbody tr { transition: background var(--drop-dur-short) var(--drop-ease-out); }
.drop-table tbody tr:hover td { background: var(--drop-surface-2); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · CHIPS / BADGES / PILLS ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-badge {
display: inline-flex; align-items: center; gap: var(--drop-space-1);
font-family: var(--drop-font-mono); font-size: 9px;
letter-spacing: var(--drop-tracking-wider); text-transform: uppercase;
padding: 4px 8px;
background: var(--t-primary-soft);
border: 1px solid var(--drop-border);
color: var(--t-primary-strong);
}
.drop-pill {
display: inline-flex; align-items: center; gap: var(--drop-space-1);
font-family: var(--drop-font-mono); font-size: 9px;
letter-spacing: var(--drop-tracking-wide); text-transform: uppercase;
padding: 3px 9px;
}
.drop-pill-success { background: rgba(26,191,116,0.14); border: 1px solid rgba(26,191,116,0.34); color: var(--drop-success); }
.drop-pill-error { background: rgba(237,74,74,0.14); border: 1px solid rgba(237,74,74,0.32); color: var(--drop-error); }
.drop-pill-warning { background: rgba(245,197,24,0.14); border: 1px solid rgba(245,197,24,0.32); color: var(--drop-warning); }
.drop-pill-neutral { background: var(--drop-surface-2); border: 1px solid var(--drop-border); color: var(--drop-fg-subtle); }
.drop-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.drop-dot-pulse { animation: drop-pulse 2.4s var(--drop-ease-inout) infinite; }
/* Variantes de badge — paralelo aos pills (brandbook v9.0) */
.drop-badge-ultra { background: rgba(122,31,142,0.18); border: 1px solid rgba(122,31,142,0.30); color: var(--t-primary-lit); }
.drop-badge-signal { background: rgba(0,159,227,0.16); border: 1px solid rgba(0,159,227,0.30); color: var(--t-primary-strong); }
.drop-badge-success { background: rgba(26,191,116,0.16); border: 1px solid rgba(26,191,116,0.30); color: var(--drop-success); }
.drop-badge-warning { background: rgba(245,197,24,0.18); border: 1px solid rgba(245,197,24,0.32); color: var(--drop-warning); }
.drop-badge-error { background: rgba(237,74,74,0.14); border: 1px solid rgba(237,74,74,0.30); color: var(--drop-error); }
.drop-badge-accent { background: rgba(243,112,33,0.14); border: 1px solid rgba(243,112,33,0.30); color: var(--drop-accent); }
.drop-badge-premium { background: linear-gradient(135deg,#4B1372,#1860B8); border: 0; color: #fff; }
/* ── Chips sem oval · v9.0 ── */
.chip-blend {
font-family: var(--drop-font-mono); font-size: 10px; letter-spacing: 0.10em;
text-transform: uppercase; padding: 5px 11px;
display: inline-flex; gap: 6px; align-items: center;
background: var(--t-primary-soft); color: inherit; border: 0;
}
.chip-bracket, .chip-dot, .chip-under {
font-family: var(--drop-font-mono); font-size: 10.5px; letter-spacing: 0.12em;
text-transform: uppercase; color: inherit;
display: inline-flex; gap: 6px; align-items: center; padding: 0;
}
.chip-bracket::before { content: "["; color: var(--t-primary-strong); font-weight: 500; }
.chip-bracket::after { content: "]"; color: var(--t-primary-strong); font-weight: 500; }
.chip-dot > .mk { background: var(--t-primary-strong); width: 8px; height: 8px; display: inline-block; flex: none; }
.chip-tag {
font-family: var(--drop-font-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; padding: 5px 11px;
background: var(--drop-surface-3); color: inherit; border: 0;
border-radius: 8px;
}
.chip-under { padding: 0 0 2px; border-bottom: 1.5px solid var(--t-primary-strong); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · FORMULÁRIOS ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-field { display: flex; flex-direction: column; gap: var(--drop-space-2); }
.drop-field-label {
font-family: var(--drop-font-mono); font-size: 10px;
letter-spacing: var(--drop-tracking-wider); text-transform: uppercase;
color: var(--drop-fg-subtle);
}
.drop-input, .drop-select, .drop-textarea {
width: 100%;
background: var(--drop-inset);
border: 1px solid var(--drop-border);
color: var(--drop-fg);
font-family: var(--drop-font-body); font-size: var(--drop-text-sm);
min-height: 40px; padding: 9px var(--drop-space-3);
border-radius: 8px;
transition: border-color var(--drop-dur-short) var(--drop-ease-out),
box-shadow var(--drop-dur-short) var(--drop-ease-out),
background-color var(--drop-dur-short) var(--drop-ease-out);
}
.drop-textarea { resize: vertical; min-height: 92px; line-height: var(--drop-leading-body); }
.drop-input:hover, .drop-select:hover, .drop-textarea:hover { border-color: var(--drop-border-strong); }
.drop-input:focus, .drop-select:focus, .drop-textarea:focus {
outline: none;
background: var(--drop-surface);
border-color: var(--t-primary-strong);
box-shadow: 0 0 0 3px var(--t-primary-soft);
}
.drop-input:disabled, .drop-select:disabled { opacity: 0.45; cursor: not-allowed; }
.drop-input[aria-invalid="true"], .drop-input.is-error {
border-color: var(--drop-error); box-shadow: 0 0 0 3px rgba(237,74,74,0.16);
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · MODAL / OVERLAY ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-overlay {
position: fixed; inset: 0;
background: rgba(7,5,15,0.78);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
z-index: var(--drop-z-modal);
display: flex; align-items: center; justify-content: center;
padding: var(--drop-space-6);
animation: drop-fade var(--drop-dur-base) var(--drop-ease-out);
}
.drop-modal {
background: var(--drop-surface-3);
border: 1px solid var(--drop-border-strong);
box-shadow: var(--drop-facet-strong), var(--drop-shadow-lg);
max-width: 540px; width: 100%;
animation: drop-rise var(--drop-dur-base) var(--drop-ease-crystal);
border-radius: 12px;
}
.drop-menu[data-placement^="bottom"] {
border-radius: 8px;
}
.drop-modal-head {
padding: var(--drop-space-5);
border-bottom: 1px solid var(--drop-border);
display: flex; align-items: center; justify-content: space-between; gap: var(--drop-space-3);
}
.drop-modal-body { padding: var(--drop-space-5); }
.drop-modal-foot {
padding: var(--drop-space-5);
border-top: 1px solid var(--drop-border);
display: flex; justify-content: flex-end; gap: var(--drop-space-2);
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · ALERT INLINE (brandbook v9.0 · sec 05.6) ║
║ Alerta persistente. Use .drop-toast para mensagens efêmeras. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-alert {
display: grid; grid-template-columns: 18px 1fr; gap: var(--drop-space-3);
padding: 11px 13px;
border: 1px solid var(--drop-border);
background: var(--drop-surface-2);
color: var(--drop-fg);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-radius: 12px;
}
.drop-alert-icon {
width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
font-family: var(--drop-font-display); font-weight: 700; font-size: 11px; color: #fff;
border-radius: 4px;
}
.drop-alert-title {
font-weight: 600; font-size: var(--drop-text-sm); line-height: 1.3;
}
.drop-alert-text {
font-size: 11px; color: var(--drop-fg-subtle);
margin-top: 2px; line-height: 1.4;
}
.drop-alert.is-info { background: rgba(0,159,227,0.08); border-color: rgba(0,159,227,0.30); }
.drop-alert.is-info .drop-alert-icon { background: var(--drop-signal); }
.drop-alert.is-warning { background: rgba(245,197,24,0.10); border-color: rgba(245,197,24,0.32); }
.drop-alert.is-warning .drop-alert-icon { background: var(--drop-warning); color: #0A0A0A; }
.drop-alert.is-error { background: rgba(237,74,74,0.08); border-color: rgba(237,74,74,0.30); }
.drop-alert.is-error .drop-alert-icon { background: var(--drop-error); }
.drop-alert.is-success { background: rgba(26,191,116,0.08); border-color: rgba(26,191,116,0.30); }
.drop-alert.is-success .drop-alert-icon { background: var(--drop-success); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · TOAST ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-toast-stack {
position: fixed; bottom: var(--drop-space-6); right: var(--drop-space-6);
display: flex; flex-direction: column; gap: var(--drop-space-2);
z-index: var(--drop-z-toast);
}
.drop-toast {
background: var(--drop-surface-3);
border: 1px solid var(--drop-border-strong);
box-shadow: var(--drop-facet), var(--drop-shadow-md);
padding: var(--drop-space-3) var(--drop-space-4);
font-size: var(--drop-text-sm);
display: flex; align-items: center; gap: var(--drop-space-3);
animation: drop-slide-in var(--drop-dur-base) var(--drop-ease-crystal);
border-radius: 12px;
}
.drop-toast::before { content: ''; width: 3px; align-self: stretch; background: var(--drop-signal); flex: none; }
.drop-toast.is-success::before { background: var(--drop-success); }
.drop-toast.is-error::before { background: var(--drop-error); }
.drop-toast.is-warning::before { background: var(--drop-warning); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · STEPPER (brandbook v9.0 · sec 05.5) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-stepper { display: flex; flex-direction: column; gap: var(--drop-space-3); }
.drop-step { display: flex; gap: var(--drop-space-3); align-items: flex-start; }
.drop-step-marker {
width: 22px; height: 22px; flex: none;
display: flex; align-items: center; justify-content: center;
font-family: var(--drop-font-mono); font-size: 10px; font-weight: 600;
border-radius: 4px;
background: transparent;
border: 1px solid var(--drop-border-strong);
color: var(--drop-fg-faint);
}
.drop-step-title { font-weight: 600; color: var(--drop-fg); font-size: 12.5px; line-height: 1.2; }
.drop-step-meta {
font-family: var(--drop-font-mono); font-size: 9.5px;
color: var(--drop-fg-faint); letter-spacing: var(--drop-tracking-wide);
margin-top: 1px;
}
.drop-step.is-completed .drop-step-marker { background: var(--drop-success); color: #fff; border-color: var(--drop-success); }
.drop-step.is-active .drop-step-marker { background: var(--drop-grad); color: #fff; border: 0; }
.drop-step.is-pending .drop-step-title { color: var(--drop-fg-subtle); font-weight: 500; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · TIMELINE (brandbook v9.0 · sec 05.5) ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-timeline { padding-left: 18px; border-left: 1px solid var(--drop-border-strong); display: flex; flex-direction: column; }
.drop-time-item { position: relative; padding: 8px 0; }
.drop-time-marker {
position: absolute; left: -23px; top: 14px; width: 9px; height: 9px;
background: var(--t-primary);
}
.drop-time-item.is-signal .drop-time-marker { background: var(--drop-signal); }
.drop-time-item.is-warning .drop-time-marker { background: var(--drop-warning); }
.drop-time-item.is-success .drop-time-marker { background: var(--drop-success); }
.drop-time-item.is-error .drop-time-marker { background: var(--drop-error); }
.drop-time-text { font-size: 12.5px; color: var(--drop-fg); line-height: 1.4; }
.drop-time-meta {
font-family: var(--drop-font-mono); font-size: 9.5px;
color: var(--drop-fg-faint); letter-spacing: var(--drop-tracking-wider);
text-transform: uppercase; margin-top: 2px;
}
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 3 · BARRAS / DIVISÓRIA / VAZIO ║
╚═══════════════════════════════════════════════════════════════════════╝ */
/* Progresso. API: passe a fração preenchida em --v (ex.: style="--v:68%").
v10.2 — a versão anterior animava a propriedade de largura, o que dispara
layout a cada frame (thrash). Agora o gradiente ocupa a extensão TOTAL do
trilho e o preenchimento é revelado por clip-path, que é paint e não layout.
Efeito colateral desejável: a cor em 68% passa a ser a cor real de 68% do
gradiente da marca, em vez de um gradiente inteiro espremido em 68%. */
.drop-bar-track {
position: relative;
height: 6px; background: var(--drop-inset);
border: 1px solid var(--drop-hairline);
border-radius: var(--drop-radius-pill); overflow: hidden;
}
.drop-bar-fill {
position: absolute; inset: 0;
background: var(--drop-grad);
border-radius: var(--drop-radius-pill);
box-shadow: 0 0 12px -2px rgba(0,159,227,0.5);
clip-path: inset(0 calc(100% - var(--v, 0%)) 0 0);
transition: clip-path var(--drop-dur-long) var(--drop-ease-crystal);
}
@media (prefers-reduced-motion: reduce) { .drop-bar-fill { transition: none; } }
.drop-divider { height: 1px; background: var(--drop-border); border: 0; }
.drop-hr-grad { height: 1px; border: 0; background: var(--drop-grad-line); }
.drop-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--drop-space-3); padding: var(--drop-space-16) var(--drop-space-6);
}
.drop-empty-icon {
width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
color: var(--t-primary-strong);
background: var(--t-primary-soft);
border: 1px solid var(--drop-border);
min-width: 140px; padding: var(--drop-space-2) 0;
border-radius: 8px;
}
.drop-empty-title {
font-family: var(--drop-font-display); font-weight: 600; font-size: var(--drop-text-md);
text-transform: uppercase; letter-spacing: var(--drop-tracking-wide); color: var(--drop-fg);
}
.drop-empty-text { font-size: var(--drop-text-sm); color: var(--drop-fg-subtle); max-width: 38ch; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 4 · VOCABULÁRIO GEOMÉTRICO v9.0 ║
╚═══════════════════════════════════════════════════════════════════════╝ */
/* Bordas arredondadas (substituem o antigo clip-path octógono) */
.cut { --c: 8px; border-radius: var(--c); }
.cut-xs { --c: 3px; border-radius: var(--c); }
.cut-sm { --c: 6px; border-radius: var(--c); }
.cut-md { --c: 10px; border-radius: var(--c); }
.cut-lg { --c: 16px; border-radius: var(--c); }
.cut-tr { --c: 14px; border-top-right-radius: var(--c); }
.cut-bl { --c: 14px; border-bottom-left-radius: var(--c); }
.cut-tag{ --c: 7px; border-radius: var(--c); }
/* 8 formas substitutas a redondo/losango */
.gx { width: 14px; height: 14px; display: inline-block; flex: none; }
.gx-square-cut { clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
.gx-diamond { transform: rotate(45deg); width: 11px; height: 11px; }
.gx-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gx-hexagon { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gx-chevron { clip-path: polygon(0 0, 100% 50%, 0 100%); width: 9px; height: 14px; }
.gx-drop { clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%, 35% 50%); width: 12px; height: 14px; }
.gx-kite { clip-path: polygon(50% 0, 100% 35%, 60% 100%, 0 65%); }
.gx-bar { width: 3px; height: 14px; }
/* Avatar com chanfro mínimo */
.av {
display: flex; align-items: center; justify-content: center;
font-family: var(--drop-font-display); font-weight: 600; color: #fff; flex: none;
--c: 3px;
border-radius: var(--c);
}
.av.sm { width: 28px; height: 28px; font-size: 11px; --c: 2px; }
.av.md { width: 36px; height: 36px; font-size: 13px; --c: 3px; }
.av.lg { width: 48px; height: 48px; font-size: 16px; --c: 4px; }
/* Glass surfaces — backdrop blur sobre superficie clara (brandbook v9.0) */
.drop-glass {
background: rgba(255,255,255,0.55);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--drop-border);
}
.drop-glass-dark {
background: rgba(10,10,20,0.75);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid var(--drop-border);
}
/* Hatch lateral — listra diagonal 135deg na lateral esquerda (brandbook v9.0) */
.hatch-l { position: relative; padding-left: 64px; }
.hatch-l::before {
content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 48px;
background: repeating-linear-gradient(135deg, transparent 0 6px, var(--t-primary) 6px 8px);
opacity: 0.30; pointer-events: none;
}
/* Crosshair — marcadores nos 4 cantos */
.crosshair { position: relative; }
.crosshair > .ch-tl, .crosshair > .ch-tr, .crosshair > .ch-bl, .crosshair > .ch-br {
position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.crosshair > .ch-tl { top: -1px; left: -1px; border-left: 1.5px solid var(--t-primary-strong); border-top: 1.5px solid var(--t-primary-strong); }
.crosshair > .ch-tr { top: -1px; right: -1px; border-right: 1.5px solid var(--t-primary-strong); border-top: 1.5px solid var(--t-primary-strong); }
.crosshair > .ch-bl { bottom: -1px; left: -1px; border-left: 1.5px solid var(--t-primary-strong); border-bottom: 1.5px solid var(--t-primary-strong); }
.crosshair > .ch-br { bottom: -1px; right: -1px; border-right: 1.5px solid var(--t-primary-strong); border-bottom: 1.5px solid var(--t-primary-strong); }
/* Política de alinhamento */
.al-l { text-align: left; }
.al-c { text-align: center; }
.al-r { text-align: right; }
.justify-c { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-c { align-items: center; }
.ceremonial { text-align: center; }
.stat-big { text-align: center; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ CAMADA 5 · PONTE TAILWIND → TOKENS DO TEMA ÚNICO ║
║ trafego.js e outros módulos emitem markup com classes Tailwind ║
║ hardcoded (text-zinc-*, text-drop-*, text-emerald/amber/red, ║
║ bg-white/*, border-white/*). Aqui elas derivam dos tokens --t-* do ║
║ tema escuro, garantindo contraste e identidade. Escopadas em :root ║
║ para vencer o Tailwind CDN (carregado depois) na especificidade. ║
╚═══════════════════════════════════════════════════════════════════════╝ */
:root .text-white { color: var(--t-ink); }
:root .text-zinc-100 { color: var(--t-ink); }
:root .text-zinc-200 { color: var(--t-ink); }
:root .text-zinc-300 { color: var(--t-ink-soft); }
:root .text-zinc-400 { color: var(--t-ink-muted); }
:root .text-zinc-500 { color: var(--t-ink-faint); }
:root .text-zinc-600 { color: var(--t-ink-faint); }
:root .text-drop-blue { color: var(--t-primary-strong); }
:root .text-drop-purple { color: var(--t-primary); }
:root .text-emerald-300,
:root .text-emerald-400 { color: var(--drop-success); }
:root .text-amber-300,
:root .text-amber-400 { color: var(--drop-warning); }
:root .text-red-300,
:root .text-red-400 { color: var(--drop-error); }
:root .text-pink-300,
:root .text-fuchsia-300 { color: var(--t-primary-lit); }
:root .border-white\/5 { border-color: var(--t-hairline); }
:root .border-white\/10 { border-color: var(--t-line); }
:root .border-white\/15 { border-color: var(--t-line); }
:root .border-white\/20 { border-color: var(--t-line-2); }
:root .bg-white\/5 { background-color: var(--t-hairline); }
:root .bg-white\/10 { background-color: var(--t-line); }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ ANIMAÇÕES ║
╚═══════════════════════════════════════════════════════════════════════╝ */
@keyframes drop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes drop-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes drop-spin { to { transform: rotate(360deg); } }
@keyframes drop-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes drop-shimmer { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
.drop-spinner {
width: 22px; height: 22px; flex: none;
border: 2px solid var(--drop-border-strong);
border-top-color: var(--t-primary-strong);
border-radius: 50%;
animation: drop-spin 680ms linear infinite;
}
.drop-rise-in { animation: drop-rise var(--drop-dur-long) var(--drop-ease-crystal) both; }
.drop-fade-in { animation: drop-fade var(--drop-dur-base) var(--drop-ease-out) both; }
.drop-skeleton {
background: linear-gradient(90deg, var(--drop-surface) 25%, var(--drop-surface-2) 50%, var(--drop-surface) 75%);
background-size: 220% 100%;
animation: drop-shimmer 1.5s linear infinite;
border-radius: 8px;
}
.drop-stagger > * { animation: drop-rise var(--drop-dur-long) var(--drop-ease-crystal) both; }
.drop-stagger > *:nth-child(1) { animation-delay: 30ms; }
.drop-stagger > *:nth-child(2) { animation-delay: 70ms; }
.drop-stagger > *:nth-child(3) { animation-delay: 110ms; }
.drop-stagger > *:nth-child(4) { animation-delay: 150ms; }
.drop-stagger > *:nth-child(5) { animation-delay: 190ms; }
.drop-stagger > *:nth-child(6) { animation-delay: 230ms; }
.drop-stagger > *:nth-child(7) { animation-delay: 270ms; }
.drop-stagger > *:nth-child(8) { animation-delay: 310ms; }
/* ╔═══════════════════════════════════════════════════════════════════════╗
║ UTILITÁRIOS ║
╚═══════════════════════════════════════════════════════════════════════╝ */
.drop-grad-bg { background: var(--drop-grad); }
.drop-muted { color: var(--drop-fg-muted); }
.drop-subtle { color: var(--drop-fg-subtle); }
.drop-mono { font-family: var(--drop-font-mono); font-variant-numeric: tabular-nums; }
.drop-display { font-family: var(--drop-font-display); }
.drop-impact { font-family: var(--drop-font-impact); }
.drop-uppercase { text-transform: uppercase; letter-spacing: var(--drop-tracking-wide); }
/* Acessibilidade — movimento reduzido */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}