/* ========================================================= iPRC — Layout (Header Topo + Sidebar Lateral) Variáveis, shell, sidebar, navbar, dropdown do perfil ========================================================= */ :root { --iprc-primary: #00448b; --iprc-primary-dark: #052a52; --iprc-active: #0a3f72; --iprc-active-text: #ffffff; --iprc-sidebar-bg: #f4f6f9; --iprc-sidebar-width: 74px; --iprc-navbar-height: 64px; --iprc-shadow: 0 2px 8px rgba(5, 40, 76, 0.12); --iprc-radius: 0.65rem; --iprc-text-muted: #6c757d; } /* ============ Shell ============ */ .app-shell { display: flex; min-height: 100vh; background-color: #ffffff; } .app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin-left: var(--iprc-sidebar-width); } .app-content { flex: 1 1 auto; padding: 1.5rem; padding-top: calc(var(--iprc-navbar-height) + 1.5rem); } /* ============ Sidebar ============ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--iprc-sidebar-width); background-color: var(--iprc-sidebar-bg); display: flex; flex-direction: column; align-items: center; padding: 0.75rem 0; z-index: 1040; border-right: 1px solid #e9ecef; } .sidebar-brand { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 0.8rem; background-color: transparent; color: #fff; margin-bottom: 1rem; text-decoration: none; overflow: hidden; } .sidebar-brand img { width: 100%; height: 100%; object-fit: contain; } .sidebar-brand-lg { width: 64px; height: 64px; } .sidebar-brand:hover { color: #fff; background-color: var(--iprc-primary-dark); } .sidebar-nav { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; } .sidebar-item { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--iprc-radius); color: var(--iprc-text-muted); text-decoration: none; border: none; background: transparent; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-item i { font-size: 1.35rem; line-height: 1; } /* Remove o caret padrão do dropdown-toggle nos itens da sidebar */ .sidebar-item.dropdown-toggle::after { display: none; } .sidebar-item:hover { background-color: #e6ecf3; color: var(--iprc-primary); } .sidebar-item.active { background-color: var(--iprc-active); color: var(--iprc-active-text); box-shadow: var(--iprc-shadow); } .sidebar-item .badge-notify { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; padding: 0; background-color: #f41737; border-radius: 50%; } /* Offcanvas (mobile) mantém o mesmo visual */ .sidebar-offcanvas { --iprc-sidebar-width: 74px; width: var(--iprc-sidebar-width) !important; background-color: var(--iprc-sidebar-bg); border-right: 1px solid #e9ecef; } /* * Submenu flyout dos módulos-mãe (ex.: "Gerenciamento"): em vez de abrir * para baixo dentro da sidebar compacta, abre à DIREITA do ícone. * O menu é movido para via JS e usa `position: fixed`. Isso evita * o corte por overflow e o deslocamento causado pelo `transform` do * offcanvas mobile (que "quebraria" o position: fixed). */ .sidebar .dropdown, .sidebar-offcanvas .dropdown { position: static; } .sidebar-submenu { position: fixed; top: 0; left: 0; transform: none !important; margin: 0; min-width: 220px; z-index: 1060 !important; box-shadow: 0 8px 24px rgba(0, 68, 139, 0.18); border-radius: var(--iprc-radius); border: none; padding: 0.25rem 0; } .sidebar-submenu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; } .sidebar-submenu .dropdown-item i { width: 18px; text-align: center; color: var(--iprc-text-muted); } .sidebar-submenu.show { display: block; transform: none !important; } .sidebar-offcanvas .offcanvas-body { padding: 0.75rem 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; width: 100%; } .sidebar-offcanvas .sidebar-nav { align-items: center; width: 100%; } /* ============ Navbar (Header Topo) ============ */ .navbar-top { position: fixed; top: 0; left: var(--iprc-sidebar-width); right: 0; height: var(--iprc-navbar-height); background-color: #ffffff; border-bottom: 1px solid #e9ecef; box-shadow: var(--iprc-shadow); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0 1rem; z-index: 1030; min-width: 0; } .navbar-top .navbar-title { font-size: 1.15rem; font-weight: 600; color: var(--iprc-primary-dark); margin: 0; } /* * Título longo: em vez de empurrar as ações (ex.: "Voltar") para fora da * barra, ele encolhe e trunca com "…". As ações ficam sempre visíveis. * `min-width: 0` no flex item é o que permite o encolhimento abaixo do * conteúdo natural; sem isso o texto estoura e empurra os botões. */ .navbar-top .navbar-left { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; } .navbar-top .navbar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-top .navbar-left > *:not(.navbar-title) { flex: 0 0 auto; } .navbar-top .context-menu .btn { color: var(--iprc-primary); font-weight: 500; border: none; } .navbar-top .context-menu .bi-chevron-down { font-size: 0.85rem; } .navbar-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: 0 0 auto; } .btn-action { display: inline-flex; align-items: center; gap: 0.35rem; background-color: var(--iprc-primary); color: #fff; border: none; border-radius: var(--iprc-radius); padding: 0.4rem 0.75rem; font-weight: 500; font-size: 0.9rem; transition: background-color 0.15s ease; } .btn-action:hover { background-color: var(--iprc-primary-dark); color: #fff; } .btn-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background-color: transparent; color: var(--iprc-text-muted); transition: background-color 0.15s ease, color 0.15s ease; } .btn-icon:hover { background-color: #e6ecf3; color: var(--iprc-primary); } .btn-icon .badge { position: absolute; top: 2px; right: 2px; font-size: 0.62rem; transform: translate(20%, -20%); } /* Avatar / wordmark */ .avatar-btn { border: none; background: transparent; padding: 0; border-radius: 50%; } .avatar-circle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 0.95rem; user-select: none; } /* ============ Dropdown do Perfil ============ */ .profile-dropdown { min-width: 260px; border: none; box-shadow: 0 8px 24px rgba(0, 68, 139, 0.18); border-radius: var(--iprc-radius); padding: 0.25rem 0; z-index: 1035; } .profile-dropdown .profile-header { padding: 0.75rem 1rem; } .profile-dropdown .profile-name { font-weight: 600; color: var(--iprc-primary-dark); margin: 0; } .profile-dropdown .profile-email { font-size: 0.82rem; color: var(--iprc-text-muted); margin: 0; } .profile-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; padding: 0.5rem 1rem; } .profile-dropdown .dropdown-item i { width: 18px; text-align: center; color: var(--iprc-text-muted); } /* ============ Toggle Dark Mode ============ */ body.dark-mode { background-color: #12161c; } body.dark-mode .app-shell { background-color: #12161c; } body.dark-mode .app-content { color: #c8d1da; } body.dark-mode .navbar-top { background-color: #1a2027; border-bottom-color: #2b333d; } body.dark-mode .navbar-top .navbar-title { color: #e6edf3; } /* Sidebar em dark mode: fundo azul escuro, texto/ícones claros */ body.dark-mode .sidebar { background-color: #052a52; border-right-color: #0a3f72; } body.dark-mode .sidebar-brand { background-color: transparent; color: #fff; } body.dark-mode .sidebar-item { color: #c8d4e0; } body.dark-mode .sidebar-item:hover { background-color: #0a3f72; color: #ffffff; } body.dark-mode .sidebar-item.active { background-color: #0a3f72; color: #ffffff; } /* Offcanvas (mobile) acompanha o dark mode */ body.dark-mode .sidebar-offcanvas { background-color: #052a52; border-right-color: #0a3f72; } body.dark-mode .sidebar-offcanvas .sidebar-brand { background-color: transparent; color: #fff; } body.dark-mode .sidebar-offcanvas .sidebar-item { color: #c8d4e0; } body.dark-mode .sidebar-offcanvas .sidebar-item:hover, body.dark-mode .sidebar-offcanvas .sidebar-item.active { background-color: #0a3f72; color: #ffffff; } body.dark-mode .profile-dropdown { background-color: #1a2027; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } body.dark-mode .profile-dropdown .profile-name { color: #e6edf3; } body.dark-mode .profile-dropdown .dropdown-item { color: #c8d1da; } body.dark-mode .profile-dropdown .dropdown-item:hover { background-color: #232a33; color: #fff; } body.dark-mode .profile-dropdown .dropdown-divider { border-color: #2b333d; } /* ============ Dropdown de Notificações (cards de alerta) ============ */ .notifications-dropdown { min-width: 320px; max-width: calc(100vw - 2rem); border: none; box-shadow: 0 8px 24px rgba(0, 68, 139, 0.18); border-radius: var(--iprc-radius); padding: 0; z-index: 1035; } .notifications-dropdown .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; font-weight: 600; color: var(--iprc-primary-dark); border-bottom: 1px solid #e9ecef; } .notifications-dropdown .notif-body { max-height: 320px; overflow-y: auto; padding: 0.5rem; } .notif-card { display: flex; gap: 0.6rem; padding: 0.6rem; border-radius: var(--iprc-radius); margin-bottom: 0.35rem; transition: background-color 0.15s ease; } .notif-card:hover { background-color: #f0f4f9; } .notif-card .notif-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: #e6ecf3; color: var(--iprc-primary); font-size: 1rem; } .notif-card .notif-content { flex: 1 1 auto; min-width: 0; } .notif-card .notif-title { font-size: 0.88rem; font-weight: 600; color: var(--iprc-primary-dark); margin: 0; line-height: 1.25; } .notif-card .notif-text { font-size: 0.82rem; color: var(--iprc-text-muted); margin: 0; } .notif-card .notif-time { font-size: 0.72rem; color: #adb5bd; margin-left: 0.5rem; white-space: nowrap; } .notif-card.unread { background-color: #eef4fb; } .notif-card.unread .notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #f41737; flex: 0 0 auto; margin-top: 0.4rem; } body.dark-mode .notifications-dropdown { background-color: #1a2027; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } body.dark-mode .notifications-dropdown .notif-header { color: #e6edf3; border-bottom-color: #2b333d; } body.dark-mode .notif-card:hover { background-color: #232a33; } body.dark-mode .notif-card.unread { background-color: #1f2a33; } body.dark-mode .notif-card .notif-title { color: #e6edf3; } body.dark-mode .notif-card .notif-icon { background-color: #232a33; color: #8bb8e8; } /* ============ Dark Mode — Conteúdo (cards, tabelas, formulários) ============ */ body.dark-mode { color: #c8d1da; } body.dark-mode a { color: #7ab8f5; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .h1, body.dark-mode .h2, body.dark-mode .h3, body.dark-mode .h4, body.dark-mode .h5, body.dark-mode .h6 { color: #e6edf3; } body.dark-mode .text-muted { color: #94a3b1 !important; } /* Marrom (usado no dashboard de conselheiros: item "Falecidos") */ .text-brown { color: #8d5a2c !important; } body.dark-mode .text-brown { color: #d4a056 !important; } /* Cards */ body.dark-mode .card { background-color: #1a2027; border-color: #2b333d; } body.dark-mode .card .card-header { background-color: #20262e; border-bottom-color: #2b333d; color: #e6edf3; } /* Headers de cards que usam cores da marca permanecem com fundo colorido, mas garantem texto claro e borda coerente com o dark mode. */ body.dark-mode .card-header.bg-primary, body.dark-mode .card-header.bg-secondary, body.dark-mode .card-header.bg-info, body.dark-mode .card-header.bg-success, body.dark-mode .card-header.bg-danger, body.dark-mode .card-header.bg-warning { color: #fff; } body.dark-mode .card-header.bg-primary, body.dark-mode .card-header.bg-secondary, body.dark-mode .card-header.bg-info, body.dark-mode .card-header.bg-success, body.dark-mode .card-header.bg-danger { border-bottom-color: rgba(255, 255, 255, 0.2); } body.dark-mode .card-header.bg-warning { color: #1a2027; } body.dark-mode .card-footer { background-color: #20262e; border-top-color: #2b333d; color: #c8d1da; } /* `bg-light` do Bootstrap usa `!important`, por isso o dark-mode precisa de `!important` */ body.dark-mode .card-footer.bg-light { background-color: #20262e !important; } /* Card de auditoria etc. que usa `bg-light` no próprio card também deve seguir o dark */ body.dark-mode .card.bg-light { background-color: #1a2027 !important; } body.dark-mode .card .card-body, body.dark-mode .card-body { color: #c8d1da; } /* List groups dentro de cards: Bootstrap os deixa brancos, mesmo com o card escuro */ body.dark-mode .card .list-group-item, body.dark-mode .list-group-item { background-color: #1a2027; border-color: #2b333d; color: #c8d1da; } body.dark-mode .list-group-item:hover, body.dark-mode .list-group-item.active { background-color: #20262e; } /* Bordas de cards (border-primary/warning/etc.) ficam mais suaves no dark */ body.dark-mode .card.border-primary, body.dark-mode .card.border-secondary, body.dark-mode .card.border-success, body.dark-mode .card.border-danger, body.dark-mode .card.border-warning, body.dark-mode .card.border-info { border-color: #2b333d; } /* Tabelas */ body.dark-mode .table { color: #c8d1da; border-color: #2b333d; } body.dark-mode .table > :not(caption) > * > * { color: #c8d1da; background-color: transparent; border-bottom-color: #2b333d; } body.dark-mode .table-light, body.dark-mode .table-light > th, body.dark-mode .table-light > td { background-color: #20262e; color: #e6edf3; } body.dark-mode .table thead th, body.dark-mode .table thead td { border-bottom-color: #2b333d; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #20262e; color: #c8d1da; } body.dark-mode .table-striped > tbody > tr:nth-child(odd) { --bs-table-accent-bg: #20262e; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd), body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th { --bs-table-accent-bg: #20262e; background-color: #20262e; } body.dark-mode .table-hover > tbody > tr:hover > *, body.dark-mode .table-hover > tbody > tr:hover { background-color: #232a33; color: #e6edf3; } body.dark-mode .table-responsive { color: #c8d1da; } /* Badges com variantes de cor ficam mais vibrantes/compatíveis no escuro */ body.dark-mode .badge.bg-light { background-color: #2b333d !important; color: #e6edf3 !important; } /* Formulários */ body.dark-mode .form-control, body.dark-mode .form-select { background-color: #14181e; border-color: #2b333d; color: #e6edf3; } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background-color: #14181e; border-color: var(--iprc-primary); color: #e6edf3; box-shadow: 0 0 0 0.2rem rgba(0, 68, 139, 0.35); } body.dark-mode .form-control::placeholder { color: #6b7a89; } body.dark-mode .form-control:disabled, body.dark-mode .form-select:disabled { background-color: #1d232a; color: #6b7a89; } body.dark-mode .form-label, body.dark-mode .form-check-label { color: #c8d1da; } body.dark-mode .form-check-input { background-color: #14181e; border-color: #2b333d; } body.dark-mode .form-check-input:checked { background-color: var(--iprc-primary); border-color: var(--iprc-primary); } body.dark-mode .form-check-input:focus { border-color: var(--iprc-primary); box-shadow: 0 0 0 0.2rem rgba(0, 68, 139, 0.35); } /* Botões outline: mantêm o contorno mas adaptam o texto ao fundo escuro */ body.dark-mode .btn-outline-secondary { color: #c8d1da; border-color: #3a4550; } body.dark-mode .btn-outline-secondary:hover { background-color: #2b333d; color: #fff; } body.dark-mode .btn-outline-primary { color: #7ab8f5; border-color: #0a3f72; } body.dark-mode .btn-outline-primary:hover { background-color: #0a3f72; color: #fff; } body.dark-mode .btn-outline-info { color: #7fd4de; border-color: #155e64; } body.dark-mode .btn-outline-info:hover { background-color: #155e64; color: #fff; } body.dark-mode .btn-outline-success { color: #6fce9e; border-color: #1d5c3c; } body.dark-mode .btn-outline-success:hover { background-color: #1d5c3c; color: #fff; } body.dark-mode .btn-outline-danger { color: #ef8d8d; border-color: #7a2b2b; } body.dark-mode .btn-outline-danger:hover { background-color: #7a2b2b; color: #fff; } body.dark-mode .btn-outline-warning { color: #e3c266; border-color: #6b561c; } body.dark-mode .btn-outline-warning:hover { background-color: #6b561c; color: #fff; } /* Alertas */ body.dark-mode .alert { background-color: #20262e; border-color: #2b333d; color: #c8d1da; } body.dark-mode .alert-success { background-color: #1d3a2b; border-color: #2a543d; color: #bfe5cf; } body.dark-mode .alert-danger { background-color: #3a1f24; border-color: #5c2f37; color: #f0c2c7; } body.dark-mode .alert-warning { background-color: #40391d; border-color: #5c531e; color: #f0e1a8; } body.dark-mode .alert-info { background-color: #1d3740; border-color: #2a5260; color: #c0e3ec; } body.dark-mode .alert-primary { background-color: #1c2f4a; border-color: #27476b; color: #bfd6ef; } /* Menu de contexto (navbar) e dropdowns diversos */ body.dark-mode .dropdown-menu { background-color: #1a2027; border-color: #2b333d; color: #c8d1da; } body.dark-mode .dropdown-menu .dropdown-item { color: #c8d1da; } body.dark-mode .dropdown-menu .dropdown-item:hover { background-color: #232a33; color: #fff; } body.dark-mode .dropdown-divider { border-color: #2b333d; } body.dark-mode .context-menu .btn { color: #7ab8f5; } body.dark-mode .texto-recortado { color: #c8d1da; } /* Linha divisória genérica usada em listagens mobile */ body.dark-mode .border-bottom, body.dark-mode .border-top { border-color: #2b333d !important; } /* ============ Barra de Ações Rápidas (flutuante) ============ Substitui o uso direto de `fixed-bottom` nas views, que não respeitava o deslocamento da sidebar e estourava por baixo do menu vertical. Fica alinhada à área de conteúdo (.app-main) e cobre dark mode. */ .quick-actions-bar { position: fixed; bottom: 0; left: var(--iprc-sidebar-width); right: 0; z-index: 1020; padding: 0 1rem 1rem; pointer-events: none; } .quick-actions-bar .quick-actions-card { max-width: 1200px; margin: 0 auto; pointer-events: all; border: 1px solid #ffc107; box-shadow: 0 -4px 16px rgba(5, 40, 76, 0.18); } .quick-actions-bar .card-header { background-color: #ffc107; color: #1a2027; font-weight: 600; } .quick-actions-bar .card-header .btn-close { color: #1a2027; } /* Dark mode */ body.dark-mode .quick-actions-bar .quick-actions-card { border-color: #6b561c; background-color: #1a2027; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5); } body.dark-mode .quick-actions-bar .card-header { background-color: #40391d; color: #f0e1a8; } body.dark-mode .quick-actions-bar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ============ Paginação ============ Padroniza a paginação do novo layout: dark mode + sem estouro no mobile. */ .pagination-wrap { overflow-x: auto; } /* Paginação dentro do footer da tabela: compacta para não gerar scroll */ .card-footer .pagination-wrap { padding: 0.35rem 0; } .card-footer .pagination { margin-top: 0; margin-bottom: 0; } .card-footer .page-link { padding: 0.25rem 0.5rem; font-size: 0.8125rem; line-height: 1.4; } .card-footer .page-item:not(:last-child) { margin-right: 2px; } .pagination-wrap .pagination { flex-wrap: nowrap; width: max-content; margin-inline: auto; } /* Mobile: a paginação comprida rola horizontalmente em vez de estourar a tela */ @media (max-width: 767.98px) { .pagination-wrap { -webkit-overflow-scrolling: touch; } } /* Dark mode da paginação Bootstrap */ body.dark-mode .page-link { background-color: #20262e; border-color: #2b333d; color: #c8d1da; } body.dark-mode .page-link:hover { background-color: #232a33; border-color: #3a4550; color: #fff; } body.dark-mode .page-item.active .page-link { background-color: #ffc107; border-color: #ffc107; color: #1a2027; } body.dark-mode .page-item.disabled .page-link { background-color: #20262e; border-color: #2b333d; color: #6c757d; } /* ============ Tela Inicial — Módulos (home-module) ============ Substitui o legado botao-default/divisor-default. */ .home-module { background-color: var(--iprc-primary); color: #fff; border: 1px solid var(--iprc-primary-dark); border-radius: var(--iprc-radius); height: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; padding: 1rem; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .home-module:hover { background-color: var(--iprc-primary-dark); transform: translateY(-2px); box-shadow: var(--iprc-shadow); } .home-module-icon { font-size: 2.25rem; line-height: 1; } .home-module-title { font-weight: 600; font-size: 1rem; line-height: 1.2; } body.dark-mode .home-module { background-color: #1f4d85; border-color: #2b62a3; } body.dark-mode .home-module:hover { background-color: #2b62a3; } /* ============ Responsividade (Mobile < 768px) ============ */ @media (max-width: 767.98px) { .sidebar { display: none !important; } .app-main { margin-left: 0; } .navbar-top { left: 0; } .navbar-top .navbar-title { font-size: 1rem; } /* Mobile: título trunca de forma mais agressiva para sobrar espaço às ações (Voltar/Salvar) e ao lado direito (notificação + avatar). */ .navbar-top .navbar-left { flex-wrap: nowrap; min-width: 0; } .navbar-top .navbar-title { flex: 1 1 auto; max-width: 70%; } .navbar-top .navbar-left > *:not(.navbar-title) { flex: 0 0 auto; } .btn-action .action-label { display: none; } .quick-actions-bar { left: 0; padding: 0 0.5rem 0.5rem; } } /* ========================================================= Telas de Autenticação (login, ativar, recuperar senha) Layout público standalone — fundo gradiente da marca ========================================================= */ .auth-body { margin: 0; min-height: 100vh; display: flex; align-items: center; /* Modo claro: gradiente azul claro da marca */ background: linear-gradient(135deg, #e7f1fb 0%, #cfe0f3 100%); } body.dark-mode.auth-body { /* Modo escuro: gradiente azul profundo */ background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%); } .auth-wrapper { width: 100%; padding: 1.5rem 0; } .auth-logo { max-height: 90px; margin-bottom: 0.5rem; } .auth-card { position: relative; border: none; border-radius: var(--iprc-radius); box-shadow: var(--iprc-shadow); overflow: hidden; } .auth-card .auth-title { color: var(--iprc-primary-dark); margin-bottom: 1.25rem; } .auth-card .form-label { font-weight: 500; color: var(--iprc-text-muted); } .auth-card .btn-auth { background-color: var(--iprc-primary); border-color: var(--iprc-primary); color: #fff; border-radius: var(--iprc-radius); min-height: 46px; } .auth-card .btn-auth:hover { background-color: var(--iprc-primary-dark); border-color: var(--iprc-primary-dark); color: #fff; } .auth-card .auth-link { color: var(--iprc-primary); text-decoration: none; font-weight: 500; } .auth-card .auth-link:hover { color: var(--iprc-primary-dark); text-decoration: underline; } .auth-footer { color: rgba(30, 60, 90, 0.7); } .auth-footer small { color: inherit; } body.dark-mode .auth-footer { color: rgba(255, 255, 255, 0.7); } /* Logo dentro do card (login) */ .auth-card .auth-logo-inline { max-height: 64px; display: block; margin: 0 auto 1rem; } /* Toggle de dark mode (canto superior direito do card) */ .auth-theme-btn { position: absolute; top: 0.75rem; right: 0.75rem; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--iprc-primary-dark); background-color: rgba(4, 68, 139, 0.08); cursor: pointer; z-index: 5; transition: background-color 0.15s ease, color 0.15s ease; } .auth-theme-btn:hover { background-color: rgba(4, 68, 139, 0.16); } .auth-theme-icon { font-size: 1.15rem; line-height: 1; position: absolute; inset: 0; margin: auto; height: 1.15rem; width: 1.15rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; } /* Lua visível no modo claro; sol visível no modo escuro */ .auth-theme-icon.icon-moon { opacity: 1; } .auth-theme-icon.icon-sun { opacity: 0; } body.dark-mode .auth-theme-icon.icon-moon { opacity: 0; } body.dark-mode .auth-theme-icon.icon-sun { opacity: 1; } body.dark-mode .auth-theme-btn { color: #ffd166; background-color: rgba(255, 255, 255, 0.08); } body.dark-mode .auth-theme-btn:hover { background-color: rgba(255, 255, 255, 0.16); } /* Dark mode: card escuro */ body.dark-mode .auth-card { background-color: #1a2027; } body.dark-mode .auth-card .auth-title { color: #c8d1da; } body.dark-mode .auth-card .form-label { color: #9aa7b1; } body.dark-mode .auth-card .auth-link { color: #ffffff; } body.dark-mode .auth-card .auth-link:hover { color: #dbe7f5; } body.dark-mode .auth-card .form-control, body.dark-mode .auth-card .form-select { background-color: #232a33; border-color: #343c46; color: #e6eaee; } body.dark-mode .auth-card .form-control:focus { background-color: #232a33; border-color: var(--iprc-primary); color: #e6eaee; } body.dark-mode .auth-card .form-floating > label { color: #9aa7b1; } /* Ícones dentro dos campos (input-group) */ .auth-card .input-group-text { background-color: #fff; border-top-left-radius: var(--iprc-radius); border-bottom-left-radius: var(--iprc-radius); color: var(--iprc-primary); } body.dark-mode .auth-card .input-group-text { background-color: #232a33; border-color: #343c46; color: #5b9bd5; } /* ===== Classes migradas de default.css (ainda usadas nas views logadas) ===== */ .btn-cadastrar { background-color: #046fe1; color: white; border-color: #046fe1; min-width: 84px; height: 36px; vertical-align: middle; font-size: 20px; text-align: center; } .btn-cadastrar:hover { background-color: white; border-color: #046fe1; color: #046fe1; min-width: 84px; height: 36px; vertical-align: middle; font-size: 20px; text-align: center; } .btn-sm.btn-voltar { background-color: white; color: #e19004; border-color: #e19004; min-width: 84px; height: 36px; vertical-align: middle; font-size: 20px; text-align: center; } .btn-sm.btn-voltar:hover { background-color: #e19004; border-color: #e19004; color: white; min-width: 84px; height: 36px; vertical-align: middle; font-size: 20px; text-align: center; } .justificativa-multiplas-selecoes { vertical-align: middle; text-align: left; color: #f41737; border-color: #00448b; height: 24px; width: 24px; } .justificativa-multiplas-selecoes:checked { vertical-align: middle; text-align: left; color: #f41737; border-color: #00448b; background-color: #f41737; height: 24px; width: 24px; } .nav-tabs { border-bottom: 1px solid #f41737; } .nav-tabs .nav-link.active { background-color: #f41737; color: white; border-color: #f41737 #f41737 #fff; border-bottom: 1px solid #f41737; } .nav-tabs .nav-link.active:hover { background-color: #f41737; color: white; border-color: #f41737 #f41737 #fff; border-bottom: 1px solid #f41737; } .nav-tabs .nav-link { border-bottom-color: #f41737; color: #00448b; border-bottom: 1px solid #f41737; } .nav-tabs .nav-link:hover { border-bottom-color: #f41737; color: white; background-color: #00448b; border-bottom: 1px solid #f41737; } .bg-purple { background-color: #6f42c1 !important; } .bg-purple:hover { background-color: #5a32a3 !important; } .badge-grupo-deliberativo { background-color: #d4a017 !important; } .badge-grupo-gestor { background-color: #0d6efd !important; } .badge-grupo-fiscal { background-color: #dc3545 !important; } .badge-grupo-consultivo { background-color: #6f42c1 !important; }