/* ============================================================ Tema escuro do Portal do Colaborador. Ativado adicionando a classe .dark em (via JS + localStorage). Escopo todo sob .dark para não afetar o tema claro. ============================================================ */ :root { --ph-bg: #0f1115; --ph-card: #1b1e24; --ph-panel: #23272e; --ph-border: #2c313a; --ph-text: #e5e7eb; --ph-muted: #9aa3af; --ph-accent: #6ea8fe; } /* ---------- Base ---------- */ .dark body { background-color: var(--ph-bg) !important; background-image: none !important; color: var(--ph-text); } .dark main { background-image: none !important; background-color: var(--ph-bg) !important; border-bottom-color: var(--ph-border) !important; } .dark a:not(.btn) { color: #6ea8fe; } .dark hr { border-top-color: var(--ph-border); } /* ---------- Textos utilitários ---------- */ .dark .text-dark { color: var(--ph-text) !important; } .dark .text-muted { color: var(--ph-muted) !important; } .dark .text-black, .dark .text-body { color: var(--ph-text) !important; } /* ---------- Navbar — geral ---------- */ /* Navbar é sempre escura (claro e escuro do site); o Bootstrap padrão (.navbar-dark) deixa o texto do link com só 50% de opacidade, o que fica fraco demais no fundo bem escuro. Força texto bem visível independente do tema do site. */ .navbar.topo .navbar-nav .nav-link, .navbar.topo .brand-text { color: rgba(255,255,255,.85) !important; } .navbar.topo .navbar-nav .nav-link:hover, .navbar.topo .navbar-nav .nav-link:focus, .navbar.topo .navbar-nav .nav-link.active { color: #fff !important; } .navbar.topo .navbar-brand { color: #fff !important; } .dark .navbar.topo { background-color: var(--ph-card) !important; color: var(--ph-text); border-bottom: 1px solid var(--ph-border); } .dark .navbar.topo .navbar-brand, .dark .navbar.topo .nav-link, .dark .navbar.topo .brand-text { color: var(--ph-text) !important; } .dark .navbar.topo .nav-link:hover { color: #fff !important; } .dark .navbar-toggler { border-color: var(--ph-border); } .dark .topo .navbar-nav .nav-link:hover, .dark .topo .navbar-nav .nav-link:focus { background: rgba(255,255,255,.07) !important; } .dark .topo .navbar-nav .nav-link.active { background: rgba(255,255,255,.09) !important; color: #fff !important; } .dark .topo .navbar-collapse, .dark .topo .navbar-actions { border-top-color: var(--ph-border) !important; } /* ---------- Navbar — sidebar mobile (max-width 991px) ---------- O style-mobile.css transforma .navbar-collapse num drawer fixed. */ @media (max-width: 991px) { .dark .navbar-collapse { background-color: var(--ph-card) !important; color: var(--ph-text) !important; border-right: 1px solid var(--ph-border) !important; } /* Todos os links e textos dentro do drawer */ .dark .navbar-collapse .nav-link, .dark .navbar-collapse .navbar-nav .nav-link { color: var(--ph-text) !important; } .dark .navbar-collapse .nav-link:hover, .dark .navbar-collapse .nav-link:focus { color: #fff !important; background: rgba(255,255,255,.07) !important; } .dark .navbar-collapse .nav-link.active { color: #fff !important; background: rgba(255,255,255,.09) !important; } /* Botão de tema dentro do drawer */ .dark .navbar-collapse .theme-toggle { border-color: var(--ph-border) !important; background: var(--ph-panel) !important; color: var(--ph-text) !important; } /* User menu / botões dentro do drawer */ .dark .navbar-collapse .btn-secondary { background-color: #2c313a !important; border-color: #3a4049 !important; color: var(--ph-text) !important; } .dark .navbar-collapse .btn-secondary:hover { background-color: #3a4049 !important; color: #fff !important; } .dark .navbar-collapse .user-name, .dark .navbar-collapse .navbar-actions { color: var(--ph-text) !important; } /* Linha divisória interna */ .dark .navbar-collapse .navbar-actions { border-top-color: var(--ph-border) !important; } } /* ---------- Cards ---------- */ .dark .card { background-color: var(--ph-card); border-color: var(--ph-border); color: var(--ph-text); } .dark .card-header, .dark .card-footer, .dark .bg-light { background-color: var(--ph-panel) !important; border-color: var(--ph-border) !important; color: var(--ph-text) !important; } .dark .card-portal { border-color: var(--ph-border); } .dark .shadow-sm { box-shadow: 0 .125rem .35rem rgba(0,0,0,.5) !important; } /* ---------- Formulários ---------- */ .dark .form-control, .dark .custom-select { background-color: var(--ph-panel); border-color: var(--ph-border); color: var(--ph-text); } .dark .form-control:focus { background-color: var(--ph-panel); color: #fff; border-color: var(--ph-accent); box-shadow: 0 0 0 .2rem rgba(110,168,254,.15); } .dark .form-control:disabled, .dark .form-control[readonly] { background-color: #181b20; color: var(--ph-muted); } .dark .form-control::placeholder { color: #6b7280; } .dark .input-group-text { background-color: var(--ph-panel); border-color: var(--ph-border); color: var(--ph-text); } /* ---------- Tabelas ---------- */ .dark .table { color: #eaecf0; } .dark .table td, .dark .table th, .dark .table-bordered, .dark .table-bordered td, .dark .table-bordered th { border-color: #343b45; } .dark .table thead th { color: #d7dde6; border-bottom-color: #3a4049; } .dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.05); } .dark .table-hover tbody tr:hover { background-color: rgba(255,255,255,.09); color: #ffffff; } /* ---------- Abas ---------- */ .dark .nav-tabs { border-bottom-color: var(--ph-border); } .dark .nav-tabs .nav-link { color: var(--ph-muted); } .dark .nav-tabs .nav-link:hover { border-color: transparent; color: var(--ph-text); } .dark .nav-tabs .nav-link.active { background-color: var(--ph-card); border-color: var(--ph-border) var(--ph-border) var(--ph-card); color: var(--ph-text); } /* ---------- Modais ---------- */ .dark .modal-content { background-color: var(--ph-card); color: var(--ph-text); } .dark .modal-header, .dark .modal-footer { border-color: var(--ph-border); } .dark .close { color: var(--ph-text); text-shadow: none; opacity: .8; } .dark .close:hover { color: #fff; } /* ---------- Dropdowns ---------- */ .dark .dropdown-menu { background-color: var(--ph-card); border-color: var(--ph-border); color: var(--ph-text); } .dark .dropdown-item { color: var(--ph-text); } .dark .dropdown-item:hover, .dark .dropdown-item:focus { background-color: var(--ph-panel); color: #fff; } .dark .dropdown-divider { border-top-color: var(--ph-border); } /* ---------- Botões (secundários/outline no escuro) ---------- */ .dark .btn-secondary { background-color: #2c313a; border-color: #3a4049; color: var(--ph-text); } .dark .btn-secondary:hover, .dark .btn-secondary:focus, .dark .btn-secondary:active, .dark .show > .btn-secondary.dropdown-toggle { background-color: #3a4049; border-color: #464d57; color: #fff; } .dark .btn-outline-secondary { color: var(--ph-text); border-color: #3a4049; } .dark .btn-outline-secondary:hover { background-color: #2c313a; color: #fff; } /* Itens do dropdown do usuário (Minha Conta / Sair) no escuro */ .dark .dropdown-menu .btn-secondary { background-color: #2c313a; } .dark .dropdown-menu .btn-secondary:hover { background-color: #3a4049; } /* ---------- Botões de assinar (base, claro) ---------- */ .btn-assinar { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1rem; border: 1px solid #e3e6ea; border-radius: .75rem; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-decoration: none; cursor: pointer; } .btn-assinar:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); text-decoration: none; } .btn-assinar .ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; } .btn-assinar .txt { display: flex; flex-direction: column; line-height: 1.25; } .btn-assinar .txt .t { font-weight: 700; color: #212529; } .btn-assinar .txt .s { font-size: .78rem; color: #6c757d; } /* Manual: estilo warning (âmbar) */ .btn-assinar-manual { background: #fffbf0; border: 2px solid #ffc107; border-left: 4px solid #e6a800; border-radius: .6rem; padding: .85rem 1rem; } .btn-assinar-manual:hover { background: #fff8e1; border-color: #e6a800; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(230,168,0,.2); } .btn-assinar-manual .ico { background: #fff3cd; color: #856404; width: 42px; height: 42px; font-size: 1.2rem; border-radius: .5rem; } .btn-assinar-manual .txt .t { color: #533f03; font-size: .95rem; } .btn-assinar-manual .txt .s { color: #856404; font-size: .78rem; } /* ---------- Botões de assinar (escuro) ---------- */ .dark .btn-assinar { background: var(--ph-card); border-color: var(--ph-border); } .dark .btn-assinar:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.5); } .dark .btn-assinar .txt .t { color: var(--ph-text); } .dark .btn-assinar .txt .s { color: var(--ph-muted); } .dark .btn-assinar-manual { background: rgba(255,193,7,.08); border-color: #d4a017; border-left-color: #e6a800; } .dark .btn-assinar-manual:hover { background: rgba(255,193,7,.14); box-shadow: 0 4px 12px rgba(230,168,0,.15); } .dark .btn-assinar-manual .ico { background: rgba(255,193,7,.15); color: #ffc107; } .dark .btn-assinar-manual .txt .t { color: #ffe082; } .dark .btn-assinar-manual .txt .s { color: #ffd54f; } /* ---------- Canvas de assinatura ---------- */ /* ── Canvas de assinatura — altura responsiva ──────────────── Base (mobile portrait): 200px Tablet portrait (≥768px): 300px — área generosa para assinar Phone landscape (<768px): 130px — compacto para não esconder botões Tablet landscape (≥768px): 230px — Tab A7/A8/A11 em deitado Desktop (≥992px): 240px — mantém proporção confortável ──────────────────────────────────────────────────────────── */ .sig-canvas { height: 200px; background: #f8f9fa; display: block; } /* Tablet portrait */ @media (min-width: 768px) and (orientation: portrait) { .sig-canvas { height: 300px; } } /* Phone landscape */ @media (max-width: 767px) and (orientation: landscape) { .sig-canvas { height: 130px; } } /* Tablet landscape — Tab A11 e similares */ @media (min-width: 768px) and (orientation: landscape) { .sig-canvas { height: 230px; } } /* Desktop */ @media (min-width: 992px) { .sig-canvas { height: 240px; } } /* Dark mode: fundo escuro — o strokeStyle é ajustado via JS (isDark()) */ .dark .sig-canvas, .dark #signature-canvas, .dark #signature-canvas-espelho { background: #23272e !important; border-color: var(--ph-border) !important; } /* ---------- Tabela do espelho ---------- */ .dark .espelho-tabela thead th { background: #2f3640; color: #dfe4ea; border-bottom-color: #454d59; } .dark .espelho-tabela td { border-color: #343b45; color: #eaecf0; } .dark .espelho-tabela tbody tr:not(.linha-descanso):nth-child(even) td { background-color: rgba(255,255,255,.035); } .dark .espelho-tabela tbody tr:hover td { background-color: rgba(255,255,255,.09); color: #fff; } .dark .espelho-tabela .linha-descanso td { background-color: transparent; } .dark .espelho-tabela .data-col { color: #ffffff; } .dark .espelho-tabela .text-muted { color: #aeb6c2 !important; } .dark .espelho-tabela tfoot .total-row td { background: #2f3640; border-top-color: #454d59; color: #ffffff; } .dark .espelho-tabela .badge-extra { background: rgba(40,167,69,.22); color: #8fe6ab; } .dark .espelho-tabela .just-col { color: #aeb6c2; } .dark .badge-light { background-color: var(--ph-panel) !important; color: var(--ph-text) !important; border-color: var(--ph-border) !important; } /* ---------- Alerts ---------- */ .dark .alert-info { background-color: #10212b; border-color: #1b3a4b; color: #9fd3e6; } .dark .alert-warning { background-color: #2a2410; border-color: #4b4117; color: #e6cf7a; } .dark .alert-success { background-color: #102417; border-color: #1d4a30; color: #8fe0ad; } .dark .alert-danger { background-color: #2a1113; border-color: #5a1d20; color: #f1a3a6; } /* ---------- Botão PDF assinado (dentro do alert-success) ---------- */ .btn-pdf-assinado { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: .5rem; font-size: .82rem; font-weight: 700; background: #1a7a3f; color: #fff !important; border: none; text-decoration: none !important; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: background .15s, box-shadow .15s, transform .1s; cursor: pointer; } .btn-pdf-assinado:hover { background: #155f31; color: #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,.22); transform: translateY(-1px); text-decoration: none !important; } .btn-pdf-assinado:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.18); } .dark .btn-pdf-assinado { background: #2a7a4a; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .dark .btn-pdf-assinado:hover { background: #358a57; } /* ---------- Login (tela standalone) ---------- */ /* Espaçamento do título (corrige o texto colado/sobreposto à logo). */ .login-title { margin-bottom: 1rem; font-size: 1rem; line-height: 1.2; /* color: #3e3e3e; */ } .dark.text-center body, .dark body.text-center { background-color: var(--ph-bg) !important; } .dark .form-signin { background-color: var(--ph-card) !important; color: var(--ph-text); border: 1px solid var(--ph-border); } .dark .form-signin .login-title { color: var(--ph-text); } .dark .texto-rodape { color: var(--ph-muted); } /* Mantém a logo legível no escuro (a imagem tem fundo claro próprio). */ .dark .logo { border-radius: 6px; margin: 1rem 1rem;} /* ---------- Botão de tema ---------- */ /* Base: usada fora do navbar (ex.: tela de login), onde o fundo ao redor é claro. */ .theme-toggle { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.06); color: #3e3e3e; border-radius: 50rem; padding: .25rem .6rem; font-size: .8rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { background: rgba(0,0,0,.12); } .dark .theme-toggle { border-color: var(--ph-border); background: var(--ph-panel); color: var(--ph-text); } .dark .theme-toggle:hover { background: #2c313a; } .theme-toggle .theme-icon { color: #b8860b; } .dark .theme-toggle .theme-icon { color: var(--ph-accent); } /* Navbar: fundo é sempre escuro (claro e escuro do site) — botão usa base clara. */ .navbar.topo .theme-toggle, .navbar-collapse .theme-toggle { border: 1px solid rgba(255,255,255,.3) !important; background: rgba(255,255,255,.1) !important; color: #f5f5f5 !important; } .navbar.topo .theme-toggle:hover, .navbar-collapse .theme-toggle:hover { background: rgba(255,255,255,.2) !important; } .navbar.topo .theme-toggle .theme-icon, .navbar-collapse .theme-toggle .theme-icon { color: #ffd166 !important; } .dark .navbar.topo .theme-toggle, .dark .navbar-collapse .theme-toggle { border-color: var(--ph-border) !important; background: var(--ph-panel) !important; color: var(--ph-text) !important; } .dark .navbar.topo .theme-toggle .theme-icon, .dark .navbar-collapse .theme-toggle .theme-icon { color: var(--ph-accent) !important; } /* ---------- Resultado de importação de holerites ---------- */ .resultado-holerite-card { border: none; overflow: hidden; } .resultado-holerite-header, .resultado-ponto-header { background: linear-gradient(135deg, #1a7a40, #135f30); color: #fff; padding: .85rem 1rem; } .resultado-holerite-sub { opacity: .8; margin-top: .1rem; } .resultado-holerite-table thead tr { border-top: none; } .resultado-holerite-thead { background: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.06); } .resultado-holerite-thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.06) !important; border-top: none !important; padding-top: .5rem; padding-bottom: .5rem; } .resultado-arquivo-row td { background: rgba(0,0,0,.025) !important; color: #6c757d; border-top: 2px solid rgba(0,0,0,.05) !important; padding-top: .35rem !important; padding-bottom: .35rem !important; } .resultado-falhas { background: rgba(220,53,69,.04); border-top: 1px solid rgba(220,53,69,.2); color: #c0392b; } .resultado-falhas ul { color: #c0392b; } /* dark mode equivalents */ .dark .resultado-holerite-header, .dark .resultado-ponto-header { background: linear-gradient(135deg, #1d6b3a, #124f2b); } .dark .resultado-holerite-thead { background: rgba(255,255,255,.04); border-top-color: var(--ph-border); } .dark .resultado-holerite-thead th { color: var(--ph-muted); border-bottom-color: var(--ph-border) !important; } .dark .resultado-arquivo-row td { background: rgba(255,255,255,.04) !important; color: var(--ph-muted); border-top-color: var(--ph-border) !important; } .dark .resultado-falhas { background: rgba(220,53,69,.08); border-top-color: rgba(220,53,69,.3); color: #f1a3a6; } .dark .resultado-falhas ul { color: #f1a3a6; } /* ---------- DataTable (light mode) ---------- */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: #495057; font-size: .85rem; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { color: #495057; display: flex; align-items: center; gap: .35rem; margin: 0; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { border: 1px solid #dee2e6; background: #fff; color: #495057; padding: .35rem .5rem; border-radius: .25rem; font-size: .85rem; margin: 0 .35rem; } .dataTables_wrapper .dataTables_info { color: #6c757d; font-size: .85rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: #495057; background: #f8f9fa; border: 1px solid #dee2e6; padding: .35rem .65rem; margin: 0 .1rem; border-radius: .25rem; transition: background .15s; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #e9ecef; border-color: #adb5bd; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #495057; color: #fff; border-color: #495057; } /* ---------- DataTable (dark mode) ---------- */ .dark .dataTables_wrapper .dataTables_length, .dark .dataTables_wrapper .dataTables_filter { color: var(--ph-muted); } .dark .dataTables_wrapper .dataTables_length label, .dark .dataTables_wrapper .dataTables_filter label { color: var(--ph-muted); } .dark .dataTables_wrapper .dataTables_length select, .dark .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--ph-border); background: var(--ph-panel); color: var(--ph-text); } .dark .dataTables_wrapper .dataTables_length select::after { background-image: none; } .dark .dataTables_wrapper .dataTables_info { color: var(--ph-muted); } .dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--ph-text); background: rgba(255,255,255,.08); border: 1px solid var(--ph-border); } .dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(255,255,255,.14); border-color: var(--ph-muted); } .dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #5a6b7d; color: #fff; border-color: #5a6b7d; } /* Corrige min-width do style-mobile.css que ultrapassa a tela em celulares */ @media (max-width: 575.98px) { .modal-dialog { min-width: 0 !important; max-width: calc(100% - 1rem) !important; margin: .5rem auto !important; } } /* ============================================================ Login — botão de tema estilizado + fundo dark ============================================================ */ .form-signin .theme-toggle{ display:inline-flex;align-items:center;gap:.4rem; padding:.35rem .75rem;font-size:.8rem;font-weight:600;line-height:1.2; color:#6b4c00;background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.18);border-radius:.5rem;cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.08); } .form-signin .theme-toggle:hover{background:#fff;border-color:rgba(0,0,0,.32);box-shadow:0 2px 6px rgba(0,0,0,.14);} .form-signin .theme-toggle:active{transform:translateY(1px);} .form-signin .theme-toggle .theme-icon{font-size:.95rem;line-height:1;} .dark .form-signin .theme-toggle{color:var(--ph-text);background:var(--ph-panel);border-color:var(--ph-border);box-shadow:0 1px 2px rgba(0,0,0,.45);} .dark .form-signin .theme-toggle:hover{background:#2c313a;border-color:#3a414d;} /* Fundo da pagina no dark (sobrepoe o