/* =========================================================================
   SECOM · Design System
   Sistema de Gestão Orçamentária e Financeira — Secretaria de Comunicação do Governo
   do Estado de São Paulo.

   Paleta e tipografia derivadas do Manual de Identidade Visual SP.GOV.BR
   (Secretaria de Gestão e Governo Digital) e da arte oficial do Brasão do
   Estado de São Paulo. Não copia a marca SP.GOV.BR - usa o Brasão oficial
   como identidade e a mesma paleta cromática do Governo do Estado.
   ========================================================================= */

@font-face {
  font-family: 'Rawline';
  src: url("../fonts/rawline-400.95759d6259ec.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rawline';
  src: url("../fonts/rawline-600.a5e49cd7c7b3.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rawline';
  src: url("../fonts/rawline-700.5e2e4c2ca8f9.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rawline';
  src: url("../fonts/rawline-900.28fd6c428d45.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter-variable.260c81a4759b.woff2") format('woff2-variations'), url("../fonts/inter-variable.260c81a4759b.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Paleta institucional (Manual SP.GOV.BR, p.6) ---- */
  --sp-vermelho: #FF161F;
  --sp-vermelho-escuro: #C21119;
  --sp-preto: #000000;
  --sp-branco: #FFFFFF;
  --sp-cinza-escuro: #808080;
  --sp-cinza-claro: #BFBFBF;
  --sp-amarelo: #FBB900;
  --sp-azul: #034EA2;
  --sp-verde: #0B9247;

  /* ---- Acento do produto (deriva do vermelho institucional) ---- */
  --acento: var(--sp-vermelho);
  --acento-hover: #E01019;
  --acento-active: var(--sp-vermelho-escuro);
  --acento-fraco: #FFECED;
  --anel-foco: 0 0 0 3px rgba(255, 22, 31, 0.25);

  /* ---- Semânticas (derivadas da paleta, não são cores novas) ---- */
  --cor-sucesso: var(--sp-verde);
  --cor-sucesso-fundo: #E7F6ED;
  --cor-sucesso-texto: #076536;
  --cor-erro: var(--sp-vermelho-escuro);
  --cor-erro-fundo: #FDECEC;
  --cor-erro-fundo-hover: #FBD9DA;
  --cor-erro-texto: #971018;
  --cor-aviso: var(--sp-amarelo);
  --cor-aviso-fundo: #FFF6DF;
  --cor-aviso-texto: #7A5B00;
  --cor-info: var(--sp-azul);
  --cor-info-fundo: #E8F0FA;
  --cor-info-texto: #023970;

  /* Cores dos selos/marcadores de status (.selo-*, .badge-apta/-inapta/-em-analise)
     - texto único escuro sobre fundo pastel mais saturado (pixel-sampled do
     Oracle Cloud Console, print em Desktop\claude), separado dos tokens
     --cor-*-fundo acima (que continuam mais claros e servem alertas/linhas
     de tabela/blocos de conteúdo - não são a mesma coisa que um marcador). */
  --selo-texto: #161513;
  --selo-fundo-sucesso: #D0E9B9;
  --selo-fundo-aviso: #F9DDBC;
  --selo-fundo-erro: #F3C6BC;
  --selo-fundo-info: #C7DCF0;
  /* Só do estágio "Contratado - sem reserva" (Previsão de Desembolso) -
     puxado mais pro vermelho que o --selo-fundo-erro normal, pra não se
     confundir com o laranja de "Licitação - sem reserva" ao lado. Token
     separado de propósito - --selo-fundo-erro é usado por todo selo de
     erro do sistema (Devolvida, SLA Excedido etc.), que não deve mudar. */
  --selo-fundo-contratado: #F2A99D;
  --selo-fundo-aditamento: #E6CBE8;

  /* ---- Neutros de interface (escala funcional p/ texto/fundo/borda) ---- */
  --n-0: #FFFFFF;
  --n-50: #F7F7F8;
  --n-100: #EEEEF0;
  --n-200: #E1E2E5;
  --n-300: #CBCCD1;
  --n-400: #A6A8B0;
  --n-500: #7D8089;
  --n-600: #5B5E68;
  --n-700: #40424B;
  --n-800: #292A31;
  --n-900: #17181C;

  /* ---- Superfícies e texto (papéis semânticos) ---- */
  --fundo-pagina: #F7F8FA;
  --fundo-superficie: #FFFFFF;
  --fundo-superficie-realcada: var(--n-100);
  --fundo-secundario: var(--fundo-superficie-realcada);
  --sidebar-bg: #FBFBFC;
  --hover: var(--n-200);
  --texto-primario: #161513;
  --texto-secundario: #44484D;
  --texto-terciario: #6B6F75;
  --texto-sobre-acento: #FFFFFF;
  --borda: #D9DDE3;
  --borda-forte: var(--n-300);

  /* ---- Tipografia ---- */
  --fonte-base: 'Inter', 'Segoe UI', -apple-system, system-ui, sans-serif;
  --texto-xs: 0.6875rem;   /* 11px */
  --texto-sm: 0.75rem;     /* 12px */
  --texto-base: 0.8125rem; /* 13px */
  --texto-md: 0.875rem;    /* 14px */
  --texto-lg: 1rem;        /* 16px */
  --texto-xl: 1.25rem;     /* 20px */
  --texto-2xl: 1.625rem;   /* 26px */
  --lh-compacta: 1.25;
  --lh-normal: 1.45;

  /* ---- Espaçamento (escala 4px, compacta) ---- */
  --esp-1: 4px;
  --esp-2: 6px;
  --esp-3: 8px;
  --esp-4: 12px;
  --esp-5: 16px;
  --esp-6: 20px;
  --esp-8: 28px;
  --esp-10: 36px;

  /* ---- Raios ---- */
  --raio-sm: 4px;
  --raio-md: 6px;
  --raio-lg: 8px;
  --raio-full: 999px;

  /* ---- Sombras ---- */
  --sombra-sm: 0 1px 2px rgba(23, 24, 28, 0.06), 0 1px 1px rgba(23, 24, 28, 0.04);
  --sombra-md: 0 4px 10px rgba(23, 24, 28, 0.08), 0 1px 3px rgba(23, 24, 28, 0.06);
  --sombra-lg: 0 12px 32px rgba(23, 24, 28, 0.14), 0 2px 6px rgba(23, 24, 28, 0.08);

  /* ---- Densidade de controles (compacta, tipo planilha) ---- */
  --altura-controle: 30px;
  --altura-controle-sm: 25px;
  --altura-controle-lg: 36px;
  --sidebar-largura: 232px;

  /* ---- Transições ---- */
  --dur-rapida: 120ms;
  --dur-base: 180ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
}

[data-tema="escuro"] {
  /* Recalibrado (pedido do usuário: "descanso pra vista", inspirado no tema
     escuro do Outlook) - tons de fundo bem próximos entre si (sem "degrau"
     forte entre página/cartão/cabeçalho), texto nunca branco puro, bordas
     quase imperceptíveis. Cinzas neutros-quentes (leve viés castanho, não
     azulado), mesma família tonal do Outlook. */
  --fundo-pagina: #211F1E;
  --fundo-superficie: #282625;
  --fundo-superficie-realcada: #2F2D2B;
  --sidebar-bg: #211F1E;
  --texto-primario: #E4E2E0;
  --texto-secundario: #B0AEAC;
  --texto-terciario: #8A8886;
  --borda: #3B3937;
  --borda-forte: #474542;
  /* Fundo do item selecionado/ativo - antes um vinho saturado (#3A1417),
     agora só um degrau de neutro, quase sem matiz - o destaque vem da
     borda (--acento) e do texto, não do preenchimento inteiro. */
  --acento-fraco: #332A2A;

  /* Cores institucionais em versão desaturada só pro tema escuro - usadas
     em botões/links/gráficos/KPIs (dashboard-charts.js lê --acento/--cor-*
     direto do CSS e redesenha sozinho ao trocar de tema, sem precisar
     tocar em nenhum gráfico individualmente). A versão saturada
     (--sp-vermelho, --sp-verde etc.) continua intacta - é a paleta
     institucional "crua", usada como estava no tema claro. */
  --acento: #C4454A;
  --acento-hover: #D15055;
  --acento-active: #A83A3E;
  --cor-sucesso: #5C9271;
  --cor-erro: #A65458;
  --cor-aviso: #B5943F;
  --cor-info: #4A7CA8;

  /* Fundos pastel claros (alertas, cartões de fluxo do Orçamentário, selos,
     células/legenda da Previsão de Desembolso) ganham versão escura -
     mesma família de tom de --cor-sucesso etc. acima, só mais escura e
     dessaturada pra servir de FUNDO em vez de borda/ícone; o texto que
     entra em cima (--cor-*-texto/--selo-texto) inverte pra claro. Sem isso,
     esses blocos continuavam pastel-claros mesmo com o resto da tela
     escuro - "ilhas claras" e, no caso da barra de estágios, texto escuro
     sobre fundo que não escurecia junto (quase ilegível). */
  --cor-sucesso-fundo: #26332B;
  --cor-sucesso-texto: #8FBFA0;
  --cor-erro-fundo: #3D2320;
  --cor-erro-fundo-hover: #47292A;
  --cor-erro-texto: #D4989A;
  --cor-aviso-fundo: #332D22;
  --cor-aviso-texto: #D4B876;
  --cor-info-fundo: #242C33;
  --cor-info-texto: #8FB2D0;

  /* Um selo precisa "saltar aos olhos" pra ser lido rápido numa coluna de
     Status/SLA - a 1ª versão (muito próxima do fundo da página) foi longe
     demais na suavização e ficou difícil de bater o olho e achar a cor.
     Subiu o tom (mais claro/saturado que o resto da paleta escura, que
     continua discreta de propósito) sem voltar ao pastel claro original. */
  --selo-texto: #F2F1EF;
  --selo-fundo-sucesso: #3E5747;
  --selo-fundo-aviso: #5C4B2C;
  --selo-fundo-erro: #63393C;
  --selo-fundo-info: #33495C;
  /* Mesma lógica do ajuste no tema claro - token próprio, não compartilhado
     com --selo-fundo-erro (Devolvida, SLA Excedido etc.). */
  --selo-fundo-contratado: #63393C;
  --selo-fundo-aditamento: #4A3B52;
}

/* ============================= Reset ================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--texto-md);
  line-height: var(--lh-normal);
  color: var(--texto-primario);
  background: var(--fundo-pagina);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--esp-1); font-weight: 700; line-height: var(--lh-compacta); color: var(--texto-primario); }
h1 { font-size: var(--texto-xl); }
h2 { font-size: var(--texto-lg); }
h3 { font-size: var(--texto-md); font-weight: 600; }
h4 { font-size: var(--texto-base); font-weight: 600; }
p { margin: 0 0 var(--esp-2); color: var(--texto-secundario); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--texto-sm); color: var(--texto-terciario); }
hr { border: none; border-top: 1px solid var(--borda); margin: var(--esp-4) 0; }
:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-sm); }

/* ============================= Layout ================================= */
.container { max-width: 1480px; margin: 0 auto; padding: 0 var(--esp-5); }
.grid { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pilha { display: flex; flex-direction: column; gap: var(--esp-2); }
/* Faz os cartões de uma pilha dividirem igualmente a altura do irmão de grid
   ao lado (ex.: SLA ao lado do gráfico de tendência) em vez de sobrar espaço
   vazio abaixo do último - o conteúdo de cada cartão fica centralizado
   verticalmente no espaço extra, sem esticar nada. */
.pilha-preencher > .cartao { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.linha { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.espaco-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }

/* ---- Cabeçalho de página (título + ações) ---- */
.pagina-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.pagina-cabecalho h1 { margin-bottom: 2px; }
.pagina-cabecalho .acoes { display: flex; gap: var(--esp-2); flex: 0 0 auto; }

/* ---- Barra de ações: busca + filtros + ação primária numa linha ---- */
.barra-acoes {
  display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
  padding: var(--esp-3); margin-bottom: var(--esp-3);
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
}
.barra-acoes .busca { flex: 1 1 220px; min-width: 160px; }
.barra-acoes .entrada, .barra-acoes select.entrada { height: var(--altura-controle-sm); font-size: var(--texto-sm); width: auto; }
.barra-acoes .separador-v { width: 1px; align-self: stretch; background: var(--borda); margin: 0 2px; }
.barra-acoes .espacador { flex: 1; }

/* ============================= Botões ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  height: var(--altura-controle); padding: 0 var(--esp-4);
  font-family: var(--fonte-base); font-size: var(--texto-base); font-weight: 600;
  border-radius: var(--raio-md); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-sm { height: var(--altura-controle-sm); padding: 0 var(--esp-3); font-size: var(--texto-sm); }
.btn-lg { height: var(--altura-controle-lg); padding: 0 var(--esp-5); font-size: var(--texto-lg); }
.btn-primario { background: var(--acento); color: var(--texto-sobre-acento); }
.btn-primario:hover { background: var(--acento-hover); }
.btn-primario:active { background: var(--acento-active); }
.btn-secundario { background: var(--fundo-superficie-realcada); color: var(--texto-primario); border-color: var(--borda); }
.btn-secundario:hover { background: var(--hover); }
.btn-contorno { background: transparent; color: var(--texto-primario); border-color: var(--borda-forte); }
.btn-contorno:hover { background: var(--fundo-superficie-realcada); }
.btn-fantasma { background: transparent; color: var(--texto-secundario); }
.btn-fantasma:hover { background: var(--fundo-superficie-realcada); color: var(--texto-primario); }
/* Mesmo estilo "fantasma" (sem preenchimento), mas com destaque de cor - usado
   em ações que desfazem algo (ex.: Limpar filtros), para chamar mais atenção
   sem parecer um botão destrutivo cheio como .btn-perigo. */
.btn-fantasma-perigo { background: transparent; color: var(--cor-erro); font-weight: 700; }
.btn-fantasma-perigo:hover { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.btn-perigo { background: var(--cor-erro); color: #fff; }
.btn-perigo:hover { background: #7f0d13; }
.btn-icone { width: var(--altura-controle); padding: 0; flex: 0 0 auto; }

/* ============================= Campos ================================= */
.campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.campo label { font-size: var(--texto-sm); font-weight: 600; color: var(--texto-secundario); }
.campo .dica { font-size: var(--texto-xs); color: var(--texto-terciario); }
.campo .erro-texto { font-size: var(--texto-xs); color: var(--cor-erro); }

.entrada, select.entrada, textarea.entrada {
  height: var(--altura-controle); width: 100%;
  padding: 0 var(--esp-3);
  font-family: var(--fonte-base); font-size: var(--texto-base); color: var(--texto-primario);
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-md);
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
textarea.entrada { height: auto; min-height: 80px; padding: var(--esp-2) var(--esp-3); resize: vertical; }
.entrada::placeholder { color: var(--texto-terciario); }
.entrada:hover { border-color: var(--borda-forte); }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: var(--anel-foco); }
.entrada.campo-erro { border-color: var(--cor-erro); }
.entrada:disabled { background: var(--fundo-superficie-realcada); color: var(--texto-terciario); cursor: not-allowed; }

select.entrada {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B5E68' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--esp-3) center; padding-right: var(--esp-8);
}
/* ---- Lista suspensa de seleção múltipla (checkboxes num painel flutuante) ---- */
.dropdown-multi { position: relative; }
.dropdown-multi-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  cursor: pointer; text-align: left; color: var(--texto-primario);
}
.dropdown-multi-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-multi-toggle svg { flex: 0 0 auto; margin-left: var(--esp-2); color: var(--texto-terciario); transition: transform var(--dur-rapida) var(--curva); }
.dropdown-multi.aberto .dropdown-multi-toggle svg { transform: rotate(180deg); }
.dropdown-multi.aberto .dropdown-multi-toggle { border-color: var(--acento); box-shadow: var(--anel-foco); }
.dropdown-multi-painel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-md);
  box-shadow: var(--sombra-md); padding: var(--esp-2); max-height: 220px; overflow-y: auto;
}
.dropdown-multi.aberto .dropdown-multi-painel { display: block; }
.dropdown-multi-opcao { padding: 4px 6px; border-radius: var(--raio-sm); }
.dropdown-multi-opcao:hover { background: var(--fundo-superficie-realcada); }
.dropdown-multi-opcao label { display: flex; align-items: center; gap: 6px; font-size: var(--texto-sm); font-weight: 400; cursor: pointer; margin: 0; }
.dropdown-multi-opcao input[type="checkbox"] { accent-color: var(--acento); margin: 0; flex: 0 0 auto; }

/* Fallback p/ formulários Django renderizados com {{ form.as_p }} (sem classes manuais) */
main form p { display: flex; flex-direction: column; gap: var(--esp-1); margin: 0 0 var(--esp-3); max-width: 480px; }
main form p label { font-size: var(--texto-sm); font-weight: 600; color: var(--texto-secundario); }
main form input[type="text"], main form input[type="email"], main form input[type="password"],
main form input[type="date"], main form input[type="datetime-local"], main form input[type="number"],
main form input[type="search"], main form input[type="tel"], main form input[type="url"],
main form select, main form textarea {
  height: var(--altura-controle); width: 100%; padding: 0 var(--esp-3);
  font-family: var(--fonte-base); font-size: var(--texto-base); color: var(--texto-primario);
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-md);
  transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
}
main form textarea { height: auto; min-height: 70px; padding: var(--esp-2) var(--esp-3); resize: vertical; }
input[type="file"].entrada, main form input[type="file"] {
  height: auto; padding: var(--esp-2) var(--esp-3);
  font-family: var(--fonte-base); font-size: var(--texto-base);
  background: var(--fundo-superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio-md);
}
input[type="file"]::file-selector-button {
  height: var(--altura-controle-sm); margin-right: var(--esp-3); padding: 0 var(--esp-3);
  font-family: var(--fonte-base); font-size: var(--texto-sm); font-weight: 600;
  background: var(--fundo-superficie-realcada); color: var(--texto-primario); border: 1px solid var(--borda); border-radius: var(--raio-md); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--hover); }
main form input:focus, main form select:focus, main form textarea:focus { outline: none; border-color: var(--acento); box-shadow: var(--anel-foco); }
main form ul.errorlist { list-style: none; margin: 2px 0 0; padding: 0; color: var(--cor-erro); font-size: var(--texto-xs); }

.grupo-entrada { display: flex; align-items: stretch; }
.grupo-entrada .entrada { border-radius: 0; }
.grupo-entrada .entrada:first-child { border-top-left-radius: var(--raio-md); border-bottom-left-radius: var(--raio-md); }
.grupo-entrada .entrada:last-child { border-top-right-radius: var(--raio-md); border-bottom-right-radius: var(--raio-md); }
.grupo-entrada .btn { border-radius: 0; border-top-right-radius: var(--raio-md); border-bottom-right-radius: var(--raio-md); border-left: none; }

.busca { position: relative; }
.busca .entrada { padding-left: var(--esp-8); }
.busca svg { position: absolute; left: var(--esp-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--texto-terciario); }

/* checkbox / radio */
.opcao { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-base); color: var(--texto-primario); cursor: pointer; user-select: none; }
.opcao input[type="checkbox"], .opcao input[type="radio"] {
  appearance: none; width: 18px; height: 18px; flex: 0 0 auto;
  border: 1.5px solid var(--borda-forte); background: var(--fundo-superficie);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva);
}
.opcao input[type="checkbox"] { border-radius: 5px; }
.opcao input[type="radio"] { border-radius: 50%; }
.opcao input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--dur-rapida) var(--curva);
  box-shadow: inset 1em 1em var(--texto-sobre-acento);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.opcao input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform var(--dur-rapida) var(--curva); box-shadow: inset 1em 1em var(--texto-sobre-acento); }
