/* =====================================================================
   SC-Beta 1.0.0 - folha de estilo unica
   ---------------------------------------------------------------------
   Nao existe cor escrita aqui. Todas vem das variaveis que o PHP monta
   em App\Support\Parametro::estiloDoTema(), a partir do que foi
   escolhido em CFG001. Trocar a cor da marca muda o sistema inteiro,
   inclusive a tela de entrada.

   Organizacao:
     1. base e tipografia      5. abas internas
     2. estrutura da pagina    6. formularios e tabelas
     3. menu lateral           7. painel e graficos
     4. barra de topo          8. editor de SQL, grade e quadrantes
                               9. entrada, erros e util
   ===================================================================== */

/* 1. base ------------------------------------------------------------ */
:root {
    --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

    --raio-bloco: 10px;
    --raio-campo: 7px;
    --raio-pilula: 999px;

    --lateral-larga: 276px;
    --lateral-estreita: 62px;

    --passo: 8px;
    --respiro: 20px;
}

* { box-sizing: border-box; }

/* O atributo hidden vem da folha do navegador, e qualquer display
   escrito aqui o vence - o .campo e display:flex, entao esconder um
   campo pelo hidden nao funcionava. Esta linha devolve ao hidden o
   poder de esconder, que e o que todo codigo que o usa espera. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* color-scheme faz os controles nativos (data, rolagem) seguirem o tema */
:root { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

body {
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

/* Numero em painel precisa alinhar coluna a coluna */
.numero, .indicador__valor, .tabela td, .barra__valor, .eixo text {
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--tinta);
}

h1 { font-size: 1.12rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

p { margin: 0 0 0.6em; }

a {
    color: var(--marca);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

.pular {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    background: var(--superficie);
    padding: 10px 16px;
}
.pular:focus { left: 8px; top: 8px; }

.so-leitores {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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

.painel-principal {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: var(--lateral-larga);
    transition: margin-left .18s ease;
}

html[data-menu="solto"] .painel-principal { margin-left: var(--lateral-estreita); }

/* A largura que existe e para ser usada.
   Havia um teto de 1680px aqui. Com o menu recolhido, numa tela de
   1920 sobravam 178px de nada do lado direito - e uma grade de itens
   que poderia mostrar mais uma coluna mostrava menos. Quem precisa de
   linha curta para ler e o texto corrido, e esse pede .conteudo--leitura
   em vez de impor o teto a planilha, ao Kardex e ao orcamento. */
.conteudo {
    flex: 1;
    padding: var(--respiro);
    width: 100%;
    min-width: 0;
    /* Coluna, para a faixa de atalhos poder ser empurrada ao pe da
       area de trabalho com margin-top: auto - e nao ficar colada
       embaixo do ultimo cartao, com meia tela vazia abaixo dela. */
    display: flex;
    flex-direction: column;
}
.conteudo > form,
.conteudo > .inicio { min-width: 0; }

.conteudo--leitura { max-width: 980px; }

/* 3. menu lateral ---------------------------------------------------- */
.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lateral-larga);
    background: var(--menu-fundo);
    color: var(--menu-texto);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: width .18s ease;
    overflow: hidden;
}

html[data-menu="solto"] .lateral { width: var(--lateral-estreita); }
html[data-menu="solto"] .lateral:hover,
html[data-menu="solto"] .lateral:focus-within { width: var(--lateral-larga); box-shadow: var(--sombra); }

/* --- menu encolhido: barra de icones ---------------------------------
   Encolhido, o menu tem 62px. Nao cabe nome de programa nenhum - e o
   pedaco que cabia ("Cadastro de consult...") atrapalhava mais do que
   ajudava. Entao, enquanto esta encolhido, so os icones aparecem,
   centrados; o nome volta inteiro quando o ponteiro entra ou quando o
   foco do teclado chega, e enquanto isso o title de cada icone diz de
   quem ele e.

   O texto nao e escondido com display:none: ele encolhe ate zero e
   desaparece em opacidade, para que abrir e fechar o menu seja um
   movimento continuo em vez de um pisca-pisca.

   O seletor e longo porque e condicional de verdade - "solto E sem
   ponteiro em cima E sem foco dentro" - e nao ha estado em JavaScript
   para sair do lugar.                                                */
.item__texto,
.item__cod,
.marca-texto {
    transition: opacity .12s ease .04s;
}

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .item__texto,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .item__cod,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .marca-texto {
    flex: 0 0 0;
    width: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    transition-delay: 0s;
}

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .lateral__pino,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .campo-busca input {
    display: none;
}

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .item {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
}
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .item--ativo::before { left: 0; }

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .lateral__marca {
    justify-content: center;
    padding: 16px 0 12px;
}
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .marca-link { justify-content: center; gap: 0; }

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .lateral__busca { padding: 0 11px 12px; }
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .campo-busca {
    justify-content: center;
    padding: 8px 0;
}

html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .lateral__menu { overflow: hidden; }

.lateral__marca { justify-content: center; padding: 16px 0 12px; }
.lateral--encolhido .marca-link { justify-content: center; }

.lateral--encolhido .lateral__busca { padding: 0 11px 12px; }
.lateral--encolhido .campo-busca { justify-content: center; padding: 8px 0; }

/* encolhido: o cabecalho do modulo vira so o icone, centrado */
/* Encolhido, o cabeçalho do módulo é SÓ o ícone — veja a regra
   .menu-so-icone mais abaixo, que é onde isso está escrito uma vez só. */
.lateral--encolhido .modulo__titulo { justify-content: center; padding: 8px 0; }
.lateral--encolhido .modulo__corpo { grid-template-rows: 0fr; }
.lateral--encolhido .modulo__corpo .item { margin-left: 0; }

.lateral--encolhido .lateral__menu { padding: 0 8px 12px; overflow: hidden; }

.lateral__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px 12px;
    min-height: 64px;
}

.marca-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--menu-texto);
    text-decoration: none;
    min-width: 0;
}
.marca-link:hover { text-decoration: none; }

/* Era um quadrado de 34, do tempo do brasao. O peixe e deitado: um
   quadrado o obrigaria a encolher ate sumir. */
.marca-simbolo {
    display: grid;
    place-items: center;
    width: 46px;
    flex: 0 0 46px;
    color: var(--menu-texto);
}

.marca-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    white-space: nowrap;
}
.marca-texto strong { font-size: 1.02rem; letter-spacing: -0.01em; }
.marca-texto small { color: var(--menu-suave); font-size: 0.72rem; }

.lateral__pino {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--menu-suave);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--raio-campo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Dois botoes lado a lado: so o primeiro empurra. */
.lateral__pino + .lateral__pino { margin-left: 2px; }
.lateral__pino:hover { color: var(--menu-texto); background: rgba(255,255,255,.08); }
html[data-menu="solto"] .lateral__pino { opacity: .5; }

.lateral__busca { padding: 0 12px 12px; }

.campo-busca {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--raio-campo);
    padding: 0 9px;
    color: var(--menu-suave);
}
.campo-busca input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--menu-texto);
    padding: 7px 0;
    font-family: inherit;
    font-size: 0.84rem;
}
.campo-busca input::placeholder { color: var(--menu-suave); }
.campo-busca input:focus { outline: none; }
.campo-busca:focus-within { border-color: rgba(255,255,255,.3); }

.lateral__menu {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}
.lateral__menu::-webkit-scrollbar { width: 6px; }
.lateral__menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

/* módulo recolhível ------------------------------------------------- */
.modulo + .modulo { margin-top: 2px; }

.modulo__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: var(--raio-campo);
    color: var(--menu-texto);
    opacity: .72;
    font: inherit;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    text-align: left;
}
.modulo__titulo:hover { background: rgba(255,255,255,.08); opacity: 1; }
.modulo--aberto > .modulo__titulo { opacity: 1; }

/* o módulo onde a pessoa está fica marcado mesmo fechado */
.modulo--aqui > .modulo__titulo { color: var(--menu-texto); }
.modulo--aqui > .modulo__titulo .modulo__icone { color: var(--marca-suave); }

.modulo__icone { display: grid; place-items: center; width: 20px; flex: 0 0 20px; }
.modulo__nome  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.modulo__conta {
    font-size: 0.64rem;
    font-family: var(--fonte-mono);
    color: var(--menu-suave);
    letter-spacing: 0;
}
.modulo--aberto .modulo__conta { opacity: 0; }

.modulo__seta {
    display: grid;
    place-items: center;
    flex: 0 0 15px;
    color: var(--menu-suave);
    transition: transform .18s ease;
}
.modulo--aberto .modulo__seta { transform: rotate(180deg); }

/*
 * Fechado é altura zero, não display:none.
 *
 * O menu abre e fecha dezenas de vezes por dia; com grid-template-rows
 * o navegador anima a altura sem precisar medir nada em JavaScript, e
 * sem recalcular o layout da página inteira a cada clique.
 *
 * O corpo precisa ter UM filho só. Com os programas soltos lá dentro,
 * cada um vira uma faixa implícita de altura automática e o 0fr não
 * fecha nada — foi o que aconteceu na primeira tentativa.
 */
.modulo__corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
}
.modulo--aberto > .modulo__corpo { grid-template-rows: 1fr; }
.modulo__lista { overflow: hidden; min-height: 0; }
.modulo__corpo .item { margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
    .modulo__corpo, .modulo__seta { transition: none; }
}

/* menu solto e encolhido: só os ícones, sem cabeçalho de módulo */
/* --- menu encolhido: o cabeçalho do módulo é só o ícone -------------
   opacity:0 sozinho NÃO resolve: o nome, o contador e a seta continuam
   OCUPANDO largura. Numa tira de 62px os quatro filhos somavam mais do
   que cabia, e com justify-content:center o excesso vazava para os DOIS
   lados — o ícone ia para x = -5 e saía cortado pela borda esquerda.

   Então eles encolhem até zero de verdade, como o texto dos programas
   já fazia. O ícone fica sozinho, e sozinho ele centra.               */
.lateral--encolhido .modulo__nome,
.lateral--encolhido .modulo__conta,
.lateral--encolhido .modulo__seta,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__nome,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__conta,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__seta {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Sem o gap, o ícone de 20px fica no meio exato dos 62px. */
.lateral--encolhido .modulo__titulo,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__titulo {
    gap: 0;
}
/* Recolhido, o modulo fica FECHADO.
   Antes abria todos (1fr) e a tira de 62px virava uma coluna de 37
   icones de programa, um atras do outro, sem nome nenhum: impossivel
   saber onde comeca um modulo e acaba o outro. Recolhido agora mostra
   so os oito icones de modulo - que e para isso que a tira serve. */
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__corpo {
    grid-template-rows: 0fr;
}
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .modulo__titulo {
    justify-content: center;
    padding: 8px 0;
}

.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--raio-campo);
    color: var(--menu-texto);
    opacity: .82;
    white-space: nowrap;
    position: relative;
}
.item:hover { background: rgba(255,255,255,.08); opacity: 1; text-decoration: none; }

.item--ativo {
    background: var(--menu-ativo);
    opacity: 1;
}
.item--ativo::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--menu-texto);
}

.item__icone { display: grid; place-items: center; width: 20px; flex: 0 0 20px; }
.item__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.88rem; }
.item__cod { font-size: 0.66rem; color: var(--menu-suave); font-family: var(--fonte-mono); }

.lateral__pe {
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.item--discreto { opacity: .6; font-size: 0.84rem; }

/* 4. barra de topo --------------------------------------------------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--respiro);
    height: 58px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}

.topo__menu {
    display: none;
    background: none;
    border: 0;
    color: var(--tinta);
    cursor: pointer;
    padding: 6px;
}

.topo__titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.topo__titulo h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selo {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--raio-pilula);
    font-size: 0.68rem;
    font-family: var(--fonte-mono);
    background: var(--realce-marca);
    color: var(--marca);
    border: 1px solid var(--borda-marca);
}
/**
 * Selos: quatro estados, cada um com DOIS nomes.
 *
 * As telas foram escritas por maos diferentes e usam os dois
 * vocabularios - ok/bom, erro/critico, aviso/atencao. Enquanto so
 * metade existia aqui, a outra metade caia no cinza do .selo base: a
 * baixa "valida" e a baixa "estornada" desenhavam IGUAIS, e a cor que
 * devia dizer qual era qual nao dizia nada.
 *
 * Em vez de reescrever vinte e cinco pontos de chamada - cada um uma
 * chance de errar -, os dois nomes de cada estado apontam para a mesma
 * regra. Novas telas podem usar qualquer um.
 */
.selo--ok,
.selo--bom     { background: color-mix(in srgb, var(--estado-bom) 14%, transparent); color: var(--estado-bom); border-color: color-mix(in srgb, var(--estado-bom) 35%, transparent); }
.selo--erro,
.selo--critico { background: color-mix(in srgb, var(--estado-critico) 14%, transparent); color: var(--estado-critico); border-color: color-mix(in srgb, var(--estado-critico) 35%, transparent); }
.selo--aviso,
.selo--atencao { background: color-mix(in srgb, var(--estado-atencao) 16%, transparent); color: var(--estado-atencao); border-color: color-mix(in srgb, var(--estado-atencao) 38%, transparent); }
.selo--neutro  { background: var(--realce); color: var(--cinza); border-color: var(--borda); }
.selo--info    { background: var(--realce-marca); color: var(--marca); border-color: color-mix(in srgb, var(--marca) 38%, transparent); }
.selo--codigo  { background: var(--realce); color: var(--tinta); border-color: var(--borda); font-family: var(--fonte-mono, ui-monospace, monospace); letter-spacing: 0; }

.topo__acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .botao-icone esta definido UMA vez, mais abaixo, junto dos outros
   botoes. Havia duas definicoes: uma com padding 6px 8px e outra com
   28x28 fixos. As duas valiam ao mesmo tempo - a altura vinha de uma, o
   padding da outra - e sobravam 10px de area util para um desenho de
   18px, que transbordava 4px para a direita. Era esse o botao de tema
   claro/escuro torto. */

html[data-tema="claro"] .so-escuro { display: none; }
html[data-tema="escuro"] .so-claro { display: none; }

.topo__usuario {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 10px;
    border-left: 1px solid var(--borda);
}
.topo__usuario-dados { display: flex; flex-direction: column; line-height: 1.25; }
.topo__usuario-dados strong { font-size: 0.86rem; font-weight: 600; }
.topo__usuario-dados small { font-size: 0.7rem; color: var(--cinza); }

.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--marca);
    color: var(--marca-tinta);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.82rem;
}

