/* ============================================================================
   Ponte entre os tokens da plataforma (--newos-*) e as variáveis do Bootstrap.
   Nenhuma cor, fonte ou medida é fixada aqui: tudo vem das configurações.
   ========================================================================== */

:root {
    --bs-body-font-family: var(--newos-fonte);
    --bs-body-font-size: var(--newos-fonte-base);
    --bs-body-line-height: var(--newos-altura-linha);
    --bs-body-bg: var(--newos-cor-fundo);
    --bs-body-color: var(--newos-cor-texto);
    --bs-border-color: var(--newos-cor-borda);
    --bs-border-radius: var(--newos-raio);
    --bs-border-radius-sm: calc(var(--newos-raio) * 0.66);
    --bs-border-radius-lg: calc(var(--newos-raio) * 1.5);
    --bs-primary: var(--newos-cor-primaria);
    --bs-secondary: var(--newos-cor-secundaria);
    --bs-success: var(--newos-cor-sucesso);
    --bs-danger: var(--newos-cor-perigo);
    --bs-warning: var(--newos-cor-alerta);
    --bs-info: var(--newos-cor-info);
    --bs-link-color: var(--newos-cor-primaria);
    --bs-link-hover-color: color-mix(in srgb, var(--newos-cor-primaria) 78%, black);
    --bs-emphasis-color: var(--newos-cor-texto);
    --bs-secondary-color: color-mix(in srgb, var(--newos-cor-texto) 65%, transparent);
    --bs-secondary-bg: color-mix(in srgb, var(--newos-cor-texto) 8%, var(--newos-cor-superficie));
    --bs-tertiary-bg: color-mix(in srgb, var(--newos-cor-texto) 4%, var(--newos-cor-superficie));

    /* --newos-destaque-1..6 (cores dos cenários do orçamento) vêm do servidor:
       TemaService as calcula a partir da primária (CorHelper.PaletaVizinha). */
}

html {
    font-size: var(--newos-fonte-base);
}

body {
    background-color: var(--newos-cor-fundo);
    color: var(--newos-cor-texto);
    font-family: var(--newos-fonte);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--newos-fonte-titulos);
    font-weight: var(--newos-peso-titulos);
}

h1, .h1 { font-size: calc(2.2rem * var(--newos-escala-titulos)); }
h2, .h2 { font-size: calc(1.8rem * var(--newos-escala-titulos)); }
h3, .h3 { font-size: calc(1.5rem * var(--newos-escala-titulos)); }
h4, .h4 { font-size: calc(1.25rem * var(--newos-escala-titulos)); }
h5, .h5 { font-size: calc(1.1rem * var(--newos-escala-titulos)); }
h6, .h6 { font-size: calc(1rem * var(--newos-escala-titulos)); }

/* -------------------------------------------------------------- Superfícies */
.card,
.list-group-item,
.dropdown-menu,
.modal-content,
.offcanvas {
    --bs-card-bg: var(--newos-cor-superficie);
    --bs-list-group-bg: var(--newos-cor-superficie);
    --bs-dropdown-bg: var(--newos-cor-superficie);
    --bs-modal-bg: var(--newos-cor-superficie);
    background-color: var(--newos-cor-superficie);
    border-color: var(--newos-cor-borda);
    color: var(--newos-cor-texto);
}

.card {
    box-shadow: var(--newos-sombra);
    border-radius: var(--newos-raio);
    /* Borda mais leve: a sombra já separa o card do fundo. */
    border-color: color-mix(in srgb, var(--newos-cor-borda) 75%, transparent);
}

/* O topo dos cards segue o estilo escolhido em Aparência: cor primária cheia (padrão),
   tom claro dela, faixa no topo, cor própria cheia ou o cinza neutro de antes. Os
   valores de reserva cobrem páginas montadas sem as variáveis do tema. */
.card-header {
    background-color: var(--newos-cabecalho-fundo, color-mix(in srgb, var(--newos-cor-texto) 4%, var(--newos-cor-superficie)));
    color: var(--newos-cabecalho-texto, var(--newos-cor-texto));
    box-shadow: var(--newos-cabecalho-destaque, none);
    /* O traço de baixo puxa para a cor do topo: não risca de cinza um topo colorido. */
    border-bottom-color: color-mix(in srgb, var(--newos-cor-borda) 50%, var(--newos-cabecalho-fundo, var(--newos-cor-superficie)));
    font-weight: 600;
}

/* O ícone do título acompanha o estilo; na cor cheia e no neutro, fica na cor do texto. */
.card-header > i:first-child,
.card-header > :first-child > i:first-child {
    color: var(--newos-cabecalho-icone, currentColor);
}

/* Topo que é só uma fileira de abas: a faixa fica por conta da aba ativa. */
.card-header:has(> .nav-tabs) {
    box-shadow: none;
}

/* Dentro do topo, links, contornos, abas e textos de apoio seguem o acento e o texto
   dele: sobre uma cor cheia, o primário e o cinza sumiriam. Nos estilos claros o
   acento é a própria primária, e fica tudo como antes. */
.card-header a:not(.btn):not(.nav-link):not(.badge) {
    color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
}

.card-header .btn-link {
    --bs-btn-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-hover-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-active-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
}

.card-header .btn-outline-primary {
    --bs-btn-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-border-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-hover-bg: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-hover-border-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-hover-color: var(--newos-cabecalho-fundo, var(--newos-cor-superficie));
    --bs-btn-active-bg: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-active-border-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-active-color: var(--newos-cabecalho-fundo, var(--newos-cor-superficie));
    --bs-btn-disabled-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
    --bs-btn-disabled-border-color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
}

