/* ============================================================================
   Estrutura e layout. Cores, fontes e medidas ficam em tema.css, alimentado
   pelas configurações de Aparência — nada de valores fixos aqui.
   ========================================================================== */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 64px;
}

/* -------------------------------------------------- Logotipo */
.logo-escura {
    display: none;
}

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

[data-bs-theme="dark"] .navbar-brand .logo-clara:not(:only-of-type) {
    display: none;
}

/* -------------------------------------------------- Rodapé */
.rodape {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    font-size: .8rem;
}

/* Direitos à esquerda, assinatura do New OS à direita. */
.rodape-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 48px;
}

/* Login: assinatura e direitos empilhados abaixo da caixa. */
.rodape-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}

/* Idioma no login: canto superior direito, fora da caixa. */
.seletor-idioma-login {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

/* -------------------------------------------------- Tabelas */
.table thead th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.table td,
.table th {
    vertical-align: middle;
}

th.ordenar {
    cursor: pointer;
    user-select: none;
}

th.ordenar::after {
    content: " \2195";
    opacity: .35;
}

.actions-title,
td.actions {
    width: 140px;
    white-space: nowrap;
    text-align: center;
}

.link-icon {
    text-decoration: none;
}

.link-icon:hover {
    opacity: .7;
}

/* -------------------------------------------------- Cartões do painel */
.card-indicador .valor {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
}

.card-indicador .rotulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .7;
}

/* -------------------------------------------------- Tela inicial (painel) */
/* Séries do gráfico: par azul/laranja validado para daltonismo e contraste,
   com um tom próprio para o fundo escuro (não é só inverter). */
.painel {
    --painel-serie-1: #2a78d6;
    --painel-serie-2: #eb6834;
    --painel-tinta-2: color-mix(in srgb, var(--newos-cor-texto) 68%, transparent);
    --painel-realce: color-mix(in srgb, var(--newos-cor-texto) 4%, var(--newos-cor-superficie));
}

[data-bs-theme="dark"] .painel {
    --painel-serie-1: #3987e5;
    --painel-serie-2: #d95926;
}

.painel-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.painel-data {
    color: var(--painel-tinta-2);
}

.painel-data::first-letter {
    text-transform: uppercase;
}

.painel-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Números do dia: até quatro por linha, dois no celular. */
.painel-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(9.5rem, calc((100% - 2.25rem) / 4)), 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.painel-indicador {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--newos-cor-borda) 75%, transparent);
    border-left: 4px solid color-mix(in srgb, var(--newos-cor-texto) 18%, transparent);
    border-radius: var(--newos-raio);
    background-color: var(--newos-cor-superficie);
    box-shadow: var(--newos-sombra);
    color: var(--newos-cor-texto);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

a.painel-indicador:hover {
    color: var(--newos-cor-texto);
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .12);
}

.painel-indicador:focus-visible {
    outline: 2px solid var(--newos-cor-primaria);
    outline-offset: 2px;
}

.painel-indicador-rotulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--painel-tinta-2);
}

.painel-indicador-rotulo i {
    color: var(--newos-cor-primaria);
}

