/**
 * ProntuGrana — CSS próprio do app, carregado DEPOIS do tema Diamond (template
 * logado e template-nao-logado). Regra da casa, herdada do InspX: o visual vem
 * do tema; aqui só entra o que o tema não resolve ou resolve errado — cada
 * bloco diz por quê.
 *
 * Marca (combina com a landing, em tom suave): roxinho #8544D0 / #6B30AE, tema Diamond girado do azul
 * para o roxo com menos saturação (ferramentas/gira-cor-do-tema.py), e âmbar da moeda do logo (#F59E0B).
 * Herdado do LivroCaixa (laranja), convertido em 2026-10-29.
 * Nada de hex solto nas telas: usar as variáveis abaixo.
 */

:root {
    --prontugrana-roxo-escuro: #6B30AE;
    --prontugrana-roxo-medio: #8544D0;
    --prontugrana-ambar: #F59E0B;
    --prontugrana-borda: #e5e7eb;
}

/* ========== MENSAGENS ========== */
/* p:message por campo renderiza um <div class="ui-message"> vazio quando não
   há erro; qualquer borda/margem aplicada a ele vira "sujeira" embaixo de todo
   campo. :empty não casa com mensagem de verdade (tem <span> filho). */
.ui-message:empty {
    display: none;
    border: none;
    margin: 0;
    padding: 0;
}

/* ========== AUTOCOMPLETE COM DROPDOWN EM LARGURA CHEIA ========== */
/* As telas usam p:autoComplete dropdown="true" com styleClass e
   inputStyleClass "w-full". O w-full do PrimeFlex é width:100% !important, e
   o span do componente é inline-block: o input ocupa a largura toda e o botão
   do dropdown QUEBRA para a linha de baixo (visto em Veículo, Rota, Tabela de
   frete). Como flex, o input cede exatamente a largura do botão. */
.ui-autocomplete.ui-autocomplete-dd.w-full {
    display: flex;
}

.ui-autocomplete.ui-autocomplete-dd.w-full > .ui-autocomplete-input {
    flex: 1 1 0;
    min-width: 0;
}

/* Mesmo problema no p:datePicker showIcon com "w-full": o <input> fica com a
   largura default (~193px) e, em coluna estreita (md:col-2, Relatórios), o
   botão do calendário quebra para baixo e o campo invade a coluna vizinha. */
.ui-calendar.ui-trigger-calendar.w-full {
    display: flex;
}

.ui-calendar.ui-trigger-calendar.w-full > .ui-inputfield {
    flex: 1 1 0;
    min-width: 0;
}

/* p:inputNumber com styleClass="w-full" alarga só o <span> do componente; o
   <input> de dentro fica com a largura default e transborda sobre a coluna
   vizinha (Ano de fabricação × Ano do modelo, no Veículo). */
.ui-inputnumber.w-full > .ui-inputfield {
    width: 100%;
}

/* ========== LIGA/DESLIGA EMBAIXO DO RÓTULO ========== */
/* O PrimeFlex põe ".field > label" como inline-block; os outros campos descem
   porque o ui-fluid os estica a 100%, mas o p:toggleSwitch tem largura fixa e
   cabia ao lado do rótulo (e do "?"). Em bloco, ele desce como os demais. O
   "Só vencidos" da barra de botões não está em .field e fica com o texto ao lado. */
.field > .ui-toggleswitch {
    display: block;
}

/* ========== BOTÕES DE ESCOLHA DO MESMO TAMANHO ========== */
/* p:selectOneButton styleClass="botoes-iguais" (repetição do lançamento): o
   PrimeFaces dá 33.3% a cada botão, mas inline-block, então o rótulo que quebra
   em duas linhas fica mais alto e o curto ("Único") desce pela linha de base.
   Em flex os botões dividem a largura por igual e esticam à altura do maior.
   Até 640 px o Diamond empilha os botões: em coluna, cada um com a largura toda. */
