/* ── Kaizon Company · Dashboard Layout — padrão 1BoraJogar ─────── Depende de _shared/brand.css (tokens --kz-*), que deve vir ANTES deste arquivo no . Os var() têm fallback pro hex da marca, então o shell não desmonta se o brand.css falhar. */ :root { --da-w: 220px; --da-th: 52px; --da-radius: .625rem; color-scheme: light; /* Acento da marca em RGB, pro rgba() dos glows/hovers. */ --da-brand-rgb: 220,38,38; /* ── TEMA CLARO (default) ──────────────────────────────────── */ --da-bg: #f4f4f5; --da-sb: #ffffff; --da-sf: #ffffff; --da-bd: rgba(10,10,10,.10); --da-tx: var(--kz-preto, #0A0A0A); --da-mt: rgba(10,10,10,.55); --da-brand: var(--kz-vermelho, #DC2626); --da-brand2: #B91C1C; /* variação escura — texto pequeno em fundo claro */ --da-blur: rgba(244,244,245,.85); --da-nav: rgba(10,10,10,.62); --da-nav-bg: rgba(10,10,10,.055); --da-nav-tx: var(--kz-preto, #0A0A0A); --da-sct: var(--kz-cinza, #6B7280); --da-hover: rgba(10,10,10,.055); } :root.dark { color-scheme: dark; /* ── TEMA ESCURO ───────────────────────────────────────────── */ --da-bg: var(--kz-preto, #0A0A0A); --da-sb: #121214; --da-sf: rgba(255,255,255,.03); --da-bd: rgba(255,255,255,.07); --da-tx: #F4F4F5; --da-mt: rgba(255,255,255,.45); --da-brand: var(--kz-vermelho, #DC2626); --da-brand2: #EF4444; /* variação clara — contraste de texto no escuro */ --da-blur: rgba(10,10,10,.95); --da-nav: rgba(255,255,255,.55); --da-nav-bg: rgba(255,255,255,.06); --da-nav-tx: rgba(255,255,255,.9); --da-sct: var(--kz-cinza, #6B7280); --da-hover: rgba(255,255,255,.06); } /* ── BASE ────────────────────────────────────────────────────── */ body.da-page { margin: 0; padding: 0; background: var(--da-bg); color: var(--da-tx); font-family: var(--kz-font-corpo, 'DM Sans', system-ui, sans-serif); overflow-x: hidden; } /* ── SHELL ───────────────────────────────────────────────────── */ .da-shell { display: flex; min-height: 100vh; } /* ── SIDEBAR ─────────────────────────────────────────────────── */ .da-sidebar { width: var(--da-w); background: var(--da-sb); border-right: 1px solid var(--da-bd); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 200; overflow-y: auto; overflow-x: hidden; transition: transform .25s cubic-bezier(.4,0,.2,1); } .da-sidebar::-webkit-scrollbar { width: 0; } /* Logo area */ .da-sidebar-logo { padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--da-bd); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .da-logo-row { display: flex; align-items: center; gap: .55rem; } /* Símbolo ∧ da Kaizon sobre o preto da marca — o fundo preto é fixo de propósito: as pernas do chevron são brancas e sumiriam no tema claro. */ .da-logo-icon { width: 32px; height: 32px; background: var(--kz-preto, #0A0A0A); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 5px; } .da-logo-icon svg { width: 100%; height: 100%; display: block; } .da-logo-name { font-family: var(--kz-font-titulo, 'Outfit', system-ui, sans-serif); font-size: .9rem; font-weight: 600; color: var(--da-tx); line-height: 1.15; letter-spacing: .01em; } .da-logo-sub { font-size: .65rem; color: var(--da-mt); } /* Nav */ .da-nav { flex: 1; padding: .5rem .75rem; display: flex; flex-direction: column; gap: .1rem; } .da-nav-section { font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--da-sct); padding: .85rem .25rem .3rem; margin-top: .15rem; } .da-nav a { display: flex; align-items: center; gap: .55rem; padding: .52rem .75rem; border-radius: calc(var(--da-radius) * 0.9); color: var(--da-nav); text-decoration: none; font-size: .83rem; font-weight: 500; transition: background .13s, color .13s; border: none; } .da-nav a:hover { background: var(--da-nav-bg); color: var(--da-nav-tx); } .da-nav a.active { background: var(--da-brand); color: #fff; } .da-nav a.active .da-nav-icon { opacity: 1; } .da-nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .6; display: flex; align-items: center; justify-content: center; } .da-nav-icon svg { width: 16px; height: 16px; display: block; } .da-nav a:hover .da-nav-icon { opacity: .85; } /* Sidebar footer */ .da-sidebar-footer { padding: .85rem 1rem; border-top: 1px solid var(--da-bd); display: flex; align-items: center; gap: .65rem; flex-shrink: 0; } .da-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--da-brand); display: flex; align-items: center; justify-content: center; font-family: var(--kz-font-titulo, 'Outfit', system-ui, sans-serif); font-size: .7rem; font-weight: 600; color: #fff; flex-shrink: 0; } .da-footer-name { font-size: .8rem; font-weight: 600; color: var(--da-tx); line-height: 1.2; } .da-footer-role { font-size: .67rem; color: var(--da-mt); } /* ── TOPBAR ──────────────────────────────────────────────────── */ .da-main { margin-left: var(--da-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .da-topbar { height: var(--da-th); border-bottom: 1px solid var(--da-bd); display: flex; align-items: center; padding: 0 1.5rem; gap: .75rem; position: sticky; top: 0; background: var(--da-blur); backdrop-filter: blur(20px); z-index: 50; flex-shrink: 0; } .da-topbar-name { font-family: var(--kz-font-titulo, 'Outfit', system-ui, sans-serif); font-size: .9rem; font-weight: 600; color: var(--da-tx); } /* Topbar action icons (tema + sino) */ .da-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .15rem; } .da-topbar-bell, .da-theme-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 8px; color: var(--da-mt); cursor: pointer; line-height: 0; transition: background .15s, color .15s; } .da-topbar-bell:hover, .da-theme-btn:hover { background: var(--da-hover); color: var(--da-tx); } .da-topbar-bell svg, .da-theme-btn svg { display: block; } /* Hamburger */ .da-hamburger { display: none; background: none; border: none; color: var(--da-mt); cursor: pointer; padding: .2rem; flex-shrink: 0; line-height: 0; } .da-hamburger svg { display: block; } /* No padding mode (full-height app pages like ebook-generator) */ .da-content.da-no-pad { padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* ── PAGE HEADER (inside content) ────────────────────────────── */ .da-page-header { padding: 1.75rem 1.75rem .25rem; flex-shrink: 0; } .da-page-title { font-family: var(--kz-font-titulo, 'Outfit', system-ui, sans-serif); font-size: 1.6rem; font-weight: 600; color: var(--da-tx); margin: 0 0 .2rem; line-height: 1.2; } .da-page-sub { font-size: .8rem; color: var(--da-brand2); font-weight: 500; } /* ── CONTENT ─────────────────────────────────────────────────── */ .da-content { flex: 1; padding: 1.5rem 1.75rem 2rem; position: relative; z-index: 1; } /* ── OVERLAY (mobile) ────────────────────────────────────────── */ .da-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 150; backdrop-filter: blur(2px); } /* ── AMBIENT ─────────────────────────────────────────────────── */ body.da-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% -10%, rgba(var(--da-brand-rgb),.08) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 85% 110%, rgba(var(--da-brand-rgb),.04) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 768px) { .da-sidebar { transform: translateX(-100%); } .da-sidebar.open { transform: translateX(0); } .da-overlay.open { display: block; } .da-main { margin-left: 0; } .da-hamburger { display: block; } .da-page-header { padding: 1.25rem 1rem .25rem; } .da-content { padding: 1.25rem 1rem 2rem; } .da-page-title { font-size: 1.3rem; } } /* ── PRINT ───────────────────────────────────────────────────── */ @media print { .da-sidebar, .da-topbar, .da-overlay, .da-page-header, .no-print { display: none !important; } .da-main { margin-left: 0 !important; } .da-content { padding: 0 !important; } body.da-page { background: white !important; color: black !important; } }