.card-header .btn-outline-secondary {
    --bs-btn-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 75%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 35%, transparent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 14%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 50%, transparent);
    --bs-btn-hover-color: var(--newos-cabecalho-texto, var(--newos-cor-texto));
    --bs-btn-active-bg: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 20%, transparent);
    --bs-btn-active-border-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 50%, transparent);
    --bs-btn-active-color: var(--newos-cabecalho-texto, var(--newos-cor-texto));
    --bs-btn-disabled-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 75%, transparent);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 35%, transparent);
}

/* Contornos de cor com significado (excluir, confirmar...) ganham o fundo do card: seguem
   vermelhos, verdes... e legíveis sobre qualquer topo, inclusive o de cor cheia. */
.card-header .btn-outline-danger,
.card-header .btn-outline-success,
.card-header .btn-outline-warning,
.card-header .btn-outline-info {
    --bs-btn-bg: var(--newos-cor-superficie);
    --bs-btn-disabled-bg: var(--newos-cor-superficie);
}

.card-header .nav-tabs .nav-link:not(.active) {
    color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 72%, transparent);
}

.card-header .nav-tabs .nav-link:not(.active):hover,
.card-header .nav-tabs .nav-link:not(.active):focus-visible {
    color: var(--newos-cabecalho-acento, var(--newos-cor-primaria));
}

/* As utilitárias do Bootstrap vêm com !important. */
.card-header .text-muted,
.card-header .text-body-secondary {
    color: color-mix(in srgb, var(--newos-cabecalho-texto, var(--newos-cor-texto)) 72%, transparent) !important;
}

.card-header .text-primary {
    color: var(--newos-cabecalho-acento, var(--newos-cor-primaria)) !important;
}

/* Rodapé na cor do card, separado pelo traço: sem mais um tom de cinza na tela. */
.card-footer {
    background-color: var(--newos-cor-superficie);
    border-top-color: var(--newos-cor-borda);
}

/* -------------------------------------------------------------- Navbar */
.navbar-newos {
    background-color: var(--newos-cor-navbar);
}

.navbar-newos .navbar-brand,
.navbar-newos .nav-link,
.navbar-newos .navbar-text {
    color: var(--newos-cor-navbar-texto);
}

.navbar-newos .nav-link:hover,
.navbar-newos .nav-link:focus,
.navbar-newos .nav-link.show {
    background-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 14%, transparent);
    border-radius: var(--newos-raio);
    color: var(--newos-cor-navbar-texto);
}

/* -------------------------------------------------------------- Logomarca */
/* As duas variantes são renderizadas juntas; aqui se escolhe qual aparece. */
.marca-logo {
    height: var(--newos-altura-logo);
    width: auto;
    max-width: 100%;
}

.marca-logo-escura {
    display: none;
}

/* A marca reduzida só existe para o menu recolhido. */
.marca-icone {
    display: none;
    height: var(--newos-altura-logo);
    width: auto;
}

/* Fundos escuros por definição (menu, barra colorida e login) pedem a branca. */
.menu-lateral .marca .marca-logo-clara,
body.com-menu-superior .barra-topo .navbar-brand .marca-logo-clara,
.caixa-login .marca .marca-logo-clara {
    display: none;
}

.menu-lateral .marca .marca-logo-escura,
body.com-menu-superior .barra-topo .navbar-brand .marca-logo-escura,
.caixa-login .marca .marca-logo-escura {
    display: inline-block;
}

/* Nos demais lugares a marca acompanha o modo claro/escuro. */
[data-bs-theme="dark"] .marca-logo-clara {
    display: none;
}

[data-bs-theme="dark"] .marca-logo-escura {
    display: inline-block;
}

/* -------------------------------------------------------------- Botões */
.btn {
    --bs-btn-border-radius: var(--newos-raio);
    --bs-btn-padding-y: var(--newos-espacamento);
}

.btn-primary {
    --bs-btn-bg: var(--newos-cor-primaria);
    --bs-btn-border-color: var(--newos-cor-primaria);
    --bs-btn-hover-bg: color-mix(in srgb, var(--newos-cor-primaria) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--newos-cor-primaria) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--newos-cor-primaria) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--newos-cor-primaria) 70%, black);
    --bs-btn-disabled-bg: var(--newos-cor-primaria);
    --bs-btn-disabled-border-color: var(--newos-cor-primaria);
}

.btn-outline-primary {
    --bs-btn-color: var(--newos-cor-primaria);
    --bs-btn-border-color: var(--newos-cor-primaria);
    --bs-btn-hover-bg: var(--newos-cor-primaria);
    --bs-btn-hover-border-color: var(--newos-cor-primaria);
    --bs-btn-active-bg: var(--newos-cor-primaria);
    --bs-btn-active-border-color: var(--newos-cor-primaria);
    --bs-btn-disabled-color: var(--newos-cor-primaria);
    --bs-btn-disabled-border-color: var(--newos-cor-primaria);
}

.btn-secondary { --bs-btn-bg: var(--newos-cor-secundaria); --bs-btn-border-color: var(--newos-cor-secundaria); }
.btn-outline-secondary { --bs-btn-color: var(--newos-cor-secundaria); --bs-btn-border-color: var(--newos-cor-secundaria); --bs-btn-hover-bg: var(--newos-cor-secundaria); --bs-btn-hover-border-color: var(--newos-cor-secundaria); }
.btn-success { --bs-btn-bg: var(--newos-cor-sucesso); --bs-btn-border-color: var(--newos-cor-sucesso); }
.btn-outline-success { --bs-btn-color: var(--newos-cor-sucesso); --bs-btn-border-color: var(--newos-cor-sucesso); --bs-btn-hover-bg: var(--newos-cor-sucesso); --bs-btn-hover-border-color: var(--newos-cor-sucesso); }
.btn-danger { --bs-btn-bg: var(--newos-cor-perigo); --bs-btn-border-color: var(--newos-cor-perigo); }
.btn-outline-danger { --bs-btn-color: var(--newos-cor-perigo); --bs-btn-border-color: var(--newos-cor-perigo); --bs-btn-hover-bg: var(--newos-cor-perigo); --bs-btn-hover-border-color: var(--newos-cor-perigo); }
.btn-warning { --bs-btn-bg: var(--newos-cor-alerta); --bs-btn-border-color: var(--newos-cor-alerta); }
.btn-info { --bs-btn-bg: var(--newos-cor-info); --bs-btn-border-color: var(--newos-cor-info); }

