/* ---------------------------------------------------------------
   O LUGAR DA PÁGINA DEPOIS DE UM CLIQUE (1.45.0)

   O cabeçalho é grudento e tem 69px. Quando o navegador pula para
   uma âncora (#r12, #corrigir), ele põe o topo do alvo em y=0 —
   ou seja, DEBAIXO do cabeçalho. Medido: 69px do que a pessoa
   acabou de mexer ficavam tapados.

   No caso do bipe isso pegava justo a linha "MONTANDO · 3 peças ·
   R$ 277,90" — o número que ele confere a cada peça.

   scroll-padding-top resolve de uma vez para o sistema inteiro:
   todo pulo de âncora passa a parar abaixo do cabeçalho.
   --------------------------------------------------------------- */

:root { --altura-do-topo: 69px; }

html {
    scroll-padding-top: calc(var(--altura-do-topo) + 15px);
}

/* ---------------------------------------------------------------
   Grupo Ryzzo — estilo do sistema
   Base clara, menu escuro, números sempre alinhados.
   --------------------------------------------------------------- */

:root {
    --pagina: #eef1f5;
    --papel: #ffffff;
    --tinta: #18202c;
    --tinta-media: #4a5568;
    --tinta-fraca: #7a8699;
    --linha: #dde3ea;
    --acao: #0e5c4f;
    --acao-escura: #0a473c;
    --positivo: #1c7a56;
    --negativo: #a32b23;
    --atencao: #8a6100;
    --fundo-atencao: #fdf5e2;
    --fundo-ok: #eaf6f0;
    --fundo-erro: #fbeceb;
    --raio: 10px;
    --sombra: 0 1px 2px rgba(24, 32, 44, .06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--pagina);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 12px; }

a { color: var(--acao); }

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

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
}
.pular-para-conteudo:focus {
    left: 8px; top: 8px;
    background: var(--papel);
    padding: 8px 12px;
    z-index: 200;
    border-radius: 6px;
}

/* ---------------- Entrada (login e instalação) ---------------- */

.tela-entrada {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--tinta);
    padding: 24px;
}

.entrada-caixa {
    background: var(--papel);
    border-radius: 14px;
    padding: 32px 28px;
    width: 100%;
    max-width: 380px;
}

.marca {
    font-size: 24px;
    margin-bottom: 2px;
}

.entrada-sub {
    color: var(--tinta-fraca);
    margin-bottom: 22px;
}

.entrada-texto { color: var(--tinta-media); }

/* ---------------- Estrutura geral ---------------- */

.estrutura {
    display: flex;
    min-height: 100vh;
}

.menu {
    width: 232px;
    flex: 0 0 232px;
    background: var(--tinta);
    color: #c9d2de;
    padding: 20px 0 16px;
    display: flex;
    flex-direction: column;
}

.menu-marca {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 14px;
}

.menu-marca-nome {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.menu-bloco { margin-bottom: 14px; }

.menu-titulo {
    margin: 0 0 4px;
    padding: 0 20px;
    font-size: 12px;
    color: #7c8ba0;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu a {
    display: block;
    padding: 7px 20px;
    color: #c9d2de;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.menu a:hover { color: #fff; background: rgba(255, 255, 255, .05); }

.menu a.ativo {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-left-color: #35c08f;
}

.menu-rodape {
    margin-top: auto;
    padding: 14px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.menu-rodape a { color: #9fb0c4; text-decoration: none; }
.menu-rodape a:hover { color: #fff; }

.area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topo {
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topo h1 { flex: 1; }

.conteudo {
    padding: 22px 24px 40px;
    max-width: 1060px;
    width: 100%;
}

.rodape {
    margin-top: auto;
    padding: 14px 24px 24px;
    color: var(--tinta-fraca);
    font-size: 13px;
}

.botao-menu { display: none; }

.botao-ajuda {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--papel);
    color: var(--tinta-media);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.botao-ajuda:hover { background: var(--pagina); color: var(--tinta); }

.fundo-menu { display: none; }

/* ---------------- Cartões e blocos ---------------- */

.cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--sombra);
}

.cartao-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cartao-titulo p { margin: 2px 0 0; color: var(--tinta-fraca); font-size: 13px; }

.explica {
    color: var(--tinta-fraca);
    font-size: 13px;
    margin: -6px 0 14px;
}

/* Saldo em destaque */

.saldo {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-left: 5px solid var(--acao);
    border-radius: var(--raio);
    padding: 22px 24px;
    margin-bottom: 18px;
}

.saldo-frase {
    font-size: 17px;
    color: var(--tinta-media);
    margin: 0 0 6px;
}

.saldo-valor {
    font-size: 34px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.saldo-zerado {
    border-left-color: var(--positivo);
}

.resumo-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.resumo-item {
    flex: 1 1 160px;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px 16px;
}

.resumo-item span {
    display: block;
    color: var(--tinta-fraca);
    font-size: 13px;
    margin-bottom: 2px;
}

.resumo-item strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

/* ---------------- Tabelas ---------------- */

.tabela-rolagem { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

th, td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--linha);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--tinta-fraca);
    font-weight: 600;
    font-size: 13px;
}

tbody tr:last-child td { border-bottom: none; }

tr.total td {
    border-top: 2px solid var(--linha);
    font-weight: 600;
    background: #f7f9fb;
}

td.acoes { text-align: right; white-space: nowrap; }

.vazio {
    color: var(--tinta-fraca);
    padding: 18px 0;
    text-align: center;
}

.ponto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: baseline;
}

.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }

/* ---------------- Formulários ---------------- */

label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--tinta-media);
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=color], select, textarea {
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    border: 1px solid var(--linha);
    border-radius: 6px;
    background: var(--papel);
    color: var(--tinta);
    font-size: 16px;
    font-family: inherit;
    min-height: 44px;
}

input[type=color] { padding: 2px; height: 38px; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--acao);
    outline-offset: 1px;
    border-color: var(--acao);
}

textarea { min-height: 70px; resize: vertical; }

.linha-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.linha-campos > label { flex: 1 1 180px; margin-bottom: 12px; }
.linha-campos > label.estreito { flex: 0 1 130px; }

/*
 * A caixinha de período do perfil do colaborador (1.37.0). Fica aqui e
 * não no style= da tela porque o celular precisa mudar estes dois
 * tamanhos — e style= escrito na marra ganha de qualquer regra, até da
 * que está dentro do @media.
 */
.caixa-periodo .campo-periodo { flex: 0 1 210px; }
.caixa-periodo .campo-ver     { flex: 0 1 100px; align-self: end; }

.botao {
    display: inline-block;
    min-height: 44px;
    line-height: 24px;
    padding: 9px 16px;
    border: 1px solid var(--acao);
    border-radius: 6px;
    background: var(--acao);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
.botao:hover { background: var(--acao-escura); border-color: var(--acao-escura); }

.botao-cheio { width: 100%; text-align: center; }

.botao-claro {
    background: var(--papel);
    color: var(--tinta-media);
    border-color: var(--linha);
}
.botao-claro:hover { background: var(--pagina); color: var(--tinta); }

.botao-pequeno { padding: 6px 12px; font-size: 13px; min-height: 36px; line-height: 22px; }

.botao-perigo {
    background: var(--papel);
    color: var(--negativo);
    border-color: #e6c4c1;
}
.botao-perigo:hover { background: var(--fundo-erro); }

/* ---------------- Avisos ---------------- */

.aviso {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.aviso-ok       { background: var(--fundo-ok); color: #14543c; }
.aviso-erro     { background: var(--fundo-erro); color: var(--negativo); }
.aviso-atencao  { background: var(--fundo-atencao); color: var(--atencao); }

/* ---------------- Tutorial ---------------- */

.tutorial-fundo {
    position: fixed;
    inset: 0;
    background: rgba(18, 24, 33, .55);
    z-index: 100;
}

.tutorial-foco {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 4px rgba(53, 192, 143, .9), 0 0 0 9999px rgba(18, 24, 33, .55);
    z-index: 101;
    pointer-events: none;
    transition: all .18s ease;
}

.tutorial-balao {
    position: absolute;
    z-index: 102;
    background: var(--papel);
    border-radius: 12px;
    padding: 16px 18px;
    width: min(330px, calc(100vw - 32px));
    box-shadow: 0 10px 30px rgba(18, 24, 33, .3);
}

.tutorial-balao h3 { margin-bottom: 6px; }
.tutorial-balao p  { font-size: 14px; color: var(--tinta-media); margin-bottom: 14px; }

.tutorial-passo {
    font-size: 12px;
    color: var(--tinta-fraca);
    font-variant-numeric: tabular-nums;
}

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

.tutorial-acoes .espaco { flex: 1; }

.tutorial-desligar {
    background: none;
    border: none;
    color: var(--tinta-fraca);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}
.tutorial-desligar:hover { color: var(--tinta); }

/* ---------------- Telas estreitas ---------------- */

@media (max-width: 860px) {
    .menu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -240px;
        z-index: 60;
        transition: left .2s ease;
    }

    body.menu-aberto .menu { left: 0; }

    body.menu-aberto .fundo-menu {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(18, 24, 33, .45);
        z-index: 50;
    }

    .botao-menu {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 14px;
        border: 1px solid var(--linha);
        border-radius: 6px;
        background: var(--papel);
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
    }

    .topo { padding: 12px 16px; }
    .topo h1 { font-size: 17px; }
    .conteudo { padding: 16px 16px 40px; }
    .saldo-valor { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------------- Assistente de carga ---------------- */

.passos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.passo {
    font-size: 13px;
    color: var(--tinta-fraca);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: 4px 12px;
}

.passo-atual {
    color: #fff;
    background: var(--tinta);
    border-color: var(--tinta);
}

.bloco-fardo {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.bloco-fardo-titulo {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--tinta-fraca);
}

.linha-loja {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.linha-loja + .linha-loja { border-top: 1px solid var(--linha); }

.linha-loja-nome { flex: 1; font-size: 16px; }

.linha-loja input {
    width: 110px;
    margin-top: 0;
    text-align: right;
    font-size: 17px;
}

.pergunta {
    margin: 16px 0 6px;
    font-size: 14px;
    color: var(--tinta-media);
}

.escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.escolha {
    margin: 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 9px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--tinta);
}

.escolha input { width: auto; margin: 0; }

.escolha:has(input:checked) {
    border-color: var(--acao);
    background: var(--fundo-ok);
    color: #14543c;
}

.acoes-passo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

.botao-grande {
    margin-left: auto;
    padding: 12px 26px;
    font-size: 16px;
}

.faixa-frase {
    background: #eaf1f9;
    color: #14406b;
    border-radius: var(--raio);
    padding: 14px 16px;
    font-size: 16px;
    margin: 16px 0 0;
}

.detalhe-conta {
    margin-top: 20px;
    border-top: 1px solid var(--linha);
    padding-top: 14px;
}

.detalhe-conta summary {
    cursor: pointer;
    color: var(--tinta-media);
    font-size: 14px;
}

.voltar-passo { font-size: 14px; }

.chamada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-left: 5px solid var(--acao);
    border-radius: var(--raio);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.chamada p { margin: 0; color: var(--tinta-media); }
.chamada strong { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 2px; }

@media (max-width: 860px) {
    .botao-grande { margin-left: 0; width: 100%; text-align: center; }
    .acoes-passo .botao { width: 100%; text-align: center; }
}

/* ---------------- Extrato e acerto rápido ---------------- */

.extrato-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--linha);
}

.extrato-linha:first-of-type { border-top: none; }

.extrato-texto { min-width: 0; }

.extrato-titulo { margin: 0; font-size: 15px; }
.extrato-titulo a { text-decoration: none; }
.extrato-titulo a:hover { text-decoration: underline; }

.extrato-detalhe {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--tinta-fraca);
}

.extrato-saldo { text-align: right; white-space: nowrap; }

.extrato-saldo strong {
    display: block;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.extrato-saldo span {
    font-size: 12px;
    color: var(--tinta-fraca);
}

.marca-acerto {
    display: inline-block;
    font-size: 11px;
    color: var(--acao);
    background: var(--fundo-ok);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 6px;
    vertical-align: 1px;
}

.acerto-frase {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 4px;
}

.campo-no-texto {
    width: 130px;
    display: inline-block;
    margin: 0 2px;
    font-size: 18px;
    padding: 4px 8px;
}

/* ---------------------------------------------------------------
   Celular: tabela vira lista de cartões
   A tabela marcada com a classe "cartoes" deixa de rolar para o lado
   e cada linha vira um bloco, com o nome da coluna na frente do dado.
   --------------------------------------------------------------- */

@media (max-width: 620px) {

    table.cartoes thead { display: none; }

    table.cartoes,
    table.cartoes tbody,
    table.cartoes tr,
    table.cartoes td {
        display: block;
        width: 100%;
    }

    table.cartoes tr {
        border: 1px solid var(--linha);
        border-radius: var(--raio);
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--papel);
    }

    table.cartoes td {
        border: none;
        padding: 5px 0;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
    }

    table.cartoes td::before {
        content: attr(data-rotulo);
        color: var(--tinta-fraca);
        font-size: 13px;
        text-align: left;
        flex: 0 0 auto;
    }

    table.cartoes td:empty { display: none; }

    table.cartoes td.numero { text-align: right; }

    table.cartoes td.acoes {
        justify-content: flex-end;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid var(--linha);
        gap: 8px;
    }

    table.cartoes td.acoes::before { content: ''; }

    table.cartoes td input,
    table.cartoes td select {
        max-width: 160px;
        width: 160px;
    }

    table.cartoes tr.total {
        background: #f7f9fb;
        border-color: var(--linha);
    }

    table.cartoes tr.total td { font-weight: 600; }

    /*
     * A tabela que vira cartão não precisa rolar de lado. A que NÃO
     * vira (uma tabela sem a classe cartoes) precisa — senão ela
     * empurra a página inteira e o celular rola de lado. 1.24.4
     */
    .tabela-rolagem:has(table.cartoes) { overflow-x: visible; }
}

/* ---------------- Ajustes gerais de celular ---------------- */

@media (max-width: 860px) {

    .menu {
        width: 270px;
        left: -280px;
        padding-top: 14px;
    }

    .menu a {
        padding: 12px 20px;
        font-size: 16px;
    }

    .menu-rodape { padding-bottom: 14px; }

    .menu-fechar {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        color: #9fb0c4;
        font-size: 22px;
        line-height: 1;
        padding: 6px 10px;
        cursor: pointer;
    }

    .cartao { padding: 16px 14px; }

    .cartao-titulo { margin-bottom: 12px; }

    .resumo-linha { gap: 10px; }
    .resumo-item { flex: 1 1 calc(50% - 5px); }

    .linha-campos { gap: 10px; }
    .linha-campos > label,
    .linha-campos > label.estreito { flex: 1 1 100%; }

    /*
     * A CAIXINHA DE PERÍODO NO CELULAR (1.37.0)
     *
     * Tentei pôr as duas datas lado a lado para encurtar o bloco, e o
     * navegador mostrou que não dá: o campo 'date' do celular tem o
     * dd/mm/aaaa mais o ícone do calendário dentro, e não encolhe
     * abaixo de uns 170px. Dois deles não cabem nos 322px que sobram
     * dentro do cartão, então um descia e o outro ficava dividindo a
     * linha com o VER — pior do que empilhado, porque fica torto.
     *
     * Ficou tudo de uma linha cada, inclusive o VER, que no dedo é
     * melhor largo. É o preço desta forma de filtro no celular, e ele
     * escolheu sabendo: no computador ela cabe numa linha só.
     */
    .caixa-periodo .campo-periodo,
    .caixa-periodo .campo-ver { flex: 1 1 100%; }

    /*
     * O rótulo já ocupava a linha toda; quem ficava pequeno era o botão
     * dentro dele, que é inline e encolhe no tamanho da palavra "Ver".
     * Botão de 57px num celular é botão que o dedo erra.
     */
    .caixa-periodo .campo-ver .botao { width: 100%; text-align: center; }

    .linha-loja input { width: 120px; font-size: 18px; }

    .escolha { flex: 1 1 calc(50% - 4px); justify-content: center; }

    .acerto-frase { font-size: 17px; line-height: 2.1; }
    .campo-no-texto { width: 120px; font-size: 17px; }

    .extrato-linha { flex-wrap: wrap; }
    .extrato-texto { flex: 1 1 100%; }
    .extrato-saldo { flex: 1 1 100%; text-align: left; margin-top: 4px; }
    .extrato-saldo strong { display: inline; margin-right: 6px; }

    .passos { gap: 6px; }
    .passo { font-size: 12px; padding: 4px 10px; }

    .saldo-valor { font-size: 26px; }
    .chamada { flex-direction: column; align-items: stretch; }
    .chamada .botao { width: 100%; text-align: center; }
}

.menu-fechar { display: none; }

/* ===============================================================
   Versão 1.8.0 — menu em sanfona, extrato mais claro e
   relatórios com barra de comparação.
   =============================================================== */

/* ---------------- Menu: itens soltos e módulos ---------------- */

.menu-solto { margin-bottom: 4px; }

.menu-modulo {
    margin-bottom: 2px;
}

.menu-modulo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 20px;
    color: #eef2f7;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-left: 3px solid transparent;
    min-height: 40px;
}