/* 5. abas internas --------------------------------------------------- */
.barra-abas {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px var(--respiro);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    overflow-x: auto;
}

.aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    font-size: 0.8rem;
    background: var(--fundo);
    white-space: nowrap;
}
.aba a { color: var(--tinta-suave); text-decoration: none; }
.aba em { font-style: normal; font-family: var(--fonte-mono); font-size: 0.68rem; color: var(--cinza); margin-right: 3px; }
.aba--ativa { background: var(--realce-marca); border-color: var(--borda-marca); }
.aba--ativa a, .aba--ativa em { color: var(--marca); }
.aba__fechar { padding: 0 4px; border-radius: 50%; font-size: 0.72rem; }
.aba__fechar:hover { background: var(--borda); text-decoration: none; }
.aba__limpar { font-size: 0.75rem; color: var(--cinza); margin-left: 4px; }

/*
 * Abas de RESULTADO: o que terminou em segundo plano. Barra propria, e
 * nao a das abas de programa, porque aquela pode estar desligada pelo
 * parametro de abertura - e um resultado pronto tem de aparecer de
 * qualquer jeito.
 */
.barra-resultados {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--respiro);
    background: var(--realce);
    border-bottom: 1px solid var(--borda);
    overflow-x: auto;
}
.barra-resultados__rotulo {
    font-size: 0.76rem;
    color: var(--cinza);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.aba--resultado { border-color: var(--estado-bom); background: var(--superficie); }
.aba--resultado a { color: var(--tinta); font-weight: 600; }
.aba--resultado em { margin-left: 6px; margin-right: 0; }

/*
 * A bandeja do cabecalho. O numero nasce do atributo data-contagem,
 * entao o JavaScript so troca um numero e o CSS cuida da aparencia.
 */
.bandeja__caixa { position: relative; }
.bandeja[data-contagem="0"]::after { display: none; }
.bandeja::after {
    content: attr(data-contagem);
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: var(--raio-pilula);
    background: var(--marca);
    color: var(--marca-tinta);
    font-size: 0.62rem;
    line-height: 15px;
    font-weight: 700;
    text-align: center;
}
.bandeja--pronta::after { background: var(--estado-bom); }
.bandeja--ativa svg { animation: girar 2.6s linear infinite; }

.bandeja__painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 70;
    width: min(380px, 86vw);
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.bandeja__painel header { margin-bottom: 8px; }
.bandeja__painel header small { display: block; color: var(--cinza); font-size: 0.76rem; }
.bandeja__vazio { color: var(--cinza); font-size: 0.82rem; margin: 0; }
.bandeja__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--borda);
    font-size: 0.84rem;
}
.bandeja__item strong { flex: 1; min-width: 0; font-weight: 600; }
.bandeja__estado { color: var(--cinza); font-size: 0.76rem; display: inline-flex; align-items: center; gap: 6px; }
.bandeja__item--erro .bandeja__estado { color: var(--estado-critico); }

/* Bloco esperando o proprio dado ------------------------------------- */
.bloco--esperando .bloco__espera {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    color: var(--cinza);
    font-size: 0.8rem;
}
.bloco__espera-texto { font-variant-numeric: tabular-nums; }
.bloco--esperando { opacity: 0.86; }

/*
 * Avisos de coisa pronta: canto de baixo, nao o topo. O topo e onde
 * ficam as abas e o cabecalho - tapar a navegacao para avisar que algo
 * terminou e trocar um problema por outro.
 */
#avisos-vivos {
    top: auto;
    bottom: 18px;
    left: auto;
    right: 18px;
    transform: none;
    width: min(420px, 92vw);
}
.aviso__acao { margin-left: 6px; font-weight: 600; }
.aviso__fechar {
    margin-left: 10px;
    border: 0;
    background: none;
    color: var(--cinza);
    cursor: pointer;
    font-size: 0.8rem;
}

/* 6. formularios, botoes e tabelas ----------------------------------- */

/* --- desenho dentro de botao -----------------------------------------
   SVG e elemento em linha: deitado na linha de base, ele deixa uns 3px
   de espaco de descendente embaixo, e o botao fica com o desenho alto
   por um fio - pouco para se notar num botao, visivel numa fileira
   deles. display:block tira a linha de base da conta; o flex:none
   impede que um desenho encolha quando o botao aperta.

   Vale para botao, link-botao e os botoes de icone do sistema, e nao
   para SVG solto no meio de um texto - esse PRECISA da linha de base. */
button > svg,
.botao > svg,
.botao-icone > svg,
.lateral__pino > svg {
    display: block;
    flex: none;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--raio-campo);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--realce);
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
}
.botao:hover { text-decoration: none; filter: brightness(.97); }
.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao--principal { background: var(--marca); color: var(--marca-tinta); }
.botao--principal:hover { background: var(--marca-forte); }

.botao--contorno { background: transparent; border-color: var(--borda-forte); color: var(--tinta); }
.botao--contorno:hover { background: var(--realce); }

.botao--texto { background: none; color: var(--tinta-suave); padding: 6px 10px; }
.botao--texto:hover { background: var(--realce); }

.botao--perigo { background: transparent; border-color: var(--estado-critico); color: var(--estado-critico); }
.botao--perigo:hover { background: color-mix(in srgb, var(--estado-critico) 10%, transparent); }

.botao--largo { width: 100%; }
.botao--miudo { padding: 5px 9px; font-size: 0.78rem; }

.campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.campo > span {
    font-size: 0.75rem;
    color: var(--cinza);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campo input,
.campo select,
.campo textarea,
.caixa-texto {
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--campo-texto);
    background: var(--campo);
    border: 1px solid var(--campo-borda);
    border-radius: var(--raio-campo);
    padding: 7px 9px;
    width: 100%;
    min-width: 0;
}
/* O CONTEÚDO QUE NÃO CABE TERMINA EM RETICÊNCIAS, não contra a borda.
   "CLI001 — Cliente Demonstração Ltda" é mais largo do que qualquer
   campo de um formulário de três colunas, e num <select> o texto não
   tem para onde ir: ele ia até a setinha e era cortado no meio da
   letra - o que na tela se lê como um campo em cima do outro.
   Nada se perde: o app.js põe o texto inteiro no title de todo campo
   que corta, e a lista aberta do select sempre mostra tudo. */
.campo input,
.campo select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* DATA E HORA NÃO ACEITAM RETICÊNCIAS: o widget é do navegador, e
   quando não cabe ele corta o ano no meio - "30/10/202". Ou cabe, ou
   aparece errado.
   O piso vai na CÉLULA da grade, não no campo: posto no campo, ele
   transborda a célula e passa por cima do vizinho - que é justamente o
   defeito que se está corrigindo. Na célula, a coluna cede. */
.grade-form > .campo:has(input[type="date"]),
.grade-form > .campo:has(input[type="datetime-local"]) { min-width: 7.5rem; }
.grade-form > .campo:has(input[type="time"]),
.grade-form > .campo:has(input[type="month"]) { min-width: 5.75rem; }
.campo select { appearance: none; padding-right: 26px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--realce-marca);
    /* O HALO DO FOCO PINTA POR CIMA, não por baixo.
       Ele se estende 3px para fora do campo, e sem isto quem pinta
       depois - o campo ao lado, um botão colado - cobre esse pedaço: o
       halo aparece recortado de um lado só, que é como se lê "um campo
       por cima do outro". Elevado, ele fica inteiro e por cima, que é
       o que o foco quer dizer. */
    position: relative;
    z-index: 2;
}
.campo input:disabled, .campo select:disabled { background: var(--realce); color: var(--cinza); }
/* Botão colado embaixo de um campo ganha folga: o halo do foco avança
   3px para fora, e sem isto ele encostava na borda do botão. */
.campo + .botao, .campo + button { margin-top: 5px; }
.campo__dica { font-size: 0.72rem; color: var(--cinza); }
.campo__erro { font-size: 0.72rem; color: var(--estado-critico); }

.campo--linha { flex-direction: row; align-items: center; gap: 8px; }
.campo--linha input[type="checkbox"] { width: auto; }
.campo--linha > span { font-size: 0.86rem; color: var(--tinta); }

.grade-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-12 { grid-column: span 12; }

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    margin-bottom: 16px;
}
.cartao__cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
}
.cartao__cabecalho h2, .cartao__cabecalho h3 { margin: 0; }
.cartao__cabecalho .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cartao__corpo { padding: 16px; }
.cartao__pe {
    padding: 12px 16px;
    border-top: 1px solid var(--borda);
    display: flex;
    gap: 8px;
    align-items: center;
}
.cartao__pe .direita { margin-left: auto; display: flex; gap: 8px; }

/* atalhos para as partes de uma tela comprida (PAI002) */
.atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: var(--cinza);
}
.atalhos a {
    padding: 4px 11px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    color: var(--tinta-suave);
    text-decoration: none;
}
.atalhos a:hover { border-color: var(--borda-marca); color: var(--marca); text-decoration: none; }

.barra-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.barra-ferramentas .campo { width: 190px; }
.barra-ferramentas .direita { margin-left: auto; display: flex; gap: 8px; align-items: flex-end; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.tabela th {
    text-align: left;
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--cinza);
    padding: 9px 12px;
    border-bottom: 1px solid var(--borda-forte);
    white-space: nowrap;
    background: var(--superficie);
}
.tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--realce); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .numerico { text-align: right; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela__rolagem { overflow: auto; max-height: 70vh; }
.tabela__rolagem thead th { position: sticky; top: 0; z-index: 2; }

/* Tabela compacta: a mesma tabela com menos ar. Uma declaracao so -
   ela estava escrita duas vezes no arquivo, com medidas diferentes. */
.tabela--compacta td, .tabela--compacta th { padding: 5px 10px; font-size: 0.84rem; }

/**
 * Tabela justa: linha fina, informacao TABELADA.
 *
 * O pedido foi literal - "vamos tabelar as informacoes, deixando a
 * linha mais fina, explorando melhor o espaco em tela". A tela de
 * liquidacao empilhava rotulo em cima de valor dentro da celula: a
 * linha ficava com tres alturas de texto e o meio dela vazio, e caber
 * oito titulos na tela virava rolagem.
 *
 * Aqui cada dado tem a sua COLUNA, com cabecalho proprio, e a linha
 * tem a altura de uma linha de texto. O rotulo sai de dentro da celula
 * e sobe para o thead, onde se escreve uma vez em vez de uma vez por
 * linha.
 */
.tabela--justa td, .tabela--justa th { padding: 4px 9px; }
.tabela--justa { font-size: 0.82rem; }
.tabela--justa th { font-size: 0.68rem; letter-spacing: 0.02em; }
.tabela--justa td { white-space: nowrap; }
.tabela--justa .solta { white-space: normal; min-width: 180px; }
/* O apoio vira sufixo na propria linha, nao uma segunda linha. */
.tabela--justa small.campo__dica { display: inline; margin-left: 6px; font-size: 0.72rem; }
.tabela--justa input[type="text"],
.tabela--justa input[type="date"],
.tabela--justa select { padding: 3px 6px; font-size: 0.8rem; }
/* Selo, lupa e botao miudo DENTRO da linha justa nao podem decidir a
   altura dela: um selo com o respiro de fora deixava a linha de 30px
   com 36px, e a economia de espaco ia junto. */
.tabela--justa .selo { padding: 1px 6px; font-size: 0.66rem; }
.tabela--justa .botao-icone { width: 22px; height: 22px; padding: 0; }
.tabela--justa .botao-icone svg { width: 14px; height: 14px; }
.tabela--justa .botao--miudo { padding: 2px 9px; font-size: 0.76rem; line-height: 1.3; }
.tabela--justa input[type="checkbox"] { margin: 0; vertical-align: middle; }
/* O campo de motivo do estorno mora na ultima coluna. Com a largura de
   fora (150px) ele empurrava a coluna da acao para alem da tela, e a
   acao e justamente o que a pessoa veio fazer. */
.tabela--justa .form-estorno { gap: 4px; }
.tabela--justa .form-estorno input { width: 108px; }

/**
 * A coluna de AÇÃO fica grudada na direita.
 *
 * Tabela justa com dez colunas e um campo de motivo passa da largura da
 * tela, e o que saía para fora era sempre a última coluna - justamente
 * o botão que a pessoa veio apertar. Rolar para encontrar a ação de uma
 * linha que já se enxerga é trabalho sem resultado.
 *
 * Grudada, a ação acompanha a rolagem horizontal e os dados continuam
 * todos ali, ao alcance de um arrasto. A borda à esquerda diz onde o
 * conteúdo que rola termina.
 */
.tabela-rolagem .tabela--justa td.acoes:last-child,
.tabela-rolagem .tabela--justa th.acoes:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--superficie);
    box-shadow: -8px 0 8px -8px rgba(16, 36, 43, 0.25);
}
.tabela-rolagem .tabela--justa tbody tr:hover td.acoes:last-child { background: var(--realce); }
.tabela-rolagem .tabela--justa tr.linha--pendente td.acoes:last-child {
    background: color-mix(in srgb, var(--estado-atencao) 8%, var(--superficie));
}

