/* Extraído de templates/layouts/authenticated.html (bloco style 2) */
       /* Aplicar fonte Quicksand em todo o sistema */
       * {
           font-family: "Quicksand", sans-serif !important;
       }

       body {
           font-family: "Quicksand", sans-serif !important;
       }

       /* Melhorar estilo dos títulos das páginas */
       .page-header-breadcrumb h3 {
           font-size: 1.3rem !important;
           font-weight: 600 !important;
           color: #2c3e50 !important;
       }

       /* Subtítulo da página fica sobre o fundo da página (#f5f6fa), onde o
          #6c757d dava 4,34:1. O token do tema claro dá 4,95:1. O escuro tem
          regra própria mais abaixo. */
       .page-header-breadcrumb p {
           font-size: 0.875rem !important;
           color: var(--text-muted) !important;
       }

       /* Substituir azul claro por azul escuro */
       .btn-primary {
           background-color: #2c3e50 !important;
           border-color: #2c3e50 !important;
       }

       .btn-primary:hover {
           background-color: #1a252f !important;
           border-color: #1a252f !important;
       }

       .bg-primary {
           background-color: #2c3e50 !important;
       }

       /* Token em tema-escuro.css (seção 5): #2c3e50 no claro, tom claro no escuro */
       .text-primary {
           color: var(--texto-primario) !important;
       }

       .badge-primary, .badge.bg-primary {
           background-color: #2c3e50 !important;
       }

       /* Fix contraste de badges — fundos claros forçam texto escuro */
       span.badge.bg-warning,
       span.badge.bg-info,
       .badge.bg-warning:not(.text-white),
       .badge.bg-info:not(.text-white) {
           color: #1f2937 !important;
       }
       /* bg-light só é fundo claro no tema claro; no escuro o par
          bg-light/text-dark fica com tema-escuro.css (seção 1). */
       [data-theme-mode="light"] span.badge.bg-light,
       [data-theme-mode="light"] .badge.bg-light:not(.text-white) {
           color: #1f2937 !important;
       }

       /* bg-cyan não existe em Bootstrap — fallback para info claro */
       .bg-cyan {
           background-color: #0dcaf0 !important;
           color: #1f2937 !important;
       }
       .badge.bg-cyan {
           color: #1f2937 !important;
       }

       /* Pink e orange usam fundo médio — texto branco fica OK, mas se vier sem .text-* explícito força contraste */
       .badge.bg-pink:not(.text-dark) {
           color: #fff !important;
       }
       .badge.bg-orange:not(.text-dark) {
           color: #fff !important;
       }

       /* Modal sempre acima do sidebar */
       .modal-backdrop {
           z-index: 1040 !important;
       }
       .modal {
           z-index: 1050 !important;
       }

       /* Tema escuro — contraste em cards e textos do dashboard */
       [data-theme-mode="dark"] .card,
       [data-theme-mode="dark"] .custom-card {
           background-color: #232323 !important;
           border-color: #3a3a3a !important;
           color: #e5e7eb !important;
       }
       [data-theme-mode="dark"] .card .text-muted,
       [data-theme-mode="dark"] .custom-card .text-muted {
           color: #c0c4cc !important;
       }
       [data-theme-mode="dark"] .card-title,
       [data-theme-mode="dark"] .card h1,
       [data-theme-mode="dark"] .card h2,
       [data-theme-mode="dark"] .card h3,
       [data-theme-mode="dark"] .card h4,
       [data-theme-mode="dark"] .card h5,
       [data-theme-mode="dark"] .card h6 {
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .table {
           color: #e5e7eb !important;
       }
       [data-theme-mode="dark"] .table-light,
       [data-theme-mode="dark"] thead.table-light {
           background-color: #2a2a2a !important;
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .quick-stat {
           border-color: #3a3a3a !important;
           background: transparent !important;
       }
       [data-theme-mode="dark"] .quick-stat-label {
           color: #c0c4cc !important;
       }
       [data-theme-mode="dark"] .quick-stat-value {
           color: #f3f4f6 !important;
       }

       /* Tema escuro — modais */
       [data-theme-mode="dark"] .modal-content {
           background-color: #232323 !important;
           color: #e5e7eb !important;
           border-color: #3a3a3a;
       }
       [data-theme-mode="dark"] .modal-header {
           background-color: #232323 !important;
           border-bottom-color: #3a3a3a !important;
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .modal-header .modal-title {
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .modal-footer {
           background-color: #232323 !important;
           border-top-color: #3a3a3a !important;
       }
       [data-theme-mode="dark"] .modal-body {
           color: #e5e7eb !important;
       }
       [data-theme-mode="dark"] .modal-body .text-muted {
           color: #c0c4cc !important;
       }
       [data-theme-mode="dark"] .modal-content .form-control,
       [data-theme-mode="dark"] .modal-content .form-select {
           background-color: #2a2a2a !important;
           border-color: #3a3a3a !important;
           color: #f3f4f6 !important;
       }
       /* SIG-594: as duas regras de fundo/borda escuro acima (e a genérica
          .form-control/.form-select mais abaixo neste arquivo) têm
          !important e cor de borda fixa — sem isso, o outline vermelho de
          campo obrigatório (.is-invalid) fica invisível no tema escuro,
          porque a borda cinza do tema sempre vencia. */
       [data-theme-mode="dark"] .form-control.is-invalid,
       [data-theme-mode="dark"] .form-select.is-invalid,
       [data-theme-mode="dark"] .modal-content .form-control.is-invalid,
       [data-theme-mode="dark"] .modal-content .form-select.is-invalid {
           border-color: #dc3545 !important;
       }
       [data-theme-mode="dark"] .modal-content .form-control:focus,
       [data-theme-mode="dark"] .modal-content .form-select:focus {
           background-color: #2a2a2a !important;
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .modal-content .form-label,
       [data-theme-mode="dark"] .modal-content label {
           color: #e5e7eb !important;
       }
       [data-theme-mode="dark"] .btn-close {
           filter: invert(1) grayscale(100%) brightness(2);
       }

       /* Tema escuro — linhas de tabela ao clicar/hover */
       [data-theme-mode="dark"] .table-hover > tbody > tr:hover > * {
           background-color: #2a2a2a !important;
           color: #f3f4f6 !important;
       }
       [data-theme-mode="dark"] .table > tbody > tr.selected,
       [data-theme-mode="dark"] .table > tbody > tr.active,
       [data-theme-mode="dark"] .table > tbody > tr.table-active > * {
           background-color: #2c3e50 !important;
           color: #fff !important;
       }
       [data-theme-mode="dark"] .table tbody tr {
           color: #e5e7eb;
       }
       /* Override do "amarelo" usado em row-selected/hover de tabelas customizadas */
       [data-theme-mode="dark"] .table-row-clickable tbody tr:hover > *,
       [data-theme-mode="dark"] tr.row-selected > *,
       [data-theme-mode="dark"] .table-row-clickable tbody tr.row-selected > * {
           background-color: #2a3a4a !important;
           --bs-table-accent-bg: #2a3a4a !important;
           color: #f3f4f6 !important;
       }

       /* Ícones circulares em cards de resumo (.rounded-circle + p-3 padrão Bootstrap fica oval) */
       .card-body .rounded-circle {
           width: 56px;
           height: 56px;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
       }
       .card-body .rounded-circle.p-2 {
           width: 44px;
           height: 44px;
       }
       .card-body .rounded-circle.p-3 {
           width: 56px;
           height: 56px;
           padding: 0 !important;
       }

       /* Corrigir botões */
       .btn-sm.btn-icon {
           width: 32px;
           height: 32px;
           padding: 0;
           display: inline-flex;
           align-items: center;
           justify-content: center;
       }

       .btn-info-light {
           background-color: rgba(13, 202, 240, 0.1);
           color: #0dcaf0;
           border: none;
       }

       .btn-info-light:hover {
           background-color: rgba(13, 202, 240, 0.2);
           color: #0dcaf0;
       }

       .btn-danger-light {
           background-color: rgba(220, 53, 69, 0.1);
           color: #dc3545;
           border: none;
       }

       .btn-danger-light:hover {
           background-color: rgba(220, 53, 69, 0.2);
           color: #dc3545;
       }

       .btn-success-light {
           background-color: rgba(25, 135, 84, 0.1);
           color: #198754;
           border: none;
       }

       .btn-success-light:hover {
           background-color: rgba(25, 135, 84, 0.2);
           color: #198754;
       }

       /* Cards */
       .card {
           border: 1px solid #e9ecef !important;
           border-radius: 0.5rem !important;
           box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
       }

       .card-header {
           background-color: #f8f9fa !important;
           border-bottom: 1px solid #e9ecef !important;
           font-weight: 600 !important;
       }

       /* Tema Escuro - Sincronizado com Target Prev */
       [data-theme-mode="dark"] {
           background-color: #1a1a1a !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] body {
           background-color: #1a1a1a !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .card {
           background-color: #2c2c2c !important;
           color: #e0e0e0 !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .card-header {
           background-color: #333 !important;
           border-bottom-color: #444 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .card-body {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .main-content {
           background-color: #1a1a1a !important;
       }

       [data-theme-mode="dark"] .page-header-breadcrumb h3 {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .page-header-breadcrumb p {
           color: #a0a0a0 !important;
       }

       /* Densidade das grades do sistema.
          A celula vinha em 13,6px com recuo vertical de ate 24px: a linha
          ficava alta e cabiam poucos registros na tela, justamente onde o
          operador precisa varrer muita gente. Fonte e recuo menores, e o
          cabecalho um passo abaixo da celula, que e o padrao de tabela densa.
          Vale para todas as telas por herdar de base.html. */
       /* O tema declara `.table th, .table td` e `.table thead tr th`, que tem
          especificidade maior que `.table` sozinho — por isso a regra precisa
          alcancar a celula diretamente, e nao so a tabela. */
       .table {
           font-size: 0.78rem;
       }
       .table th,
       .table td {
           font-size: 0.78rem;
       }
       .table thead tr th,
       .table thead th {
           font-size: 0.72rem;
           letter-spacing: 0.02em;
       }
       .table > :not(caption) > * > * {
           padding-block: 0.45rem;
       }
       /* Botao dentro da grade acompanha a densidade da linha. */
       .table .btn-sm {
           padding: 0.2rem 0.45rem;
           font-size: 0.75rem;
       }

       [data-theme-mode="dark"] .table {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .table thead th {
           background-color: #333 !important;
           color: #e0e0e0 !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .table tbody td {
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .table-striped tbody tr:nth-of-type(odd) {
           background-color: rgba(255, 255, 255, 0.03) !important;
       }

       [data-theme-mode="dark"] .table-hover tbody tr:hover {
           background-color: rgba(255, 255, 255, 0.08) !important;
       }

       [data-theme-mode="dark"] .form-control,
       [data-theme-mode="dark"] .form-select {
           background-color: #333 !important;
           border-color: #555 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .form-control:focus,
       [data-theme-mode="dark"] .form-select:focus {
           background-color: #3a3a3a !important;
           border-color: #666 !important;
           color: #fff !important;
       }

[data-theme-mode="dark"] {
           color-scheme: dark;
       }

       [data-theme-mode="dark"] .form-select option,
       [data-theme-mode="dark"] .form-select optgroup,
       [data-theme-mode="dark"] select option,
       [data-theme-mode="dark"] select optgroup {
           background-color: #333;
           color: #e0e0e0;
       }

       [data-theme-mode="dark"] .form-select option:checked,
       [data-theme-mode="dark"] select option:checked {
           background-color: #454545;
           color: #ffffff;
       }

       [data-theme-mode="dark"] .form-control::placeholder {
           color: #888 !important;
       }

       [data-theme-mode="dark"] .form-label {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .modal-content {
           background-color: #2c2c2c !important;
           color: #e0e0e0 !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .modal-header {
           border-bottom-color: #444 !important;
       }

       [data-theme-mode="dark"] .modal-footer {
           border-top-color: #444 !important;
       }

       [data-theme-mode="dark"] .btn-close {
           filter: invert(1) !important;
       }

       [data-theme-mode="dark"] .dropdown-menu {
           background-color: #2c2c2c !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .dropdown-item {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .dropdown-item:hover {
           background-color: #3a3a3a !important;
           color: #fff !important;
       }

       [data-theme-mode="dark"] .notification-dropdown {
           background-color: #2c2c2c !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .header-search input {
           background-color: #333 !important;
           border-color: #555 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .search-panel {
           background-color: #2c2c2c !important;
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] .text-muted {
           color: #a0a0a0 !important;
       }

       [data-theme-mode="dark"] h1, [data-theme-mode="dark"] h2, [data-theme-mode="dark"] h3,
       [data-theme-mode="dark"] h4, [data-theme-mode="dark"] h5, [data-theme-mode="dark"] h6 {
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .alert-info {
           background-color: rgba(13, 202, 240, 0.15) !important;
           border-color: rgba(13, 202, 240, 0.3) !important;
           color: #5dd9f7 !important;
       }

       [data-theme-mode="dark"] .alert-warning {
           background-color: rgba(255, 193, 7, 0.15) !important;
           border-color: rgba(255, 193, 7, 0.3) !important;
           /* color não é definido aqui: styles.css centraliza via
              --warning-alert-text (SIG-594). Repetir aqui criava regra
              concorrente que sempre vencia por especificidade, deixando a
              variável de contraste do tema escuro em código morto. */
       }

       [data-theme-mode="dark"] .alert-danger {
           background-color: rgba(220, 53, 69, 0.15) !important;
           border-color: rgba(220, 53, 69, 0.3) !important;
           color: #ea868f !important;
       }

       [data-theme-mode="dark"] .alert-success {
           background-color: rgba(25, 135, 84, 0.15) !important;
           border-color: rgba(25, 135, 84, 0.3) !important;
           color: #75b798 !important;
       }

       [data-theme-mode="dark"] .list-group-item {
           background-color: #2c2c2c !important;
           border-color: #444 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .pagination .page-link {
           background-color: #333 !important;
           border-color: #444 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .pagination .page-item.active .page-link {
           background-color: #2c3e50 !important;
           border-color: #2c3e50 !important;
       }

       [data-theme-mode="dark"] .pagination .page-link:hover {
           background-color: #3a3a3a !important;
       }

       [data-theme-mode="dark"] .border {
           border-color: #444 !important;
       }

       [data-theme-mode="dark"] hr {
           border-color: #444 !important;
       }

       /* Botão de toggle de tema */
       [data-theme-mode="dark"] .btn-light {
           background-color: #3a3a3a !important;
           border-color: #555 !important;
           color: #e0e0e0 !important;
       }

       [data-theme-mode="dark"] .btn-light:hover {
           background-color: #4a4a4a !important;
           border-color: #666 !important;
       }

       /* SIG-597: botões de ação (ícone sobre cor sólida) com ícone branco.
          Contra --warning-rgb (255,154,19), --success-rgb (12,199,99),
          --teal-rgb (0,216,216) e --orange-rgb (254,124,88) isso dá contraste
          real de ~1.8:1 a 2.6:1 — abaixo até do mínimo de 3:1 para ícone
          (WCAG 1.4.11). Ícone escuro nesses quatro dá ~5:1+. --primary-rgb
          (navy), --danger-rgb e --secondary-rgb já passam de 3:1 com branco
          e ficam como estão. Escopo só dark porque foi o caso relatado. */
       [data-theme-mode="dark"] .btn-warning,
       [data-theme-mode="dark"] .btn-success,
       [data-theme-mode="dark"] .btn-teal,
       [data-theme-mode="dark"] .btn-orange {
           color: #1a252f !important;
       }
       [data-theme-mode="dark"] .btn-warning:hover,
       [data-theme-mode="dark"] .btn-warning:focus,
       [data-theme-mode="dark"] .btn-success:hover,
       [data-theme-mode="dark"] .btn-success:focus,
       [data-theme-mode="dark"] .btn-teal:hover,
       [data-theme-mode="dark"] .btn-teal:focus,
       [data-theme-mode="dark"] .btn-orange:hover,
       [data-theme-mode="dark"] .btn-orange:focus {
           color: #1a252f;
       }

       /* SIG-597: "Encerrar" (.btn-warning) pediu hover mais vibrante que o
          brightness(1.15) genérico dava — cor fixa em vez de derivar de
          --warning-rgb, mesmo padrão do editar/visualizar/excluir acima.
          Ícone escuro continua (#1a252f), contraste >= 5.9:1 nos dois tons. */
       [data-theme-mode="dark"] .btn-warning {
           background-color: #FF9A13 !important;
           border-color: #FF9A13 !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-warning:hover,
       [data-theme-mode="dark"] .btn-warning:focus {
           background-color: #FFB020 !important;
           border-color: #FFB020 !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-warning:active {
           background-color: #E68A00 !important;
           border-color: #E68A00 !important;
           color: #1a252f;
           filter: none;
       }

       /* SIG-597/SIG-854: paleta própria pra .btn-info — cores fixas em vez
          de derivar de --info-rgb, que no dark cai pra 2.93:1 com texto
          branco. Antes só entrava dentro de um btn-group de listagem
          (editar/excluir); SIG-854 tira essa restrição porque botões
          isolados de página (ex.: "Recalcular", "Simular") usavam o
          --info-rgb cru e ficavam iguais. Texto branco em repouso e
          hover/focus com texto escuro porque o fundo mais claro (#D88A00)
          não sustenta 4.5:1 com texto branco — ambos os pares >= 4.5:1. */
       [data-theme-mode="dark"] .btn-info {
           background-color: #A26700 !important;
           border-color: #A26700 !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-info:hover,
       [data-theme-mode="dark"] .btn-info:focus {
           background-color: #D88A00 !important;
           border-color: #D88A00 !important;
           color: #1a252f !important;
           filter: none !important;
       }
       [data-theme-mode="dark"] .btn-info:active {
           background-color: #B87300 !important;
           border-color: #B87300 !important;
           color: #FFFFFF !important;
           filter: none;
       }

       [data-theme-mode="dark"] .btn-group .btn-danger,
       [data-theme-mode="dark"] .btn-group-sm .btn-danger {
           background-color: #B91C2C !important;
           border-color: #B91C2C !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-group .btn-danger:hover,
       [data-theme-mode="dark"] .btn-group-sm .btn-danger:hover,
       [data-theme-mode="dark"] .btn-group .btn-danger:focus,
       [data-theme-mode="dark"] .btn-group-sm .btn-danger:focus {
           background-color: #E11D32 !important;
           border-color: #E11D32 !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-group .btn-danger:active,
       [data-theme-mode="dark"] .btn-group-sm .btn-danger:active {
           background-color: #991B1B !important;
           border-color: #991B1B !important;
           color: #FFFFFF !important;
           filter: none;
       }

       /* SIG-597: paleta do .btn-primary no tema escuro — o editar das
          listagens e os botões isolados de página (ex.: "+ Novo Dependente")
          com o mesmo hover (pedido explícito).
          SIG-974: Produto confirmou que a paleta vale para todo .btn-primary
          do sistema, não só para as listagens do SIG-597 — por isso o seletor
          não tem escopo de tela. O item ativo da sidebar no tema escuro usa o
          mesma cor (--menu-ativo-bg em
          templates/components/header/header-styles.css). */
       [data-theme-mode="dark"] .btn-primary {
           background-color: #1c75da !important;
           border-color: #1c75da !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-primary:hover,
       [data-theme-mode="dark"] .btn-primary:focus {
           background-color: #1967c0 !important;
           border-color: #1967c0 !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-primary:active {
           background-color: #1760b3 !important;
           border-color: #1760b3 !important;
           color: #FFFFFF !important;
           filter: none;
       }

       /* SIG-854: #FF512F com texto branco dava 3.24:1 em repouso e o hover
          (#FF684A) caía pra 2.86:1 — abaixo do mínimo 4.5:1 de texto de
          botão. Repouso escurece pra #D63B1C (4.66:1 com branco); hover
          mantém o mesmo fundo mais claro (já usado antes) e troca só o
          texto pra escuro (5.43:1), sem mudar a cor de destaque do hover. */
       [data-theme-mode="dark"] .btn-secondary {
           background-color: #D63B1C !important;
           border-color: #D63B1C !important;
           color: #FFFFFF !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-secondary:hover,
       [data-theme-mode="dark"] .btn-secondary:focus {
           background-color: #FF684A !important;
           border-color: #FF684A !important;
           color: #1a252f !important;
           filter: none;
       }
       [data-theme-mode="dark"] .btn-secondary:active {
           background-color: #E84425 !important;
           border-color: #E84425 !important;
           color: #FFFFFF !important;
           filter: none;
       }

       /* SIG-597: o hover global (`filter: brightness(0.92)`, ver
          static/css/styles.css) escurece o botão — no modo escuro isso reduz
          o destaque em vez de reforçar, porque o botão já está sobre fundo
          escuro. Aqui ele clareia, mantendo o mesmo conjunto de variantes
          sólidas que a regra original cobre. Não afeta editar/visualizar/
          excluir em btn-group, que têm cor própria (filter: none acima). */
       [data-theme-mode="dark"] .btn:hover:not(:disabled):not(.disabled) {
           filter: brightness(1.15);
       }

       .page-header-breadcrumb {
           margin-top: 0 !important;
           margin-bottom: 1rem !important;
       }

       /* Header Search */
       .header-search {
           position: relative;
           width: 400px;
       }

       .header-search input {
           width: 100%;
           padding: 8px 40px 8px 35px;
           border: 1px solid #e5e7eb;
           border-radius: 6px;
           font-size: 14px;
       }

       .header-search #searchIcon {
           position: absolute;
           left: 12px;
           top: 50%;
           transform: translateY(-50%);
           color: #6c757d;
       }

       .btn-voice-search {
           position: absolute;
           right: 8px;
           top: 50%;
           transform: translateY(-50%);
           background: none;
           border: none;
           cursor: pointer;
           font-size: 18px;
           padding: 4px 8px;
           border-radius: 4px;
           transition: background-color 0.2s;
       }

       .btn-voice-search:hover {
           background-color: #f3f4f6;
       }

       .search-panel {
           position: absolute;
           top: calc(100% + 8px);
           left: 0;
           right: 0;
           background: white;
           border-radius: 8px;
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
           border: 1px solid #e5e7eb;
           z-index: 1000;
           max-height: 400px;
           overflow-y: auto;
       }

       .search-suggestions {
           padding: 12px;
       }

       .suggestions-section {
           margin-bottom: 16px;
       }

       .suggestions-section h6 {
           font-size: 13px;
           font-weight: 600;
           color: #6b7280;
           margin-bottom: 8px;
       }

       .search-results {
           padding: 12px;
       }

       .results-header {
           margin-bottom: 12px;
           font-size: 13px;
           color: #6b7280;
       }

       /* Notificações */
       .header-notification {
           position: relative;
           cursor: pointer;
           padding: 8px;
           margin-right: 10px;
       }

       .notification-badge {
           position: absolute;
           top: 4px;
           right: 4px;
           background: #dc3545;
           color: white;
           border-radius: 10px;
           padding: 2px 6px;
           font-size: 10px;
           font-weight: 600;
       }

       .notification-dropdown {
           display: none;
           position: fixed;
           min-width: 320px;
           background: white;
           border-radius: 8px;
           box-shadow: 0 8px 16px rgba(0,0,0,0.2);
           border: 1px solid #e5e7eb;
           z-index: 999999;
       }

       .notification-dropdown.show {
           display: block !important;
       }

       .notification-header {
           padding: 12px 16px;
           border-bottom: 1px solid #e5e7eb;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .notification-list {
           max-height: 300px;
           overflow-y: auto;
       }

       /* Main content padding */
       .main-content {
           padding: var(--shell-gutter-w) !important;
       }

       /* O Figma só define 1280 e 1440. Abaixo de 576px vale o recuo que o celular já
          tinha: 15px no .main-content mais 12px do .container-fluid (header-styles.css), 27px por lado. */
       @media (max-width: 575.98px) {
           .main-content {
               padding-left: 15px !important;
               padding-right: 15px !important;
           }
       }

       /* Conteúdo começa abaixo do header fixo e ao lado da sidebar */
       @media (min-width: 992px) {
           .app-content {
               margin-inline-start: var(--shell-sidebar-w) !important;
               margin-block-start: var(--shell-header-h) !important;
           }

           /* Sidebar colapsado não reserva espaço — sem isso o conteúdo (e
              --sidebar-width, que o modal usa pra nunca abrir por baixo do
              sidebar) continuava com 17rem mesmo com o sidebar fechado. */
           .sidebar-collapsed .app-content {
               margin-inline-start: 0 !important;
               width: 100% !important;
           }
           .sidebar-collapsed .page {
               width: 100%;
           }

           /* Header e sidebar já são fixos (position:fixed) — sem isso o
              documento inteiro cresce junto com o conteúdo da página e quem
              rola é a janela, com a barra de rolagem do navegador passando
              por trás do header. Travando a altura do documento em 100vh e
              tornando #spa-main-content o único scroller, a barra de
              rolagem fica só na área do conteúdo, abaixo do header. */
           html, body {
               height: 100%;
               overflow: hidden;
           }

           .page {
               height: 100vh;
               overflow: hidden;
           }

           #spa-main-content {
               height: calc(100vh - var(--shell-header-h)) !important;
               overflow-y: auto !important;
           }

           /* Bootstrap trava o scroll aplicando overflow:hidden no body, mas
              aqui quem rola e o #spa-main-content: sem esta regra ele
              continua rolando com o modal aberto. */
           body.modal-open #spa-main-content {
               overflow-y: hidden !important;
           }
       }

       /* Espaçamento padrão do título/breadcrumb — folga do header */
       .page-header-breadcrumb {
           margin-top: 0 !important;
           /* O conteudo ja comeca abaixo do header fixo e o
              .main-content acrescenta o recuo do casco; mais um espaco aqui
              deixava o titulo solto no topo da tela. */
           padding-top: 0 !important;
       }
       .page-header-breadcrumb h2,
       .page-header-breadcrumb h3 {
           font-size: 1.25rem !important;
           margin-bottom: 2px !important;
       }
       .page-header-breadcrumb p {
           font-size: 0.85rem !important;
       }

       /* Abas em forma de pasta: a ativa tem fundo do cartao, borda e uma barra
          na cor primaria em cima, e se liga ao painel logo abaixo; as demais
          ficam so com o texto. O painel nao tem borda em cima (a linha das abas
          faz esse papel), e quando embute outra tela (<iframe>) fica sem padding,
          porque a tela embutida ja traz o dela. */
       .nav-tabs {
           border-bottom: 1px solid var(--default-border, #e5e7eb);
           gap: 2px;
       }

       .nav-tabs:has(+ .tab-content) {
           margin-bottom: 0 !important;
       }

       .nav-tabs .nav-link {
           color: #6b7280;
           background: transparent;
           border: 1px solid transparent;
           border-top: 3px solid transparent;
           border-radius: 8px 8px 0 0;
           margin-bottom: -1px;
           padding: 0.55rem 1.1rem;
           font-weight: 500;
           transition: color 0.15s ease, background-color 0.15s ease;
       }

       .nav-tabs .nav-link:hover {
           color: #374151;
           background-color: rgba(var(--primary-rgb, 115, 93, 255), 0.06);
       }

       .nav-tabs .nav-link.active,
       .nav-tabs .nav-item.show .nav-link {
           color: rgb(var(--primary-rgb, 115, 93, 255));
           background-color: var(--custom-white, #fff);
           border-color: var(--default-border, #e5e7eb);
           border-top-color: rgb(var(--primary-rgb, 115, 93, 255));
           border-bottom-color: var(--custom-white, #fff);
           font-weight: 600;
       }

       .nav-tabs + .tab-content > .tab-pane {
           background-color: var(--custom-white, #fff);
           border: 1px solid var(--default-border, #e5e7eb);
           border-top: 0;
           border-radius: 0 0 8px 8px;
           padding: 1rem;
       }

       .tab-content > .tab-pane:has(> iframe) {
           padding: 0 !important;
       }

       [data-theme-mode="dark"] .nav-tabs .nav-link {
           color: #a3a3a3;
       }

       [data-theme-mode="dark"] .nav-tabs .nav-link:hover {
           color: #e5e5e5;
           background-color: rgba(255, 255, 255, 0.05);
       }

       [data-theme-mode="dark"] .nav-tabs .nav-link.active,
       [data-theme-mode="dark"] .nav-tabs .nav-item.show .nav-link {
           color: #c4b5fd;
           border-top-color: #a78bfa;
       }

       /* SIG-518 — valor monetario em card de indicador.

          Dois problemas no mesmo elemento: o numero quebrava no meio
          ("R$ 327.148.67" / "2,42") por falta de nowrap, e o nowrap sozinho
          faz o valor transbordar para os cards vizinhos (`.card` nao tem
          overflow:hidden). Entao o tamanho precisa acompanhar a largura do
          CARD, nao a da janela: `vw` encolhe onde o card e largo e nao
          encolhe onde ele e estreito. Mesmo motivo ja documentado em
          `templates/pages/dashboard/index.html`, que usa container query no painel.

          O coeficiente vem de medicao: com Quicksand 500, a largura do texto
          e ~7.8x o font-size para centenas de milhoes e ~9.5x para dezenas de
          bilhoes. `10cqi` (= 10% da largura util do card) mantem o valor
          dentro do card ate ~R$ 99.999.999.999,99. O piso de 0.9rem e guarda
          de legibilidade; o teto de 1.75rem e o proprio `.h3` do Bootstrap. */
       .card-indicador { container-type: inline-size; }

       .card-indicador-valor {
           white-space: nowrap;
           word-break: keep-all;
           overflow-wrap: normal;
           /* Fallback para navegador sem container query: teto fixo que ja
              cabe no `col-md-3` mais estreito do desktop (~194px em 1280). */
           font-size: 1.4rem;
       }

       @supports (container-type: inline-size) {
           .card-indicador-valor { font-size: clamp(0.9rem, 10cqi, 1.75rem); }
       }



/* Cards lado a lado com a mesma altura, e colunas comecando na mesma linha:
   card que e o unico filho da coluna estica ate o fundo dela, e o primeiro
   bloco de cada coluna perde a margem de cima que desalinhava as colunas. */
.row > [class*="col"]:has(> .card:only-child) {
    display: flex;
    flex-direction: column;
}
.row > [class*="col"] > .card:only-child {
    flex: 1 1 auto;
}
.row > [class*="col"] > :first-child {
    margin-top: 0 !important;
}


/* Cabecalho de tela: titulo e descricao encolhem antes de as acoes descerem
   de linha. Sem base flexivel, uma descricao longa ocupava a linha inteira e
   empurrava os botoes para baixo dela. */
.page-header-breadcrumb > .d-flex > div:first-child:not(:last-child) {
    flex: 1 1 20rem;
    min-width: 0;
}

/* Acoes secundarias do cabecalho com o mesmo contorno escuro da macro
   acoes_cabecalho (templates/components/cabecalho/acoes.html), para as telas
   que ainda montam o botao a mao com outra variante. */
.page-header-breadcrumb .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary-light):not(.btn-sm) {
    background-color: transparent !important;
    border: 1px solid rgb(var(--dark-rgb)) !important;
    color: rgb(var(--dark-rgb)) !important;
}
.page-header-breadcrumb .btn:is(.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary-light):not(.btn-sm):is(:hover, :active, :focus-visible) {
    background-color: rgb(var(--dark-rgb)) !important;
    border-color: rgb(var(--dark-rgb)) !important;
    color: rgb(var(--body-bg-rgb)) !important;
}

/* Acoes de linha de tabela: um estilo so, claro, no padrao btn-*-light.
   Botao solido em cada linha pesava a grade e competia com os dados; aqui ele
   vira fundo tingido com icone na cor forte da variante, e so o hover
   preenche. O foco de teclado ganha contorno proprio. */
.table td .btn:is(.btn-primary, .btn-secondary, .btn-dark, .btn-info, .btn-success, .btn-warning, .btn-danger) {
    --acao-linha-rgb: 44, 62, 80;
    background-color: rgba(var(--acao-linha-rgb), 0.1) !important;
    border-color: transparent !important;
    color: rgb(var(--acao-linha-rgb)) !important;
    box-shadow: none !important;
}
.table td .btn.btn-info { --acao-linha-rgb: var(--info-forte-rgb); }
.table td .btn.btn-success { --acao-linha-rgb: var(--success-forte-rgb); }
.table td .btn.btn-warning { --acao-linha-rgb: var(--warning-forte-rgb); }
.table td .btn.btn-danger { --acao-linha-rgb: var(--danger-selo-texto-rgb); }
.table td .btn:is(.btn-primary, .btn-secondary, .btn-dark, .btn-info, .btn-success, .btn-warning, .btn-danger):is(:hover, :active) {
    background-color: rgb(var(--acao-linha-rgb)) !important;
    color: #fff !important;
}
.table td .btn:is(.btn-primary, .btn-secondary, .btn-dark, .btn-info, .btn-success, .btn-warning, .btn-danger):focus-visible {
    outline: 2px solid rgb(var(--acao-linha-rgb));
    outline-offset: 2px;
}
[data-theme-mode="dark"] .table td .btn:is(.btn-primary, .btn-secondary, .btn-dark) { --acao-linha-rgb: 224, 224, 224; }
[data-theme-mode="dark"] .table td .btn.btn-info { --acao-linha-rgb: 110, 190, 255; }
[data-theme-mode="dark"] .table td .btn.btn-success { --acao-linha-rgb: 90, 210, 140; }
[data-theme-mode="dark"] .table td .btn.btn-warning { --acao-linha-rgb: 255, 196, 90; }
[data-theme-mode="dark"] .table td .btn:is(.btn-primary, .btn-secondary, .btn-dark, .btn-info, .btn-success, .btn-warning, .btn-danger):is(:hover, :active) {
    color: #1a1a1a !important;
}


/* Titulo de card num tamanho so: o tema dava 17,6px ao .card-title do
   custom-card e o h6 do card-header ficava em 16px, com pesos diferentes. */
.card .card-header :is(.card-title, h5, h6) {
    font-size: 1rem !important;
    font-weight: 600 !important;
}
       /* SIG-1126 — impressão das telas autenticadas.

          Um bloco só para todo o sistema: no papel sai o conteúdo da tela, sem
          o que é interação (filtros, botões, paginação). Cada página só
          acrescenta o que é dela. Header e menu lateral saem no `@media print`
          de templates/components/header/header-styles.css, que é onde moram as
          regras deles (SIG-714). */
       @media print {
           /* O `@page { size: a4 }` do styles.css travava a folha em retrato,
              inclusive no diálogo de impressão. Aqui o usuário escolhe papel e
              orientação; tela que precisa de folha fixa declara o próprio
              `@page` (Relatórios), que carrega depois e prevalece. */
           @page {
               size: auto;
           }

           /* `#paginacaoContainer` é o rodapé das listagens ("Itens por página",
              "Exibindo x-y de N"); `.pagination` cobre a barra de páginas que
              não está nele. */
           .painel-filtros,
           #paginacaoContainer,
           .pagination,
           .btn,
           .nao-imprimir {
               display: none !important;
           }

           /* Sem o menu, o conteúdo ocupa a folha inteira: a margem de 300px
              e a largura calc(100vw - 300px) de content-styles.css deixavam
              um terço do papel em branco. O container entra como
              `.main-content .container-fluid` porque content-styles.css usa
              esse seletor para zerar o padding, e um `.container-fluid` só
              perde para ele. */
           .main-content,
           .app-content,
           .main-content .container-fluid {
               margin: 0 !important;
               padding: 0 !important;
               width: 100% !important;
               max-width: 100% !important;
           }

           /* A partir de 992px (A4 paisagem passa disso) o documento fica
              travado em 100vh e só #spa-main-content rola. No papel isso
              imprimia só o que cabia na primeira página: a altura volta a
              acompanhar o conteúdo e a tabela continua nas seguintes. O
              `max-height` sai junto: várias `.table-responsive` trazem um
              inline (ex.: 400px), e com `overflow: visible` as linhas além
              dele eram desenhadas por cima do que vem depois na folha. */
           html,
           body,
           .page,
           #spa-main-content,
           .main-content,
           .table-responsive {
               height: auto !important;
               max-height: none !important;
               overflow: visible !important;
           }

           /* `tfoot` repete em toda página impressa por padrão, e o total
              geral passa a ser lido como "total desta página" — a conferência
              não fecha. Como grupo comum, ele sai uma vez só, no fim. */
           tfoot {
               display: table-row-group;
           }
       }