.painel-indicador-valor {
    font-size: clamp(1.2rem, 12cqi, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.painel-indicador-detalhe {
    font-size: .8rem;
    color: var(--painel-tinta-2);
}

/* Estados: sempre com ícone e texto, a cor só reforça. */
.painel-indicador.critico {
    border-left-color: var(--newos-cor-perigo);
    background-color: color-mix(in srgb, var(--newos-cor-perigo) 7%, var(--newos-cor-superficie));
}

.painel-indicador.critico .painel-indicador-rotulo i {
    color: var(--newos-cor-perigo);
}

.painel-indicador.aviso {
    border-left-color: var(--newos-cor-alerta);
    background-color: color-mix(in srgb, var(--newos-cor-alerta) 8%, var(--newos-cor-superficie));
}

.painel-indicador.aviso .painel-indicador-rotulo i {
    color: var(--newos-cor-alerta);
}

.painel-indicador.positivo {
    border-left-color: var(--newos-cor-sucesso);
}

.painel-indicador.positivo .painel-indicador-rotulo i {
    color: var(--newos-cor-sucesso);
}

/* Topo dos quadros: título com a explicação logo abaixo; "Ver todos" à direita. */
.painel-cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.painel-cartao-titulo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.painel-cartao-detalhe {
    font-size: .75rem;
    font-weight: 400;
    opacity: .85;
}

.painel-cartao-link {
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Âncora "Precisa de atenção" não fica escondida atrás da barra do topo. */
#painel-atencao {
    scroll-margin-top: 5rem;
}

.painel-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin-bottom: .5rem;
    font-size: .8125rem;
}

.painel-chave {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .4rem;
    border-radius: 3px;
    vertical-align: -1px;
}

.painel-chave-1 {
    background-color: var(--painel-serie-1);
}

.painel-chave-2 {
    background-color: var(--painel-serie-2);
}

.painel-legenda-saldo {
    margin-left: auto;
    font-weight: 600;
}

/* O gráfico ocupa a sobra do quadro (que acompanha a altura do vizinho na linha) e
   nunca fica menor que a altura mínima. O canvas é absoluto para não empurrar a caixa. */
.painel-cartao-grafico {
    display: flex;
    flex-direction: column;
}

.painel-grafico {
    position: relative;
    flex: 1 1 auto;
    min-height: clamp(14rem, 30vw, 18rem);
}

.painel-grafico canvas {
    position: absolute;
    inset: 0;
}

/* Nas telas médias e grandes a posição dos quadros fecha as linhas sem buraco;
   no celular vale a ordem do HTML, que é a de prioridade. */
@media (min-width: 992px) {
    .painel-grade > * {
        order: var(--ordem-medio, 0);
    }
}

@media (min-width: 1200px) {
    .painel-grade > * {
        order: var(--ordem-grande, 0);
    }
}

.painel-tabela summary {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--bs-link-color);
    cursor: pointer;
}

.painel-tabela table {
    font-variant-numeric: tabular-nums;
}

/* Barras horizontais em HTML: comprimento proporcional ao maior valor da lista. */
.painel-barras {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.painel-barra {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 2.25rem;
    align-items: center;
    gap: .75rem;
    padding: .35rem .5rem;
    border-radius: calc(var(--newos-raio) * .66);
    color: var(--newos-cor-texto);
    text-decoration: none;
}

a.painel-barra:hover {
    color: var(--newos-cor-texto);
    background-color: var(--painel-realce);
}

.painel-barra-rotulo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.painel-barra-rotulo > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-barra-nome {
    font-weight: 600;
}

.painel-barra-alerta {
    font-size: .75rem;
    color: var(--painel-tinta-2);
}

.painel-barra-alerta i {
    color: var(--newos-cor-perigo);
}

.painel-barra-trilho {
    display: block;
    height: 1rem;
}

.painel-barra-valor {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background-color: var(--painel-serie-1);
}

.painel-barra-numero {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Listas de pendências: título e detalhe à esquerda, prazo e situação à direita. */
.painel-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1rem;
    color: var(--newos-cor-texto);
    text-decoration: none;
}

.painel-item:hover {
    color: var(--newos-cor-texto);
    background-color: var(--painel-realce);
}

.painel-item-principal {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.painel-item-titulo,
.painel-item-detalhe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-item-titulo {
    font-weight: 600;
}

.painel-item-detalhe {
    font-size: .8rem;
    color: var(--painel-tinta-2);
}

.painel-item-lateral {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-end;
    gap: .3rem;
    text-align: right;
}

.painel-item-valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.painel-selo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--newos-cor-texto) 8%, var(--newos-cor-superficie));
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.painel-selo i {
    color: var(--painel-tinta-2);
}

.painel-selo.critico {
    background-color: color-mix(in srgb, var(--newos-cor-perigo) 14%, var(--newos-cor-superficie));
}

.painel-selo.critico i {
    color: var(--newos-cor-perigo);
}

.painel-selo.aviso {
    background-color: color-mix(in srgb, var(--newos-cor-alerta) 18%, var(--newos-cor-superficie));
}