.menu-modulo > summary::-webkit-details-marker { display: none; }
.menu-modulo > summary::marker { content: ''; }

.menu-modulo > summary::after {
    content: '▸';
    color: #7d8ea2;
    font-size: 11px;
    transition: transform .15s ease;
}

.menu-modulo[open] > summary::after { transform: rotate(90deg); }
.menu-modulo > summary:hover { background: rgba(255, 255, 255, .05); }
.menu-modulo[open] > summary { color: #fff; }

.menu-modulo > ul {
    padding: 2px 0 8px;
}

.menu-modulo > ul a {
    padding-left: 34px;
    font-size: 13.5px;
}

/* ---------------- Extrato: o que mudou em cada linha ---------------- */

.extrato-selo {
    flex: 0 0 74px;
    align-self: flex-start;
    height: 22px;
    border-radius: 5px;
    background: var(--tinta-media);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extrato-selo.e-acerto { background: var(--positivo); }

.extrato-saldo span { display: block; }

.extrato-saldo .mudou {
    color: var(--tinta-fraca);
    font-size: 12px;
}

/* ---------------- Relatórios: comparação por loja ---------------- */

.comparar-loja { margin-bottom: 14px; }
.comparar-loja:last-child { margin-bottom: 0; }

.comparar-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 4px;
}

.comparar-topo strong { font-variant-numeric: tabular-nums; }

.barra-comparar {
    height: 10px;
    border-radius: 5px;
    background: #e6ebf1;
    overflow: hidden;
}

.barra-comparar i {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.frase-resumo {
    background: var(--fundo-ok);
    border: 1px solid #d4e6de;
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}

/* ---------------- Saldo: quem paga para quem ---------------- */

.saldo-fluxo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 8px 0 0;
}

.etiqueta-loja {
    display: inline-flex;
    align-items: center;
    background: var(--pagina);
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.saldo-seta { color: var(--tinta-fraca); font-size: 14px; }

/* ---------------- Cartões de aviso e confirmação ---------------- */

.cartao-confirmar {
    border-left: 4px solid var(--negativo);
}

.cartao-confirmar h2 { margin-bottom: 6px; }

/* ---------------- Botões dentro das tabelas ---------------- */

td.acoes .botao,
td.acoes .botao-pequeno {
    margin-left: 6px;
}

td.acoes .botao:first-child { margin-left: 0; }

/* Linha de botões separada, para o dedo não errar no celular */
.linha-botoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}

/* ---------------- Formulário em blocos (tela de carga) ---------------- */

.bloco-campos {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px 15px;
    margin-bottom: 14px;
    background: #fbfcfd;
}

.bloco-campos > .bloco-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-media);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 10px;
}

/* ---------------- Sobre o sistema ---------------- */

.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.ficha-item {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 14px;
}

.ficha-item span {
    display: block;
    font-size: 11.5px;
    color: var(--tinta-fraca);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 2px;
}

.ficha-item strong { font-size: 19px; font-weight: 600; }
.ficha-item em { font-style: normal; font-size: 13px; color: var(--tinta-media); display: block; }

@media (max-width: 620px) {
    .linha-botoes .botao { width: 100%; text-align: center; }
    td.acoes .botao { margin-left: 0; margin-top: 6px; width: 100%; text-align: center; }
    .extrato-selo { flex: 0 0 68px; }
}

/* Ajuste fino do extrato com o selo na frente */
.extrato-linha { align-items: flex-start; }
.extrato-texto { flex: 1 1 auto; }

@media (max-width: 620px) {
    .extrato-linha { flex-wrap: wrap; }
    .extrato-texto { flex: 1 1 calc(100% - 82px); }
    .extrato-saldo { flex: 1 1 100%; text-align: left; margin-top: 6px; padding-left: 82px; }
    .extrato-saldo strong { display: inline; margin-right: 6px; }
    .extrato-saldo .mudou { display: inline; }
}

/* Chamada: título e frase em linhas próprias, sem depender do <strong> */
.chamada-titulo {
    margin: 0 0 2px;
    color: var(--tinta);
    font-size: 17px;
    font-weight: 600;
}
.chamada-texto { margin: 0; color: var(--tinta-media); }

/* ---------------- Impressão do relatório ---------------- */

@media print {
    .menu, .topo, .nao-imprimir, .botao-ajuda, .botao-menu, .rodape { display: none !important; }
    body { background: #fff; }
    .conteudo { padding: 0; max-width: none; }
    .cartao { break-inside: avoid; border-color: #ccc; box-shadow: none; }
    .detalhe-conta { display: none; }
    a { color: inherit; text-decoration: none; }
}

/* ===============================================================
   Versão 1.8.1 — passada de legibilidade.

   Nada aqui muda o desenho das telas: só o tamanho da letra, o
   contraste do cinza e o espaço entre as linhas. Vem no fim do
   arquivo de propósito, porque o que vem depois é o que vale.
   =============================================================== */

:root {
    /* Os dois cinzas ficaram escuros o bastante para ler no celular,
       ao sol, sem forçar a vista. */
    --tinta-media: #3c4757;
    --tinta-fraca: #5b6779;
    --linha: #d6dde5;
}

body {
    font-size: 16px;
    line-height: 1.55;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

/* ---------------- Cartões com mais ar ---------------- */

.cartao {
    padding: 22px 24px;
    margin-bottom: 20px;
}

.cartao-titulo { margin-bottom: 18px; }

.cartao-titulo p {
    margin: 4px 0 0;
    color: var(--tinta-media);
    font-size: 14.5px;
}

.explica {
    color: var(--tinta-media);
    font-size: 14.5px;
    margin: -2px 0 16px;
}

/* ---------------- Tabelas: linha mais alta e listrada ---------------- */

table { font-size: 15px; }

th, td {
    padding: 13px 12px;
}

th {
    color: var(--tinta-media);
    font-size: 13.5px;
    font-weight: 600;
    border-bottom: 2px solid var(--linha);
}

/* Uma linha sim, outra não, bem de leve: é o que faz o olho não
   pular de linha numa tabela larga. */
table tbody tr:nth-of-type(even):not(.total) td {
    background: #f8fafb;
}

table tbody tr.total td {
    background: #eef2f6;
    border-top: 2px solid #c8d2dd;
}

/* Dinheiro e quantidade sempre um pouco mais firmes que o texto */
td.numero { font-weight: 600; }
th.numero { font-weight: 600; }

.vazio { font-size: 15px; padding: 24px 0; }

/* ---------------- Números em destaque ---------------- */

.resumo-item { padding: 16px 18px; }

.resumo-item span {
    font-size: 13.5px;
    color: var(--tinta-media);
    margin-bottom: 4px;
}

.resumo-item strong { font-size: 23px; }

.ficha-item { padding: 15px 17px; }
.ficha-item span { font-size: 12.5px; color: var(--tinta-media); }
.ficha-item em { font-size: 13.5px; margin-top: 2px; }

.saldo { padding: 24px 26px; }
.saldo-frase { font-size: 16px; }
.saldo-valor { font-size: 38px; }

/* ---------------- Formulários ---------------- */

label {
    font-size: 14.5px;
    color: var(--tinta-media);
    margin-bottom: 14px;
}

.linha-campos { gap: 16px; }

/* O título de cada bloco da tela de carga era maiúscula pequena,
   que cansa de ler. Virou frase normal, do tamanho do resto. */
.bloco-campos > .bloco-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.bloco-campos {
    padding: 16px 18px;
    margin-bottom: 16px;
}

/* ---------------- Menu ---------------- */

.menu a { font-size: 15px; padding: 9px 20px; }
.menu-modulo > summary { font-size: 15px; }
.menu-modulo > ul a { font-size: 14.5px; }

/* ---------------- Extrato ---------------- */

.extrato-linha { padding: 15px 0; }
.extrato-titulo { font-size: 16px; }

.extrato-detalhe {
    font-size: 14.5px;
    color: var(--tinta-media);
    margin-top: 3px;
}

.extrato-saldo strong { font-size: 17px; }
.extrato-saldo span { font-size: 13.5px; }
.extrato-saldo .mudou { font-size: 13.5px; margin-top: 2px; }

/* ---------------- Frases e avisos ---------------- */

.frase-resumo { font-size: 16px; line-height: 1.65; padding: 16px 18px; }
.chamada-titulo { font-size: 18px; }
.chamada-texto { font-size: 15px; }
.aviso { font-size: 15px; }
.comparar-topo { font-size: 15px; }
.barra-comparar { height: 12px; }

/* ---------------- Celular ---------------- */

@media (max-width: 620px) {
    /* Em bloco, cada linha já é um cartão: a listra atrapalharia */
    table tbody tr:nth-of-type(even):not(.total) td { background: transparent; }

    table.cartoes tr { padding: 14px 15px; margin-bottom: 12px; }
    table.cartoes td { padding: 7px 0; }
    table.cartoes td::before { font-size: 13.5px; color: var(--tinta-media); }

    .cartao { padding: 18px 16px; }
    .saldo { padding: 20px 18px; }
    .saldo-valor { font-size: 34px; }
}

/* A fileira de números precisa de um respiro antes do cartão de baixo */
.resumo-linha { margin-bottom: 20px; }
.ficha { margin-bottom: 20px; }

@media (max-width: 620px) {
    /* No celular a linha de Total virava três blocos soltos, com
       rótulo vazio. Aqui ela volta a ser uma linha só. */
    table.cartoes tr.total {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 14px;
    }

    table.cartoes tr.total td {
        display: inline;
        width: auto;
        padding: 0;
        border: none;
    }

    table.cartoes tr.total td::before { content: ''; }
}

@media (max-width: 620px) {
    /* O rótulo fica à esquerda e TODO o resto junto à direita.
       Sem isso, a bolinha colorida da loja ficava sozinha no meio. */
    table.cartoes td {
        justify-content: flex-end;
        gap: 8px;
    }
    table.cartoes td::before { margin-right: auto; }
}

/* ===============================================================
   Versão 1.9.0 — sinais de que o sistema está trabalhando
   =============================================================== */

/* A barrinha fina no alto da tela durante a troca de página */
.barra-carregando {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #35c08f;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .25s ease;
}

.barra-carregando.ativa { opacity: 1; }

/* O botão que está salvando */
.botao.trabalhando,
.botao.trabalhando:hover {
    opacity: .72;
    cursor: progress;
}

/* Quem não gosta de animação não vê nenhuma */
@media (prefers-reduced-motion: reduce) {
    .barra-carregando { transition: none; }
    .menu-modulo > summary::after { transition: none; }
}

/* ===============================================================
   Versão 1.9.1 — o pé do menu

   "Lojas do grupo" desceu para o pé da lista, junto do nome de
   quem está usando: é cadastro da plataforma inteira, não de um
   módulo, e ali fica separado dos módulos por uma linha.
   =============================================================== */

.menu-rodape {
    display: block;
    margin-top: auto;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.menu-rodape-itens {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}

.menu-pessoa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
    color: #9fb0c4;
}

.menu-pessoa a {
    color: #9fb0c4;
    text-decoration: none;
    padding: 0;
    border: none;
}

.menu-pessoa a:hover { color: #fff; background: none; }

@media (max-width: 860px) {
    .menu-pessoa { padding-bottom: 14px; }
}

/* ===============================================================
   Versão 1.10.0 — módulo de influenciadores
   =============================================================== */

/* O selo que diz o tipo do lançamento */
.selo-tipo {
    display: inline-block;
    border-radius: 5px;
    padding: 2px 9px;
    margin-right: 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    vertical-align: 1px;
}

.selo-tipo.t-combinado { background: var(--tinta-media); }
.selo-tipo.t-peca      { background: #1b6fb5; }
.selo-tipo.t-dinheiro  { background: var(--positivo); }

.atencao { color: var(--atencao); }

/* ===============================================================
   Versão 1.11.0 — as entregas (visitas e vídeo)
   =============================================================== */

.selo-tipo.t-visita { background: #6b4fa8; }
.selo-tipo.t-video  { background: #8a6100; }

/* Cada combinado, com as entregas dele dentro */
.combinado {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin-bottom: 14px;
    background: #fbfcfd;
}

.combinado:last-of-type { margin-bottom: 0; }

.combinado-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.combinado-topo strong { font-size: 16px; }

/* A etiqueta "3 de 4 visitas" / "tudo entregue" */
.marca-entrega {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.marca-entrega.e-ok    { background: var(--fundo-ok);      color: var(--positivo); }
.marca-entrega.e-falta { background: var(--fundo-atencao); color: var(--atencao); }

/* A data + botão de marcar, lado a lado */
.marcar-entrega {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.marcar-entrega input[type=date] {
    width: auto;
    min-width: 150px;
    margin-top: 0;
}

/* O aviso dentro do quadro do saldo */
.saldo-pendencia {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--fundo-atencao);
    border: 1px solid #ecdcb3;
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--atencao);
}

.saldo-pendencia a { color: var(--atencao); }

@media (max-width: 620px) {
    .marcar-entrega { width: 100%; }
    .marcar-entrega input[type=date] { flex: 1 1 auto; }
    .combinado { padding: 14px 13px; }
}

/* ===============================================================
   Versão 1.12.0 — o combinado da pessoa e o andamento do mês
   =============================================================== */

.metas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

.meta-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 5px;
}

.meta-topo span { color: var(--tinta-media); }
.meta-topo strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 620px) {
    .metas { grid-template-columns: 1fr; gap: 12px; }
}

/* ===============================================================
   Versão 1.13.0 — o período não é o mês do calendário
   =============================================================== */

/* O período que está correndo agora fica em destaque */
.combinado-corrente {
    border-left: 4px solid var(--acao);
    background: #f7fbfa;
}

/* ===============================================================
   Versão 1.14.0 — o painel dos influenciadores

   Um cartão por pessoa, com tudo do período de agora: as visitas
   como bolinhas de um clique, a barra do quanto já andou e os dois
   campos de lançar. É a tela que se usa todo dia.
   =============================================================== */

.ficha-influ {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-left: 5px solid var(--acao);
    border-radius: var(--raio);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--sombra);
}

.ficha-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ficha-topo h2 { margin: 0; font-size: 19px; }

.ficha-quem {
    margin: 2px 0 0;
    color: var(--tinta-media);
    font-size: 14.5px;
}

.ficha-quem .ponto { margin-left: 10px; }

.ficha-valor { text-align: right; }

.ficha-valor strong {
    display: block;
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ficha-valor span {
    display: block;
    font-size: 13.5px;
    color: var(--tinta-media);
}

/* ---------------- As bolinhas das visitas ---------------- */

.entregas-bolinhas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bolinha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 70px;
    min-height: 54px;
    padding: 6px 10px;
    border: 2px dashed var(--linha);
    border-radius: 10px;
    background: var(--pagina);
    color: var(--tinta-fraca);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.bolinha:hover { border-color: var(--acao); color: var(--tinta-media); }

.bolinha-nome { font-size: 13px; font-weight: 600; }
.bolinha-data { font-size: 11.5px; font-variant-numeric: tabular-nums; }

.bolinha.feita {
    border-style: solid;
    border-color: var(--positivo);
    background: var(--fundo-ok);
    color: var(--positivo);
}

.bolinha.feita.b-video {
    border-color: var(--atencao);
    background: var(--fundo-atencao);
    color: var(--atencao);
}

/* ---------------- A frase do que falta ---------------- */

.ficha-falta {
    margin: 0 0 14px;
    font-size: 15px;
}

.ficha-falta.atencao  { color: var(--atencao); }
.ficha-falta.negativo { color: var(--negativo); }
.ficha-falta.positivo { color: var(--positivo); }

/* ---------------- Lançar sem sair do painel ---------------- */

.lancar-rapido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--linha);
}

.lancar-rapido form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lancar-rapido .rotulo-rapido {
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-media);
    white-space: nowrap;
}

.lancar-rapido input[type=text] {
    margin-top: 0;
    min-height: 40px;
    padding: 8px 10px;
}

.lancar-rapido input.numero { flex: 0 0 104px; width: 104px; text-align: right; }
.lancar-rapido input:not(.numero) { flex: 1 1 100px; min-width: 90px; }

/* ---------------- O pé do cartão ---------------- */

.ficha-pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--linha);
}