/* -------------------------------------------------------------- Cores utilitárias */
.bg-primary { background-color: var(--newos-cor-primaria) !important; }
.bg-secondary { background-color: var(--newos-cor-secundaria) !important; }
.bg-success { background-color: var(--newos-cor-sucesso) !important; }
.bg-danger { background-color: var(--newos-cor-perigo) !important; }
.bg-warning { background-color: var(--newos-cor-alerta) !important; }
.bg-info { background-color: var(--newos-cor-info) !important; }
.bg-dark { background-color: color-mix(in srgb, var(--newos-cor-texto) 88%, black) !important; }

.text-primary { color: var(--newos-cor-primaria) !important; }
.text-success { color: var(--newos-cor-sucesso) !important; }
.text-danger { color: var(--newos-cor-perigo) !important; }
.text-warning { color: var(--newos-cor-alerta) !important; }
.text-info { color: var(--newos-cor-info) !important; }

/* Combinações do Bootstrap (badge text-bg-*, bordas, links e fundos suaves) leem
   --bs-*-rgb, que o tema não troca: sem isto ficavam na cor original do Bootstrap. */
.text-bg-primary { color: #fff !important; background-color: var(--newos-cor-primaria) !important; }
.text-bg-secondary { color: #fff !important; background-color: var(--newos-cor-secundaria) !important; }
.text-bg-success { color: #fff !important; background-color: var(--newos-cor-sucesso) !important; }
.text-bg-danger { color: #fff !important; background-color: var(--newos-cor-perigo) !important; }
.text-bg-info { color: #000 !important; background-color: var(--newos-cor-info) !important; }
.text-bg-warning { color: #000 !important; background-color: var(--newos-cor-alerta) !important; }
.border-primary { border-color: var(--newos-cor-primaria) !important; }
.border-success { border-color: var(--newos-cor-sucesso) !important; }
.border-danger { border-color: var(--newos-cor-perigo) !important; }
.border-warning { border-color: var(--newos-cor-alerta) !important; }
.border-info { border-color: var(--newos-cor-info) !important; }
.bg-primary-subtle { background-color: color-mix(in srgb, var(--newos-cor-primaria) 14%, var(--newos-cor-superficie)) !important; }
.bg-success-subtle { background-color: color-mix(in srgb, var(--newos-cor-sucesso) 14%, var(--newos-cor-superficie)) !important; }
.bg-danger-subtle { background-color: color-mix(in srgb, var(--newos-cor-perigo) 14%, var(--newos-cor-superficie)) !important; }
.bg-warning-subtle { background-color: color-mix(in srgb, var(--newos-cor-alerta) 18%, var(--newos-cor-superficie)) !important; }
.bg-info-subtle { background-color: color-mix(in srgb, var(--newos-cor-info) 14%, var(--newos-cor-superficie)) !important; }
.text-primary-emphasis { color: color-mix(in srgb, var(--newos-cor-primaria) 70%, black) !important; }
.link-primary { color: var(--newos-cor-primaria) !important; }

/* -------------------------------------------------------------- Formulários */
.form-control,
.form-select {
    background-color: var(--newos-cor-superficie);
    border-color: var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    color: var(--newos-cor-texto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--newos-cor-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--newos-cor-primaria) 25%, transparent);
}

.form-check-input:checked {
    background-color: var(--newos-cor-primaria);
    border-color: var(--newos-cor-primaria);
}

.form-check-input:focus {
    border-color: var(--newos-cor-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--newos-cor-primaria) 25%, transparent);
}

/* -------------------------------------------------------------- Tabelas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--newos-cor-texto);
    --bs-table-border-color: var(--newos-cor-borda);
    --bs-table-striped-bg: color-mix(in srgb, var(--newos-cor-texto) 4%, transparent);
    --bs-table-striped-color: var(--newos-cor-texto);
    --bs-table-hover-bg: color-mix(in srgb, var(--newos-cor-primaria) 8%, transparent);
    --bs-table-hover-color: var(--newos-cor-texto);
}

.table > :not(caption) > * > * {
    padding: var(--newos-espacamento) .6rem;
}

/* Cabeçalho da tabela discreto: quem chama atenção são os dados. */
.table > thead > tr > th {
    color: var(--bs-secondary-color);
}

/* -------------------------------------------------------------- Paginação e abas */
.pagination {
    --bs-pagination-color: var(--newos-cor-primaria);
    --bs-pagination-bg: var(--newos-cor-superficie);
    --bs-pagination-border-color: var(--newos-cor-borda);
    --bs-pagination-hover-color: var(--newos-cor-primaria);
    --bs-pagination-hover-bg: color-mix(in srgb, var(--newos-cor-primaria) 12%, transparent);
    --bs-pagination-active-bg: var(--newos-cor-primaria);
    --bs-pagination-active-border-color: var(--newos-cor-primaria);
    --bs-pagination-border-radius: var(--newos-raio);
}

.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--newos-cor-superficie);
    --bs-nav-tabs-link-active-color: var(--newos-cor-primaria);
    --bs-nav-tabs-border-color: var(--newos-cor-borda);
}

.nav-tabs .nav-link {
    color: var(--bs-secondary-color);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    color: var(--newos-cor-primaria);
}

/* Aba ativa com filete na cor primária: fica claro em que parte da tela se está. */
.nav-tabs .nav-link.active {
    color: var(--newos-cor-primaria);
    box-shadow: inset 0 3px 0 var(--newos-cor-primaria);
}

/* No topo do card, a aba ativa já se destaca pelo fundo claro sobre o topo: o filete
   em cima dela sobraria (e na cor cheia, emendaria com o próprio topo). */
.card-header .nav-tabs .nav-link.active {
    box-shadow: none;
}

/* ============================================================================
   SweetAlert2 traz cores próprias (roxo, azul) que não são as da plataforma.
   Aqui ele passa a usar os mesmos tokens do resto do sistema — o que vale para
   os dois modos, já que as variáveis é que mudam no escuro.
   ========================================================================== */
.swal2-popup {
    background: var(--newos-cor-superficie);
    color: var(--newos-cor-texto);
    border-radius: calc(var(--newos-raio) * 1.6);
    box-shadow: var(--newos-sombra);
    font-family: var(--newos-fonte);
}

.swal2-title {
    color: var(--newos-cor-texto);
    font-family: var(--newos-fonte-titulos);
    font-weight: var(--newos-peso-titulos);
}

.swal2-html-container,
.swal2-label,
.swal2-footer,
.swal2-validation-message {
    color: var(--newos-cor-texto) !important;
}

.swal2-footer {
    border-top-color: var(--newos-cor-borda);
}

/* Os botões seguem as mesmas cores dos .btn correspondentes. */
.swal2-styled {
    border-radius: var(--newos-raio) !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--newos-cor-primaria) !important;
    color: #fff !important;
}

.swal2-styled.swal2-deny {
    background-color: var(--newos-cor-perigo) !important;
    color: #fff !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--newos-cor-secundaria) !important;
    color: #fff !important;
}

.swal2-styled:focus,
.swal2-styled:focus-visible {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--newos-cor-primaria) 35%, transparent) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: color-mix(in srgb, var(--newos-cor-texto) 4%, var(--newos-cor-superficie));
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    color: var(--newos-cor-texto);
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--newos-cor-primaria);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--newos-cor-primaria) 25%, transparent);
}