.painel-selo.aviso i {
    color: color-mix(in srgb, var(--newos-cor-alerta) 75%, var(--newos-cor-texto));
}

.painel-selo.info {
    background-color: color-mix(in srgb, var(--newos-cor-info) 14%, var(--newos-cor-superficie));
}

.painel-selo.info i {
    color: var(--newos-cor-info);
}

.painel-vazio {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem 0;
    color: var(--painel-tinta-2);
}

.painel-vazio i {
    font-size: 1.25rem;
}

.painel-vazio .fa-circle-check {
    color: var(--newos-cor-sucesso);
}

@media (max-width: 575.98px) {
    .painel-atalhos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .painel-indicador {
        padding: .75rem;
    }

    .painel-legenda-saldo {
        width: 100%;
        margin-left: 0;
    }

    .painel-barra {
        grid-template-columns: minmax(0, 45%) minmax(0, 1fr) 2rem;
        gap: .5rem;
        padding-inline: .25rem;
    }

    .painel-item {
        padding-inline: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .painel-indicador {
        transition: none;
    }

    a.painel-indicador:hover {
        transform: none;
    }
}

/* -------------------------------------------------- Busca global */
#formPesquisaGlobal {
    position: relative;
}

.resultado-pesquisa {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}

/* -------------------------------------------------- Documentos */
.total-documento {
    font-size: 1.25rem;
    font-weight: 600;
}

/* -------------------------------------------------- Checklist fotográfico */
#checklistsFotograficos,
.checklist-os,
.foto-checklist,
.item-checklist,
.anexo-avulso {
    scroll-margin-top: 1rem;
}

/* Legenda do anexo avulso: o texto é o próprio botão que abre o editor. */
.legenda-anexo > summary {
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    list-style: none;
}

.legenda-anexo > summary::-webkit-details-marker {
    display: none;
}

.legenda-anexo > summary > span {
    min-width: 0;
}

.legenda-anexo > summary:hover .fa-pen,
.legenda-anexo[open] > summary .fa-pen {
    color: var(--bs-primary) !important;
}

.resumo-checklist .progresso-checklist {
    min-width: 180px;
}

.resumo-checklist .progress,
.checklist-os .progresso-cartao {
    height: .5rem;
}

.foto-checklist.pendente {
    border-style: dashed;
    border-color: var(--bs-warning);
}

.foto-checklist-imagem {
    position: relative;
    height: 150px;
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: var(--bs-tertiary-bg);
}

.foto-checklist-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A foto de exemplo fica esmaecida para não ser confundida com a foto registrada. */
.foto-checklist-imagem img.exemplo {
    opacity: .55;
    filter: grayscale(.6);
}

.foto-checklist-imagem .sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-secondary-color);
}

.foto-checklist-imagem .selo-foto {
    position: absolute;
    top: .5rem;
    left: .5rem;
}

/* Etiqueta sobre a imagem: fundo escuro translúcido legível sobre qualquer foto. */
.foto-checklist-imagem .rotulo-exemplo {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .1rem .45rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: .7rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(0, 0, 0, .55);
}

.instrucao-foto {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* O campo de arquivo fica escondido atrás do botão: o foco pelo teclado aparece nele. */
.foto-checklist input[type="file"]:focus-visible + label,
.item-checklist input[type="file"]:focus-visible + label {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.lista-pendencias-checklist {
    padding-left: 1.1rem;
}

/* -------------------------------------------------- Galeria de fotos (modal) */
.galeria-fotos .galeria-titulo {
    min-width: 0;
}

/* Fundo escuro fixo: a foto aparece igual no tema claro e no escuro. */
.galeria-fotos .galeria-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(78vh, 900px);
    background-color: #111;
}

.galeria-fotos .galeria-imagem {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    /* O tema dá margem aos modais no celular; em tela cheia ela empurraria a galeria para fora. */
    .galeria-fotos .modal-dialog {
        margin: 0;
    }

    /* Em tela cheia, a foto ocupa tudo abaixo do cabeçalho do modal. */
    .galeria-fotos .galeria-slide {
        height: calc(100vh - 64px);
        height: calc(100dvh - 64px);
    }
}

/* Cadastro do checklist: miniatura da foto de exemplo de cada item. */
.previa-exemplo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    height: 110px;
    overflow: hidden;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
}