/* O que falta conciliar fica visivel na propria linha: o total do dia
   pode fechar com dois erros de sinal trocado, a linha nao mente. */
.linha--pendente { background: color-mix(in srgb, var(--estado-atencao) 8%, transparent); }
.linha--pendente:hover { background: color-mix(in srgb, var(--estado-atencao) 14%, transparent); }

.codigo {
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    color: var(--marca);
}

.vazio {
    text-align: center;
    padding: 60px 20px;
    color: var(--cinza);
    max-width: 580px;
    margin: 0 auto;
}
.vazio h2 { color: var(--tinta); margin-bottom: 8px; }
.vazio__acoes { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }

/* avisos ------------------------------------------------------------- */
.avisos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.avisos--flutuante {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    width: min(520px, 92vw);
}

.aviso {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--raio-campo);
    border: 1px solid var(--borda);
    background: var(--superficie);
    font-size: 0.86rem;
    border-left-width: 3px;
}
.aviso--ok      { border-left-color: var(--estado-bom); }
.aviso--erro    { border-left-color: var(--estado-critico); }
.aviso--atencao { border-left-color: var(--estado-atencao); }
.aviso--info    { border-left-color: var(--marca); }

/* 7. painel ---------------------------------------------------------- */
.painel__cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.painel__nome { font-size: 1.32rem; letter-spacing: -0.02em; }
.painel__subtitulo { color: var(--cinza); font-size: 0.84rem; margin: 2px 0 0; }
.painel__estado { margin-left: 8px; color: var(--tinta-suave); }
.painel__comandos { margin-left: auto; display: flex; gap: 10px; align-items: flex-end; }

/*
 * Painel sem nada montado. Quando o sistema abre sem painel de entrada,
 * a tela fica so com o fundo: nenhum titulo, nenhum numero, nenhuma
 * escolha feita por conta propria. O unico elemento e o seletor, e ele
 * fica discreto para nao parecer um painel vazio quebrado.
 */
.painel--vazio { min-height: 50vh; }
.painel__cabecalho--discreto { margin-bottom: 0; min-height: 34px; }
.painel__cabecalho--discreto .campo--compacto select { opacity: 0.7; }
.painel__cabecalho--discreto .campo--compacto select:hover,
.painel__cabecalho--discreto .campo--compacto select:focus { opacity: 1; }

.regua {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    margin-bottom: 10px;
}
.campo--filtro { grid-column: span var(--largura, 2); }
.regua__acoes {
    grid-column: span 2;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    /*
     * QUEBRA EM VEZ DE ATROPELAR.
     *
     * A faixa de ações ocupa duas colunas da régua, mas o que entra nela
     * varia por tela: num filtro é só "Gerar"; noutro é Gerar + PDF +
     * Excel. Sem a quebra, os botões transbordavam para a esquerda e
     * desenhavam POR CIMA do último campo — no extrato bancário, o
     * "Gerar" cobria metade do campo Situação.
     *
     * Com a quebra, eles descem uma linha dentro da própria célula e a
     * linha da grade cresce. Ocupar duas linhas é feio; cobrir um campo
     * que a pessoa precisa usar é defeito.
     */
    flex-wrap: wrap;
}

.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: var(--raio-pilula);
    background: var(--realce-marca);
    border: 1px solid var(--borda-marca);
    font-size: 0.76rem;
    color: var(--marca);
}
.ficha b { font-weight: 600; }
.ficha button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 3px;
    border-radius: 50%;
}
.ficha button:hover { background: var(--borda-marca); }

.tiras {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--borda);
    margin-bottom: 16px;
    overflow-x: auto;
}
.tira {
    padding: 9px 14px;
    color: var(--cinza);
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tira:hover { color: var(--tinta); text-decoration: none; }
.tira--ativa { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }

.grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.bloco {
    grid-column: span var(--largura, 3);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.bloco__cabecalho {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 16px 8px;
}
.bloco__titulo { font-size: 0.9rem; font-weight: 600; }
.bloco__nota { margin-left: auto; font-size: 0.7rem; color: var(--cinza); }
.bloco__corpo { padding: 4px 16px 16px; flex: 1; min-width: 0; }
.bloco--alto .bloco__corpo { min-height: 240px; }

/* indicador: a regra colorida a esquerda e quem carrega o estado */
.bloco--indicador {
    border-left: 3px solid var(--cor-indicador, var(--marca));
    padding: 14px 16px;
    gap: 2px;
}
.indicador__rotulo { font-size: 0.76rem; color: var(--cinza); }
.indicador__valor {
    font-size: 2.1rem;
    font-weight: 650;
    letter-spacing: -0.028em;
    line-height: 1.15;
    color: var(--cor-indicador, var(--tinta));
}
.indicador__apoio { font-size: 0.74rem; color: var(--cinza); }

/* barras horizontais */
.barras { display: flex; flex-direction: column; gap: 7px; }
.barra {
    display: grid;
    grid-template-columns: minmax(80px, 34%) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
}
.barra__rotulo {
    color: var(--tinta-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barra__trilho {
    display: block;
    height: 11px;
    background: var(--trilho);
    border-radius: 4px;
    overflow: hidden;
}
.barra__preenche {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--cor-serie, var(--marca));
    transition: width .25s ease;
}
.barra__valor { color: var(--tinta); font-weight: 600; min-width: 48px; text-align: right; }

.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--cinza);
}
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda i {
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--cor-serie);
    display: inline-block;
}

.grafico { width: 100%; display: block; }
.grafico .eixo text { font-size: 10.5px; fill: var(--cinza); }
.grafico .grade-linha { stroke: var(--grade); stroke-width: 1; }
.grafico .marca-ponto { stroke: var(--superficie); stroke-width: 2; }

.bloco__erro {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--estado-critico);
    background: color-mix(in srgb, var(--estado-critico) 7%, transparent);
    border-top: 1px solid var(--borda);
    word-break: break-word;
}

.bloco__vazio {
    padding: 28px 10px;
    text-align: center;
    color: var(--cinza);
    font-size: 0.82rem;
}

.dica-grafico {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    background: var(--superficie);
    color: var(--tinta);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-campo);
    box-shadow: var(--sombra);
    padding: 7px 10px;
    font-size: 0.78rem;
    max-width: 260px;
}
.dica-grafico b { display: block; font-weight: 600; }
.dica-grafico span { color: var(--cinza); }

/* 8. editor de SQL, grade e quadrantes -------------------------------- */

/* --- editor colorido -------------------------------------------------
   O textarea e a camada pintada ficam uma sobre a outra e precisam medir
   exatamente o mesmo: as duas leem estas quatro variaveis, e so elas.
   Mexer na fonte ou no recuo de um lado so descola o cursor da cor.    */
.editor-codigo {
    --editor-fonte: var(--fonte-mono);
    --editor-tamanho: 0.82rem;
    --editor-linha: 1.6;
    --editor-recuo: 10px 12px;

    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    background: var(--campo);
    border: 1px solid var(--campo-borda);
    border-radius: var(--raio-campo);
    overflow: hidden;
}
.editor-codigo:focus-within {
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--realce-marca);
}

/* numeracao: largura propria, rolagem acompanhando o texto */
.editor-codigo__regua {
    flex: 0 0 auto;
    width: 3.2em;
    padding: var(--editor-recuo);
    padding-right: 8px;
    font-family: var(--editor-fonte);
    font-size: var(--editor-tamanho);
    line-height: var(--editor-linha);
    text-align: right;
    white-space: pre;
    color: var(--cinza);
    background: var(--sql-linha);
    border-right: 1px solid var(--borda);
    user-select: none;
    overflow: hidden;
    will-change: transform;
}

.editor-codigo__rolo {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.editor-codigo__pinta,
.editor-codigo__texto {
    margin: 0;
    padding: var(--editor-recuo);
    font-family: var(--editor-fonte);
    font-size: var(--editor-tamanho);
    line-height: var(--editor-linha);
    letter-spacing: normal;
    tab-size: 4;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    border: 0;
}

.editor-codigo__pinta {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    width: max-content;
    color: var(--tinta);
    pointer-events: none;
    will-change: transform;
}

.editor-codigo__texto {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    overflow: auto;
    background: transparent;
    color: transparent;
    caret-color: var(--tinta);
    outline: none;
}
.editor-codigo__texto:focus { outline: none; box-shadow: none; }

/* A selecao precisa deixar a cor passar por baixo: sem alfa, o retangulo
   da selecao cobriria o texto pintado e a tela pareceria apagar. */
.editor-codigo__texto::selection { background: var(--realce-marca); }
.editor-codigo__texto::selection { background: color-mix(in srgb, var(--marca) 26%, transparent); }

/* altura solta, para o cadastro de consultas: a altura vem do
   data-altura do textarea e a alca fica na caixa, nao no texto */
.editor-codigo--solto { resize: vertical; min-height: 140px; }

/* cores da sintaxe: todas vem do tema, como o resto do sistema */
.sql-chave      { color: var(--sql-chave); font-weight: 600; }
.sql-funcao     { color: var(--sql-funcao); }
.sql-texto      { color: var(--sql-texto); }
.sql-numero     { color: var(--sql-numero); }
.sql-comentario { color: var(--sql-comentario); font-style: italic; }
.sql-parametro  { color: var(--sql-parametro); font-weight: 700; }
.sql-nome       { color: var(--sql-nome); }
.sql-operador   { color: var(--sql-operador); }
.sql-ativo      { background: var(--sql-ativo); border-radius: 3px; }

/* --- grade de resultados ---------------------------------------------
   Separada da .tabela de cadastro de proposito: aqui o dado e de outra
   pessoa, pode ter mil linhas e sessenta colunas, e quem olha espera o
   comportamento do cliente SQL que ja usa.                            */
.grade-sql {
    height: 100%;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
}
.grade-sql:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.grade-sql__tabela {
    border-collapse: separate;   /* colapsado, a borda do cabecalho fixo desaparece */
    border-spacing: 0;
    font-size: 0.82rem;
    font-family: var(--fonte-mono);
}

.grade-sql__tabela th,
.grade-sql__tabela td {
    padding: 5px 10px;
    text-align: left;
    border-right: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.grade-sql__tabela thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 6px 10px;
    background: var(--realce);
    border-bottom: 1px solid var(--borda-forte);
    font-weight: 600;
    font-family: var(--fonte);
}
.grade-sql__nome { display: block; font-size: 0.76rem; color: var(--tinta); }
.grade-sql__tipo { display: block; font-size: 0.66rem; color: var(--cinza); font-weight: 400; }

/* numero da linha: fica parado na rolagem horizontal */
.grade-sql__num,
.grade-sql__canto {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 3.4em;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--cinza);
    background: var(--realce);
    border-right: 1px solid var(--borda-forte);
}
.grade-sql__canto { z-index: 4; text-align: center; }

.grade-sql__tabela tbody tr:hover td { background: var(--sql-linha); }
.grade-sql__tabela td.numerico { text-align: right; font-variant-numeric: tabular-nums; }
.grade-sql__tabela th.numerico .grade-sql__nome,
.grade-sql__tabela th.numerico .grade-sql__tipo { text-align: right; }

.grade-sql__nulo { color: var(--cinza); font-style: italic; }
.grade-sql__vazio::after { content: "''"; color: var(--cinza); font-size: 0.7rem; }

.grade-sql__escolhida {
    outline: 2px solid var(--marca);
    outline-offset: -2px;
    background: var(--realce-marca) !important;
}

.grade-sql__puxador {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}
/* --- quadrantes ------------------------------------------------------ */
.bancada {
    display: grid;
    grid-template-rows: var(--alto, 45%) 9px minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    min-height: 420px;
    min-width: 0;
    gap: 0;
}
.bancada__parte {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.bancada__divisor {
    position: relative;
    cursor: row-resize;
    background: transparent;
    touch-action: none;
}
.bancada__divisor::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 4px;
    height: 1px;
    background: var(--borda-forte);
}
.bancada__divisor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 1px;
    width: 46px;
    height: 7px;
    margin-left: -23px;
    border-radius: var(--raio-pilula);
    background: var(--borda-forte);
    transition: background .15s ease;
}
.bancada__divisor:hover::after,
.bancada__divisor:focus-visible::after { background: var(--marca); }
.bancada__divisor:focus-visible { outline: none; }
.bancada--arrastando { user-select: none; cursor: row-resize; }
.bancada--arrastando .bancada__divisor::after { background: var(--marca); }

/* o quadro HTML dentro do painel: ocupa o bloco e nada mais */
.quadro-html { min-width: 0; font-size: 0.86rem; }
.quadro-html img, .quadro-html table { max-width: 100%; }
.quadro-html table { border-collapse: collapse; }

/* textarea de codigo sem coloracao: o HTML do quadro do painel */
.caixa-codigo {
    font-family: var(--fonte-mono);
    font-size: 0.8rem;
    line-height: 1.55;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
    resize: vertical;
    min-height: 220px;
}

/* a ajuda das marcas do quadro HTML */
.quadro-html__ajuda {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--realce);
    font-size: 0.8rem;
}
.quadro-html__ajuda p { margin: 0 0 8px; color: var(--tinta-suave); }
.quadro-html__ajuda .tabela { background: var(--superficie); border-radius: var(--raio-campo); }
.quadro-html__ajuda .tabela td { font-size: 0.78rem; }