.opcao input:checked { background: var(--acento); border-color: var(--acento); }
.opcao input:checked::before { transform: scale(1); }
.opcao input:focus-visible { box-shadow: var(--anel-foco); }

/* toggle / switch */
.alternador { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.alternador input { opacity: 0; width: 0; height: 0; }
.alternador .trilho { position: absolute; inset: 0; background: var(--borda-forte); border-radius: var(--raio-full); cursor: pointer; transition: background var(--dur-base) var(--curva); }
.alternador .trilho::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--dur-base) var(--curva); box-shadow: var(--sombra-sm); }
.alternador input:checked + .trilho { background: var(--acento); }
.alternador input:checked + .trilho::before { transform: translateX(16px); }

/* ============================= Cards =================================== */
.cartao {
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: var(--esp-3) var(--esp-4); box-shadow: var(--sombra-sm);
}
.cartao-filtros { background: var(--fundo-superficie-realcada); }
/* Dá destaque a um cartão (ex.: indicadores + situação operacional de uma
   tela de consulta) sem gritar - só a borda na cor de acento no tema claro
   (o fundo rosado do --acento-fraco claro, pensado só pra hover sutil de
   linha de tabela, ficava forte demais preenchendo um cartão inteiro); no
   escuro mantém também o leve tom de fundo, que já foi aprovado. */