.previa-exemplo a,
.previa-exemplo img {
    display: block;
    width: 100%;
    height: 100%;
}

.previa-exemplo img {
    object-fit: cover;
}

.item-checklist .numero-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-body-bg);
    background-color: var(--bs-secondary-color);
}

/* No topo do card, o número usa as cores dele: círculo na cor do texto, número na do fundo. */
.card-header .numero-item {
    color: var(--newos-cabecalho-fundo, var(--bs-body-bg));
    background-color: var(--newos-cabecalho-texto, var(--bs-secondary-color));
}

/* -------------------------------------------------- Orçamento */
.cenario-orcamento {
    scroll-margin-top: 1rem;
}

/* Cada cenário tem uma cor da paleta de destaque, cheia no topo e no número, repetida
   no cartão do resumo: um cenário não se confunde com o outro. */
.cenario-orcamento,
.resumo-cenario {
    --cor-cenario: var(--newos-destaque-1);
}

.cor-cenario-2 { --cor-cenario: var(--newos-destaque-2); }
.cor-cenario-3 { --cor-cenario: var(--newos-destaque-3); }
.cor-cenario-4 { --cor-cenario: var(--newos-destaque-4); }
.cor-cenario-5 { --cor-cenario: var(--newos-destaque-5); }
.cor-cenario-6 { --cor-cenario: var(--newos-destaque-6); }

/* O topo do cenário usa a cor dele, qualquer que seja o estilo escolhido para os outros
   cards: basta trocar as variáveis que o .card-header do tema.css já lê. */
.cenario-orcamento > .card-header {
    --newos-cabecalho-fundo: var(--cor-cenario);
    --newos-cabecalho-texto: #fff;
    --newos-cabecalho-acento: #fff;
    --newos-cabecalho-icone: currentColor;
    --newos-cabecalho-destaque: none;
}

/* Sobre a cor cheia, o número inverte: círculo branco com o número na cor do cenário. */
.cenario-orcamento > .card-header .numero-cenario,
.resumo-cenario .numero-cenario {
    color: var(--cor-cenario);
    background-color: #fff;
}

.numero-cenario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    margin-right: .4rem;
    border-radius: 999px;
    color: #fff;
    background-color: var(--cor-cenario, var(--newos-destaque-1));
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: .1em;
}

/* O cenário aprovado ganha contorno verde; os outros ficam de registro, esmaecidos.
   .card no seletor: o tema.css, carregado depois, redefine a borda de todo .card. */
.card.cenario-orcamento.aprovado {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 1px var(--bs-success);
}

.cenario-orcamento.descartado {
    opacity: .7;
}

.cenario-orcamento .titulo-cenario {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Resumo para comparar os cenários: um cartão por cenário, lado a lado. */
.resumo-cenarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .5rem;
}

