/* Ajustes finos sobre o Tailwind (tema jurídico premium). */

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

/* Scrollbar discreta */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: content-box;
}

/* HTML de relatório de validação vindo do provedor */
.report-html h3 {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #0f172a;
}
.report-html p {
  font-size: 0.875rem;
  color: #475569;
  margin-bottom: 0.5rem;
}
.report-html a {
  color: #b9120d;
  text-decoration: underline;
}

/* Tabelas: linhas com hover suave */
.table-row-hover tbody tr:hover {
  background-color: #faf7f8;
}

/* --- Barra lateral recolhível (somente desktop) -------------------------- */
@media (min-width: 1024px) {
  .nav-shift {
    transition: padding-left 0.2s ease;
  }
  html.nav-collapsed #sidebar {
    width: 5rem;
  }
  html.nav-collapsed .nav-shift {
    padding-left: 5rem;
  }
  /* Esconde rótulos/itens que só fazem sentido com o menu aberto */
  html.nav-collapsed .nav-label,
  html.nav-collapsed .brand-text,
  html.nav-collapsed .nav-foot,
  html.nav-collapsed .nav-submenu {
    display: none;
  }
  /* Centraliza marca, ícones, o grupo Administração e o botão Sair quando recolhido */
  html.nav-collapsed #sidebar .brand-row,
  html.nav-collapsed #sidebar nav a,
  html.nav-collapsed #sidebar [data-nav-group-toggle],
  html.nav-collapsed #sidebar .nav-foot-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* Gira o chevron para indicar "expandir" */
  html.nav-collapsed .nav-chevron {
    transform: rotate(180deg);
  }
}

/* Topbar: gira o chevron do menu do usuário quando o dropdown está aberto */
[data-dropdown][aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}

/* Sidebar: gira o chevron do grupo Configurações quando aberto */
[data-nav-group][data-open] .nav-group-caret {
  transform: rotate(180deg);
}