.cartao-destaque { border-color: var(--acento); }
[data-tema="escuro"] .cartao-destaque { background: var(--acento-fraco); }
.cartao-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  padding-bottom: var(--esp-2); margin-bottom: var(--esp-3); border-bottom: 1px solid var(--borda);
}
.cartao-titulo { font-size: var(--texto-md); font-weight: 700; margin: 0; }

/* ==================== Rosca de Grupos (Painel Executivo) ==================
   Cartão único: rosca (Chart.js, com texto HTML no centro) + lista clicável
   de Grupos + chip do destaque ativo. Comportamento em dashboard-charts.js
   (plugin secomFiltroCruzado). */
.rosca-corpo {
  display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: var(--esp-8);
  align-items: center; padding: var(--esp-2) var(--esp-4) var(--esp-4);
}
.rosca-donut { position: relative; width: 350px; max-width: 100%; }
.rosca-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; pointer-events: none; padding: 0 96px;
}
.rosca-centro-r { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-terciario); font-weight: 600; }
.rosca-centro-n { font-size: var(--texto-sm); font-weight: 600; line-height: 1.25; margin-top: 2px; }
.rosca-centro-v { font-size: var(--texto-xl); font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.rosca-centro-s { font-size: var(--texto-xs); color: var(--texto-terciario); line-height: 1.3; }
.rosca-lista { display: flex; flex-direction: column; gap: var(--esp-4); }
.rosca-grupo {
  border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--esp-4) var(--esp-5);
  cursor: pointer; transition: background var(--dur-base), border-color var(--dur-base), opacity var(--dur-base);
}
.rosca-grupo:hover, .rosca-grupo:focus-visible { background: var(--fundo-superficie-realcada); outline: none; }
.rosca-grupo.selecionado { background: var(--fundo-superficie-realcada); border-color: var(--borda-forte); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.rosca-grupo.apagado { opacity: .5; }
.rosca-grupo-nome { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.rosca-grupo-nome strong { font-size: var(--texto-md); }
.rosca-grupo-nome span { font-size: var(--texto-sm); }
.rosca-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.rosca-grupo-valor { font-size: var(--texto-lg); white-space: nowrap; }
.rosca-barra { height: 6px; border-radius: 3px; background: var(--fundo-superficie-realcada); margin: 9px 0 6px; overflow: hidden; }
.rosca-grupo.selecionado .rosca-barra { background: var(--borda); }
.rosca-barra i { display: block; height: 100%; border-radius: 3px; }
.rosca-maiores { display: none; margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px dashed var(--borda-forte); font-size: var(--texto-sm); }
.rosca-grupo.selecionado .rosca-maiores { display: block; }
.rosca-maiores-titulo { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-terciario); font-weight: 600; margin-bottom: var(--esp-1); }
.rosca-maiores .espaco-entre { padding: 2px 0; }
.rosca-chip {
  display: inline-flex; align-items: center; gap: var(--esp-3); padding: 3px 5px 3px 10px; border-radius: var(--raio-full);
  background: var(--fundo-superficie-realcada); border: 1px solid var(--borda); font-size: var(--texto-sm);
  color: var(--texto-secundario); white-space: nowrap;
}
.rosca-chip[hidden] { display: none; }
.rosca-chip b { color: var(--texto-primario); }
.rosca-chip button {
  border: 0; background: var(--borda); color: var(--texto-secundario); width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.rosca-chip button:hover { background: var(--borda-forte); }
.rosca-rodape { border-top: 1px solid var(--borda); padding: var(--esp-3) var(--esp-4) var(--esp-1); font-size: var(--texto-sm); color: var(--texto-terciario); }
/* Abaixo de ~1180px de tela a coluna da lista (tela menos a sidebar de 232px
   menos a rosca de 350px) fica estreita demais pro nome + valor do Grupo
   numa linha só - empilha (rosca em cima, lista embaixo). */
@media (max-width: 1180px) {
  .rosca-corpo { grid-template-columns: 1fr; justify-items: center; }
  .rosca-lista { width: 100%; }
}

/* Agrupa um bloco inteiro de uma tela (ex.: Orçamentário/Financeiro/
   Prestação de Contas do Painel Executivo) num fundo levemente destacado -
   separação visual entre blocos sem empilhar borda dupla nos cartões/
   gráficos internos, que continuam com o `.cartao` branco de sempre por
   cima desse fundo. */
.secao-executiva {
  background: var(--fundo-superficie-realcada); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: var(--esp-4); margin-bottom: var(--esp-5);
}
.secao-executiva-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}
.secao-executiva-titulo { font-size: var(--texto-lg); font-weight: 700; margin: 0; }

/* Densidade padrão de todo cartão de KPI do sistema - referência é o
   Controle de Notas Fiscais (compacto, mais linhas visíveis sem rolagem);
   os demais módulos (Planos Financeiros, Dashboard, Relatórios) herdam
   daqui em vez de reimplementar a compactação por página. */
.kpi { background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 6px var(--esp-2); }
.kpi .rotulo { font-size: var(--texto-xs); color: var(--texto-secundario); font-weight: 600; display: flex; align-items: center; gap: var(--esp-1); }
.kpi .valor { font-size: 1.05rem; font-weight: 700; line-height: 1.1; margin-top: 1px; font-variant-numeric: tabular-nums; }
.kpi .variacao { font-size: var(--texto-xs); font-weight: 600; margin-top: var(--esp-1); display: inline-flex; align-items: center; gap: 2px; }
.kpi .variacao.positiva { color: var(--cor-sucesso-texto); }
.kpi .variacao.negativa { color: var(--cor-erro-texto); }
.kpi .variacao.neutra { color: var(--texto-terciario); }
.kpi-sucesso { border-left: 3px solid var(--cor-sucesso); }
.kpi-aviso { border-left: 3px solid var(--cor-aviso); }
.kpi-erro { border-left: 3px solid var(--cor-erro); }

/* Valor monetário negativo em tabela de indicador (ex.: Detalhamento
   Orçamentário) - sempre sinal de lançamento faltando, nunca situação
   financeira válida (ver core_extras.classe_se_negativo). */
.valor-negativo { color: var(--cor-erro-texto); font-weight: 600; }
.kpi-info { border-left: 3px solid var(--cor-info); }

/* Fluxo Orçamentário - narra a execução do exercício como uma sequência
   (ponto de partida -> ajustes -> saldo atual -> compromissos -> saldo
   disponível) em vez de uma grade plana de indicadores soltos - os "marcos"
   (início/saldo atual/saldo final) se destacam um pouco dos detalhes de
   apoio (ajustes, compromissos), mas na mesma densidade/tipografia do
   componente `.kpi` já padronizado no resto do sistema (nunca maior) -
   nunca "vazando" texto: sem nowrap, caixa sempre pode encolher (min-width:
   0) e o valor quebra linha normalmente se precisar. */
.fluxo-orcamentario {
  display: flex; align-items: stretch; gap: var(--esp-2);
  margin-bottom: var(--esp-4); overflow-x: auto; padding-bottom: 2px;
}
.fluxo-marco, .fluxo-detalhe {
  background: var(--fundo-superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-md); padding: 8px var(--esp-3);
  display: flex; flex-direction: column; justify-content: center;
  flex: 1 1 0; min-width: 0; width: 128px;
}
.fluxo-marco { text-align: center; }
.fluxo-marco-rotulo, .fluxo-detalhe-titulo {
  font-size: var(--texto-xs); color: var(--texto-secundario); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.fluxo-marco-rotulo { margin-bottom: 2px; }
.fluxo-marco-valor {
  font-size: 1.05rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--texto-primario);
  overflow-wrap: break-word;
}
.fluxo-marco-partida { border-left: 3px solid var(--texto-terciario); }
/* --acento é vermelho institucional (ver paleta) - "Saldo Atual Total" é um
   valor positivo/neutro (nunca um alerta), por isso usa --cor-info (azul)
   em vez de --acento, evitando a leitura errada de "problema". */
.fluxo-marco-atual { border-left: 3px solid var(--cor-info); background: var(--cor-info-fundo); }
.fluxo-marco-atual .fluxo-marco-valor { color: var(--cor-info-texto); }
.fluxo-marco-final { border-left: 3px solid var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.fluxo-marco-final .fluxo-marco-valor { color: var(--cor-sucesso-texto); }
.fluxo-marco-negativo { border-left: 3px solid var(--cor-erro); background: var(--cor-erro-fundo); }
.fluxo-marco-negativo .fluxo-marco-valor { color: var(--cor-erro-texto); }
.fluxo-detalhe-titulo { display: block; margin-bottom: 2px; }
/* Cada linha de apoio dos cards do fluxo (Ajustes do Exercício,
   Compromissos, detalhamento por Classe do Saldo UGO/UGE) - nome e valor
   numa linha só (nunca empilhado), separados por ":" (nunca "-", que pode
   ser lido como sinal de negativo já que o valor também pode ser
   negativo), com peso visual discreto (fonte menor, sem negrito) pra não
   competir com o marco principal do card. */
.fluxo-linha-classe {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 0.65rem; color: var(--texto-terciario); font-weight: 400;
  padding: 2px 0; border-top: 1px solid var(--borda);
}
.fluxo-linha-classe:first-of-type { border-top: none; padding-top: 0; }
.fluxo-linha-classe-valor {
  font-weight: 500; color: var(--texto-secundario); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.fluxo-linha-classe-nome { overflow-wrap: break-word; }
.fluxo-seta {
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-terciario); font-size: 1rem; flex: 0 0 auto; padding: 0 1px;
}
@media (max-width: 960px) {
  .fluxo-orcamentario { flex-direction: column; }
  .fluxo-marco, .fluxo-detalhe { width: auto; }
  .fluxo-seta { transform: rotate(90deg); padding: 2px 0; }
}

/* ============================= Badges ================================== */
.selo {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--esp-2);
  font-size: var(--texto-xs); font-weight: 400; border-radius: var(--raio-full); line-height: 1;
  white-space: nowrap;
}
.selo-neutro { background: var(--fundo-secundario); color: var(--texto-secundario); }
.selo-sucesso { background: var(--selo-fundo-sucesso); color: var(--selo-texto); }
.selo-erro { background: var(--selo-fundo-erro); color: var(--selo-texto); }
.selo-aviso { background: var(--selo-fundo-aviso); color: var(--selo-texto); }
.selo-info { background: var(--selo-fundo-info); color: var(--selo-texto); }
.selo-ponto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Previsão de Desembolso (orcamento) - células de mês coloridas por
   estágio da Necessidade (Empenhado/Reservado/Contratado-Aditamento-
   Licitação sem recurso) - mesma paleta pastel dos selos, aplicada como
   fundo da célula em vez de um chip, já que aqui a cor identifica a célula
   inteira numa grade densa (12 meses x N linhas), não um rótulo isolado. */
.estagio-empenhado { background: var(--selo-fundo-sucesso); color: var(--selo-texto); }
.estagio-reservado { background: var(--selo-fundo-info); color: var(--selo-texto); }
.estagio-contratado { background: var(--selo-fundo-contratado); color: var(--selo-texto); }
.estagio-aditamento { background: var(--selo-fundo-aditamento); color: var(--selo-texto); }
.estagio-licitacao { background: var(--selo-fundo-aviso); color: var(--selo-texto); }

/* Barra de estágios da Previsão de Desembolso (templates/orcamento/
   previsao.html) - segmentos de largura IGUAL (decisão do usuário: a
   versão proporcional ao valor amontoava tudo no fim por causa do
   Empenhado/Licitação dominarem a soma) - mesmo assim mantém quebra de
   linha no rótulo em vez de vazar/cortar o texto. */
.barra-estagios { display: flex; align-items: stretch; border-radius: var(--raio-md); overflow: hidden; margin-bottom: var(--esp-2); gap: 2px; }
.barra-estagios-segmento {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  flex: 1 1 0; padding: var(--esp-2) var(--esp-1); text-align: center; min-width: 0;
  white-space: normal; overflow-wrap: break-word; font-size: var(--texto-xs); line-height: 1.25;
  text-decoration: none; color: inherit; cursor: pointer; transition: opacity var(--dur-rapida) var(--curva);
}
.barra-estagios-segmento:hover { opacity: 0.8; text-decoration: none; color: inherit; }
.barra-estagios-rotulo { font-weight: 600; }
.barra-estagios-valor { font-variant-numeric: tabular-nums; }

/* ---- Barra de composição (proporção + legenda) - alternativa a um gráfico
   de barras tradicional para mostrar a distribuição de uma contagem em
   poucas categorias sem gastar altura de tela: uma única faixa fina
   segmentada por proporção, com uma legenda compacta abaixo trazendo a
   quantidade e o percentual exatos de cada categoria. ---- */
.barra-composicao { display: flex; height: 10px; border-radius: var(--raio-full); overflow: hidden; background: var(--fundo-superficie-realcada); }
.barra-composicao .seg { height: 100%; display: block; min-width: 0; transition: opacity var(--dur-rapida) var(--curva); }
.barra-composicao a.seg:hover { opacity: 0.8; }
/* Tons intermediários, próprios desta barra - nem a cor semântica cheia
   (--cor-sucesso etc., gritante preenchendo um segmento inteiro) nem a
   variante de texto (--cor-sucesso-texto etc., ficava apagada demais aqui).
   Mesma família de cada matiz, num meio-termo deliberado. */
.seg-sucesso { background: #1B8A4A; }
.seg-erro { background: #BC3030; }
.seg-aviso { background: #C08A00; }
.seg-info { background: #1B5FA0; }
.seg-neutro { background: var(--texto-terciario); }
/* No tema escuro, --cor-* já É o meio-termo desaturado (ver
   [data-tema="escuro"] acima) - reaproveita direto, sem precisar de uma
   3ª escala de tom só pra esta barra. */
[data-tema="escuro"] .seg-sucesso { background: var(--cor-sucesso); }
[data-tema="escuro"] .seg-erro { background: var(--cor-erro); }
[data-tema="escuro"] .seg-aviso { background: var(--cor-aviso); }
[data-tema="escuro"] .seg-info { background: var(--cor-info); }

.legenda-composicao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); margin-top: var(--esp-2); }
.legenda-composicao a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--texto-xs); color: var(--texto-secundario); font-weight: 600; text-decoration: none;
}
.legenda-composicao a:hover { color: var(--texto-primario); text-decoration: none; }
.legenda-composicao a.ativa { color: var(--texto-primario); }
.legenda-composicao a.ativa .ponto { outline: 2px solid var(--texto-primario); outline-offset: 1px; }
.legenda-composicao .ponto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.legenda-composicao .numero { font-variant-numeric: tabular-nums; color: var(--texto-primario); }

/* ============================= Alertas ================================== */
.alerta { display: flex; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); border: 1px solid; font-size: var(--texto-base); }
.alerta-titulo { font-weight: 700; margin-bottom: 2px; }
.alerta svg { flex: 0 0 auto; margin-top: 1px; }
.alerta-info { background: var(--cor-info-fundo); border-color: var(--cor-info); color: var(--cor-info-texto); }
.alerta-sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); color: var(--cor-sucesso-texto); }
.alerta-aviso { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso); color: var(--cor-aviso-texto); }
.alerta-erro { background: var(--cor-erro-fundo); border-color: var(--cor-erro); color: var(--cor-erro-texto); }