/* Os ícones circulares também são cor de marca, não as do pacote. */
.swal2-icon.swal2-warning {
    border-color: color-mix(in srgb, var(--newos-cor-alerta) 60%, transparent);
    color: var(--newos-cor-alerta);
}

.swal2-icon.swal2-error {
    border-color: color-mix(in srgb, var(--newos-cor-perigo) 60%, transparent);
    color: var(--newos-cor-perigo);
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--newos-cor-perigo);
}

.swal2-icon.swal2-success {
    border-color: color-mix(in srgb, var(--newos-cor-sucesso) 60%, transparent);
    color: var(--newos-cor-sucesso);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--newos-cor-sucesso);
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: color-mix(in srgb, var(--newos-cor-sucesso) 35%, transparent);
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: color-mix(in srgb, var(--newos-cor-info) 60%, transparent);
    color: var(--newos-cor-info);
}

.swal2-timer-progress-bar {
    background: var(--newos-cor-primaria);
}

/* -------------------------------------------------------------- Cartões do painel */
.card-indicador {
    border: 0;
    border-left: 4px solid var(--newos-cor-primaria);
}

.card-indicador.receita { border-left-color: var(--newos-cor-sucesso); }
.card-indicador.despesa { border-left-color: var(--newos-cor-perigo); }
.card-indicador.alerta { border-left-color: var(--newos-cor-alerta); }

/* -------------------------------------------------------------- Tela de login */
.tela-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: var(--newos-login-alinhamento);
    padding: 2rem clamp(1rem, 6vw, 6rem);
    position: relative;
    overflow: hidden;
}

.tela-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--newos-login-fundo);
    filter: blur(var(--newos-login-desfoque));
    transform: scale(1.05);
    z-index: 0;
}

.tela-login::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--newos-login-sobreposicao));
    z-index: 0;
}

.caixa-login {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--newos-login-largura);
}

.caixa-login .card {
    border-radius: calc(var(--newos-raio) * 1.6);
}

