/* ============================================================ Luzix — Layout unificado (Master + Organização) Shell: sidebar vertical escura + topbar + conteúdo. Tema: claro/escuro por tokens (data-theme no ). ============================================================ */ /* ---------- Tokens: tema CLARO (padrão) ---------- */ :root{ --bg:#eef2f8; --surface:#ffffff; --surface-2:#f6f8fc; --ink:#0f172a; --muted:#64748b; --border:#e3e8f0; --primary:#2563eb; --primary-ink:#ffffff; --primary-soft:#e8f0fe; --accent:#0d9488; --ok:#16a34a; --warn:#d97706; --err:#dc2626; --info:#2563eb; --sidebar-bg:#0e2947; --sidebar-bg-2:#0a1d33; --sidebar-ink:#c7d5e6; --sidebar-ink-muted:#7f95ad; --sidebar-hover:rgba(255,255,255,.07); --sidebar-active:#2563eb; --sidebar-active-ink:#ffffff; --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08); --shadow-lg:0 10px 30px rgba(15,23,42,.12); --radius:12px; } /* ---------- Tokens: tema ESCURO (escolha explícita) ---------- */ :root[data-theme="dark"]{ --bg:#0b1220; --surface:#0f1a2e; --surface-2:#132239; --ink:#e5edf7; --muted:#94a3b8; --border:#22304a; --primary:#3b82f6; --primary-ink:#ffffff; --primary-soft:#16233b; --accent:#2dd4bf; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --info:#60a5fa; --sidebar-bg:#081426; --sidebar-bg-2:#050e1c; --sidebar-ink:#cbd5e1; --sidebar-ink-muted:#64748b; --sidebar-hover:rgba(255,255,255,.06); --sidebar-active:#2563eb; --sidebar-active-ink:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); } /* ---------- Tema do sistema (sem escolha) → escuro se o SO pedir ---------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0b1220; --surface:#0f1a2e; --surface-2:#132239; --ink:#e5edf7; --muted:#94a3b8; --border:#22304a; --primary:#3b82f6; --primary-ink:#ffffff; --primary-soft:#16233b; --accent:#2dd4bf; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --info:#60a5fa; --sidebar-bg:#081426; --sidebar-bg-2:#050e1c; --sidebar-ink:#cbd5e1; --sidebar-ink-muted:#64748b; --sidebar-hover:rgba(255,255,255,.06); --sidebar-active:#2563eb; --sidebar-active-ink:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); } } *{box-sizing:border-box} html,body{margin:0;padding:0;max-width:100%} body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;min-height:100vh;overflow-x:clip} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} /* Scrollbar geral (conteúdo e áreas roláveis) — discreta e temática */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 35%,transparent); border-radius:999px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 60%,transparent); background-clip:padding-box} html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent} /* ============================================================ Shell: grid sidebar + topbar + conteúdo + rodapé Áreas nomeadas permitem a ordem de includes header→painel→conteúdo→rodape. ============================================================ */ .app-shell{ display:grid; grid-template-columns:264px minmax(0,1fr); grid-template-rows:auto 1fr auto; grid-template-areas: "sidebar topbar" "sidebar main" "sidebar footer"; min-height:100vh; } /* ---------- Sidebar ---------- */ .sidebar{ grid-area:sidebar; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2)); color:var(--sidebar-ink); display:flex; flex-direction:column; padding:18px 14px 14px; z-index:40; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; } .sidebar::-webkit-scrollbar{width:8px} .sidebar::-webkit-scrollbar-track{background:transparent} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px} .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)} .sidebar-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 16px;color:#fff} .sidebar-brand i{color:#3b82f6;font-size:1.5rem} .sidebar-brand .bn{display:flex;flex-direction:column;line-height:1.1} .sidebar-brand .bn b{font-size:1.15rem;font-weight:700;letter-spacing:.01em} .sidebar-brand .bn small{font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sidebar-ink-muted)} .sidebar-brand .brand-logo{display:block;width:176px;max-width:100%;height:auto} .sidebar-brand .brand-mark{display:block;width:34px;height:auto;flex:none} /* Logo próprio (Parceiro vinculado / Marca da Organização) no menu: card branco para o logo ficar legível sobre a sidebar escura, aceitando qualquer formato/proporção (object-contain). */ .sidebar-brand .brand-chip{display:flex;align-items:center;justify-content:center;flex:none; background:#fff;border-radius:10px;padding:5px 7px;box-shadow:0 4px 12px rgba(0,0,0,.22);max-width:150px} .sidebar-brand .brand-chip img{display:block;max-width:136px;max-height:34px;width:auto;height:auto;object-fit:contain} .sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1} .sidebar-sep{height:1px;background:rgba(255,255,255,.09);margin:12px 10px} .side-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px; color:var(--sidebar-ink);font-weight:500;font-size:.9rem;white-space:nowrap} .side-link i{width:18px;text-align:center;font-size:.95rem} .side-link:hover{background:var(--sidebar-hover);color:#fff;text-decoration:none} .side-link.is-active{background:var(--sidebar-active);color:var(--sidebar-active-ink);box-shadow:0 6px 16px rgba(37,99,235,.35)} /* Submenu da sidebar */ .side-item{position:relative} .side-item>.side-link{padding-right:38px} .side-caret{position:absolute;right:6px;top:4px;width:30px;height:34px;display:grid;place-items:center; background:transparent;border:none;color:var(--sidebar-ink-muted);cursor:pointer;border-radius:8px} .side-caret:hover{background:var(--sidebar-hover);color:#fff} .side-item>.side-link.is-active+.side-caret{color:#fff} .side-caret i{font-size:.72rem;transition:transform .2s} .side-item.is-open .side-caret i{transform:rotate(180deg)} .side-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px} .side-item.is-open .side-sub{display:flex} .side-sub .side-link{padding-left:42px;font-size:.85rem} .sidebar-foot{margin-top:12px;padding:14px 12px 2px;border-top:1px solid rgba(255,255,255,.09); color:var(--sidebar-ink-muted);font-size:.72rem;line-height:1.4} .sidebar-overlay{display:none} /* ---------- Topbar ---------- */ .topbar{ grid-area:topbar; position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px; padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--border); } .topbar-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border); background:var(--surface);color:var(--ink);cursor:pointer;align-items:center;justify-content:center} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px} /* Busca */ .searchbox{position:relative;flex:1;max-width:440px;display:flex;align-items:center;gap:9px; background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 13px} .searchbox>i{color:var(--muted)} .searchbox input{border:none;background:transparent;outline:none;width:100%;font:inherit;color:var(--ink)} .search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface); border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:60; max-height:380px;overflow:auto;padding:6px} .search-group{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); padding:8px 10px 4px;font-weight:700} .search-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink)} .search-item:hover,.search-item.is-focus{background:var(--surface-2);text-decoration:none} .search-item i{color:var(--muted);width:16px;text-align:center} .search-item .sub{color:var(--muted);font-size:.8rem;margin-left:auto} .search-empty{padding:14px 10px;color:var(--muted)} /* Botões de ícone / notificações */ .icon-btn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--border); background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .icon-btn:hover{background:var(--surface-2)} .notif-wrap{position:relative} .notif-badge{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;border-radius:999px; font-size:.62rem;font-weight:700;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;line-height:1} .notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:86vw;background:var(--surface); border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:60;overflow:hidden} .notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600} .notif-head button{background:none;border:none;color:var(--primary);font:inherit;font-size:.8rem;cursor:pointer;font-weight:600} .notif-list{max-height:360px;overflow:auto} .notif-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border)} .notif-item:last-child{border-bottom:none} .notif-item .nd{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0} .notif-item .nt{font-weight:600;font-size:.85rem} .notif-item .nm{color:var(--muted);font-size:.78rem} .notif-item .nh{color:var(--muted);font-size:.72rem;margin-left:auto;white-space:nowrap} .notif-empty{padding:16px 14px;color:var(--muted)} /* Menu do usuário */ .user-menu{display:flex;align-items:center;gap:10px;color:var(--ink)} .user-menu:hover{text-decoration:none} .avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center; font-weight:700;font-size:.82rem;flex-shrink:0} .user-meta{display:flex;flex-direction:column;line-height:1.15} .user-meta .nm{font-weight:600;font-size:.85rem} .user-meta .rl{color:var(--muted);font-size:.74rem} /* ---------- Conteúdo ---------- */ .content{grid-area:main;min-width:0} .page{max-width:1600px;margin:0 auto;padding:24px;width:100%} .page-title{font-size:1.35rem;margin:0 0 18px} /* App da organização: cards/sessões empilhados com respiro vertical uniforme. */ .app-office .page{display:flex;flex-direction:column;gap:22px} .app-office .page>.hero, .app-office .page>.grid, .app-office .page>.dash-cols, .app-office .page>.card, .app-office .page>.flash, .app-office .page>.page-title{margin-top:0;margin-bottom:0} .footer{grid-area:footer;padding:16px 24px;color:var(--muted);font-size:.8rem; border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* ============================================================ Hero (banner do dashboard) ============================================================ */ .hero{position:relative;border-radius:16px;overflow:hidden;color:#fff;min-height:230px; padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px; background: linear-gradient(270deg, rgba(7,23,45,.8) 0%, rgba(7,23,45,.4) 22%, rgba(7,23,45,0) 48%), linear-gradient(100deg, rgba(7,23,45,.96) 0%, rgba(7,23,45,.9) 42%, rgba(7,23,45,.55) 70%, rgba(7,23,45,.35) 100%), url('/assets/img/backgroud-header.webp') center right / cover no-repeat; box-shadow:var(--shadow-lg);margin-bottom:18px} .hero-copy{max-width:560px} .hero h1{font-size:2rem;line-height:1.15;margin:0 0 12px;font-weight:800} .hero h1 .hl{color:#5eead4} .hero p{margin:0 0 20px;color:#d7e3f2;font-size:.98rem;max-width:520px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap} .hero-actions .btn{background:#fff;color:#0e2947} .hero-actions .btn:hover{filter:brightness(.96)} .hero-actions .btn-outline{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.5)} .hero-side{text-align:right;display:flex;flex-direction:column;gap:16px;align-items:flex-end; max-width:280px;flex-shrink:0;text-shadow:0 1px 4px rgba(0,0,0,.5)} .hero-side .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#e2ecf7; line-height:1.7;max-width:100%} .hero-side .tag::after{content:"";display:block;width:38px;height:2px;background:#5eead4;margin:8px 0 0 auto} /* ============================================================ Cards / grid ============================================================ */ .grid{display:grid;gap:16px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px} .card h2,.card h3{margin:0 0 12px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .card-head h3{margin:0;display:flex;align-items:center;gap:9px} .card-head h3 i{color:var(--primary)} .stat{display:flex;flex-direction:column;gap:6px} .stat .num{font-size:2rem;font-weight:700;line-height:1} .stat .lbl{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em} .stat-icon{font-size:1.3rem;color:var(--muted);margin-bottom:2px} /* Cards de métrica (estilo da imagem) */ .stat-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface); border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:18px} .chip{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0} .stat-card .chip{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0} .stat-card .body{min-width:0} .stat-card .val{font-size:1.9rem;font-weight:800;line-height:1.1} .stat-card .cap{color:var(--muted);font-size:.82rem} .chip-blue{background:#e8f0fe;color:#2563eb} .chip-teal{background:#e2f6f2;color:#0d9488} .chip-amber{background:#fdf0dd;color:#d97706} .chip-purple{background:#f2e9fe;color:#8b5cf6} .chip-green{background:#e5f6ea;color:#16a34a} .chip-red{background:#fdeaea;color:#dc2626} :root[data-theme="dark"] .chip-blue{background:#16233b;color:#60a5fa} :root[data-theme="dark"] .chip-teal{background:#0f2e2a;color:#2dd4bf} :root[data-theme="dark"] .chip-amber{background:#33260f;color:#fbbf24} :root[data-theme="dark"] .chip-purple{background:#27183f;color:#a78bfa} :root[data-theme="dark"] .chip-green{background:#11291a;color:#4ade80} :root[data-theme="dark"] .chip-red{background:#331416;color:#f87171} .trend{font-size:.8rem;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:6px} .trend.up{color:var(--ok)} .trend.down{color:var(--err)} .trend .vs{color:var(--muted);font-weight:500} /* Acesso rápido */ .quick-access{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px} .qa-item{display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 8px; border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink); font-size:.8rem;font-weight:600;text-align:center} .qa-item:hover{border-color:var(--primary);color:var(--primary);text-decoration:none} .qa-item i{font-size:1.25rem;color:var(--primary)} /* Lista de atividades */ .activity-list{list-style:none;margin:0;padding:0} .activity-list li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)} .activity-list li:last-child{border-bottom:none} .activity-list .dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0} .activity-list .txt{min-width:0} .activity-list .t1{font-weight:600;font-size:.86rem} .activity-list .t2{color:var(--muted);font-size:.78rem} .activity-list .when{color:var(--muted);font-size:.74rem;margin-left:auto;white-space:nowrap} /* Colunas do dashboard (responsivas) */ .dash-cols{display:grid;gap:16px;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;margin-bottom:16px} .dash-cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .dash-cols.fill{align-items:stretch} /* Card de gráfico que ocupa toda a altura disponível (para igualar cards lado a lado) */ .chart-card{display:flex;flex-direction:column} .chart-card .chart-box{flex:1;height:auto;min-height:220px} @media (max-width:1100px){.dash-cols,.dash-cols.even{grid-template-columns:minmax(0,1fr)}} /* ---------- Gráficos (Chart.js) ---------- */ .chart-box{position:relative;height:220px} .chart-box.tall{height:280px} .legend-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px} .legend-item{display:flex;align-items:center;gap:7px;font-weight:600} .legend-item .num{font-size:1.1rem} .legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0} /* ---------- Tabelas ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:.88rem} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--ink)} th{background:var(--surface-2);color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em} tr:last-child td{border-bottom:none} td.wrap,th.wrap{white-space:normal} /* Cabeçalho fixo em tabelas longas (contas do balancete, trilha de auditoria): a rolagem fica dentro do próprio wrapper e o gruda no topo dele, sem competir com a topbar sticky. */ .table-wrap.tabela-fixa{max-height:calc(100vh - 240px);overflow:auto} .table-wrap.tabela-fixa thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--border)} @media (max-width:640px){.table-wrap.tabela-fixa{max-height:70vh}} /* ---------- Forms ---------- */ .form{max-width:640px} .form-row{margin-bottom:16px} label{display:block;font-weight:600;margin-bottom:6px;color:var(--ink)} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{ width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:inherit;color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-color:var(--primary)} /* Input de arquivo */ input[type=file]{width:100%;font:inherit;font-size:.88rem;color:var(--muted);cursor:pointer; background:var(--surface-2);border:1px dashed var(--border);border-radius:8px;padding:9px 11px; transition:border-color .15s,background .15s} input[type=file]:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface-2))} input[type=file]:focus{outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);border-color:var(--primary)} input[type=file]::file-selector-button{margin:0 12px 0 0;padding:7px 14px;border:none;border-radius:7px; background:var(--primary);color:var(--primary-ink);font:inherit;font-weight:600;font-size:.85rem;cursor:pointer; transition:filter .15s} input[type=file]::file-selector-button:hover{filter:brightness(1.08)} input[type=file]::-webkit-file-upload-button{margin:0 12px 0 0;padding:7px 14px;border:none;border-radius:7px; background:var(--primary);color:var(--primary-ink);font:inherit;font-weight:600;font-size:.85rem;cursor:pointer; -webkit-appearance:none;appearance:none} input[type=file]::-webkit-file-upload-button:hover{filter:brightness(1.08)} /* Toggle (switch) — parâmetros binários 0/1 */ .toggle{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:400;margin:0;color:var(--ink)} .toggle input{position:absolute;opacity:0;width:1px;height:1px} .toggle .track{width:46px;height:26px;border-radius:999px;background:var(--border);position:relative;transition:background .15s;flex-shrink:0} .toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s} .toggle input:checked + .track{background:var(--ok)} .toggle input:checked + .track::after{transform:translateX(20px)} .toggle input:focus-visible + .track{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent)} .toggle .tlabel{font-size:.82rem;color:var(--muted)} /* Checkbox de seleção da tabela (ex.: "Resultado por Conta") como switch compacto */ input.js-marcado{appearance:none;-webkit-appearance:none;display:block;margin:0 auto; width:38px;height:20px;border-radius:999px;background:var(--border);position:relative; cursor:pointer;transition:background .15s;vertical-align:middle} input.js-marcado::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px; border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s} input.js-marcado:checked{background:var(--primary)} input.js-marcado:checked::after{transform:translateX(18px)} input.js-marcado:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent)} input.js-marcado:disabled{opacity:.5;cursor:not-allowed} /* Checkbox "Conferido" (célula Status de /analise) — mesmo mecanismo de switch de input.js-marcado, versão compacta pra caber inline junto do badge de cor. */ input.js-conferido{appearance:none;-webkit-appearance:none;display:inline-block;margin:0; width:26px;height:14px;border-radius:999px;background:var(--border);position:relative; cursor:pointer;transition:background .15s;vertical-align:middle;flex:none} input.js-conferido::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px; border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s} input.js-conferido:checked{background:var(--ok)} input.js-conferido:checked::after{transform:translateX(12px)} input.js-conferido:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 40%,transparent)} input.js-conferido:disabled{opacity:.5;cursor:not-allowed} .hint{color:var(--muted);font-size:.8rem;margin-top:4px} .field-error{color:var(--err);font-size:.82rem;margin-top:4px} fieldset{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin:0 0 16px} legend{font-weight:600;padding:0 6px;color:var(--ink)} /* ---------- Botões ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;border:1px solid transparent; font:inherit;font-weight:600;cursor:pointer;background:var(--primary);color:var(--primary-ink)} .btn:hover{filter:brightness(1.08);text-decoration:none} .btn-sm{padding:6px 11px;font-size:.85rem} .btn-ghost{background:transparent;border-color:var(--border);color:var(--ink)} .btn-danger{background:var(--err)} .btn-ok{background:var(--ok)} /* ---------- Badges / flash ---------- */ .badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--primary-soft);color:var(--primary)} .badge-ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)} .badge-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)} .badge-err{background:color-mix(in srgb,var(--err) 18%,transparent);color:var(--err)} .badge-muted{background:var(--surface-2);color:var(--muted)} .badge-azul{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)} .badge-purple{background:color-mix(in srgb,#8b5cf6 20%,transparent);color:#8b5cf6} /* Filtros desmarcados (Cores/Ver) — visual discreto nos dois temas */ .badge.is-off{background:var(--surface-2)!important;color:var(--muted)!important} /* Linha do "Full" (conta excluída: totalizador / sem análise) — tema claro/escuro */ tr.row-excluida>td{background:var(--surface-2)} .flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;border:1px solid} .flash-info{background:color-mix(in srgb,var(--info) 12%,transparent);border-color:var(--info);color:var(--info)} .flash-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:var(--ok);color:var(--ok)} .flash-err{background:color-mix(in srgb,var(--err) 12%,transparent);border-color:var(--err);color:var(--err)} .flash-warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:var(--warn);color:var(--warn)} code{background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:.85em;color:var(--ink)} .muted{color:var(--muted)} .row-actions{display:flex;gap:8px} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} /* ---------- Auth (login / recuperação / senha) ---------- */ .auth{min-height:100vh;display:grid;place-items:center;padding:20px; background: linear-gradient(120deg, rgba(7,23,45,.97) 0%, rgba(7,23,45,.9) 45%, rgba(7,23,45,.55) 100%), url('/assets/img/backgroud-header.webp') center right / cover no-repeat} .auth-card{width:100%;max-width:400px;background:var(--surface);border-radius:14px;padding:28px;box-shadow:var(--shadow-lg)} .auth-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;margin-bottom:20px;color:var(--ink)} .auth-brand i{color:var(--primary)} .auth-logo{display:flex;justify-content:center;margin:0 0 20px} .auth-logo img{width:168px;height:auto} .auth-logo + .muted{text-align:center} /* Logo Luzix: mostra a versão que casa com o tema ativo (ver marca_logo() em helpers.php) */ .marca-escuro{display:none} :root[data-theme="dark"] .marca-claro{display:none} :root[data-theme="dark"] .marca-escuro{display:inline-block} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .marca-claro{display:none} :root:not([data-theme="light"]) .marca-escuro{display:inline-block} } .auth-links{margin-top:16px;display:flex;justify-content:space-between;font-size:.85rem} /* ---------- Responsivo ---------- */ @media (max-width:992px){ .app-shell{grid-template-columns:minmax(0,1fr); grid-template-areas:"topbar" "main" "footer"} .sidebar{position:fixed;left:0;top:0;bottom:0;width:264px;height:100vh; transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)} .app-shell.is-sidebar-open .sidebar{transform:none} .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(4,12,24,.5);z-index:35} .app-shell.is-sidebar-open .sidebar-overlay{display:block} .topbar-burger{display:inline-flex} } @media (max-width:640px){ .topbar{padding:10px 14px;gap:10px} .page{padding:16px} .user-meta{display:none} .hero{padding:24px;min-height:190px} .hero h1{font-size:1.5rem} .hero-side{display:none} } /* ============================================================ Análise do balancete — cabeçalho + Risco Geral (porta do legado) ============================================================ */ .analise-head-top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .analise-logo{width:56px;height:56px;border-radius:12px;background:var(--primary-soft);color:var(--primary); display:grid;place-items:center;font-size:1.5rem;flex-shrink:0} .analise-head-info{flex:1;min-width:240px} .analise-head-info h2{margin:0;font-size:1.35rem} .analise-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start} .risco-box{display:flex;gap:14px;align-items:stretch;padding:14px 16px;border-radius:10px; border:1px solid var(--border);background:var(--surface-2);margin-top:16px;flex-wrap:wrap} .risco-veredito{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;padding-right:14px; border-right:1px solid var(--border);min-width:120px} .risco-titulo{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .risco-nivel{font-size:1.5rem;font-weight:800;line-height:1.15;white-space:nowrap} .nivel-alto{color:var(--err)} .nivel-medio{color:var(--warn)} .nivel-baixo{color:var(--ok)} .risco-contas{font-size:.68rem;color:var(--muted)} .risco-grupo{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px} .risco-grupo-titulo{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .risco-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px} .risco-pill{text-align:center;padding:8px 4px;border-radius:8px;border:1px solid transparent} .risco-pill .num{display:block;font-size:1.2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums} .risco-pill .lbl{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;margin-top:2px} .pill-vermelho{background:color-mix(in srgb,var(--err) 14%,transparent);border-color:color-mix(in srgb,var(--err) 35%,transparent);color:var(--err)} .pill-amarelo{background:color-mix(in srgb,var(--warn) 16%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)} .pill-verde{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)} .pill-azul{background:color-mix(in srgb,var(--info) 14%,transparent);border-color:color-mix(in srgb,var(--info) 35%,transparent);color:var(--info)} .risco-bar{display:flex;height:7px;border-radius:999px;overflow:hidden;margin:8px 4px 0; background:var(--surface-2);border:1px solid var(--border)} .risco-bar span{display:block;height:100%} .risco-crit{font-size:.72rem;color:var(--muted);font-style:italic;margin:6px 0 4px 4px} .risco-nota{font-size:.68rem;color:var(--muted);font-style:italic;line-height:1.5;margin:0 0 0 4px} .risco-rodape{font-size:.7rem;color:var(--muted);text-align:center;margin:10px 0 0} /* ============================================================ Análise — card Sumário Executivo com abas ============================================================ */ .sumario-card{overflow:hidden;padding:0} .sumario-head{background:linear-gradient(90deg,#1e293b,#334155);color:#fff;padding:16px 22px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .sumario-head-icon{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12); display:grid;place-items:center;color:#fff;font-size:.95rem} .sumario-head h3{margin:0;font-size:.98rem;color:#fff} .sumario-head p{margin:2px 0 0;font-size:.75rem;color:#cbd5e1} .sumario-gerado{font-size:.72rem;color:#cbd5e1} .sumario-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);background:var(--surface-2); padding:0 8px;overflow-x:auto} .sumario-tab{display:inline-flex;align-items:center;gap:6px;padding:12px 16px;font:inherit;font-size:.82rem; font-weight:600;color:var(--muted);border:none;border-bottom:2px solid transparent;background:none; cursor:pointer;white-space:nowrap} .sumario-tab:hover{color:var(--ink)} .sumario-tab.is-active{color:var(--ink);border-bottom-color:var(--primary);background:var(--surface)} .sumario-body{padding:20px 22px} .sumario-bloco{background:var(--surface-2);border:1px solid var(--border);border-radius:10px; padding:14px 16px;margin-bottom:12px;line-height:1.6} .sumario-bloco:last-child{margin-bottom:0} .sumario-note{font-size:.7rem;color:var(--muted);text-align:center;font-style:italic;margin:16px 0 0} .sumario-vazio{text-align:center;padding:44px 20px;color:var(--muted)} /* Cartão de alerta (aba Detalhamento / documentos) */ .alert-item{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px;background:var(--surface)} .alert-item:last-child{margin-bottom:0} .alert-item .alert-header{font-weight:700} .alert-item .alert-meta{color:var(--muted);font-size:.82rem;margin:4px 0 8px} .alert-item p{margin:0 0 6px;line-height:1.55} .alert-item .alert-nota{font-size:.78rem;margin-top:4px} /* ============================================================ Select2 (tema Luzix — claro/escuro pelos tokens) Carregado DEPOIS de select2.min.css para sobrescrever. ============================================================ */ .select2-container{width:100%!important} .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ background:var(--surface);border:1px solid var(--border);border-radius:8px;min-height:40px} .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--ink);line-height:38px;padding-left:11px;padding-right:28px} .select2-container--default .select2-selection--single .select2-selection__arrow{height:38px;right:6px} .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--muted) transparent transparent transparent} .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)} .select2-container--default .select2-selection--single .select2-selection__clear{color:var(--muted);margin-right:4px} .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple{ border-color:var(--primary);outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent)} .select2-container--default .select2-selection--multiple{padding:4px 6px} .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--primary-soft);border:1px solid var(--border);color:var(--ink);border-radius:6px;padding:2px 8px} .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:var(--muted);margin-right:5px} .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--err)} .select2-dropdown{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);color:var(--ink)} .select2-container--default .select2-search--dropdown .select2-search__field{ background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--ink);padding:7px 9px} .select2-container--default .select2-search--dropdown .select2-search__field:focus{outline:none;border-color:var(--primary)} .select2-container--default .select2-results__option{padding:8px 11px;color:var(--ink)} .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected=true]{ background:var(--primary);color:var(--primary-ink)} .select2-container--default .select2-results__option[aria-selected=true]{background:var(--surface-2);color:var(--ink)} .select2-container--default .select2-results__option--disabled{color:var(--muted)} .select2-results__message{color:var(--muted)}