/* ============================= Toasts =================================== */
/* Chrome sempre escuro, independente do tema da página (mesmo padrão de
   notificação "flutuante" usado por sistemas operacionais - alto contraste
   garantido em cima de qualquer conteúdo). */
.toasts { position: fixed; top: var(--esp-4); right: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); z-index: 900; width: min(360px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: var(--esp-2); background: #1F2937; color: #fff;
  padding: var(--esp-3); border-radius: var(--raio-md); box-shadow: var(--sombra-lg); font-size: var(--texto-base);
  animation: entrar-toast var(--dur-base) var(--curva);
}
.toast-sucesso { background: #14532D; }
.toast-erro { background: #7F1D1D; }
@keyframes entrar-toast { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================= Tabelas =================================== */
/* Densidade única para TODA tabela do sistema (referência: Controle de
   Notas Fiscais) - nada de cada tela reimplementar o próprio tamanho de
   fonte; quem precisar de algo a mais (largura de coluna, quebra de texto)
   soma por cima disso, nunca redefine o tamanho da fonte. */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: 0; background: var(--fundo-superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-xs); }
table.tabela thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--fundo-superficie-realcada); color: var(--texto-primario);
  font-size: var(--texto-xs); font-weight: 700; text-transform: none; letter-spacing: normal;
  text-align: center; padding: 6px var(--esp-3); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
table.tabela thead th a { color: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
table.tabela thead th a:hover { color: var(--texto-primario); text-decoration: none; }
table.tabela tbody td { padding: 4px var(--esp-3); border-bottom: 1px solid var(--borda); color: var(--texto-primario); vertical-align: middle; line-height: 1.3; text-align: center; }
table.tabela.tabela-compacta tbody td, table.tabela.tabela-compacta thead th { padding-top: 3px; padding-bottom: 3px; }
/* Destaca a linha do mês da Competência sendo lançada, na Situação
   Orçamentária Mensal da tela de lançamento de Demais Contratos
   (pagamentos/lancamento_contrato.html) - atualizado por JS ao trocar o
   campo Competência (Bloco 3), sem recarregar a página. */
table.tabela tr.mes-destacado td { background: var(--acento-fraco); font-weight: 700; }
.barra-progresso { width: 100%; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:nth-child(even) { background: var(--fundo-pagina); }
/* Situação Orçamentária Mensal (pagamentos/lancamento_contrato.html) - um
   mês com mais de 1 Nota Fiscal vira mais de 1 <tr> físico (rowspan nas
   colunas mensais), então o zebrado por nth-child(even) genérico acima
   cortava o grupo do mês ao meio, cada linha com uma cor. Aqui o zebrado é
   por MÊS (classe aplicada a cada linha do grupo, ver o template), não por
   linha física - a regra genérica é desligada só nesta tabela. */
#tabela-situacao-mensal tbody tr:nth-child(even) { background: transparent; }
#tabela-situacao-mensal tbody tr.linha-mes-par { background: var(--fundo-pagina); }
table.tabela tbody tr:hover { background: var(--acento-fraco); }
table.tabela tbody tr.selecionada { background: var(--acento-fraco); }
table.tabela tbody tr.linha-com-erro { background: var(--cor-erro-fundo); }
table.tabela tbody tr.linha-com-erro:hover { background: var(--cor-erro-fundo-hover); }
table.tabela .col-numerica { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tabelas densas com muitas colunas numéricas (ex.: Detalhamento
   Orçamentário) - fonte menor, cabeçalho quebra em 2 linhas se precisar,
   números nunca quebram (evita "R$ 1.234.567,89" partido em 2 linhas). */
table.tabela.tabela-detalhamento { font-size: 10px; }
table.tabela.tabela-detalhamento thead th { white-space: normal; line-height: 1.2; padding: 4px 5px; }
table.tabela.tabela-detalhamento tbody td, table.tabela.tabela-detalhamento tfoot td { padding: 3px 5px; }
/* Congela PTRES/ND (1ª/2ª coluna) ao rolar a tabela na horizontal - tem 17
   colunas, sem isso perde a referência de qual PTRES/ND está vendo depois
   de rolar. thead já é sticky verticalmente (top:0); aqui soma o sticky
   horizontal só nas 2 primeiras colunas do cabeçalho e do corpo (nunca no
   tfoot - "Total" já usa colspan cobrindo as 2, sem necessidade). Cada
   estado de fundo (linha par/hover) precisa ser repetido aqui, senão a
   coluna congelada fica com o fundo padrão por cima da linha colorida. */
table.tabela.tabela-detalhamento thead th:nth-child(1),
table.tabela.tabela-detalhamento tbody td:nth-child(1) { position: sticky; left: 0; min-width: 54px; }
table.tabela.tabela-detalhamento thead th:nth-child(2),
table.tabela.tabela-detalhamento tbody td:nth-child(2) { position: sticky; left: 54px; min-width: 50px; }
table.tabela.tabela-detalhamento thead th:nth-child(1),
table.tabela.tabela-detalhamento thead th:nth-child(2) { z-index: 2; }
table.tabela.tabela-detalhamento tbody td:nth-child(1),
table.tabela.tabela-detalhamento tbody td:nth-child(2) { z-index: 1; background: var(--fundo-superficie); }
table.tabela.tabela-detalhamento tbody tr:nth-child(even) td:nth-child(1),
table.tabela.tabela-detalhamento tbody tr:nth-child(even) td:nth-child(2) { background: var(--fundo-pagina); }
table.tabela.tabela-detalhamento tbody tr:hover td:nth-child(1),
table.tabela.tabela-detalhamento tbody tr:hover td:nth-child(2) { background: var(--acento-fraco); }
/* Cota Financeira: mesma ideia da tabela-detalhamento (fonte menor, padding
   apertado), mas NUNCA quebra linha em lugar nenhum (nem cabeçalho, nem o
   rótulo do Tipo) - pedido explícito do usuário para caber a grade inteira
   (rótulo + 12 meses + total) numa tela só, sem texto partido em 2 linhas. */
table.tabela.tabela-cota { font-size: 9.5px; }
table.tabela.tabela-cota thead th { padding: 3px 4px; white-space: nowrap; }
table.tabela.tabela-cota tbody td, table.tabela.tabela-cota tfoot td { padding: 2px 4px; white-space: nowrap; }
table.tabela.tabela-cota .col-acoes .btn { padding: 1px 5px; }
table.tabela .col-acoes { white-space: nowrap; }
table.tabela .col-acoes .btn { font-size: 9.5px; padding: 2px 6px; height: auto; line-height: 1.15; }
table.tabela .col-texto { text-align: left; white-space: nowrap; }
/* Previsão de Desembolso: fonte um pouco menor que o padrão (mais colunas
   numéricas cabem sem forçar scroll horizontal cedo demais), mas linha MAIS
   alta que o padrão, não menos - pedido explícito do usuário ("achando tudo
   muito apertado"), já que aqui a cor de cada célula é o próprio conteúdo
   visual da tela, não só um número, e precisa de espaço pra ser lida bem. */
table.tabela.tabela-previsao { font-size: 9.5px; }
table.tabela.tabela-previsao thead th { font-size: 9.5px; padding: 6px 8px; white-space: nowrap; }
table.tabela.tabela-previsao tbody td, table.tabela.tabela-previsao tfoot td { padding: 8px 8px; }
table.tabela.tabela-previsao .col-texto { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.tabela .selo { font-size: 9.5px; padding: 2px 6px; height: auto; min-height: 18px; line-height: 1.15; }
table.tabela tbody td > .linha, table.tabela tbody td > .selo { margin-left: auto; margin-right: auto; }
table.tabela tfoot tr.linha-total td { padding: 4px var(--esp-3); font-weight: 700; background: var(--fundo-secundario); border-top: 1px solid var(--borda); text-align: center; }
.link-rolagem { margin-left: 4px; color: var(--texto-terciario); text-decoration: none; font-weight: 700; }
.link-rolagem:hover { color: var(--acento); }

/* ============================= Paginação ================================= */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) 0; flex-wrap: wrap; }
.paginacao .paginas { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.paginacao a, .paginacao span.pagina-atual {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
  border-radius: var(--raio-sm); font-size: var(--texto-sm); font-weight: 600; color: var(--texto-secundario); padding: 0 6px;
}
.paginacao a:hover { background: var(--fundo-superficie-realcada); text-decoration: none; color: var(--texto-primario); }
.paginacao span.pagina-atual { background: var(--acento); color: #fff; }

/* ============================= Breadcrumbs ================================ */
.trilha { display: flex; align-items: center; gap: 6px; font-size: var(--texto-sm); color: var(--texto-terciario); margin-bottom: var(--esp-4); flex-wrap: wrap; }
.trilha a { color: var(--texto-secundario); }
.trilha .separador { color: var(--borda-forte); }
.trilha .atual { color: var(--texto-primario); font-weight: 600; }

/* ============================= Abas (tabs) ================================ */
.abas { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--esp-4); }
.abas a { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-base); font-weight: 600; color: var(--texto-secundario); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--texto-primario); text-decoration: none; }
.abas a.ativa { color: var(--acento); border-bottom-color: var(--acento); }

/* ============================= Filtros ================================ */
.barra-filtros { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; padding: var(--esp-3); background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); }
.barra-filtros .entrada, .barra-filtros select.entrada { height: var(--altura-controle-sm); font-size: var(--texto-sm); width: auto; }

/* ---- Padrão único de filtro em linha (toda tela de consulta) - a linha
   primária (busca + os campos mais usados + Filtrar/Buscar + Filtro ativo)
   fica sempre numa linha só; campos secundários entram num corpo recolhível
   revelado por um botão "Mais filtros" no final da linha - JS genérico
   (base.html, delegação por [data-toggle-filtros]) faz o show/hide, nenhuma
   tela precisa do próprio <script>. */
.filtros-mais-toggle { margin-left: auto; white-space: nowrap; }
.filtros-corpo-extra { margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--borda); }

