html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =====================================================================
   Paleta HCXpert (19/10/2026) — a mesma do HCXADM: roxo #491347 da marca,
   amarelo #f8d858 de destaque e lilases de apoio. Os tokens mantêm os nomes
   herdados do LapinCRM ("azul-*", "verde-claro") para não mexer nas telas;
   o que vale é o valor.
   ===================================================================== */
:root {
    /* O conteúdo continua BRANCO no tema claro; a barra lateral é o roxo da marca. */
    --azul-profundo: #2b1530;  /* texto e superfícies escuras (roxo quase preto) */
    --azul-noite:    #1a0b1e;  /* o outro extremo dos degradês escuros           */
    --azul-petroleo: #7a3a70;  /* roxo médio: texto fraco, séries de gráfico     */
    --azul-aco:      #c9b8d4;  /* lilás: séries terciárias, bordas de campo      */
    --gelo:          #e9e1ee;  /* lilás claro: linhas e bordas                   */
    --acao:          #491347;  /* roxo da marca: botão primário, item ativo      */
    --verde-claro:   #f8d858;  /* amarelo da marca: hover dos links do menu      */
    --laranja:       #ffa500;  /* botão de sair                                  */
    --realce-link:   var(--verde-claro);

    /* A cor do texto SOBRE a ação muda com a cor: branco sobre o roxo; no tema
       escuro a ação vira o amarelo e o texto por cima é o roxo escuro. */
    --sobre-acao:    #ffffff;

    --texto:         var(--azul-profundo);
    --texto-fraco:   var(--azul-petroleo);
    --linha:         var(--gelo);
    --fundo-suave:   #f2f0f7;  /* o lilás diluído, para superfícies  */

    /* Cores por PAPEL. As regras usam estas, nunca a cor da marca direto: o
       azul-profundo é fundo da barra e também cor de título, e no tema escuro
       os dois papéis pedem cores diferentes. O tema escuro só redefine esta
       lista (bloco [data-tema="escuro"] logo abaixo). */
    --fundo-pagina:      #fff;
    --superficie:        #fff;                  /* cartões, tabelas, painéis, campos */
    --superficie-alta:   #fff;                  /* menus e diálogos por cima da página */
    --texto-forte:       var(--azul-profundo);  /* títulos, valores, link forte */
    --texto-apoio:       var(--azul-aco);       /* dicas, datas, ícones apagados */
    --borda-campo:       var(--azul-aco);
    --gelo-fundo:        var(--gelo);           /* pílulas, hover de botão, trilhos */
    --gelo-hover:        #d6d0e4;
    --destaque-escuro:   var(--azul-profundo);  /* contador da aba ativa, faixa escura */
    /* A barra e SEMPRE escura, nos dois temas: e a mesma faixa do site.
       Decisao do usuario em 21/09/2026. */
    --barra-fundo:       #491347;
    --alerta-fundo:      #fdeacd;
    --alerta-texto:      #8a5406;
    --erro-fundo:        #fdecea;
    --erro-borda:        #f5c6c2;
    --erro-texto:        #8a2018;
    --perigo:            #b3261e;
    --ok-fundo:          #e6f4ee;
    --ok-borda:          #b9dfcc;
    --ok-texto:          #0e7a5f;
    --ok-vivo:           #1f8a4c;
    --info-fundo:        #e6eef7;

    /* Gráficos. Lista à parte porque o Chart.js recebe a cor como texto e
       precisa de hexadecimal: o dashboards.js lê estas e converte em rgba. */
    --grafico-1:         #2b1530;
    --grafico-2:         #7a3a70;
    --grafico-3:         #c9b8d4;
    --grafico-4:         #491347;
    --grafico-neutro:    #e9e1ee;
    --grafico-texto:     #7a3a70;
    --grafico-grade:     #e9e1ee;
    --grafico-borda:     #ffffff;
}

/* ===== Tema escuro =====
   Opcional, por pessoa: o botão de sol/lua da barra grava a escolha no perfil
   e o _Layout escreve data-tema="escuro" no <html> já na primeira pintura (sem
   piscar claro). A paleta é a do SITE da HCXpert (lapintecnologia.com.br), a
   mesma que o ERP passou a usar: preto esverdeado e o verde neon do logotipo.
   O data-bs-theme="dark" que vem junto cuida do Bootstrap. */
:root[data-tema="escuro"] {
    color-scheme: dark;

    --texto:             #ece4f1;
    --texto-fraco:       #a597b1;
    --linha:             rgba(248, 216, 88, .18);   /* a borda de vidro do site */
    --fundo-suave:       #150c1b;

    --fundo-pagina:      #150c1b;   /* um tom acima da barra */
    --superficie:        #1e1426;   /* cartao: mais claro que a pagina */
    --superficie-alta:   #251a2f;   /* menu e dialogo, por cima de tudo */
    --texto-forte:       #FFFFFF;
    --texto-apoio:       #7d6e88;
    --borda-campo:       #3a2a45;
    --gelo-fundo:        #251a2f;
    --gelo-hover:        #2e2138;
    --destaque-escuro:   #1e1426;
    --barra-fundo:       #120914;
    --alerta-fundo:      #3d2c0d;
    --alerta-texto:      #f6c26b;
    --erro-fundo:        #3a1417;
    --erro-borda:        #6e2a30;
    --erro-texto:        #f4b4ae;
    --perigo:            #ff8a80;
    --ok-fundo:          #0f3a30;
    --ok-borda:          #1f5c4a;
    --ok-texto:          #6fd3b1;
    --ok-vivo:           #4cc38a;
    --info-fundo:        #1d1a33;

    /* O verde do logotipo acende no escuro: vira o neon do site. E o texto
       SOBRE a ação continua escuro — sobre verde claro, branco não passa. */
    --acao:              #f8d858;
    --verde-claro:       #ffe37a;
    --sobre-acao:        #2a1530;

    --grafico-1:         #f8d858;
    --grafico-2:         #ffe37a;
    --grafico-3:         #a597b1;
    --grafico-4:         #f8d858;
    --grafico-neutro:    #3a2a45;
    --grafico-texto:     #a597b1;
    --grafico-grade:     #2e2138;
    --grafico-borda:     #150c1b;

    /* O Bootstrap desenha modal, menu suspenso e tabela com estas. */
    --bs-body-bg:        var(--superficie);
    --bs-body-color:     var(--texto);
    --bs-emphasis-color: var(--texto-forte);
    --bs-secondary-color: var(--texto-apoio);
    --bs-border-color:   var(--linha);
    --bs-secondary-bg:   var(--fundo-suave);
    --bs-tertiary-bg:    var(--fundo-suave);
}

body { color: var(--texto); }
:root[data-tema="escuro"] body { background: var(--fundo-pagina); }

/* ===== Barra lateral ===== */
.app { display: flex; min-height: 100vh; align-items: stretch; }

.barra {
    width: 216px;
    flex: 0 0 216px;
    /* A malha do site por cima do preto esverdeado. O SVG e leve, escala em
       qualquer tela e nao custa JS. Ela deriva exatamente UM ladrilho
       (120x104), o que torna o laco imperceptivel. */
    background-color: var(--barra-fundo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 L90 2 L120 52 L90 102 L30 102 L0 52 Z' fill='none' stroke='%23c08ae0' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
    animation: deriva-barra 40s linear infinite;
    box-shadow: 4px 0 15px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.barra-marca { display: block; text-align: center; padding: 4px 0 22px; }
/* Só a altura é fixa: o logo é quadrado e travar a largura o esticaria. */
.barra-marca img { height: 100px; width: auto; border-radius: 10px; }

.barra-menu { display: flex; flex-direction: column; gap: 3px; }

.barra-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    /* Links do menu brancos, como os nav-link do sistema de origem. */
    color: #fff;
    text-decoration: none;
    font-size: .93rem;
    line-height: 1.2;
    transition: background .12s ease, color .12s ease;
}
.barra-item svg { width: 19px; height: 19px; fill: currentColor; opacity: .9; flex: 0 0 19px; }
/* Hover igual ao do sistema de origem: o texto vai para o vermelho-alaranjado. */
.barra-item:hover { background: rgba(255, 255, 255, .10); color: var(--realce-link); }

/* O vermelho da HCXpert marca o item ativo, como os cabeçalhos dos cards do sistema de origem. */
.barra-item.ativo { background: var(--acao); color: var(--sobre-acao); font-weight: 600; }
.barra-item.ativo svg { opacity: 1; }
.barra-item.ativo:hover { background: var(--acao); color: var(--sobre-acao); }

.barra-item-inativo { opacity: .34; cursor: not-allowed; }
.barra-item-inativo:hover { background: transparent; color: #fff; }

/* Bloco do usuário no pé da barra. Fica colado embaixo com margin-top:auto,
   então a lista de módulos nunca empurra o "Sair" para fora da tela. */
.barra-usuario {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    display: flex; align-items: center; gap: 10px;
}
.barra-avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%;
    background: var(--azul-profundo); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .86rem; font-weight: 700;
}
.barra-usuario-dados { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barra-usuario-nome {
    font-size: .84rem; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-usuario form { margin: 0; }
/* "Sair" no laranja do botão de logout do sistema de origem, com o mesmo hover. */
.barra-sair {
    background: none; border: none; padding: 0;
    font-size: .78rem; color: var(--laranja); font-weight: 600; cursor: pointer; text-align: left;
}
.barra-sair:hover { text-decoration: underline; color: var(--realce-link); }

.conteudo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--fundo-pagina); }

.conteudo main { padding: 22px 26px 30px; flex: 1 1 auto; min-width: 0; }

/* ===== Quadro do funil ===== */
.quadro-topo {
    /* Uma linha só. nowrap de propósito: com wrap, qualquer aperto joga o
       botão de novo negócio para a linha de baixo. */
    display: flex; flex-wrap: nowrap; gap: 10px 14px;
    align-items: center;
    padding: 6px 0 14px; border-bottom: 1px solid var(--linha); margin-bottom: 18px;
}
.quadro-titulo { font-size: 1.15rem; font-weight: 600; color: var(--texto); white-space: nowrap; }
.quadro-resumo { color: var(--texto-fraco); font-size: .84rem; white-space: nowrap; }

/* A rolagem horizontal fica NA faixa do quadro, nunca no corpo da página. */
.quadro { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }

.coluna {
    flex: 0 0 288px;
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 4px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 230px);
}
.coluna-topo {
    padding: 12px 14px 10px;
    border-top: 3px solid var(--azul-petroleo);
    border-bottom: 1px solid var(--linha);
    border-radius: 4px 4px 0 0;
    background: var(--superficie);
}
.coluna-nome { font-size: .95rem; font-weight: 600; margin: 0; line-height: 1.3; color: var(--texto); }
.coluna-resumo { font-size: .78rem; color: var(--texto-fraco); margin: 3px 0 0; font-variant-numeric: tabular-nums; }