/* --- painel em modo relatorio ---------------------------------------- */
.relatorio .resultado__resumo { border-bottom: 1px solid var(--borda); }
.relatorio .grade-sql { border: 0; border-radius: 0 0 var(--raio-bloco) var(--raio-bloco); max-height: 68vh; height: auto; }

/* a linha de totais fica parada no pe da tabela */
.grade-sql__tabela tfoot td,
.grade-sql__tabela tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--realce);
    border-top: 1px solid var(--borda-forte);
    font-weight: 600;
}
.grade-sql__tabela tfoot th { z-index: 4; }
.grade-sql__total { color: var(--tinta); }

@media print {
    .relatorio .painel__comandos, .relatorio .regua { display: none !important; }
    .relatorio .grade-sql { max-height: none; overflow: visible; }
    .grade-sql__tabela thead th { position: static; }
    .grade-sql__tabela tfoot td, .grade-sql__tabela tfoot th { position: static; }
}

/* --- visoes HTML (VIS001) --------------------------------------------
   A visao e uma tela inteira montada a mao. Aqui so mora a moldura: a
   barra de cima, a area do conteudo e a versao de parede. O que esta
   dentro e CSS do proprio autor da visao.                            */
.visao { display: flex; flex-direction: column; min-width: 0; }
.visao__barra {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.visao__barra .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.visao__barra p { margin: 2px 0 0; }
/* O quadro isolado: ocupa tudo o que sobra, com moldura so do sistema */
.visao__quadro {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    background: var(--superficie);
}
.visao .visao__quadro { height: calc(100vh - 230px); min-height: 420px; }
.visao__quadro--previa {
    height: 540px;
    flex: none;
    border: 0;
    border-top: 1px solid var(--borda);
    border-radius: 0 0 var(--raio-bloco) var(--raio-bloco);
}
.visao__avisos { margin-top: 14px; display: grid; gap: 8px; }

/* campo com unidade colada, tipo "30 s" */
.campo--sufixo { display: flex; align-items: center; gap: 6px; }
.campo--sufixo input { flex: 1; min-width: 0; }
.campo--sufixo > span { font-size: 0.78rem; color: var(--cinza); }

/* --- tela cheia: a visao na parede -----------------------------------
   O quadro ocupa a janela inteira e a barra do sistema fica por cima,
   escondida. O HTML da visao costuma trazer cabecalho e rodape proprios;
   uma barra fixa nossa por cima duplicaria o que ja esta la.          */
.corpo-cheia { margin: 0; background: var(--fundo); }

.cheia { position: fixed; inset: 0; }

.cheia .visao__quadro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

.cheia__barra {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda-forte);
    box-shadow: var(--sombra);

    /* escondida por padrao; volta com .cheia--mostrando */
    transform: translateY(-110%);
    transition: transform .18s ease;
}
.cheia--mostrando .cheia__barra { transform: translateY(0); }

.cheia__barra strong { font-size: 0.92rem; }
.cheia__direita { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.cheia__estado { font-size: 0.74rem; color: var(--cinza); }
.cheia__relogio {
    font-family: var(--fonte-mono);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
}

/* a faixa invisivel que faz a barra descer quando o ponteiro chega */
.cheia__gatilho { position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 4; }

.cheia .visao__avisos {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 6;
}

/* a grade dentro do cartao de resultado do cadastro de consultas */
.resultado__grade .grade-sql {
    height: auto;
    max-height: 58vh;
    border: 0;
    border-radius: 0 0 var(--raio-bloco) var(--raio-bloco);
}

/* a tela do console: barra em cima, quadrantes ocupando o resto.

   O min-width: 0 repetido nao e exagero. Item de grid e item de flex
   nascem com min-width: auto, ou seja, "nunca menor que o conteudo" -
   entao uma grade de sessenta colunas faria o quadrante inteiro crescer,
   a barra de rolagem apareceria na PAGINA e o menu lateral andaria junto.
   Com min-width: 0 em toda a corrente, quem rola e a grade, sozinha. */
.console { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.quadrante__corpo {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.quadrante__corpo > .bloco__vazio { margin: 0; padding: 28px 16px; }

/* barra de cada quadrante */
.quadrante__barra {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 8px;
    font-size: 0.74rem;
    color: var(--cinza);
}
.quadrante__barra .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.quadrante__barra strong { color: var(--tinta); }

.resultado__resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--cinza);
    padding: 10px 16px;
    border-bottom: 1px solid var(--borda);
}

.carregando {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid var(--borda-forte);
    border-top-color: var(--marca);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* 9. entrada --------------------------------------------------------- */
.corpo-limpo {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: var(--menu-fundo);
}

.entrada {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    overflow: hidden;
}

/* o horizonte: a unica peca decorativa do sistema inteiro */
.entrada__horizonte {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 60% at 50% 108%, var(--marca) 0%, transparent 62%),
        radial-gradient(60% 40% at 50% -10%, color-mix(in srgb, var(--marca) 45%, transparent) 0%, transparent 70%);
    opacity: .55;
}

.cartao-entrada {
    position: relative;
    width: min(400px, 100%);
    background: color-mix(in srgb, var(--superficie) 12%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--menu-texto) 18%, transparent);
    border-radius: 16px;
    padding: 34px 30px 24px;
    text-align: center;
    color: var(--menu-texto);
    box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}

/*
 * O brasao na entrada. Sem caixa em volta: o escudo ja tem forma
 * propria, e uma moldura quadrada em cima dele so empobrece o desenho.
 */
.cartao-entrada__marca {
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
}

.cartao-entrada__chamada {
    margin: 0;
    font-size: 0.76rem;
    color: var(--menu-suave);
}

.cartao-entrada__nome {
    margin: 0 0 22px;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--menu-texto);
}

.formulario-entrada { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.formulario-entrada .campo > span { color: var(--menu-suave); }
.formulario-entrada input {
    background: color-mix(in srgb, var(--menu-texto) 8%, transparent);
    border-color: color-mix(in srgb, var(--menu-texto) 18%, transparent);
    color: var(--menu-texto);
    padding: 10px 12px;
}
.formulario-entrada input::placeholder { color: color-mix(in srgb, var(--menu-texto) 40%, transparent); }
.formulario-entrada input:focus {
    border-color: var(--menu-texto);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--menu-texto) 12%, transparent);
}
.formulario-entrada .botao--principal {
    margin-top: 6px;
    padding: 11px;
    background: var(--menu-texto);
    color: var(--menu-fundo);
    font-weight: 600;
}
.formulario-entrada .botao--principal:hover { filter: brightness(.92); background: var(--menu-texto); }

.cartao-entrada__rodape {
    margin: 20px 0 0;
    font-size: 0.72rem;
    color: var(--menu-suave);
}

.pagina-aviso {
    max-width: 520px;
    margin: 12vh auto;
    padding: 32px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    text-align: center;
}
.pagina-aviso pre {
    text-align: left;
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    color: var(--cinza);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    padding: 10px;
    overflow: auto;
    max-height: 240px;
}

/* 10. modal ---------------------------------------------------------- */
.caixa-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.caixa-modal[hidden] { display: none; }
.caixa-modal__fundo { position: absolute; inset: 0; background: rgba(5, 18, 23, .5); }
.caixa-modal__corpo {
    position: relative;
    width: min(760px, 94vw);
    max-height: 84vh;
    overflow: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-bloco);
    box-shadow: var(--sombra);
}
.caixa-modal__corpo header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
}
.caixa-modal__corpo header h2 { margin: 0; flex: 1; }

/* 11. telas estreitas ------------------------------------------------ */
@media (max-width: 1200px) {
    .bloco { grid-column: span min(12, calc(var(--largura, 3) * 1.5)); }
    .campo--filtro { grid-column: span 3; }
}

@media (max-width: 900px) {
    .painel-principal, html[data-menu="solto"] .painel-principal { margin-left: 0; }

    .lateral, html[data-menu="solto"] .lateral {
        width: var(--lateral-larga);
        transform: translateX(-100%);
        transition: transform .2s ease;
    }
    html[data-menu="aberto"] .lateral { transform: translateX(0); box-shadow: var(--sombra); }

    .topo__menu { display: grid; }
    .topo__usuario-dados { display: none; }

    .bloco { grid-column: span 12; }
    .campo--filtro, .regua__acoes { grid-column: span 6; }
    .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { grid-column: span 12; }

    .conteudo { padding: 14px; }
    .painel__cabecalho { flex-direction: column; }
    .painel__comandos { margin-left: 0; }
}

@media (max-width: 560px) {
    .campo--filtro, .regua__acoes { grid-column: span 12; }
    .regua__acoes { justify-content: stretch; }
    .regua__acoes .botao { flex: 1; }
    .indicador__valor { font-size: 1.8rem; }
}

@media print {
    .lateral, .topo, .barra-abas, .regua, .painel__comandos, .tiras { display: none !important; }
    .painel-principal { margin-left: 0; }
    .bloco { break-inside: avoid; border-color: #bbb; }
}


/* =====================================================================
   SC-Beta - telas de gestao
   ---------------------------------------------------------------------
   Nenhuma cor escrita aqui: tudo sai das variaveis do tema, montadas
   pelo PHP a partir dos parametros. Trocar a cor da marca em SUP005
   muda o sistema inteiro, inclusive estas telas.
   ===================================================================== */

/* contexto no cabecalho ---------------------------------------------- */
.topo__contexto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-right: 12px;
    margin-right: 4px;
    border-right: 1px solid var(--borda);
}
.topo__empresa { font-size: 0.78rem; font-weight: 600; color: var(--tinta); }
.topo__filial, .topo__filial-fixa {
    font-size: 0.74rem;
    color: var(--cinza);
    background: none;
    border: 0;
    padding: 0;
    max-width: 220px;
}
.topo__filial { cursor: pointer; }

/* marca --------------------------------------------------------------- */
/*
   A marca e uma imagem, nao um desenho pintado pelo CSS: ela e a mesma
   nos dois temas, e nao ha variavel de cor para ela. O PNG tem fundo
   transparente, entao o que estiver atras aparece em volta do peixe.

   A largura manda e a altura vem sozinha: a arte e quase duas vezes
   mais larga que alta, e travar a altura a deformaria.
*/
.marca-img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* A previa de SUP005: a marca nos dois fundos, lado a lado. Nao ha o
   que escolher - isto esta aqui para mostrar que ela se comporta nos
   dois, que e a duvida que a imagem com fundo transparente levanta. */
.amostras-marca {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.amostra-marca {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
}

.amostra-marca__desenhos {
    display: flex;
    align-items: center;
    gap: 14px;
}

.amostra-marca__dizeres {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 150px;
    font-size: 0.82rem;
    line-height: 1.4;
}
.amostra-marca__dizeres strong { font-size: 0.92rem; }
.amostra-marca__dizeres span { opacity: .72; }

/* tela de entrada ------------------------------------------------------ */
.inicio__cabecalho { margin-bottom: 14px; }
.inicio__colunas {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}
/* Com um quadrante só, ele ocupa a largura toda: coluna estreita com
   nada ao lado é espaço desperdiçado, que foi o que tirou os atalhos
   da tela inicial. */
.inicio__colunas--uma { grid-template-columns: 1fr; }
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.indicador {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-cartao);
    text-decoration: none;
    color: inherit;
}
.indicador:hover { border-color: var(--borda-marca); border-left-color: var(--marca-forte); }
/* Duas linhas reservadas para o rotulo: "Orcamentos em aberto" quebra
   e "A pagar" nao, e sem a reserva os valores dos seis quadrantes
   ficavam em alturas diferentes na mesma linha. */
.indicador__rotulo {
    font-size: 0.76rem;
    color: var(--cinza);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 2.2em;
    line-height: 1.1;
}
.indicador__valor { font-size: 1.44rem; letter-spacing: -0.02em; color: var(--tinta); }
.indicador__apoio { font-size: 0.76rem; color: var(--cinza); }
.indicador__apoio--alerta { color: var(--estado-critico); }

/* ===================================================================
   1.6.0 - painel inicial, atalhos e relogio
   =================================================================== */

/* O BOTAO DE ATALHO.
   Era uma linha larga com o nome de um lado e nada do outro - jeito de
   listar, nao de clicar. Agora e tecla: desenho em cima, nome embaixo,
   alvo grande o bastante para o dedo e estreito o bastante para caberem
   quinze lado a lado. */
.atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 92px;
    min-height: 76px;
    padding: 10px 8px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.atalho:hover {
    background: var(--realce-marca);
    border-color: var(--borda-marca);
    transform: translateY(-1px);
    text-decoration: none;
}
.atalho__icone { display: grid; place-items: center; color: var(--marca); }
.atalho__texto {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--tinta);
    /* Duas linhas no maximo: nome comprido vira reticencias em vez de
       esticar a tecla e desalinhar a faixa inteira. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.atalho--mais { border-style: dashed; }
.atalho--mais .atalho__icone { color: var(--cinza); }
.atalho--amostra { cursor: default; }
.atalho--amostra:hover { transform: none; background: var(--superficie); border-color: var(--borda); }

.atalhos-previa { display: flex; flex-wrap: wrap; gap: 10px; }

/* A FAIXA DE ATALHOS, colada no rodape da area de trabalho.
   Fora do fluxo da tela de proposito: ela e a mesma em toda visita, e
   conteudo que nao muda nao deve empurrar para baixo o que muda.

   Aberta ou fechada ela tem A MESMA ALTURA: recolher encolhe para o
   LADO. Recolher para cima devolvia espaco que ninguem usava e fazia a
   tela saltar; e o puxador, numa linha so para ele, comia mais espaco
   aberto do que as teclas que escondia. */