/* ============================= Modais ================================== */
.modal-fundo { position: fixed; inset: 0; background: rgba(17, 18, 21, 0.5); display: flex; align-items: center; justify-content: center; padding: var(--esp-4); z-index: 950; }
.modal { background: var(--fundo-superficie); border-radius: var(--raio-lg); box-shadow: var(--sombra-lg); width: 100%; max-width: 480px; }
.modal-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: var(--esp-4); border-bottom: 1px solid var(--borda); }
.modal-corpo { padding: var(--esp-4); color: var(--texto-secundario); }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-4); border-top: 1px solid var(--borda); }

/* ============================= Barra superior (topbar) ===================== */
/* Moldura fixa acima da sidebar - carrega o que é transversal a todos os
   módulos (marca/ambiente, busca global, tema, conta) e libera a sidebar
   pra ser só navegação. Sempre escura, independente do tema da página (é a
   "marca" do produto, mesmo tratamento do --sidebar-bg). */
.topbar {
  height: 52px; flex: 0 0 auto;
  background: #3A3632; color: #F5F3F0;
  display: flex; align-items: center; gap: var(--esp-3);
  padding: 0 var(--esp-3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0; z-index: 30;
}
.topbar-btn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--raio-sm); color: rgba(245,243,240,0.68);
  background: transparent; border: none; cursor: pointer;
}
.topbar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar-btn:disabled { cursor: default; opacity: 1; }
.topbar-btn:disabled:hover { background: transparent; color: rgba(245,243,240,0.68); }
.topbar-marca { display: flex; align-items: center; gap: var(--esp-2); flex: 0 0 auto; }
.topbar-marca .chip-brasao { width: 28px; height: 28px; border-radius: var(--raio-sm); background: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.topbar-marca .chip-brasao img { width: 18px; display: block; }
.topbar-marca .nome { font-weight: 600; font-size: var(--texto-base); color: #fff; white-space: nowrap; }
.topbar-busca {
  flex: 1 1 420px; max-width: 560px; display: flex; align-items: center; gap: var(--esp-2);
  height: 34px; padding: 0 var(--esp-3); border-radius: var(--raio-sm);
  background: #171614; border: 1px solid rgba(255,255,255,0.14); cursor: text;
}
.topbar-busca svg { flex: 0 0 auto; color: rgba(245,243,240,0.5); }
.topbar-busca input {
  background: transparent; border: none; outline: none; width: 100%;
  color: #F5F3F0; font-family: var(--fonte-base); font-size: var(--texto-base);
}
.topbar-busca input::placeholder { color: rgba(245,243,240,0.45); }
.topbar-busca input:disabled { cursor: not-allowed; }
.topbar-spacer { flex: 1; }

.topbar-env { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #F5F3F0; padding: 0 6px; cursor: default; white-space: nowrap; }
.topbar-env .chev { color: #B8B2A9; font-size: 11px; }
.topbar-icons { display: flex; align-items: center; gap: 2px; }

.topbar-usuario { position: relative; }
.topbar-usuario > summary { list-style: none; cursor: pointer; }
.topbar-usuario > summary::-webkit-details-marker { display: none; }
.topbar-usuario .avatar {
  width: 30px; height: 30px; border-radius: var(--raio-sm); background: var(--acento); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.topbar-usuario-painel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px;
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-md);
  box-shadow: var(--sombra-md); padding: var(--esp-2);
}
.topbar-usuario-nome { padding: var(--esp-2) var(--esp-2) var(--esp-1); font-size: var(--texto-sm); font-weight: 600; color: var(--texto-primario); white-space: nowrap; }
.topbar-usuario-painel a, .topbar-usuario-painel button {
  display: block; width: 100%; text-align: left; padding: 6px var(--esp-2); border-radius: var(--raio-sm);
  font-size: var(--texto-sm); font-family: inherit; color: var(--texto-secundario); background: none; border: none; cursor: pointer;
}
.topbar-usuario-painel a:hover, .topbar-usuario-painel button:hover { background: var(--fundo-superficie-realcada); color: var(--texto-primario); text-decoration: none; }

/* ============================= App shell / Sidebar ========================= */
.app-shell { display: flex; align-items: stretch; }
.sidebar {
  width: var(--sidebar-largura); flex: 0 0 var(--sidebar-largura);
  background: var(--sidebar-bg); color: var(--texto-primario);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; overflow-x: hidden;
  /* A largura muda quase instantânea (só o necessário pra reservar/liberar o
     espaço empurrado) - o efeito visível de abrir/fechar é o clip-path, que
     revela de cima pra baixo (não um slide horizontal). */
  transition: width 0.06s linear, flex-basis 0.06s linear, clip-path var(--dur-base) var(--curva);
  clip-path: inset(0 0 0% 0);
}
.sidebar.recolhida {
  width: 0; flex: 0 0 0; border-right: none;
  clip-path: inset(0 0 100% 0);
}

.sidebar-nav { flex: 1; padding: var(--esp-2) 6px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--esp-2); padding: 8px var(--esp-2); border-radius: var(--raio-sm);
  font-size: var(--texto-base); font-weight: 600; color: var(--texto-secundario); margin-bottom: 1px; white-space: nowrap; overflow: hidden;
}
.sidebar-nav a:hover { background: var(--fundo-superficie-realcada); color: var(--texto-primario); text-decoration: none; }
.sidebar-nav a.ativa { background: var(--acento-fraco); color: var(--texto-primario); border-left: 3px solid var(--acento); padding-left: calc(var(--esp-2) - 3px); }
.sidebar-nav a svg { flex: 0 0 auto; width: 17px; height: 17px; }

/* Grupo expansível de navegação (accordion) - agrupa as telas do processo
   de Prestação de Contas (Checklist/Atestados/Ofícios). Mesmo <details>
   nativo já usado em .divulgador, só que como item de menu em vez de
   formulário - abre sozinho quando uma tela do grupo está ativa (ver
   atributo `open` condicional em base.html). */
.sidebar-nav details { margin-bottom: 1px; }
.sidebar-nav details > summary {
  display: flex; align-items: center; gap: var(--esp-2); padding: 8px var(--esp-2); border-radius: var(--raio-sm);
  font-size: var(--texto-base); font-weight: 600; color: var(--texto-secundario);
  cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden;
}
.sidebar-nav details > summary::-webkit-details-marker { display: none; }
.sidebar-nav details > summary:hover { background: var(--fundo-superficie-realcada); color: var(--texto-primario); }
.sidebar-nav details > summary .icone { flex: 0 0 auto; width: 17px; height: 17px; }
.sidebar-nav details > summary .seta { margin-left: auto; flex: 0 0 auto; transition: transform var(--dur-rapida) var(--curva); }
.sidebar-nav details[open] > summary .seta { transform: rotate(90deg); }
.sidebar-nav details .subitens a { font-size: var(--texto-sm); padding-left: 27px; }

/* Sub-grupo aninhado (ex.: "Publicidade" dentro de "Prestação de Contas") -
   item, subitem e sub-subitem, todos retráteis (3 níveis de <details>). O
   summary do sub-grupo já herda o estilo de `.sidebar-nav details > summary`
   (seletor por descendência, não por filho direto de `.sidebar-nav`) - só
   precisa do recuo extra para ficar visualmente dentro do grupo pai. */
.sidebar-nav details .subitens details > summary { padding-left: 27px; font-size: var(--texto-sm); }
.sidebar-nav details .subitens details .subitens a { padding-left: 44px; font-size: var(--texto-xs); }
.sidebar-nav details .subitens details .subitens details > summary { padding-left: 44px; font-size: var(--texto-xs); }
.sidebar-nav details .subitens details .subitens details .subitens a { padding-left: 61px; font-size: var(--texto-xs); }

/* Sub-cabeçalho estático dentro de um grupo (ex.: "Publicidade" dentro de
   "Prestação de Contas") - só um rótulo, não é clicável nem colapsável;
   usado quando um grupo tem 1 sub-agrupamento de verdade e mais 1-2 itens
   soltos, evitando <details> aninhado por um ganho de UX marginal. */
.sidebar-nav details .subitens-titulo {
  padding: 6px var(--esp-2) 2px 27px; font-size: var(--texto-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-terciario);
}
.sidebar-nav details .subitens-divisor { height: 1px; margin: var(--esp-2) var(--esp-2); background: var(--borda); }

.tema-toggle .icone-lua { display: none; }
[data-tema="escuro"] .tema-toggle .icone-sol { display: none; }
[data-tema="escuro"] .tema-toggle .icone-lua { display: block; }

.conteudo-principal { flex: 1; min-width: 0; }
.conteudo-principal main { padding: var(--esp-4) var(--esp-5) var(--esp-8); max-width: 1800px; margin: 0 auto; }
/* Sidebar recolhida = usuário pediu explicitamente mais espaço horizontal
   (telas com muitas tabelas de cronograma) - o conteúdo deixa de ter um
   teto e passa a ocupar toda a largura liberada, só limitado pelo padding
   lateral (as tabelas largas já rolam sozinhas via .tabela-wrap). */
.sidebar.recolhida ~ .conteudo-principal main { max-width: none; }

/* ============================= Checklist de documentos ===================== */
.checklist-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.checklist-grade .documento-card { margin-bottom: 0; }

.documento-card { border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-3); background: var(--fundo-superficie); }
.documento-card .cartao-cabecalho { margin-bottom: var(--esp-2); }
/* Cor da borda esquerda reflete o estado de resposta - mesma paleta das
   bandeiras de SLA (notas_fiscais/sla.py::SELO_FAIXA: dentro=verde,
   atenção=amarelo, excedido=vermelho), aplicada via JS conforme o radio
   marcado (ver checklist/analise.html) - substitui o antigo border-left
   fixo por "obrigatório" (info que já aparece no selo do cabeçalho). */
.documento-card.estado-nao-respondido { border-left: 3px solid var(--cor-aviso); }
.documento-card.estado-apto { border-left: 3px solid var(--cor-sucesso); }
.documento-card.estado-nao-apto { border-left: 3px solid var(--cor-erro); }
.campo-situacao { display: flex; gap: var(--esp-2); margin: 0 0 var(--esp-2); padding: 0; border: none; }
.campo-situacao label {
  display: inline-flex; align-items: center; gap: 6px; height: var(--altura-controle-sm); padding: 0 var(--esp-3);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-full); font-size: var(--texto-sm); font-weight: 600;
  color: var(--texto-secundario); cursor: pointer; transition: all var(--dur-rapida) var(--curva);
}
.campo-situacao input[type="radio"] { accent-color: var(--acento); margin: 0; }
.campo-situacao label:has(input:checked) { border-color: var(--acento); background: var(--acento-fraco); color: var(--acento); }
.campo-situacao label:has(input[value="APTO"]:checked) {
  border-color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto);
}
.campo-situacao label:has(input[value="APTO"]:checked) input { accent-color: var(--cor-sucesso); }
.campo-situacao label:has(input[value="NAO_APTO"]:checked) {
  border-color: var(--cor-erro); background: var(--cor-erro-fundo); color: var(--cor-erro-texto);
}
.campo-situacao label:has(input[value="NAO_APTO"]:checked) input { accent-color: var(--cor-erro); }
.bloco-inconsistencia { padding: var(--esp-3); margin-top: var(--esp-2); background: var(--cor-erro-fundo); border-radius: var(--raio-md); }
.bloco-inconsistencia label { display: block; font-size: var(--texto-sm); font-weight: 600; color: var(--texto-secundario); margin-bottom: var(--esp-1); }
.bloco-inconsistencia ul { list-style: none; margin: 0 0 var(--esp-2); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bloco-inconsistencia ul label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--texto-primario); margin: 0; }
.bloco-inconsistencia textarea { width: 100%; margin-top: 4px; }