.coluna-lista { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 80px; }
.coluna-lista.recebendo { background: var(--alerta-fundo); outline: 2px dashed var(--acao); outline-offset: -6px; }
.coluna-vazia { font-size: .8rem; color: var(--texto-apoio); text-align: center; padding: 14px 0; margin: 0; }

.cartao {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: 4px;
    padding: 11px 12px; cursor: grab;
    box-shadow: 0 1px 2px rgba(43, 21, 48,.06);
    touch-action: none; user-select: none;
}
.cartao:active { cursor: grabbing; }
.cartao.arrastando { opacity: .3; }
.cartao-titulo { font-size: .88rem; font-weight: 600; margin: 0 0 6px; line-height: 1.35; color: var(--texto); }
.cartao-linha { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cartao-cliente { font-size: .78rem; color: var(--texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-valor { font-size: .8rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texto); }
.cartao-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* O avatar do responsável abre o rodapé; dias e link vão para a direita. */
.cartao-rodape .avatar-mini { margin-right: auto; }

.dias {
    font-size: .72rem; color: var(--texto-fraco); background: var(--gelo-fundo);
    border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
/* O documento da marca define o ouro como a cor de "pontos de atenção".
   Negócio parado é exatamente isso. */
.dias-alerta { color: var(--alerta-texto); background: var(--alerta-fundo); font-weight: 600; }

/* Cópia do cartão que segue o cursor. pointer-events:none é essencial:
   sem isso o elementFromPoint devolveria o próprio fantasma. */
.cartao-fantasma {
    position: fixed; z-index: 1000; pointer-events: none;
    opacity: .92; transform: rotate(1.5deg);
    box-shadow: 0 8px 24px rgba(43, 21, 48,.28); margin: 0;
}

@media (max-width: 760px) {
    .app { flex-direction: column; }
    .barra {
        width: 100%; flex: none; height: auto; position: static;
        flex-direction: row; align-items: center; gap: 8px;
        padding: 8px 12px; overflow-x: auto;
    }
    .barra-marca { padding: 0 10px 0 0; }
    .barra-marca img { height: 42px; }
    .barra-menu { flex-direction: row; gap: 4px; }
    .barra-item { white-space: nowrap; padding: 8px 10px; }
    .barra-usuario { margin-top: 0; padding-top: 0; border-top: none; }
}

/* ===== Telas de conta (Identity) =====
   Tela cheia sobre o Azul Profundo, com o cartão claro no centro. O contraste
   entre o fundo institucional e o cartão é o que faz a tela parecer uma porta
   de entrada, e não uma página perdida do sistema. */
.conta-corpo {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    /* A porta do sistema e a cara da HCXpert: o mesmo fundo do site e do ERP —
       preto esverdeado, dois brilhos verdes e a malha de losangos por cima.
       A tela de conta NAO segue o tema da pessoa (aqui ainda nao ha pessoa),
       entao ela fica sempre nesta, que e a identidade da marca. */
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(248, 216, 88, .16), transparent 70%),
        radial-gradient(40% 40% at 85% 25%, rgba(122, 58, 112, .10), transparent 70%),
        linear-gradient(180deg, #150c1b 0%, #120914 55%) fixed;
    position: relative;
}

    /* A malha, na mesma camada fixa atras do cartao. */
    .conta-corpo::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 L90 2 L120 52 L90 102 L30 102 L0 52 Z' fill='none' stroke='%23c08ae0' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
        animation: deriva-barra 40s linear infinite;
        pointer-events: none;
        z-index: 0;
    }

    /* O cartao e a marca ficam POR CIMA da malha. */
    .conta-painel { position: relative; z-index: 1; }

.conta-painel { width: 100%; max-width: 412px; display: flex; flex-direction: column; gap: 22px; }

.conta-marca { text-align: center; }
/* Só a altura: o logo é quadrado e fixar largura o deformaria. */
.conta-marca img { height: 104px; width: auto; border-radius: 12px; }

.conta-cartao {
    background: #fff;
    border-radius: 10px;
    padding: 30px 30px 26px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

/* Título à esquerda, logotipo à direita. O texto cresce e o logotipo não
   encolhe, então título longo ("Redefinir a senha") quebra em vez de espremer
   a marca. */
.conta-cabecalho {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.conta-cabecalho-texto { flex: 1 1 auto; min-width: 0; }
.conta-marca-img { flex: 0 0 auto; height: 100px; width: auto; border-radius: 14px; }
.conta-cabecalho h1 { font-size: 1.42rem; font-weight: 600; margin: 0; color: var(--azul-profundo); }
.conta-cabecalho p { margin: 6px 0 0; font-size: .9rem; color: var(--azul-petroleo); line-height: 1.45; }

.conta-form { display: flex; flex-direction: column; gap: 15px; }

.conta-campo { display: flex; flex-direction: column; gap: 6px; }
.conta-campo label { font-size: .82rem; font-weight: 600; color: var(--azul-petroleo); }
.conta-campo .form-control {
    border: 1px solid var(--azul-aco);
    border-radius: 6px;
    padding: 10px 13px;
    font-size: .94rem;
    color: var(--azul-profundo);
    background: #fff;
}
.conta-campo .form-control::placeholder { color: #9db3bd; }
.conta-campo .form-control:focus {
    border-color: var(--azul-petroleo);
    box-shadow: 0 0 0 3px rgba(122, 58, 112, .16);
    outline: none;
}

.conta-lembrar { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--azul-petroleo); cursor: pointer; }
.conta-lembrar input { width: 16px; height: 16px; accent-color: var(--azul-petroleo); }

.conta-botao {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: .96rem;
    font-weight: 600;
    /* O botao do site: degrade do neon para o verde, com texto ESCURO em cima —
       sobre esse verde o branco nao passa em contraste (o token --sobre-acao
       carrega a decisao). */
    background: linear-gradient(135deg, #f8d858 0%, #f8d858 100%);
    color: #2a1530;
    box-shadow: 0 0 32px rgba(248, 216, 88, .35);
    cursor: pointer;
    transition: filter .12s ease;
}
.conta-botao:hover { filter: brightness(.94); }
.conta-botao:focus-visible { outline: 3px solid rgba(192, 138, 224, .45); outline-offset: 2px; }

.conta-botao-secundario { background: var(--gelo); color: var(--azul-profundo); margin-top: 8px; }

.conta-links { display: flex; flex-direction: column; gap: 7px; align-items: center; padding-top: 4px; }
.conta-links a { font-size: .85rem; color: var(--azul-petroleo); text-decoration: none; }
.conta-links a:hover { text-decoration: underline; }
.conta-recado { font-size: .88rem; color: var(--azul-petroleo); line-height: 1.5; margin: 0 0 18px; }
.conta-recado-aviso {
    background: #fdeacd;
    color: #8a5406;
    border-radius: 6px;
    padding: 10px 12px;
}

/* O widget do Turnstile tem largura fixa de 300px; centralizar evita que ele
   fique encostado na borda esquerda do cartão. */
.conta-captcha { display: flex; justify-content: center; }

.conta-erro {
    background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro-texto);
    border-radius: 6px; padding: 10px 13px; font-size: .87rem;
}
.conta-erro:empty { display: none; }
.conta-erro ul { margin: 0; padding-left: 18px; }
.conta-erro-campo { font-size: .8rem; color: #b3261e; }

.conta-externo { margin-top: 18px; text-align: center; }
.conta-externo span { font-size: .82rem; color: #a597b1; }

.conta-rodape {
    text-align: center; margin: 0;
    font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(165, 151, 177, .70);   /* o texto fraco do site */
}

/* ===== Telas de conta com filme de fundo (30/09/2026) =====
   No padrão da tela de entrar do Agileiro, como o EVMWeb e os sistemas da CoreBox:
   o filme por trás da tela inteira, véu escuro, cartão de vidro escuro com o logo
   ao lado do título e a assinatura "HCX CRM" no canto. Tudo preso a .conta-filme.
   A malha de losangos da marca sai daqui: com o filme por trás, ela só suja. */
.conta-filme { background: #050A04; overflow-x: hidden; }
.conta-filme::before { display: none; }

.login-filme {
    position: fixed; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.login-veu {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 6, 15, .50) 0%, rgba(12, 6, 15, .42) 45%, rgba(12, 6, 15, .78) 100%);
}
.conta-filme .conta-painel { position: relative; z-index: 2; max-width: 400px; padding-bottom: 90px; }

.conta-filme .conta-cartao {
    background: rgba(26, 14, 31, .72);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(248, 216, 88, .18);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    padding: 28px 28px 24px;
}
.conta-filme .conta-cabecalho h1 { color: #F1F6EF; font-size: 1.3rem; }
.conta-filme .conta-cabecalho p { color: #9DB39A; font-size: .86rem; }
.conta-filme .conta-marca-img { height: 84px; }
.conta-filme .conta-campo label { color: #C8D6C4; }
.conta-filme .conta-campo .form-control {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: #F1F6EF;
}
.conta-filme .conta-campo .form-control::placeholder { color: #7E927A; }
.conta-filme .conta-campo .form-control:focus {
    background: rgba(255, 255, 255, .09);
    border-color: #f8d858;
    box-shadow: 0 0 0 3px rgba(248, 216, 88, .20);
}
.conta-filme .conta-lembrar, .conta-filme .conta-recado { color: #C8D6C4; }
.conta-filme .conta-lembrar input { accent-color: #f8d858; }
.conta-filme .conta-links a, .conta-filme .conta-cartao a { color: #C8D6C4; }
.conta-filme .conta-links a:hover, .conta-filme .conta-cartao a:hover { color: #f8d858; }
.conta-filme .conta-erro { background: rgba(179, 38, 30, .18); border-color: rgba(244, 180, 174, .35); color: #F4B4AE; }
.conta-filme .conta-erro-campo { color: #FF8A80; }
.conta-filme .conta-botao-secundario { background: rgba(255, 255, 255, .10); color: #F1F6EF; }
.conta-filme .conta-externo span { color: #9DB39A; }

.login-assinatura {
    position: fixed; left: 32px; bottom: 34px; z-index: 2;
    display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.login-assinatura strong { color: #fff; font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.login-assinatura span {
    color: #f8d858; font-size: .78rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.login-rodape { position: fixed; right: 24px; bottom: 18px; z-index: 2; font-size: .72rem; color: #7E927A; }

.login-pausa {
    position: fixed; top: 18px; right: 18px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 999px; border: 1px solid rgba(248, 216, 88, .30);
    background: rgba(26, 14, 31, .55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #E6F0E3; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.login-pausa:hover { background: rgba(26, 14, 31, .8); color: #f8d858; }
.login-pausa:focus-visible { outline: 2px solid #f8d858; outline-offset: 2px; }

@media (max-width: 700px) {
    .conta-filme { align-items: flex-start; padding-top: 64px; }
    .conta-filme .conta-cartao { padding: 22px 18px 20px; }
    .conta-filme .conta-marca-img { height: 64px; }
    .login-assinatura { left: 18px; bottom: 40px; }
    .login-assinatura strong { font-size: 1.8rem; }
    .login-assinatura span { font-size: .68rem; letter-spacing: .12em; }
    .login-rodape { left: 18px; right: auto; bottom: 14px; }
    .login-pausa span { display: none; }
}
@media (max-height: 700px) {
    .login-assinatura, .login-rodape { position: absolute; }
}

/* ===== Painel do Resumo ===== */
.painel-topo {
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    align-items: baseline; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid var(--linha); margin-bottom: 20px;
}
.painel-titulo { font-size: 1.32rem; font-weight: 600; margin: 0; color: var(--texto); }
.painel-data { font-size: .86rem; color: var(--texto-fraco); text-transform: capitalize; }

.indicadores {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.indicador {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px;
    border-top: 3px solid var(--azul-petroleo);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
}
.indicador-rotulo { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-fraco); }
.indicador-valor { font-size: 1.55rem; font-weight: 700; color: var(--texto-forte); font-variant-numeric: tabular-nums; line-height: 1.2; }
.indicador-nota { font-size: .8rem; color: var(--texto-apoio); }

.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }

.bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; padding: 18px 20px; }
/* O bloco de ação ganha o ouro: é o único que pede reação de quem olha. */
.bloco-atencao { border-left: 3px solid var(--acao); }
.bloco-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bloco-topo h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--texto); }
.etiqueta-alerta {
    background: var(--acao); color: var(--sobre-acao);
    font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 1px 9px;
}
.bloco-sub {
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco); margin: 14px 0 6px;
}
.bloco-sub:first-of-type { margin-top: 2px; }
.bloco-vazio { font-size: .87rem; color: var(--texto-apoio); margin: 4px 0 0; line-height: 1.5; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    padding: 9px 0; border-bottom: 1px solid var(--linha); align-items: baseline;
}
.lista li:last-child { border-bottom: none; }
.lista-principal { font-size: .88rem; font-weight: 500; color: var(--texto); overflow: hidden; text-overflow: ellipsis; }
.lista-apoio { grid-column: 1; font-size: .78rem; color: var(--texto-fraco); }
.lista-marca {
    grid-row: 1 / span 2; grid-column: 2; align-self: center;
    font-size: .82rem; font-weight: 600; color: var(--texto);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.marca-alerta { color: var(--alerta-texto); background: var(--alerta-fundo); border-radius: 10px; padding: 1px 8px; font-size: .76rem; }

.barras { display: flex; flex-direction: column; gap: 12px; }
.barra-rotulo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.barra-rotulo > span:first-child { font-size: .86rem; color: var(--texto); }
.barra-numero { font-size: .78rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-trilho { height: 8px; background: var(--gelo-fundo); border-radius: 4px; overflow: hidden; }
/* Barra com largura zero ainda mostra um traço: sem isso, etapa vazia some e o
   leitor não sabe se ela existe ou se o dado falhou. */
.barra-preenchida { height: 100%; border-radius: 4px; min-width: 3px; }

/* ===== Botões e formulários ===== */
.botao-primario, .botao-secundario, .botao-limpo, .botao-perigo {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    padding: 9px 16px; font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
/* Branco sobre o vermelho: aqui é o escuro que não passa em contraste. */
.botao-primario { background: var(--acao); color: var(--sobre-acao); }
.botao-primario:hover { filter: brightness(.94); color: var(--sobre-acao); }
.botao-secundario { background: var(--gelo-fundo); color: var(--texto-forte); border-color: var(--borda-campo); }
.botao-secundario:hover { background: var(--gelo-hover); color: var(--texto-forte); }
.botao-limpo { background: none; color: var(--texto-fraco); }
.botao-limpo:hover { text-decoration: underline; color: var(--texto-fraco); }
.botao-perigo { background: var(--superficie); color: var(--perigo); border-color: var(--erro-borda); }
.botao-perigo:hover { background: var(--erro-fundo); }
.botao-remover { background: none; border: none; color: var(--perigo); font-size: .78rem; cursor: pointer; padding: 0; }
.botao-remover:hover { text-decoration: underline; }

.painel-acoes { display: flex; gap: 8px; align-items: center; }

.barra-busca { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.barra-busca .form-control { max-width: 420px; }

.form-control {
    border: 1px solid var(--borda-campo); border-radius: 6px;
    padding: 9px 12px; font-size: .92rem; color: var(--texto); background: var(--superficie); width: 100%;
}
.form-control:focus { border-color: var(--azul-petroleo); box-shadow: 0 0 0 3px rgba(122, 58, 112,.15); outline: none; }

.formulario { display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.campo-grupo {
    border: 1px solid var(--linha); border-radius: 6px; padding: 16px 20px 20px; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px;
}
.campo-grupo legend {
    grid-column: 1 / -1; float: none; width: auto; margin: 0 0 2px; padding: 0;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco);
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label { font-size: .8rem; font-weight: 600; color: var(--texto-fraco); }
.campo-largo { grid-column: span 2; }
/* Ocupa a faixa inteira, e não duas colunas: texto de parágrafo precisa de
   linha larga para quem escreve enxergar o que já escreveu. */
.campo-faixa { grid-column: 1 / -1; }
.campo-curto, .campo-mini { grid-column: span 1; }
.campo-com-botao { display: flex; gap: 6px; }
.campo-dica { font-size: .77rem; color: var(--texto-apoio); line-height: 1.4; }
.campo-dica-alerta { color: var(--alerta-texto); }
.campo-erro { font-size: .78rem; color: var(--perigo); }
.formulario-acoes { display: flex; gap: 10px; align-items: center; }

.aviso-erro {
    background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro-texto);
    border-radius: 6px; padding: 10px 14px; font-size: .88rem; margin-bottom: 16px;
}
.aviso-erro:empty { display: none; }

/* ===== Tabela ===== */
.tabela-caixa { border: 1px solid var(--linha); border-radius: 6px; overflow-x: auto; background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela thead th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-fraco); background: var(--fundo-suave); border-bottom: 1px solid var(--linha-forte, var(--borda-campo));
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--fundo-suave); }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.celula-apoio { display: block; font-size: .78rem; color: var(--texto-fraco); margin-top: 2px; }
.link-forte { color: var(--texto-forte); font-weight: 600; text-decoration: none; }
.link-forte:hover { text-decoration: underline; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }

.pilula { font-size: .74rem; font-weight: 600; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.pilula-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.pilula-off { background: var(--gelo-fundo); color: var(--texto-fraco); }
.etiqueta-neutra { background: var(--gelo-fundo); color: var(--texto-fraco); font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 1px 9px; }

/* ===== Ficha e contatos ===== */
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .9rem; }
.ficha dt { font-size: .78rem; font-weight: 600; color: var(--texto-fraco); }
.ficha dd { margin: 0; color: var(--texto); }

.contato-form { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 12px; }
.contato-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }

/* "editar" e "remover" na mesma marca do item: o <form> do remover é bloco por
   natureza e empurraria o outro para baixo sem o flex. */
.contato-acoes { display: flex; align-items: center; gap: 10px; }
.botao-editar { background: none; border: none; color: var(--texto-fraco); font-size: .78rem; cursor: pointer; padding: 0; }
.botao-editar:hover { text-decoration: underline; }

/* Em edição o item deixa de ser a grade de duas colunas: o formulário ocupa a
   linha inteira, no lugar onde o contato estava. */
.contato-editando { display: block; }
.contato-edicao { padding: 2px 0 4px; }
.contato-edicao .contato-campos { margin-bottom: 8px; }
.contato-rotulo { display: block; font-size: .78rem; font-weight: 600; color: var(--texto-fraco); margin-bottom: 4px; }
.contato-edicao-acoes { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Lançamento de cotação: data, valor e os dois botões numa linha só, porque
   o formulário inteiro cabe nela. */
.cotacao-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cotacao-acoes { display: flex; align-items: center; gap: 8px; }

/* Fechamento do negócio: a OC numa linha e a OS embaixo, separada — uma é
   cadastro, a outra é documento que sai da casa. */
.fechamento-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fechamento-acoes { display: flex; align-items: center; }
.fechamento-os {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.zona-perigo { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zona-perigo-nota { font-size: .8rem; color: var(--texto-fraco); }

/* Cartão na etapa de fechamento: o verde é o sinal de ganho, como no Ploomes.
   Não usa o ouro porque ouro aqui significa "precisa de atenção". */
.cartao-ganho { background: var(--ok-fundo); border-color: var(--ok-borda); }
.cartao-numero { font-size: .72rem; font-weight: 400; color: var(--texto-apoio); }

/* Coluna dos perdidos, no fim do quadro. Mesmo vermelho da pílula "Perdido";
   os cartões não arrastam, então o cursor é o normal. */
.coluna-perdidos .coluna-topo { border-top-color: var(--perigo); }
.coluna-lista-fixa { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 80px; }
.cartao-perdido { background: var(--erro-fundo); border-color: var(--erro-borda); cursor: default; user-select: text; touch-action: auto; }
.cartao-perdido:active { cursor: default; }
.cartao-motivo { font-size: .78rem; color: var(--erro-texto); margin: 6px 0 0; line-height: 1.35; }
.cartao-etapa { font-size: .72rem; color: var(--texto-fraco); margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ===== Paginação ===== */
.paginacao {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
    align-items: center; justify-content: space-between;
    margin-top: 14px; font-size: .86rem;
}
.paginacao-conta { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.paginacao-botoes { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.paginacao-botoes a, .paginacao-atual {
    padding: 5px 11px; border-radius: 5px; text-decoration: none;
    font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.paginacao-botoes a { color: var(--texto-fraco); }
.paginacao-botoes a:hover { background: var(--fundo-suave); border-color: var(--linha); }
.paginacao-atual { background: var(--acao); color: var(--sobre-acao); font-weight: 700; }

textarea.form-control { resize: vertical; line-height: 1.5; font-family: inherit; }

/* Campo de texto longo — escopo de serviço, cláusula de modelo. O min-height
   segura a altura quando o navegador ignora o rows, e o max-height impede que
   um texto grande empurre os botões do formulário para fora da tela. */
.campo-alto { min-height: 260px; max-height: 60vh; }

/* ===== Barra recolhível ===== */
@keyframes deriva-barra {
    from { background-position: 0 0; }
    to   { background-position: -120px -104px; }
}

/* Barra parada para quem pediu menos movimento: e um painel que fica na
   tela o dia inteiro. */
@media (prefers-reduced-motion: reduce) {
    .barra { animation: none; }
}

.barra { transition: width .16s ease, flex-basis .16s ease; }

/* Os botoes do pe da barra: tema a esquerda, recolher a direita. O
   margin-top:auto fica no grupo, que e o que empurra o pe para baixo. */
.barra-botoes { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.barra-alternar, .barra-tema {
    background: none; border: none; cursor: pointer;
    color: var(--azul-aco); opacity: .7;
    padding: 6px; border-radius: 6px;
    display: flex; align-items: center;
}
.barra-alternar { margin-left: auto; }
/* O hover e um claro translucido, nao o azul-petroleo: a barra JA e
   azul-petroleo, e o botao sumiria dentro dela. */
.barra-alternar:hover, .barra-tema:hover { background: rgba(255, 255, 255, .16); color: #fff; opacity: 1; }
.barra-alternar svg, .barra-tema svg { width: 20px; height: 20px; fill: currentColor; transition: transform .16s ease; }
/* O icone mostra para onde o clique leva: lua no claro, sol no escuro. */
.barra-tema .icone-sol, :root[data-tema="escuro"] .barra-tema .icone-lua { display: none; }
:root[data-tema="escuro"] .barra-tema .icone-sol { display: block; }

/* Com a barra recolhida o botão de usuário deixa de ser o último elemento,
   então o margin-top:auto passa para o botão de alternar. */
.barra-usuario { margin-top: 0; }

/* --- estado recolhido: só ícones --- */
.barra-recolhida .barra { width: 64px; flex: 0 0 64px; padding-left: 8px; padding-right: 8px; }
.barra-recolhida .barra-item { justify-content: center; padding: 10px 0; gap: 0; }
.barra-recolhida .barra-item span { display: none; }
.barra-recolhida .barra-marca img { height: 40px; }
.barra-recolhida .barra-marca { padding-bottom: 16px; }
.barra-recolhida .barra-botoes { flex-direction: column; }
.barra-recolhida .barra-alternar { margin-left: 0; }
.barra-recolhida .barra-alternar svg { transform: rotate(180deg); }
.barra-recolhida .barra-usuario { justify-content: center; }
.barra-recolhida .barra-usuario-dados { display: none; }

@media (max-width: 760px) {
    /* Em tela estreita a barra já é horizontal: recolher não faz sentido. */
    .barra-alternar { display: none; }
    .barra-recolhida .barra { width: 100%; flex: none; }
    .barra-recolhida .barra-item span { display: inline; }
    .barra-recolhida .barra-usuario-dados { display: flex; }
}

.quadro-ganho { color: var(--ok-texto); }

/* ===== Editor de proposta ===== */
.painel-sub { display: block; font-size: .88rem; color: var(--texto-fraco); margin-top: 2px; }

.grupos { display: flex; flex-direction: column; gap: 14px; }
.grupo { border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo-suave); padding: 14px 16px; }
.grupo-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.grupo-nome { flex: 1 1 auto; font-weight: 600; }
.grupo-total {
    font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--texto-forte);
}

.itens { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
/* Colunas fixas: catálogo, descrição, qtd, unidade, valor, prazo, total, remover.
   A descrição é a única que cresce. */
.item {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr) 64px 92px 100px 56px 96px 24px 24px;
    gap: 6px; align-items: center;
}
.item .form-control { padding: 6px 9px; font-size: .86rem; }
.item-qtd, .item-valor, .item-desconto { text-align: right; font-variant-numeric: tabular-nums; }
/* O desconto da linha fica apagado enquanto vale zero: é campo que quase sempre
   não se usa, e destacá-lo em toda linha pediria atenção sem motivo. */
.item-desconto { color: var(--texto-fraco); }
.item-desconto:focus, .item-desconto:not([value="0"]) { color: var(--texto); }

/* Ação discreta na linha e no cabeçalho do grupo — duplicar não é destrutivo
   e não pode competir com o × de remover. */
.botao-linha {
    background: none; border: none; padding: 0 2px; cursor: pointer;
    color: var(--texto-fraco); font-size: .9rem; line-height: 1; white-space: nowrap;
}
.botao-linha:hover { color: var(--texto-forte); }
.grupo-topo .botao-linha { font-size: .78rem; font-weight: 600; }
.item-total {
    font-size: .86rem; font-weight: 600; text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.botao-fino { padding: 6px 12px; font-size: .84rem; }

.fechamento {
    margin-top: 4px; margin-left: auto; width: 100%; max-width: 340px;
    border: 1px solid var(--linha); border-radius: 6px; background: var(--superficie); padding: 14px 18px;
    display: flex; flex-direction: column; gap: 7px;
}
.fechamento-linha { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; }
.fechamento-linha strong { font-variant-numeric: tabular-nums; }
.fechamento-menos strong { color: var(--perigo); }
.fechamento-total {
    border-top: 2px solid var(--texto-forte); padding-top: 9px; margin-top: 3px;
    font-size: 1.02rem;
}
.fechamento-total strong { color: var(--texto-forte); font-size: 1.14rem; }

/* O equivalente em reais é informação de apoio, não o preço da proposta: fica
   abaixo do total e em peso menor, senão as duas linhas disputam o olho e o
   cliente não sabe qual número está sendo cobrado. */
.fechamento-convertido { font-size: .82rem; color: var(--texto-fraco); margin-top: -2px; }
.fechamento-convertido strong { font-weight: 600; color: var(--texto-fraco); }

.pilula-info { background: var(--info-fundo); color: var(--texto-fraco); }
.pilula-nao { background: var(--erro-fundo); color: var(--perigo); }

@media (max-width: 1100px) {
    /* Numa tela estreita a linha vira bloco: oito colunas fixas espremeriam
       tudo a ponto de não dar para ler o valor. */
    .item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .item-total { grid-column: 1 / -1; text-align: left; }
}

/* Atalho para as propostas no rodapé do cartão do funil. Discreto: o cartão
   é para arrastar, o link é o caminho secundário. */
.cartao-link {
    font-size: .78rem;
    color: var(--texto-fraco);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.cartao-link:hover { color: var(--texto-forte); }

.col-acao { text-align: right; white-space: nowrap; }
/* Duas ações seguidas na mesma célula encostam uma na outra e viram uma
   palavra só ("PDF abrir"). */
.col-acao > a + a { margin-left: 12px; }

/* O prazo sai da linha do dinheiro e abre a linha de baixo, à esquerda: com
   ele lá em cima a descrição sobrava com 34px de largura. */
.item-prazo { grid-column: 1 / 4; }

/* A descrição detalhada ocupa uma linha inteira embaixo do item: é texto
   longo, não cabe na grade de colunas. */
.item-detalhe {
    grid-column: 1 / -1;
    resize: vertical;
    min-height: 54px;
    font-size: .84rem;
}
.item { row-gap: 4px; margin-bottom: 10px; }

/* Atalho para copiar o escopo do cadastro do serviço. Discreto e alinhado à
   direita, embaixo do campo: é apoio à escrita, não uma ação da proposta. */
.link-catalogo {
    grid-column: 1 / -1; justify-self: end;
    background: none; border: none; padding: 0;
    font-size: .76rem; color: var(--texto-fraco); cursor: pointer;
    border-bottom: 1px dotted currentColor;
}
.link-catalogo:hover { color: var(--texto-forte); }

/* Modal de PDF: fundo escuro da paleta para o documento branco destacar. */
.caixa-pdf { border: 0; border-radius: 10px; overflow: hidden; }
.caixa-pdf-topo {
    background: var(--azul-profundo);
    color: #fff;
    border-bottom: 0;
    padding: 12px 16px;
}
.caixa-pdf-topo .modal-title { font-size: 1rem; font-weight: 600; }
.caixa-pdf-topo .botao-secundario {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45);
}
.caixa-pdf-topo .botao-secundario:hover { background: rgba(255,255,255,.12); }
.pdf-carregando { text-align: center; padding: 56px 0; color: var(--texto-fraco); }
.pdf-carregando-texto { margin-top: 10px; font-size: .88rem; }

/* ---------- Relatórios ---------- */

.filtro-periodo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.filtro-periodo .campo { margin: 0; }

.cartoes-relatorio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.cartao-relatorio {
    display: block;
    padding: 18px;
    border: 1px solid var(--linha);
    border-left: 4px solid var(--acao);
    border-radius: 8px;
    background: var(--superficie);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.cartao-relatorio:hover { border-color: var(--borda-campo); transform: translateY(-2px); }
.cartao-relatorio h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texto-forte);
}
.cartao-relatorio p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--texto-fraco);
}

/* Número que pede atenção — mesma leitura do "dias parado" no funil. */
.num-alerta { color: var(--acao); font-weight: 600; }

.tabela tfoot th {
    background: var(--fundo-suave);
    border-top: 2px solid var(--borda-campo);
    color: var(--texto-forte);
}

/* ---------- Dashboards ---------- */

.grade-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.cartao-grafico {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 16px 18px 20px;
    min-width: 0;   /* sem isso o canvas estica a coluna do grid */
}
.cartao-grafico-largo { grid-column: 1 / -1; }
.cartao-grafico h2 {
    margin: 0 0 2px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--texto-forte);
}
.grafico-nota {
    margin: 0 0 14px;
    font-size: .8rem;
    color: var(--texto-fraco);
}

/* Chart.js com maintainAspectRatio:false preenche o pai — sem altura aqui o
   gráfico cresce sem limite e toma a página inteira. */
.grafico-area { position: relative; height: 260px; }
.cartao-grafico-largo .grafico-area { height: 300px; }

.grafico-vazio {
    margin: 0;
    padding: 40px 0;
    text-align: center;
    font-size: .85rem;
    color: var(--texto-fraco);
    background: var(--fundo-suave);
    border-radius: 6px;
}

/* Ações que convivem na mesma célula: cada botão é um form próprio, porque
   POST com antiforgery não cabe em link. */
.acao-inline { display: inline-block; margin-left: 6px; }
.acao-inline:first-child { margin-left: 0; }

/* ---------- barra de filtros do funil ---------- */

/* Tudo em uma linha só: título, resumo, filtros e o botão, como na barra do
   Ploomes. A busca é o único campo elástico — ela encolhe para os demais
   caberem, em vez de empurrar o botão para baixo. */
.quadro-filtros {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.quadro-filtros .form-control { padding: 6px 10px; font-size: .86rem; }
.filtro-busca { flex: 1 1 180px; min-width: 120px; max-width: 320px; }
.filtro-select { width: 160px; }

/* Empurra o botão para a direita, como na barra do Ploomes. */
.quadro-novo { margin-left: auto; }

.quadro-ocultos { color: var(--texto-fraco); }

/* ---------- Select2 na paleta HCXpert ---------- */
/* O tema padrão do Select2 é cinza-azulado do Bootstrap 3 e destoa do resto.
   Só o necessário para ele parecer um .form-control nosso. */

.select2-container--default .select2-selection--single {
    height: auto;
    padding: 4px 2px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--superficie);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    color: var(--texto);
    padding-left: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--texto-fraco); }

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--azul-petroleo);
    outline: 0;
}

.select2-dropdown {
    border-color: var(--azul-petroleo);
    border-radius: 6px;
    overflow: hidden;

    /* A lista nasce com a largura do gatilho. Em campo estreito, como os
       filtros do funil, nome de cliente quebra em duas linhas — a lista pode
       ser mais larga que o campo sem prejuízo. */
    min-width: 240px;
}
.select2-container--default .select2-results__option { white-space: nowrap; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--azul-petroleo);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--gelo-fundo);
    color: var(--texto-forte);
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--linha);
    border-radius: 4px;
    padding: 6px 8px;
}

/* Dentro da linha de item da proposta os campos são baixos; o Select2 precisa
   acompanhar, senão a linha desalinha. */
.item .select2-container--default .select2-selection--single { padding: 2px 0; font-size: .86rem; }

/* Miniatura da arte do modelo de proposta na listagem. */
.miniatura-arte {
    height: 46px;
    width: auto;
    border: 1px solid var(--linha);
    border-radius: 3px;
    display: block;
}

/* Linha de assinatura no modelo de proposta. */
.assinatura-linha {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    grid-column: 1 / -1;
}
.assinatura-linha .form-control { padding: 6px 9px; font-size: .86rem; }

.previa-arte {
    margin-top: 8px;
    max-height: 150px;
    width: auto;
    border: 1px solid var(--linha);
    border-radius: 4px;
    display: block;
}

/* ---------- anexos da proposta (GED) ---------- */

.bloco-anexos { display: block; }
.bloco-anexos-titulo {
    margin: 0 0 4px;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}
.anexo-envio {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}
.anexo-envio input[type=file] { flex: 1 1 300px; }
.anexo-envio input[type=text] { flex: 1 1 240px; }

.lista-anexos { list-style: none; margin: 12px 0 0; padding: 0; }
.anexo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--linha);
}
.anexo-tipo {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--destaque-escuro);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.anexo-nome { flex: 1 1 auto; min-width: 0; font-size: .9rem; }
.anexo-nome .celula-apoio { display: block; }
.anexo-acoes { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

/* ---------- editor de cláusulas do contrato ---------- */

.bloco-clausulas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}
.marcadores {
    background: var(--fundo-suave);
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 12px 14px;
}
.marcadores h3 {
    margin: 0 0 4px;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}
.marcadores p { margin: 0 0 10px; font-size: .78rem; color: var(--texto-fraco); }
.marcadores ul { list-style: none; margin: 0; padding: 0; }
.marcadores li { margin-bottom: 8px; }
.marcadores li span { display: block; font-size: .74rem; color: var(--texto-fraco); }
.marcador {
    display: inline-block;
    background: var(--superficie);
    border: 1px solid var(--borda-campo);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    color: var(--texto-forte);
    cursor: pointer;
}
.marcador:hover { background: var(--gelo-fundo); }

@media (max-width: 900px) {
    .bloco-clausulas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- avatares ---------- */

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;              /* foto retangular não distorce */
    background: var(--azul-petroleo);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.avatar-inicial { letter-spacing: .02em; }
.avatar-mini { width: 24px; height: 24px; font-size: .64rem; }
.avatar-grande { width: 96px; height: 96px; font-size: 1.6rem; }

.celula-usuario { display: flex; align-items: center; gap: 10px; }
.previa-foto { display: flex; align-items: center; gap: 14px; }

/* Foto na barra lateral ocupa o mesmo lugar do círculo com a inicial. */
.barra-avatar-foto { padding: 0; object-fit: cover; }

/* ---------- edição do negócio pelo cartão ---------- */

.cartao-editar {
    float: right;
    background: none;
    border: 0;
    padding: 2px;
    margin-left: 6px;
    line-height: 0;
    cursor: pointer;
    color: var(--texto-apoio);
    border-radius: 4px;
}
.cartao-editar svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-editar:hover { color: var(--texto-forte); background: var(--gelo-fundo); }

.formulario-negocio .campo { margin-bottom: 12px; }
.formulario-negocio label { display: block; margin-bottom: 4px; font-size: .8rem; color: var(--texto-fraco); }

.edicao-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linha);
}
.edicao-rotulo {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}
.edicao-rodape {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--linha);
}

/* O Select2 dentro do modal precisa ficar acima dele; o modal do Bootstrap
   usa 1055, e sem isto a lista abre atrás. */
.select2-container--open { z-index: 1060; }

/* ===== Agenda do negócio: tarefas e histórico ===== */

/* Ícone no cartão. Sem tarefa nenhuma fica discreto — um sino aceso sem motivo
   ensina a ignorar o sino. */
.cartao-agenda {
    position: relative;
    background: none;
    border: none;
    padding: 2px 4px;
    margin-left: 2px;
    border-radius: 4px;
    color: var(--texto-apoio);
    cursor: pointer;
    float: right;
    line-height: 1;
}
.cartao-agenda svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-agenda:hover { color: var(--texto-forte); background: var(--gelo-fundo); }
.cartao-agenda-ativa { color: var(--acao); }
.cartao-agenda-vencida { color: var(--perigo); }
.cartao-agenda-conta {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--azul-aco);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}
.cartao-agenda-ativa .cartao-agenda-conta { background: var(--acao); color: var(--sobre-acao); }
.cartao-agenda-vencida .cartao-agenda-conta { background: var(--perigo); }

/* Visões salvas: a barra de atalhos de filtro, no topo do funil e da lista de
   clientes. Lê como aba de pasta — a que está aberta é a única com fundo
   branco e sublinhado em ouro; as outras ficam apagadas esperando o clique. */
/* Abas de painel na ficha. Mesma linguagem visual das visões salvas do funil
   — sublinhado ouro na ativa —, mas classe própria: aquelas são endereços e
   estas trocam o painel sem sair da página. */
.abas {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    border-bottom: 1px solid var(--linha);
    margin: -4px 0 14px;
}
.abas .aba {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    padding: 7px 12px; font-size: .84rem; font-weight: 600;
    color: var(--texto-fraco);
    border-radius: 6px 6px 0 0;
    /* A borda existe já transparente: acender a da ativa não pode empurrar as
       outras um pixel para cima. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.abas .aba:hover { background: var(--gelo-fundo); color: var(--texto-forte); }
.abas .aba-ativa { color: var(--texto-forte); border-bottom-color: var(--acao); }
.aba-conta {
    background: var(--gelo-fundo); color: var(--texto-fraco);
    font-size: .72rem; font-weight: 700; border-radius: 10px; padding: 0 7px;
}
.abas .aba-ativa .aba-conta { background: var(--destaque-escuro); color: #fff; }

/* Ação do painel alinhada à direita, acima da tabela. */
.abas-acoes { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.visoes {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Aqui o wrap é bem-vindo, ao contrário da barra de filtros: são atalhos,
       e uma segunda linha de atalhos continua legível. */
    flex-wrap: wrap;
    /* Sobe para encostar na divisória do cabeçalho, como aba de pasta. A
       margem negativa come parte do margin-bottom do .quadro-topo. */
    margin: -14px 0 16px;
}
.visao-caixa { display: inline-flex; align-items: center; border-radius: 6px 6px 0 0; }
.visoes .visao {
    display: inline-block;
    padding: 6px 12px;
    font-size: .82rem;
    color: var(--texto-fraco);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.visoes .visao:hover { background: var(--gelo-fundo); color: var(--texto-forte); }
.visoes .visao-ativa, .visoes .visao-ativa .visao {
    color: var(--texto-forte);
    font-weight: 600;
    background: var(--superficie);
    border-bottom-color: var(--acao);
}
.visao-caixa.visao-ativa { padding-right: 4px; }
.visao-caixa.visao-ativa .visao:hover { background: transparent; }

/* O "x" da aba aberta e o botão de salvar são irmãos: mesmo tamanho, mesmo
   cinza, e só ganham cor quando o ponteiro chega. */
.visao-remover { display: inline-flex; }
.visao-remover button, .visao-salvar button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 4px 6px;
    font-size: .78rem;
    line-height: 1;
    color: var(--texto-fraco);
    cursor: pointer;
    border-radius: 4px;
}
.visao-remover svg, .visao-salvar svg { width: 13px; height: 13px; fill: currentColor; }
.visao-remover button:hover { color: var(--perigo); background: var(--gelo-fundo); }
.visao-salvar { margin-left: auto; }
.visao-salvar button:hover { color: var(--texto-forte); background: var(--gelo-fundo); }

/* Porta da ficha no próprio cartão, ao lado do lápis e da agenda. Mesmo peso
   visual dos dois: são três atalhos irmãos, e destacar um deles faria o olho
   procurá-lo antes de ler o título do negócio. */
.cartao-ficha {
    float: right;
    padding: 2px;
    margin-left: 2px;
    line-height: 0;
    border-radius: 4px;
    color: var(--texto-apoio);
}
.cartao-ficha svg { width: 15px; height: 15px; fill: currentColor; }
.cartao-ficha:hover { color: var(--texto-forte); background: var(--gelo-fundo); }

/* Balão ancorado no cartão. Fica abaixo do modal do Bootstrap (1055): quando os
   dois existem na tela, quem manda é o modal. */
.agenda-balao {
    position: absolute;
    z-index: 1040;
    width: 306px;
    max-height: 76vh;
    overflow-y: auto;
    background: var(--superficie-alta);
    border: 1px solid var(--linha);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(43, 21, 48, .18);
}
.agenda-balao[hidden] { display: none; }
.agenda-balao .agenda { padding: 12px 14px 10px; }

.agenda-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.agenda-topo h3 { font-size: .92rem; font-weight: 600; margin: 0; color: var(--texto); }
.agenda-ficha { margin-left: auto; font-size: .78rem; color: var(--texto-fraco); text-decoration: none; }
.agenda-ficha:hover { text-decoration: underline; color: var(--texto-forte); }
.agenda-vazia { font-size: .84rem; color: var(--texto-apoio); margin: 0 0 6px; }

.agenda-lista { list-style: none; margin: 0; padding: 0; }
.agenda-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--linha);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-baixa { margin: 0; flex: 0 0 auto; }

/* Círculo vazio que se preenche ao passar o mouse: mostra que o clique dá baixa,
   sem precisar de rótulo. */
.agenda-bolinha {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--borda-campo);
    background: none;
    color: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agenda-bolinha svg { width: 12px; height: 12px; fill: currentColor; }
.agenda-bolinha:hover { border-color: var(--ok-texto); color: var(--ok-texto); }
.agenda-item-vencida .agenda-bolinha { border-color: var(--perigo); }
.agenda-bolinha-feita { border-color: var(--ok-texto); color: var(--ok-texto); background: var(--ok-fundo); }
.agenda-bolinha-feita:hover { border-color: var(--borda-campo); color: var(--texto-fraco); background: none; }

.agenda-corpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda-titulo { font-size: .86rem; font-weight: 600; color: var(--texto); }
.agenda-quando { font-size: .76rem; color: var(--texto-fraco); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.agenda-quando svg { width: 12px; height: 12px; fill: currentColor; opacity: .8; }
.agenda-atraso { color: var(--alerta-texto); background: var(--alerta-fundo); border-radius: 9px; padding: 0 7px; font-weight: 600; }
.agenda-dono { font-size: .74rem; color: var(--texto-apoio); }
.agenda-item-feita .agenda-titulo { color: var(--texto-fraco); text-decoration: line-through; }

.agenda-acoes { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--linha); padding-top: 4px; }
.agenda-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 8px 4px;
    font-size: .85rem;
    color: var(--texto-fraco);
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
}
.agenda-acao svg { width: 17px; height: 17px; fill: var(--texto-fraco); flex: 0 0 17px; }
.agenda-acao:hover { background: var(--fundo-suave); color: var(--texto-forte); }

.agenda-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.agenda-form[hidden] { display: none; }
.agenda-form .form-control { font-size: .86rem; padding: 6px 9px; }
.agenda-form-linha { display: flex; gap: 8px; }
.agenda-form-linha > * { flex: 1 1 0; min-width: 0; }
.agenda-form-acoes { display: flex; gap: 8px; align-items: center; }

/* Na ficha o formulário está sempre aberto: a tela existe para registrar, e
   esconder o campo atrás de um clique só atrapalharia. */
.agenda-form-ficha { margin-top: 14px; border-top: 1px solid var(--linha); }
.agenda-form-ficha .bloco-sub { margin-bottom: 0; }
.agenda-form-ficha .agenda-form-linha > button { flex: 0 0 auto; }

.agenda-feitas { margin-top: 12px; }
.agenda-feitas summary { font-size: .8rem; color: var(--texto-fraco); cursor: pointer; }
.agenda-feitas summary:hover { color: var(--texto-forte); }

/* ===== Linha do tempo do histórico ===== */
.linha-tempo { list-style: none; margin: 16px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--linha); }
.linha-tempo-item { position: relative; padding: 0 0 14px 12px; }
.linha-tempo-item:last-child { padding-bottom: 0; }
.linha-tempo-item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--azul-aco);
    border: 2px solid var(--superficie);
}
.linha-tempo-canal {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
}
.linha-tempo-texto { margin: 2px 0 3px; font-size: .88rem; color: var(--texto); line-height: 1.45; white-space: pre-wrap; }
.linha-tempo-rodape { font-size: .76rem; color: var(--texto-fraco); }

/* O histórico cresce sem limite; o bloco rola em vez de esticar a página. */
/* O painel de abas ocupa a faixa inteira da ficha, como na do Ploomes: numa
   coluna de 330px a tabela de propostas nasce espremida e as ações saem para
   fora do campo de visão. Tarefas e dados do negócio continuam lado a lado
   acima dele. */
.bloco-historico { grid-column: 1 / -1; }
.bloco-historico .linha-tempo { max-height: 420px; overflow-y: auto; }

/* Indicador cujo valor é palavra, não número: 1.55rem de etapa ou situação
   estoura a caixa. */
.indicador-texto { font-size: 1.05rem; font-weight: 600; }

/* ---------- Metas ---------- */

/* O painel do mês: uma barra por pessoa, nome à esquerda e números à direita.
   A barra é o que se lê de relance; o número é para quem quer a conta. */
.metas-lista { list-style: none; margin: 0; padding: 0; }
.metas-item {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr minmax(180px, auto);
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linha);
}
.metas-item:last-child { border-bottom: 0; }
.metas-pessoa { display: flex; align-items: center; gap: 8px; min-width: 0; }
.metas-nome { font-size: .9rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; }

.metas-barra {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--gelo-fundo);
    overflow: hidden;
}
.metas-preenche { display: block; height: 100%; border-radius: 5px; }
/* A cor conta a distância da meta sem ler número nenhum. Verde só quando
   bateu — pintar de verde quem está em 90% ensina a ignorar a cor. */
.faixa-ok { background: var(--ok-vivo); }
.faixa-perto { background: var(--acao); }
.faixa-longe { background: var(--azul-aco); }
.faixa-sem { background: transparent; }

.metas-numeros { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.metas-numeros strong { font-size: .95rem; color: var(--texto-forte); }
.metas-alvo { font-size: .78rem; color: var(--texto-fraco); }

/* A grade do ano tem treze colunas e não cabe em tela estreita. A rolagem
   fica NA grade, nunca no corpo da página. */
.metas-rolagem { overflow-x: auto; }
.metas-grade { min-width: 900px; }
.metas-grade th, .metas-grade td { text-align: right; white-space: nowrap; }
.metas-col-pessoa { text-align: left !important; position: sticky; left: 0; background: var(--superficie); }
.metas-grade thead .metas-col-pessoa { background: var(--fundo-suave); }
/* O mês em foco fica marcado na grade: é o que o painel de cima está mostrando. */
.metas-col-foco { background: rgba(248, 216, 88, .08); }

.metas-celula { width: 92px; padding: 4px 6px; font-size: .82rem; text-align: right; }
.metas-so-leitura { display: block; font-size: .84rem; color: var(--texto-forte); }
/* O realizado fica embaixo da meta, menor: é consequência, não decisão. */
.metas-realizado { display: block; font-size: .72rem; color: var(--texto-fraco); margin-top: 2px; }
.num-ok { color: var(--ok-vivo); }

.metas-legenda { margin: 12px 0 0; font-size: .78rem; color: var(--texto-fraco); }
.metas-grade-caixa .bloco-topo { display: flex; align-items: center; justify-content: space-between; }

/* ---------- Contratos e GED ---------- */

/* Falta na paleta de pílulas: "vence em breve" não é recusa nem informação
   neutra, é atenção — e atenção, no documento da marca, é o ouro. */
.pilula-aviso { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* Caixa de seleção na barra de filtros, alinhada com os campos ao lado. */
.filtro-marca {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .84rem; color: var(--texto-fraco); white-space: nowrap;
}
.filtro-marca input { margin: 0; }

/* As ordens de compra são o bloco principal da ficha e têm tabela dentro:
   ocupam a grade inteira em vez de metade dela. */
.bloco-largo { grid-column: 1 / -1; }

/* Barra de consumo do contrato, entre os indicadores e a grade. */
.contrato-consumo { margin: -6px 0 18px; }
.faixa-estourou { background: var(--perigo); }

.contrato-contagem { font-size: .72rem; }

/* A lista de arquivos precisa caber DENTRO de uma célula de tabela sem
   esticá-la: nome, tamanho e o "x", em uma linha por arquivo. */
.ged-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.ged-lista li {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 2px 0; font-size: .82rem;
}
.ged-lista-solta li { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.ged-lista-solta li:last-child { border-bottom: 0; }
.ged-tamanho { font-size: .72rem; color: var(--texto-fraco); white-space: nowrap; }

.ged-remover {
    background: none; border: 0; padding: 0 4px; line-height: 1;
    font-size: 1rem; color: var(--texto-fraco); cursor: pointer; border-radius: 3px;
}
.ged-remover:hover { color: var(--perigo); background: var(--gelo-fundo); }

.ged-envio { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ged-arquivo { font-size: .74rem; max-width: 190px; }
.ged-envio-bloco { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }

/* Linha do formulário de nova OC: campos lado a lado, quebrando no aperto. */
.oc-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.oc-linha .form-control { flex: 1 1 150px; min-width: 120px; }

/* ===== Tema escuro: componentes de terceiros =====
   Select2 e SweetAlert2 trazem folha própria, pintada de branco. Só o que
   precisa mudar para eles acompanharem a página no escuro. */
:root[data-tema="escuro"] .select2-dropdown,
:root[data-tema="escuro"] .select2-container--default .select2-selection--multiple {
    background: var(--superficie-alta);
    color: var(--texto);
}
:root[data-tema="escuro"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--texto-fraco);
}
:root[data-tema="escuro"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--texto-fraco);
}
:root[data-tema="escuro"] .select2-search--dropdown .select2-search__field,
:root[data-tema="escuro"] .select2-container--default .select2-search--inline .select2-search__field {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--borda-campo);
}
:root[data-tema="escuro"] .select2-container--default .select2-results__option--highlighted[aria-selected] { color: #fff; }
:root[data-tema="escuro"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--gelo-fundo);
    border-color: var(--linha);
    color: var(--texto);
}

/* Nasceu na tela de login, mas é a caixa de marcar de quatro formulários do
   sistema — e esses, sim, ficam escuros. */
:root[data-tema="escuro"] .conta-lembrar { color: var(--texto-fraco); }
:root[data-tema="escuro"] .conta-lembrar input { accent-color: var(--acao); }

/* ===== Diálogo da casa: confirmar, perguntar e campos (19/09/2026) =====
   O <dialog> do avisos.js, no lugar do SweetAlert2. A caixa é o <form>; o
   <dialog> em volta é transparente, então clique fora da caixa cai nele — é
   assim que o JS reconhece o clique no fundo. O filete de cima diz o tom:
   verde na pergunta comum, vermelho no que apaga. */
dialog.dialogo {
    padding: 0; border: none; background: transparent; color: var(--texto);
    width: min(440px, calc(100vw - 32px)); max-width: none;
    max-height: calc(100dvh - 32px); overflow: visible;
}
dialog.dialogo::backdrop { background: rgba(43, 21, 48, .58); backdrop-filter: blur(2px); }
.dialogo-neutro { --dialogo-cor: var(--acao);   --dialogo-icone-fundo: var(--gelo-fundo); --dialogo-icone: var(--texto-forte); }
.dialogo-perigo { --dialogo-cor: var(--perigo); --dialogo-icone-fundo: var(--erro-fundo); --dialogo-icone: var(--perigo); }
.dialogo-caixa {
    background: var(--superficie-alta); color: var(--texto);
    border: 1px solid var(--linha); border-top: 4px solid var(--dialogo-cor);
    border-radius: 14px; padding: 20px 22px 18px;
    box-shadow: 0 24px 60px rgba(73, 19, 71, .35);
    max-height: calc(100dvh - 32px); overflow: auto;
    animation: dialogo-entrar .16s ease-out;
}
.dialogo-cabeca { display: flex; align-items: center; gap: 12px; }
.dialogo-icone {
    width: 38px; height: 38px; flex: 0 0 38px; padding: 8px; border-radius: 50%;
    background: var(--dialogo-icone-fundo); fill: var(--dialogo-icone);
}
.dialogo-titulo { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--texto-forte); }
/* O texto começa onde começa o título (38 do ícone + 12 do vão). */
.dialogo-texto { margin: 6px 0 0 50px; font-size: .92rem; line-height: 1.5; color: var(--texto); overflow-wrap: anywhere; }
.dialogo-corpo { margin: 14px 0 0 50px; }
.dialogo-entrada { width: 100%; }
/* Vários campos (Avisos.campos): rótulo em cima, campo embaixo. */
.dialogo-campos { display: flex; flex-direction: column; gap: 10px; }
.dialogo-campo { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.dialogo-campo > span { font-size: .78rem; font-weight: 600; color: var(--texto-fraco); }
.dialogo-entrada[aria-invalid="true"] { border-color: var(--perigo); }
.dialogo-erro {
    margin: 10px 0 0 50px; padding: 6px 10px; border-radius: 6px; font-size: .84rem;
    background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro-texto);
}
.dialogo-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialogo-pe button:focus-visible { outline: 3px solid rgba(192, 138, 224, .55); outline-offset: 2px; }
/* O vermelho cheio fica só aqui, no botão que confirma o que apaga; na página
   o .botao-perigo segue vazado. Texto na cor da superfície: branco no claro,
   azul-escuro no escuro (onde o vermelho é claro) — os dois passam em contraste. */
.botao-perigo.botao-cheio { background: var(--perigo); border-color: var(--perigo); color: var(--superficie); }
.botao-perigo.botao-cheio:hover { background: var(--perigo); filter: brightness(.92); }
.dialogo-balanca .dialogo-caixa { animation: dialogo-balanca .32s ease-in-out; }
@keyframes dialogo-entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes dialogo-balanca {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .dialogo-caixa, .dialogo-balanca .dialogo-caixa { animation: none; }
}
@media (max-width: 520px) {
    .dialogo-caixa { padding: 18px 16px 16px; }
    .dialogo-texto, .dialogo-corpo, .dialogo-erro { margin-left: 0; }
    .dialogo-pe { flex-direction: column-reverse; }
    .dialogo-pe > button { width: 100%; }
}

.botao-perigo.botao-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao-perigo.botao-cheio:hover { background: var(--perigo); filter: brightness(.92); }

/* ===== Toasts: os avisos do sistema (19/09/2026) =====
   ok, aviso e erro do Avisos (avisos.js). Acima do modal do Bootstrap e do
   diálogo do SweetAlert: um erro que nasce de uma ação dentro deles tem de
   aparecer por cima. Cores pelas variáveis de papel: valem nos dois temas. */
.toasts {
    position: fixed; top: 16px; right: 16px; z-index: 1080;
    display: flex; flex-direction: column; gap: 10px;
    width: 360px; max-width: calc(100vw - 32px);
    pointer-events: none;
}
/* "toast-caixa", e não "toast": essa o Bootstrap esconde (display:none sem .show). */
.toast-caixa {
    position: relative; overflow: hidden; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 12px 14px 14px;
    background: var(--superficie); color: var(--texto);
    border: 1px solid var(--linha); border-left: 4px solid var(--toast-cor);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(73, 19, 71, .22);
    animation: toast-entrar .18s ease-out;
    transition: opacity .18s ease, transform .18s ease;
}
.toast-caixa.toast-saindo { opacity: 0; transform: translateX(24px); }
@keyframes toast-entrar { from { opacity: 0; transform: translateX(24px); } }
.toast-caixa.toast-ok    { --toast-cor: var(--ok-vivo); --toast-fundo: var(--ok-fundo);     --toast-icone: var(--ok-texto); }
.toast-caixa.toast-aviso { --toast-cor: var(--laranja);  --toast-fundo: var(--alerta-fundo); --toast-icone: var(--alerta-texto); }
.toast-caixa.toast-erro  { --toast-cor: var(--perigo);  --toast-fundo: var(--erro-fundo);   --toast-icone: var(--erro-texto); }
.toast-icone {
    width: 28px; height: 28px; flex: 0 0 28px; padding: 5px; border-radius: 50%;
    background: var(--toast-fundo); fill: var(--toast-icone);
}
.toast-corpo { flex: 1; min-width: 0; padding-top: 3px; font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.toast-titulo { font-weight: 700; color: var(--texto-forte); margin-bottom: 2px; }
.toast-texto { color: var(--texto); }
.toast-fechar {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: 4px;
    color: var(--texto-apoio);
}
.toast-fechar:hover { background: var(--gelo-fundo); color: var(--texto-forte); }
/* A barrinha embaixo mostra quanto falta; para quando o ponteiro está em cima. */
.toast-tempo {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--toast-cor); opacity: .55; transform-origin: left;
    animation: toast-tempo linear forwards;
}
.toast-pausado .toast-tempo { animation-play-state: paused; }
@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .toast-caixa { animation: none; transition: none; }
    .toast-tempo { animation: none; }
}
@media (max-width: 760px) {
    .toasts { top: 8px; right: 8px; left: 8px; width: auto; max-width: none; }
}

/* ===== Editor do escopo detalhado da proposta (Quill) =====
   A área de escrever é sempre PAPEL BRANCO com texto escuro, nos dois temas:
   é o que o PDF imprime, e a cor escolhida na barra aparece como vai sair.
   A caixa estica pela alça do canto (resize) e tem um botão de tela cheia. */
.editor-escopo { grid-column: 1 / -1; display: flex; flex-direction: column; }
.editor-escopo .ql-toolbar.ql-snow {
    background: var(--superficie);
    border: 1px solid var(--borda-campo);
    border-radius: 6px 6px 0 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 4px 6px;
}
.editor-escopo .ql-container.ql-snow {
    border: 1px solid var(--borda-campo);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: #fff;
    color: #1A1F18;
    font-family: inherit;
    font-size: .88rem;
    height: 200px;
    min-height: 110px;
    resize: vertical;
    overflow: auto;
}
.editor-escopo .ql-editor { min-height: 100%; line-height: 1.45; }
.editor-escopo .ql-editor.ql-blank::before { color: #8a948a; font-style: normal; }
.editor-escopo .editor-expandir {
    margin-left: auto;
    width: auto !important;
    padding: 2px 10px !important;
    font-size: .78rem;
    color: var(--texto-forte);
    border: 1px solid var(--borda-campo);
    border-radius: 6px;
    background: transparent;
    white-space: nowrap;
}
.editor-escopo .ql-toolbar .editor-expandir:hover,
.editor-escopo .ql-toolbar .editor-expandir:focus { border-color: var(--acao); color: var(--texto-forte) !important; }

/* Tela cheia: por cima de tudo, com margem, e a área de texto ocupa o resto. */
.editor-escopo.tela-cheia {
    position: fixed; inset: 16px; z-index: 2000;
    background: var(--superficie-alta);
    border-radius: 10px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55), 0 20px 60px rgba(0, 0, 0, .4);
    padding: 12px;
}
.editor-escopo.tela-cheia .ql-container.ql-snow { flex: 1; height: auto; resize: none; font-size: .95rem; }
.editor-escopo.tela-cheia .ql-editor { max-width: 900px; margin: 0 auto; padding: 28px 36px; }
body.editor-aberto { overflow: hidden; }

/* Tema escuro: os ícones do Quill são desenhados em cinza-escuro e sumiriam
   na barra escura. O menu das listas (tamanho, cor, alinhamento) acompanha. */
:root[data-tema="escuro"] .editor-escopo .ql-toolbar .ql-stroke { stroke: var(--texto); }
:root[data-tema="escuro"] .editor-escopo .ql-toolbar .ql-fill { fill: var(--texto); }
:root[data-tema="escuro"] .editor-escopo .ql-toolbar .ql-picker { color: var(--texto); }
:root[data-tema="escuro"] .editor-escopo .ql-toolbar button:hover .ql-stroke,
:root[data-tema="escuro"] .editor-escopo .ql-toolbar .ql-active .ql-stroke { stroke: var(--acao); }
:root[data-tema="escuro"] .editor-escopo .ql-toolbar button:hover .ql-fill,
:root[data-tema="escuro"] .editor-escopo .ql-toolbar .ql-active .ql-fill { fill: var(--acao); }
:root[data-tema="escuro"] .editor-escopo .ql-picker-options { background: var(--superficie-alta); border-color: var(--borda-campo); }