/* Modal de confirmação (<dialog>) — renderiza no top-layer, acima de tudo */
.confirm-dialog {
  width: calc(100% - 2rem);
  max-width: 26rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.confirm-dialog[open] {
  animation: confirmPop 0.16s ease-out;
}
@keyframes confirmPop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================================== */
/*  Tema ESCURO — remapeia os utilitários do design system sob data-theme.     */
/*  Aditivo: só vale com html[data-theme="dark"]; o tema claro fica intacto.   */
/* =========================================================================== */
html[data-theme="dark"] { color-scheme: dark; background-color: #0B0B0F; }
html[data-theme="dark"] body { background-color: #0B0B0F; color: #E7EBF2; }

/* Scrollbar escura no tema preto (a clara global destoa do fundo) */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a2e; background-clip: content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a3a40; background-clip: content-box; }

/* superfícies — preto neutro (fundo #000, cards #0e0e10) */
html[data-theme="dark"] .bg-white { background-color: #17181F !important; }
html[data-theme="dark"] .bg-white\/90 { background-color: rgba(15, 16, 20, 0.82) !important; }
html[data-theme="dark"] .bg-slate-50 { background-color: #0F1014 !important; }
html[data-theme="dark"] .bg-slate-50\/60,
html[data-theme="dark"] .bg-slate-50\/70 { background-color: #0F1014 !important; }
html[data-theme="dark"] .bg-slate-100 { background-color: #1A1B22 !important; }
/* Sidebar com tom próprio p/ separação visual do fundo e dos cards */
html[data-theme="dark"] #sidebar { background-color: #111217 !important; }
html[data-theme="dark"] .bg-slate-900\/50 { background-color: rgba(0, 0, 0, 0.6) !important; }
/* Assinatura no tema ESCURO: mantém o FUNDO escuro e deixa a TINTA branca na tela.
   A imagem salva (toDataURL) usa os pixels REAIS — tinta escura #14213d sobre
   transparente — então no relatório/PDF (branco) a assinatura sai escura. O filtro é
   só de exibição (não afeta o toDataURL): brightness(0) zera a cor (preto) e invert(1)
   a leva a branco; transparente continua transparente (mostra o card escuro atrás). */
html[data-theme="dark"] .sig-ink { filter: brightness(0) invert(1); background-color: transparent !important; }

/* texto — cinza neutro (sem tint azul) */
html[data-theme="dark"] .text-slate-900 { color: #F8FAFC !important; }
html[data-theme="dark"] .text-slate-800 { color: #E7EBF2 !important; }
html[data-theme="dark"] .text-slate-700 { color: #CBD2DC !important; }
html[data-theme="dark"] .text-slate-600 { color: #9CA3AF !important; }
html[data-theme="dark"] .text-slate-500 { color: #9CA3AF !important; }
html[data-theme="dark"] .text-slate-400 { color: #6B7280 !important; }

/* bordas / rings / divisores — hairline branco sutil (inclui a variante /70,
   senão os cards com border-slate-200/70 — ex.: Dashboard — ficam com "borda branca"
   clara do tema claro, destoando dos cards com ring-slate-200/70). */
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/70,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-slate-100 { border-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .ring-slate-200,
html[data-theme="dark"] .ring-slate-200\/70 { --tw-ring-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .ring-slate-900\/5 { --tw-ring-color: rgba(255, 255, 255, 0.06) !important; }
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, 0.08) !important; }

/* acento wine (links/ícones clareiam no escuro p/ contraste) — preservado */
html[data-theme="dark"] .text-wine-600,
html[data-theme="dark"] .text-wine-700,
html[data-theme="dark"] .text-wine-800 { color: #e19997 !important; }
html[data-theme="dark"] .bg-wine-50,
html[data-theme="dark"] .hover\:bg-wine-50:hover { background-color: #3a1513 !important; }

/* inputs / selects / textarea — afundados (#0a0a0c) sobre os cards */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: #12131A !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #E7EBF2 !important; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6B7280 !important; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled { background-color: #0B0B0F !important; color: #6B7280 !important; }

/* Hovers no ESCURO: nunca clareiam. Neutros (linhas de lista/tabela, cards,
   botões claros) → grafite #1A1B22; semânticos → tom escuro da própria cor, p/
   dar feedback sem virar branco. Cobre os utilitários hover:bg-* do Tailwind que
   resolvem p/ cores claras E a regra global de linha de tabela (.table-row-hover),
   que no claro usa #faf7f8. Texto/ícones/badges já são remapeados p/ tons claros,
   então seguem legíveis sobre o grafite. */
html[data-theme="dark"] .hover\:bg-white:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-50\/70:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .table-row-hover tbody tr:hover { background-color: #1A1B22 !important; }
html[data-theme="dark"] .hover\:bg-red-50:hover { background-color: #2a1414 !important; }
html[data-theme="dark"] .hover\:bg-amber-50:hover { background-color: #2a2008 !important; }
html[data-theme="dark"] .hover\:bg-emerald-50:hover,
html[data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: #0c2a22 !important; }
html[data-theme="dark"] .hover\:bg-wine-100:hover,
html[data-theme="dark"] .hover\:bg-wine-50\/40:hover { background-color: #4a1a17 !important; }

/* badges / blocos coloridos sobre fundos -50 */
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-50\/60 { background-color: #0c2a22 !important; }
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-900 { color: #6ee7b7 !important; }
html[data-theme="dark"] .border-emerald-200 { border-color: #14463a !important; }
html[data-theme="dark"] .bg-red-50 { background-color: #2a1414 !important; }
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
html[data-theme="dark"] .border-red-200 { border-color: #4a1d1d !important; }
html[data-theme="dark"] .bg-amber-50 { background-color: #2a2008 !important; }
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800 { color: #fcd34d !important; }
html[data-theme="dark"] .bg-sky-50 { background-color: #0c2030 !important; }
html[data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; }
html[data-theme="dark"] .bg-yellow-50 { background-color: #2a2208 !important; }
html[data-theme="dark"] .text-yellow-800 { color: #fde047 !important; }

/* Configurações: nav lateral, key-values e seletor de tema no escuro */
html[data-theme="dark"] .stg-nav a { color: #a8a8b0; }
html[data-theme="dark"] .stg-nav a:hover { background: #1a1a1d; color: #f4f4f5; }
html[data-theme="dark"] .stg-nav a.tab-active { background: #3a1513; color: #e19997; }
html[data-theme="dark"] .stg-nav a svg { color: #6e6e78; }
html[data-theme="dark"] .stg-nav a:hover svg,
html[data-theme="dark"] .stg-nav a.tab-active svg { color: #e19997; }
html[data-theme="dark"] .stg-kv { border-color: #26262b; }
html[data-theme="dark"] .stg-kv dt { color: #9a9aa3; }
html[data-theme="dark"] .stg-kv dd { color: #e6e6e8; }
html[data-theme="dark"] .theme-opt { background: #0a0a0c; border-color: #26262b; color: #cdcdd2; }
html[data-theme="dark"] .theme-opt svg { color: #9a9aa3; }
html[data-theme="dark"] .theme-opt.theme-opt-active { background: #3a1513; border-color: #e19997; box-shadow: 0 0 0 1px #e19997; color: #e19997; }
html[data-theme="dark"] .theme-opt.theme-opt-active svg { color: #e19997; }

/* Só aparece na impressão/PDF (ex.: aviso de que o vídeo não é impresso). */
.print-only { display: none; }

@media print {
  #sidebar,
  header,
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .lg\:pl-64 {
    padding-left: 0 !important;
  }
}

/* =========================================================================== */
/*  Animação global de botões / pílulas / cards (painel inteiro). Aditivo,       */
/*  SEMPRE ativo (sem gate de prefers-reduced-motion, por preferência do         */
/*  escritório): ENTRADA ao carregar (surgem com fade + subida, em leve          */
/*  sequência) + hover que ELEVA com sombra + "press" ao clicar.                 */
/* =========================================================================== */
button,
a[class*="rounded"],
label[class*="rounded"],
summary {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .2s ease, opacity .18s ease,
              transform .16s cubic-bezier(.34, 1.4, .55, 1);
  animation: btnPopIn .48s cubic-bezier(.2, .75, .3, 1) both;
}
@keyframes btnPopIn {
  0%   { opacity: 0; transform: translateY(9px) scale(.97); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Leve sequência entre botões irmãos (barras de ação, filtros); teto p/ não pesar. */
button:nth-child(2), a[class*="rounded"]:nth-child(2), label[class*="rounded"]:nth-child(2) { animation-delay: .05s; }
button:nth-child(3), a[class*="rounded"]:nth-child(3), label[class*="rounded"]:nth-child(3) { animation-delay: .10s; }
button:nth-child(4), a[class*="rounded"]:nth-child(4), label[class*="rounded"]:nth-child(4) { animation-delay: .15s; }
button:nth-child(n+5), a[class*="rounded"]:nth-child(n+5), label[class*="rounded"]:nth-child(n+5) { animation-delay: .20s; }

/* =========================================================================== */
/*  Animação de ENTRADA por ABA: cada bloco de nível superior do conteúdo         */
/*  (cabeçalho -> cards -> tabela/lista -> gráfico) surge com fade + leve subida, */
/*  em sequência, a cada carregamento de página. Aplicada no <main.page-anim> do  */
/*  base.html, então vale p/ TODAS as abas sem editar template por template.      */
/*  Sem gate de prefers-reduced-motion (preferência do escritório).               */
/* =========================================================================== */
@keyframes pageRise { from { opacity: 0; transform: translateY(12px); } }
/* fill-mode BACKWARDS (não "both"): "backwards" segura o estado inicial durante o
   atraso escalonado (evita flash dos cards que entram depois), mas NÃO mantém um
   transform após o fim. "both"/"forwards" deixava cada card com transform
   matrix(1,0,0,1,0,0) (≠ none) permanente → cada card virava STACKING CONTEXT, e aí
   dropdowns/menus (ex.: filtros .ui-combo, z-index:50) ficavam presos atrás do card
   seguinte (a tabela). Com "backwards" o transform volta a "none" e os menus sobem. */
/* :not(dialog) — o <dialog> e filho direto do <main.page-anim>, mas e um overlay
   aberto sob demanda, nao conteudo do fluxo. Sem exclui-lo, o animation-delay do
   escalonamento (ex.: .28s) vazava para a animação de abertura do modal
   (.confirm-dialog[open] confirmPop) — mesma especificidade, e estas regras vêm
   depois → venciam o delay:0. O modal então aparecia cheio e, após o atraso, o
   confirmPop rodava "de novo". Excluindo dialog, cada modal controla sua abertura. */
.page-anim > *:not(dialog) { animation: pageRise .45s cubic-bezier(.22, .61, .36, 1) backwards; }
.page-anim > *:not(dialog):nth-child(1) { animation-delay: 0s; }
.page-anim > *:not(dialog):nth-child(2) { animation-delay: .06s; }
.page-anim > *:not(dialog):nth-child(3) { animation-delay: .12s; }
.page-anim > *:not(dialog):nth-child(4) { animation-delay: .18s; }
.page-anim > *:not(dialog):nth-child(5) { animation-delay: .24s; }
.page-anim > *:not(dialog):nth-child(n+6) { animation-delay: .28s; }

/* Menus suspensos (topbar: usuário + notificações): entrada ao ABRIR. O JS faz    */
/* `panel.hidden=false` → o display muda e a animação (re)dispara a cada abertura.   */
/* origin-top-right já vem no markup, então "cresce" a partir do gatilho.            */
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
[data-dropdown-panel] { animation: dropdownIn .17s cubic-bezier(.22, .61, .36, 1) both; }
[data-dropdown-panel] .dd-item { animation: btnPopIn .48s cubic-bezier(.2, .75, .3, 1) both; }  /* itens do menu (Configuracoes + Sair) entram IGUAIS */

/* Hover: botões e links-botão ELEVAM com sombra. Cards (rounded-2xl/3xl) elevam  */
/* SEM box-shadow para não sobrescrever o `ring` do Tailwind.                    */
@media (hover: hover) {
  button:not(:disabled):hover,
  a[class*="rounded-xl"]:not(.pointer-events-none):hover,
  a[class*="rounded-lg"]:not(.pointer-events-none):hover,
  a[class*="rounded-full"]:not(.pointer-events-none):hover,
  label[class*="rounded"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(15, 23, 42, .12);
  }
  a[class*="rounded-2xl"]:not(.pointer-events-none):hover,
  a[class*="rounded-3xl"]:not(.pointer-events-none):hover {
    transform: translateY(-2px);
  }
}

/* "press" ao clicar (recua a elevação + encolhe de leve). */
button:not(:disabled):active,
a[class*="rounded"]:not(.pointer-events-none):active,
label[class*="rounded"]:active {
  transform: translateY(0) scale(.96);
}

/* Botões de AÇÃO em formato PÍLULA (estilo do print). O hover que eleva já existe   */
/* acima. Todo <button> vira pílula (ação e ícone ficam bem redondos); e os <a> que   */
/* SÃO botões (têm fundo/contorno de botão) também. Exclui o botão do seletor de       */
/* telefone e os <a>-CARD (rounded-2xl/3xl), para não arredondar cards/inputs.         */
button:not(.iti__selected-country):not([data-add]),
a.bg-wine-700:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]),
a[class*="border-slate-2"]:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]),
a[class*="border-slate-3"]:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]),
a[class*="border-wine-2"]:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]),
a[class*="border-red-2"]:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]) {
  border-radius: 9999px !important;
}

/* Checkboxes mais bonitos: cantos suaves, hover e "check" na cor wine, com transição. */
/* NÃO afeta os toggles (que usam .peer.sr-only) nem radios.                            */
input[type="checkbox"]:not(.peer) {
  border-radius: 6px;
  border-width: 1.5px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .18s ease;
  cursor: pointer;
}
input[type="checkbox"]:not(.peer):hover:not(:disabled) { border-color: #c84440; }
input[type="checkbox"]:not(.peer):checked { box-shadow: 0 2px 6px -1px rgba(185, 18, 13, .45); }
input[type="checkbox"]:not(.peer):focus-visible { outline: 2px solid #d46e6b; outline-offset: 2px; }

/* ============================ intl-tel-input ============================== */
/* O wrapper que a lib injeta deve ocupar a largura do campo (o input usa w-full). */
.iti { display: block; width: 100%; }
/* O botão da bandeira é um <button>; sem isto ele herda o "elevar/encolher"      */
/* global de :hover/:active e desalinha dentro do input.                          */
.iti button:hover, .iti button:active { transform: none !important; box-shadow: none !important; }

/* Ordem do botão do país: bandeira -> "+55" -> setinha (padrão da lib é         */
/* bandeira -> setinha -> +55). O arrow vem aninhado junto da bandeira no         */
/* .iti__selected-country-primary; display:contents o "dissolve" para podermos    */
/* ordenar os três como flex items. Escopado ao botão (NÃO afeta as bandeiras da  */
/* lista do dropdown).                                                            */
/* padding-left: o display:contents abaixo remove o respiro que a lib dava à      */
/* esquerda, e a bandeira encostava na curva do canto arredondado (border-radius  */
/* 12px do input). 12px afasta a bandeira da borda. A lib mede a largura do botão */
/* no init (com este padding) e ajusta o padding-left do input automaticamente.   */
.iti__selected-country { display: flex; align-items: center; padding-left: 12px; }
.iti__selected-country .iti__selected-country-primary { display: contents; }
.iti__selected-country .iti__flag { order: 1; }
.iti__selected-country .iti__selected-dial-code { order: 2; margin-left: 6px; }
.iti__selected-country .iti__arrow { order: 3; margin-left: 6px; }

/* Campo de busca do dropdown: o plugin `forms` do Tailwind zera o padding e a    */
/* lupa (um ícone à esquerda) fica por cima do texto. Restaura o espaço da lupa.  */
.iti__search-input { padding-left: 37px !important; }

/* Tema escuro: a lib renderiza o dropdown claro por padrão. */
[data-theme="dark"] .iti__dropdown-content { background-color: #0e0e10; color: #e5e7eb; border-color: #27272a; }
[data-theme="dark"] .iti__country.iti__highlight { background-color: #1c1c1f; }
[data-theme="dark"] .iti__dial-code { color: #9ca3af; }
[data-theme="dark"] .iti__search-input { background-color: #0e0e10; color: #e5e7eb; border-color: #27272a; }
[data-theme="dark"] .iti__search-input::placeholder { color: #6b7280; }

/* ============================================================================ */
/*  Dropdowns premium — identidade vinho, sem o azul padrão do navegador         */
/* ============================================================================ */
/* .ui-select: refina QUALQUER <select> (campo fechado). Seta discreta própria,   */
/* borda suave, altura confortável, foco vinho (nunca azul), hover e tema escuro. */
.ui-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
  color: #334155; background-color: #fff;
  border: 1px solid #e2e8f0; border-radius: 0.75rem;
  padding: 0.5rem 2.25rem 0.5rem 0.85rem; min-height: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 1rem 1rem;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ui-select:hover { border-color: #cbd5e1; }
.ui-select:focus, .ui-select:focus-visible { outline: none; border-color: #b9120d; box-shadow: 0 0 0 3px rgba(185, 18, 13, 0.14); }
.ui-select option { color: #334155; background-color: #fff; }
html[data-theme="dark"] .ui-select {
  color: #CBD2DC; background-color: #12131A; border-color: rgba(255, 255, 255, 0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236e6e78' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .ui-select:hover { border-color: #3a3a40; }
html[data-theme="dark"] .ui-select:focus, html[data-theme="dark"] .ui-select:focus-visible { border-color: #e19997; box-shadow: 0 0 0 3px rgba(225, 153, 151, 0.18); }
html[data-theme="dark"] .ui-select option { color: #E7EBF2; background-color: #17181F; }

/* .ui-combo: dropdown CUSTOM (menu flutuante + busca + scroll). Usa um <select>   */
/* real escondido p/ submeter o form e servir de fallback sem-JS.                  */
.ui-combo { position: relative; display: inline-block; }
.ui-combo-native { display: none !important; }
.ui-combo-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  font-size: .875rem; font-weight: 500; color: #334155; text-align: left;
  background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
  padding: .5rem .75rem; min-height: 2.5rem; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ui-combo-trigger:hover { border-color: #cbd5e1; }
.ui-combo[data-open="1"] .ui-combo-trigger, .ui-combo-trigger:focus-visible { outline: none; border-color: #b9120d; box-shadow: 0 0 0 3px rgba(185, 18, 13, 0.14); }
.ui-combo-trigger svg { width: 1rem; height: 1rem; color: #94a3b8; flex: none; transition: transform .15s ease; }
.ui-combo[data-open="1"] .ui-combo-trigger svg { transform: rotate(180deg); }
.ui-combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-combo-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(24rem, 88vw);
  background: #fff; border: 1px solid #e5e7eb; border-radius: .875rem;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .22), 0 4px 10px -6px rgba(15, 23, 42, .14);
  padding: .375rem;
}
.ui-combo-search { padding: .25rem .25rem .375rem; }
.ui-combo-search input { width: 100%; font-size: .8125rem; color: #334155; border: 1px solid #e2e8f0; border-radius: .625rem; padding: .4rem .6rem; }
.ui-combo-search input:focus { outline: none; border-color: #b9120d; box-shadow: 0 0 0 3px rgba(185, 18, 13, .12); }
.ui-combo-options { max-height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ui-combo-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  border: 0; background: transparent; border-radius: .5rem; padding: .45rem .55rem; font-size: .8125rem; color: #334155; cursor: pointer;
}
.ui-combo-option:hover:not([aria-disabled="true"]) { background: #faf0f0; }
.ui-combo-option[aria-selected="true"] { background: #fbf1f1; color: #9b0f0b; font-weight: 600; }
.ui-combo-option[aria-disabled="true"] { color: #cbd5e1; cursor: not-allowed; }
.ui-combo-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6875rem; color: #94a3b8; }
.ui-combo-option[aria-selected="true"] .ui-combo-code { color: #c08a88; }
.ui-combo-empty { padding: .6rem .55rem; font-size: .8125rem; color: #94a3b8; text-align: center; }
.ui-combo-options::-webkit-scrollbar { width: 8px; }
.ui-combo-options::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 8px; border: 2px solid #fff; }
html[data-theme="dark"] .ui-combo-trigger { color: #CBD2DC; background: #12131A; border-color: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .ui-combo-trigger:hover { border-color: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .ui-combo[data-open="1"] .ui-combo-trigger { border-color: #e19997; box-shadow: 0 0 0 3px rgba(225, 153, 151, .18); }
html[data-theme="dark"] .ui-combo-menu { background: #17181F; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .ui-combo-search input { background: #12131A; border-color: rgba(255, 255, 255, 0.10); color: #E7EBF2; }
html[data-theme="dark"] .ui-combo-option { color: #CBD2DC; }
html[data-theme="dark"] .ui-combo-option:hover:not([aria-disabled="true"]) { background: #1A1B22; }
html[data-theme="dark"] .ui-combo-option[aria-disabled="true"] { color: #565660; }
html[data-theme="dark"] .ui-combo-option[aria-selected="true"] { background: #3a1513; color: #e19997; }
html[data-theme="dark"] .ui-combo-code { color: #6B7280; }
html[data-theme="dark"] .ui-combo-options::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-color: #17181F; }

/* ============================================================================ */
/*  Trilha de auditoria — barra de filtros                                        */
/*  Estilo LOCAL (chega junto do style.css, ANTES do Tailwind CDN e do            */
/*  ui_combo.js) para o filtro e o botão já nascerem no design final: sem flash,  */
/*  sem "pulo" de largura no swap <select> -> .ui-combo, sem troca pós-load.       */
/* ============================================================================ */
.audit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
/* Largura estável nas duas fases: o <select> nativo e, depois, o wrapper         */
/* .ui-combo que o ui_combo.js cria em volta dele. Sem isto o combo encolhe.      */
.audit-filters .ui-select,
.audit-filters .ui-combo { min-width: 16rem; }
/* No celular os combos ocupam a linha inteira em vez de 16rem rígidos (empilham). */
@media (max-width: 639px) {
  .audit-filters .ui-select,
  .audit-filters .ui-combo { min-width: 0; width: 100%; }
}

/* Botão "Filtrar": azul-escuro (slate-800), mesma altura do seletor (2.5rem).    */
/* O formato pílula vem da regra global de <button> ("estilo do print", ~l.341) — */
/* por isso NÃO definimos border-radius aqui (evita conflito com o !important).    */
.audit-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: .5rem .9rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  color: #fff; background-color: #1e293b;
  border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease;
}
.audit-filter-btn:hover { background-color: #0f172a; }
.audit-filter-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 41, 59, .35); }
html[data-theme="dark"] .audit-filter-btn { background-color: #2a3444; }
html[data-theme="dark"] .audit-filter-btn:hover { background-color: #38445a; }

/* Ícone (i) na opção que tem explicação + tooltip flutuante (.ui-tip). O tooltip
   vai no <body> (position:fixed) p/ não ser cortado pelo scroll do menu, e é
   pointer-events:none p/ jamais atrapalhar o clique na opção. */
.ui-combo-option.has-tip { position: relative; padding-right: 1.9rem; }
.ui-combo-info { position: absolute; right: .5rem; top: .55rem; display: inline-flex; color: #b6becb; transition: color .12s ease; }
.ui-combo-info svg { width: 1rem; height: 1rem; }
.ui-combo-option:hover .ui-combo-info, .ui-combo-info:hover { color: #b9120d; }
html[data-theme="dark"] .ui-combo-info { color: #5b5c66; }
html[data-theme="dark"] .ui-combo-option:hover .ui-combo-info, html[data-theme="dark"] .ui-combo-info:hover { color: #e19997; }

@keyframes uiTipIn { from { opacity: 0; transform: translateY(-3px); } }
.ui-tip {
  position: fixed; z-index: 1100; max-width: 17rem; pointer-events: none;
  background: #fff; color: #475569; border: 1px solid #eceef2; border-radius: .75rem;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, .28), 0 4px 10px -6px rgba(15, 23, 42, .12);
  padding: .55rem .7rem; font-size: .75rem; line-height: 1.4;
  animation: uiTipIn .14s cubic-bezier(.22, .61, .36, 1) both;
}
.ui-tip[hidden] { display: none; }
.ui-tip-title { display: block; font-weight: 600; color: #0f172a; font-size: .78rem; margin-bottom: .1rem; }
.ui-tip-text { display: block; }
html[data-theme="dark"] .ui-tip { background: #17181F; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .72); color: #9CA3AF; }
html[data-theme="dark"] .ui-tip-title { color: #F8FAFC; }

/* =========================================================================== */
/*  Date picker premium (.dp-*) — substitui o calendário nativo do <input type=date>. */
/*  JS: date_picker.js. Popup no <body> (position:fixed) p/ nunca ficar cortado.       */
/* =========================================================================== */
.dp { position: relative; display: block; }
.dp-native { display: none !important; }
.dp-trigger {
  display: inline-flex; align-items: center; gap: .5rem; width: 100%;
  font-size: .875rem; font-weight: 500; color: #334155; text-align: left;
  background: #fff; border: 1px solid #cbd5e1; border-radius: .75rem;
  padding: .5rem .75rem; min-height: 2.5rem; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dp-trigger:hover { border-color: #b9a0a3; }
.dp-trigger:focus-visible, .dp.is-open .dp-trigger { outline: none; border-color: #b9120d; box-shadow: 0 0 0 3px rgba(185, 18, 13, 0.14); }
.dp-trigger > svg { width: 1.05rem; height: 1.05rem; color: #94a3b8; flex: none; }
.dp.is-open .dp-trigger > svg { color: #b9120d; }
.dp-trigger .dp-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-trigger.is-empty .dp-value { color: #94a3b8; font-weight: 400; }
.dp-trigger:disabled { opacity: .55; cursor: not-allowed; }

.dp-panel {
  position: fixed; z-index: 1000; width: 17.5rem; box-sizing: border-box;
  background: #fff; border: 1px solid #eceef2; border-radius: 1rem;
  box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .28), 0 6px 14px -8px rgba(15, 23, 42, .12);
  padding: .75rem; user-select: none;
  animation: dpIn .16s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes dpIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.dp-head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .5rem; }
.dp-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .625rem; border: 0; background: transparent;
  color: #64748b; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.dp-nav > svg { width: 1.1rem; height: 1.1rem; }
.dp-nav:hover { background: #f4eef0; color: #b9120d; }
.dp-title {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: #0f172a; text-transform: capitalize;
  padding: .3rem .5rem; border-radius: .5rem; transition: background-color .15s ease;
}
.dp-title:hover { background: #f7f4f5; }
.dp-title-static { cursor: default; }
.dp-title-static:hover { background: transparent; }
.dp-title-y { color: #94a3b8; font-weight: 500; }

.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .15rem; }
.dp-week > span { text-align: center; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: #94a3b8; padding: .3rem 0; }

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.15rem; width: 100%; border: 0; background: transparent; cursor: pointer;
  font-size: .8125rem; font-weight: 500; color: #334155; border-radius: .625rem;
  transition: background-color .13s ease, color .13s ease, box-shadow .13s ease;
}
.dp-day:hover:not(:disabled):not(.is-selected) { background: #f4eef0; color: #9b0f0b; }
.dp-day.dp-out { color: #cbd5e1; cursor: default; font-weight: 400; }
.dp-day:disabled { color: #d7dbe2; cursor: not-allowed; }
.dp-day.is-today:not(.is-selected) { color: #b9120d; box-shadow: inset 0 0 0 1.5px rgba(185, 18, 13, .45); }
.dp-day.is-selected { background: #b9120d; color: #fff; font-weight: 600; box-shadow: 0 4px 10px -3px rgba(185, 18, 13, .5); }

.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid #eef1f4; }
.dp-link { border: 0; background: transparent; cursor: pointer; font-size: .8125rem; font-weight: 500; color: #94a3b8; padding: .25rem .4rem; border-radius: .5rem; transition: color .15s ease, background-color .15s ease; }
.dp-link:hover { color: #b9120d; background: #f7f4f5; }
.dp-link-strong { color: #b9120d; }

.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.dp-month {
  border: 0; background: transparent; cursor: pointer; padding: .6rem .25rem; border-radius: .625rem;
  font-size: .8125rem; font-weight: 500; color: #334155; text-transform: capitalize;
  transition: background-color .13s ease, color .13s ease;
}
.dp-month:hover:not(.is-selected) { background: #f4eef0; color: #9b0f0b; }
.dp-month.is-view:not(.is-selected) { box-shadow: inset 0 0 0 1.5px rgba(185, 18, 13, .4); color: #b9120d; }
.dp-month.is-selected { background: #b9120d; color: #fff; font-weight: 600; }

/* ---- Date picker no ESCURO (grafite + acento vinho) ---- */
html[data-theme="dark"] .dp-trigger { color: #CBD2DC; background: #12131A; border-color: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .dp-trigger:hover { border-color: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .dp.is-open .dp-trigger, html[data-theme="dark"] .dp-trigger:focus-visible { border-color: #e19997; box-shadow: 0 0 0 3px rgba(225, 153, 151, .18); }
html[data-theme="dark"] .dp-trigger > svg { color: #6B7280; }
html[data-theme="dark"] .dp.is-open .dp-trigger > svg { color: #e19997; }
html[data-theme="dark"] .dp-trigger.is-empty .dp-value { color: #6B7280; }
html[data-theme="dark"] .dp-panel { background: #17181F; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 20px 48px -14px rgba(0, 0, 0, .72); }
html[data-theme="dark"] .dp-nav { color: #9CA3AF; }
html[data-theme="dark"] .dp-nav:hover { background: #1A1B22; color: #e19997; }
html[data-theme="dark"] .dp-title { color: #F8FAFC; }
html[data-theme="dark"] .dp-title:hover { background: #1A1B22; }
html[data-theme="dark"] .dp-title-static:hover { background: transparent; }
html[data-theme="dark"] .dp-title-y { color: #6B7280; }
html[data-theme="dark"] .dp-week > span { color: #6B7280; }
html[data-theme="dark"] .dp-day { color: #CBD2DC; }
html[data-theme="dark"] .dp-day:hover:not(:disabled):not(.is-selected) { background: #1A1B22; color: #f0c9c6; }
html[data-theme="dark"] .dp-day.dp-out { color: #3f4048; }
html[data-theme="dark"] .dp-day:disabled { color: #34353c; }
html[data-theme="dark"] .dp-day.is-today:not(.is-selected) { color: #e19997; box-shadow: inset 0 0 0 1.5px rgba(225, 153, 151, .5); }
html[data-theme="dark"] .dp-day.is-selected { background: #b9120d; color: #fff; box-shadow: 0 4px 12px -3px rgba(185, 18, 13, .7); }
html[data-theme="dark"] .dp-foot { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .dp-link { color: #9CA3AF; }
html[data-theme="dark"] .dp-link:hover { color: #e19997; background: #1A1B22; }
html[data-theme="dark"] .dp-link-strong { color: #e19997; }
html[data-theme="dark"] .dp-month { color: #CBD2DC; }
html[data-theme="dark"] .dp-month:hover:not(.is-selected) { background: #1A1B22; color: #f0c9c6; }
html[data-theme="dark"] .dp-month.is-view:not(.is-selected) { box-shadow: inset 0 0 0 1.5px rgba(225, 153, 151, .45); color: #e19997; }
html[data-theme="dark"] .dp-month.is-selected { background: #b9120d; color: #fff; }