/* ============================= Divulgador (details/summary) =============== */
details.divulgador { border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--fundo-superficie); margin-bottom: var(--esp-4); }
details.divulgador summary { list-style: none; cursor: pointer; padding: var(--esp-3) var(--esp-4); font-size: var(--texto-base); font-weight: 600; color: var(--texto-primario); display: flex; align-items: center; gap: var(--esp-2); }
details.divulgador summary::-webkit-details-marker { display: none; }
details.divulgador summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--texto-terciario); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--dur-rapida) var(--curva); }
details.divulgador[open] summary::before { transform: rotate(90deg); }
details.divulgador .divulgador-corpo { padding: 0 var(--esp-4) var(--esp-4); }

/* ============================= Compat. (telas ainda não migradas) ========= */
main article {
  background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: var(--esp-4); box-shadow: var(--sombra-sm); margin-bottom: var(--esp-4);
}
main article > header { font-weight: 700; margin: calc(var(--esp-4) * -1) calc(var(--esp-4) * -1) var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--borda); background: var(--fundo-superficie-realcada); border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
main [role="button"], main button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  height: var(--altura-controle); padding: 0 var(--esp-4);
  font-family: var(--fonte-base); font-size: var(--texto-base); font-weight: 600;
  border-radius: var(--raio-md); border: 1px solid transparent; cursor: pointer;
  background: var(--acento); color: var(--texto-sobre-acento); text-decoration: none; line-height: 1;
}
main [role="button"]:hover, main button:hover { background: var(--acento-hover); text-decoration: none; }
main [role="button"].secondary { background: var(--fundo-superficie-realcada); color: var(--texto-primario); border-color: var(--borda); }
main [role="button"].secondary:hover { background: var(--hover); }
main [role="button"].outline { background: transparent; color: var(--acento); border-color: var(--acento); }
main [role="button"].outline:hover { background: var(--acento-fraco); }
main table:not(.tabela) { width: 100%; border-collapse: collapse; font-size: var(--texto-base); background: var(--fundo-superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); overflow: hidden; }
main table:not(.tabela) th { background: var(--fundo-superficie-realcada); color: var(--texto-secundario); font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding: 6px var(--esp-3); border-bottom: 1px solid var(--borda); }
main table:not(.tabela) td { padding: 5px var(--esp-3); border-bottom: 1px solid var(--borda); }
main table:not(.tabela) tr:last-child td { border-bottom: none; }
main .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--esp-2); font-size: var(--texto-xs); font-weight: 400; border-radius: var(--raio-full); }
main .badge-apta { background: var(--selo-fundo-sucesso); color: var(--selo-texto); }
main .badge-inapta { background: var(--selo-fundo-erro); color: var(--selo-texto); }
main .badge-em-analise { background: var(--selo-fundo-aviso); color: var(--selo-texto); }