.ficha-pe .explica { margin: 0; font-size: 13.5px; }

@media (max-width: 720px) {
    .lancar-rapido { grid-template-columns: 1fr; }
    .ficha-influ { padding: 18px 16px; }
    .ficha-topo { flex-direction: column; gap: 8px; }
    .ficha-valor { text-align: left; }
    .bolinha { min-width: 64px; flex: 1 1 64px; }
    .lancar-rapido input.numero { flex: 1 1 90px; width: auto; }
}

/* ===============================================================
   Versão 1.14.1 — escolher o dia da visita

   O clique continua rápido: o campo já vem com hoje. Quem só foi
   lançar depois muda o dia ali e então clica na bolinha.
   =============================================================== */

.entregas-linha {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #f7f9fb;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.data-da-visita {
    display: block;
    margin: 0;
    flex: 0 0 auto;
}

.data-da-visita > span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-media);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.data-da-visita input[type=date] {
    margin-top: 0;
    width: auto;
    min-width: 160px;
    min-height: 54px;
    font-size: 15px;
    border-color: #c3ccd7;
}

.entregas-linha .entregas-bolinhas {
    margin-bottom: 0;
    flex: 1 1 260px;
    align-items: flex-end;
}

/* O "tirar a marca" vira um x no canto da própria bolinha */
.bolinha-caixa { position: relative; display: inline-block; }

.bolinha-x {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--papel);
    color: var(--tinta-fraca);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(24,32,44,.12);
}

.bolinha-x:hover { color: var(--negativo); border-color: #e6c6c4; }

@media (max-width: 620px) {
    .entregas-linha { padding: 12px; gap: 10px; }
    .data-da-visita { flex: 1 1 100%; }
    .data-da-visita input[type=date] { width: 100%; min-width: 0; }
}

/* ===============================================================
   Versão 1.15.0 — o OK do período e o encerramento
   =============================================================== */

/* O selo grande de "cumpriu tudo" */
.selo-ok {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--fundo-ok);
    border: 1px solid #bfe0cf;
    border-radius: var(--raio);
    padding: 12px 16px;
    margin: 0 0 14px;
}

.selo-ok-marca {
    flex: 0 0 auto;
    background: var(--positivo);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 8px 14px;
    border-radius: 999px;
}

.selo-ok strong { display: block; font-size: 16px; color: var(--positivo); }
.selo-ok span   { display: block; font-size: 13.5px; color: var(--tinta-media); }

/* A linha do botão de encerrar */
.encerrar-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #f7f9fb;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.encerrar-linha.ja-acabou {
    background: var(--fundo-atencao);
    border-color: #ecdcb3;
}

.encerrar-linha .explica { flex: 1 1 220px; }

/* Períodos passados que ficaram sem encerrar */
.esperando-encerrar {
    background: var(--fundo-atencao);
    border: 1px solid #ecdcb3;
    border-radius: var(--raio);
    padding: 13px 15px;
    margin-top: 14px;
}

.esperando-encerrar > p {
    margin: 0;
    font-size: 14.5px;
    color: var(--atencao);
    font-weight: 600;
}

@media (max-width: 620px) {
    .selo-ok { padding: 12px; gap: 10px; }
    .encerrar-linha .botao { width: 100%; text-align: center; }
}

/* ===============================================================
   Versão 1.16.0 — cada um no seu

   O painel virou só a escolha: um quadro por pessoa, sem campo
   nem botão. Clicando, abre a tela dela, com tudo o que é dela e
   nada do resto.
   =============================================================== */

/* ---------------- A grade de quem está ativo ---------------- */