/* Cada cartão é um card em miniatura: a faixa de cima na cor cheia do cenário. */
.resumo-cenario {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 0 .75rem .5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: inherit;
    text-decoration: none;
    background-color: var(--newos-cor-superficie);
    box-shadow: var(--newos-sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}

.resumo-cenario:hover,
.resumo-cenario:focus-visible {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 .35rem .85rem rgba(0, 0, 0, .15);
}

.resumo-cenario.aprovado {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 1px var(--bs-success);
}

@media (prefers-reduced-motion: reduce) {
    .resumo-cenario {
        transition: none;
    }

    .resumo-cenario:hover,
    .resumo-cenario:focus-visible {
        transform: none;
    }
}

.resumo-cenario .nome {
    margin: 0 -.75rem .35rem;
    padding: .4rem .75rem;
    color: #fff;
    background-color: var(--cor-cenario);
    font-size: .85rem;
    font-weight: 600;
}

.resumo-cenario .valor {
    font-size: 1.15rem;
    font-weight: 600;
}

.resumo-cenario .detalhe {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Lista da busca de serviço ou produto, presa ao campo. */
.lista-busca-item {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
}

.editar-item-cenario {
    background-color: var(--bs-tertiary-bg);
}

.form-desconto-cenario .campo-desconto {
    width: 7rem;
}

/* Totais do cenário: rótulo à esquerda, valor à direita. */
.totais-cenario > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
}

.totais-cenario dt {
    font-weight: normal;
}

.totais-cenario dd {
    margin: 0;
    white-space: nowrap;
}

.totais-cenario .total {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 1.05rem;
    font-weight: 600;
}

.totais-cenario .total dt {
    font-weight: 600;
}

/* Réplica: os itens ficam recuados sob o cenário a que pertencem. */
.itens-replica {
    margin: .25rem 0 0 1.75rem;
}

/* -------------------------------------------------- Impressão */
@media print {
    .d-print-none {
        display: none !important;
    }

    body {
        margin-bottom: 0;
    }

    .container-fluid {
        max-width: 100%;
    }
}

/* -------------------------------------------------- Select2 no Bootstrap 5 */
.select2-container .select2-selection--single {
    height: calc(1.5em + .75rem + 2px);
}


/* Menu do botão de impressão: nome e descrição de cada documento, sem estourar a largura. */
.menu-impressao {
    min-width: 19rem;
    max-width: 24rem;
}

.menu-impressao .dropdown-item {
    white-space: normal;
}

/* Botão dividido (Imprimir + seta). No celular o tema empilha os grupos de botões;
   este continua lado a lado, com a seta encostada no botão. */
@media (max-width: 767.98px) {
    .btn-group.botao-dividido {
        flex-direction: row;
        width: 100%;
    }

    .btn-group.botao-dividido > .btn {
        width: auto;
    }

    .btn-group.botao-dividido > .btn:first-child {
        flex: 1 1 auto;
        border-radius: var(--newos-raio) 0 0 var(--newos-raio) !important;
    }

    .btn-group.botao-dividido > .dropdown-toggle-split {
        flex: 0 0 auto;
        padding-left: .9rem;
        padding-right: .9rem;
        border-radius: 0 var(--newos-raio) var(--newos-raio) 0 !important;
    }
}

/* Contexto da empresa junto à pesquisa na barra superior. */
.seletor-empresa-topo .empresa-topo-nome {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.navbar-nav .seletor-empresa-topo .empresa-topo-opcoes {
    position: absolute;
    width: max-content;
    min-width: min(260px, calc(100vw - 32px));
    max-width: min(360px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
}
.empresa-topo-opcoes .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
    .seletor-empresa-topo .empresa-topo-nome { max-width: 110px; }
}

/* Ações do documento (OS, orçamento, venda) no celular: duas por linha, em vez de uma
   coluna de botões que empurra o formulário para baixo da primeira tela. */
@media (max-width: 767.98px) {
    .acoes-documento {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .acoes-documento > .btn,
    .acoes-documento > form,
    .acoes-documento > form > .btn,
    .acoes-documento > .btn-group {
        width: 100%;
        min-width: 0;
    }

    .acoes-documento .btn {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* -------------------------------------------------- Portal do cliente */
/* Botão do menu no celular com a cor do texto da barra (o ícone padrão do Bootstrap é fixo). */
.navbar-newos .navbar-toggler {
    color: var(--newos-cor-navbar-texto);
    border-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 35%, transparent);
}

/* A barra do portal tem a cor do menu, escura por definição: entra a logo branca. */
.portal-navbar .navbar-brand .marca-logo-clara {
    display: none;
}

.portal-navbar .navbar-brand .marca-logo-escura {
    display: inline-block;
}

.navbar-newos .nav-link.active {
    font-weight: 600;
    background-color: color-mix(in srgb, var(--newos-cor-navbar-texto) 14%, transparent);
    border-radius: var(--newos-raio);
}

@media (max-width: 991.98px) {
    .navbar-newos .navbar-collapse .nav-link {
        padding-inline: .75rem;
    }
}

.min-w-0 {
    min-width: 0;
}

/* Calendário no celular: barra de navegação compacta, sem estourar a largura. */
@media (max-width: 575.98px) {
    .fc .fc-toolbar {
        gap: .5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.05rem;
    }

    .fc .fc-button {
        padding: .3rem .55rem;
        font-size: .85rem;
    }
}

/* Celular: menu, empresa, sol/lua, idioma e usuário cabem numa linha só. */
@media (max-width: 575.98px) {
    .barra-topo .navbar-nav.gap-2 {
        gap: .25rem !important;
    }

    .seletor-empresa-topo .empresa-topo-nome { max-width: 88px; }

    .barra-topo .navbar-nav .alternador-tema {
        margin: .25rem;
    }
}

/* -------------------------------------------------- Revisão de texto com IA */
/* Rótulo do campo e o botão "Revisar com IA" na mesma linha. */
.revisao-ia-rotulo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.revisao-ia-botao {
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.revisao-ia .revisao-ia-cabecalho-painel {
    min-height: 31px;
}

.revisao-ia .revisao-ia-painel {
    min-height: 180px;
    max-height: 45vh;
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    /* Superfície, e não --bs-body-bg: no tema, esta é a cor de fundo da página. */
    background: var(--newos-cor-superficie, var(--bs-body-bg));
    overflow-wrap: anywhere;
}

.revisao-ia .revisao-ia-original {
    background: var(--bs-tertiary-bg);
}

.revisao-ia .revisao-ia-texto-simples,
.revisao-ia textarea.revisao-ia-painel {
    white-space: pre-wrap;
}

.revisao-ia textarea.revisao-ia-painel {
    width: 100%;
    resize: vertical;
}

.revisao-ia .revisao-ia-painel p:last-child {
    margin-bottom: 0;
}

.revisao-ia .revisao-ia-sugestao[contenteditable="true"]:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

.revisao-ia .revisao-ia-vazio {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
}

/* Cobre a sugestão enquanto a fila trabalha, sem esconder o texto anterior. */
.revisao-ia .revisao-ia-carregando {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border-radius: var(--bs-border-radius);
    background: color-mix(in srgb, var(--newos-cor-superficie, var(--bs-body-bg)) 82%, transparent);
    color: var(--bs-body-color);
}

.revisao-ia .revisao-ia-carregando[hidden] {
    display: none;
}

.revisao-ia .revisao-ia-contador {
    min-width: 4.5rem;
}

/* No celular o modal ocupa a tela e os painéis empilham: menos altura mínima para caber mais. */
@media (max-width: 991.98px) {
    .revisao-ia .revisao-ia-painel,
    .revisao-ia .revisao-ia-vazio {
        min-height: 110px;
    }
}

/* Configuração: as IAs pagas ficam num cartão que abre e fecha; abre sozinho quando a unidade usa alguma. */
.ias-pagas > summary {
    cursor: pointer;
}

/* Configuração: cada linha da fila de modelos. */
.fila-ia-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
    background: var(--newos-cor-superficie, var(--bs-body-bg));
}

.fila-ia-item .fila-ia-posicao {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    font-size: .875rem;
}

.fila-ia-item.desativado {
    opacity: .6;
}

.fila-ia-item .fila-ia-modelo {
    flex: 1 1 10rem;
    min-width: 10rem;
}

/* O tema empilha grupos de botões e estica botões no celular; aqui a linha continua compacta. */
@media (max-width: 767.98px) {
    .fila-ia-item.d-flex.gap-2 > .btn {
        width: auto;
    }

    .fila-ia-item .btn-group,
    .revisao-ia .btn-group {
        flex-direction: row;
        width: auto;
    }

    .fila-ia-item .btn-group > .btn,
    .revisao-ia .btn-group > .btn {
        width: auto;
        border-radius: 0 !important;
    }

    .fila-ia-item .btn-group > .btn:first-child,
    .revisao-ia .btn-group > .btn:first-child {
        border-radius: var(--newos-raio) 0 0 var(--newos-raio) !important;
    }

    .fila-ia-item .btn-group > .btn:last-child,
    .revisao-ia .btn-group > .btn:last-child {
        border-radius: 0 var(--newos-raio) var(--newos-raio) 0 !important;
    }
}