.faixa-atalhos {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: stretch;
    gap: 10px;
    /* auto empurra ao pe quando a tela sobra; sticky segura a faixa no
       rodape quando a tela falta. Os dois, porque os dois acontecem. */
    margin: auto -18px -18px;
    padding: 12px 18px;
    /* Fundo cheio e borda em cima: sem eles a faixa flutuava por cima
       do cartao de baixo e as teclas apareciam cortando o texto dele. */
    background: var(--fundo);
    border-top: 1px solid var(--borda);
}

.faixa-atalhos__puxador {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 34px;
    padding: 6px 4px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
    color: var(--cinza);
    font: inherit;
    cursor: pointer;
}
.faixa-atalhos__puxador:hover { border-color: var(--borda-marca); color: var(--tinta); }

/* A seta diz PARA ONDE O CLIQUE LEVA: aberta, aponta para a esquerda,
   que e para onde as teclas vao; fechada, para a direita, de onde elas
   voltam. */
.faixa-atalhos__seta {
    display: grid;
    place-items: center;
    transform: rotate(90deg);
    transition: transform .16s ease;
}
.faixa-atalhos--fechada .faixa-atalhos__seta { transform: rotate(-90deg); }

.faixa-atalhos__conta {
    min-width: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--realce-marca);
    color: var(--marca);
    font-size: 0.68rem;
    text-align: center;
}

/* FECHADA, O CORPO SAI DA TELA - nao encolhe.
   Encolher a largura ate zero parecia mais elegante e fazia o oposto do
   pedido: as teclas continuavam no fluxo e, sem largura, quebravam uma
   por linha. A faixa fechada ficava TRES VEZES MAIS ALTA do que aberta.
   Tirando o corpo do fluxo, fechada sobra o puxador, que e o que a
   pessoa queria ver. */
.faixa-atalhos__corpo { min-width: 0; }
.faixa-atalhos--fechada .faixa-atalhos__corpo { display: none; }

.faixa-atalhos__teclas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .atalho, .faixa-atalhos__seta, .faixa-atalhos__corpo { transition: none; }
    .atalho:hover { transform: none; }
}

/* O RELOGIO DO TOPO. Data em cima, hora embaixo, as duas alinhadas a
   direita para o segundo que troca nao mexer na largura do bloco. */
.topo__relogio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding-right: 12px;
    border-right: 1px solid var(--borda);
    line-height: 1.15;
    white-space: nowrap;
}
.topo__relogio-data { font-size: 0.82rem; color: var(--tinta); }
.topo__relogio-hora {
    font-size: 0.76rem;
    color: var(--cinza);
    font-family: var(--fonte-mono);
    font-variant-numeric: tabular-nums;
}

/* A GRADE DE LEADS: cinco linhas e rolagem.
   A altura vem do numero de linhas, nao de um valor fixo em pixels -
   mudar a fonte do sistema recortaria no meio de uma linha. */
.grade-leads {
    max-height: calc(var(--linhas, 5) * 2.6rem + 2.9rem);
    overflow-y: auto;
}
.grade-leads thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--superficie);
}

/* O PAINEL DE COMPRAS: um numero grande e tres roscas. */
.painel-compras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}
.painel-compras__numero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--raio-campo);
    background: var(--realce);
    text-decoration: none;
    color: inherit;
}
.painel-compras__numero:hover { background: var(--realce-marca); text-decoration: none; }
.painel-compras__grafico h3 {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--cinza);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* A ROSCA. Cada fatia e um link: o cursor precisa dizer isso. */
.grafico-rosca { display: flex; flex-direction: column; gap: 10px; }
.rosca { width: 100%; max-width: 148px; margin: 0 auto; }
.rosca__trilho { stroke: var(--grade); }
.rosca__fatia { transition: opacity .12s ease; }
.rosca a:hover .rosca__fatia { opacity: .72; }
.rosca__total {
    font-size: 7px;
    font-weight: 700;
    fill: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.rosca-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rosca-legenda li { font-size: 0.78rem; }
.rosca-legenda li > a,
.rosca-legenda li > span {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: 7px;
    padding: 2px 4px;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
}
.rosca-legenda li > a:hover { background: var(--realce-marca); text-decoration: none; }
.rosca-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.rosca-legenda__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-legenda b { font-variant-numeric: tabular-nums; }
.rosca-legenda em { color: var(--cinza); font-style: normal; font-size: 0.72rem; }

/* faixa de resumo ------------------------------------------------------ */
.faixa-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--borda);
}
.resumo-caixa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 10px 14px;
    background: var(--realce);
    border-radius: var(--raio-campo);
}
.resumo-caixa span { font-size: 0.74rem; color: var(--cinza); text-transform: uppercase; letter-spacing: 0.04em; }
.resumo-caixa strong { font-size: 1.08rem; color: var(--tinta); }
.resumo-caixa--alerta strong { color: var(--estado-critico); }
.resumo-caixa--forte { background: var(--realce-marca); }
.resumo-caixa--forte strong { color: var(--marca); }

/* =====================================================================
   venda
   ---------------------------------------------------------------------
   Duas colunas: o trabalho à esquerda, o dinheiro e as ações à direita,
   numa coluna que acompanha a rolagem. Com trinta itens lançados, o
   botão de fechar em nota ficava a três telas de distância.
   ===================================================================== */
.venda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: var(--respiro);
    align-items: start;
}
.venda__corpo { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.venda__lado {
    position: sticky;
    top: calc(58px + 12px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 1100px) {
    .venda { grid-template-columns: 1fr; }
    .venda__lado { position: static; }
}

/* --- quadrante: cabeçalho, inclusão, lançados ----------------------- */
.quadrante {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    overflow: hidden;
}

.quadrante__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--borda);
    background: var(--realce);
}
.quadrante__icone { display: grid; place-items: center; color: var(--marca); flex: 0 0 auto; }

.quadrante__nome {
    margin: 0;
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    gap: 7px;
}
.quadrante__nome small {
    font-size: 0.7rem;
    font-family: var(--fonte-mono);
    color: var(--cinza);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 9px;
    padding: 1px 6px;
}

/* O total fica no topo: é o número que a pessoa olha mais vezes. */
.quadrante__total {
    margin-left: auto;
    font-size: 1.04rem;
    font-weight: 600;
    color: var(--marca);
    font-variant-numeric: tabular-nums;
}

.quadrante__mais {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 1px solid var(--marca);
    border-radius: 50%;
    background: var(--marca);
    color: var(--marca-tinta);
    cursor: pointer;
    transition: transform .16s ease;
}
.quadrante__mais:hover { filter: brightness(1.08); }
.quadrante__mais[aria-expanded="true"] { transform: rotate(45deg); }

.quadrante__vazio { margin: 0; padding: 14px; color: var(--cinza); font-size: 0.86rem; }

/* --- os campos de inclusão, logo abaixo do cabeçalho ---------------- */
.quadrante__lancar {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
    border-bottom: 1px solid var(--borda);
    background: var(--realce-marca);
}
/* UM filho só: com os dois soltos lá dentro, cada um vira uma faixa
   implícita de altura automática e o 0fr não fecha nada. */
.quadrante__lancar--aberto { grid-template-rows: 1fr; }
.quadrante__lancar-corpo { overflow: hidden; min-height: 0; }

.lancar__grade {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    padding: 12px 14px 4px;
}
.lancar__campo { display: grid; gap: 3px; flex: 1 1 130px; min-width: 0; }
.lancar__campo--largo { flex: 3 1 240px; }
.lancar__campo--estreito { flex: 0 1 86px; }
.lancar__campo span { font-size: 0.72rem; color: var(--tinta-suave); }
.lancar__campo input, .lancar__campo select { padding: 6px 9px; font-size: 0.86rem; }

.lancar__botao { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.lancar__dica { margin: 0; padding: 4px 14px 12px; font-size: 0.74rem; color: var(--tinta-suave); }

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

.tabela--lancamentos tfoot td { border-top: 2px solid var(--borda-forte); font-weight: 600; }

/* --- totais: a coluna da direita ------------------------------------ */
.totais { padding: 12px 14px; }
.totais__grade { display: flex; flex-direction: column; gap: 5px; }
.totais__linha {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.totais__linha small { color: var(--cinza); font-size: 0.74rem; }
.totais__linha--risco { border-top: 1px solid var(--borda); padding-top: 6px; }
.totais__linha--desconto { color: var(--cinza); }
.totais__linha--final {
    border-top: 2px solid var(--borda-forte);
    margin-top: 2px;
    padding-top: 8px;
    font-size: 1.1rem;
}
.totais__linha--final strong { color: var(--marca); }
.totais__valor { font-size: 1.2rem; color: var(--marca); }

.totais__desconto { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 10px; }
.totais__desconto-campos { display: flex; gap: 6px; align-items: end; }
.totais__desconto-campos label { display: grid; gap: 3px; flex: 1 1 0; min-width: 0; }
.totais__desconto-campos span { font-size: 0.72rem; color: var(--tinta-suave); }
/* min-width:0 no próprio campo: o navegador dá a todo input uma largura
   mínima própria, e era ela que empurrava o botão para fora do cartão. */
.totais__desconto-campos input { padding: 6px 8px; font-size: 0.86rem; min-width: 0; width: 100%; }
.totais__desconto-campos .botao-icone { flex: 0 0 30px; height: 30px; }

/* --- as ações, sempre à mão ----------------------------------------- */
.acoes-venda { display: flex; flex-direction: column; gap: 7px; }

.acoes-venda__um {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}
.acoes-venda__um svg { flex: 0 0 auto; opacity: .85; }
.acoes-venda__um--destaque { box-shadow: 0 6px 16px -8px var(--marca); }

.acoes-venda__cancelar summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    font-size: 0.84rem;
    color: var(--estado-critico);
    cursor: pointer;
    border-radius: var(--raio-campo);
    list-style: none;
}
.acoes-venda__cancelar summary::-webkit-details-marker { display: none; }
.acoes-venda__cancelar summary:hover { background: var(--realce); }
.acoes-venda__cancelar form { display: grid; gap: 7px; padding: 8px 2px 0; }

.cartao--sugestao { border-left: 3px solid var(--apoio); }
.sugestoes { display: flex; flex-direction: column; }
.sugestao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--borda);
}
.sugestao:last-child { border-bottom: 0; }
.sugestao__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px; height: 28px;
    padding: 0;
    line-height: 1;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
    color: var(--tinta-suave);
    cursor: pointer;
}
.botao-icone:hover { background: var(--realce); color: var(--tinta); }
.botao-icone:hover { border-color: var(--marca); color: var(--marca); }
.botao-icone--perigo:hover { border-color: var(--estado-critico); color: var(--estado-critico); }
.botao-icone--forte { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }
.botao-icone--forte:hover { filter: brightness(1.08); color: var(--marca-tinta); }

.cartao__cabecalho--justo { padding-top: 10px; padding-bottom: 10px; }
.grade-form--justa { row-gap: 8px; }
.grade-form--justa .campo { padding-bottom: 2px; }

.previa-linha { margin-left: 8px; color: var(--marca); font-weight: 600; }

.lista-passos { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.lista-passos ul { margin: 6px 0 0 16px; }

/**
 * Liquidacao: uma TABELA, nao uma pilha de fichas.
 *
 * A lista era um bloco por titulo - nome, numero e vencimento
 * empilhados, valor na direita, botao no fim. Tres alturas de texto por
 * titulo e o meio da linha vazio: oito titulos ja pediam rolagem. Agora
 * cada dado tem a sua coluna e a linha tem a altura de uma linha.
 *
 * O formulario da baixa continua ali, numa segunda linha que abre ao
 * clicar em Baixar - e por isso cada titulo e um <tbody> proprio.
 */
.tabela--baixas tbody { border-bottom: 1px solid var(--borda); }
.tabela--baixas tbody:last-child { border-bottom: 0; }
.tabela--baixas input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.tabela--baixas .acoes { text-align: center; }

/* A linha do titulo vencido, marcada na borda: o vermelho no texto
   competiria com o selo "vencido" ao lado. */
.linha--vencida > td:first-child { box-shadow: inset 3px 0 0 var(--estado-critico); }

/* O formulario da baixa: linha propria, fundo de realce, campos a
   vontade. O td zera o proprio respiro para o formulario mandar. */
.baixa__corpo > td { padding: 0 !important; background: var(--realce); }
.baixa__form { padding: 10px 14px 12px; }

/* A ficha antiga, ainda usada por telas que listam baixas em bloco. */
.lista-baixas { display: flex; flex-direction: column; }
.baixa { border-bottom: 1px solid var(--borda); }
.baixa__cabecalho {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
}
.baixa__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.baixa__valor { text-align: right; display: flex; flex-direction: column; }
.baixa__valor strong { font-size: 1.06rem; }
.baixa--vencida { border-left: 3px solid var(--estado-critico); }

.form-estorno { display: flex; gap: 6px; align-items: center; }
.form-estorno input { width: 150px; }

/* tabelas: estados de linha -------------------------------------------- */
.linha--alerta { background: color-mix(in srgb, var(--estado-critico) 7%, transparent); }
.linha--apagada { opacity: 0.55; text-decoration: line-through; }
.linha--apagada .selo { text-decoration: none; }
.linha--destaque { background: var(--realce); font-weight: 600; }
.texto--alerta { color: var(--estado-critico); }

/* paginacao ------------------------------------------------------------- */
.paginacao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--borda);
    font-size: 0.82rem;
    color: var(--cinza);
}
.paginacao__botoes { display: flex; gap: 6px; }

