/* * Terpan — Design System (camada de OVERRIDE, white-label). * Carregado por ÚLTIMO no (após load_theme_preference) para vencer o tema Angle. * SÓ UI: não altera markup, layout, disposição de informação nem adiciona componentes. * Alvo = classes reais do app (Angle/Bootstrap 3): .aside/.sidebar, .topnavbar, .panel(+variações), * .table, .btn, .label/.badge. Reversível: remova o stylesheet_link_tag 'terpan_redesign' do layout. * Fonte: stack de sistema (SF Pro/Segoe/Roboto) ~ Inter, sem dependência externa. (Inter self-hosted = hardening futuro.) */ :root{ --tp-bg:#F3F5F7; --tp-surface:#ffffff; --tp-border:#E7EAEE; --tp-border-2:#EEF1F4; --tp-text:#1B2430; --tp-text-2:#5B6675; --tp-text-3:#98A2B3; --tp-primary:#0F7A54; --tp-primary-600:#0C6544; --tp-primary-tint:#E8F4EF; --tp-green:#16A34A; --tp-green-tint:#E7F6EC; --tp-red:#E5484D; --tp-red-tint:#FCECEC; --tp-amber:#B7791F; --tp-amber-tint:#FBF3E2; --tp-blue:#2E6FD6; --tp-blue-tint:#E7EFFA; --tp-radius:14px; --tp-radius-sm:10px; --tp-pill:999px; --tp-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); --tp-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; } /* ============ BASE / TIPOGRAFIA ============ */ body{font-family:var(--tp-font)!important;background:var(--tp-bg)!important;color:var(--tp-text);-webkit-font-smoothing:antialiased;font-size:14px} .wrapper,section > .content-wrapper,.content-wrapper{background:var(--tp-bg)!important} .content-wrapper{padding:22px 24px!important} h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4{color:var(--tp-text);font-weight:700;letter-spacing:-.2px} a{color:var(--tp-primary-600)} .text-muted{color:var(--tp-text-3)!important} /* cabeçalho de página (banner .content-heading) */ /* margin:0 mata o -15/-20px do tema (full-bleed) -> respeita o padding 22/24px do content-wrapper (tira o "colado") */ .content-heading{margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:2px 0 18px!important;color:var(--tp-text)!important;font-size:22px!important;font-weight:700!important} .content-heading small{color:var(--tp-text-2)!important;font-weight:400} /* ============ TOPBAR (.topnavbar) — mata o azul do tema: a cor sólida + gradiente estão em .nav-wrapper E .navbar-header (não só .topnavbar); por isso cobre os 3 + background-image:none */ .topnavbar,.topnavbar-wrapper,.topnavbar .nav-wrapper,.topnavbar .navbar-header{ background:var(--tp-surface)!important;background-image:none!important;box-shadow:none!important } .topnavbar{border-bottom:1px solid var(--tp-border)!important} .topnavbar .navbar-nav > li > a,.topnavbar .navbar-nav > .open > a{color:var(--tp-text-2)!important;border-radius:9px;margin:8px 2px;height:38px;line-height:20px;padding:9px 11px!important;box-shadow:none!important} .topnavbar .navbar-nav > li > a:hover,.topnavbar .navbar-nav > li.open > a,.topnavbar .navbar-nav > .open > a:hover,.topnavbar .navbar-nav > .open > a:focus{background:var(--tp-border-2)!important;color:var(--tp-text)!important} .topnavbar .navbar-nav > li > a em{color:inherit!important} /* marca: logo Terpan + wordmark + label ERP (igual ao mockup) */ .topnavbar .navbar-brand{display:flex!important;align-items:center;height:58px;padding:0 8px 0 18px!important;float:none} .brand-logo,.brand-logo-collapsed{padding:0!important;margin:0!important} .tp-brand{display:flex;align-items:center;gap:9px} .tp-mark{width:26px;height:26px;display:block} .tp-wordmark{font-weight:700;font-size:17px;color:var(--tp-text)!important;letter-spacing:-.3px;line-height:1} .tp-erp{font-size:10px;font-weight:700;color:var(--tp-primary)!important;background:var(--tp-primary-tint);padding:2px 6px;border-radius:5px;letter-spacing:.03em;line-height:1.4} /* ============ SIDEBAR (.aside/.sidebar) ============ */ .aside,.aside-inner,.sidebar{background:var(--tp-surface)!important;border-right:1px solid var(--tp-border)} .sidebar > .nav{padding-top:12px!important} /* respiro do topo (o bloco de usuário removido dava esse espaço) */ .sidebar .nav > li > a{color:var(--tp-text-2)!important;font-weight:500;border-radius:9px;margin:2px 10px;padding:9px 12px!important} .sidebar .nav > li > a > em,.sidebar .nav > li > a > .fas,.sidebar .nav > li > a > i{color:var(--tp-text-3)!important} .sidebar .nav > li > a:hover{background:var(--tp-border-2)!important;color:var(--tp-text)!important} .sidebar .nav > li.active > a,.sidebar .nav > li > a.active{background:var(--tp-primary-tint)!important;color:var(--tp-primary-600)!important;font-weight:600} .sidebar .nav > li.active > a > em,.sidebar .nav > li.active > a > .fas,.sidebar .nav > li.active > a > i{color:var(--tp-primary-600)!important} .sidebar .nav > li.active,.sidebar li.active > a{box-shadow:none!important} /* linha vertical de acento (restaurada, em verde Terpan): todos com borda transparente p/ não deslocar, ativo verde */ .sidebar .nav > li{border-left:3px solid transparent!important} .sidebar .nav > li.active{border-left-color:var(--tp-primary)!important} .sidebar .nav > li.nav-heading{color:var(--tp-text-3)!important;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;font-weight:600} /* bloco do usuário (avatar + "Olá ...") REMOVIDO da sidebar — sem ação, poluía o painel. Reversível: apague esta regra. */ .has-user-block{display:none!important} /* badge/contador no menu */ .sidebar .nav > li > a > .badge,.sidebar .badge{background:var(--tp-primary)!important;color:#fff!important;border-radius:var(--tp-pill)} /* ---- SIDEBAR: botão-troca de módulo (rótulo = módulo selecionado + chevron animado) ---- */ /* o botão-troca mostra o módulo atual em destaque; o dropdown (#modules) troca de módulo */ .sidebar .nav > li.tp-module-item{border-left-color:transparent!important} .sidebar .nav > li.tp-module-item > a.tp-module-switch{ display:flex!important;align-items:center;gap:9px; background:var(--tp-primary-tint)!important;color:var(--tp-primary-600)!important;font-weight:700!important; margin:2px 10px 8px!important;padding:11px 12px!important;border-radius:11px!important } .sidebar .nav > li.tp-module-item > a.tp-module-switch:hover{background:var(--tp-primary-tint)!important;filter:brightness(.98)} .sidebar .nav > li.tp-module-item > a.tp-module-switch > i:first-child{color:var(--tp-primary-600)!important} .sidebar .nav > li.tp-module-item > a.tp-module-switch:after{display:none!important} /* mata o bullet do tema */ .tp-module-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* chevron: animação suave ao abrir/fechar o dropdown (aria-expanded controlado pelo Bootstrap collapse) */ .tp-switch-caret{margin-left:auto;font-size:11px!important;color:var(--tp-primary-600)!important;transition:transform .25s ease} .tp-module-switch[aria-expanded="true"] .tp-switch-caret{transform:rotate(180deg)} /* item do módulo atual dentro do dropdown */ .sidebar-subnav > li.tp-module-current > a{background:var(--tp-primary-tint)!important;color:var(--tp-primary-600)!important;font-weight:600} /* sidebar recolhida (só ícones): esconde nome e chevron */ .aside-collapsed .tp-switch-caret,.aside-collapsed-text .tp-switch-caret, .aside-collapsed .tp-module-name,.aside-collapsed-text .tp-module-name{display:none!important} /* ---- SIDEBAR: item "Premium" (nível 2) — rótulo elipsa, selo sempre inteiro (não corta) ---- */ .sidebar .nav > li > a > .tp-mi-premium{display:flex;align-items:center;gap:8px;width:100%;min-width:0} .sidebar .nav .tp-mi-premium > i{flex:0 0 auto;color:var(--tp-text-3)!important} .sidebar .nav .tp-mi-premium > .tp-mi-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar .nav .tp-mi-premium > .tp-premium{flex:0 0 auto;font-size:9.5px!important;font-weight:700;line-height:1;padding:3px 7px!important;border-radius:var(--tp-pill);background:var(--tp-primary)!important;color:#fff!important;text-transform:uppercase;letter-spacing:.03em} .sidebar .nav > li.active > a .tp-mi-premium > i{color:var(--tp-primary-600)!important} /* sidebar recolhida: no modo só-ícone, esconde rótulo e selo do item premium */ .aside-collapsed .tp-mi-premium > .tp-mi-label,.aside-collapsed-text .tp-mi-premium > .tp-mi-label, .aside-collapsed .tp-mi-premium > .tp-premium,.aside-collapsed-text .tp-mi-premium > .tp-premium{display:none!important} /* ============ PANEL -> CARD ============ */ /* overflow:VISIBLE (não hidden): overflow:hidden clipava popups internos (datepicker, dropdowns) dentro do card. Os cantos arredondados são preservados arredondando os FILHOS de topo/base (abaixo). */ .panel{background:var(--tp-surface)!important;border:1px solid var(--tp-border)!important;border-radius:var(--tp-radius)!important;box-shadow:var(--tp-shadow)!important;overflow:visible} .panel-transparent{background:transparent!important;border:0!important;box-shadow:none!important} /* arredonda os cantos dos filhos p/ casar o raio do .panel (equivale ao overflow:hidden, sem clipar popups) */ .panel > .panel-heading:first-child{border-top-left-radius:var(--tp-radius)!important;border-top-right-radius:var(--tp-radius)!important} .panel > .panel-body:first-child{border-top-left-radius:var(--tp-radius)!important;border-top-right-radius:var(--tp-radius)!important} .panel > .panel-body:last-child{border-bottom-left-radius:var(--tp-radius)!important;border-bottom-right-radius:var(--tp-radius)!important} .panel > .panel-footer:last-child{border-bottom-left-radius:var(--tp-radius)!important;border-bottom-right-radius:var(--tp-radius)!important} .panel > .panel-wrapper:last-child > .panel-body:last-child{border-bottom-left-radius:var(--tp-radius)!important;border-bottom-right-radius:var(--tp-radius)!important} /* cabeçalho de card: sempre branco + texto escuro (mata os headings coloridos) */ .panel > .panel-heading, .panel-default > .panel-heading,.panel-primary > .panel-heading,.panel-success > .panel-heading, .panel-info > .panel-heading,.panel-warning > .panel-heading,.panel-danger > .panel-heading, .panel-green > .panel-heading{ background:var(--tp-surface)!important;color:var(--tp-text)!important; border-bottom:1px solid var(--tp-border-2)!important;border-radius:0!important;padding:15px 18px!important } .panel-title{color:var(--tp-text)!important;font-weight:650;font-size:14.5px} .panel-title i,.panel-heading .panel-title i{color:var(--tp-primary)!important} .panel-body{padding:18px!important;background:var(--tp-surface)!important;color:var(--tp-text)} .panel-footer{background:var(--tp-surface)!important;border-top:1px solid var(--tp-border-2)!important} /* botão de colapsar (minus) do heading */ .panel-heading [data-tool="panel-collapse"]{color:var(--tp-text-3)!important} /* ---- Dashboard financeiro: mini-cards de saldo por banco (col-md-2, estreitos) ---- O valor estava CORTANDO: o `.panel-body{padding:18px!important}` acima anulava o `pv-sm ph` (menos padding) do card, e o `.panel{overflow:hidden}` clipava o que sobrava. Aqui: devolve o padding enxuto, tira o clip e ajusta a fonte p/ caber o valor INTEIRO na coluna estreita. */ /* Cards MAIORES (col-md-3 na view) + fonte MAIOR, com o valor em UMA linha (sem quebrar). Mantém as BORDAS ARREDONDADAS: o .panel segue com overflow:hidden (recorta o card no raio). O corte do valor/nome vinha do overflow:hidden que o Bootstrap põe no .media -> destravamos SÓ ele (e o .media-body), não o card. Como o card é largo o bastante, o valor cabe sem tocar a borda. */ /* alinhamento: os cards de banco viram um grid FLEX. O grid de FLOAT do Bootstrap escalonava quando os nomes tinham alturas diferentes (um card alto "prendia" o próximo). flex-wrap = linhas certinhas; align-items:stretch = cards da mesma linha com ALTURA IGUAL. */ .tp-bank-cards{display:flex;flex-wrap:wrap;align-items:stretch} .tp-bank-cards > [class*="col-"]{display:flex} .tp-bank-cards > [class*="col-"] > .tp-bank-card{width:100%} @media (max-width:767px){.tp-bank-cards > [class*="col-"]{width:100%}} .tp-bank-card > .panel-body{padding:16px 16px!important} .tp-bank-card .media{overflow:visible!important} .tp-bank-card .media-body{min-width:0;overflow:visible!important} .tp-bank-card .media-body > h4{font-size:17px!important;letter-spacing:-.2px!important;line-height:1.25;margin:0 0 2px!important;font-weight:700!important} .tp-bank-card .media-body > h4 > p{margin:0!important;white-space:nowrap} .tp-bank-card .media-body > .text-muted{font-size:12px!important;line-height:1.3;white-space:normal} /* ---- CARDS DE MÉTRICA (tiles coloridos -> card branco c/ acento) ---- */ /* número */ .panel-heading .text-md,.panel-heading .text-lg{color:var(--tp-text)!important;font-weight:700!important;letter-spacing:-.5px;font-size:26px!important} .panel-success > .panel-heading .text-md,.panel-green > .panel-heading .text-md{color:var(--tp-green)!important} .panel-danger > .panel-heading .text-md,.panel-warning > .panel-heading .text-md{color:var(--tp-red)!important} .panel-heading p.m0,.panel-heading p{color:var(--tp-text-2)!important} /* ícone grande (fa-3x/4x/5x no heading) -> chip tintado pequeno */ .panel-heading [class*="fa-3x"],.panel-heading [class*="fa-4x"]{ font-size:18px!important;width:38px;height:38px;line-height:38px;text-align:center; border-radius:10px;background:var(--tp-primary-tint);color:var(--tp-primary)!important;display:inline-block } .panel-success > .panel-heading [class*="fa-3x"],.panel-green > .panel-heading [class*="fa-3x"]{background:var(--tp-green-tint);color:var(--tp-green)!important} .panel-danger > .panel-heading [class*="fa-3x"],.panel-warning > .panel-heading [class*="fa-3x"]{background:var(--tp-red-tint);color:var(--tp-red)!important} .panel-info > .panel-heading [class*="fa-3x"],.panel-primary > .panel-heading [class*="fa-3x"]{background:var(--tp-blue-tint);color:var(--tp-blue)!important} /* ============ BOTÕES ============ */ .btn{border-radius:var(--tp-radius-sm)!important;font-weight:600!important;border:1px solid transparent;box-shadow:none!important;padding:8px 14px} .btn-success,.btn-green{background:var(--tp-green)!important;border-color:var(--tp-green)!important;color:#fff!important} .btn-primary{background:var(--tp-primary)!important;border-color:var(--tp-primary)!important;color:#fff!important} .btn-info{background:var(--tp-blue)!important;border-color:var(--tp-blue)!important;color:#fff!important} .btn-warning{background:var(--tp-amber-tint)!important;border-color:#F0E2C0!important;color:var(--tp-amber)!important} .btn-danger{background:var(--tp-red-tint)!important;border-color:#F3D2D3!important;color:var(--tp-red)!important} .btn-default{background:var(--tp-surface)!important;border-color:var(--tp-border)!important;color:var(--tp-text-2)!important} .btn-success:hover,.btn-primary:hover,.btn-info:hover{filter:brightness(.95)} /* ============ LABELS/BADGES -> PILLS ============ */ .label,.badge{border-radius:var(--tp-pill)!important;font-weight:600!important;padding:3px 9px!important;font-size:11.5px!important} .label-default,.badge{background:var(--tp-border-2)!important;color:var(--tp-text-2)!important} .label-success,.label-green{background:var(--tp-green-tint)!important;color:var(--tp-green)!important} .label-danger{background:var(--tp-red-tint)!important;color:var(--tp-red)!important} .label-warning{background:var(--tp-amber-tint)!important;color:var(--tp-amber)!important} .label-info,.label-primary{background:var(--tp-blue-tint)!important;color:var(--tp-blue)!important} /* ============ TABELAS ============ */ .table{color:var(--tp-text-2);font-size:13px} .table > thead > tr > th{background:transparent!important;border-bottom:1px solid var(--tp-border)!important;border-top:0!important;color:var(--tp-text-3)!important;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:10px 14px!important} .table > tbody > tr > td{border-top:1px solid var(--tp-border-2)!important;padding:12px 14px!important;vertical-align:middle} .table-bordered,.table-bordered > tbody > tr > td,.table-bordered > thead > tr > th{border:0!important;border-bottom:1px solid var(--tp-border-2)!important} .table-striped > tbody > tr:nth-of-type(odd){background:transparent!important} .table-hover > tbody > tr:hover{background:#FAFBFC!important} /* ============ ABAS (.nav-tabs) ============ */ .nav-tabs{border-bottom:1px solid var(--tp-border)!important} .nav-tabs > li > a{border:0!important;color:var(--tp-text-3)!important;font-weight:600;border-radius:0} .nav-tabs > li.active > a,.nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:hover{color:var(--tp-primary-600)!important;border:0!important;border-bottom:2px solid var(--tp-primary)!important;background:transparent!important} /* ============ FORMS (toque leve) ============ */ .form-control{border-radius:var(--tp-radius-sm)!important;border:1px solid var(--tp-border)!important;box-shadow:none!important;color:var(--tp-text)} .form-control:focus{border-color:var(--tp-primary)!important;box-shadow:0 0 0 3px var(--tp-primary-tint)!important} /* ============ ALERTS ============ */ .alert{border-radius:var(--tp-radius-sm)!important;border:1px solid var(--tp-border)!important} .alert-warning{background:var(--tp-amber-tint)!important;border-color:#F0E2C0!important;color:#7A5B12!important} .alert-success{background:var(--tp-green-tint)!important;border-color:#CDEAD6!important;color:#166534!important} .alert-danger{background:var(--tp-red-tint)!important;border-color:#F3D2D3!important;color:#9B2C2C!important} .alert-info{background:var(--tp-blue-tint)!important;border-color:#CFE0F5!important;color:#1E4E8C!important} /* ============ MEDIA (mini-cards de conta bancária) ============ */ .media .media-body h4{color:var(--tp-text)!important;font-weight:700} /* ============ ÁREA PÚBLICA (login/cadastro/recuperação — layout devise) ============ Escopo TOTALMENTE isolado em body.tp-auth-page / .tp-auth-card / .tp-auth-foot p/ NÃO tocar a área logada (que compartilha este arquivo). Substitui o tema antigo (Angle) por cards limpos + marca Terpan. */ body.tp-auth-page{ background:radial-gradient(1100px 460px at 50% -8%, var(--tp-primary-tint), rgba(232,244,239,0) 60%), var(--tp-bg)!important; min-height:100vh } .tp-auth-page .wrapper{padding-top:5vh} /* card do formulário */ .tp-auth-card{border-radius:var(--tp-radius)!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 30px rgba(16,24,40,.08)!important;overflow:hidden} .tp-auth-card > .panel-heading.tp-auth-head{padding:30px 28px 4px!important;text-align:center;border-bottom:0!important;background:var(--tp-surface)!important} .tp-auth-head .tp-brand{display:inline-flex;align-items:center;gap:10px} .tp-auth-head .tp-mark{width:40px!important;height:40px!important} .tp-auth-head .tp-erp{font-size:12px;font-weight:700;color:var(--tp-primary)!important;background:var(--tp-primary-tint);padding:3px 8px;border-radius:6px;letter-spacing:.03em;line-height:1.4} .tp-auth-card .panel-body{padding:14px 28px 26px!important} /* subtítulo "Entrar no sistema" (o banner

das telas) */ .tp-auth-card .panel-body > p.text-center:first-child{color:var(--tp-text-3)!important;font-size:13.5px;margin:0 0 16px;font-weight:400} .tp-auth-card .panel-body > p.text-center:first-child .fas{color:var(--tp-text-3)!important} /* inputs */ .tp-auth-card .form-control{height:46px!important;border:1px solid var(--tp-border)!important;border-radius:var(--tp-radius-sm)!important;box-shadow:none!important;color:var(--tp-text)!important;background:#fff!important;font-size:14.5px;padding-left:42px} .tp-auth-card .form-control::placeholder{color:var(--tp-text-3)!important} .tp-auth-card .form-control:focus{border-color:var(--tp-primary)!important;box-shadow:0 0 0 3px var(--tp-primary-tint)!important} .tp-auth-card .has-feedback .form-control-feedback{width:42px;line-height:46px;color:var(--tp-text-3)!important;left:0;right:auto;text-align:center} /* botão entrar/cadastrar — verde arredondado, largura cheia */ .tp-auth-card .btn-success{border-radius:var(--tp-pill)!important;height:46px;font-weight:700!important;font-size:15px} /* links (esqueci senha / confirmação / desbloqueio / entrar) */ .tp-auth-card .text-center a{color:var(--tp-primary-600)!important;font-size:13px;line-height:2.1;text-decoration:none} .tp-auth-card .text-center a:hover{text-decoration:underline} .tp-auth-card .text-center a .fas{color:var(--tp-primary)!important;margin-right:4px} /* rodapé (website + copyright) — sem o painel escuro antigo */ .tp-auth-foot.panel{background:transparent!important;border:0!important;box-shadow:none!important} .tp-auth-foot .p-lg{padding:16px!important} .tp-auth-foot a{color:var(--tp-text-3)!important;font-size:12px;text-decoration:none} .tp-auth-foot a:hover{color:var(--tp-text-2)!important;text-decoration:underline}