.grade-influ {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.cartao-pessoa {
    display: block;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: var(--tinta);
    box-shadow: var(--sombra);
    transition: border-color .15s ease, transform .1s ease;
    position: relative;
}

.cartao-pessoa:hover {
    border-color: var(--acao);
    transform: translateY(-1px);
}

.cartao-pessoa.p-ok { border-left: 5px solid var(--positivo); }

.pessoa-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.inicial {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pessoa-nome { min-width: 0; }
.pessoa-nome strong { display: block; font-size: 17px; line-height: 1.3; }
.pessoa-nome span   { display: block; font-size: 13.5px; color: var(--tinta-media); }

.pessoa-periodo {
    margin: 0 0 8px;
    font-size: 13.5px;
    color: var(--tinta-media);
    font-variant-numeric: tabular-nums;
}

.pessoa-valores {
    margin: 8px 0 10px;
    font-variant-numeric: tabular-nums;
}

.pessoa-valores strong { font-size: 19px; font-weight: 600; }
.pessoa-valores span   { font-size: 13.5px; color: var(--tinta-media); }

.pessoa-estado {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pessoa-estado.e-ok    { color: var(--positivo); }
.pessoa-estado.e-falta { color: var(--atencao); }

.mini-ok {
    background: var(--positivo);
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
}

.pessoa-encerrar {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--atencao);
    background: var(--fundo-atencao);
    border-radius: 6px;
    padding: 5px 9px;
    display: inline-block;
}

.pessoa-aviso {
    margin: 0;
    font-size: 14px;
    color: var(--tinta-fraca);
}

.pessoa-abrir {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 13px;
    color: var(--acao);
    font-weight: 600;
}

/* ---------------- O cabeçalho da pessoa ---------------- */

.voltar-lista { margin: 0 0 16px; font-size: 15px; }

.voltar-lista a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 16px;
    text-decoration: none;
    font-weight: 600;
    color: var(--acao, #0e5c4f);
    background: var(--papel, #fff);
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 10px;
}

.voltar-lista a:hover {
    border-color: var(--acao, #0e5c4f);
    background: #f3f8f6;
}

.voltar-lista a .seta { font-size: 18px; line-height: 1; }

.cabeca-pessoa {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--sombra);
}

.inicial-grande {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: #fff;
    font-size: 27px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cabeca-quem { flex: 1 1 200px; min-width: 0; }
.cabeca-quem h2 { margin: 0; font-size: 23px; }
.cabeca-quem p  { margin: 3px 0 0; color: var(--tinta-media); font-size: 14.5px; }

.cabeca-saldo { text-align: right; }
.cabeca-saldo strong {
    display: block;
    font-size: 27px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.cabeca-saldo span { display: block; font-size: 13px; color: var(--tinta-media); }
.cabeca-saldo.atencao strong  { color: var(--atencao); }
.cabeca-saldo.negativo strong { color: var(--negativo); }

/* ---------------- O período de agora ---------------- */

.periodo-agora { border-left: 5px solid var(--acao); }

.lancar-rapido input[type=date] {
    margin-top: 0;
    min-height: 40px;
    padding: 8px 10px;
    flex: 0 0 150px;
    width: 150px;
}

@media (max-width: 620px) {
    .grade-influ { grid-template-columns: 1fr; }
    .cabeca-pessoa { padding: 18px 16px; }
    .cabeca-saldo { text-align: left; flex: 1 1 100%; }
    .lancar-rapido input[type=date] { flex: 1 1 130px; width: auto; }
}

.pessoa-estado.e-neutro { color: var(--tinta-fraca); font-weight: 400; }

/* Com o campo de data, cada lançamento fica melhor numa linha inteira */
.periodo-agora .lancar-rapido { grid-template-columns: 1fr; gap: 10px; }
.periodo-agora .lancar-rapido form {
    background: #fbfcfd;
    border: 1px solid var(--linha);
    border-radius: 8px;
    padding: 10px 12px;
}
.periodo-agora .lancar-rapido .rotulo-rapido { flex: 0 0 96px; }
.periodo-agora .lancar-rapido input:not(.numero):not([type=date]) { flex: 1 1 140px; }

/* ==========================================================
   1.17.0 — o saldo a haver
   A sobra de um período encerrado não some no meio da conta:
   ela vira um quadro próprio, com de onde veio e como quitar.
   ========================================================== */

.saldo-haver {
    border-left: 4px solid var(--atencao, #8a6100);
}

.saldo-haver.zerado {
    border-left-color: var(--positivo, #1c7a56);
}

.saldo-haver.passou {
    border-left-color: var(--negativo, #a32b23);
}

.saldo-haver .cartao-titulo p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.saldo-numero {
    font-size: 26px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--atencao, #8a6100);
}

.saldo-haver.zerado .saldo-numero { color: var(--positivo, #1c7a56); }
.saldo-haver.passou .saldo-numero { color: var(--negativo, #a32b23); }

.saldo-origens {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    border-top: 1px solid var(--linha, #dde3ea);
}

.saldo-origens li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 9px 2px;
    border-bottom: 1px solid var(--linha, #dde3ea);
    font-size: 15px;
}

.saldo-origens li span { color: var(--tinta-fraca, #7a8699); }
.saldo-origens li strong { white-space: nowrap; }
.saldo-origens .saldo-quitado strong { color: var(--positivo, #1c7a56); }

.saldo-movimentos {
    margin-top: 14px;
    border-top: 1px solid var(--linha, #dde3ea);
    padding-top: 10px;
}

.saldo-movimentos > summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
    padding: 4px 0;
}

.saldo-movimentos ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.saldo-movimentos li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 2px;
    font-size: 14px;
    border-bottom: 1px solid var(--linha, #dde3ea);
}

/* O aviso do que veio descontado do período anterior */
.veio-desconto {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 8px;
    background: var(--fundo-atencao, #fdf5e2);
    border: 1px solid #e8d6a8;
    color: var(--atencao, #8a6100);
    font-size: 15px;
    line-height: 1.45;
}

/* O período que já terminou e espera encerramento */
.esperando-titulo {
    margin: 0 0 4px;
    font-weight: 600;
}

.esperando-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.esperando-conta { min-width: 220px; flex: 1 1 260px; }
.esperando-conta strong { display: block; margin-bottom: 2px; }

/* Em qual conta o lançamento entra, na lista */
.onde-conta {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--tinta-fraca, #7a8699);
}

/* O seletor de período, na correção do lançamento */
.escolher-periodo select {
    width: 100%;
    max-width: 420px;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    background: var(--papel, #fff);
}

/* A etiqueta de saldo no quadro do painel */
.pessoa-saldo {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--atencao, #8a6100);
}

@media (max-width: 860px) {
    .saldo-numero { font-size: 22px; }
    .esperando-item { align-items: flex-start; }
}

/* ==========================================================
   1.17.1 — o que ficou passa para o período seguinte
   Um número só, que anda de período em período: o quadro
   separado de saldo saiu, e o que veio de antes aparece
   dentro do próprio período.
   ========================================================== */

.veio-de-antes {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.veio-de-antes.ficou {
    background: var(--fundo-atencao, #fdf5e2);
    border: 1px solid #e8d6a8;
    color: var(--atencao, #8a6100);
}

.veio-de-antes.passou {
    background: var(--fundo-erro, #fbeceb);
    border: 1px solid #efc9c6;
    color: var(--negativo, #a32b23);
}

.periodo-agora .cartao-titulo p strong { color: var(--tinta, #18202c); }

/* No painel, a linha que diz que o período já traz valor de antes */
.pessoa-veio {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--atencao, #8a6100);
}

/* Os dois botões de encerrar, quando faltou entrega */
.encerrar-linha .botao + .botao { margin-left: 8px; }

@media (max-width: 860px) {
    .encerrar-linha .botao + .botao { margin-left: 0; }
}

/* ==========================================================
   1.18.0 — cadastro enxuto e período que nunca falta
   No cadastro ficam à vista só o nome e o valor combinado.
   Sem período aberto, a tela pede um clique em vez de mostrar
   número que não quer dizer nada.
   ========================================================== */

.mais-dados {
    margin: 4px 0 14px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: var(--raio, 10px);
    background: #fafbfc;
}

.mais-dados > summary {
    cursor: pointer;
    padding: 11px 14px;
    font-size: 15px;
    color: var(--tinta-media, #4a5568);
    list-style-position: inside;
}

.mais-dados[open] > summary {
    border-bottom: 1px solid var(--linha, #dde3ea);
    margin-bottom: 12px;
}

.mais-dados > :not(summary) { padding: 0 14px 14px; }

.comecar-periodo { border-left: 4px solid var(--acao, #0e5c4f); }

.comecar-periodo .cartao-titulo p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

@media (max-width: 860px) {
    .comecar-periodo .linha-botoes .botao { width: 100%; }
}

/* ==========================================================
   1.18.1 — o histórico com cara de período
   Cada mês que passou aparece igual ao painel do período de
   agora, só que travado. Quem quiser mexer clica em
   "Abrir para editar".
   ========================================================== */

.titulo-historico {
    margin: 26px 0 12px;
    font-size: 19px;
    color: var(--tinta-media, #4a5568);
}

.periodo-antigo { border-left: 4px solid var(--linha, #dde3ea); }
.periodo-antigo.editando { border-left-color: var(--acao, #0e5c4f); }

.periodo-antigo .cartao-titulo h2 { font-size: 18px; }

.periodo-antigo .cartao-titulo p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

/* As bolinhas travadas: mesma cara, sem ser botão */
.entregas-linha.travada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: #f7f9fb;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.rotulo-travado {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #7a8699);
}

.bolinha.so-ver {
    /*
     * 1.71.0 — o de quem só olha é IGUAL ao de quem mexe.
     *
     * Ele: *"o visual igual do painel do Fábio"*. O opacity de .95
     * deixava quase igual, que é pior do que diferente: a pessoa
     * fica achando que a tela dela está meio apagada.
     */
    cursor: default;
}

/* O que foi lançado, em lista simples */
.lista-lancamentos {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border-top: 1px solid var(--linha, #dde3ea);
}

.lista-lancamentos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--linha, #dde3ea);
    font-size: 15px;
}

.lista-lancamentos .quando {
    flex: 0 0 84px;
    color: var(--tinta-fraca, #7a8699);
    font-size: 14px;
}

.lista-lancamentos .oque { flex: 1 1 160px; }
.lista-lancamentos strong { white-space: nowrap; }
.lista-lancamentos .mexer { display: flex; gap: 6px; }

.fecha-periodo {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    background: #f7f9fb;
}

.fecha-periodo.atencao { background: var(--fundo-atencao, #fdf5e2); color: var(--atencao, #8a6100); }
.fecha-periodo.negativo { background: var(--fundo-erro, #fbeceb); color: var(--negativo, #a32b23); }
.fecha-periodo.positivo { background: var(--fundo-ok, #eaf6f0); color: var(--positivo, #1c7a56); }

.corrigir-lancamento {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid var(--linha, #dde3ea);
}

.corrigir-lancamento h3 { margin: 0 0 10px; font-size: 16px; }

@media (max-width: 860px) {
    .lista-lancamentos .quando { flex: 1 1 100%; }
    .lista-lancamentos .mexer { flex: 1 1 100%; }
}

/* ==========================================================
   1.18.2 — as datas por extenso
   O período conta a história em uma linha: em que dias ela
   veio, quando saiu o vídeo, e o que saiu dia a dia.
   ========================================================== */

.datas-por-extenso {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--fundo-ok, #eaf6f0);
    color: var(--positivo, #1c7a56);
    font-size: 15px;
    line-height: 1.5;
}

.rotulo-lista {
    margin: 0 0 2px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #7a8699);
}

/* Períodos que ainda vão começar */
.proximos { border-left: 4px solid var(--linha, #dde3ea); }

.proximos .cartao-titulo p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.linha-proximo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px;
    border-top: 1px solid var(--linha, #dde3ea);
    font-size: 15px;
}

.linha-proximo span { color: var(--tinta-media, #4a5568); }

/* ==========================================================
   1.18.3 — abrir outro período, bonito de clicar
   O quadro deixou de ser uma linha miúda: virou um cartão com
   barra de abrir grande, e avisa onde o período vai cair
   antes de a pessoa clicar.
   ========================================================== */

.abrir-periodo { padding: 0; overflow: hidden; }

.abrir-periodo > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    min-height: 44px;
    background: #f7f9fb;
    transition: background .15s;
}

.abrir-periodo > summary::-webkit-details-marker { display: none; }

.abrir-periodo > summary::after {
    content: '+ abrir';
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--acao, #0e5c4f);
}

.abrir-periodo[open] > summary::after { content: '− fechar'; }

.abrir-periodo > summary:hover { background: #eef2f6; }

.abrir-periodo { position: relative; }

.abrir-titulo {
    font-size: 17px;
    font-weight: 600;
    color: var(--tinta, #18202c);
}

.abrir-sub {
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.abrir-periodo[open] > summary {
    border-bottom: 1px solid var(--linha, #dde3ea);
}

.abrir-corpo { padding: 16px 18px 18px; }

.onde-vai {
    margin: 4px 0 14px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.45;
    background: #f1f4f8;
    color: var(--tinta-media, #4a5568);
}

.onde-vai.agora   { background: var(--fundo-ok, #eaf6f0);     color: var(--positivo, #1c7a56); }
.onde-vai.futuro  { background: #f1f4f8;                      color: var(--tinta-media, #4a5568); }
.onde-vai.passado { background: var(--fundo-atencao, #fdf5e2); color: var(--atencao, #8a6100); }
.onde-vai.erro    { background: var(--fundo-erro, #fbeceb);   color: var(--negativo, #a32b23); }

.botao-grande {
    font-size: 16px;
    padding: 13px 22px;
}

@media (max-width: 860px) {
    .abrir-periodo > summary::after { position: static; margin-top: 6px; }
    .botao-grande { width: 100%; }
}

/* ==========================================================
   1.18.4 — destravar sem sair do lugar
   O quadro do histórico já vem com as duas caras prontas.
   Clicar em "Abrir para editar" só troca uma pela outra, ali
   mesmo: a tela não recarrega e o período de agora fica onde
   está.
   ========================================================== */

.periodo-antigo .so-editando { display: none; }
.periodo-antigo.editando .so-travado { display: none; }
.periodo-antigo.editando .so-editando { display: block; }
.periodo-antigo.editando form.so-editando.entregas-linha { display: flex; }
.periodo-antigo.editando .lista-lancamentos .mexer.so-editando { display: flex; }

/* O botão de destravar, com peso de botão de verdade */
.periodo-antigo .destravar { font-weight: 600; }

/* O quadro travado e o de agora com a mesma largura de respiro */
.periodo-antigo .meta-topo { font-size: 14px; }

/* ==========================================================
   1.18.5 — o Histórico aparece mesmo vazio
   Antes, sem período encerrado, a seção inteira sumia — e
   quem procurava o "Abrir para editar" não achava nada, sem
   entender por quê.
   ========================================================== */

.historico-vazio { border-left: 4px solid var(--linha, #dde3ea); }
.historico-vazio p { margin: 0; font-size: 15px; line-height: 1.5; }

/* ==========================================================
   1.18.8 — os campos de lançar se recolhem
   Depois do primeiro lançamento do período, os dois campos
   somem atrás de um botão. Quem ainda não lançou nada vê
   eles abertos, que é a primeira coisa a fazer.
   ========================================================== */

.lancar-mais { margin-bottom: 14px; }

.lancar-mais > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    background: var(--papel, #fff);
    font-size: 15px;
    font-weight: 600;
    color: var(--acao, #0e5c4f);
    transition: background .15s;
}

.lancar-mais > summary::-webkit-details-marker { display: none; }
.lancar-mais > summary:hover { background: #f1f4f8; }

/* Aberto, o botão vira só um rótulo: o que importa são os campos */
.lancar-mais[open] > summary {
    border-color: transparent;
    background: none;
    padding: 0 0 8px;
    min-height: 0;
    font-weight: 600;
    color: var(--tinta-media, #4a5568);
    font-size: 14px;
    cursor: default;
}

.lancar-mais[open] > summary:hover { background: none; }

.lancar-mais .lancar-rapido { margin-bottom: 0; }

@media (max-width: 860px) {
    .lancar-mais > summary { width: 100%; justify-content: center; }
    .lancar-mais[open] > summary { justify-content: flex-start; }
}

/* ==========================================================
   1.19.1 — o que ficou em haver
   O período se encerra na última visita. O vídeo que não saiu
   continua em aberto lá no período encerrado, e este aviso
   leva a pessoa até ele.
   ========================================================== */

.em-haver {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: var(--raio, 10px);
    background: var(--fundo-atencao, #fdf5e2);
    border: 1px solid #e8d6a8;
}

.em-haver-titulo {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--atencao, #8a6100);
}

.em-haver ul { list-style: none; margin: 0; padding: 0; }

.em-haver li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
    color: var(--atencao, #8a6100);
}

.em-haver li a { font-weight: 600; }
.em-haver .explica { color: var(--atencao, #8a6100); opacity: .85; }

/* ==========================================================
   1.20.0 — o valor é por entrega
   A barra passou a mostrar o que ela já ganhou, e o que foi
   pago vira uma linha embaixo dela.
   ========================================================== */

.ja-pago {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.ja-pago strong { color: var(--tinta-media, #4a5568); }

/* ==========================================================
   1.21.0 — a área da influenciadora
   A única tela que abre sem login. Sem menu, sem botão de
   ação: uma coluna centrada, no celular ou no computador.
   ========================================================== */

body.area-publica {
    background: var(--pagina, #eef1f5);
    margin: 0;
    padding: 0;
}

.area-caixa {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.area-publica .cabeca-pessoa {
    background: var(--papel, #fff);
    border-radius: var(--raio, 10px);
    box-shadow: var(--sombra, 0 1px 2px rgba(24,32,44,.06));
    padding: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.area-publica .cabeca-quem h2 { margin: 0; font-size: 22px; }

.area-publica .cabeca-quem p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.area-publica .titulo-historico { margin: 26px 0 12px; }

.area-pe {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--tinta-fraca, #7a8699);
}

/* O quadro do link, na tela da pessoa */
.area-dela { border-left: 4px solid var(--acao, #0e5c4f); }

.area-dela .cartao-titulo p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--tinta-fraca, #7a8699);
}

.caixa-link {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.caixa-link input {
    flex: 1 1 260px;
    font-size: 15px;
    padding: 11px 12px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    background: #f7f9fb;
    color: var(--tinta-media, #4a5568);
}

@media (max-width: 860px) {
    .caixa-link input { flex: 1 1 100%; }
    .caixa-link .botao { width: 100%; }
}

/* ==========================================================
   1.21.1 — endereço com o nome, e senha escolhida por ela
   ========================================================== */

.area-estreita { max-width: 420px; }

.estado-senha {
    margin: 10px 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.estado-senha.com  { background: var(--fundo-ok, #eaf6f0);      color: var(--positivo, #1c7a56); }
.estado-senha.sem  { background: var(--fundo-atencao, #fdf5e2); color: var(--atencao, #8a6100); }

.por-senha { padding: 0; }

.por-senha > summary {
    cursor: pointer;
    list-style: none;
    padding: 15px 18px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--acao, #0e5c4f);
}

.por-senha > summary::-webkit-details-marker { display: none; }
.por-senha[open] > summary { border-bottom: 1px solid var(--linha, #dde3ea); }
.por-senha-corpo { padding: 14px 18px 18px; }

.area-publica label { display: block; margin-bottom: 12px; font-size: 15px; }

.area-publica label input {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 16px;
    padding: 12px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
}

/* ---------------------------------------------------------------
 * Frete: a lista de cargas em quadro (1.23.0)
 *
 * Saiu a tabela larga, que no celular virava um cartão por linha com
 * rótulo repetido em cada célula. Agora o quadro é o desenho, e não
 * uma adaptação dele.
 * --------------------------------------------------------------- */

.topo-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.topo-lista h2 { margin: 0; font-size: 21px; }
.topo-lista p  { margin: 3px 0 0; }

.filtro-rapido { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtro-rapido a {
    border: 1px solid var(--linha, #dde3ea);
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tinta-media, #495363);
    text-decoration: none;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.filtro-rapido a:hover { border-color: var(--marca, #0e5c4f); color: var(--marca, #0e5c4f); }
.filtro-rapido a.ativo {
    background: var(--marca, #0e5c4f);
    border-color: var(--marca, #0e5c4f);
    color: #fff;
}

.grade-cargas { display: grid; gap: 12px; }

.c-carga {
    background: #fff;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 14px;
    padding: 16px 18px;
}
.c-carga.c-vazia { background: #fcfcfd; border-style: dashed; }

.c-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.c-dia   { margin: 0; font-size: 17px; font-weight: 700; color: var(--tinta, #1c2534); }
.c-onde  { margin: 2px 0 0; font-size: 14px; color: var(--tinta-media, #6b7686); }
.c-lado  { text-align: right; }
.c-total { margin: 0; font-size: 19px; font-weight: 700; color: var(--tinta, #1c2534); white-space: nowrap; }
.c-pecas { margin: 2px 0 0; font-size: 13px; color: var(--tinta-fraca, #8590a0); white-space: nowrap; }

.c-trilho {
    display: flex;
    height: 9px;
    border-radius: 99px;
    overflow: hidden;
    background: #eef1f5;
    margin: 14px 0 8px;
}
.c-trilho i { display: block; height: 100%; }

.c-linha { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-media, #5a6475); }
.c-linha strong { color: var(--tinta, #28313f); }

.c-frase { margin: 10px 0 0; font-size: 14px; color: var(--tinta-media, #5a6475); }

.c-marca {
    margin: 12px 0 0;
    display: inline-block;
    background: #fff3d6;
    color: #8a6300;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

.c-pe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
}
.c-pe .c-excluir { margin-left: auto; }

/* ---------------------------------------------------------------
 * Frete: a carga aberta para ver, e não para preencher (1.23.0)
 * --------------------------------------------------------------- */

.cab-carga { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
.cab-carga h2 { margin: 0; font-size: 21px; }
.cab-carga p  { margin: 4px 0 0; }

.bloco-lido { margin-bottom: 14px; }
.bloco-lido .cartao-titulo { margin-bottom: 4px; }
.destaque-divisao { background: #f3f8f6; border-color: #d5e7e0; }

.rotulo-periodo {
    margin: 0 0 10px 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #8590a0);
}

table.lida { width: 100%; border-collapse: collapse; }
table.lida th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #8590a0);
    padding: 0 8px 9px;
}
table.lida td { padding: 11px 8px; border-top: 1px solid #edf0f4; font-size: 15px; color: var(--tinta, #28313f); }
table.lida td.n, table.lida th.n { text-align: right; font-variant-numeric: tabular-nums; }

.fecho-divisao { margin: 14px 0 0; font-size: 16px; font-weight: 600; color: var(--marca, #0e5c4f); }

.linha-valor-lida { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #edf0f4; }
.linha-valor-lida .oq { flex: 1; font-size: 15px; color: var(--tinta, #28313f); }
.linha-valor-lida .oq small { display: block; color: var(--tinta-media, #6b7686); font-size: 13px; margin-top: 2px; }
.linha-valor-lida .vl { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-valor-lida.soma { border-top-width: 2px; border-top-color: var(--linha, #e3e8ee); }

.abrir-mais {
    display: block;
    margin-top: 14px;
    border: 1px dashed #cbd4de;
    background: #fbfcfd;
    border-radius: 11px;
    padding: 13px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--marca, #0e5c4f);
    text-decoration: none;
}
.abrir-mais:hover { border-color: var(--marca, #0e5c4f); background: #f4f8f7; }

@media (max-width: 860px) {
    .topo-lista { flex-direction: column; align-items: stretch; }
    .topo-lista .botao { width: 100%; text-align: center; }
    .filtro-rapido { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .filtro-rapido a { white-space: nowrap; }

    /*
     * Tinha aqui uma regra para a fila de atalhos do perfil do
     * colaborador quebrar em linhas em vez de rolar de lado (1.36.0).
     * Saiu na 1.37.0 junto com a própria fila: o perfil passou a usar
     * uma caixinha de período, que não é fila nenhuma. Regra de
     * aparência sem tela que a use é armadilha para quem vier depois.
     */
    .c-topo { flex-direction: column; gap: 6px; }
    .c-lado { text-align: left; }
    .c-linha { flex-direction: column; gap: 4px; }
    .c-pe { flex-wrap: wrap; }
    .c-pe .c-excluir { margin-left: 0; }
    .cab-carga { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------
 * Influenciadores: as contas do período, sem frase (1.24.0)
 *
 * Saiu a linha corrida "combinado R$ 800,00 + R$ 800,00 que ficou =
 * R$ 1.600,00 · R$ 160,00 por entrega · faltam 15 dias". Três
 * números em caixa lêem-se de relance; a frase, não.
 * --------------------------------------------------------------- */

.contas-do-periodo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}
.contas-do-periodo > div {
    flex: 1 1 140px;
    background: #f7f9fb;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 11px;
    padding: 11px 14px;
}
.contas-do-periodo span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #8590a0);
    margin-bottom: 3px;
}
.contas-do-periodo strong {
    font-size: 19px;
    color: var(--tinta, #1c2534);
    font-variant-numeric: tabular-nums;
}
.contas-do-periodo .soma {
    background: #f3f8f6;
    border-color: #d5e7e0;
}
.contas-do-periodo .soma strong { color: var(--marca, #0e5c4f); }

@media (max-width: 520px) {
    .contas-do-periodo > div { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
 * Celular: tamanho de dedo e letra que dá para ler (1.24.4)
 *
 * Medido em tela de 390px: botão pequeno com 36px de altura, o × da
 * visita com 24, e datas com 11,5px. No dedo, 36px erra; abaixo de
 * 12px a letra cansa. Só no celular — no computador, com o mouse, o
 * tamanho de antes está bom e ocupa menos espaço.
 * --------------------------------------------------------------- */

@media (max-width: 860px) {
    .botao-pequeno { min-height: 44px; padding: 8px 14px; font-size: 14px; }

    /* O × que tira a marca da visita */
    .bolinha-x {
        width: 32px;
        height: 32px;
        min-height: 32px;
        top: -10px;
        right: -10px;
        font-size: 18px;
    }

    /* Links que são ação de verdade, e não texto corrido */
    .em-haver a,
    .aviso a,
    .voltar-lista a,
    .menu-pessoa a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Nada de letra miúda no celular */
    .bolinha-data { font-size: 12.5px; }
    .marca-acerto,
    .selo-tipo,
    .mini-ok,
    .extrato-selo,
    .ficha-item span,
    .c-pecas,
    .explica { font-size: 13px; }

    /* Voltar para a lista, dentro do título da tela */
    .cab-carga .linha-botoes .botao-pequeno { min-height: 44px; }
}

/* ---------------------------------------------------------------
 * Notinhas dos colaboradores (1.26.0)
 * --------------------------------------------------------------- */

.selo-situacao {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.selo-situacao.s-rascunho { background: #fff3d6; color: #8a6300; }
.selo-situacao.s-fechada  { background: #e3eefb; color: #1b5fa0; }
.selo-situacao.s-assinada { background: #dff3ea; color: #0e5c4f; }

/* A linha de bipar: o código primeiro, o botão por último */
.linha-bipar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}
.linha-bipar label { display: block; flex: 1 1 160px; min-width: 0; }
.linha-bipar label.estreito { flex: 0 1 170px; }
.linha-bipar label.minimo   { flex: 0 1 110px; }
.linha-bipar input { width: 100%; }
.linha-bipar .botao { flex: 0 0 auto; min-height: 48px; }

.linha-apagada td { opacity: .62; }

@media (max-width: 860px) {
    .linha-bipar label,
    .linha-bipar label.estreito,
    .linha-bipar label.minimo { flex: 1 1 100%; }
    .linha-bipar .botao { width: 100%; }
}

/* O alto da ficha do colaborador */
.topo-colab {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.topo-colab .inicial {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    flex: none;
}
.colab-nome { flex: 1 1 180px; min-width: 0; }
.colab-nome strong { display: block; font-size: 20px; }
.colab-nome span   { display: block; font-size: 14px; color: var(--tinta-media, #5a6475); }

.colab-saldo { text-align: right; margin-left: auto; }
.colab-saldo strong {
    display: block;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.colab-saldo span { font-size: 13px; color: var(--tinta-media, #5a6475); }
.colab-saldo.deve strong  { color: var(--negativo, #b3245c); }
.colab-saldo.emdia strong { color: var(--positivo, #0e7a5f); }

@media (max-width: 860px) {
    .colab-saldo { margin-left: 0; text-align: left; flex: 1 1 100%; }
}

/* A assinatura, vista na tela do dono (1.27.0) */
.firma-dono {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    flex-wrap: wrap;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}
.firma-dono img {
    flex: 0 1 300px;
    max-width: 100%;
    height: auto;
    border-bottom: 1px solid var(--linha, #e3e8ee);
}
.firma-risco { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.firma-risco strong { display: block; font-size: 16px; }
.firma-risco span   { display: block; color: var(--tinta-media, #5a6475); }

@media (max-width: 860px) {
    .firma-dono { gap: 10px; }
    .firma-dono img { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
 * Usabilidade do módulo das notinhas (1.28.0)
 * --------------------------------------------------------------- */

/*
 * O rodapé de apagar. Fica separado do resto por uma linha, porque
 * botão vermelho junto dos outros é botão que alguém aperta sem
 * querer — e longe demais é botão que ninguém acha.
 */
.pe-perigo {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--linha, #e3e8ee);
}
.pe-perigo form { margin: 0; }
.pe-perigo .explica { margin: 0; }

/* O aviso de que a notinha está trancada, no alto dos itens. */
.recado-travado {
    display: flex;
    gap: 10px;
    border: 1px solid #f0d9a8;
    background: #fdf7e8;
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 16px;
}
.recado-travado p { margin: 0; font-size: 15px; line-height: 1.5; }

/*
 * Abrir e Excluir na mesma célula. A regra de cima já põe
 * white-space: nowrap em td.acoes e margem entre os botões; o que
 * falta é o form do Excluir não empurrar nada para outra linha.
 */
td.acoes form { display: inline; margin: 0; }

/*
 * Editar e Excluir na linha do pagamento. A li já é flex com gap,
 * então basta o valor empurrar os botões para a direita.
 */
.lista-lancamentos .quanto { margin-left: auto; white-space: nowrap; font-weight: 600; }
.lista-lancamentos .mexer form { margin: 0; }

/* ---------------------------------------------------------------
 * Abrir a notinha sem tela no meio (1.29.0)
 * --------------------------------------------------------------- */

/*
 * O bloco no topo da lista de Notinhas. Ele é a primeira coisa da
 * tela de propósito: abrir notinha é o que se vai fazer ali na
 * maioria das vezes, e procurar um botão para só então escolher a
 * pessoa era uma volta a mais.
 */
.abrir-notinha { margin-bottom: 18px; }
.abrir-notinha .cartao-titulo { align-items: flex-end; margin-bottom: 14px; }
.abrir-notinha .data-da-grade { margin: 0; flex: 0 0 auto; }
.abrir-notinha .data-da-grade input { min-width: 160px; }

/*
 * A grade de gente. Cada pessoa é um botão de submit do mesmo
 * formulário — tocar nela já abre a notinha. Por isso o alvo é
 * grande: é o jeito de errar menos com o dedo, na loja, de pé.
 */
.grade-gente {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}

.cartao-gente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 124px;
    padding: 16px 12px;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.cartao-gente:hover { border-color: var(--marca, #0e5c4f); box-shadow: 0 2px 10px rgba(16, 38, 60, .08); }
.cartao-gente:active { transform: translateY(1px); }
.cartao-gente:focus-visible { outline: 3px solid var(--marca, #0e5c4f); outline-offset: 2px; }

/*
 * O mesmo círculo da tela do colaborador, um pouco menor. O nome da
 * classe é `inicial` de propósito: `bolinha` já é a bolinha de visita
 * do módulo de influenciadores, com min-width e borda tracejada —
 * reusar o nome fazia o círculo virar ovo.
 *
 * `flex: none` é o que segura o círculo redondo quando o nome quebra
 * em duas linhas e o flex tenta espremer os irmãos.
 */
.cartao-gente .inicial {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3px;
}
.cartao-gente .nome-gente { font-weight: 600; font-size: 15px; line-height: 1.25; }
.cartao-gente .deve-gente { font-size: 13px; color: var(--tinta-fraca, #7a8699); }
.cartao-gente .tem-rascunho {
    font-size: 12px;
    color: var(--atencao, #8a6100);
    background: var(--fundo-atencao, #fdf5e2);
    border-radius: 999px;
    padding: 2px 9px;
}

@media (max-width: 420px) {
    .grade-gente { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .abrir-notinha .data-da-grade { flex: 1 1 100%; margin-top: 10px; }
}

/*
 * O mesmo, na tela de uma pessoa: aqui o nome já é conhecido, então
 * sobra a data e o botão, lado a lado.
 */
.abrir-aqui {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--linha, #e3e8ee);
}
.abrir-aqui label { margin: 0; }
.abrir-aqui .botao { min-height: 46px; }

@media (max-width: 560px) {
    .abrir-aqui { align-items: stretch; }
    .abrir-aqui label { flex: 1 1 140px; }
    .abrir-aqui .botao { flex: 1 1 100%; text-align: center; }
}

/* ---------------------------------------------------------------
 * Cada loja na sua área (1.31.0)
 * --------------------------------------------------------------- */

/*
 * A faixa que diz qual loja está na tela. Fica dentro do conteúdo, e
 * não no menu lateral, porque no celular o menu está fechado quase o
 * tempo todo — e não saber de que loja é a tela que você está olhando
 * é pior que ocupar uma linha.
 */
.faixa-loja {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linha, #e3e8ee);
}

.faixa-loja-rotulo {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-fraca, #7a8699);
}

.faixa-loja a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    min-height: 38px;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta-media, #5a6475);
    font-size: 14px;
    text-decoration: none;
    line-height: 1.2;
}
.faixa-loja a:hover { border-color: var(--marca, #0e5c4f); color: var(--marca, #0e5c4f); }
.faixa-loja a.ativo {
    border-color: var(--marca, #0e5c4f);
    background: var(--marca, #0e5c4f);
    color: #fff;
    font-weight: 600;
}

/* Quem é de uma loja só não escolhe nada: lê e pronto. */
.faixa-loja-presa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta, #1c2632);
}

/* O aviso de registro sem loja definida, no cadastro. */
.sem-loja {
    display: inline-block;
    font-size: 12px;
    color: var(--atencao, #8a6100);
    background: var(--fundo-atencao, #fdf5e2);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 6px;
}

@media (max-width: 560px) {
    .faixa-loja { gap: 6px; }
    .faixa-loja-rotulo { flex: 1 1 100%; margin-bottom: 2px; }
}

/* A prévia do desconto, enquanto ele digita (1.31.0). */
.previa-conta {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--fundo-ok, #eaf6f0);
    color: var(--positivo, #1c7a56);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
 * As portas do Início (1.32.0)
 * --------------------------------------------------------------- */

/*
 * Três portas: cada loja e o frete. Alvo grande de propósito — é a
 * primeira coisa que ele toca ao entrar, muitas vezes de pé na loja,
 * com o celular numa mão só.
 */
.portas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.porta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px;
    min-height: 150px;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.porta:hover {
    border-color: var(--marca, #0e5c4f);
    box-shadow: 0 3px 14px rgba(16, 38, 60, .09);
}
.porta:active { transform: translateY(1px); }
.porta:focus-visible { outline: 3px solid var(--marca, #0e5c4f); outline-offset: 2px; }

.porta-marca {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: none;
}

/* O frete leva as cores das duas lojas, porque é das duas. */
.porta-marca-dupla {
    display: flex;
    overflow: hidden;
    background: var(--linha, #e3e8ee);
}
.porta-marca-dupla i { flex: 1; display: block; }

.porta-nome {
    font-size: 19px;
    font-weight: 700;
    color: var(--tinta, #1c2632);
    line-height: 1.2;
}

.porta-texto {
    font-size: 14.5px;
    color: var(--tinta-media, #5a6475);
    line-height: 1.45;
}

@media (max-width: 560px) {
    .portas { grid-template-columns: 1fr; gap: 12px; }
    .porta { min-height: 0; padding: 20px 18px; }
}

/* ---------------------------------------------------------------
 * O menu por área (1.33.0)
 * --------------------------------------------------------------- */

/*
 * A volta para o Início. Fica no alto do menu, antes de tudo, porque
 * com o menu mostrando só a área de agora ela é a única saída para
 * outra área — e saída escondida é saída que não existe.
 */
/*
 * OS DOIS JEITOS DE VOLTAR (1.47.0)
 *
 * Ele: *"deixa o menu voltar mais visível, hoje tá meio tímido"* — e
 * depois apontou o que importava mais: *"to falando ali em todos os
 * colaboradores. Para voltar o nível."*
 *
 * São dois caminhos diferentes e os dois estavam apagados:
 *
 *   .menu-voltar  — sair da área inteira, de volta ao Início.
 *   .voltar-lista — subir UM nível: da pessoa para a lista dela.
 *
 * O problema dos dois não era só a cor: era a FORMA. Os dois eram
 * texto solto, do tamanho do resto, e por isso liam-se como mais uma
 * linha da tela em vez de uma saída. Agora os dois são caixa com
 * contorno — dá para ver que é botão antes de ler o que está escrito.
 */
.menu-voltar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 12px;
    padding: 13px 16px;
    min-height: 46px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
}
.menu-voltar:hover {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .34);
}
.menu-voltar span { font-size: 19px; line-height: 1; }

/* A porta dos ajustes é cinza: é serviço, não é loja. */
.porta-ajustes .porta-marca { background: #5b6779; }

/* As caixinhas de módulo no cadastro de usuário (1.34.0). */
.caixas-modulos {
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin: 16px 0 4px;
}
.caixas-modulos legend {
    padding: 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-fraca, #7a8699);
}
.caixa-modulo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 18px 2px 0;
    min-height: 44px;
    font-size: 15px;
    cursor: pointer;
}
.caixa-modulo input { width: 20px; height: 20px; margin: 0; flex: none; }

/* ---------------- Linha de ações que não cabe (1.35.0) ----------------
 *
 * A lista de colaboradores ganhou o botão + NOTINHA, e com ele a linha
 * passou a ter seis botões. Seis não cabem: no computador a coluna do
 * NOME espremia até quebrar letra por letra, e no celular o primeiro
 * botão saía pela esquerda do cartão, cortado.
 *
 * A causa era o 'white-space: nowrap' do td.acoes, que obriga tudo a
 * ficar numa linha só. Tirar o nowrap de TODAS as tabelas quebraria as
 * outras quinze telas que dependem dele, então quem quer quebrar pede:
 * a célula leva também a classe 'acoes-quebra'. Só a lista de
 * colaboradores pede hoje, e nenhuma outra tela muda de aparência.
 */
td.acoes-quebra {
    white-space: normal;
    line-height: 2.4;
}

@media (max-width: 620px) {
    /*
     * No cartão do celular o td.acoes vira uma fila (flex). Fila sem
     * permissão de quebrar espreme os botões até o excesso sair pela
     * beirada do cartão — era o botão cortado.
     *
     * Também só na célula que pediu. Testei solto primeiro e vi na
     * tela: nas outras cinco telas com botão dentro de formulário, a
     * fila que cabia numa linha virava uma pilha de três. Nenhuma
     * delas pediu nada neste pacote.
     */
    table.cartoes td.acoes-quebra { flex-wrap: wrap; }

    /*
     * Botão dentro de formulário ocupando a largura toda, como já
     * acontecia com os que são link. Sem isso os dois tipos ficam com
     * tamanhos diferentes na mesma pilha.
     *
     * Só nas células que pediram ('acoes-quebra'). Solto, isso
     * remexeria a linha de botões de outras cinco telas que este
     * pacote não tem nada que mexer.
     */
    td.acoes-quebra form { width: 100%; }
    td.acoes-quebra form .botao { width: 100%; text-align: center; margin-left: 0; margin-top: 6px; }
}

/* ---------------- Mês a mês, e o teto da conta (1.38.0) ----------------
 *
 * Pedido dele: "deixe sempre as notinhas organizadas por mês e descontos
 * por mês também", porque é assim que o mês dele funciona — elas pegam
 * ao longo do mês e ele acerta no pagamento.
 */

/* O cabeçalho de mês da lista de pagamentos. */
.titulo-do-mes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    margin: 18px 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--linha, #dde3ea);
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta, #1d2733);
}

/* O total do mês, do lado direito, em letra de apoio. */
.titulo-do-mes span {
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-fraca, #7a8699);
    text-transform: none;
}

.titulo-do-mes + .lista-lancamentos { margin-top: 0; }

/*
 * O mesmo cabeçalho, mas dentro da tabela de notinhas. Linha inteira,
 * sem borda de célula, para ler como título e não como mais um dado.
 */
.linha-do-mes td {
    background: var(--fundo, #eef2f6);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
}

.linha-do-mes td span {
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-fraca, #7a8699);
    text-transform: none;
    margin-left: 10px;
}

/*
 * Quanto ainda cabe até o teto da conta. Discreto quando cabe, e de
 * cor quando passou — é a hora em que ele precisa reparar.
 */
/*
 * O TETO EM TRÊS CORES (1.48.1)
 *
 * Ele pediu *"mais intuitivo com cor, mas sem muita info"*. Então a
 * cor carrega o aperto e a frase carrega só o número que falta:
 *
 *   folgado   — verde, ainda cabe bastante
 *   apertando — amarelo, menos de um quarto do teto
 *   estourou  — vermelho, passou
 *
 * A bolinha da esquerda é para quem não distingue bem as cores: a
 * posição e o símbolo mudam junto com elas.
 */
.aviso-teto {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--linha, #dde3ea);
    border-left-width: 5px;
    border-radius: 8px;
    background: var(--fundo, #eef2f6);
    font-size: 14.5px;
    color: var(--tinta-media, #495363);
}

.aviso-teto::before {
    content: '●';
    font-size: 13px;
    line-height: 1;
}

.aviso-teto strong { font-size: 16px; }

.aviso-teto.folgado {
    border-color: #bfe0cf;
    border-left-color: #1c7a56;
    background: #f1f9f5;
    color: #15543d;
}

.aviso-teto.apertando {
    border-color: #ead9b0;
    border-left-color: #a8780a;
    background: #fdf8ec;
    color: #70520a;
}
.aviso-teto.apertando::before { content: '▲'; }

.aviso-teto.estourou {
    border-color: #e4b9b9;
    border-left-color: #a32b23;
    background: #fdf4f4;
    color: #8d2c2c;
}
.aviso-teto.estourou::before { content: '■'; }

/* O rótulo que diz o que o número grande é (1.48.1) */
.colab-saldo .rotulo-saldo {
    display: block;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .85;
    margin-bottom: 2px;
}

.colab-saldo .saldo-zerado { font-size: 20px; }

@media (max-width: 620px) {
    /*
     * Na tabela que vira cartão, a linha do mês não pode virar cartão
     * também: ela é o título de cima dos cartões, e com borda e fundo
     * de cartão viraria mais um item da lista.
     */
    table.cartoes tr.linha-do-mes {
        border: none;
        background: transparent;
        padding: 0;
        margin: 16px 0 6px;
    }

    table.cartoes tr.linha-do-mes td {
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--linha, #dde3ea);
        border-radius: 0;
        padding: 0 0 5px;
    }

    table.cartoes tr.linha-do-mes td::before { content: ''; }

    .linha-do-mes td span { display: block; margin: 2px 0 0; }
}

/* ---------------- O que ela avisou (1.41.0) ----------------
 *
 * Da área dela, a influenciadora avisa que uma visita aconteceu. O
 * aviso aparece no alto da tela dela, no painel, porque lembrete que
 * fica embaixo não lembra ninguém.
 */
.pedidos-dela {
    border-left: 4px solid var(--acao, #0e5c4f);
}

.lista-pedidos {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.lista-pedidos li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 11px 0;
    border-top: 1px solid var(--linha, #dde3ea);
}

.lista-pedidos li:first-child { border-top: none; }

.lista-pedidos .oque { flex: 1 1 220px; font-size: 15px; }
.lista-pedidos .mexer { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 620px) {
    /* No dedo, os dois botões ocupam a linha e ficam do mesmo tamanho. */
    .lista-pedidos .mexer { flex: 1 1 100%; }
    .lista-pedidos .mexer form { flex: 1 1 0; }
    .lista-pedidos .mexer .botao { width: 100%; text-align: center; }
}

/* O número de avisos no quadro da pessoa, no Painel (1.41.0). */
.selo-aviso {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--acao, #0e5c4f);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------- As peças da retirada (1.43.0) ----------------
 *
 * A retirada da influenciadora passou a aceitar peça com preço e
 * desconto, como a notinha. Mesma forma de propósito: é onde o leitor
 * de código de barras vai encaixar nos dois lados.
 */
.pecas-retirada {
    flex: 1 1 100%;
    margin: 8px 0 2px;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    background: var(--fundo, #eef2f6);
}

.pecas-retirada > summary {
    cursor: pointer;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--acao, #0e5c4f);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.pecas-retirada[open] > summary { border-bottom: 1px solid var(--linha, #dde3ea); }

.pecas-retirada .tabela-pecas { margin: 0; background: var(--papel, #fff); }
.pecas-retirada .tabela-pecas th,
.pecas-retirada .tabela-pecas td { font-size: 14px; }

.pecas-retirada .linha-peca { padding: 12px; gap: 10px; }
.pecas-retirada .explica { padding: 0 12px 12px; }

@media (max-width: 620px) {
    /* No cartão do celular, o bloco das peças ocupa a linha inteira. */
    .pecas-retirada { margin-top: 10px; }
    .pecas-retirada .linha-peca > label { flex: 1 1 100%; }
}

/* O valor da retirada quando ele é a soma das peças e não se digita (1.43.0) */
.corrigir-lancamento .valor-travado {
    display: block;
    padding: 11px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #1f2430;
}

.corrigir-lancamento .aviso-valor-peca {
    margin: 8px 0 0;
}

/* ---------- A retirada sendo montada (1.44.0) ---------- */

.montando-retirada {
    border: 2px solid #14533b;
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin: 14px 0;
    background: #f7fbf9;
}

.montando-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.selo-montando {
    background: #fff3cd;
    color: #7a5c00;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.montando-topo strong { font-size: 16px; }
.montando-topo .explica { margin: 0; }
.montando-topo .explica strong { font-size: 17px; color: #14533b; }

.montando-retirada .sem-peca-ainda {
    margin: 10px 0 0;
    padding: 12px;
    background: #fff;
    border: 1px dashed #cfd6dd;
    border-radius: 9px;
    text-align: center;
}

.montando-retirada .tabela-pecas { margin-top: 12px; }
.montando-retirada .tabela-pecas tfoot td { border-top: 2px solid #d7dde4; }

.dados-retirada { margin-top: 12px; }
.dados-retirada > summary {
    cursor: pointer;
    font-size: 14px;
    color: #14533b;
    padding: 6px 0;
}

.montando-fim {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e0e8e4;
}

.montando-fim .explica { margin: 8px 0 0; }

.abrir-retirada,
.reabrir-retirada {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reabrir-retirada { margin-bottom: 10px; }
.abrir-retirada .explica,
.reabrir-retirada .explica { margin: 0; }

.ja-montando { margin: 4px 0; }

/* As duas barras do cartão do painel (1.48.0) */
.rotulo-barra {
    margin: 10px 0 4px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tinta-fraca, #7a8699);
}

.barra-visitas i { background: #2f9e6e; }

/* ---------------------------------------------------------------
 * O botão do WhatsApp (1.49.0)
 *
 * O número aparece ESCRITO do lado do botão. Antes ele só descobria
 * que o telefone estava errado depois de o WhatsApp reclamar.
 * --------------------------------------------------------------- */
.linha-zap {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.zap-numero {
    color: #6b7280;
    font-size: 13px;
}

.aviso-telefone {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    margin: 12px 0 0;
    padding: 9px 12px;
}

/* ---------------------------------------------------------------
 * O Bling (1.50.0)
 * --------------------------------------------------------------- */
.bling-dica {
    color: #6b7280;
    font-size: 13px;
    margin: 8px 0 0;
    min-height: 18px;
}

.bling-dica.achou    { color: #166534; font-weight: 600; }
.bling-dica.nao-achou,
.bling-dica.falhou   { color: #b45309; }
.bling-dica.procurando { color: #9ca3af; font-style: italic; }

.selo-bling {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 11px;
    text-transform: uppercase;
    white-space: nowrap;
}

.selo-bling.sim { background: #dcfce7; color: #166534; }
.selo-bling.nao { background: #f1f5f9; color: #64748b; }

.bling-loja.ligado   { border-left: 3px solid #16a34a; }
.bling-loja.desligado { border-left: 3px solid #cbd5e1; }

.bling-espelho {
    background: #f8fafc;
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 10px 13px;
}

.bling-espelho .desde { color: #6b7280; font-size: 13px; }

.bolinha-loja {
    border-radius: 50%;
    display: inline-block;
    height: 11px;
    margin-right: 7px;
    vertical-align: middle;
    width: 11px;
}

.passo-a-passo {
    margin: 0 0 12px;
    padding-left: 20px;
}

.passo-a-passo li { margin-bottom: 6px; }

/* ==========================================================
   1.52.0 — as listas sem tabela (o desenho 2 que ele escolheu)
   Data pequena à esquerda, valor com peso, situação como selo,
   um botão por linha. O Excluir mudou de lugar.
   ========================================================== */
.lista-lancamentos .quanto {
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.lista-notinhas .oque {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lista-notinhas .oque strong { font-weight: 600; }

.lista-notinhas .fora-da-conta {
    color: var(--tinta-fraca, #7a8699);
    font-size: 13px;
}

.lista-lancamentos li.linha-apagada .quanto { color: var(--tinta-fraca, #7a8699); }

@media (max-width: 860px) {
    .lista-lancamentos .quanto { margin-left: 0; }
}

/* ==========================================================
   1.52.0 — o vale do colaborador
   Conta separada da mercadoria. O selo do alto diz num
   relance se sobrou alguma coisa para descontar.
   ========================================================== */
.selo-vale {
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    white-space: nowrap;
}

.selo-vale.aberto   { background: var(--fundo-atencao, #fdf5e2); color: var(--atencao, #8a6100); }
.selo-vale.zerado   { background: #f1f5f9; color: #64748b; }
.selo-vale.sobrando { background: var(--fundo-ok, #eaf6f0); color: var(--positivo, #1c7a56); }

.lista-vale .oque { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }

.lista-vale .selo-mov {
    background: #f1f5f9;
    border-radius: 999px;
    color: #64748b;
    font-size: 12px;
    padding: 2px 9px;
    white-space: nowrap;
}

.lista-vale li.pegou  .quanto { color: var(--negativo, #a32b23); }
.lista-vale li.abateu .quanto { color: var(--positivo, #1c7a56); }
.lista-vale li.abateu .selo-mov { background: var(--fundo-ok, #eaf6f0); color: var(--positivo, #1c7a56); }

/* ==========================================================
   1.52.0 — a assinatura da retirada
   Mora dentro da retirada, junto com as peças, porque é
   daquelas peças que ela fala.
   ========================================================== */
.assinatura-retirada {
    border-top: 1px solid var(--linha, #dde3ea);
    margin-top: 14px;
    padding-top: 14px;
}

.firma-pequena {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.firma-pequena img {
    background: #fff;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    height: 54px;
    width: auto;
    max-width: 200px;
}

.firma-pequena span {
    color: var(--tinta-fraca, #7a8699);
    font-size: 13px;
}

/* ==========================================================
   1.53.0 — o vale por folha
   O vale sai inteiro numa folha só. Cada folha é um bloco
   com a data, o que falta, e um botão que zera.
   ========================================================== */
.folha-vale {
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
}

.folha-vale.aberta  { border-left: 3px solid var(--atencao, #b5830a); }
.folha-vale.quitada { border-left: 3px solid var(--positivo, #1c7a56); background: #fbfcfd; }

.folha-topo {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-between;
}

.folha-estado {
    color: var(--tinta-fraca, #7a8699);
    font-size: 13px;
    margin-left: 8px;
}

.folha-valor { font-size: 18px; font-weight: 700; }

.folha-vale.aberta  .folha-valor { color: var(--atencao, #8a6100); }
.folha-vale.quitada .folha-valor { color: var(--positivo, #1c7a56); }

.folha-vale .lista-lancamentos { margin: 10px 0 0; }

/* O aviso do limite do VALE tem nome próprio: não é o teto da
   mercadoria, e misturar os dois já deu confusão uma vez. */
.aviso-limite-vale {
    border-radius: 8px;
    font-size: 14px;
    margin: 0 0 14px;
    padding: 10px 13px;
}

.aviso-limite-vale.folgado   { background: #f7f9fb; color: var(--tinta-fraca, #5b6676); }
.aviso-limite-vale.apertando { background: var(--fundo-atencao, #fdf5e2); color: var(--atencao, #8a6100); }
.aviso-limite-vale.estourou  { background: var(--fundo-erro, #fbeceb); color: var(--negativo, #a32b23); }

/* ==========================================================
   1.54.0 — o vale no alto, do lado da mercadoria
   DOIS números, nunca um. Cada um com o seu rótulo dizendo
   de que é, e o do vale com a data em que sai.
   ========================================================== */
.colab-saldo.vale {
    border-left: 1px solid var(--linha, #dde3ea);
    padding-left: 18px;
}

.colab-saldo.vale strong { color: var(--atencao, #8a6100); }

.colab-saldo .quando-sai {
    color: var(--tinta-fraca, #7a8699);
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.dois-numeros {
    margin: 10px 0 0;
}

@media (max-width: 860px) {
    .colab-saldo.vale {
        border-left: 0;
        border-top: 1px solid var(--linha, #dde3ea);
        padding-left: 0;
        padding-top: 10px;
    }
}

/* ==========================================================
   1.55.0 — a assinatura do vale e o registro
   ========================================================== */
.assinatura-vale {
    border-top: 1px dashed var(--linha, #dde3ea);
    flex: 1 1 100%;
    margin-top: 8px;
    padding-top: 10px;
}

.lista-vale .selo-mov.assinado {
    background: var(--fundo-ok, #eaf6f0);
    color: var(--positivo, #1c7a56);
}

.registro-vale {
    border-top: 1px solid var(--linha, #dde3ea);
    margin-top: 18px;
    padding-top: 12px;
}

.registro-vale > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 4px 0;
}

.lista-registro .quando small { display: block; font-size: 12px; }
.lista-registro .oque small { color: var(--tinta-fraca, #7a8699); display: block; font-size: 13px; }

.lista-registro .quem {
    color: var(--tinta-fraca, #7a8699);
    flex: 0 0 auto;
    font-size: 13px;
    padding-left: 12px;
}

.lista-registro li.acao-excluiu_vale strong,
.lista-registro li.acao-excluiu_desconto strong { color: var(--negativo, #a32b23); }
.lista-registro li.acao-assinou strong { color: var(--positivo, #1c7a56); }

/* ---------------------------------------------------------------
 * Nova notinha dentro das Notinhas (1.58.0)
 *
 * Ele: "é coerente juntar ali as áreas de forma harmônica, as
 * notinhas e nova notinha". Juntar não é empilhar: a ação ganha
 * uma faixa com fundo próprio no alto do cartão, para continuar
 * se lendo como UMA tarefa, e a lista vem embaixo dela.
 * --------------------------------------------------------------- */
.faixa-acao {
    /*
     * O cartão é branco, então a faixa não pode ser branca também —
     * ficaria só uma borda solta no meio do cartão. Um cinza de
     * página, bem leve, é o bastante para se ler como um bloco.
     */
    background: #f6f8fb;
    border: 1px solid var(--linha, #e3e8ee);
    border-radius: var(--raio, 10px);
    padding: 14px 16px 16px;
    margin-bottom: 20px;
}

.faixa-acao .faixa-titulo h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.faixa-acao .faixa-titulo p {
    margin: 3px 0 0;
    color: var(--tinta-fraca, #7a8699);
    font-size: 13.5px;
}

/*
 * Dentro da faixa o risco em cima do formulário sobra: o fundo da
 * faixa já separa a ação do resto do cartão.
 */
.faixa-acao .abrir-aqui {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/*
 * E a caixinha de período encosta um pouco mais na lista do que na
 * faixa: ela manda nos números de baixo, não na ação de cima.
 */
#notinhas .caixa-periodo { margin-top: 0 !important; }

/* ---------------------------------------------------------------
 * A conta de mercadoria numa caixa só (1.59.0)
 *
 * Ele: "quitação é quitação de notinha". As duas ações — pegar e
 * pagar — ficam lado a lado no alto do cartão, e embaixo uma
 * lista só, com as notinhas e os pagamentos do mês juntos.
 * --------------------------------------------------------------- */
.duas-faixas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.duas-faixas .faixa-acao { margin-bottom: 0; }

@media (max-width: 900px) {
    .duas-faixas { grid-template-columns: 1fr; }
}

/*
 * Quando você aperta Editar num pagamento, a faixa da quitação
 * passa a ser o assunto da tela: ela se marca, senão o formulário
 * se enche de valor no meio do cartão sem dizer por quê.
 */
.faixa-acao.corrigindo {
    border-color: var(--acao, #0e5c4f);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--acao, #0e5c4f) 15%, #fff);
}

.faixa-quitacao .linha-campos { margin-top: 12px; }

/* O pagamento na lista: sinal negativo e cor de quem abate. */
.lista-movimento .quanto.negativo { color: var(--positivo, #1c7a56); }

.selo-situacao.s-pagamento {
    background: #eef3fb;
    color: #2d4d7a;
}

/*
 * A NOTINHA FECHADA ABRE NA PRÓPRIA LINHA (1.59.0)
 *
 * Ele: "por que o abrir da notinha não é tão simplificado como o
 * do vale?". Para só olhar, passou a ser: a linha é o resumo e
 * abre as peças e a assinatura embaixo, sem sair da tela.
 */
.lista-movimento li.linha-notinha { display: block; padding: 0; }

.lista-movimento .uma-notinha > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    /* 44px: no dedo, menos que isso é alvo que ninguém acerta. */
    min-height: 44px;
    padding: 10px 0;
}

.lista-movimento .uma-notinha > summary::-webkit-details-marker { display: none; }
.lista-movimento .uma-notinha > summary:hover { background: #fafbfd; }

.lista-movimento .uma-notinha > summary .quando { flex: 0 0 auto; }
.lista-movimento .uma-notinha > summary .oque { flex: 1 1 auto; }
.lista-movimento .uma-notinha > summary .quanto { flex: 0 0 auto; font-weight: 700; }

/* A setinha diz que a linha abre — e vira quando ela abre. */
.lista-movimento .abrir-fechar {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237a8699' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
}

.lista-movimento .uma-notinha[open] .abrir-fechar { transform: rotate(180deg); }

.dentro-da-notinha {
    padding: 4px 0 16px;
    border-top: 1px dashed var(--linha, #dde3ea);
    margin-top: 2px;
}

.dentro-da-notinha .pecas-da-nota {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.dentro-da-notinha .pecas-da-nota li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--linha, #dde3ea);
    font-size: 14px;
}

.dentro-da-notinha .pecas-da-nota .vezes {
    flex: 0 0 auto;
    color: var(--tinta-fraca, #7a8699);
    font-variant-numeric: tabular-nums;
}

.dentro-da-notinha .pecas-da-nota .nome { flex: 1 1 auto; }
.dentro-da-notinha .pecas-da-nota .nome small {
    display: block;
    color: var(--tinta-fraca, #7a8699);
    font-size: 12.5px;
}
.dentro-da-notinha .pecas-da-nota .soma { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }

.dentro-da-notinha .firma-pequena {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.dentro-da-notinha .firma-pequena img {
    width: 120px;
    height: auto;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 8px;
    background: #fff;
}

.dentro-da-notinha .firma-pequena span {
    font-size: 12.5px;
    color: var(--tinta-fraca, #7a8699);
    line-height: 1.5;
}

.dentro-da-notinha .sem-assinatura { margin-top: 12px; }

/* ---------------------------------------------------------------
 * O menuzinho por linha (1.59.0)
 *
 * Ele: "área de vale, deixa um menuzinho por linha para excluir".
 * Cada linha tinha um botão vermelho sempre à mostra. O que apaga
 * passa a morar atrás de um toque — a ação mais perigosa da linha
 * não pode ser a mais fácil de acertar sem querer.
 * --------------------------------------------------------------- */
.menu-linha { position: relative; display: inline-block; }

/*
 * A LINHA DE BAIXO TAPAVA O MENU ABERTO.
 *
 * Cada <li> da lista é position:relative, e sem z-index elas se
 * desenham na ordem do HTML — então a linha seguinte passava por
 * cima do menu da linha de cima. Dava para ver e dava para medir:
 * o clique ia parar no <li> de baixo.
 *
 * Levantar o menu ABERTO resolve, e só enquanto ele está aberto.
 */
.menu-linha[open] { z-index: 40; }

.menu-linha > summary {
    list-style: none;
    cursor: pointer;
    /* 36x36: alvo de dedo sem roubar a linha inteira. */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 9px;
    color: var(--tinta-media, #4a5568);
    font-size: 18px;
    line-height: 1;
    background: #fff;
}

.menu-linha > summary::-webkit-details-marker { display: none; }
.menu-linha > summary:hover { background: #f3f5f8; }
.menu-linha[open] > summary { background: #eef1f5; border-color: #c7cfda; }

.menu-corpo {
    /*
     * Alinhado à esquerda SEMPRE: na tabela de colaboradores a
     * coluna dos botões é alinhada à direita, e o menu herdava isso
     * — o recado embaixo de cada opção saía encostado na direita,
     * desalinhado do próprio item que ele explica.
     */
    text-align: left;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 30;
    min-width: 210px;
    /*
     * E um teto: o recado do excluir lista tudo o que vai sumir, e
     * sem isto ele esticava o menu por metade da tela em vez de
     * quebrar a linha.
     */
    max-width: 330px;
    background: #fff;
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(24, 32, 44, .14);
    padding: 6px;
}

.menu-corpo form { margin: 0; }

.menu-corpo button,
.menu-corpo a {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 14px;
    color: var(--tinta, #18202c);
    cursor: pointer;
    text-decoration: none;
}

.menu-corpo button:hover,
.menu-corpo a:hover { background: #f3f5f8; }

.menu-corpo button.perigo { color: var(--negativo, #a32b23); font-weight: 600; }
.menu-corpo button.perigo:hover { background: var(--fundo-erro, #fbeceb); }

/*
 * Perto da borda direita da tela o menu sairia para fora; no
 * celular ele abre encostado à direita da própria linha.
 */
@media (max-width: 560px) {
    .menu-corpo { right: 0; left: auto; min-width: 180px; }
}

/* Texto que só o leitor de tela lê. */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* O item perigoso do menu também quando é link (1.60.0). */
.menu-corpo a.perigo { color: var(--negativo, #a32b23); font-weight: 600; }
.menu-corpo a.perigo:hover { background: var(--fundo-erro, #fbeceb); }

/* O recado curto dentro do menuzinho (1.60.0). */
.aviso-do-menu {
    margin: 2px 6px 4px;
    padding: 0 6px 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tinta-fraca, #7a8699);
}

/* A linha que conta quantas estão escondidas. */
.linha-escondidas {
    margin: -4px 0 12px;
    font-size: 13px;
    color: var(--tinta-fraca, #7a8699);
}
.linha-escondidas a { margin-left: 8px; }

.lista-registro li { position: relative; }
.lista-registro .mexer { flex: 0 0 auto; margin-left: 4px; }

/*
 * A linha escondida, quando ele pede para ver todas (1.60.0).
 * Precisa se ler como "esta não aparece normalmente" sem sumir —
 * senão o "mostrar todas" não mostra nada de diferente.
 */
/*
 * SEM OPACITY, DE PROPÓSITO.
 *
 * A primeira versão usava opacity: .58 — e opacity abaixo de 1 cria
 * uma camada própria no navegador, de onde nada que está dentro
 * consegue subir. Resultado: o menuzinho da linha escondida nascia
 * ATRÁS da linha de baixo, e o clique ia parar nela. Deu para ver e
 * deu para medir.
 *
 * Cor apagada faz o mesmo efeito de leitura sem criar camada.
 */
.lista-registro li.linha-escondida {
    background: repeating-linear-gradient(
        -45deg, #fafbfd, #fafbfd 8px, #f2f5f8 8px, #f2f5f8 16px);
    color: #9aa4b2;
}

.lista-registro li.linha-escondida .oque strong,
.lista-registro li.linha-escondida .quanto { color: #9aa4b2; }

.lista-registro li.linha-escondida .oque strong::after {
    content: ' · escondida';
    font-weight: 400;
    font-size: 12px;
    color: var(--tinta-fraca, #7a8699);
}

/* ---------------------------------------------------------------
 * O mês em duas colunas (1.63.0)
 *
 * Ele viu o desenho e aprovou com uma ressalva: "gostei, mas
 * parece que ficou apertado". O aperto vinha de tratar as duas
 * colunas como iguais, e elas não são: a de pegar carrega peças,
 * selo, valor e a setinha de abrir; a de pagar carrega três
 * palavras e um valor.
 * --------------------------------------------------------------- */
.mes-em-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
    margin-bottom: 18px;
}

/* Mês sem pagamento não desenha coluna vazia. */
.mes-em-colunas.uma-coluna { grid-template-columns: minmax(0, 1fr); }

/*
 * O risco entre as duas, e não uma caixa em volta de cada: a
 * divisão é entre elas, e caixa dentro de caixa dentro do cartão
 * já seria a terceira moldura na mesma tela.
 */
.mes-em-colunas .col-pagou { border-left: 1px solid var(--linha, #dde3ea); padding-left: 32px; }
.mes-em-colunas.uma-coluna .col-pagou { border-left: 0; padding-left: 0; }

.titulo-coluna {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 2px;
    padding-bottom: 6px;
}

.titulo-coluna .nome-coluna {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-fraca, #7a8699);
    flex: 1 1 auto;
}

/* O número fica em cima das linhas que ele soma, e não na linha do mês. */
.titulo-coluna .soma-coluna {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.col-pegou .soma-coluna { color: var(--tinta, #18202c); }
.col-pagou .soma-coluna { color: var(--positivo, #1c7a56); }

.titulo-coluna .quantas-coluna {
    flex: 0 0 100%;
    font-size: 12.5px;
    color: var(--tinta-fraca, #7a8699);
}

/*
 * Numa tela estreita elas empilham — duas colunas de 160px não
 * cabem nem no painel aberto no celular. Foi medido.
 */
@media (max-width: 900px) {
    .mes-em-colunas { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mes-em-colunas .col-pagou {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--linha, #dde3ea);
        padding-top: 14px;
        margin-top: 4px;
    }
}

/*
 * Sem :has() de propósito — ele já me custou uma entrega antes, e
 * aqui o espaçamento resolve pelo lado de baixo, que vale sempre.
 */
.mes-em-colunas { margin-top: 10px; }

/*
 * A COLUNA ESTREITA QUEBRA A LINHA DE PROPÓSITO.
 *
 * Tentei primeiro encolher a data e tirar o selo, e mesmo assim o
 * valor caía para baixo sozinho — ficava quebrado por acidente, que
 * é pior do que quebrado de propósito. Então a data sobe para a
 * sua própria linha e embaixo ficam a descrição e o valor, que é o
 * par que a pessoa lê junto.
 */
.col-pagou .lista-lancamentos li {
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 11px 2px;
}

.col-pagou .lista-lancamentos .quando {
    flex: 0 0 100%;
    font-size: 12.5px;
}

.col-pagou .lista-lancamentos .oque { flex: 1 1 auto; }
.col-pagou .lista-lancamentos .quanto { flex: 0 0 auto; }
.col-pagou .lista-lancamentos .mexer { flex: 0 0 auto; }

/*
 * O menu aberto sai do fluxo da caixa (1.63.1). A posição vem do
 * app.js; aqui fica só o que não depende de medida.
 */
.menu-corpo.menu-solto {
    position: fixed;
    right: auto;
    margin: 0;
}

/* ---------------------------------------------------------------
 * Os dados da empresa para os termos (1.65.0)
 * --------------------------------------------------------------- */
.dados-da-loja {
    border: 1px solid var(--linha, #dde3ea);
    border-radius: var(--raio, 10px);
    padding: 0 16px;
    margin-bottom: 12px;
}

.dados-da-loja > summary {
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    /* 44px: no dedo, menos que isso é alvo que ninguém acerta. */
    min-height: 48px;
}

.dados-da-loja > summary::-webkit-details-marker { display: none; }

/*
 * Chamava-se .bolinha e nascia com 11 por 54: esse nome já era de
 * outro componente do sistema. Nome de classe repetido não dá erro
 * em lugar nenhum — só desenha torto.
 */
.dados-da-loja > summary .ponto-da-loja {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 11px;
}

/*
 * O que falta aparece no título fechado, e não só lá dentro: senão
 * ele só descobre o buraco na hora de imprimir o contrato.
 */
.dados-da-loja .falta-aviso {
    font-weight: 400;
    font-size: 13px;
    color: var(--atencao, #8a6100);
    background: var(--fundo-atencao, #fdf5e2);
    border-radius: 999px;
    padding: 2px 10px;
}

.dados-da-loja .completo-aviso {
    font-weight: 400;
    font-size: 13px;
    color: var(--positivo, #1c7a56);
}

.dados-da-loja .linha-campos { margin-bottom: 12px; }
.dados-da-loja[open] { padding-bottom: 6px; }

/* ---------------------------------------------------------------
 * A GRADE DE ACESSOS (1.66.0)
 *
 * Pedido dele: *"Só a grade, caixinha por caixinha"*. Uma linha por
 * módulo, quatro colunas: Ver, Lançar, Editar e Excluir.
 *
 * No computador é uma tabela e se lê de bater o olho. No celular ela
 * não cabe de jeito nenhum em cinco colunas, então vira um blocão
 * por módulo com as quatro caixinhas nomeadas embaixo — o mesmo
 * caminho que a `table.cartoes` já fazia.
 * --------------------------------------------------------------- */

.grade-acessos {
    border: 1px solid var(--linha);
    border-radius: 10px;
    padding: 12px 14px 4px;
    margin: 16px 0 4px;
}

.grade-acessos legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 14px;
    color: #4a5a6b;
}

table.grade {
    width: 100%;
    border-collapse: collapse;
}

table.grade th,
table.grade td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--linha);
    text-align: center;
}

table.grade thead th {
    font-size: 13px;
    color: #6b7b8c;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * A coluna do nome fica com o resto da largura, e as quatro das
 * caixinhas têm tamanho igual — é o alinhamento das colunas que faz
 * a grade se ler de bater o olho.
 */
table.grade thead th:first-child { text-align: left; }
table.grade th:first-child       { width: 34%; }
table.grade thead th + th        { width: 16.5%; }

table.grade tbody th[scope="row"] {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

table.grade tbody tr:last-child th,
table.grade tbody tr:last-child td { border-bottom: none; }

.caixa-grade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px;
}

.caixa-grade input { cursor: pointer; }

/*
 * Linha com o Ver desmarcado: as outras três ficam apagadas e
 * desligadas. Cor apagada, e não opacity — opacity cria contexto de
 * empilhamento, e isso já me custou uma entrega antes.
 */
table.grade tr.fechada th[scope="row"] { color: #9aa7b4; }
.caixa-grade input:disabled { cursor: default; }
.caixa-grade input:disabled + span { color: #9aa7b4; }

/* O nome da coluna só aparece quando a tabela vira blocão. */
.so-estreito { display: none; }

/* ---------------------------------------------------------------
 * A CHAVE DE ABRIR A ÁREA DA PESSOA (1.75.0)
 *
 * Embaixo da grade, separada por um risco, porque não é assunto da
 * grade: é uma chave só, poderosa, e tem de se ler como aviso.
 * --------------------------------------------------------------- */

.chave-da-area {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--linha);
    cursor: pointer;
}

.chave-da-area input { margin-top: 3px; cursor: pointer; }
.chave-da-area strong { display: block; font-size: 14px; }
.chave-da-area small  { display: block; color: #6b7b8c; line-height: 1.45; }

/* O que cada um pode, na lista de usuários. */
.coluna-pode { line-height: 1.5; }

.o-que-faz { display: block; font-size: 13px; }
.o-que-faz strong { font-weight: 600; }

@media (max-width: 860px) {

    .grade-acessos { padding: 10px 10px 2px; }

    table.grade thead { display: none; }

    table.grade,
    table.grade tbody,
    table.grade tr,
    table.grade th,
    table.grade td { display: block; width: auto; }

    table.grade tbody tr {
        border: 1px solid var(--linha);
        border-radius: 8px;
        padding: 8px 10px;
        margin-bottom: 10px;
    }

    table.grade tbody tr th[scope="row"] {
        border-bottom: 1px solid var(--linha);
        padding: 0 0 6px;
        margin-bottom: 6px;
    }

    /*
     * Duas por linha, e não quatro empilhadas: com uma caixinha por
     * linha, um usuário só dava mais de mil pixels de rolagem.
     */
    table.grade tbody td {
        display: inline-block;
        width: 48%;
        border-bottom: none;
        padding: 2px 0;
        text-align: left;
        vertical-align: top;
    }

    table.grade th:first-child { width: auto; }

    .so-estreito { display: inline; }

    .caixa-grade { padding: 6px 2px; }
}

/* Assunto que não tem a função: um tracinho, e não uma caixinha. */
table.grade td.naovale { color: #c2cbd4; }

/* ---------------------------------------------------------------
 * A LISTA DE PEÇAS ENQUANTO ELE DIGITA (1.68.0)
 *
 * Presa na janela (position: fixed) e não no documento, pelo mesmo
 * motivo dos menuzinhos de linha: caixa com rolagem corta o que sai
 * dela, e z-index não atravessa corte. O JavaScript desenha onde ela
 * cabe e acompanha a rolagem.
 * --------------------------------------------------------------- */

.lista-pecas {
    position: fixed;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 32, 48, .18);
}

.lista-pecas li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1.35;
}

.lista-pecas li b {
    font-weight: 700;
    white-space: nowrap;
}

.lista-pecas li span {
    flex: 1 1 auto;
    color: #46566a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-pecas li i {
    font-style: normal;
    white-space: nowrap;
    color: #0e7a5f;
    font-weight: 600;
}

.lista-pecas li:hover,
.lista-pecas li.marcada { background: #eef4fb; }

/* O aviso do fim não é uma peça: não se escolhe, não se marca. */
.lista-pecas li.lista-mais {
    display: block;
    cursor: default;
    color: #8595a6;
    font-size: 13px;
    text-align: center;
    padding: 8px 10px 4px;
}

.lista-pecas li.lista-mais:hover { background: none; }

@media (max-width: 860px) {
    .lista-pecas { max-height: 40vh; }
    .lista-pecas li { padding: 10px; }
}

/* ---------------------------------------------------------------
 * O BOTÃO DO VALE TEM A COR DO VALE (1.69.1)
 *
 * Ele: *"lançar vale também com cor"*. Dois botões cheios no mesmo
 * verde, lado a lado, viram um borrão só — e um clique trocado lança
 * vale onde era compra, que são contas diferentes.
 *
 * O tom é o mesmo em que o vale já aparece no alto do perfil, no
 * VALE A DESCONTAR. Assim a cor passa a querer dizer "vale" em
 * qualquer lugar do sistema, e não só ali.
 * --------------------------------------------------------------- */

.botao-vale {
    background: var(--atencao);
    border-color: var(--atencao);
    color: #fff;
}

.botao-vale:hover {
    background: #6d4c00;
    border-color: #6d4c00;
}

/* ==========================================================
   1.70.0 — o estado da assinatura no resumo da retirada

   A assinatura mora DENTRO do bloco de peças, que abre
   fechado. Ele não achava o botão. Agora o resumo diz se
   está assinada — o selo é o mesmo do registro do vale,
   para o olho não aprender dois desenhos para a mesma
   coisa.
   ========================================================== */
.pecas-retirada > summary .selo-mov {
    background: #f1f5f9;
    border-radius: 999px;
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    margin-left: 6px;
    padding: 2px 9px;
    white-space: nowrap;
}

.pecas-retirada > summary .selo-mov.assinado {
    background: var(--fundo-ok, #eaf6f0);
    color: var(--positivo, #1c7a56);
}

.assinatura-vale .sem-assinatura,
.assinatura-retirada .sem-assinatura { margin: 0; }

/* ==========================================================
   1.71.0 — lista comprida, com VER MAIS

   "Cada peça ocupa uma linha, até aí ok, mas poderia fazer um
   ver mais, não?" A lista continua inteira no HTML — o corte
   é só da vista, e abre sem ir ao servidor.
   ========================================================== */
.lista-com-corte { position: relative; }

.lista-com-corte.lista-cortada .alem { display: none; }

.ver-mais {
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--acento, #1c7a56);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    margin: 6px 0 0;
    padding: 8px 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ver-mais:hover { background: var(--fundo-ok, #eaf6f0); text-decoration: none; }

/* Dentro de tabela de peças ele fica alinhado com o conteúdo. */
.tabela-pecas + .ver-mais,
.lista-com-corte > .ver-mais { margin-left: 12px; }

@media (max-width: 860px) {
    .ver-mais { min-height: 44px; padding: 10px 12px; }
}

/* ==========================================================
   1.71.0 — o menuzinho da pessoa, no alto da tela dela

   O Editar e o Excluir do influenciador moravam só no quadro
   de baixo da lista, que ele mandou tirar — e lá ficavam fora
   do corte da tela dele, para o lado. Vieram para cá, no mesmo
   desenho de três pontinhos do colaborador.
   ========================================================== */
.menu-da-pessoa { margin-left: auto; align-self: flex-start; }

.menu-da-pessoa > summary {
    border: 1px solid var(--linha, #dde3ea);
    border-radius: 10px;
}

@media (max-width: 860px) {
    /* No estreito ele volta para junto do nome, e não para a quebra. */
    .menu-da-pessoa { margin-left: 0; }
}

/* 1.71.0 — o somatório que subiu para cima dos quadros */
.soma-de-todos {
    align-items: baseline;
    color: var(--tinta-fraca, #5b6779);
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin: 0 0 14px;
}

.soma-de-todos strong { color: var(--atencao, #8a6100); font-size: 16px; }
.soma-de-todos.negativo strong { color: var(--negativo, #a32b23); }

/* 1.71.0 — o estado dos dados da empresa, para quem só olha */
.estado-dos-termos { list-style: none; margin: 0; padding: 0; }

.estado-dos-termos li {
    align-items: center;
    border-bottom: 1px solid var(--linha, #dde3ea);
    display: flex;
    gap: 8px;
    padding: 10px 0;
}

.estado-dos-termos li:last-child { border-bottom: 0; }

/* ==========================================================
   1.72.0 — RETIRADAS E PAGAMENTOS: uma linha cada

   Ele: "essa parte de retiradas e pagamentos achei muito
   grande e ocupa bastante espaço, tem como otimizar? deixar
   igual do colab?".

   O molde é o da notinha do colaborador, logo acima: a linha
   é o resumo e abre no lugar. O que era tarja cinza inteira
   embaixo de cada retirada virou o selo da própria linha, e
   os dois botões viraram o menuzinho.
   ========================================================== */
.lista-lancamentos li.linha-lancamento {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    padding: 0;
}

.lista-lancamentos li.linha-lancamento > .uma-retirada,
.lista-lancamentos li.linha-lancamento > .so-a-linha { flex: 1 1 auto; min-width: 0; }

.lista-lancamentos li.linha-lancamento > .mexer { flex: 0 0 auto; padding-top: 8px; }

.uma-retirada > summary,
.linha-lancamento > .so-a-linha {
    align-items: center;
    display: flex;
    gap: 12px;
    list-style: none;
    min-height: 44px;
    padding: 10px 0;
}

.uma-retirada > summary { cursor: pointer; }
.uma-retirada > summary::-webkit-details-marker { display: none; }
.uma-retirada > summary:hover { background: #fafbfd; }

.uma-retirada > summary .quando,
.so-a-linha .quando { flex: 0 0 auto; color: var(--tinta-fraca, #5b6779); }

.uma-retirada > summary .oque,
.so-a-linha .oque { flex: 1 1 auto; min-width: 0; }

.uma-retirada > summary .quanto,
.so-a-linha .quanto { flex: 0 0 auto; font-weight: 700; }

.uma-retirada > summary .selo-mov {
    background: #f1f5f9;
    border-radius: 999px;
    color: #64748b;
    font-size: 12px;
    margin-left: 6px;
    padding: 2px 9px;
    white-space: nowrap;
}

.uma-retirada > summary .abrir-fechar {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237a8699' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
}

.uma-retirada[open] > summary .abrir-fechar { transform: rotate(180deg); }

.dentro-da-retirada {
    border-top: 1px dashed var(--linha, #dde3ea);
    margin-top: 2px;
    padding: 4px 0 16px;
}

@media (max-width: 860px) {
    .uma-retirada > summary,
    .linha-lancamento > .so-a-linha { flex-wrap: wrap; }
    .uma-retirada > summary .oque,
    .so-a-linha .oque { flex: 1 1 100%; order: 3; }
}

/* 1.72.0 — o estado da atualização sozinha, na tela do Bling */
.bling-sozinho {
    color: var(--tinta-fraca, #5b6779);
    font-size: 14px;
    margin: 10px 0 0;
}

.bling-sozinho.com-erro {
    background: var(--fundo-atencao, #fdf6e7);
    border-radius: 10px;
    color: var(--atencao, #8a6100);
    padding: 10px 12px;
}

/*
 * 1.74.0 — O QUADRO POR PESSOA SAIU DAQUI.
 *
 * A 1.73.0 trocou a tabela de colaboradores por um quadro com as
 * duas contas. Ele viu instalado e mandou desfazer. O desenho fica
 * guardado no VERSAO.txt e nas fotos; o estilo sai, porque CSS sem
 * dono é CSS que ninguém sabe se pode mexer.
 */

/* ---------------------------------------------------------------
 * 1.75.0 — ABRIR A ÁREA DA PESSOA
 *
 * O botão vem com a explicação do lado, e não num tutorial só,
 * porque é o único botão do sistema que entra na conta de outra
 * pessoa: quem o aperta tem de ler o que ele faz ali mesmo.
 * --------------------------------------------------------------- */

.abrir-a-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #e0b355;
    border-radius: 10px;
    background: #fdf6e6;
}

.abrir-a-area small {
    flex: 1 1 240px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b4c10;
}

.quem-abriu { margin-top: 10px; }

.quem-abriu summary {
    cursor: pointer;
    font-size: 13px;
    color: #6b7b8c;
}

.quem-abriu ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #4a5a6b;
}