body .ui-selectonebutton.botoes-iguais {
    display: flex;
    width: 100%;
}
body .ui-selectonebutton.botoes-iguais > .ui-button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
}
@media (max-width: 640px) {
    body .ui-selectonebutton.botoes-iguais {
        flex-direction: column;
    }
    body .ui-selectonebutton.botoes-iguais > .ui-button {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* <fieldset> tem min-width:min-content por padrão do navegador: uma tabela
   larga dentro dele (p:dataTable responsiveLayout="scroll") alarga o fieldset
   e a PÁGINA inteira, em vez de rolar só a tabela — o conteúdo passava por
   baixo do menu lateral (Tabela de frete). */
.fieldset_group_fields {
    min-width: 0;
}

/* Sem estilo, o <fieldset> dos formulários ficava com a borda "groove" cinza do
   navegador. Mesmo visual do .card do Diamond (layout-*.css); --surface-card
   vem do tema PrimeFaces e acompanha os esquemas light/dim/dark. */
.fieldset_group_fields {
    margin: 0 0 2rem 0;
    padding: 1.25rem;
    border: 0 none;
    border-radius: 4px;
    background: var(--surface-card, #ffffff);
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.fieldset_group_fields:last-child {
    margin-bottom: 0;
}

/* Dentro de aba ou diálogo o painel já é a superfície branca (como no
   Diamond): card dentro dele viraria moldura dupla. */
.ui-tabs-panel .fieldset_group_fields,
.ui-dialog-content .fieldset_group_fields {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ========== DIALOG: PRIMEFACES 16 × DIAMOND 15 ========== */
/* No PF 16 o .ui-dialog virou a camada de rolagem (tela inteira) e a caixa
   passou para o .ui-dialog-box. O Diamond 15 ainda estiliza o .ui-dialog como a
   caixa: sem isto a camada fica do tamanho da caixa e o JS posiciona a caixa em
   relação a ela, fora da tela. Estrutura copiada do tema saga do PF 16; a
   sombra/raio são os do Diamond. Remover quando vier o Diamond para o PF 16. */
body.ui-dialog-open {
    position: relative;
}

body .ui-dialog {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* a camada cobre a tela: em dialog não modal ela não pode engolir os cliques */
    pointer-events: none;
}

body .ui-dialog.ui-overflow-hidden,
body .ui-dialog.ui-dialog-absolute,
body .ui-dialog.ui-dialog-fitviewport {
    overflow-y: hidden;
}

body .ui-dialog .ui-dialog-box {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 0 none;
    border-radius: 4px;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
}

body .ui-dialog.ui-dialog-absolute .ui-dialog-box {
    position: absolute;
}

/* O width do <p:dialog> vai para a caixa (o `style` vai para a camada de tela cheia:
   um diálogo com style="width:.." abria encostado na esquerda). Em tela estreita a
   caixa não passa da largura útil da camada. */
body .ui-dialog .ui-dialog-box {
    max-width: 100%;
}

/* ========== ROLAGEM DO MENU LATERAL ========== */
/* O scroll do menu não passa para a página quando chega no fim, e a barra fica
   fina e discreta (cinza neutro serve nos esquemas claro e escuro). A posição é
   guardada/restaurada pelo layout.js (sessionStorage) e por um script logo após o
   menu no sidebar.xhtml, para não aparecer no topo e "pular" a cada página. */
.layout-sidebar .layout-menu-container {
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(127, 127, 127, 0.35) transparent;
}

/* Escondido só até o layout.js restaurar a posição (no máximo 1,5 s): sem isto o
   primeiro quadro pintado mostra o menu no topo e ele "pula" logo depois. */
html.menu-restaurando .layout-sidebar .layout-menu-container {
    visibility: hidden;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar {
    width: 6px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-track {
    background: transparent;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb {
    background: rgba(127, 127, 127, 0.35);
    border-radius: 3px;
}

.layout-sidebar .layout-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(127, 127, 127, 0.6);
}

/* ========== BARRA DE BOTÕES (Novo / Salvar / Cancelar) ========== */
/* Só layout: os botões usam o visual nativo do tema. Serve para botões que
   precisam ficar FORA de um .grid.ui-fluid — dentro dele o tema estica todo
   botão a width:100% (achado do InspX na tela de denúncia). */
.prontugrana-button-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.prontugrana-button-bar .ui-button {
    margin: 0 !important;
}

/* ========== AJUDA CONTEXTUAL ========== */
/* "?" de campo (<prontugrana:ajuda>). Classe em vez de style inline para ter foco
   visível: o ícone é focável por Tab/toque de propósito. */
.hint-ajuda {
    color: #9ca3af;
    font-size: .9rem;
    margin-left: 5px;
    cursor: help;
    vertical-align: middle;
    border-radius: 50%;
}

.hint-ajuda:hover {
    color: var(--primary-color);
}

.hint-ajuda:focus-visible {
    color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.hint-ajuda-balao .ui-tooltip-text {
    max-width: 340px;
    line-height: 1.45;
}

/* Pastilha "Ajuda" ao lado do <h2> (<prontugrana:ajudaPagina>). Tamanho próprio
   porque mora dentro do <h2> e herdaria a fonte do título. */
.ajuda-pagina-gatilho {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    padding: .15rem .55rem;
    border: 1px solid var(--surface-300, #d1d5db);
    border-radius: 999px;
    background: var(--surface-0, #fff);
    color: #6b7280;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

.ajuda-pagina-gatilho:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.ajuda-pagina-gatilho:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* A largura vai no CONTEÚDO: o widget OverlayPanel escreve max-width inline
   ao posicionar, e inline ganha de classe. */
.ajuda-pagina-painel .ui-overlaypanel-content {
    width: min(480px, 88vw);
    max-height: 65vh;
    overflow-y: auto;
    padding: 1rem 1.15rem;
}

.ajuda-pagina-titulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: .6rem;
    padding-right: 1.2rem; /* não passar por baixo do X de fechar */
}

.ajuda-pagina-texto {
    font-size: .86rem;
    line-height: 1.55;
    color: #374151;
}

.ajuda-pagina-texto p { margin: 0 0 .6rem; }
.ajuda-pagina-texto p:last-child { margin-bottom: 0; }
.ajuda-pagina-texto ol,
.ajuda-pagina-texto ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.ajuda-pagina-texto li { margin-bottom: .28rem; }

/* O tema pendura o X de fechar meio para fora do painel; no celular o
   collision="flipfit" encosta o painel na borda e o X fica cortado. O `body`
   é para vencer a especificidade da regra do tema (0,2,1). */
@media (max-width: 600px) {
    body .ajuda-pagina-painel.ui-overlaypanel .ui-overlaypanel-close {
        right: .25rem;
        top: .25rem;
    }

    body .ajuda-pagina-painel.ui-overlaypanel .ajuda-pagina-titulo {
        padding-right: 2.2rem;
    }
}

/* ========== FOCO SÓ PARA QUEM USA TECLADO ========== */
/* O PrimeFaces põe tabindex nas células das listagens e o tema desenha anel
   de foco; como clicar também foca, a célula clicada ficava "selecionada".
   Some só quando o foco não veio do teclado. */
.ui-datatable-data td[role="gridcell"]:focus:not(:focus-visible),
.ui-datatable-data td[role="grid"] [tabindex="0"]:focus:not(:focus-visible) {
    outline: none;
}

body .layout-sidebar .logo:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ========== TELAS PÚBLICAS (template-nao-logado) ========== */
/* O template login-body do tema é um painel estreito à esquerda + uma arte à
   direita. Formulário longo (contato, cadastre-se) não cabe no painel
   estreito: .painel-formulario usa a largura toda e dispensa a arte. */
.login-body .login-wrapper .login-panel.painel-formulario {
    width: 100%;
    max-width: 52rem;
    height: auto;
    margin: 0 auto;
    align-items: stretch;
    text-align: left;
}

.login-body .login-wrapper .login-panel.painel-formulario > * {
    width: 100%;
}

.login-body .login-wrapper .login-panel.painel-formulario > .logo {
    width: auto;
    align-self: center;
}

/* marca ao lado do logo nas telas públicas */
.login-body .login-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--prontugrana-roxo-escuro);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.login-body .login-marca img {
    width: 48px;
    height: 48px;
}

/* O .login-form do tema é um flex em coluna que encolhe até o conteúdo; os
   inputs têm width:85% DELE, então cada campo saía com uma largura (o
   p:password com toggleMask vem embrulhado num <span> que o tema não
   conhece). Largura cheia no form e o mesmo 85%/310px para o wrapper. */
.login-body .login-wrapper .login-panel .login-form {
    width: 100%;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password,
.login-body .login-wrapper .login-panel .login-form > .login-links {
    width: 85%;
    max-width: 310px;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password {
    margin-bottom: 20px;
}

/* Login (fase 1): o formulário é HTML puro postando no /do_login. Sem isto o
   <form> encolhe no flex do painel e os campos ficam estreitos no celular. */
.login-body .login-wrapper .login-panel > form#loginForm {
    width: 100%;
}

.login-body .login-wrapper .login-panel .login-form > input,
.login-body .login-wrapper .login-panel .login-form > button {
    width: 85%;
    max-width: 310px;
    min-height: 44px;
}

.login-body .login-wrapper .login-panel .login-form > .ui-password > input {
    width: 100%;
}

.login-body .login-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -.5rem 0 1.25rem;
    font-size: .9rem;
}

/* ========== TELAS PÚBLICAS: CORES E ARTE (paleta da landing) ==========
   Paleta da landing (landing-prontugrana.css): roxo #7C3AED, roxo escuro #6D28D9, borda #DDD6FE,
   destaque âmbar claro #FDE68A. Os seletores começam em body.login-body e usam o caminho completo
   (.login-wrapper .login-panel p > a…) porque o layout-light.css do Diamond vem depois deste arquivo na
   página e tem regras de mesma ou maior especificidade: sem isso o bg-login.jpg (textura azul) e o azul
   padrão dos botões venciam. Medido no navegador em 2026-10-08. */

body.login-body {
    background: #ffffff;
    color: #1f2937;
}

/* painel da arte (direita, a partir de 993px): degradê do herói da landing */
body.login-body .login-wrapper .login-image {
    background-color: #7C3AED;
    background-image: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

body.login-body .login-wrapper .login-image .login-image-content > h1,
body.login-body .login-wrapper .login-image .login-image-content h3,
body.login-body .login-wrapper .login-image .image-footer > p {
    color: #ffffff;
}

body.login-body .login-image .login-image-content .login-destaques {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

body.login-body .login-image .login-image-content .login-destaques li {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .7rem;
    color: #ffffff;
    font-size: 1.05rem;
}

body.login-body .login-image .login-image-content .login-destaques .pi {
    color: #FDE68A;
}

/* painel do formulário: marca, títulos, textos, links e campos com a cor da landing */
body.login-body .login-wrapper .login-panel .login-marca {
    color: #6D28D9;
}

body.login-body .login-wrapper .login-panel h2 {
    color: #1f2937;
}

body.login-body .login-wrapper .login-panel p {
    color: #4b5563;
}

body.login-body .login-wrapper .login-panel p > a,
body.login-body .login-wrapper .login-panel .login-links a {
    color: #6D28D9;
}

body.login-body .login-wrapper .login-panel p > a:hover,
body.login-body .login-wrapper .login-panel .login-links a:hover {
    color: #7C3AED;
}

body.login-body .login-wrapper .login-panel input:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .2);
}

/* formulário direto no painel (recuperar e redefinir senha): ocupa a largura do painel, como o loginForm */
body.login-body .login-wrapper .login-panel > form {
    width: 100%;
}

/* botão de contorno (Voltar): o ghost da landing (lp-botao-contorno), em roxo sobre branco */
body.login-body .login-wrapper .login-panel .ui-button-outlined {
    background: #ffffff;
    border: 1px solid #7C3AED;
    color: #6D28D9;
    border-radius: 10px;
}

body.login-body .login-wrapper .login-panel .ui-button-outlined:hover {
    background: #F5F3FF;
    border-color: #6D28D9;
}

/* dica embaixo do título (ex.: regra da senha na redefinição): texto secundário com respiro até o campo */
body.login-body .login-wrapper .login-panel small {
    display: block;
    max-width: 310px;
    margin: 0 auto .9rem;
    color: #4b5563;
    font-size: .85rem;
    line-height: 1.45;
}

/* botão principal (Entrar, Solicitar, Salvar, Enviar): o mesmo do lp-botao-roxo da landing */
body.login-body .login-wrapper .login-panel .ui-button:not(.ui-button-flat):not(.ui-button-outlined) {
    background: #7C3AED;
    border: 1px solid #7C3AED;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3);
}

body.login-body .login-wrapper .login-panel .ui-button:not(.ui-button-flat):not(.ui-button-outlined):hover {
    background: #6D28D9;
    border-color: #6D28D9;
}

/* ========== IMPRESSÃO ========== */
@media print {
    .layout-sidebar,
    .layout-topbar,
    .layout-footer,
    .hint-ajuda,
    .ajuda-pagina-gatilho {
        display: none;
    }

    .layout-content-wrapper {
        margin: 0;
    }
}

/* ========== FASE 1: INÍCIO, ESCOLHA DE EMPRESA, TOPO ========== */
/* Atalhos grandes (alvo de toque confortável no celular) na tela inicial e na
   escolha de empresa: o público principal usa o sistema pelo celular. */
.atalho {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: var(--surface-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    color: var(--text-color, #1f2937);
    font-weight: 600;
    text-decoration: none;
    border-left: 4px solid var(--prontugrana-roxo-escuro);
}

.atalho:hover,
.atalho:focus-visible {
    box-shadow: 0 4px 12px rgba(107, 48, 174, .18);
}

.atalho > .pi {
    font-size: 1.5rem;
    color: var(--prontugrana-roxo-escuro);
}

.atalho.escolha {
    flex-wrap: wrap;
}

.atalho.escolha small {
    width: 100%;
    margin-left: 2.25rem;
    font-weight: 400;
    color: var(--text-color-secondary, #6b7280);
}

.atalho.escolha-atual {
    border-left-color: var(--prontugrana-ambar);
}

.escolha-escritorio {
    margin: 1.5rem 0 .5rem;
    color: var(--prontugrana-roxo-escuro);
}

.inicio-contexto,
.inicio-em-breve {
    color: var(--text-color-secondary, #6b7280);
}

/* Onde o usuário trabalha, no topo: é também o botão de trocar de empresa.
   No celular o nome longo corta com reticências em vez de empurrar o topo. */
.layout-topbar .onde-trabalha {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 55vw;
    color: inherit;
    text-decoration: none;
}

.layout-topbar .onde-trabalha span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.layout-topbar .livro-trabalho {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: 1rem;
}

.layout-topbar .onde-trabalha.livro-trabalho {
    max-width: 30vw;
}

.livro-trabalho-opcoes .livro-trabalho-atual {
    background: var(--prontugrana-roxo, #7C3AED);
    border-color: var(--prontugrana-roxo, #7C3AED);
    color: #fff;
}

.layout-topbar .livro-trabalho span {
    max-width: 20vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* TOPO NO CELULAR E NO TABLET (abaixo de 992 px, onde o Diamond troca o menu fixo pelo sobreposto).
   O Diamond põe o topo em duas linhas (7.125rem: empresa e livro em cima, lupa e perfil embaixo) e
   deixa o botão do menu encolher: com nomes longos ele ficava com 0 px e o menu não abria. Aqui o topo
   é uma linha só, o botão do menu não encolhe e quem cede são os nomes da empresa e do livro, com
   reticências. O logo do celular sai (a marca está no alto do menu lateral). Alvos de toque de 40 px.
   O `body` é porque o layout-light.css entra depois deste arquivo na página e vence no empate. */
@media screen and (max-width: 991px) {
    body .layout-wrapper .layout-topbar {
        height: 3.5rem;
        flex-wrap: nowrap;
        padding: 0 .5rem;
        gap: .25rem;
    }
    body .layout-wrapper .layout-topbar .topbar-left {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
        justify-content: flex-start;
        gap: .25rem;
    }
    body .layout-wrapper .layout-topbar .menu-button {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    body .layout-wrapper .layout-topbar .mobile-logo {
        display: none;
    }
    body .layout-wrapper .layout-topbar .onde-trabalha {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none;
        min-height: 40px;
        padding: 0 .25rem;
        margin-left: 0;
    }
    body .layout-wrapper .layout-topbar .onde-trabalha span {
        min-width: 0;
        max-width: none;
    }
    body .layout-wrapper .layout-topbar .onde-trabalha i {
        flex: 0 0 auto;
    }
    body .layout-wrapper .layout-topbar .topbar-right {
        width: auto;
        flex: 0 0 auto;
        padding: 0;
    }
    body .layout-wrapper .layout-topbar .topbar-menu > li {
        margin-left: .25rem;
    }
    body .layout-wrapper .layout-topbar .topbar-menu > li > a,
    body .layout-wrapper .layout-topbar .topbar-menu > li.profile-item > a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        justify-content: center;
    }
    body .layout-wrapper .layout-topbar .topbar-menu > li > ul {
        top: 3rem;
    }
    body .layout-wrapper .layout-content-wrapper {
        padding-top: 3.5rem;
    }
}
/* CAMPOS A 16 PX NO CELULAR E NO TABLET: com menos que isso o Safari do iPhone amplia a página ao focar
   o campo (a trava de zoom do meta viewport escondia isso e impedia quem enxerga mal de ampliar; saiu).
   É um piso que tem de vencer o tema do PrimeFaces, o Diamond e o login, daí o !important. */
@media screen and (max-width: 991px) {
    body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    body textarea,
    body select,
    body .ui-selectonemenu .ui-selectonemenu-label {
        font-size: 16px !important;
    }
}
@media screen and (max-width: 991px) {
    /* O Diamond dá sombra ao menu lateral mesmo fechado (fora da tela, translateX(-100%)): ela vazava
       como uma faixa cinza na borda esquerda do conteúdo. Só tem sombra quando está aberto. */
    body .layout-wrapper:not(.layout-mobile-active) .layout-sidebar {
        box-shadow: none;
    }
    /* links das telas públicas (esqueci a senha, fale com a gente) com área de toque de 40 px */
    body.login-body .login-wrapper .login-panel p > a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}
@media screen and (max-width: 640px) {
    /* No celular o painel das telas públicas não espalha os blocos pela altura toda (o Diamond usa
       space-between em 100vh, o que deixava ~200 px vazios entre o título e os campos do login). Começa do alto,
       e não centralizado, para um formulário mais alto que a tela não perder o topo. */
    body.login-body .login-wrapper .login-panel {
        justify-content: flex-start;
        gap: 1rem;
    }
    /* botões da barra dividem a linha em vez de ficarem empilhados à direita com larguras diferentes */
    .prontugrana-button-bar > .ui-button {
        flex: 1 1 auto;
    }
}
@media screen and (max-width: 640px) {
    /* a seta de "trocar" ocupa espaço que falta ao nome */
    body .layout-wrapper .layout-topbar .onde-trabalha .pi-angle-down {
        display: none;
    }
}
@media screen and (max-width: 576px) {
    body .layout-wrapper .layout-topbar .topbar-menu > li > ul {
        top: 3.5rem;
    }
}

.aviso-livro-de-outro {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    border-left: 4px solid var(--prontugrana-roxo, #7C3AED);
    background: var(--surface-ground);
}

.profile-menu .perfil-papel {
    display: flex;
    flex-direction: column;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--prontugrana-borda);
}

.profile-menu .perfil-papel small {
    color: var(--text-color-secondary, #6b7280);
}

/* registro inativo nas listas */
.registro-inativo {
    color: var(--text-color-secondary, #9ca3af);
}

/* conta dentro do bloco do grupo: recuada para não alinhar com o nome do grupo */
.conta-recuada {
    padding-left: 1.5rem;
}

/* botões de ação da última coluna das listas: não quebram em linhas */
.coluna-acoes {
    white-space: nowrap;
    text-align: right;
}

.usuario-encontrado {
    padding: .6rem 0;
    font-weight: 600;
}

/* mensagem de erro do login (form HTML puro, fora do p:messages) */
.login-erro {
    display: block;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border-radius: 6px;
    background: #fef2f2;
    color: #b91c1c;
}

/* ========== PWA: SEM CONEXÃO E INSTALAR ========== */
/* Aviso de sem conexão por cima de tudo: a tela não funciona offline
   (requisito), então nada de deixar o usuário digitar e perder. */
.aviso-offline {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 24, 39, .6);
}

.aviso-offline[hidden] {
    display: none;
}

.aviso-offline-caixa {
    max-width: 420px;
    width: 100%;
    padding: 2rem 1.5rem;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

.aviso-offline-caixa > .pi {
    font-size: 2.5rem;
    color: var(--prontugrana-ambar);
}

.aviso-offline-caixa button {
    width: 100%;
    min-height: 48px;
}

.tremer {
    animation: tremer .4s;
}

@keyframes tremer {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Convite para instalar: faixa no rodapé, fácil de alcançar com o polegar. Enquanto
   aparece, o body ganha espaço embaixo para a faixa não cobrir o último botão. */
body.com-convite-instalar {
    padding-bottom: 6rem;
}

.instalar-app {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 560px;
    margin: 0 auto;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: var(--prontugrana-roxo-escuro);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.instalar-app[hidden],
.instalar-app [hidden] {
    display: none;
}

.instalar-app > span {
    flex: 1;
}

/* Botão branco com texto roxo, como o "Falar com a gente" da landing. O botão é um <button> cru
   (sem o span interno do PrimeFaces), por isso o espaçamento vem daqui. */
body .instalar-app .ui-button,
body .instalar-app .ui-button:enabled:hover {
    padding: .45rem 1rem;
    border: 1px solid #ffffff;
    border-radius: 6px;
    background: #ffffff;
    color: var(--prontugrana-roxo-escuro);
    font-weight: 600;
    white-space: nowrap;
}

.instalar-app-fechar {
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}

/* ==========================================================================
   LEITURA PELA CÂMERA (fase 3b): QR da NFC-e e código de barras do boleto.
   prontugrana.js marca <html class="sem-camera-barcode"> quando o navegador
   não tem BarcodeDetector: os botões somem, o campo de texto continua.
   ========================================================================== */
.prontugrana-camera-video {
	display: none;
	width: 100%;
	max-width: 320px;
	border-radius: 4px;
	margin-top: 0.5rem;
}

.sem-camera-barcode .prontugrana-camera {
	display: none !important;
}


/* ==== ANÁLISES DO CONTADOR (fase 6): pacote mensal, anual, orçamento, painel e licenças ====
   Cores do catálogo: entradas verde #15803D (como na landing), saídas âmbar #F59E0B (texto mais escuro para ler),
   resultado e saldo roxo escuro #6B30AE, negativo vermelho. Semáforo: verde, âmbar e vermelho; cinza
   quando falta a base do cálculo. */
.analise-secao {
	margin-bottom: 1rem;
}

.analise-secao h4 {
	margin: 0 0 0.75rem;
	color: #6B30AE;
}

.analise-periodo {
	margin: 0.5rem 0 1rem;
	color: #6B30AE;
	font-size: 1.25rem;
}

.analise-cartao {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: 0.75rem 1rem;
	border-left: 4px solid #6B30AE;
	border-radius: 6px;
	background: rgba(107, 48, 174, 0.06);
}

.analise-rotulo {
	color: #6B7280;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.analise-valor {
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* no celular os cartões vêm dois por linha: o valor encolhe um pouco para "R$" e o número ficarem juntos */
@media screen and (max-width: 640px) {
	.analise-cartao {
		padding: 0.6rem 0.7rem;
	}
	.analise-valor {
		font-size: 1.05rem;
	}
}

.analise-entrada {
	color: #15803D;
}

.analise-saida {
	color: #B45309;
}

.analise-resultado {
	color: #6B30AE;
}

.analise-negativo {
	color: #DC2626;
	font-weight: 600;
}

.analise-amarelo-texto {
	color: #B45309;
	font-weight: 600;
}

.analise-comparativo {
	color: #6B7280;
	font-size: 0.8rem;
}

.analise-alertas {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.analise-alerta {
	margin-bottom: 0.3rem;
	padding: 0.4rem 0.75rem;
	border-left: 3px solid #8544D0;
	border-radius: 4px;
	background: rgba(133, 68, 208, 0.08);
}

.analise-alerta-resultado_negativo,
.analise-alerta-saldo_negativo,
.analise-alerta-vencidos {
	border-left-color: #DC2626;
	background: rgba(220, 38, 38, 0.08);
}

.analise-alerta-menor_saldo {
	border-left-color: #F59E0B;
	background: rgba(245, 158, 11, 0.1);
}

.analise-semaforo {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.analise-verde {
	background: #16A34A;
}

.analise-amarelo {
	background: #D97706;
}

.analise-vermelho {
	background: #DC2626;
}

.analise-sem_dados {
	background: #9CA3AF;
}

.analise-numero {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Dinheiro não quebra em duas linhas ("R$" numa, o número na outra): a tabela com coluna de valor
   deixa o table-layout fixed do PrimeFaces, cresce até caber o valor e, se passar da tela, rola
   dentro do próprio bloco (o .ui-datatable-tablewrapper já tem overflow:auto). */
.ui-datatable:has(.analise-numero) table {
	table-layout: auto;
}

/* TABELA LARGA (styleClass="tabela-larga", com tableStyle="min-width:…"): rola de lado dentro do
   bloco com a primeira coluna (empresa, mês) parada, e uma sombra na borda direita avisa que há mais
   colunas. A sombra é só CSS: a camada "local" (branca) anda com o conteúdo e cobre a sombra "scroll"
   quando a rolagem chega ao fim. Por isso as linhas ficam transparentes e só a primeira célula é opaca. */
body .tabela-larga .ui-datatable-tablewrapper {
	background:
		linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff 70%) right center / 2.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center / .9rem 100% no-repeat scroll,
		#ffffff;
}
body .tabela-larga.ui-datatable .ui-datatable-data > tr {
	background: transparent;
}
body .tabela-larga.ui-datatable .ui-datatable-data > tr > td:first-child,
body .tabela-larga.ui-datatable thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}
body .tabela-larga.ui-datatable .ui-datatable-data > tr > td:first-child {
	background: var(--surface-card, #ffffff);
	box-shadow: 1px 0 0 var(--prontugrana-creme-borda, #E3D4F5);
}
@media screen and (max-width: 640px) {
	/* no celular a primeira coluna não toma a tela (a "Empresa" do painel tem width 240) */
	body .tabela-larga.ui-datatable thead th:first-child {
		width: 9rem !important;
	}
	body .tabela-larga.ui-datatable .ui-datatable-data > tr > td:first-child {
		max-width: 9rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* LISTAS EM CARTÕES ATÉ O TABLET. O reflow do PrimeFaces 16 tem o corte fixo em 640 px no
   components.css (o p:dataTable não tem breakpoint); entre 641 e 991 px a lista de 7 a 8 colunas
   cortava valor e botões. Aqui as mesmas regras do reflow valem até 991 px, num cartão compacto: rótulo e
   valor na mesma linha, a caixa de seleção no canto, as ações numa linha. O `body` vence o components.css,
   que entra depois deste arquivo. `so-computador` tira do cartão a coluna que só repete o topo. */
@media screen and (max-width: 991px) {
	body .ui-datatable-reflow thead th,
	body .ui-datatable-reflow tfoot td {
		display: none;
	}
	body .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
		border: 0 none;
	}
	body .ui-datatable-reflow .ui-datatable-data > tr {
		display: block;
		position: relative;
		padding: .4rem 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell]:not(.ui-helper-hidden) {
		box-sizing: border-box;
		display: block;
		float: none;
		clear: none;
		border: 0 none;
		text-align: left !important;
		width: 100% !important;
		padding: .3rem .75rem;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell] .ui-column-title {
		display: inline-block;
		vertical-align: top;
		width: 35%;
		min-width: 0;
		max-width: none;
		margin: 0 .75rem 0 0;
		padding: 0;
		font-weight: 700;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell] .ui-column-title:empty {
		display: none;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell].ui-selection-column {
		position: absolute;
		top: .4rem;
		right: .25rem;
		width: auto !important;
		padding: .3rem .5rem;
		z-index: 1;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell].coluna-acoes {
		display: flex;
		flex-wrap: wrap;
		gap: .25rem;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell].coluna-acoes .ui-button {
		min-height: 40px;
	}
	body .ui-datatable-reflow .ui-datatable-data td[role=gridcell].so-computador {
		display: none;
	}
	/* Tabela larga que também vira cartão (a lista de "Conferir pagamentos"): no cartão não vale a largura
	   mínima da tabela nem a primeira coluna parada. Sem isto o cartão ficava com 72rem e, no celular, só
	   os rótulos apareciam (os valores ficavam fora da tela). A caixa de seleção volta para o canto. */
	body .ui-datatable-reflow.tabela-larga table {
		min-width: 0 !important;
	}
	body .ui-datatable-reflow.tabela-larga .ui-datatable-tablewrapper {
		background: transparent;
	}
	body .ui-datatable-reflow.tabela-larga.ui-datatable .ui-datatable-data > tr > td:first-child {
		position: static;
		max-width: none;
		overflow: visible;
		white-space: normal;
		background: transparent;
		box-shadow: none;
	}
	body .ui-datatable-reflow.tabela-larga.ui-datatable .ui-datatable-data > tr > td.ui-selection-column {
		position: absolute;
		left: auto;
	}
}

.analise-total {
	margin: 0.5rem 0;
}

.analise-calor {
	display: block;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.analise-calor-0 {
	background: transparent;
}

.analise-calor-1 {
	background: rgba(133, 68, 208, 0.12);
}

.analise-calor-2 {
	background: rgba(133, 68, 208, 0.3);
}

.analise-calor-3 {
	background: rgba(107, 48, 174, 0.5);
}

.analise-calor-4 {
	background: rgba(107, 48, 174, 0.8);
	color: #ffffff;
}

/* Ações de cada linha com ícone e texto (leigo não adivinha ícone sem legenda). */
.prontugrana-acao {
	margin: 0.1rem 0.25rem 0.1rem 0;
	padding: 0.2rem 0.5rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Na coluna de ações, os botões com texto quebram para a linha de baixo em tela estreita (celular). */
.coluna-acoes {
	white-space: normal;
}

/* Indicadores do pacote mensal: um cartão por indicador (nome, cor, valor e regra), no celular e no desktop. */
.analise-indicador {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(107, 48, 174, 0.15);
	border-radius: 6px;
}

.analise-indicador-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.analise-indicador-valor {
	color: #6B30AE;
	font-size: 1.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ========== ROTINA DO CONTADOR: PENDÊNCIAS ========== */
/* Cartão de cada lançamento com pergunta: o texto longo quebra dentro do cartão no celular. */
.pendencia {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.pendencia-lancamento,
.pendencia-ultima,
.pendencia-situacao {
    overflow-wrap: anywhere;
}

.pendencia-situacao {
    color: var(--text-color-secondary, #6b7280);
}

/* Checklist do fechamento: a rolagem para ele não o deixa atrás da barra fixa do topo. */
.checklist-fechamento {
    scroll-margin-top: 120px;
}

/* ========== EMPRESA E FUNCIONÁRIO: FORMULÁRIO CURTO ========== */
/* O botão de salvar do lançamento fica à vista no rodapé, também no celular. */
.rodape-acoes {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: .75rem 0;
    background: var(--surface-card, #fff);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .08);
}

/* ========== CAIXA DO DIA: DIFERENÇA EM DESTAQUE ========== */
.destaque-diferenca-texto {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* ========== FOTO DO COMPROVANTE PELO CELULAR (QR code do lançamento) ========== */
.captura-qr {
    display: flex;
    justify-content: center;
    margin: .5rem 0 1rem;
}
.captura-qr svg {
    width: min(240px, 70vw);
    height: auto;
}
.captura-passos {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
}
.captura-passos li {
    margin-bottom: .25rem;
}
.captura-link {
    margin: 0 0 .75rem;
    padding: .5rem;
    border-radius: 6px;
    background: var(--surface-ground, #f4f6f8);
    font-family: monospace;
    font-size: .85rem;
    word-break: break-all;
}
.captura-dica {
    color: var(--text-color-secondary, #5f6b7a);
    font-size: .9rem;
}
.captura-status {
    margin: .75rem 0 0;
}
.captura-encerrado {
    text-align: center;
    padding: 1rem 0;
}


/* ========== ABAS DA TELA (telas irmãs: cartão, obrigações, configuração da empresa) ==========
   Abas só com o texto (o ícone já está no menu) para caber a configuração da empresa, que tem oito. Na tela larga
   quebram de linha em vez de esconder a última; no celular ficam numa linha só, com rolagem lateral. */
.abas-da-tela {
    margin-bottom: 1rem;
}
.abas-da-tela .ui-tabmenu .ui-tabmenu-nav {
    flex-wrap: wrap;
}
.abas-da-tela .ui-tabmenu .ui-tabmenuitem .ui-menuitem-icon {
    display: none;
}
.abas-da-tela .ui-tabmenu .ui-tabmenuitem .ui-menuitem-link {
    padding: 0.75rem 1rem;
}
@media (max-width: 991px) {
    .abas-da-tela .ui-tabmenu .ui-tabmenu-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .abas-da-tela .ui-tabmenu .ui-tabmenuitem {
        flex: 0 0 auto;
    }
}

/* ========== PRESTAÇÃO DE CONTAS (balancete e detalhe por projeto/safra) ========== */
.prestacao-tabela {
    width: 100%;
    border-collapse: collapse;
}
.prestacao-tabela td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--surface-border, #e5e7eb);
}
.prestacao-tabela .prestacao-destaque td {
    font-weight: 600;
}
.prestacao-tabela .prestacao-item {
    padding-left: 1.75rem;
    color: var(--text-color-secondary, #6b7280);
}
.prestacao-percentual {
    color: var(--text-color-secondary, #6b7280);
    font-size: 0.875rem;
}

/* ========== CORES DAS TELAS INTERNAS: ROXINHO SUAVE DA LANDING ========== */
/* Telas internas no padrão da landing, com cores leves (LivroCaixa 2026-10-14; roxo no ProntuGrana em 2026-10-29). O tema
   (primefaces-diamond-prontugrana-light) é o diamond-blue-light com o azul girado para o roxo e a
   saturação reduzida (primário #8544D0); o layout-light.css passou pela mesma conversão. Aqui ficam o
   menu lateral claro, o fundo creme e os botões secundários em tom pastel, no lugar do cinza-azulado. */
:root {
    --prontugrana-creme: #FAF5FF;
    --prontugrana-creme-borda: #E3D4F5;
    --prontugrana-pastel: #F1E7FC;
    --prontugrana-texto-roxo: #6B30AE;
}
body .layout-wrapper .layout-content-wrapper,
body .layout-wrapper .layout-main {
    background: var(--prontugrana-creme);
}
.layout-wrapper .layout-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--prontugrana-creme-borda);
}
.layout-sidebar-white .layout-sidebar,
.layout-sidebar-white.layout-slim .layout-sidebar .layout-menu .layout-root-menuitem > ul {
    background: #ffffff;
    background-image: none;
    border-right: 1px solid var(--prontugrana-creme-borda);
}
.layout-sidebar-white .layout-sidebar .logo,
.layout-sidebar-white .layout-sidebar .layout-menu .menu-separator {
    border-color: var(--prontugrana-creme-borda);
}
.layout-sidebar-white .layout-sidebar .app-name {
    color: var(--prontugrana-texto-roxo);
}
.layout-sidebar-white .layout-sidebar .layout-menu .layout-root-menuitem .layout-menuitem-root-text {
    color: #A8978A;
}
.layout-sidebar-white .layout-sidebar .layout-menu li a {
    color: #5B5048;
}
.layout-sidebar-white .layout-sidebar .layout-menu li a:hover {
    background: var(--prontugrana-pastel);
}
.layout-sidebar-white .layout-sidebar .layout-menu li a.active-route,
.layout-sidebar-white .layout-sidebar .layout-menu li.active-menuitem > a.active-route {
    background: var(--prontugrana-pastel);
    color: var(--prontugrana-texto-roxo);
}
/* Card do Diamond: borda creme fina, como os cards da landing. */
.card,
fieldset.fieldset_group_fields {
    border: 1px solid var(--prontugrana-creme-borda);
    box-shadow: 0 1px 3px rgba(107, 48, 174, 0.06);
}
.ui-tabs-panel fieldset.fieldset_group_fields,
.ui-dialog-content fieldset.fieldset_group_fields {
    border: 0 none;
    box-shadow: none;
}
/* Botão secundário: pastel com texto roxo, em vez do cinza-azulado do tema. */
body .ui-button.ui-button-secondary,
body .ui-splitbutton.ui-button-secondary > .ui-button,
body .ui-menubutton.ui-button-secondary > .ui-button {
    background: var(--prontugrana-pastel);
    border: 1px solid var(--prontugrana-creme-borda);
    color: var(--prontugrana-texto-roxo);
}
body .ui-button.ui-button-secondary:enabled:hover,
body .ui-splitbutton.ui-button-secondary > .ui-button:enabled:hover,
body .ui-menubutton.ui-button-secondary > .ui-button:enabled:hover {
    background: #E5D4F8;
    border-color: #CEB4EC;
    color: #5A2795;
}
/* Cabeçalho das tabelas e do acordeão ("Mais opções") no mesmo creme, sem o cinza-azulado do tema. */
body .ui-datatable thead th,
body .ui-accordion .ui-accordion-header {
    background: var(--prontugrana-creme);
    border-color: var(--prontugrana-creme-borda);
}
/* O semáforo do painel é um p:commandLink: a cor de link do tema venceria o branco do texto. */
body a.analise-semaforo,
body a.analise-semaforo:hover {
    color: #ffffff;
}
/* Link com cara de botão (<a class="ui-button">, no Início): o tema só dá o espaçamento ao span interno. */
a.ui-button.ui-widget {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
}

/* ========== RELATÓRIOS DO CONTADOR (2026-10-14) ========== */
.relatorios-explicacao {
    color: var(--text-color-secondary, #6b7280);
}
.relatorio-titulo {
    font-weight: 600;
}
/* Selo do que a empresa ainda não abriu: pastel, como o resto das telas. */
.relatorio-novo {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--prontugrana-pastel);
    border: 1px solid var(--prontugrana-creme-borda);
    color: var(--prontugrana-texto-roxo);
    font-size: .8rem;
    font-weight: 600;
}
.relatorio-por {
    color: var(--text-color-secondary, #6b7280);
}
.relatorio-acoes .ui-button + .ui-button {
    margin-left: .5rem;
}

/* ========== MARCA EM TEXTO: O "Grana" DE ProntuGrana EM ÂMBAR ==========
   A cor da moeda do logo: âmbar escuro (#F59E0B) sobre fundo claro (menu lateral, painel do login,
   rodapé) e âmbar claro (#FBBF24) sobre o roxo. */
.marca-me { color: #F59E0B; }
body.login-body .login-image .marca-me { color: #FBBF24; }

/* ============================================================
   LANÇAMENTOS: mês com setas e linha de resumo da lista
   ============================================================ */
.lancamentos-mes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lancamentos-mes strong {
    font-size: 1.15rem;
    min-width: 12rem;
    text-align: center;
}

.lancamentos-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.lancamentos-totais {
    flex-basis: 100%;
}

/* ========== PRODUÇÃO MÉDICA (2026-10-29): um clique por paciente ==========
   Os botões da tabela de valores são cartões grandes (alvo de toque confortável no celular, onde a
   secretária e o médico lançam entre um paciente e outro). Cada um mostra o procedimento, o convênio,
   o valor bruto e o que fica para o médico. */
.texto-secundario {
	color: var(--text-color-secondary, #6b7280);
}

.producao-comecar {
	border-left: 4px solid var(--prontugrana-roxo-medio);
	background: var(--prontugrana-pastel);
}

.producao-botoes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 1rem;
}

body .producao-botao {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 5rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--prontugrana-creme-borda);
	background: var(--surface-card, #ffffff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	color: var(--text-color, #1f2937);
	text-decoration: none;
	transition: box-shadow .15s, transform .05s, border-color .15s;
}

body .producao-botao:hover,
body .producao-botao:focus-visible {
	border-color: var(--prontugrana-roxo-medio);
	box-shadow: 0 6px 16px rgba(107, 48, 174, .18);
	text-decoration: none;
}

body .producao-botao:active {
	transform: scale(.98);
}

.producao-botao-mais {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--prontugrana-roxo-medio);
	color: #ffffff;
	font-size: 1.1rem;
}

.producao-botao-texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.producao-botao-nome {
	font-size: 1.05rem;
}

.producao-botao-convenio {
	color: var(--prontugrana-roxo-escuro);
	font-weight: 600;
	font-size: .9rem;
}

.producao-botao-valor {
	color: var(--text-color-secondary, #6b7280);
	font-size: .85rem;
}

.producao-extrato h4 {
	color: var(--prontugrana-roxo-escuro);
}

.producao-liquido {
	border-left-color: #15803D;
	background: rgba(21, 128, 61, 0.07);
}

.producao-liquido .analise-valor {
	color: #15803D;
}

.producao-totais {
	margin-bottom: .5rem;
}

/* atendimento cancelado: continua na lista (nada some), riscado */
body .ui-datatable tr.atendimento-cancelado td {
	color: var(--text-color-secondary, #9ca3af);
	text-decoration: line-through;
}

body .ui-datatable tr.atendimento-cancelado td .situacao-atendimento,
body .ui-datatable tr.atendimento-cancelado td.coluna-acoes {
	text-decoration: none;
}

.situacao-atendimento {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.situacao-A_RECEBER {
	background: #FEF3C7;
	color: #92400E;
}

.situacao-RECEBIDO {
	background: #DCFCE7;
	color: #166534;
}

.situacao-GLOSADO {
	background: #FEE2E2;
	color: #991B1B;
}

.situacao-CANCELADO {
	background: #F3F4F6;
	color: #6B7280;
}

.producao-diferenca {
	display: block;
	color: #B91C1C;
	font-size: .8rem;
	font-weight: 600;
}

.producao-obs {
	font-size: .8rem;
	white-space: normal;
}

.producao-navegar-mes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}

.producao-mes {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.producao-mes .ui-button.rounded-button {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
}

.producao-competencia {
	margin: 0;
	color: var(--prontugrana-roxo-escuro);
}

/* Criar minha conta (tela pública): texto de abertura, aceite dos termos e o link para quem já tem conta. O
   `.login-wrapper` no seletor vence o `.login-body .login-wrapper .login-panel p` do Diamond (margem 0, negrito),
   que entra depois deste arquivo. */
body.login-body .login-wrapper .login-panel .criar-conta-texto {
	color: #4b5563;
	font-weight: 400;
	text-align: left;
	margin-bottom: 1.25rem;
}

body.login-body .login-wrapper .login-panel .criar-conta-termos {
	margin: .75rem 0 0;
	color: #6b7280;
	font-size: .9rem;
	font-weight: 400;
}

body.login-body .login-panel .criar-conta-rodape {
	margin-top: 1rem;
	color: #4b5563;
}

body.login-body .login-panel .login-criar-conta {
	margin-top: .75rem;
	font-weight: 600;
}

/* Lançar (2026-10-29, simplificado): onde e quando numa faixa só, campos sem rótulo (o placeholder diz), botões logo
   abaixo e o extrato do dia numa linha antes da lista. */
.producao-onde {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .75rem;
}

body .producao-locais.ui-selectonebutton {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

body .producao-locais.ui-selectonebutton .ui-button {
	border-radius: 999px !important;
	margin: 0;
	min-height: 2.5rem;
}

.producao-local-unico,
.producao-quando {
	color: var(--prontugrana-roxo-escuro);
	font-weight: 600;
}

.producao-quando a {
	margin-left: .5rem;
	font-weight: 400;
}

.producao-data {
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: 22rem;
}

.producao-campos {
	margin-bottom: .25rem;
}

.producao-campos .field {
	margin-bottom: .5rem;
}

.producao-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin: 0 0 1rem;
}

.producao-links a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 2.5rem;
}

.producao-extrato-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
}

.producao-extrato-topo h4 {
	margin: 0;
}

.producao-extrato-resumo {
	margin: 0;
	font-size: 1.05rem;
}

.producao-extrato-quantidade {
	font-weight: 700;
}

.producao-extrato-liquido {
	color: #15803D;
	font-size: 1.25rem;
	white-space: nowrap;
}

/* valor em dinheiro dentro de um título ou de uma frase: "R$" e o número na mesma linha */
.sem-quebra {
	white-space: nowrap;
}

/* EXTRATO DO DIA no celular e no tablet (styleClass="extrato-compacto"): o cartão do reflow com rótulo em
   cada linha fazia um paciente ocupar meia tela. Aqui fica em duas linhas curtas, sem rótulos: o que foi
   (procedimento · convênio · paciente) e, embaixo, o líquido e a situação; o X de cancelar na direita.
   Hora, local e quem lançou (so-computador) ficam só no computador. */
@media screen and (max-width: 991px) {
	body .extrato-compacto.ui-datatable-reflow .ui-datatable-data > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .2rem .75rem;
		padding: .6rem 3rem .6rem 0;
	}
	body .extrato-compacto.ui-datatable-reflow .ui-datatable-data td[role=gridcell]:not(.ui-helper-hidden) {
		width: auto !important;
		padding: 0;
	}
	body .extrato-compacto.ui-datatable-reflow .ui-datatable-data td[role=gridcell] .ui-column-title {
		display: none;
	}
	body .extrato-compacto.ui-datatable-reflow .ui-datatable-data td[role=gridcell].extrato-o-que {
		flex-basis: 100%;
	}
	body .extrato-compacto.ui-datatable-reflow .ui-datatable-data td[role=gridcell].coluna-acoes {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}

.producao-checkbox {
	display: flex;
	align-items: center;
}

.producao-exemplo {
	margin: 1rem 0 0;
	color: var(--text-color-secondary, #6b7280);
}