/* Seox Visual System — Design Tokens Paleta indigo profundo: #11113C (base) + #1D1D54 (card) + #00FFC7 (acento). Identidade Seox: dark, alto contraste, único acento ativo. Light theme (experimental, hoje aplicado só em /styleguide via [data-theme="light"] no ): inverte fundo/foreground mantendo a identidade ciano. */ :root { /* ─── Background ─── */ --background: #11113C; --background-secondary: #161645; /* legado — mantém pra compat */ --surface: #1D1D54; /* legado — alias de --card */ --surface-elevated: #161645; /* legado — alias de --accent */ /* ─── Foreground / Text ─── */ --foreground: #ffffff; --foreground-secondary: #E9E9EE; /* legado — off-white sobre card */ --foreground-muted: #9b9bb9; /* legado — alias de --muted-foreground */ --foreground-subtle: #8585AD; /* texto terciário (metadados, tabelas) */ --foreground-faint: #5B5B7A; /* texto quaternário (timestamps muito leves) */ /* ─── Cards e containers ─── */ --card: #1D1D54; --card-foreground: #E9E9EE; --surface-muted: #21214D; /* pílula/destaque um tom acima de --card */ /* ─── Popover ─── */ --popover: #1D1D54; --popover-foreground: #E9E9EE; /* ─── Borders ─── */ --border: #2E2E70; --border-subtle: #161645; /* legado — borda quase invisível */ /* ─── Input ─── */ --input: #2E2E70; --input-background: #12123A; /* ─── Primary (ciano, único acento ativo) ─── */ --primary: #00FFC7; --primary-light: #7DFFE0; --primary-dark: #09091A; --primary-hover: #00CCA0; --primary-foreground: #161645; /* ─── Secondary ─── */ --secondary: #12123B; --secondary-foreground: #f0f0ff; --secondary-hover: #161645; /* ─── Muted ─── */ --muted: #161645; --muted-foreground: #9b9bb9; /* ─── Accent (hover de itens, igual a --muted intencionalmente) ─── */ --accent: #161645; --accent-foreground: #B2B2EC; --accent-strong: #3D3D82; /* purple médio — hovers, highlights */ --card-hover-border: #353599; /* border ao hover de card de cluster */ /* ─── Coverage badge (Pauta coberta / similar) ─── */ --coverage-covered-bg: #3D3D7A; --coverage-covered-foreground: #E9E9EE; --coverage-similar-bg: #FFB547; --coverage-similar-foreground: #11113C; /* ─── Pílula de ícone neutro (cards de Notícia Avulsa, etc) ─── */ --icon-pill-bg: rgba(20, 20, 66, 0.55); --icon-pill-foreground: #60608F; /* ─── Tooltip (charts Recharts, popovers densos) ─── */ --tooltip-bg: #2A2A62; /* ─── EnvIndicator (LOCAL/STAGING) ─── */ --env-local: var(--score-warning); /* amarelo no dark */ --env-staging: var(--score-good); /* cyan no dark */ /* ─── Logo Seox (cor do texto "seox" — varia por tema) ─── */ --logo-text: #FFFFFF; /* ─── Botão "Editar conteúdo" e similares (bg sutil, foreground muted) ─── */ --button-secondary-bg: #141441; /* ─── Destructive ─── */ --destructive: #FF4D6A; --destructive-foreground: #ffffff; --destructive-hover: #E63960; /* ─── Ring / Focus ─── */ --ring: #00FFC7; /* ─── Status semafórico ─── */ --score-good: #00FFC8; /* alinhado com uso real (era #00ffbf) */ --score-warning: #FFB547; /* alinhado com uso real (era #ffdd00) */ --score-poor: #FF4D6A; /* alinhado com uso real (era #ff4d79) */ --score-info: #5B8DEF; /* azul de info / alertas */ --info: #5B8DEF; /* alias semântico de --score-info */ --status-waiting: var(--primary-light); /* ─── Tab pill count (badge dentro de tab ativa) ─── */ --tab-count-active-bg: #14e3b5; /* ─── Botão "Rejeitar / Descartar" (ação secundária com tom de aviso) ─── */ --btn-reject-bg: #8c000021; --btn-reject-border: #b6737347; /* ─── Banners do Loop de Aprendizado (topo do /dashboard) ─────────────── Dark: bg flat var(--card) (#1d1d54), borda colorida discreta, ícone colorido. CTAs: Info usa primary (cyan vibrante), Warning/Critical mantêm a cor semafórica. Light: bg tinted /10 do semáforo (aprovado pela paleta atual). */ --banner-info-bg: var(--card); --banner-info-bg-hover: color-mix(in srgb, var(--info) 10%, var(--card)); --banner-info-border: color-mix(in srgb, var(--info) 40%, transparent); --banner-info-cta-bg: var(--primary); --banner-info-cta-fg: var(--primary-foreground); --banner-warning-bg: var(--card); --banner-warning-bg-hover: color-mix(in srgb, var(--score-warning) 10%, var(--card)); --banner-warning-border: color-mix(in srgb, var(--score-warning) 40%, transparent); --banner-warning-cta-bg: var(--score-warning); --banner-warning-cta-fg: var(--coverage-similar-foreground); --banner-critical-bg: var(--card); --banner-critical-bg-hover: color-mix(in srgb, var(--score-poor) 10%, var(--card)); --banner-critical-border: color-mix(in srgb, var(--score-poor) 40%, transparent); --banner-critical-cta-bg: var(--score-poor); --banner-critical-cta-fg: #FFFFFF; /* ─── Overlay (backdrops, scrims) ─── */ --overlay: #000000; /* ─── Sidebar (família do card, com acento próprio) ─── */ --sidebar: var(--card); --sidebar-foreground: #E9E9EE; --sidebar-primary: #00FFC7; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #161645; --sidebar-accent-foreground: #B2B2EC; --sidebar-border: #2E2E70; --sidebar-ring: #00FFC7; /* ─── Radius (base 12px) ─── */ --radius: 0.75rem; /* ─── Shadows ─── */ --shadow-card: 0 4px 16px 0 rgba(0, 0, 0, 0.05); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2); --shadow-auth: 0 40px 40px 0 rgba(0, 0, 0, 0.25); /* ─── Gradient base do body ─── */ --gradient-body: linear-gradient(180deg, #16164A 0%, #111130 100%); /* ─── Card hover shadow (varia por tema) ─── */ --card-hover-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6); /* ─── Tipografia ─── */ --font-sans: 'Nunito Sans Variable', system-ui, -apple-system, sans-serif; --font-heading: var(--font-sans); --font-mono: ui-monospace, 'SF Mono', 'Fira Code', monospace; } /* ────────────────────────────────────────────────────────────────────────── Light theme (EXPERIMENTAL — aplica via [data-theme="light"] no ) Atualmente só ativo em /styleguide. Quando expandir pro app, atenção em: - Imagens com transparência que assumiam fundo escuro - Sombras (precisam ser mais escuras pra registrar em fundo claro) - SVGs com fill currentColor (vão funcionar; com cor explícita não) ────────────────────────────────────────────────────────────────────────── */ [data-theme='light'] { /* ─── Background ─── */ --background: #F0F0F8; --background-secondary: #ECECF5; --surface: #FFFFFF; --surface-elevated: #FFFFFF; /* ─── Foreground / Text ─── */ --foreground: #11113C; --foreground-secondary: #2E2E70; --foreground-muted: #6B6B8C; --foreground-subtle: #8585AD; --foreground-faint: #ACACBF; /* ─── Cards e containers ─── */ --card: #FFFFFF; --card-foreground: #11113C; --surface-muted: #F0F0F7; /* ─── Popover ─── */ --popover: #FFFFFF; --popover-foreground: #11113C; /* ─── Borders ─── */ --border: #DCDCE9; --border-subtle: #ECECF5; /* ─── Input ─── */ --input: #DCDCE9; --input-background: #FFFFFF; /* ─── Primary (indigo escuro em light pra acento de tabs/chips/buttons) ─── */ --primary: #34308A; --primary-light: #4F4AAB; --primary-dark: #2A266F; --primary-hover: #2A266F; --primary-foreground: #FFFFFF; /* ─── Secondary ─── */ --secondary: #ECECF5; --secondary-foreground: #11113C; --secondary-hover: #DCDCE9; /* ─── Muted ─── */ --muted: #F0F0F7; --muted-foreground: #6B6B8C; /* ─── Accent ─── */ --accent: #F0F0F7; --accent-foreground: #2E2E70; --accent-strong: #B2B2EC; --card-hover-border: #B2B2EC; /* ─── Coverage badge (mesma lógica, ajustada pra light) ─── */ --coverage-covered-bg: #DCDCE9; --coverage-covered-foreground: #2E2E70; --coverage-similar-bg: #FFB547; --coverage-similar-foreground: #11113C; /* ─── Pílula de ícone neutro ─── */ --icon-pill-bg: rgba(178, 178, 236, 0.30); --icon-pill-foreground: #6B6B8C; /* ─── Tooltip (claro pra contraste sobre cards brancos) ─── */ --tooltip-bg: #FFFFFF; /* ─── Destructive ─── */ --destructive: #E63960; --destructive-foreground: #FFFFFF; --destructive-hover: #C41E47; /* ─── Status semafórico (versões mais saturadas pra contraste) ─── */ --score-good: #00B894; --score-warning: #FFB547; --score-poor: #E63960; --score-info: #2E5BD7; --info: #2E5BD7; /* ─── Tab pill count (badge dentro de tab ativa) ─── */ --tab-count-active-bg: #5854aa; /* ─── Botão "Rejeitar / Descartar" ─── */ --btn-reject-bg: #f9808026; --btn-reject-border: #b673737a; /* ─── Banners do Loop de Aprendizado — light (tinted /10, aprovado) ─── */ --banner-info-bg: color-mix(in srgb, var(--info) 10%, transparent); --banner-info-bg-hover: color-mix(in srgb, var(--info) 15%, transparent); --banner-info-cta-bg: var(--info); --banner-info-cta-fg: #FFFFFF; --banner-warning-bg: color-mix(in srgb, var(--score-warning) 10%, transparent); --banner-warning-bg-hover: color-mix(in srgb, var(--score-warning) 15%, transparent); --banner-critical-bg: color-mix(in srgb, var(--score-poor) 10%, transparent); /* ─── Sidebar (light) ─── */ --sidebar: #FFFFFF; --sidebar-foreground: #11113C; --sidebar-primary: #34308A; --sidebar-primary-foreground: #11113C; --sidebar-accent: #F0F0F7; --sidebar-accent-foreground: #2E2E70; --sidebar-border: #DCDCE9; --sidebar-ring: #34308A; /* ─── Shadows mais marcadas pra registrar em fundo claro ─── */ --shadow-card: 0 4px 16px 0 rgba(17, 17, 60, 0.08); --shadow-dropdown: 0 8px 24px rgba(17, 17, 60, 0.18), 0 8px 16px rgba(17, 17, 60, 0.10); --shadow-auth: 0 40px 40px 0 rgba(17, 17, 60, 0.15); /* ─── Body claro: flat #F0F0F8 ─── */ --gradient-body: #F0F0F8; /* ─── Card hover shadow no light (mais sutil) ─── */ --card-hover-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.2); /* ─── EnvIndicator (override pra contraste em light) ─── */ --env-local: #E63960; /* rosa em light */ --env-staging: var(--score-good); /* mantém #00B894 (cyan light) */ /* ─── Logo Seox em light (texto escuro) ─── */ --logo-text: #11113C; /* ─── Botão "Editar conteúdo" em light (bg cinza claro) ─── */ --button-secondary-bg: #F0F0F7; } /* ════════════════════════════════════════════════════════════════════════ BRIDGE CSS — sobrescreve utilities Tailwind hardcoded p/ usar tokens. Permite light/dark themes consistentes nas ~54 telas do painel sem precisar editar cada template. Carregado APOS o tailwind.css (ordem no base.html) — vence por source order, sem !important. ════════════════════════════════════════════════════════════════════════ */ /* ─── Backgrounds neutros ─── */ .bg-white { background-color: var(--card) !important; color: var(--card-foreground) !important; } .bg-gray-50 { background-color: var(--background) !important; } .bg-gray-100 { background-color: var(--surface-muted) !important; } .bg-gray-200 { background-color: var(--accent) !important; } .bg-gray-300 { background-color: var(--border) !important; } .bg-gray-400 { background-color: var(--foreground-faint) !important; } /* bg-gray-700/800/900 mantem cores dark do Tailwind — usados em portal_fullscreen.html intencionalmente */ /* ─── Hover backgrounds neutros ─── */ .hover\:bg-gray-50:hover { background-color: var(--surface-muted) !important; } .hover\:bg-gray-100:hover { background-color: var(--accent) !important; } /* ─── Foregrounds ─── */ .text-gray-300 { color: var(--foreground-faint) !important; } .text-gray-400 { color: var(--foreground-subtle) !important; } .text-gray-500 { color: var(--foreground-muted) !important; } .text-gray-600 { color: var(--foreground-secondary) !important; } .text-gray-700 { color: var(--foreground-secondary) !important; } .text-gray-800 { color: var(--foreground) !important; } .text-gray-900 { color: var(--foreground) !important; } .hover\:text-gray-700:hover { color: var(--foreground) !important; } .hover\:text-gray-800:hover { color: var(--foreground) !important; } .hover\:text-gray-900:hover { color: var(--foreground) !important; } /* ─── Borders neutras ─── */ .border-gray-100 { border-color: var(--border) !important; } .border-gray-200 { border-color: var(--border) !important; } .border-gray-300 { border-color: var(--border) !important; } .divide-gray-100 > * + * { border-color: var(--border) !important; } .divide-gray-200 > * + * { border-color: var(--border) !important; } /* ─── Paleta seox (indigo) ─── */ .bg-seox-50 { background-color: var(--surface-muted) !important; } .bg-seox-100 { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; } .bg-seox-600 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .bg-seox-700 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .bg-seox-800 { background-color: var(--primary-hover) !important; color: var(--primary-foreground) !important; } .bg-seox-900 { background-color: var(--primary-hover) !important; color: var(--primary-foreground) !important; } .text-seox-500 { color: var(--primary) !important; } .text-seox-600 { color: var(--primary) !important; } .text-seox-700 { color: var(--primary) !important; } .text-seox-800 { color: var(--primary) !important; } .border-seox-100 { border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important; } .border-seox-200 { border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important; } .border-seox-400 { border-color: var(--primary) !important; } .border-seox-500 { border-color: var(--primary) !important; } .hover\:bg-seox-50:hover { background-color: var(--surface-muted) !important; } .hover\:bg-seox-100:hover { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; } .hover\:bg-seox-700:hover { background-color: var(--primary-hover) !important; } .hover\:text-seox-600:hover { color: var(--primary) !important; } .hover\:text-seox-700:hover { color: var(--primary-hover) !important; } .hover\:text-seox-800:hover { color: var(--primary-hover) !important; } .hover\:border-seox-200:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important; } .hover\:border-seox-400:hover { border-color: var(--primary) !important; } .focus\:ring-seox-400:focus { --tw-ring-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) !important; } .focus\:ring-seox-500:focus { --tw-ring-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) !important; } .focus\:border-seox-400:focus { border-color: var(--primary) !important; } .focus\:border-seox-500:focus { border-color: var(--primary) !important; } /* ─── Semaforo: red / amber / yellow / green / blue ─── */ /* Red = destructive / poor */ .bg-red-50 { background-color: color-mix(in srgb, var(--destructive) 10%, transparent) !important; } .bg-red-100 { background-color: color-mix(in srgb, var(--destructive) 18%, transparent) !important; } .bg-red-500 { background-color: var(--destructive) !important; } .bg-red-600 { background-color: var(--destructive) !important; } .text-red-500 { color: var(--destructive) !important; } .text-red-600 { color: var(--destructive) !important; } .text-red-700 { color: var(--destructive) !important; } .text-red-800 { color: var(--destructive) !important; } .text-red-900 { color: var(--destructive) !important; } .border-red-100 { border-color: color-mix(in srgb, var(--destructive) 30%, transparent) !important; } .border-red-200 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent) !important; } .hover\:bg-red-600:hover { background-color: var(--destructive-hover) !important; } .hover\:text-red-600:hover { color: var(--destructive) !important; } /* Amber/Yellow = warning */ .bg-amber-50 { background-color: color-mix(in srgb, var(--score-warning) 12%, transparent) !important; } .bg-amber-100 { background-color: color-mix(in srgb, var(--score-warning) 18%, transparent) !important; } .bg-amber-500 { background-color: var(--score-warning) !important; color: var(--coverage-similar-foreground) !important; } .bg-amber-600 { background-color: var(--score-warning) !important; color: var(--coverage-similar-foreground) !important; } .text-amber-600 { color: var(--score-warning) !important; } .text-amber-700 { color: var(--score-warning) !important; } .text-amber-800 { color: var(--score-warning) !important; } .text-amber-900 { color: var(--coverage-similar-foreground) !important; } .border-amber-100 { border-color: color-mix(in srgb, var(--score-warning) 30%, transparent) !important; } .border-amber-200 { border-color: color-mix(in srgb, var(--score-warning) 40%, transparent) !important; } .border-amber-300 { border-color: color-mix(in srgb, var(--score-warning) 50%, transparent) !important; } .hover\:bg-amber-600:hover { background-color: color-mix(in srgb, var(--score-warning) 85%, black) !important; } .bg-yellow-50 { background-color: color-mix(in srgb, var(--score-warning) 12%, transparent) !important; } .bg-yellow-100 { background-color: color-mix(in srgb, var(--score-warning) 18%, transparent) !important; } .text-yellow-700 { color: var(--score-warning) !important; } .text-yellow-800 { color: var(--score-warning) !important; } .border-yellow-100 { border-color: color-mix(in srgb, var(--score-warning) 30%, transparent) !important; } .border-yellow-200 { border-color: color-mix(in srgb, var(--score-warning) 40%, transparent) !important; } /* Green = good / success */ .bg-green-50 { background-color: color-mix(in srgb, var(--score-good) 12%, transparent) !important; } .bg-green-100 { background-color: color-mix(in srgb, var(--score-good) 18%, transparent) !important; } .bg-green-500 { background-color: var(--score-good) !important; } .bg-green-600 { background-color: var(--score-good) !important; } .text-green-500 { color: var(--score-good) !important; } .text-green-600 { color: var(--score-good) !important; } .text-green-700 { color: var(--score-good) !important; } .text-green-800 { color: var(--score-good) !important; } .border-green-100 { border-color: color-mix(in srgb, var(--score-good) 30%, transparent) !important; } .border-green-200 { border-color: color-mix(in srgb, var(--score-good) 40%, transparent) !important; } .bg-emerald-50 { background-color: color-mix(in srgb, var(--score-good) 12%, transparent) !important; } .bg-emerald-100 { background-color: color-mix(in srgb, var(--score-good) 18%, transparent) !important; } .text-emerald-600 { color: var(--score-good) !important; } .text-emerald-700 { color: var(--score-good) !important; } /* Blue = info */ .bg-blue-50 { background-color: color-mix(in srgb, var(--info) 12%, transparent) !important; } .bg-blue-100 { background-color: color-mix(in srgb, var(--info) 18%, transparent) !important; } .text-blue-500 { color: var(--info) !important; } .text-blue-600 { color: var(--info) !important; } .text-blue-700 { color: var(--info) !important; } .text-blue-800 { color: var(--info) !important; } .border-blue-100 { border-color: color-mix(in srgb, var(--info) 30%, transparent) !important; } .border-blue-200 { border-color: color-mix(in srgb, var(--info) 40%, transparent) !important; } .bg-indigo-50 { background-color: var(--surface-muted) !important; } .bg-indigo-100 { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; } .text-indigo-600 { color: var(--primary) !important; } .text-indigo-700 { color: var(--primary) !important; } /* Purple/Violet (portal-v2 herda) */ .bg-purple-50 { background-color: var(--surface-muted) !important; } .bg-purple-100 { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; } .bg-purple-600 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .bg-purple-700 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .text-purple-600 { color: var(--primary) !important; } .text-purple-700 { color: var(--primary) !important; } .bg-violet-50 { background-color: var(--surface-muted) !important; } .bg-violet-100 { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; } .text-violet-600 { color: var(--primary) !important; } .text-violet-700 { color: var(--primary) !important; } /* Stone (login_seox tem texto stone) */ .text-stone-600 { color: var(--foreground-muted) !important; } .text-stone-700 { color: var(--foreground-secondary) !important; } /* ─── Shadows do Tailwind config customizadas pra usar shadow-card token ─── */ .shadow-card { box-shadow: var(--shadow-card) !important; } .shadow-soft { box-shadow: var(--shadow-card) !important; } .hover\:shadow-card:hover { box-shadow: var(--card-hover-shadow) !important; } /* ─── Headers font-display (Figtree) — destacar em primary no h1 ─── */ .font-display { font-family: 'Figtree', system-ui, sans-serif !important; } /* ─── Inputs com cores via tokens (sobre input default Tailwind) ─── */ input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']), textarea, select { background-color: var(--input-background) !important; border-color: var(--input) !important; color: var(--foreground) !important; } input:focus, textarea:focus, select:focus { outline-color: var(--primary) !important; } /* ─── Beta banner override (atualmente bg-amber-100) ─── */ /* mantemos visual amarelo do banner beta — eh proposito; classes amber ja foram remapped */ /* ─── Code blocks (admin_docs, partials) ─── */ code, pre { background-color: var(--input-background) !important; color: var(--accent-foreground) !important; } pre code { background-color: transparent !important; } /* ─── Sidebar nav-active (portal_v2) sobreposto pra tokens ─── */ .nav-active { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)) !important; color: var(--primary) !important; font-weight: 600 !important; } .nav-active::before { background-color: var(--primary) !important; } /* ─── Drawer backdrop (portal_v2) ─── */ .drawer-backdrop { background-color: color-mix(in srgb, var(--background) 70%, transparent) !important; backdrop-filter: blur(2px) !important; } /* ─── Row clickable hover (portal_v2 tabelas) ─── */ .row-clickable:hover { background-color: var(--surface-muted) !important; } /* ─── Wizard step (portal_v2 pedidos-wizard) ─── */ .wizard-step-active .step-circle { background-color: var(--primary) !important; color: var(--primary-foreground) !important; border-color: var(--primary) !important; } .wizard-step-active .step-label { color: var(--primary) !important; font-weight: 600 !important; } .wizard-step-done .step-circle { background-color: var(--score-good) !important; color: var(--primary-foreground) !important; border-color: var(--score-good) !important; } .wizard-step-done .step-label { color: var(--score-good) !important; } /* ─── Gradient card (portal_v2) ─── */ .gradient-card { background: linear-gradient(135deg, var(--card) 0%, var(--surface-muted) 100%) !important; } /* ─── Sidebar logo wordmark (portal_v2 — substituido pelo logo SVG, mantem fallback) ─── */ .seox-logo { background: linear-gradient(135deg, var(--primary) 0%, var(--accent-strong) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; } /* ─── Scrollbar (override do portal_v2) ─── */ ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: var(--surface-muted) !important; } ::-webkit-scrollbar-thumb { background: var(--border) !important; border-radius: 5px !important; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-strong) !important; } /* ════════════════════════════════════════════════════════════════════════ BRIDGE PORTAL V2 — usa Slate em vez de Gray ════════════════════════════════════════════════════════════════════════ */ /* Slate backgrounds */ .bg-slate-50 { background-color: var(--background) !important; } .bg-slate-100 { background-color: var(--surface-muted) !important; } .bg-slate-200 { background-color: var(--accent) !important; } .bg-slate-300 { background-color: var(--border) !important; } .bg-slate-800 { background-color: var(--foreground) !important; color: var(--background) !important; } .bg-slate-900 { background-color: var(--foreground) !important; color: var(--background) !important; } .hover\:bg-slate-50:hover { background-color: var(--surface-muted) !important; } .hover\:bg-slate-100:hover { background-color: var(--accent) !important; } .hover\:bg-slate-200:hover { background-color: var(--border) !important; } /* Slate foregrounds */ .text-slate-300 { color: var(--foreground-faint) !important; } .text-slate-400 { color: var(--foreground-subtle) !important; } .text-slate-500 { color: var(--foreground-muted) !important; } .text-slate-600 { color: var(--foreground-secondary) !important; } .text-slate-700 { color: var(--foreground-secondary) !important; } .text-slate-800 { color: var(--foreground) !important; } .text-slate-900 { color: var(--foreground) !important; } .hover\:text-slate-700:hover { color: var(--foreground) !important; } .hover\:text-slate-800:hover { color: var(--foreground) !important; } .hover\:text-slate-900:hover { color: var(--foreground) !important; } /* Slate borders */ .border-slate-100 { border-color: var(--border) !important; } .border-slate-200 { border-color: var(--border) !important; } .border-slate-300 { border-color: var(--border) !important; } .divide-slate-100 > * + * { border-color: var(--border) !important; } .divide-slate-200 > * + * { border-color: var(--border) !important; } /* Stone (alguns admin templates) */ .text-stone-500 { color: var(--foreground-muted) !important; } .text-stone-800 { color: var(--foreground) !important; } .bg-stone-50 { background-color: var(--background) !important; } .border-stone-200 { border-color: var(--border) !important; } /* Zinc (algumas tabelas usam) */ .text-zinc-500 { color: var(--foreground-muted) !important; } .text-zinc-700 { color: var(--foreground-secondary) !important; } .bg-zinc-50 { background-color: var(--background) !important; } .border-zinc-200 { border-color: var(--border) !important; } /* ──────────────────────────────────────────────────────────── Gradient tokens (portal_v2 usa from-purple-600 to-blue-600) Substituir pela paleta indigo do design system. ──────────────────────────────────────────────────────────── */ .from-purple-600 { --tw-gradient-from: var(--primary) !important; --tw-gradient-to: rgba(0,0,0,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-purple-500 { --tw-gradient-from: var(--primary) !important; } .to-blue-600 { --tw-gradient-to: var(--accent-strong) !important; } .to-blue-500 { --tw-gradient-to: var(--accent-strong) !important; } .from-blue-600 { --tw-gradient-from: var(--accent-strong) !important; } .from-violet-600 { --tw-gradient-from: var(--primary) !important; } .to-violet-600 { --tw-gradient-to: var(--primary) !important; } /* Variants pra hover */ .hover\:from-purple-700:hover { --tw-gradient-from: var(--primary-hover) !important; } .hover\:to-blue-700:hover { --tw-gradient-to: var(--accent-strong) !important; } /* ──────────────────────────────────────────────────────────── Body do portal_v2 — usa Inter font. Forca o body do portal_v2 a usar Nunito Sans pra consistencia com o resto do painel. ──────────────────────────────────────────────────────────── */ body.bg-slate-50, body.bg-gray-50 { font-family: var(--font-sans) !important; background: var(--gradient-body) !important; color: var(--foreground) !important; } /* ════════════════════════════════════════════════════════════════════════ BRIDGE — variantes 800/900 + paleta completa (emerald/orange/rose/sky) Cobertura final pra Tailwind CDN no portal-v2. ════════════════════════════════════════════════════════════════════════ */ /* Emerald (alias de green = score-good) */ .bg-emerald-50 { background-color: color-mix(in srgb, var(--score-good) 12%, transparent) !important; } .bg-emerald-100 { background-color: color-mix(in srgb, var(--score-good) 18%, transparent) !important; } .bg-emerald-500 { background-color: var(--score-good) !important; } .bg-emerald-600 { background-color: var(--score-good) !important; color: var(--primary-foreground) !important; } .text-emerald-500 { color: var(--score-good) !important; } .text-emerald-600 { color: var(--score-good) !important; } .text-emerald-700 { color: var(--score-good) !important; } .text-emerald-800 { color: var(--score-good) !important; } .text-emerald-900 { color: var(--score-good) !important; } .border-emerald-100 { border-color: color-mix(in srgb, var(--score-good) 30%, transparent) !important; } .border-emerald-200 { border-color: color-mix(in srgb, var(--score-good) 40%, transparent) !important; } .border-emerald-300 { border-color: color-mix(in srgb, var(--score-good) 50%, transparent) !important; } /* Rose (alias de red = destructive/poor) */ .bg-rose-50 { background-color: color-mix(in srgb, var(--destructive) 10%, transparent) !important; } .bg-rose-100 { background-color: color-mix(in srgb, var(--destructive) 18%, transparent) !important; } .bg-rose-500 { background-color: var(--destructive) !important; } .bg-rose-600 { background-color: var(--destructive) !important; color: #fff !important; } .text-rose-500 { color: var(--destructive) !important; } .text-rose-600 { color: var(--destructive) !important; } .text-rose-700 { color: var(--destructive) !important; } .text-rose-800 { color: var(--destructive) !important; } .text-rose-900 { color: var(--destructive) !important; } .border-rose-100 { border-color: color-mix(in srgb, var(--destructive) 30%, transparent) !important; } .border-rose-200 { border-color: color-mix(in srgb, var(--destructive) 40%, transparent) !important; } /* Orange (alias de amber = warning) */ .bg-orange-50 { background-color: color-mix(in srgb, var(--score-warning) 12%, transparent) !important; } .bg-orange-100 { background-color: color-mix(in srgb, var(--score-warning) 18%, transparent) !important; } .bg-orange-500 { background-color: var(--score-warning) !important; } .bg-orange-600 { background-color: var(--score-warning) !important; color: var(--coverage-similar-foreground) !important; } .text-orange-500 { color: var(--score-warning) !important; } .text-orange-600 { color: var(--score-warning) !important; } .text-orange-700 { color: var(--score-warning) !important; } .text-orange-800 { color: var(--score-warning) !important; } .text-orange-900 { color: var(--score-warning) !important; } .border-orange-100 { border-color: color-mix(in srgb, var(--score-warning) 30%, transparent) !important; } .border-orange-200 { border-color: color-mix(in srgb, var(--score-warning) 40%, transparent) !important; } /* Sky (alias de blue = info) */ .bg-sky-50 { background-color: color-mix(in srgb, var(--info) 12%, transparent) !important; } .bg-sky-100 { background-color: color-mix(in srgb, var(--info) 18%, transparent) !important; } .text-sky-500 { color: var(--info) !important; } .text-sky-600 { color: var(--info) !important; } .text-sky-700 { color: var(--info) !important; } .text-sky-800 { color: var(--info) !important; } .border-sky-100 { border-color: color-mix(in srgb, var(--info) 30%, transparent) !important; } .border-sky-200 { border-color: color-mix(in srgb, var(--info) 40%, transparent) !important; } /* Cyan / Teal (semelhantes a primary) */ .bg-cyan-50 { background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important; } .bg-cyan-100 { background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important; } .text-cyan-600 { color: var(--primary) !important; } .text-cyan-700 { color: var(--primary) !important; } .bg-teal-50 { background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important; } .bg-teal-100 { background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important; } .text-teal-600 { color: var(--primary) !important; } .text-teal-700 { color: var(--primary) !important; } /* Variantes 800/900 das paletas ja cobertas (estavam faltando) */ .text-red-900 { color: var(--destructive) !important; } .text-amber-900 { color: var(--score-warning) !important; } .text-yellow-900 { color: var(--score-warning) !important; } .text-green-900 { color: var(--score-good) !important; } .text-blue-900 { color: var(--info) !important; } .text-indigo-800 { color: var(--primary) !important; } .text-indigo-900 { color: var(--primary) !important; } .text-purple-800 { color: var(--primary) !important; } .text-purple-900 { color: var(--primary) !important; } .text-violet-800 { color: var(--primary) !important; } .text-violet-900 { color: var(--primary) !important; } /* Pink / Fuchsia (raros) */ .bg-pink-50 { background-color: color-mix(in srgb, var(--destructive) 10%, transparent) !important; } .bg-pink-100 { background-color: color-mix(in srgb, var(--destructive) 18%, transparent) !important; } .text-pink-600 { color: var(--destructive) !important; } .text-pink-700 { color: var(--destructive) !important; } /* Neutral / extras */ .text-neutral-500 { color: var(--foreground-muted) !important; } .text-neutral-700 { color: var(--foreground-secondary) !important; } .text-neutral-900 { color: var(--foreground) !important; } .text-zinc-900 { color: var(--foreground) !important; } .text-stone-900 { color: var(--foreground) !important; } /* Lime (highlights raros) */ .bg-lime-100 { background-color: color-mix(in srgb, var(--score-good) 18%, transparent) !important; } .text-lime-700 { color: var(--score-good) !important; } /* ════════════════════════════════════════════════════════════════════════ THEME TOGGLE — botao global de mudanca de tema (cliente + SEOX) Markup esperado: JS em /static/seox-theme.js cuida do click handler. ════════════════════════════════════════════════════════════════════════ */ .seox-theme-toggle { width: 34px !important; height: 34px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--card) !important; color: var(--foreground-muted) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all .15s !important; padding: 0 !important; flex-shrink: 0 !important; } .seox-theme-toggle:hover { color: var(--primary) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important; } .seox-theme-toggle svg { width: 15px !important; height: 15px !important; } .seox-theme-toggle .sun, .seox-theme-toggle .moon { display: none !important; } [data-theme='light'] .seox-theme-toggle .sun { display: block !important; } :root:not([data-theme='light']) .seox-theme-toggle .moon { display: block !important; } /* ════════════════════════════════════════════════════════════════════════ BRIDGE — paleta 'accent' (cyan custom do tailwind config) + variantes 900, amber/yellow/red extras (admin_*.html / dashboard_home) ════════════════════════════════════════════════════════════════════════ */ /* Accent (paleta cyan custom — accent.100 / accent.600 do tailwind config) */ .bg-accent-50 { background-color: color-mix(in srgb, var(--primary) 8%, var(--card)) !important; } .bg-accent-100 { background-color: color-mix(in srgb, var(--primary) 15%, var(--card)) !important; } .bg-accent-500 { background-color: var(--primary) !important; } .bg-accent-600 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .text-accent-500 { color: var(--primary) !important; } .text-accent-600 { color: var(--primary) !important; } .text-accent-700 { color: var(--primary-hover) !important; } .border-accent-100 { border-color: color-mix(in srgb, var(--primary) 25%, transparent) !important; } .border-accent-200 { border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important; } .border-accent-300 { border-color: color-mix(in srgb, var(--primary) 50%, transparent) !important; } .border-accent-600 { border-color: var(--primary) !important; } .hover\:bg-accent-100:hover { background-color: color-mix(in srgb, var(--primary) 15%, var(--card)) !important; } .hover\:text-accent-600:hover { color: var(--primary) !important; } .hover\:border-accent-600:hover { border-color: var(--primary) !important; } .focus\:border-accent-600:focus { border-color: var(--primary) !important; } .focus\:ring-accent-600:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) !important; } /* Variantes 900 da paleta seox */ .bg-seox-900 { background-color: var(--primary-hover) !important; color: var(--primary-foreground) !important; } .text-seox-900 { color: var(--primary) !important; } .border-seox-600 { border-color: var(--primary) !important; } /* Amber/Yellow extras */ .bg-amber-200 { background-color: color-mix(in srgb, var(--score-warning) 28%, transparent) !important; } .bg-amber-300 { background-color: color-mix(in srgb, var(--score-warning) 45%, transparent) !important; } .bg-yellow-200 { background-color: color-mix(in srgb, var(--score-warning) 28%, transparent) !important; } .bg-yellow-300 { background-color: color-mix(in srgb, var(--score-warning) 45%, transparent) !important; } .bg-yellow-500 { background-color: var(--score-warning) !important; } .bg-yellow-600 { background-color: var(--score-warning) !important; color: var(--coverage-similar-foreground) !important; } /* Red border extras */ .border-red-300 { border-color: color-mix(in srgb, var(--destructive) 50%, transparent) !important; } .border-red-400 { border-color: color-mix(in srgb, var(--destructive) 60%, transparent) !important; } .border-red-500 { border-color: var(--destructive) !important; } .bg-red-200 { background-color: color-mix(in srgb, var(--destructive) 28%, transparent) !important; } .bg-red-300 { background-color: color-mix(in srgb, var(--destructive) 45%, transparent) !important; } /* Green/Emerald extras */ .bg-green-200 { background-color: color-mix(in srgb, var(--score-good) 28%, transparent) !important; } .border-green-300 { border-color: color-mix(in srgb, var(--score-good) 50%, transparent) !important; } .bg-emerald-200 { background-color: color-mix(in srgb, var(--score-good) 28%, transparent) !important; } /* Indigo bg variants */ .bg-indigo-200 { background-color: color-mix(in srgb, var(--primary) 25%, transparent) !important; } .bg-indigo-600 { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } .bg-indigo-700 { background-color: var(--primary-hover) !important; color: var(--primary-foreground) !important; } .bg-indigo-800 { background-color: var(--primary-hover) !important; color: var(--primary-foreground) !important; } /* Slate extras */ .bg-slate-400 { background-color: var(--foreground-faint) !important; } .bg-slate-500 { background-color: var(--foreground-muted) !important; } .bg-slate-600 { background-color: var(--foreground-secondary) !important; } /* ════════════════════════════════════════════════════════════════════════ MODAIS (portal-v2 pedidos/criativos/line items) .seox-modal-overlay + .seox-modal-card sao definidos inline em pedidos-detalhe.html com `background: #fff` hardcoded. Override aqui com tokens pra respeitar dark/light. ════════════════════════════════════════════════════════════════════════ */ .seox-modal-overlay { background: color-mix(in srgb, var(--background) 60%, transparent) !important; backdrop-filter: blur(2px); } .seox-modal-card { background: var(--card) !important; color: var(--card-foreground) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-dropdown, 0 25px 50px -12px rgba(0,0,0,.5)) !important; } /* Inputs dentro de modais — ja sao cobertos pelo seletor generico de inputs, mas garantimos consistencia explicita (alguns inputs no modal usam classes Tailwind sem bg explicito, dependem da bridge generica). */ .seox-modal-card input[type='text'], .seox-modal-card input[type='number'], .seox-modal-card input[type='date'], .seox-modal-card input[type='email'], .seox-modal-card input[type='url'], .seox-modal-card input[type='password'], .seox-modal-card textarea, .seox-modal-card select { background-color: var(--input-background) !important; border-color: var(--input) !important; color: var(--foreground) !important; } .seox-modal-card input:focus, .seox-modal-card textarea:focus, .seox-modal-card select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important; outline: none !important; } /* Botoes secundarios dentro do modal (Cancelar) — herdam border+hover dos tokens, mas o bg pode vir branco demais; garantir contraste */ .seox-modal-card button[type='button'].border { background: transparent !important; }