.grade-form__titulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cinza);
    margin: 4px 0 -4px;
}

.tabela-rolagem { overflow-x: auto; max-width: 100%; }

@media (max-width: 1100px) {
    .inicio__colunas { grid-template-columns: 1fr; }
}

@media print {
    .regua, .topo, .lateral, .barra-abas, .paginacao { display: none !important; }
    .cartao { border: 0; box-shadow: none; }
}

/* saídas de relatório (PDF e Excel) ----------------------------------- */
.saidas { display: flex; gap: 8px; align-items: center; }
.saidas .botao { display: inline-flex; align-items: center; gap: 6px; }
.saidas .botao svg { opacity: .78; }

@media print { .saidas { display: none; } }

/* foto do usuário ----------------------------------------------------- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar--grande { width: 92px; height: 92px; font-size: 1.9rem; }

.foto-campo { display: flex; gap: 14px; align-items: flex-start; }
.foto-campo__acoes { flex: 1; min-width: 0; }
.foto-campo input[type="file"] { max-width: 100%; }

/* seletor de usuários na entrada -------------------------------------- */
.entrada-usuario { display: flex; gap: 8px; align-items: stretch; }
.entrada-usuario input { flex: 1; min-width: 0; }
.entrada-usuario .botao { flex: 0 0 auto; display: grid; place-items: center; }

.cadastrados {
    display: grid;
    gap: 4px;
    max-height: 212px;
    overflow-y: auto;
    margin: -4px 0 4px;
    padding: 6px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--realce);
}

.cadastrados__um {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--raio-campo);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cadastrados__um:hover { background: var(--realce-marca); }

.cadastrados__dados { display: grid; min-width: 0; }
.cadastrados__dados strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadastrados__dados small { font-size: 0.72rem; color: var(--cinza); font-family: var(--fonte-mono); }

/* documento parcelado -------------------------------------------------- */
.parcelamento {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
    gap: var(--respiro);
    align-items: start;
}
.parcelamento > .cartao { margin: 0; }

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

.campo__estatico {
    display: block;
    padding: 9px 0 0;
    font-size: 0.92rem;
}


/* SUP007 — numerações -------------------------------------------------- */
.campo-numeracao {
    width: 100%;
    max-width: 130px;
    text-align: right;
    font-family: var(--fonte-mono);
}

.modos { display: grid; gap: 8px; }

.modo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
}
.modo div { display: grid; gap: 2px; }
.modo strong { font-size: 0.9rem; }
.modo em { font-size: 0.78rem; line-height: 1.35; }
.modo__marca { display: grid; place-items: center; color: var(--cinza); padding-top: 1px; }

.modo--ativo {
    border-color: var(--marca);
    background: var(--realce-marca);
}
.modo--ativo .modo__marca { color: var(--marca); }
.modo:not(.modo--ativo) { opacity: .62; }

/* --- tecla de atalho dentro de botao ---------------------------------
   O F2 escrito no proprio botao e a unica forma de alguem descobrir
   que ele existe: ninguem le manual de sistema, e atalho que ninguem
   conhece e atalho que ninguem usa.                                  */
.tecla {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.28);
    line-height: 1.5;
}
.botao--contorno .tecla,
.botao--texto .tecla {
    background: var(--realce);
    border-color: var(--borda);
    color: var(--tinta-suave);
}
@media (max-width: 560px) { .tecla { display: none; } }

/* --- topo: de quem e o sistema --------------------------------------
   Logo a esquerda, nome fantasia em destaque e razao social embaixo.
   Quem trabalha reconhece a casa pelo fantasia; a razao social e o que
   sai na nota, e ver as duas juntas evita a duvida de sempre ("e a
   mesma empresa?").                                                  */
.topo__contexto {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    margin-right: 4px;
    border-right: 1px solid var(--borda);
}
.topo__logo {
    display: block;
    height: 30px;
    max-width: 120px;
    object-fit: contain;
}
.topo__contexto-dados {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 0;
}
.topo__empresa {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.2;
}
.topo__razao {
    font-size: 0.70rem;
    color: var(--cinza);
    line-height: 1.2;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .topo__razao { display: none; }
}
@media (max-width: 900px) {
    .topo__contexto { border-right: 0; padding-right: 0; }
    .topo__contexto-dados { display: none; }
}

/* --- previa do logo da empresa ------------------------------------- */
.logo-previa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 10px;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-campo);
    background: var(--realce);
}
.logo-previa img { max-height: 56px; max-width: 100%; object-fit: contain; display: block; }
.logo-previa__vazio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--cinza);
}

/* O rotulo de um campo que nao e <label> de um <input> so. */
.campo__rotulo {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--tinta-suave);
    margin-bottom: 5px;
    display: block;
}

/* --- ordem dos modulos no menu (SUP003) -----------------------------
   Lista arrastavel com setas de reserva. As setas nao sao enfeite: sao
   o unico caminho no teclado e no celular, onde arrastar nao funciona
   direito.                                                           */
.ordem-modulos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 560px;
}
.ordem-modulos__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    background: var(--superficie);
    cursor: grab;
}
.ordem-modulos__item:hover { border-color: var(--borda-forte); background: var(--realce); }
.ordem-modulos__item--voando { opacity: .45; cursor: grabbing; }
.ordem-modulos__pega { color: var(--cinza); display: flex; }
.ordem-modulos__icone { color: var(--marca); display: flex; }
.ordem-modulos__nome { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 500; }
.ordem-modulos__conta {
    font-size: 0.72rem;
    color: var(--tinta-suave);
    background: var(--realce);
    border-radius: 999px;
    padding: 1px 8px;
}
.ordem-modulos__setas { display: flex; gap: 3px; }

/* --- baixa em lote --------------------------------------------------
   A barra só aparece com dois ou mais títulos marcados, e fica colada
   embaixo: quem está marcando rola a lista, e um botão no topo ficaria
   fora de vista justo na hora de usar.                               */
.baixa__marca {
    display: flex;
    align-items: center;
    padding-right: 4px;
}
.baixa__marca input { width: 17px; height: 17px; cursor: pointer; }

.barra-lote {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-top: 10px;
    border-top: 2px solid var(--marca);
    background: var(--superficie);
    box-shadow: 0 -6px 18px rgba(16, 36, 43, .08);
}
.barra-lote__conta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-right: 14px;
    border-right: 1px solid var(--borda);
    min-width: 130px;
}
.barra-lote__conta strong { font-size: 0.86rem; }
.barra-lote__conta span { font-size: 1.05rem; font-weight: 600; color: var(--marca); }
.barra-lote__acoes { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 760px) {
    .barra-lote__acoes { margin-left: 0; width: 100%; }
    .barra-lote__acoes .botao { flex: 1; }
}

/* Dia de caixa já fechado: a linha avisa antes de alguém tentar mexer
   nela. Vermelho de fundo bem leve - a linha continua legível, mas não
   passa despercebida numa lista de trinta lançamentos.               */
.linha--fechada > td {
    background: color-mix(in srgb, var(--estado-critico) 7%, transparent);
}
.linha--fechada > td:first-child { box-shadow: inset 3px 0 0 var(--estado-critico); }

/* Departamento: o subtítulo dentro de um módulo do menu. Pequeno e em
   caixa alta, para separar sem competir com o nome do programa.     */
/* --- departamento: a gaveta de dentro do módulo ------------------------
   Mesma mecânica do módulo um nível acima: altura zero em vez de
   display:none, para o navegador animar sem medir nada em JavaScript.
   O recuo e o tamanho da letra é que dizem que isto está DENTRO de
   outra coisa — sem eles, dois níveis de gaveta viram um labirinto. */
/* O RECUO DA GAVETA FICA NA GAVETA, nao no recheio do botao.
   Com 18px de um lado e 10px do outro dentro do proprio botao, o
   conteudo dele ficava 4px fora do centro da sua propria caixa - de
   olho nu nao se ve, mas e o tipo de desalinho que, somado, faz o menu
   parecer torto. O recuo continua: so mudou de dono. */
.departamento { padding-left: 8px; }

.departamento__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--menu-suave);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    border-radius: var(--raio-campo);
}
.departamento__titulo:hover { color: var(--menu-texto); background: rgba(255, 255, 255, .05); }
.departamento__nome { flex: 1; min-width: 0; }

.departamento__conta {
    font-size: 0.62rem;
    font-family: var(--fonte-mono);
    font-weight: 400;
    letter-spacing: 0;
    opacity: .8;
}
.departamento--aberto .departamento__conta { opacity: 0; }

.departamento__seta {
    display: grid;
    place-items: center;
    flex: 0 0 13px;
    transition: transform .18s ease;
}
.departamento--aberto .departamento__seta { transform: rotate(180deg); }

.departamento__corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .18s ease;
}
.departamento--aberto > .departamento__corpo { grid-template-rows: 1fr; }
.departamento__lista { overflow: hidden; min-height: 0; }
.departamento__corpo .item { margin-left: 16px; }

/* Menu encolhido mostra só os ícones dos módulos: gaveta nenhuma cabe
   em 56 pixels de largura, e o título dela viraria um borrão. */
.lateral--encolhido .departamento,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .departamento {
    display: contents;
}
.lateral--encolhido .departamento__titulo,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .departamento__titulo { display: none; }
.lateral--encolhido .departamento__corpo,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .departamento__corpo {
    grid-template-rows: 1fr;
}
.lateral--encolhido .departamento__corpo .item,
html[data-menu="solto"] .lateral:not(:hover):not(:focus-within) .departamento__corpo .item {
    margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .departamento__corpo, .departamento__seta { transition: none; }
}

/* --- faixa de números --------------------------------------------------
   Os poucos números que respondem a pergunta de cabeceira da tela -
   saldo, custo, valor - antes da tabela que explica como se chegou
   neles. Pequenos de propósito: são contexto, não o conteúdo.       */
.faixa-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--borda);
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}
.faixa-numeros__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 16px;
    background: var(--superficie);
}
.faixa-numeros__rotulo { font-size: 0.72rem; color: var(--cinza); }
.faixa-numeros__valor { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.faixa-numeros__valor small { font-size: 0.72rem; font-weight: 400; color: var(--cinza); }
.faixa-numeros__valor--critico { color: var(--estado-critico); }

.texto--critico { color: var(--estado-critico); }
th.centro, td.centro { text-align: center; }

/* Contagem de inventário: campo pequeno dentro da célula, alinhado à
   direita como o número que ele é.                                   */
.campo-contagem {
    width: 100px;
    text-align: right;
    padding: 4px 7px;
    font-size: 0.84rem;
}
.linha--ativa > td { background: var(--realce-marca); }

/* --- compras -------------------------------------------------------- */
.acoes-pedido { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acoes-pedido form { display: inline; }

/* Fichas: um cartãozinho por pedido ligado à entrada. */
.fichas { display: flex; gap: 10px; flex-wrap: wrap; }
.ficha {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-campo);
    background: var(--realce);
}
.ficha form { margin-top: 2px; }

/* Amarração de item importado do XML: select e botão na mesma linha. */
.form-amarrar { display: flex; gap: 5px; align-items: center; }
.form-amarrar select { max-width: 260px; font-size: 0.8rem; padding: 4px 7px; }

/* --- abas da consulta (CAD009) --------------------------------------
   São links, não JavaScript: o endereço de cada aba pode ser copiado e
   guardado, e a consulta funciona com o JavaScript desligado.       */
.abas-consulta {
    display: flex;
    gap: 2px;
    padding: 0 16px;
    border-bottom: 1px solid var(--borda);
    background: var(--realce);
}
.aba-consulta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--tinta-suave);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.aba-consulta:hover { color: var(--tinta); text-decoration: none; }
.aba-consulta--ativa {
    color: var(--marca);
    border-bottom-color: var(--marca);
    font-weight: 600;
    background: var(--superficie);
}
.aba-consulta__conta {
    font-size: 0.7rem;
    background: var(--borda);
    color: var(--tinta-suave);
    border-radius: 999px;
    padding: 1px 7px;
}
.aba-consulta--ativa .aba-consulta__conta { background: var(--marca-tenue); color: var(--marca); }

/* A consulta aberta por cima do cadastro, em janela própria. */
.consulta-janela { padding: 16px; max-width: 1200px; margin: 0 auto; }

/* Crédito colado no total do orçamento: é olhando para o número final
   que o vendedor decide se insiste a prazo ou propõe à vista.       */
.totais__credito { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.totais__credito .aviso { margin: 0; font-size: 0.78rem; padding: 8px 10px; }
.acoes-venda__nota { padding: 0 2px; margin: -4px 0 4px; font-size: 0.74rem; }

/* --- prévia do ajuste de estoque ------------------------------------
   Não é enfeite: é a conferência. Ver "vai lançar ENTRADA de 3,00"
   antes de gravar é o que impede o ajuste invertido.              */
.ajuste-previa {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--raio-campo);
    background: var(--realce);
    border-left: 3px solid var(--borda-forte);
    font-size: 0.84rem;
    color: var(--tinta-suave);
}
.ajuste-previa--entrada { border-left-color: var(--estado-bom); color: var(--tinta); }
.ajuste-previa--saida   { border-left-color: var(--estado-atencao); color: var(--tinta); }
.ajuste-previa--igual   { border-left-color: var(--marca); }