.caixa-login.translucida .card {
    background-color: color-mix(in srgb, var(--newos-cor-superficie) 78%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, #ffffff 25%, transparent);
}

.caixa-login .marca {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.caixa-login .marca .marca-logo {
    height: auto;
    max-height: calc(var(--newos-altura-logo) * 2.4);
    max-width: 82%;
    margin-bottom: .5rem;
}

/* Idioma do login: discreto, sobre o fundo escurecido, acende ao passar o mouse. */
.seletor-idioma-login .btn {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    font-size: .75rem;
    padding: .2rem .7rem;
    opacity: .75;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: opacity .2s ease, background-color .2s ease, border-color .2s ease;
}

.seletor-idioma-login .btn:hover,
.seletor-idioma-login .btn:focus-visible,
.seletor-idioma-login .btn.show {
    color: #fff;
    opacity: 1;
    background-color: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
}

.seletor-idioma-login .dropdown-menu {
    min-width: 8rem;
    font-size: .85rem;
}

/* -------------------------------------------------------------- Assinatura do New OS */
/* A marca do produto nos rodapés: cinza em repouso, na cor ao passar o mouse. */
.assinatura-newos {
    display: inline-flex;
    align-items: center;
    padding: .3rem .85rem;
    border: 1px solid var(--newos-cor-borda);
    border-radius: 999px;
    background-color: var(--bs-tertiary-bg);
    line-height: 1;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.assinatura-logo {
    height: 16px;
    width: auto;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .2s ease, opacity .2s ease;
}

.assinatura-newos:hover {
    border-color: color-mix(in srgb, var(--newos-cor-primaria) 45%, var(--newos-cor-borda));
    background-color: var(--newos-cor-superficie);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.assinatura-newos:hover .assinatura-logo {
    filter: none;
    opacity: 1;
}

.assinatura-logo-escura {
    display: none;
}

[data-bs-theme="dark"] .assinatura-logo-clara {
    display: none;
}

[data-bs-theme="dark"] .assinatura-logo-escura {
    display: inline-block;
}

/* No login a pill fica sobre o fundo escurecido: translúcida, com a logo branca. */
.rodape-login .assinatura-newos {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.rodape-login .assinatura-newos:hover {
    background-color: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
    box-shadow: none;
}

.rodape-login .assinatura-logo-clara {
    display: none;
}

.rodape-login .assinatura-logo-escura {
    display: inline-block;
}

/* Faixa da tela de teste: deixa claro que aquilo ali não é o login de verdade. */
.faixa-previa {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    padding: .4rem 1rem;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .85rem;
}

/* -------------------------------------------------------------- Pré-visualização da aparência */
.previa-tema {
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    overflow: hidden;
}

.previa-tema .previa-navbar {
    background: var(--newos-cor-navbar);
    color: var(--newos-cor-navbar-texto);
    padding: .6rem .9rem;
    font-weight: 600;
}

.previa-tema .previa-corpo {
    background: var(--newos-cor-fundo);
    padding: 1rem;
}

/* ----------------------------------------------------------------------------
   Amostras da aba de cores e formas: cada campo mostra embaixo o componente que
   aquela cor pinta de verdade, já com o valor que está sendo digitado.
   -------------------------------------------------------------------------- */
.amostra-cor {
    font-size: .8rem;
    line-height: 1.2;
}

.amostra-cor > span {
    display: inline-block;
    padding: .3rem .6rem;
}

/* A cor de cada amostra chega por style inline, apontando a variável do campo. */
.amostra-botao {
    color: #fff;
    border-radius: var(--newos-raio);
}

.amostra-etiqueta,
.amostra-etiqueta-escura {
    color: #fff;
    border-radius: 999px;
    padding: .15rem .6rem !important;
    font-weight: 600;
}

.amostra-etiqueta-escura {
    color: #000;
}

.amostra-fundo,
.amostra-superficie {
    color: var(--newos-cor-texto);
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
}

.amostra-superficie {
    box-shadow: var(--newos-sombra);
}

.amostra-texto {
    padding-left: 0 !important;
}

.amostra-borda {
    border-width: 2px;
    border-style: solid;
    border-radius: var(--newos-raio);
    color: var(--newos-cor-texto);
}

.amostra-barra {
    background: var(--newos-cor-navbar);
    color: var(--newos-cor-navbar-texto);
    border-radius: var(--newos-raio);
    min-width: 60%;
}

.amostra-barra-topo {
    background: var(--newos-cor-barra-topo);
    color: var(--newos-cor-barra-topo-texto);
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    min-width: 60%;
}

.amostra-raio {
    background: color-mix(in srgb, var(--newos-cor-primaria) 18%, var(--newos-cor-superficie));
    border: 1px solid var(--newos-cor-primaria);
    border-radius: var(--newos-raio);
    color: var(--newos-cor-texto);
}

.amostra-sombra {
    background: var(--newos-cor-superficie);
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    box-shadow: var(--newos-sombra);
    color: var(--newos-cor-texto);
}

.amostra-densidade {
    font-size: .8rem;
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    overflow: hidden;
}

.amostra-densidade td {
    border-bottom-color: var(--newos-cor-borda);
}

.amostra-tipografia {
    border: 1px dashed var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    padding: 1rem;
    background: var(--newos-cor-superficie);
    color: var(--newos-cor-texto);
    font-family: var(--newos-fonte);
    font-size: var(--newos-fonte-base);
}

.amostra-tipografia h4 {
    font-family: var(--newos-fonte-titulos);
    font-weight: var(--newos-peso-titulos);
    font-size: calc(1.25rem * var(--newos-escala-titulos));
}

/* Miniatura das imagens da marca: o xadrez denuncia fundo transparente. */
.quadro-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: .5rem;
    border: 1px solid var(--newos-cor-borda);
    border-radius: var(--newos-raio);
    overflow: hidden;
}

.quadro-imagem.pequeno {
    min-height: 56px;
}

.quadro-imagem img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
}

.quadro-imagem.pequeno img {
    max-height: 40px;
}

/* Sem endereço preenchido a miniatura fica vazia em vez de mostrar o ícone quebrado. */
.quadro-imagem img:not([src]),
.quadro-imagem img[src=""] {
    display: none;
}

.quadro-imagem.clara {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%),
                      linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.quadro-imagem.escura {
    background-color: #1f2d3d;
}

/* ============================================================================
   Layout: menu lateral (padrão) ou superior. A escolha vem de Aparência e
   troca apenas a classe do <body>, sem duplicar a definição do menu.
   ========================================================================== */

.barra-topo {
    background-color: var(--newos-cor-barra-topo);
    border-bottom: 1px solid var(--newos-cor-borda);
    padding: .5rem 0;
    margin-bottom: 1rem;
}

.barra-topo .navbar-newos {
    background-color: transparent;
}

/* O menu suspenso flutua sobre o conteúdo: a barra não muda de altura ao abrir. */
.barra-topo .navbar-nav .dropdown-menu {
    position: absolute;
}

/* Texto e ícones da barra: uma cor só, para o contraste ser escolhido junto. */
.barra-topo .nav-link,
.barra-topo .navbar-brand,
.barra-topo .navbar-text,
.barra-topo .dropdown-toggle,
.barra-topo .btn-link,
.barra-topo i {
    color: var(--newos-cor-barra-topo-texto);
}

.barra-topo .nav-link:hover,
.barra-topo .nav-link:focus,
.barra-topo .nav-link.show {
    background-color: color-mix(in srgb, var(--newos-cor-primaria) 12%, transparent);
    color: var(--newos-cor-primaria);
}

.btn-alternar-menu {
    color: var(--newos-cor-barra-topo-texto);
    border: 1px solid color-mix(in srgb, var(--newos-cor-barra-topo-texto) 25%, transparent);
}

.btn-alternar-menu:hover {
    background-color: color-mix(in srgb, var(--newos-cor-primaria) 12%, transparent);
    color: var(--newos-cor-primaria);
}

/* -------------------------------------------------- Menu superior */
body.com-menu-superior .barra-topo {
    background-color: var(--newos-cor-navbar);
    border-bottom-color: transparent;
}

body.com-menu-superior .barra-topo .nav-link,
body.com-menu-superior .barra-topo .navbar-brand,
body.com-menu-superior .barra-topo .navbar-text {
    color: var(--newos-cor-navbar-texto);
}

body.com-menu-superior .barra-topo .nav-link:hover,
body.com-menu-superior .barra-topo .nav-link:focus,
body.com-menu-superior .barra-topo .nav-link.show {
    background-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 14%, transparent);
    color: var(--newos-cor-navbar-texto);
    border-radius: var(--newos-raio);
}

body.com-menu-superior .barra-topo .navbar-brand img {
    height: var(--newos-altura-logo);
    width: auto;
}

/* -------------------------------------------------- Menu lateral */
.menu-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--newos-largura-menu);
    background-color: var(--newos-cor-navbar);
    color: var(--newos-cor-navbar-texto);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width .2s ease, transform .2s ease;
    overflow-x: hidden;
}

