/* ============================================================ Tema DUX — padrão do sistema de roteirização (cores, fontes, componentes) Fontes: Quicksand (títulos/botões) + Inter (corpo) — carregadas no . ============================================================ */ :root{ --brand-primary:#D7191E; --brand-primary-hover:#8C0505; --brand-accent:#F58C1E; --brand-secondary:#911E5F; --grad:linear-gradient(135deg,#911E5F 0%,#D7191E 50%,#F58C1E 100%); --text:#111418; --text-2:#5B6470; --border:#E5E7EB; --bg:#F7F7F8; --surface:#FFFFFF; --ok:#1FAE6F; --warn:#B45309; --err:#D7191E; --info:#2563EB; --hover-tint:#FBEDED; --sel-tint:#FCEFEF; --radius:12px; --shadow:0 1px 2px rgba(17,20,24,.04), 0 4px 16px rgba(17,20,24,.06); } *{box-sizing:border-box} html,body{margin:0} body{font-family:Inter,'Segoe UI',sans-serif;font-size:14px;color:var(--text);background:var(--bg)} a{color:var(--brand-primary);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:Quicksand,sans-serif} /* ───────── Topbar (gradiente DUX + logo branca) ───────── */ .topbar{display:flex;align-items:center;gap:16px;padding:0 20px;height:60px; background:var(--grad);box-shadow:var(--shadow);position:sticky;top:0;z-index:40} .topbar .brand{display:flex;align-items:center;gap:10px} .topbar .topbar-logo{height:34px;display:block} .topbar .brand-name{font-family:Quicksand,sans-serif;font-weight:700;color:#fff;font-size:18px;letter-spacing:.3px} .topbar nav{display:flex;gap:2px;flex:1;flex-wrap:wrap;align-items:center} .topbar nav a{color:rgba(255,255,255,.92);padding:7px 12px;border-radius:9px;font-weight:600;font-size:13.5px; font-family:Quicksand,sans-serif} .topbar nav a:hover{background:rgba(255,255,255,.16);color:#fff;text-decoration:none} .topbar nav a.active{background:rgba(255,255,255,.22);color:#fff} .topbar .who{color:#fff;font-size:13px;opacity:.95;font-weight:600;font-family:Quicksand,sans-serif} .topbar .who small{display:block;opacity:.8;font-weight:500;font-size:11px} .topbar .sair{color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:9px;padding:6px 12px; font-size:12.5px;font-weight:600;font-family:Quicksand,sans-serif} .topbar .sair:hover{background:rgba(255,255,255,.2);text-decoration:none} .wrap{max-width:none;margin:22px 0;padding:0 20px} .embedded .topbar{display:none} .embedded .wrap{margin-top:14px} .page-title{font-family:Quicksand,sans-serif;font-size:22px;font-weight:700;color:var(--text);margin:0 0 16px} .page-title small{font-weight:500;color:var(--text-2);font-size:14px} /* ───────── Cards / grids ───────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:18px;margin-bottom:16px} .card h3{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--text); display:flex;align-items:center;gap:8px} .card h3::before{content:"";width:4px;height:16px;border-radius:3px;background:var(--grad)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1100px){.grid4{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.grid2,.grid3,.grid4{grid-template-columns:1fr}} /* ───────── Tabelas ───────── */ table{width:100%;border-collapse:collapse;font-size:13px} thead th{background:#F4F5F7;color:var(--text-2);font-weight:600;text-align:left; padding:9px 11px;border-bottom:1px solid var(--border);position:sticky;top:60px; text-transform:uppercase;font-size:11px;letter-spacing:.4px} tbody td{padding:9px 11px;border-bottom:1px solid var(--border)} tbody tr:nth-child(even) td{background:#FAFAFB} tbody tr:hover td{background:var(--hover-tint)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tfoot th{background:#F4F5F7;padding:9px 11px;border-top:2px solid var(--border);text-align:left} /* ───────── Formulários ───────── */ label{display:block;font-size:12px;color:var(--text-2);margin:8px 0 4px;font-weight:600} input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--border); border-radius:9px;font-size:14px;background:#fff;color:var(--text);font-family:Inter,sans-serif} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(215,25,30,.12)} input:disabled,input[readonly]{background:#F1F2F4;color:var(--text-2)} textarea{min-height:72px;resize:vertical} input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand-primary)} .req{color:var(--brand-primary);font-weight:700} /* ───────── Botões ───────── */ .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:none;border-radius:10px; background:var(--brand-primary);color:#fff;font-family:Quicksand,sans-serif;font-weight:700; font-size:13.5px;line-height:1.15;cursor:pointer;transition:background .15s} .btn:hover{background:var(--brand-primary-hover);text-decoration:none;color:#fff} .btn.accent{background:var(--brand-accent)} .btn.accent:hover{background:#d9760f} .btn.grad{background:var(--grad)} .btn.grad:hover{filter:brightness(.95)} .btn.ghost{background:#fff;color:var(--brand-primary);border:1px solid var(--brand-primary)} .btn.ghost:hover{background:var(--hover-tint);color:var(--brand-primary)} .btn.sm{padding:5px 10px;font-size:12px;border-radius:8px} .btn.danger{background:#fff;color:var(--brand-primary);border:1px solid #F3C9C9} .btn.danger:hover{background:#FCEBEB;color:var(--brand-primary-hover)} .btn[hidden]{display:none} /* o display do .btn sobrepõe o [hidden]; respeita o atributo */ /* ───────── Badges / chips ───────── */ .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700; font-family:Quicksand,sans-serif;background:#F1F2F4;color:var(--text-2)} .badge.brand{background:var(--sel-tint);color:var(--brand-primary-hover)} .badge.ok{background:#E5F7EE;color:var(--ok)} .badge.warn{background:#FEF3C7;color:var(--warn)} .badge.err{background:#FCEBEB;color:var(--brand-primary)} /* ───────── KPIs ───────── */ .kpi{font-family:Quicksand,sans-serif;font-size:26px;font-weight:700;color:var(--text)} .kpi small{display:block;font-family:Inter,sans-serif;font-size:12px;color:var(--text-2);font-weight:600;margin-top:2px} .kpi-card{position:relative;overflow:hidden} .kpi-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)} /* ───────── Abas ───────── */ .tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:16px;flex-wrap:wrap} .tabs .tab{padding:10px 16px;cursor:pointer;border:none;background:none;font-weight:700;font-size:13.5px; font-family:Quicksand,sans-serif;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-2px} .tabs .tab:hover{color:var(--brand-primary)} .tabs .tab.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary)} .tabpane{display:none} .tabpane.active{display:block} /* ───────── Alertas / toolbar ───────── */ .alert{padding:12px 15px;border-radius:10px;margin-bottom:16px;font-weight:600;font-size:13.5px} .alert.err{background:#FCEBEB;color:var(--brand-primary-hover);border:1px solid #F3C9C9} .alert.ok{background:#E5F7EE;color:var(--ok);border:1px solid #B7E4C7} .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap} .spacer{flex:1} .muted{color:var(--text-2)} /* ───────── Login ───────── */ .login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; background:var(--grad)} .login-card{background:#fff;border-radius:18px;padding:34px 30px;width:380px;max-width:100%; box-shadow:0 24px 60px rgba(0,0,0,.25)} .login-card .login-logo{display:block;height:54px;margin:0 auto 8px} .login-card .login-sub{text-align:center;color:var(--text-2);font-size:13px;margin:0 0 22px;font-weight:600; font-family:Quicksand,sans-serif} /* ───────── AG Grid — tema DUX ───────── */ .ag-theme-alpine{ --ag-alpine-active-color:var(--brand-primary); --ag-selected-row-background-color:var(--sel-tint); --ag-row-hover-color:var(--hover-tint); --ag-header-background-color:#F4F5F7; --ag-header-foreground-color:var(--text-2); --ag-odd-row-background-color:#FAFAFB; --ag-border-color:var(--border); --ag-row-border-color:var(--border); --ag-font-family:Inter,sans-serif; --ag-font-size:13px; --ag-grid-size:5px; --ag-cell-horizontal-padding:11px; --ag-range-selection-border-color:var(--brand-primary); --ag-input-focus-border-color:var(--brand-primary); } .ag-theme-alpine .ag-header-cell-text{font-family:Quicksand,sans-serif;font-weight:700; text-transform:uppercase;font-size:11px;letter-spacing:.4px} .ag-theme-alpine .ag-root-wrapper{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)} .ag-theme-alpine .ag-paging-panel{font-family:Quicksand,sans-serif} .grid-clickable .ag-row{cursor:pointer} .dux-grid{width:100%;height:600px} .dux-grid.sm{height:440px} .grid-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .grid-search{max-width:300px} /* ───────── Cartões (mobile): a grade vira lista de cartões ───────── */ .dux-cards{display:flex;flex-direction:column;gap:10px;height:auto;width:100%} .dux-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);padding:12px 14px} .dux-card-main.clicavel{cursor:pointer} .dux-card-title{font-family:Quicksand,sans-serif;font-weight:700;font-size:16px;color:var(--text); margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dux-card-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-top:1px solid var(--border)} .dux-card-row:first-of-type{border-top:none} .dux-card-k{color:var(--text-2);font-size:12.5px;font-weight:600;flex:0 0 auto} .dux-card-v{color:var(--text);font-size:13px;text-align:right;word-break:break-word} .dux-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)} .dux-card-total{background:var(--bg)} .dux-card-total .dux-card-title{font-size:14px} /* FAB: o botão "+ Novo" flutua no canto inferior direito no celular */ @media(max-width:720px){ .btn.fab{position:fixed;right:16px;bottom:16px;z-index:60;border-radius:999px; padding:14px 20px;font-size:15px;box-shadow:0 6px 20px rgba(17,20,24,.28)} } /* ───────── Tom Select (dropdowns pesquisáveis) — tema DUX ───────── */ .ts-wrapper{font-family:Inter,sans-serif} .ts-control{border:1px solid var(--border)!important;border-radius:9px!important; padding:7px 11px!important;font-size:14px;color:var(--text);background:#fff; min-height:40px;box-shadow:none!important} .ts-wrapper.focus .ts-control{border-color:var(--brand-primary)!important; box-shadow:0 0 0 3px rgba(215,25,30,.12)!important} .ts-control input{font-size:14px;color:var(--text)} .ts-control input::placeholder{color:var(--text-2)} .ts-dropdown{border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow); font-size:14px;margin-top:4px;overflow:hidden} .ts-dropdown .option{padding:8px 11px} .ts-dropdown .option.active{background:var(--hover-tint);color:var(--brand-primary-hover)} .ts-dropdown .no-results{padding:8px 11px;color:var(--text-2)} /* item selecionado em select simples = texto puro (sem pílula) */ .ts-wrapper.single .ts-control .item{background:none;color:var(--text);padding:0;font-weight:500} /* itens selecionados em selects múltiplos (ex.: cartórios de acesso) = pílulas */ .ts-wrapper.multi .ts-control .item{background:var(--sel-tint);color:var(--brand-primary-hover); border-radius:6px;padding:2px 8px;font-weight:600} .ts-wrapper.multi .ts-control .item .remove{border-left-color:rgba(140,5,5,.2);color:var(--brand-primary-hover)} .ts-wrapper.single .ts-control:after{border-color:var(--text-2) transparent transparent} /* ───────── AG Grid: linha de TOTAIS (rodapé fixo) ───────── */ .ag-theme-alpine .ag-floating-bottom{font-weight:700;border-top:2px solid var(--border)} .ag-theme-alpine .ag-floating-bottom .ag-row{background:#F4F5F7} .ag-theme-alpine .ag-floating-bottom .ag-cell{color:var(--text)} /* ───────── Modal/popup reutilizável ───────── */ .dux-modal{position:fixed;inset:0;background:rgba(17,20,24,.45);display:flex;align-items:center; justify-content:center;z-index:200;padding:20px} .dux-modal[hidden]{display:none} .dux-modal-card{background:var(--surface);border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.3);padding:22px;width:380px;max-width:100%} .dux-modal-card h3{margin:0 0 6px}