/**
 * O mergulho de consulta.
 *
 * Uma linha que se abre DENTRO da tabela, logo abaixo da linha de
 * origem - nao um modal: modal esconde justamente a tela que a pessoa
 * esta conferindo. A borda a esquerda e o recuo dizem "isto pertence a
 * linha de cima"; sem elas o mergulho pareceria mais um registro da
 * lista.
 */
.mergulho-linha > td { padding: 0 !important; background: var(--realce); }
.mergulho {
    padding: 10px 14px 14px;
    border-left: 3px solid var(--marca);
}
.mergulho__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}
.mergulho__quem { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.mergulho__acoes { margin-left: auto; display: flex; gap: 6px; }
.mergulho .tabela { background: var(--superficie); border-radius: var(--raio-campo); }
.mergulho .tabela tfoot td { border-top: 2px solid var(--borda-forte); font-weight: 600; border-bottom: 0; }
.mergulho .aviso { margin: 8px 0 0; }

/* A lupa: o botao que abre o mergulho. Aberta, fica marcada - para nao
   se clicar duas vezes procurando o que ja esta na tela. */
.botao-icone[aria-expanded="true"] {
    border-color: var(--borda-marca);
    background: var(--realce-marca);
    color: var(--marca);
}

/**
 * A linha de lancamento rapido.
 *
 * Usada no "+" das listas de contrato: escolher, quantidade, observacao
 * e o botao, tudo numa faixa. Fica ACIMA das linhas ja lancadas, porque
 * acrescentar e o que se faz aqui quase todo o tempo, e um formulario
 * no fim da lista obriga a rolar ate o fim a cada item.
 */
.lancar-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    background: var(--realce);
}
.lancar-linha .campo { min-width: 0; }

/* A faixa de ações da lista de contrato. */
.acoes-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.acoes-lista__nota { margin: 0; flex: 1 1 240px; min-width: 0; }
.acoes-lista__cancelar { margin-left: auto; }

/* Ações da linha de uma lista: abrir, cancelar, e o que mais vier. */
.acoes-linha {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

/* O botão apagado com o porquê em letra pequena do lado. */
.acao-travada {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 230px;
}
.acao-travada .campo__dica {
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
}

/*
 * Ação que pede um motivo: o botão abre uma dobra na própria linha.
 *
 * Sem janela modal de propósito. O motivo é um campo de uma linha, e
 * uma janela inteira para um campo de uma linha tira o operador do
 * lugar onde ele estava olhando.
 */
.acao-dobra { position: relative; }
.acao-dobra > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.acao-dobra > summary::-webkit-details-marker { display: none; }
.acao-dobra__corpo {
    position: absolute;
    right: 0;
    z-index: 30;
    width: 280px;
    margin-top: 4px;
    padding: 12px;
    display: grid;
    gap: 8px;
    text-align: left;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
}
.acao-dobra__corpo .campo { margin: 0; }

/* Caixinha de seleção desabilitada, com o porquê do lado. */
.selecao-travada {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.selecao-travada .campo__dica {
    font-size: 0.66rem;
    line-height: 1.1;
    max-width: 120px;
    white-space: normal;
    text-align: left;
}

/* A barra do estorno em lote: contagem, botão e o motivo que aparece. */
.barra-estorno {
    border-top: 1px solid var(--borda);
    display: grid;
    gap: 12px;
}
.barra-estorno__acao {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.barra-estorno__motivo {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--estado-critico);
    border-radius: var(--raio);
    background: color-mix(in srgb, var(--estado-critico) 6%, transparent);
}
.barra-estorno__motivo .campo { margin: 0; flex: 1 1 320px; min-width: 0; }

/*
 * Formas de pagamento no fechamento da venda.
 *
 * O "falta distribuir" fica vermelho enquanto não fecha e verde quando
 * chega a zero: a pessoa vê a conta fechar em vez de conferir depois.
 */
.modalidades {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--realce);
}
.modalidades > legend {
    padding: 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.modalidades__grade {
    margin-top: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.modalidades__grade .campo { margin: 0; }
.valor--erro  { color: var(--estado-critico); }
.valor--certo { color: var(--estado-bom); }

/* O aviso de caixa sem fechar, com o botão de regularizar ao lado. */
.pendencia-caixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--borda);
    background: color-mix(in srgb, var(--estado-atencao) 8%, transparent);
}
.pendencia-caixa strong { display: block; }
.pendencia-caixa .campo__dica { white-space: normal; }

/*
 * Cabeçalho que ordena.
 *
 * A seta só aparece na coluna ativa: uma seta em cada coluna viraria
 * ruído, e o cabeçalho de uma tabela de doze colunas já é denso. O
 * cursor e o realce ao passar o mouse é que contam que dá para clicar.
 */
.th--ordenavel {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.th--ordenavel:hover { color: var(--marca); }
.th--ordenavel:focus-visible {
    outline: 2px solid var(--marca-suave);
    outline-offset: -2px;
}
.th--asc::after,
.th--desc::after {
    margin-left: 4px;
    font-size: 0.7em;
    color: var(--marca);
}
.th--asc::after  { content: '▲'; }
.th--desc::after { content: '▼'; }
.th-ordem {
    color: inherit;
    text-decoration: none;
}
.th-ordem:hover { color: var(--marca); }

/* As duas leituras de apoio do relatório de caixa, lado a lado. */
.relatorio-caixa {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.relatorio-caixa h3 {
    margin: 0 0 8px;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-suave);
}

/* A linha que está sendo alterada, no formulário de lançamento. */
.lancar__editando {
    margin: 0 0 8px;
    padding: 6px 10px;
    font-size: 0.82rem;
    background: var(--realce-marca);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-campo);
}
.lancar__editando a { margin-left: 8px; }

/* O resumo de uma nota de crédito: valor, usado, saldo. */
.resumo-credito {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.resumo-credito .indicador { flex: 0 1 180px; }


/* =====================================================================
   O quadro de agendamento da oficina (OFI005)

   Sete colunas numa faixa que rola de lado, e CADA COLUNA rolando por
   dentro. Rolagem única faria o quadro ter a altura da coluna mais
   cheia — numa segunda-feira, trinta cartões em "agendado" e zero em
   "finalizado" — e as outras seis ficariam num vazio de três telas.
   ===================================================================== */
.agenda {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(232px, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding-bottom: 8px;
    overflow-x: auto;
}
.agenda__coluna {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--fundo-fraco, var(--superficie));
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
}
.agenda__topo {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borda);
}
.agenda__conta {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
}
/* A rolagem de cada coluna. A altura é da tela, não do conteúdo: o
   quadro inteiro tem de caber numa tela para servir de quadro. */
.agenda__pilha {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: calc(100vh - 420px);
    padding: 8px;
    overflow-y: auto;
}
.agenda__vazio {
    margin: 0;
    padding: 14px 0;
    text-align: center;
    color: var(--tinta-suave);
}

.agenda__cartao {
    position: relative;
    padding: 8px 10px;
    font-size: 0.8rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-campo);
    cursor: grab;
    /* O CARTAO NAO E TEXTO PARA SELECIONAR, e alvo para arrastar.
       Sem isto, apertar sobre a letra e mover seleciona o texto do
       cartao em vez de arrastar - e foi o que o cliente viu quando
       tentou. O touch-action tira o mesmo gesto das mãos do navegador
       no tablet, onde ele rolaria a coluna. */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
/* O que SE SELECIONA dentro do cartao: nada, menos o que a pessoa vai
   querer copiar - a placa e o telefone do cliente. */
.agenda__placa,
.agenda__telefone { user-select: text; -webkit-user-select: text; }
.agenda__cartao:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.agenda__cartao p { margin: 4px 0 0; }
/* DATA E HORA NA PRIMEIRA LINHA, e sozinhas nela.
   Até a 1.7.0 a hora dividia o topo com o número de controle e
   esbarrava no botão de opções do canto. O número saiu — a chave do
   agendamento é o bem, o dia e a hora — e o botão saiu junto: o menu
   abre clicando no cartão. */
.agenda__cartao-topo {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}
.agenda__quando-topo {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.agenda__dia {
    display: flex;
    gap: 6px;
    align-items: baseline;
    justify-content: space-between;
    color: var(--tinta-suave);
    text-transform: lowercase;
}
.agenda__dia small { font-variant-numeric: tabular-nums; }

/* A PLACA é o que se procura no pátio: grande e sozinha na linha. */
.agenda__placa {
    margin-top: 6px !important;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.agenda__veiculo { color: var(--tinta-suave); }
.agenda__cliente { font-weight: 600; }
.agenda__telefone {
    color: var(--tinta-suave);
    font-variant-numeric: tabular-nums;
}
.agenda__queixa {
    color: var(--tinta-suave);
    font-style: italic;
}
.agenda__marcos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.agenda__marcos .selo { text-decoration: none; }
.agenda__total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* O cartão sendo arrastado, e a coluna que o espera. */
/* O CARTAO EM VOO.
   Ele acompanha o ponteiro (o transform vem do JS), fica por cima dos
   outros e deixa de receber ponteiro: é isto que faz o
   elementFromPoint achar a COLUNA debaixo do cursor em vez de achar o
   proprio cartao, que de outro modo seria sempre o alvo e o cartao
   nunca mudaria de coluna. */
.agenda__cartao--voando {
    opacity: 0.85;
    cursor: grabbing;
    pointer-events: none;
    position: relative;
    z-index: 30;
    box-shadow: 0 10px 24px rgb(0 0 0 / 28%);
    transform-origin: center;
}
/* Enquanto se arrasta, o quadro inteiro para de selecionar texto: o
   ponteiro passa por cima de muita letra no caminho. */
.agenda--arrastando { user-select: none; -webkit-user-select: none; }
.agenda__coluna--alvo { border-color: var(--marca); }
.agenda__coluna--alvo .agenda__pilha { background: var(--realce-marca); }
/* Coluna que o arrasto não alcança: 'em orçamento' e 'OS' querem dizer
   que o documento existe, e isso não se resolve arrastando. */
.agenda__coluna--fechada { opacity: 0.75; }

/* Cartão amarrado a orçamento ou OS: quem manda na coluna agora é o
   documento, e o cartão mostra isso em vez de convidar ao arrasto. */
.agenda__cartao--preso { cursor: default; border-left-color: var(--estado-atencao); }

/* NAO HA BOTAO DE OPCOES NO CARTAO.
   O menu abre com um clique esquerdo em qualquer lugar do cartão, e o
   <summary> que o <details> exige fica sem desenho nenhum: um segundo
   alvo para a mesma coisa só ocupava linha. Ele reaparece ao receber
   foco pelo Tab, porque quem navega sem mouse tem de ver onde está. */
.agenda__menu { position: relative; margin-top: 6px; }
/* Menu fechado e sem botão não ocupa linha nenhuma no cartão. */
.agenda__menu:not([open]) { margin-top: 0; }
.agenda__menu-abrir {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.72rem;
    color: var(--tinta-suave);
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
}
.agenda__menu-abrir::-webkit-details-marker { display: none; }
.agenda__menu-abrir:hover { color: var(--marca); border-color: var(--marca); background: var(--realce-marca); }
.agenda__menu-abrir--oculto {
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
}
.agenda__menu-abrir--oculto:focus-visible {
    height: auto;
    padding: 1px 6px;
    margin-top: 2px;
    border: 1px solid var(--marca);
    outline: 2px solid var(--marca);
    outline-offset: 1px;
}
.agenda__menu-abrir--oculto:focus-visible::after { content: 'Ações'; }
.agenda__menu-pergunta {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.74rem;
    color: var(--tinta-suave);
}
.agenda__menu-corpo {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    box-shadow: var(--sombra-flutuante, 0 8px 24px rgba(0, 0, 0, 0.18));
}
.agenda__menu-corpo hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--borda);
}
.agenda__menu-corpo .botao { justify-content: flex-start; width: 100%; }
.agenda__menu-corpo select { width: 100%; }

.agenda__navegacao { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.agenda__marcar { border-top: 1px solid var(--borda); }

.agenda__dialogo {
    width: min(720px, 94vw);
    padding: 18px;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
}
.agenda__dialogo::backdrop { background: rgba(0, 0, 0, 0.45); }
.agenda__dialogo h2 { margin: 0 0 6px; }

/* No telefone o quadro vira uma coluna por tela, roladas de lado. */
@media (max-width: 760px) {
    .agenda { grid-auto-columns: 86vw; }
    .agenda__pilha { max-height: none; }
}

/* =====================================================================
   A coluna de ações da oficina (OFI006/OFI007)

   Ela empilha coisas de pesos muito diferentes — o caminho do
   documento, as impressões, a aprovação —, e sem respiro entre elas os
   botões encostavam uns nos outros: o "Cancelar" vermelho colado no
   "Gerar OS" parecia uma dupla, quando são opostos.
   ===================================================================== */
.venda__acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.venda__acoes > form { margin: 0; }
.venda__acoes > form > .botao,
.venda__acoes > .botao { width: 100%; justify-content: center; }
.venda__acoes > .campo__dica { margin: -4px 0 0; }

/* O título de cada bloco da coluna: pequeno, em caixa alta, e com ar
   embaixo — sem ele, o rótulo do campo seguinte virava continuação do
   título e os dois se liam como uma frase só. */
.venda__acoes > h3 {
    margin: 0 0 2px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
}

/* O dobrável de cancelar não é um botão a mais na pilha: recolhido,
   ele é só um link discreto no fim. */
.venda__acoes > .acao-dobra > summary { width: 100%; text-align: center; }

/* =====================================================================
   O SISTEMA NO DEDO — tablet e celular

   Um bloco só, no fim do arquivo, em vez de espalhado: quem for mexer
   no comportamento de tela pequena mexe aqui, e vê tudo o que isso
   implica de uma vez.

   Duas faixas, e elas querem dizer coisas diferentes:

     até 1024px  tablet. A tela ainda é uma tela: tabela continua
                 tabela, formulário continua em colunas. O que muda é
                 o tamanho do que se toca.

     até 760px   celular. Aqui a forma muda: a tabela deixa de ser
                 tabela, o formulário vira uma coluna só.

   A MEDIDA DO DEDO É 44px. Não é número escolhido por gosto: é o que
   a Apple e o Google publicam como alvo mínimo, e corresponde a uns
   9mm — a polpa de um dedo adulto. Abaixo disso, errar o botão deixa
   de ser desatenção e passa a ser o esperado.
   ===================================================================== */

@media (max-width: 1024px) {
    /* O QUE SE TOCA TEM DE CABER NUM DEDO.
       Vale para o sistema inteiro, de uma vez, em vez de botão a
       botão: a conta é a mesma em toda tela. */
    .botao,
    .botao-icone,
    .campo input,
    .campo select,
    .campo textarea,
    .regua input,
    .regua select,
    summary.agenda__menu-abrir,
    .lateral .item,
    .modulo__titulo,
    .departamento__titulo {
        min-height: 44px;
    }

    .campo input,
    .campo select,
    .regua input,
    .regua select {
        /* 16px no campo é o que impede o iPhone de dar um zoom
           automático ao focar - e o zoom não volta sozinho, deixando a
           pessoa com a tela torta no meio de um lançamento. */
        font-size: 16px;
    }

    .botao-icone { min-width: 44px; }

    /* Letra miúda de tela grande vira letra ilegível no dedo. */
    .campo__dica,
    .item__cod,
    .departamento__nome,
    .selo,
    em, small { font-size: 0.8rem; }

    /* Cabeçalho de tabela que ordena ao clicar também é alvo.
       Célula de tabela ignora `min-height` - para ela, `height` é que
       funciona como piso. Era por isso que a regra não pegava. */
    .tabela th { height: 44px; padding-top: 0; padding-bottom: 0; }
    /* O link de ordenar ocupa a célula inteira: assim o alvo é o
       cabeçalho todo, e não as oito letras da palavra. */
    .tabela th .th-ordem,
    .tabela th > a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* Campo solto dentro de célula de tabela (a tela de atalhos monta
       os seus à mão, sem o embrulho `.campo`) também é alvo de dedo. */
    .tabela td select,
    .tabela td input[type="text"] { min-height: 44px; }
}

@media (max-width: 760px) {
    /* ---------------------------------------------------------------
       A TABELA VIRA UMA PILHA DE CARTÕES.

       O rótulo de cada valor vem do cabeçalho da própria tabela,
       carimbado pelo app.js. Sem JavaScript, a tabela continua tabela
       e rola para o lado: pior, mas nunca quebrado.
       --------------------------------------------------------------- */
    .tabela--cartoes { display: block; }
    .tabela--cartoes thead { display: none; }
    .tabela--cartoes tbody { display: block; }

    .tabela--cartoes tbody tr {
        display: block;
        padding: 10px 12px;
        margin-bottom: 10px;
        background: var(--superficie);
        border: 1px solid var(--borda);
        border-radius: var(--raio-campo);
    }

    .tabela--cartoes tbody td {
        display: flex;
        gap: 14px;
        align-items: baseline;
        justify-content: space-between;
        width: auto;
        padding: 5px 0;
        text-align: right;
        border: 0;
        border-bottom: 1px dashed var(--borda);
    }
    .tabela--cartoes tbody td:last-child { border-bottom: 0; }

    /* O nome da coluna na frente do valor. É isto que substitui o
       cabeçalho que sumiu. */
    .tabela--cartoes tbody td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--cinza);
        text-align: left;
        text-transform: none;
    }
    /* Célula sem rótulo (a de ações) não ganha etiqueta vazia. */
    .tabela--cartoes tbody td:not([data-rotulo])::before { content: none; }

    /* A coluna de ações deixa de ser coluna: vira a faixa de botões do
       pé do cartão, que é onde o polegar já está. */
    .tabela--cartoes tbody td.acoes {
        justify-content: flex-end;
        padding-top: 10px;
    }
    .tabela--cartoes tbody td.acoes .acoes-linha { gap: 10px; }

    /* Sem a rolagem lateral, que não serve mais a nada aqui. */
    .tabela-rolagem:has(.tabela--cartoes) { overflow-x: visible; }
    .tabela--cartoes td.acoes:last-child,
    .tabela--cartoes th.acoes:last-child { position: static; box-shadow: none; }

    /* Linha de "nenhum registro": não tem coluna a que corresponder. */
    .tabela--cartoes tbody td[colspan] { text-align: center; }
    .tabela--cartoes tbody td[colspan]::before { content: none; }

    /* ---------------------------------------------------------------
       FORMULÁRIO EM UMA COLUNA SÓ.

       A grade de 12 colunas é o que faz caber seis campos numa linha
       no monitor. Em 390px ela faz caber seis campos de 50px, que não
       cabem em nada.
       --------------------------------------------------------------- */
    .grade-form { grid-template-columns: 1fr; gap: 10px; }
    .regua { grid-template-columns: 1fr; }

    /* TODO filho ocupa a coluna única — inclusive os que não têm
       classe `col-`.

       Não é exagero de regra: basta UM filho com `grid-column: span 12`
       sobrando (a faixa de ações da régua tinha) para o navegador criar
       onze colunas implícitas vazias. Elas não aparecem, mas os onze
       vãos entre elas aparecem: comem 132px dos 326 disponíveis, e todo
       campo da tela fica com 60% da largura sem motivo visível. */
    .grade-form > *,
    .regua > * { grid-column: 1 / -1 !important; }

    .regua__acoes { display: flex; gap: 10px; }
    .regua__acoes .botao { flex: 1; }

    /* ---------------------------------------------------------------
       O CABEÇALHO DO CARTÃO empilha em vez de disputar a linha.
       O `div.direita` com os botões era o que estourava a página para
       a direita em oito telas.
       --------------------------------------------------------------- */
    .cartao__cabecalho {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cartao__cabecalho .direita {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        text-align: left;
    }
    .cartao__cabecalho .direita .botao { flex: 1 1 auto; }

    /* Qualquer bloco "à direita" perde o alinhamento à direita: em uma
       coluna só, não há direita. */
    .direita { text-align: left; }

    /* ---------------------------------------------------------------
       O TOPO.
       O título do programa ficava reduzido a "Iní…" porque disputava a
       linha com a data, o tema, o avatar e o Sair. Num celular, o
       relógio não é o que importa: quem está com o aparelho na mão
       sabe que horas são.
       --------------------------------------------------------------- */
    .topo__relogio { display: none; }
    .topo__titulo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1rem;
    }
    /* O CÓDIGO DO PROGRAMA SAI DO TOPO no celular.
       Ele disputava a linha com o título e ganhava, deixando "Iní…" no
       lugar de "Início". E ele não se perde: a aba logo abaixo mostra
       o código e o nome, lado a lado, com espaço de sobra. */
    .topo__titulo .selo--codigo { display: none; }
    .topo__titulo h1 { font-size: 1.05rem; }

    /* ---------------------------------------------------------------
       O QUADRO DA AGENDA no celular: uma coluna quase inteira por vez,
       e a pessoa desliza. Seis colunas de 60px não mostram cartão
       nenhum.
       --------------------------------------------------------------- */
    /* UMA COLUNA POR VEZ, e um pedaço da seguinte à mostra: é o que
       diz "tem mais para o lado" sem precisar de seta nem de legenda.
       Seis colunas de 60px não mostrariam cartão nenhum. */
    .agenda { grid-auto-columns: 88vw; }
    /* A coluna cresce com o que tem dentro, em vez de todas ficarem do
       tamanho da mais cheia: num celular, uma coluna vazia de meia
       tela de altura é meia tela desperdiçada. */
    .agenda__coluna { align-self: start; }
    .agenda__pilha { max-height: none; min-height: 72px; }

    /* Os quadrantes de lançamento, idem: uma coisa por linha. */
    .quadrante__grade { grid-template-columns: 1fr; }

    /* Papel e paginação não competem por espaço que não existe. */
    .paginacao { flex-direction: column; gap: 8px; align-items: flex-start; }
    .saidas { flex-wrap: wrap; }
}