.menu-lateral-topo {
    padding: .9rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--newos-cor-navbar-texto) 15%, transparent);
}

.menu-lateral .marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--newos-cor-navbar-texto);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

/* Recolhido, a logo inteira dá lugar à marca reduzida, centralizada na faixa. */
body.com-menu-lateral.menu-recolhido .menu-lateral .marca {
    justify-content: center;
}

body.com-menu-lateral.menu-recolhido .menu-lateral .marca-logo {
    display: none;
}

body.com-menu-lateral.menu-recolhido .menu-lateral .marca-icone-escuro {
    display: inline-block;
    max-width: 46px;
}

body.com-menu-lateral.menu-recolhido .menu-lateral-topo {
    padding-left: .35rem;
    padding-right: .35rem;
}

/* Na faixa de 62px, reservar a calha da rolagem custaria caro — e ali os
   submenus ficam escondidos, então ela não chega a aparecer no meio do caminho. */
body.com-menu-lateral.menu-recolhido .menu-lateral-itens {
    scrollbar-gutter: auto;
}

.menu-lateral-itens {
    padding: .75rem .5rem;
    overflow-y: auto;
    /* A barra de rolagem aparece quando um submenu abre; sem reservar a calha,
       ela estreitaria a lista no meio da animação e tudo dava um salto. */
    scrollbar-gutter: stable;
    flex: 1;
}

/*
   Submenu em bloco, não em flex. O .nav do Bootstrap é flex com wrap, e enquanto
   o collapse anima a altura os itens se reorganizavam em várias colunas, voltando
   para uma só no fim — era isso que travava a abertura. Em bloco a altura menor
   apenas recorta, que é o que a animação espera.

   Só vale enquanto o submenu está aberto (.show) ou animando (.collapsing). Sem
   esse recorte, a regra teria especificidade maior que a do .collapse:not(.show)
   do Bootstrap e o submenu fechado nunca receberia display: none.
*/
.menu-lateral .nav-item .nav.show,
.menu-lateral .nav-item .nav.collapsing {
    display: block;
}

.menu-lateral .nav-link {
    color: color-mix(in srgb, var(--newos-cor-navbar-texto) 85%, transparent);
    border-radius: var(--newos-raio);
    padding: .5rem .75rem;
    white-space: nowrap;
}

.menu-lateral .nav-link:hover,
.menu-lateral .nav-link:focus {
    background-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 12%, transparent);
    color: var(--newos-cor-navbar-texto);
}

.menu-lateral .nav-link.ativo {
    background-color: var(--newos-cor-primaria);
    color: #fff;
}

.menu-lateral .nav .nav-link {
    font-size: .9rem;
    opacity: .85;
}

.menu-lateral .border-start {
    border-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 20%, transparent) !important;
}

body.com-menu-lateral .area-conteudo {
    margin-left: var(--newos-largura-menu);
    transition: margin-left .2s ease;
}

/* O rodapé é posicionado na página inteira: com o menu lateral, começa onde o
   conteúdo começa. Com largura de 100% ele passava da borda da tela pela largura do
   menu e criava rolagem horizontal em todas as telas. */
body.com-menu-lateral .rodape {
    left: var(--newos-largura-menu);
    right: 0;
    width: auto;
    transition: left .2s ease;
}

/* Recolhido: só os ícones continuam visíveis. */
body.com-menu-lateral.menu-recolhido .menu-lateral {
    width: 62px;
}

body.com-menu-lateral.menu-recolhido .area-conteudo {
    margin-left: 62px;
}

body.com-menu-lateral.menu-recolhido .rodape {
    left: 62px;
}

body.com-menu-lateral.menu-recolhido .menu-lateral span,
body.com-menu-lateral.menu-recolhido .menu-lateral .nav .nav-link {
    display: none;
}

.sombra-menu {
    display: none;
}