/* ============================= Utilitários ================================ */
.texto-secundario { color: var(--texto-secundario); }
.texto-terciario { color: var(--texto-terciario); }
.texto-numerico { font-variant-numeric: tabular-nums; }

/* Hierarquia rótulo -> valor das telas de consulta (Checklist, Notas
   Fiscais, Planos Financeiros, Atestados etc.) - queixa do usuário: os
   cartões ficavam "grosseiros", com o valor em negrito pesado do mesmo
   peso do título do cartão, difícil de achar onde cada seção começa. O
   markup de campo já é sempre o mesmo em todo o app (rótulo discreto
   seguido de <strong> com o valor), então os dois seletores de irmão
   adjacente abaixo refinam a hierarquia globalmente, sem precisar editar
   cada template um a um. */
.texto-secundario + strong {
  display: block;
  margin-top: 2px;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--texto-primario);
}
.somente-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ============================= Timeline ==================================== */
/* Usado pelo Histórico das Apresentações da Nota Fiscal (notas_fiscais/_timeline_apresentacoes.html) */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: var(--esp-3); position: relative; }
.timeline-item:not(:last-child) { padding-bottom: var(--esp-4); }
.timeline-item:not(:last-child)::before {
    content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 2px; background: var(--borda);
}
.timeline-marcador {
    flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px;
    background: var(--cor-info); z-index: 1;
}
.timeline-marcador-sucesso { background: var(--cor-sucesso); }
.timeline-marcador-erro { background: var(--cor-erro); }
.timeline-marcador-aviso { background: var(--cor-aviso); }
.timeline-marcador-neutro { background: var(--texto-terciario); }
.timeline-conteudo { flex: 1; min-width: 0; }
.timeline-item-atual .timeline-conteudo { border-color: var(--cor-info); }

/* ============================= Impressão =================================== */
/* Usado pelo botão "Imprimir / PDF" dos Relatórios (window.print() do navegador,
   sem geração de PDF no servidor) - esconde navegação/ações, mantém o conteúdo
   (KPIs, gráficos, tabelas) legível numa folha. */
.no-imprimir { }
@media print {
    .sidebar, .topbar, .no-imprimir { display: none !important; }
    .conteudo-principal main { padding: 0; max-width: none; }
    .barra-acoes button, .barra-acoes a.btn, .barra-acoes .btn { display: none !important; }
    .grid { grid-template-columns: 1fr !important; }
    .cartao, .tabela-wrap, table, tr { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
}