/**
 * LivroCaixa — 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: azul do Diamond "blue" (#105DA1 escuro / #1F8CE3 médio / #2196F3 do
 * tema) + âmbar da fita do logo (#F59E0B). Nada de hex solto nas telas: usar
 * as variáveis abaixo.
 */

:root {
    --livrocaixa-azul: #105DA1;
    --livrocaixa-azul-medio: #1F8CE3;
    --livrocaixa-ambar: #F59E0B;
    --livrocaixa-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%;
}

/* <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). */
.livrocaixa-button-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

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

/* ========== AJUDA CONTEXTUAL ========== */
/* "?" de campo (<livrocaixa: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> (<livrocaixa: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(--livrocaixa-azul);
    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-livrocaixa.css): laranja #EA580C, laranja escuro #C2410C, borda #FED7AA,
   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: #EA580C;
    background-image: linear-gradient(135deg, #EA580C 0%, #C2410C 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: #C2410C;
}

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: #C2410C;
}

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

body.login-body .login-wrapper .login-panel input:focus {
    border-color: #EA580C;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .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 laranja sobre branco */
body.login-body .login-wrapper .login-panel .ui-button-outlined {
    background: #ffffff;
    border: 1px solid #EA580C;
    color: #C2410C;
    border-radius: 10px;
}

body.login-body .login-wrapper .login-panel .ui-button-outlined:hover {
    background: #FFF7ED;
    border-color: #C2410C;
}

/* 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-laranja da landing */
body.login-body .login-wrapper .login-panel .ui-button:not(.ui-button-flat):not(.ui-button-outlined) {
    background: #EA580C;
    border: 1px solid #EA580C;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(234, 88, 12, .3);
}

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

/* ========== 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(--livrocaixa-azul);
}

.atalho:hover,
.atalho:focus-visible {
    box-shadow: 0 4px 12px rgba(16, 93, 161, .18);
}

.atalho > .pi {
    font-size: 1.5rem;
    color: var(--livrocaixa-azul);
}

.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(--livrocaixa-ambar);
}

.escolha-escritorio {
    margin: 1.5rem 0 .5rem;
    color: var(--livrocaixa-azul);
}

.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;
}

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

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

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

/* 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(--livrocaixa-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(--livrocaixa-azul);
    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;
}

.instalar-app .ui-button {
    background: var(--livrocaixa-ambar);
    border-color: var(--livrocaixa-ambar);
    color: #1f2937;
}

.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.
   livrocaixa.js marca <html class="sem-camera-barcode"> quando o navegador
   não tem BarcodeDetector: os botões somem, o campo de texto continua.
   ========================================================================== */
.livrocaixa-camera-video {
	display: none;
	width: 100%;
	max-width: 320px;
	border-radius: 4px;
	margin-top: 0.5rem;
}

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


/* ==== ANÁLISES DO CONTADOR (fase 6): pacote mensal, anual, orçamento, painel e licenças ====
   Cores do catálogo: entradas azul #1F8CE3, saídas âmbar #F59E0B (texto mais escuro para ler),
   resultado e saldo azul escuro #105DA1, 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: #105DA1;
}

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

.analise-cartao {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: 0.75rem 1rem;
	border-left: 4px solid #105DA1;
	border-radius: 6px;
	background: rgba(16, 93, 161, 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;
}

.analise-entrada {
	color: #1F8CE3;
}

.analise-saida {
	color: #B45309;
}

.analise-resultado {
	color: #105DA1;
}

.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 #1F8CE3;
	border-radius: 4px;
	background: rgba(31, 140, 227, 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;
}

.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(31, 140, 227, 0.12);
}

.analise-calor-2 {
	background: rgba(31, 140, 227, 0.3);
}

.analise-calor-3 {
	background: rgba(16, 93, 161, 0.5);
}

.analise-calor-4 {
	background: rgba(16, 93, 161, 0.8);
	color: #ffffff;
}

/* Ações de cada linha com ícone e texto (leigo não adivinha ícone sem legenda). */
.livrocaixa-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(16, 93, 161, 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: #105DA1;
	font-size: 1.4rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}