/* No mobile a barra vira gaveta. */
@media (max-width: 991.98px) {
    .menu-lateral {
        transform: translateX(-100%);
    }

    body.com-menu-lateral .area-conteudo {
        margin-left: 0;
    }

    body.com-menu-lateral.menu-aberto .menu-lateral {
        transform: translateX(0);
    }

    body.com-menu-lateral.menu-recolhido .menu-lateral {
        width: var(--newos-largura-menu);
    }

    body.com-menu-lateral.menu-recolhido .menu-lateral span,
    body.com-menu-lateral.menu-recolhido .menu-lateral .nav .nav-link {
        display: revert;
    }

    /* Gaveta aberta tem a largura toda: volta a logo inteira, alinhada à esquerda. */
    body.com-menu-lateral.menu-recolhido .menu-lateral .marca {
        justify-content: flex-start;
    }

    body.com-menu-lateral.menu-recolhido .menu-lateral .marca-logo-escura {
        display: inline-block;
    }

    body.com-menu-lateral.menu-recolhido .menu-lateral .marca-icone-escuro {
        display: none;
    }

    body.com-menu-lateral.menu-recolhido .area-conteudo {
        margin-left: 0;
    }

    body.com-menu-lateral .rodape,
    body.com-menu-lateral.menu-recolhido .rodape {
        left: 0;
    }

    body.com-menu-lateral.menu-aberto .sombra-menu {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 1035;
    }
}


/* ============================================================================
   Alternador de tema sol/lua, no mesmo desenho do CRM: de dia céu azul com
   nuvem, de noite céu escuro com estrelas e a lua com crateras.
   ========================================================================== */
.alternador-tema {
    display: inline-flex;
    align-items: center;
}

.alternador-tema input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.alternador-tema .alternador-trilho {
    --largura: 56px;
    --altura: 28px;
    position: relative;
    display: block;
    width: var(--largura);
    height: var(--altura);
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(#5ab0f2, #8fd0ff);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
    overflow: hidden;
    transition: background .5s ease;
}

/* ::before = nuvem do dia · ::after = estrelas da noite */
.alternador-tema .alternador-trilho::before,
.alternador-tema .alternador-trilho::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    transition: opacity .5s, transform .5s;
}

.alternador-tema .alternador-trilho::before {
    width: 16px;
    height: 16px;
    background: #fff;
    right: 8px;
    bottom: -6px;
    box-shadow: -10px 2px 0 -2px #fff;
    opacity: .9;
}

.alternador-tema .alternador-trilho::after {
    width: 3px;
    height: 3px;
    background: #fff;
    left: 10px;
    top: 8px;
    box-shadow: 8px 6px 0 -1px #fff, 3px 14px 0 -1px #fff, 16px 15px 0 0 #fff;
    opacity: 0;
}

.alternador-tema .alternador-astro {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: 0 0 10px rgba(255, 203, 71, .9);
    transition: left .5s cubic-bezier(.5, 1.6, .4, 1), background .5s, box-shadow .5s;
}

/* -------------------------------------------------- Noite */
.alternador-tema input:checked + .alternador-trilho {
    background: linear-gradient(#1b2a4a, #0c1626);
}

.alternador-tema input:checked + .alternador-trilho::before {
    opacity: 0;
    transform: translateY(10px);
}

.alternador-tema input:checked + .alternador-trilho::after {
    opacity: 1;
}

.alternador-tema input:checked + .alternador-trilho .alternador-astro {
    left: 31px;
    background: radial-gradient(circle at 35% 35%, #fdfdfd, #dfe6f0 65%, #c3ccdb);
    box-shadow: 0 0 10px rgba(205, 224, 255, .6);
}

/* Crateras da lua cheia. */
.alternador-tema input:checked + .alternador-trilho .alternador-astro::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 62%, rgba(146, 160, 180, .55) 0 2.6px, transparent 3.1px),
        radial-gradient(circle at 63% 33%, rgba(146, 160, 180, .45) 0 1.9px, transparent 2.4px),
        radial-gradient(circle at 68% 70%, rgba(146, 160, 180, .38) 0 1.4px, transparent 1.9px);
}

.alternador-tema input:focus-visible + .alternador-trilho {
    outline: 2px solid var(--newos-cor-primaria);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .alternador-tema .alternador-trilho,
    .alternador-tema .alternador-astro,
    .alternador-tema .alternador-trilho::before,
    .alternador-tema .alternador-trilho::after {
        transition: none;
    }
}

/* -------------------------------------------------- Filtro de status em pills */
.filtro-status .dropdown-menu {
    max-height: 320px;
}

.filtro-status #filtroStatusBuscaWrap {
    position: sticky;
    top: 0;
    background: var(--newos-cor-superficie);
    z-index: 1;
}

.filtro-status .status-opcao {
    padding-top: .35rem;
    padding-bottom: .35rem;
}


/* ============================================================================
   Editor de texto (Jodit): área de digitação alta o bastante para escrever um
   laudo sem rolar o tempo todo. Os quatro campos da OS ficam do mesmo tamanho.
   ========================================================================== */
/* O Jodit escreve min-height inline no workplace; só !important passa por cima. */
.jodit-container .jodit-workplace {
    min-height: 400px !important;
}

.jodit-container .jodit-wysiwyg {
    min-height: 400px !important;
}

/* No celular, uma altura menor evita que um campo tome a tela inteira. */
@media (max-width: 767.98px) {
    .jodit-container .jodit-workplace {
        min-height: 260px !important;
    }

    .jodit-container .jodit-wysiwyg {
        min-height: 260px !important;
    }
}

/* ============================================================================
   Modo escuro nos componentes de terceiros. Select2, SweetAlert e flatpickr
   trazem CSS claro próprio e ficavam brancos no meio da tela escura — aqui eles
   passam a usar os mesmos tokens do restante do sistema.
   ========================================================================== */