@media (max-width: 760px) {
    /* A régua de filtros recolhida: um puxador, e nada mais, até que
       alguém queira filtrar. */
    .regua-dobra { margin-bottom: 10px; }
    .regua-dobra__abrir {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 14px;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--tinta);
        cursor: pointer;
        list-style: none;
        background: var(--superficie);
        border: 1px solid var(--borda);
        border-radius: var(--raio-bloco);
    }
    .regua-dobra__abrir::-webkit-details-marker { display: none; }
    /* A setinha diz de que lado a gaveta abre, sem palavra nenhuma. */
    .regua-dobra__abrir::before {
        content: '';
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--cinza);
        border-bottom: 2px solid var(--cinza);
        transform: rotate(-45deg);
        transition: transform 0.15s;
    }
    .regua-dobra[open] .regua-dobra__abrir::before { transform: rotate(45deg); }
    .regua-dobra[open] .regua-dobra__abrir {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .regua-dobra[open] .regua {
        margin-bottom: 0;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* =====================================================================
   Os últimos cantos do celular — medidos, não adivinhados
   ===================================================================== */

@media (max-width: 1024px) {
    /* O HAMBÚRGUER e o pino do menu são os dois alvos mais usados da
       tela, e eram os dois menores: 32px e 28px. */
    .topo__menu,
    .lateral__pino { min-width: 44px; min-height: 44px; }

    /* Caixa de marcar: 13px de alvo é um erro de toque esperando
       acontecer, ainda mais em lista de baixa em lote, onde marcar a
       linha errada tem consequência. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    /* O select do menu do cartão da agenda não mora dentro de `.campo`,
       então a regra geral não o alcançava: ficou em 19px. */
    .agenda__menu-corpo select,
    .agenda__menu-corpo .botao { min-height: 44px; }

    /* O selo e a letra de apoio ficaram abaixo de 11px apesar da regra
       geral: havia seletor mais específico mandando neles. Aqui são
       nomeados um a um, que é o que faz a regra valer. */
    /* Nomeados com a mesma especificidade de quem os encolheu: a regra
       geral `.selo` perdia de `.tabela--justa .selo`, e `em` perdia de
       `.aba em`. Perder calado é como 10,5px continuam na tela. */
    .selo,
    .tabela--justa .selo,
    .tabela--justa small.campo__dica,
    .tabela--justa th,
    .aba em,
    .item__cod,
    .departamento__nome { font-size: 0.78rem; }
}

@media (max-width: 760px) {
    /* NO CARTÃO, O TEXTO QUEBRA.
       `.tabela--justa td` usa `white-space: nowrap` de propósito: numa
       tabela de verdade, cada célula numa linha só é o que mantém a
       grade legível. Dentro de um cartão empilhado isso não tem mais
       sentido - e era o que empurrava a página 247px para fora no
       fechamento de caixa. */
    .tabela--cartoes td,
    .tabela--cartoes td .solta,
    .tabela--cartoes small.campo__dica {
        white-space: normal;
        min-width: 0;
    }
    .tabela--cartoes td { overflow-wrap: anywhere; }

    /* Dica longa fora de tabela também quebra em vez de empurrar. */
    .campo__dica, .campo__erro { overflow-wrap: anywhere; }

    /* Fila de botões de ícone quebra de linha em vez de sair pela
       direita. */
    .acoes-linha { flex-wrap: wrap; justify-content: flex-end; }

    /* Tabela que não virou cartão (poucas colunas) ainda rola sozinha,
       sem levar a página junto. */
    .tabela-rolagem { max-width: 100%; overflow-x: auto; }
}

/* A matriz de permissões: programa à esquerda, o que se pode fazer
   nele à direita. */
.tabela--permissoes__programa { width: 300px; }

@media (max-width: 1024px) {
    /* Rótulo que embrulha caixa de marcar é O alvo: é nele que o dedo
       acerta, e é ele que precisa ter altura de dedo. */
    label.campo--linha,
    .tabela--permissoes label { min-height: 44px; }

    /* A caixa de marcar ficou 24px, e com isso "É fornecedor" passou a
       precisar de 9px a mais do que a célula tem. O texto quebra em
       vez de ser cortado: cortar a palavra de um campo que liga e
       desliga coisa é pior do que usar duas linhas. */
    .campo--linha { flex-wrap: wrap; }
    .campo--linha > span { min-width: 0; }

    /* Os poucos alvos que ficaram a um ou dois pixels do mínimo. */
    .pular, .marca-link, .aba-consulta { min-height: 44px; }

    /* Select dentro de tabela justa continua compacto na largura, mas
       não na altura: 19px não é alvo, é alfinete. */
    .tabela--justa select,
    .tabela--justa input[type="text"],
    .tabela--justa input[type="date"] { min-height: 40px; }
}

@media (max-width: 760px) {
    /* No celular a primeira coluna perde a largura fixa e as duas
       viram linhas: 300px fixos num aparelho de 390 jogam a segunda
       coluna para fora da tela. */
    .tabela--permissoes,
    .tabela--permissoes tbody,
    .tabela--permissoes tr,
    .tabela--permissoes td { display: block; width: auto; }
    .tabela--permissoes tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--borda);
    }
    .tabela--permissoes__programa { width: auto; }
    .tabela--permissoes td:last-child { padding-left: 29px; }
}