/* ================================================================ NotaFlow · tema "cyber" com suporte a claro/escuro A troca é feita pelo atributo data-theme no (ver theme.js). Todos os nomes de classe originais foram preservados. ================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- TEMA ESCURO (padrão) ---------- */ :root, :root[data-theme="dark"]{ --bg:#0a0f1f; --panel:#111a30; --panel2:#0d1526; --panel3:#0f1830; --card-bg:rgba(18,26,51,.72); --sidebar:#0b1327; --side-txt:#c3cfe6; --side-grupo:#6c7da0; --side-ativo:#ffffff; --topbar-bg:rgba(13,21,38,.72); --linha:rgba(99,132,196,.16); --linha2:rgba(99,132,196,.30); --texto:#e7eefc; --titulo:#ffffff; --suave:#93a2c4; --placeholder:#5f6d90; --azul:#1a7fd4; --azul2:#2aa2ff; --azulc:#5bb8ff; --verde:#37d67a; --amarelo:#f0b429; --vermelho:#ff5d6c; --glow1:rgba(42,162,255,.10); --glow2:rgba(42,162,255,.07); --sombra:0 30px 80px rgba(0,0,0,.55); /* apelidos legados */ --escuro:#0b1327; --escuro2:#16223f; --cinza:#0a0f1f; --txt:#e7eefc; color-scheme:dark; } /* ---------- TEMA CLARO ---------- */ :root[data-theme="light"]{ --bg:#eaeef5; --panel:#ffffff; --panel2:#f4f7fc; --panel3:#eef3fb; --card-bg:rgba(255,255,255,.92); --sidebar:#ffffff; --side-txt:#41506b; --side-grupo:#93a0b8; --side-ativo:#0f1a2e; --topbar-bg:rgba(255,255,255,.80); --linha:#e3e8ef; --linha2:#d3dbe8; --texto:#000000; --titulo:#000000; --suave:#000000; --placeholder:#9aa7bd; --azul:#1a7fd4; --azul2:#1f8fe6; --azulc:#2aa2ff; --verde:#1e9e5a; --amarelo:#c78a00; --vermelho:#d64545; --glow1:rgba(42,162,255,.10); --glow2:rgba(42,162,255,.06); --sombra:0 20px 50px rgba(30,50,90,.15); --escuro:#ffffff; --escuro2:#eef3fb; --cinza:#eaeef5; --txt:#22303f; color-scheme:light; } html{ color-scheme:light dark; } body{ font-family:"Outfit",system-ui,"Segoe UI",Roboto,Arial,sans-serif; background: radial-gradient(1200px 700px at 100% -10%, var(--glow1), transparent 60%), radial-gradient(900px 600px at -10% 110%, var(--glow2), transparent 55%), var(--bg); background-attachment:fixed; color:var(--texto); font-size:14px; -webkit-font-smoothing:antialiased; transition:background-color .25s, color .25s; } a{ color:var(--azul2); text-decoration:none; } a:hover{ color:var(--azulc); text-decoration:none; } /* caixas de selecao padronizadas */ input[type="checkbox"], input[type="radio"]{ width:14px; height:14px; min-width:14px; margin:0; flex:0 0 auto; vertical-align:middle; accent-color:var(--azul2); cursor:pointer; } input.chk-sel{ width:22px; height:22px; min-width:22px; } /* balao (pop-up) flutuante com detalhes do XML */ .chave-cell{ cursor:help; } #tipbox{ display:none; position:fixed; z-index:9999; background:#0c1428; color:#eef2f8; padding:10px 13px; border-radius:8px; max-width:360px; line-height:1.55; font-size:12px; border:1px solid rgba(99,132,196,.30); box-shadow:0 14px 40px rgba(0,0,0,.6); pointer-events:none; } #tipbox strong{ color:var(--azulc); } #tipbox .t-linha{ margin:2px 0; } /* ---------- botão de tema ---------- */ .tema-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:36px; height:36px; border-radius:9px; border:1px solid var(--linha2); background:var(--panel2); color:var(--texto); cursor:pointer; font-size:16px; line-height:1; transition:background .15s, border-color .15s, transform .1s; } .tema-toggle:hover{ border-color:var(--azul2); background:rgba(42,162,255,.12); } .tema-toggle:active{ transform:scale(.94); } /* ---------- botões (globais) ---------- */ .btn{ background:linear-gradient(135deg,var(--azulc),var(--azul)); color:#fff; border:0; padding:11px 16px; border-radius:9px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; box-shadow:0 8px 22px rgba(42,162,255,.30); transition:filter .15s, box-shadow .2s, transform .1s; } .btn:hover{ filter:brightness(1.07); box-shadow:0 12px 28px rgba(42,162,255,.45); } .btn:active{ transform:translateY(1px); } .btn:disabled{ filter:grayscale(.5) brightness(.7); box-shadow:none; cursor:not-allowed; } .btn.sec{ background:rgba(42,162,255,.08); color:var(--azul2); border:1px solid var(--linha2); box-shadow:none; } .btn.sec:hover{ background:rgba(42,162,255,.16); border-color:var(--azul2); filter:none; } /* ---------- layout ---------- */ :root{ --appbar-h:56px; } /* barra fixa do topo: marca (esquerda) + usuário (canto superior direito). Não roda — permanece igual nos dois modos de menu. */ .appbar{ position:sticky; top:0; z-index:40; height:var(--appbar-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; background:var(--topbar-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--linha); } .brand{ font-weight:700; font-size:17px; color:var(--titulo); white-space:nowrap; } .userbar{ display:flex; align-items:center; gap:12px; color:var(--suave); font-size:13px; white-space:nowrap; } .userbar a{ color:var(--azul2); } /* >>> TEMA CLARO: barra do topo azul-marinho RGB(6, 12, 99) <<< */ :root[data-theme="light"] .appbar{ background:rgb(6, 12, 99); border-bottom-color:rgba(0,0,0,.25); } :root[data-theme="light"] .appbar .brand{ color:#fff; } :root[data-theme="light"] .userbar{ color:rgba(255,255,255,.90); } :root[data-theme="light"] .userbar a{ color:#fff; } :root[data-theme="light"] .userbar a:hover{ color:#fff; text-decoration:underline; } :root[data-theme="light"] .appbar .tema-toggle{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.45); color:#fff; } :root[data-theme="light"] .appbar .tema-toggle:hover{ background:rgba(255,255,255,.28); border-color:#fff; } /* faixa do menu (itens) — logo abaixo da appbar por padrão. Base NEUTRA (segue o tema): usada no tema ESCURO. A cor azul-marinho RGB(6,12,99) é aplicada só no tema CLARO (mais abaixo). */ .menu{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:8px 20px; background:var(--topbar-bg); border-bottom:1px solid var(--linha); position:sticky; top:var(--appbar-h); z-index:29; } .menu a{ display:block; padding:8px 12px; border-radius:8px; color:var(--side-txt); font-size:14px; white-space:nowrap; transition:background .12s, color .12s; } .menu a:hover{ background:rgba(42,162,255,.10); color:var(--titulo); } .menu a.ativo{ background:rgba(42,162,255,.14); color:var(--azul2); font-weight:600; } .menu .sep{ width:1px; height:20px; background:var(--linha2); margin:0 6px; flex:none; } /* ícones dos itens: ocultos no topo (só rótulos), visíveis no modo lateral */ .menu a .ico{ display:none; width:18px; height:18px; flex:none; } .menu-controls{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; } /* >>> TEMA CLARO: menu azul-marinho RGB(6, 12, 99) com texto branco <<< */ :root[data-theme="light"] .menu{ background:rgb(6, 12, 99); border-bottom-color:rgba(0,0,0,.25); } :root[data-theme="light"] .menu a{ color:rgba(255,255,255,.86); } :root[data-theme="light"] .menu a:hover{ background:rgba(255,255,255,.15); color:#fff; } :root[data-theme="light"] .menu a.ativo{ background:rgba(255,255,255,.22); color:#fff; } :root[data-theme="light"] .menu .sep{ background:rgba(255,255,255,.30); } :root[data-theme="light"][data-menu="side"] .menu{ border-right-color:rgba(0,0,0,.25); } :root[data-theme="light"] .menu .mbtn{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.45); color:#fff; } :root[data-theme="light"] .menu .mbtn:hover{ background:rgba(255,255,255,.28); border-color:#fff; } :root[data-theme="light"][data-menu="side"][data-side="icons"] .menu a:hover .rotulo{ color:#eef2f8; } /* ===== TEMA CLARO — TESTE (opção 2): caixa clara + azul RGB(49,103,232) só como detalhe ===== */ /* KPI: faixa azul no topo (número em preto, via --titulo) */ :root[data-theme="light"] .kpi{ border-color:rgba(49,103,232,.30); } :root[data-theme="light"] .kpi::before{ background:rgb(49, 103, 232); opacity:1; height:3px; } /* Painéis .box: borda superior azul (título em preto, via --titulo) */ :root[data-theme="light"] .box{ border-top:3px solid rgb(49, 103, 232); } /* Tabelas: cabeçalho azul com texto branco (o corpo continua claro e legível) */ :root[data-theme="light"] .tbl-wrap{ border-color:rgba(49,103,232,.30); } :root[data-theme="light"] .tbl-wrap th{ background:rgb(49, 103, 232); color:#fff; border-bottom-color:rgba(49,103,232,.5); } /* Filtros: detalhe de borda à esquerda */ :root[data-theme="light"] .filtros{ border-left:3px solid rgb(49, 103, 232); } .pagina{ min-width:0; } .pagina-head{ padding:18px 24px 0; } .pagina-head h1{ font-size:20px; font-weight:700; color:var(--titulo); } .content{ padding:18px 24px 28px; } h2.page{ font-size:20px; margin-bottom:18px; color:var(--titulo); font-weight:700; } /* ---------- botões redondos do menu (rotacionar + recolher) ---------- */ .mbtn{ position:relative; width:34px; height:34px; min-width:34px; flex:none; border-radius:50%; border:1px solid var(--linha2); background:var(--panel2); color:var(--azul2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; } .mbtn:hover{ background:rgba(42,162,255,.14); border-color:var(--azul2); } .mbtn svg{ width:18px; height:18px; transition:transform .35s ease; } :root[data-menu="side"] .rotate-btn svg{ transform:rotate(90deg); } :root[data-menu="side"][data-side="icons"] .collapse-btn svg{ transform:rotate(180deg); } /* o botão de recolher só aparece no modo lateral, no TOPO do menu */ .collapse-btn{ display:none; } :root[data-menu="side"] .collapse-btn{ display:inline-flex; align-self:flex-end; margin-bottom:6px; } :root[data-menu="side"][data-side="icons"] .collapse-btn{ align-self:center; } /* tooltip (janela ao passar o mouse) */ .mbtn::after{ content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#0c1428; color:#eef2f8; font-size:12px; padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; border:1px solid var(--linha2); box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:60; } .mbtn:hover::after{ opacity:1; } :root[data-menu="side"] .mbtn::after{ top:50%; left:calc(100% + 8px); transform:translateY(-50%); } /* ---------- modo LATERAL (menu vertical à esquerda) ---------- */ :root[data-menu="side"] .shell{ display:flex; align-items:stretch; min-height:calc(100vh - var(--appbar-h)); } :root[data-menu="side"] .menu{ flex-direction:column; align-items:stretch; gap:2px; width:212px; flex:none; padding:16px 14px; border-bottom:0; border-right:1px solid var(--linha); position:static; } :root[data-menu="side"] .menu .sep{ width:100%; height:1px; margin:8px 0; } /* itens com ícone + rótulo */ :root[data-menu="side"] .menu a{ display:flex; align-items:center; gap:10px; } :root[data-menu="side"] .menu a .ico{ display:block; } /* controles (recolher + rotacionar) no FINAL do menu */ :root[data-menu="side"] .menu-controls{ margin-top:auto; margin-left:0; width:100%; display:flex; justify-content:center; gap:8px; padding-top:12px; } :root[data-menu="side"] .pagina{ flex:1; } /* --- modo lateral RECOLHIDO (só ícones) --- */ :root[data-menu="side"][data-side="icons"] .menu{ width:64px; padding:16px 8px; align-items:center; } :root[data-menu="side"][data-side="icons"] .menu a{ justify-content:center; padding:10px 0; position:relative; } :root[data-menu="side"][data-side="icons"] .menu a .rotulo{ display:none; } :root[data-menu="side"][data-side="icons"] .menu .sep{ width:60%; margin:8px auto; } :root[data-menu="side"][data-side="icons"] .menu-controls{ flex-direction:column; align-items:center; } /* o rótulo vira tooltip ao passar o mouse no item recolhido */ :root[data-menu="side"][data-side="icons"] .menu a:hover .rotulo{ display:block; position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); background:#0c1428; color:#eef2f8; padding:5px 9px; border-radius:6px; white-space:nowrap; font-size:12px; font-weight:400; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.45); } /* aviso: super-admin visualizando um escritório */ .impersonando{ background:var(--amarelo); color:#241a00; padding:8px 22px; font-size:13px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-bottom:1px solid rgba(0,0,0,.2); } .impersonando a{ color:#241a00; font-weight:700; text-decoration:underline; margin-left:auto; } .impersonando form{ margin-left:auto; } .impersonando button{ background:none; border:0; cursor:pointer; padding:0; font:inherit; color:#241a00; font-weight:700; text-decoration:underline; } /* ---------- cards / kpis ---------- */ .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-bottom:22px; } .kpi{ background:linear-gradient(160deg,var(--panel),var(--panel2)); border:1px solid var(--linha); border-radius:12px; padding:16px 18px; position:relative; overflow:hidden; } .kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--azul2),transparent); opacity:.7; } .kpi .rot{ color:var(--suave); font-size:12px; text-transform:uppercase; letter-spacing:.3px; } .kpi .val{ font-size:28px; font-weight:700; color:var(--titulo); margin-top:6px; } .kpi.small .val{ font-size:22px; } /* donut de certificados (dashboard) */ .donut-track{ stroke:var(--linha2); } .donut-num{ fill:var(--titulo); } .donut-lbl{ fill:var(--suave); } .grid2{ display:grid; grid-template-columns:340px 1fr; gap:16px; align-items:start; } @media(max-width:900px){ .grid2{ grid-template-columns:1fr; } } .box{ background:var(--panel); border:1px solid var(--linha); border-radius:12px; padding:18px; margin-bottom:16px; } .box h3{ font-size:15px; margin-bottom:14px; color:var(--titulo); font-weight:600; } /* barras de certificado */ .cert-legend{ display:flex; flex-direction:column; gap:8px; } .cert-legend .li{ display:flex; justify-content:space-between; align-items:center; } .dot{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; box-shadow:0 0 8px currentColor; } .dot.ok{ background:var(--verde); color:var(--verde); } .dot.vence{ background:var(--amarelo); color:var(--amarelo); } .dot.vencido{ background:var(--vermelho); color:var(--vermelho); } .barra{ height:12px; border-radius:6px; background:rgba(99,132,196,.16); overflow:hidden; display:flex; margin:10px 0 14px; } .barra span{ display:block; height:100%; } /* ---------- tabelas ---------- */ table{ width:100%; border-collapse:collapse; background:transparent; } .tbl-wrap{ overflow-x:auto; border:1px solid var(--linha); border-radius:12px; background:var(--panel); } th,td{ text-align:left; padding:11px 13px; border-bottom:1px solid var(--linha); font-size:13px; white-space:nowrap; } th{ background:var(--panel2); color:var(--suave); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.3px; } td{ color:var(--texto); } tr:last-child td{ border-bottom:0; } tr:hover td{ background:rgba(42,162,255,.05); } .badge{ padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; border:1px solid transparent; } .badge.ok{ background:rgba(55,214,122,.14); color:var(--verde); border-color:rgba(55,214,122,.30); } .badge.vence{ background:rgba(240,180,41,.16); color:var(--amarelo); border-color:rgba(240,180,41,.30); } .badge.vencido{ background:rgba(255,93,108,.14); color:var(--vermelho); border-color:rgba(255,93,108,.30); } .badge.cinza{ background:rgba(99,132,196,.14); color:var(--suave); border-color:var(--linha2); } /* ---------- forms / filtros ---------- */ .filtros{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:16px; background:var(--panel); border:1px solid var(--linha); border-radius:12px; padding:14px; } .campo{ display:flex; flex-direction:column; gap:4px; } .campo label{ font-size:11px; color:var(--suave); text-transform:uppercase; letter-spacing:.3px; } .campo input:not([type=checkbox]):not([type=radio]),.campo select, input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],select,textarea{ padding:9px 11px; border:1px solid var(--linha2); border-radius:8px; font-size:13px; min-width:150px; font-family:inherit; color:var(--texto); background:var(--panel2); outline:none; transition:border-color .15s, box-shadow .15s; } .campo input:focus,input:focus,select:focus,textarea:focus{ border-color:var(--azul2); box-shadow:0 0 0 3px rgba(42,162,255,.16); } input::placeholder,textarea::placeholder{ color:var(--placeholder); } select option{ background:var(--panel); color:var(--texto); } .flash{ padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:13px; border:1px solid transparent; } .flash.ok{ background:rgba(55,214,122,.12); color:var(--verde); border-color:rgba(55,214,122,.35); } .flash.erro{ background:rgba(255,93,108,.12); color:var(--vermelho); border-color:rgba(255,93,108,.35); } .paginacao{ margin-top:14px; display:flex; gap:6px; align-items:center; font-size:13px; } .paginacao a,.paginacao span{ padding:6px 11px; border:1px solid var(--linha2); border-radius:8px; background:var(--panel2); color:var(--texto); } .paginacao a:hover{ background:rgba(42,162,255,.14); border-color:var(--azul2); } .paginacao .atual{ background:var(--azul2); color:#04101f; border-color:var(--azul2); font-weight:700; } .log{ background:#05080f; color:#c7d2e0; padding:14px; border-radius:10px; border:1px solid var(--linha); font-family:Consolas,"Cascadia Code",monospace; font-size:12px; white-space:pre-wrap; max-height:420px; overflow:auto; } .chk{ display:flex; gap:16px; align-items:center; } .chk label{ display:flex; gap:5px; align-items:center; font-size:13px; text-transform:none; color:var(--texto); } .mut{ color:var(--suave); font-size:12px; } /* ---------- multiselect com busca (dropdown) ---------- */ .msel{ position:relative; max-width:440px; } .msel-control{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border:1px solid var(--linha2); border-radius:8px; background:var(--panel2); cursor:pointer; font-size:13px; color:var(--texto); } .msel-control:hover{ border-color:var(--azul2); } .msel-arrow{ color:var(--suave); margin-left:8px; transition:transform .15s; } .msel.aberto .msel-arrow{ transform:rotate(180deg); } .msel-panel{ position:absolute; z-index:50; top:calc(100% + 4px); left:0; right:0; background:var(--panel); border:1px solid var(--linha2); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.45); padding:8px; } .msel-panel input[type=text]{ width:100%; padding:8px 10px; border:1px solid var(--linha2); border-radius:7px; margin:6px 0; font-size:13px; } .msel-todos{ display:flex; gap:6px; align-items:center; font-size:13px; font-weight:600; padding:5px 2px; border-bottom:1px solid var(--linha); } .msel-list{ max-height:230px; overflow:auto; margin-top:4px; } .msel-list .cli-item{ display:flex; gap:7px; padding:6px; font-size:13px; border-radius:6px; cursor:pointer; } .msel-list .cli-item:hover{ background:rgba(42,162,255,.10); } /* ---------- responsivo ---------- */ @media(max-width:760px){ .appbar{ padding:0 14px; } .userbar{ gap:8px; font-size:12px; } .menu{ padding:8px 14px; } .menu .sep{ display:none; } /* no modo lateral em telas estreitas, estreita a barra */ :root[data-menu="side"] .menu{ width:170px; padding:14px 10px; } :root[data-menu="side"] .menu a{ padding:8px 8px; } }