[data-bs-theme="dark"] {

    /* -------------------------------------------------- Select2 */
    .select2-container--bootstrap-5 .select2-selection,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        background-color: var(--newos-cor-superficie);
        border-color: var(--newos-cor-borda);
        color: var(--newos-cor-texto);
    }

    .select2-container--bootstrap-5 .select2-selection__rendered,
    .select2-container--default .select2-selection__rendered,
    .select2-container .select2-selection__placeholder {
        color: var(--newos-cor-texto) !important;
    }

    .select2-dropdown,
    .select2-container--bootstrap-5 .select2-dropdown {
        background-color: var(--newos-cor-superficie);
        border-color: var(--newos-cor-borda);
        color: var(--newos-cor-texto);
    }

    .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
    .select2-search--dropdown .select2-search__field {
        background-color: color-mix(in srgb, var(--newos-cor-texto) 6%, var(--newos-cor-superficie));
        border-color: var(--newos-cor-borda);
        color: var(--newos-cor-texto);
    }

    .select2-results__option {
        color: var(--newos-cor-texto);
    }

    .select2-container--bootstrap-5 .select2-results__option--highlighted,
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--newos-cor-primaria);
        color: #fff;
    }

    .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
        background-color: color-mix(in srgb, var(--newos-cor-primaria) 25%, var(--newos-cor-superficie));
        border-color: var(--newos-cor-borda);
        color: var(--newos-cor-texto);
    }

    /* SweetAlert2 já segue os tokens no bloco geral: nada a repetir aqui. */

    /* -------------------------------------------------- flatpickr */
    .flatpickr-calendar {
        background: var(--newos-cor-superficie);
        color: var(--newos-cor-texto);
        box-shadow: var(--newos-sombra);
    }

    .flatpickr-months .flatpickr-month,
    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-weekday {
        background: var(--newos-cor-superficie);
        color: var(--newos-cor-texto);
        fill: var(--newos-cor-texto);
    }

    .flatpickr-day {
        color: var(--newos-cor-texto);
    }

    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        color: color-mix(in srgb, var(--newos-cor-texto) 40%, transparent);
    }

    .flatpickr-day:hover,
    .flatpickr-day.selected {
        background: var(--newos-cor-primaria);
        border-color: var(--newos-cor-primaria);
        color: #fff;
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: var(--newos-cor-texto);
    }

    /* -------------------------------------------------- Etiquetas claras */
    /* "bg-light + text-dark" vira um bloco branco no escuro: segue a superfície. */
    .badge.bg-light {
        background-color: color-mix(in srgb, var(--newos-cor-texto) 12%, var(--newos-cor-superficie)) !important;
    }

    .badge.bg-light.text-dark,
    .badge.bg-light .text-dark {
        color: var(--newos-cor-texto) !important;
    }

    /* Editor de texto: o Jodit tem tema próprio, ligado por classe no JS. */
    .jodit-container:not(.jodit_theme_dark) .jodit-wysiwyg {
        background: var(--newos-cor-superficie);
        color: var(--newos-cor-texto);
    }
}

/* ============================================================================
   Celular: os botões passam a ocupar a largura toda, um abaixo do outro.
   Só aqui — no desktop as barras de ação continuam na horizontal.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Barras de ação e rodapés de formulário viram uma coluna. Quem marca
       .nao-empilhar continua em linha, com os botões no tamanho natural. */
    .d-flex.gap-2:not(.nao-empilhar) > .btn,
    .d-flex.gap-2:not(.nao-empilhar) > form > .btn,
    .card-footer.d-flex > .btn,
    .card-footer.d-flex > form > .btn,
    .barra-acoes > .btn,
    .barra-acoes > form > .btn {
        width: 100%;
    }

    .d-flex.gap-2:not(.nao-empilhar),
    .card-footer.d-flex:not(.nao-empilhar),
    .barra-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    /* Formulários dentro da barra também esticam, senão o botão não acompanha. */
    .d-flex.gap-2:not(.nao-empilhar) > form,
    .card-footer.d-flex > form,
    .barra-acoes > form {
        width: 100%;
    }

    /* Cabeçalho "título + ações": título em cima, botões abaixo, um por linha. */
    .d-flex.justify-content-between:not(.nao-empilhar) {
        flex-direction: column;
        align-items: stretch !important;
    }

    .d-flex.justify-content-between:not(.nao-empilhar) > .btn,
    .d-flex.justify-content-between:not(.nao-empilhar) > form > .btn,
    .d-flex.justify-content-between:not(.nao-empilhar) > .d-flex > .btn,
    .d-flex.justify-content-between:not(.nao-empilhar) > .d-flex > form > .btn {
        width: 100%;
    }

    .d-flex.justify-content-between:not(.nao-empilhar) > .d-flex,
    .d-flex.justify-content-between:not(.nao-empilhar) > .btn-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: .5rem;
    }

    /* Grupo de botões empilhado perde o encaixe lateral e ganha o vertical. */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group > .btn {
        width: 100%;
        border-radius: var(--newos-raio) !important;
    }

    /* O sol/lua fica colado nos vizinhos quando a barra aperta: garante respiro. */
    .barra-topo .alternador-tema {
        margin: .25rem .5rem;
    }

    /* Barra do topo: a busca global ocupa a linha inteira. */
    .barra-topo .navbar-nav {
        width: 100%;
    }

    .barra-topo #formPesquisaGlobal,
    .barra-topo #campoPesquisaGlobal {
        width: 100%;
        min-width: 0 !important;
    }

    /* Abas da OS roláveis na horizontal, em vez de quebrar em várias linhas. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Filtros de listagem: cada campo em uma linha. */
    form.row > [class*="col-"] {
        margin-bottom: .5rem;
    }

    /* Ações das tabelas ficam com alvo maior para o toque. */
    td.actions .link-icon {
        display: inline-block;
        padding: .25rem .35rem;
    }

    /* Paginação centralizada e sem estourar a largura. */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Modais coladas nas bordas aproveitam melhor a tela pequena. */
    .modal-dialog {
        margin: .5rem;
    }
}

@media print {
    .menu-lateral,
    .sombra-menu {
        display: none !important;
    }

    body.com-menu-lateral .area-conteudo {
        margin-left: 0 !important;
    }
}