/* =========================================================================
   DRE 360 — design system "cockpit contábil"
   Papel de trabalho: densidade alta, números monoespaçados, pouco raio.
   Desktop em primeiro lugar; o celular recebe um arranjo próprio no fim
   deste arquivo (a partir de "TELAS ESTREITAS").
   As telas só usam var(--...) — nunca cor literal.
   ========================================================================= */

/* Cores, medidas e fontes (claro e escuro) ficam em assets/css/tema.css, carregado antes deste arquivo. */


* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--t1);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.008em; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0 0 10px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dir { text-align: right; }
.pos { color: var(--ok); }
.neg { color: var(--er); }
.apoio { color: var(--t3); }
.oculto { display: none !important; }

/* =========================================================================
   TOPO
   ========================================================================= */
.topo {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--h-topo);
    padding: 0 20px;
    background: var(--sf);
    border-bottom: 1px solid var(--ln-forte);
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: 3px;
}
.topo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--topo-faixa); }
.marca { display: flex; align-items: baseline; gap: 8px; color: var(--t1); white-space: nowrap; }
.marca:hover { text-decoration: none; color: var(--t1); }
.marca b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--t1); }
.marca b::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border-radius: 3px; background: var(--marca); box-shadow: 4px 4px 0 var(--destaque); vertical-align: 1px; }
.marca span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--t3); font-weight: 600; }

/* seletor de contexto (empresa / competência) */
.ctx {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--ln-forte);
    border-radius: var(--r);
    background: var(--sf-2);
    font-size: 13px;
    white-space: nowrap;
}
.ctx .rot { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--t3); font-weight: 700; }
.ctx b { font-weight: 600; }
.ctx select {
    border: 0; background: transparent; padding: 0; margin: 0;
    font: 600 13px var(--sans); color: var(--t1); cursor: pointer;
    max-width: 210px; text-overflow: ellipsis;
}
.ctx select:focus { outline: none; }
.ctx form { margin: 0; display: flex; align-items: center; gap: 7px; }
.ctx-grupo b, .ctx-grupo select { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1240px) { .topo .marca span { display: none; } .topo-usuario .nome { display: none; } .ctx-grupo b, .ctx-grupo select, .ctx select { max-width: 170px; } }
@media (max-width: 860px) { .topo .fim > .selo { display: none; } .ctx select { min-width: 96px; } }
@media (max-width: 860px) { .ctx-grupo.fixo { display: none; } }

.topo .fim { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topo-usuario { display: flex; align-items: center; gap: 9px; color: var(--t1); }
.topo-usuario:hover { text-decoration: none; color: var(--t1); }
.topo-usuario .nome { line-height: 1.2; text-align: right; }
.topo-usuario .nome b { display: block; font-size: 12.5px; font-weight: 600; }
.topo-usuario .nome span { font-size: 10.5px; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--marca); color: var(--marca-txt);
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
    flex: 0 0 auto;
}
.btn-sair {
    width: 30px; height: 30px; border: 1px solid var(--ln-forte); border-radius: var(--r);
    background: var(--sf-2); color: var(--t3);
    display: grid; place-items: center; cursor: pointer;
}
.btn-sair:hover { color: var(--er); border-color: var(--er-bd); background: var(--er-sv); }

/* botão de menu — só aparece em tela estreita */
.btn-menu {
    display: none;
    width: 32px; height: 32px; border: 1px solid var(--ln-forte); border-radius: var(--r);
    background: var(--sf-2); color: var(--t1); cursor: pointer;
    place-items: center; flex: 0 0 auto;
}

/* =========================================================================
   ABAS DE NAVEGAÇÃO
   ========================================================================= */
.abas {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    background: var(--sf);
    border-bottom: 1px solid var(--ln-forte);
    position: sticky;
    top: var(--h-topo);
    z-index: 39;
    overflow-x: auto;
    /* rolagem fina e visível: com a janela estreita, Cadastros e Usuários ficam à direita */
    scrollbar-width: thin;
    scrollbar-color: var(--ln-forte) transparent;
}
.abas::-webkit-scrollbar { height: 4px; }
.abas::-webkit-scrollbar-thumb { background: var(--ln-forte); border-radius: 2px; }
.aba {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 14px 8px;
    font-size: 13px;
    color: var(--t2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.aba svg { color: var(--t3); }
.aba:hover { color: var(--t1); background: var(--hover); text-decoration: none; }
.aba.on { color: var(--marca); font-weight: 600; border-bottom-color: var(--marca); background: linear-gradient(to top, var(--marca-sv), transparent 75%); }
.aba.on svg { color: var(--marca); }
.aba .cnt {
    font-size: 10.5px; font-weight: 700; line-height: 1.5;
    background: var(--er); color: var(--tinta-txt);
    border-radius: 20px; padding: 0 6px; min-width: 17px; text-align: center;
}
.aba.sair { margin-left: auto; color: var(--er); }
.aba.sair:hover { color: var(--er); background: var(--er-sv); }
.aba-sep { width: 1px; background: var(--ln); margin: 8px 10px; flex: 0 0 auto; }

/* =========================================================================
   RÉGUA DE INDICADORES
   ========================================================================= */
.regua {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--sf);
    border-bottom: 1px solid var(--ln-forte);
}
.met { padding: 10px 20px; border-right: 1px solid var(--ln); min-width: 0; }
.met:last-child { border-right: 0; }
.met .rot { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--t3); font-weight: 700; white-space: nowrap; }
.met .val {
    font-family: var(--mono); font-size: 17px; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.35;
    white-space: nowrap;
}
.met .nota { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.met.forte { background: var(--marca); }
.met.forte .rot, .met.forte .nota { color: var(--marca-txt); opacity: .78; }
.met.forte .val { color: var(--marca-txt); }

/* =========================================================================
   ÁREA DE CONTEÚDO
   ========================================================================= */
.area { display: grid; grid-template-columns: 1fr var(--gaveta); align-items: start; }
.area.sem-gaveta { grid-template-columns: 1fr; }
.principal { padding: 16px 20px 40px; min-width: 0; }

.tit { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tit h1 { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.tit .sub { font-size: 12.5px; color: var(--t3); }
.tit .acoes { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* =========================================================================
   BOTÕES
   ========================================================================= */
.btn {
    height: 32px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--ln-forte);
    border-radius: var(--r);
    background: var(--sf);
    color: var(--t1);
    font: 500 12.5px var(--sans);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao);
}
.btn:hover { background: var(--hover); text-decoration: none; color: var(--t1); }
.btn:disabled, .btn.desativado { opacity: .5; cursor: not-allowed; }
.btn.forte { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-txt); font-weight: 600; }
.btn.forte:hover { background: var(--tinta-2); border-color: var(--tinta-2); color: var(--tinta-txt); }
.btn.forte { box-shadow: var(--sombra-1); }
.btn.perigo { color: var(--er); border-color: var(--er-bd); }
.btn.perigo:hover { background: var(--er-sv); color: var(--er); }
.btn.ok { color: var(--ok); border-color: var(--ok-bd); }
.btn.ok:hover { background: var(--ok-sv); color: var(--ok); }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--t2); }
.btn.fantasma:hover { background: var(--hover); color: var(--t1); }
.btn.pequeno { height: 26px; padding: 0 9px; font-size: 11.5px; }
.btn.largo { width: 100%; }
.btn.icone { width: 32px; padding: 0; }
.btn.icone.pequeno { width: 26px; }

/* =========================================================================
   FORMULÁRIOS
   ========================================================================= */
label, .rotulo {
    display: block;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--t3); font-weight: 700; margin-bottom: 4px;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=search], input[type=month], select, textarea {
    width: 100%;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--ln-forte);
    border-radius: var(--r);
    background: var(--input);
    color: var(--t1);
    font: 400 13px var(--sans);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { height: auto; min-height: 72px; padding: 7px 9px; resize: vertical; line-height: 1.5; }
select {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23807c6b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px var(--foco);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
    background: var(--sf-2); color: var(--t3); cursor: not-allowed;
}
input.valor, input.mono, td input.valor { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.campo { margin-bottom: 12px; min-width: 0; }
.campo .ajuda { font-size: 11.5px; color: var(--t3); margin-top: 3px; }
.campo.erro input, .campo.erro select, .campo.erro textarea { border-color: var(--er); }
.campo.erro .ajuda { color: var(--er); }

.linha-campos { display: grid; gap: 12px; align-items: start; }
.lc-2 { grid-template-columns: 1fr 1fr; }
.lc-3 { grid-template-columns: repeat(3, 1fr); }
.lc-4 { grid-template-columns: repeat(4, 1fr); }
.lc-auto { grid-auto-flow: column; grid-auto-columns: max-content; }

.marcador { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t1); cursor: pointer; }
.marcador input[type=checkbox], .marcador input[type=radio] { width: 15px; height: 15px; accent-color: var(--marca); margin: 0; cursor: pointer; }
.marcador label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--t1); }

/* barra de filtros acima de uma tabela */
.filtros {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px;
    background: var(--sf);
    border: 1px solid var(--ln);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
}
.filtros .campo { margin: 0; }
.filtros .fim { margin-left: auto; display: flex; gap: 7px; align-items: flex-end; }

/* =========================================================================
   CARTÕES
   ========================================================================= */
.cartao { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-1); }
.cartao + .cartao { margin-top: 14px; }
.cartao-topo {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ln);
    background: var(--sf-2);
}
.cartao-topo h2, .cartao-topo h3 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--t3); font-weight: 700;
}
.cartao-topo .apoio { margin-left: auto; font-size: 12px; color: var(--t3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.cartao-corpo { padding: 14px; }
.cartao-rodape { padding: 9px 14px; border-top: 1px solid var(--ln); background: var(--sf-2); font-size: 12px; color: var(--t3); }

/* cartão-atalho para outra tela (central de relatórios) */
a.cartao.relatorio { display: block; color: var(--t1); transition: border-color var(--transicao); }
a.cartao.relatorio:hover { text-decoration: none; border-color: var(--ln-forte); background: var(--hover); }
a.cartao.relatorio:hover .relatorio-seta { color: var(--t1); }
.relatorio-topo { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.relatorio-icone {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--marca-bd); border-radius: var(--r);
    background: var(--marca-sv); color: var(--marca);
}
.relatorio-nome { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.25; }
.relatorio-formato { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); font-weight: 700; }
.relatorio-seta { margin-left: auto; color: var(--t4); }
.relatorio-resumo { margin: 0; font-size: 12.5px; color: var(--t2); line-height: 1.45; }

.colunas { display: grid; gap: 14px; align-items: start; }
.c-2 { grid-template-columns: 1fr 1fr; }
.c-3 { grid-template-columns: repeat(3, 1fr); }
.c-4 { grid-template-columns: repeat(4, 1fr); }
.c-2-1 { grid-template-columns: 2fr 1fr; }
.c-1-2 { grid-template-columns: 1fr 2fr; }

/* =========================================================================
   TABELA "LIVRO" — o componente central do sistema
   ========================================================================= */
.tabela-caixa { overflow-x: auto; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-lg); box-shadow: var(--sombra-1); }
.tabela-caixa .livro { border: 0; }

table.livro { width: 100%; border-collapse: collapse; background: var(--sf); font-size: 12.5px; }
table.livro thead th {
    text-align: left;
    font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--t3); font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ln-forte);
    background: var(--sf-2);
    position: sticky; top: 0; z-index: 2;
    white-space: nowrap;
}
table.livro tbody td { padding: 6px 12px; border-bottom: 1px solid var(--ln); vertical-align: middle; }
table.livro tbody tr:hover td { background: var(--hover); }
table.livro .d { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.livro th.d { text-align: right; }
table.livro tr.gr td {
    background: var(--sf-2); font-weight: 700;
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--ln-forte);
}
table.livro tr.gr:hover td { background: var(--sf-2); }
table.livro tr.sub td:first-child { padding-left: 30px; color: var(--t2); }
table.livro tr.tot td { border-top: 1px solid var(--ln-forte); border-bottom: 2px solid var(--marca); font-weight: 700; }
table.livro tr.tot:hover td { background: transparent; }
table.livro tr.sel td { background: var(--marca-sv); box-shadow: inset 3px 0 0 var(--marca); }
table.livro tr.clicavel { cursor: pointer; }
table.livro td.acoes { white-space: nowrap; text-align: right; }
table.livro .menor { font-size: 11.5px; color: var(--t3); }

/* =========================================================================
   GAVETA LATERAL
   ========================================================================= */
.gaveta {
    border-left: 1px solid var(--ln-forte);
    background: var(--sf);
    padding: 14px 16px 30px;
    position: sticky;
    top: calc(var(--h-topo) + var(--h-abas));
    align-self: start;
}
.gaveta h4 {
    font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
    color: var(--t3); font-weight: 700; margin-bottom: 5px;
}
.gaveta .g-tit { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.25; }
.gaveta .g-sub { font-size: 12px; color: var(--t3); margin-bottom: 8px; }
.gaveta .g-val {
    font-family: var(--mono); font-size: 21px; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.3;
}
.g-linha {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 5px 0; border-bottom: 1px solid var(--ln); font-size: 12.5px;
}
.g-linha:last-of-type { border-bottom: 0; }
.g-linha span { color: var(--t3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-linha b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 auto; }
.g-sep { border-top: 1px solid var(--ln-forte); margin: 13px 0 11px; }
.g-vazia { color: var(--t3); font-size: 12.5px; line-height: 1.5; }
.g-texto { font-size: 12.5px; color: var(--t2); line-height: 1.45; margin: 0 0 12px; }
.btn-fechar-gaveta { display: none; }

/* =========================================================================
   SELOS, AVISOS E ESTADOS
   ========================================================================= */
.selo {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    padding: 2px 7px; border: 1px solid currentColor; border-radius: 2px;
    white-space: nowrap;
}
.selo.ok { color: var(--ok); }
.selo.er { color: var(--er); }
.selo.av { color: var(--av); }
.selo.info { color: var(--info); }
.selo.neutro { color: var(--t3); }
.selo.cheio { border-color: transparent; }
.selo.cheio.ok { background: var(--ok-sv); }
.selo.cheio.er { background: var(--er-sv); }
.selo.cheio.av { background: var(--av-sv); }
.selo.cheio.info { background: var(--info-sv); }

.aviso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--ln-forte); border-left-width: 3px;
    border-radius: var(--r);
    background: var(--sf);
    font-size: 13px;
    margin-bottom: 14px;
}
.aviso svg { flex: 0 0 auto; margin-top: 1px; }
.aviso.sucesso { border-color: var(--ok-bd); border-left-color: var(--ok); background: var(--ok-sv); color: var(--ok); }
.aviso.erro { border-color: var(--er-bd); border-left-color: var(--er); background: var(--er-sv); color: var(--er); }
.aviso.atencao { border-color: var(--av-bd); border-left-color: var(--av); background: var(--av-sv); color: var(--av); }
.aviso.info { border-color: var(--info-bd); border-left-color: var(--info); background: var(--info-sv); color: var(--info); }
.aviso b { font-weight: 700; }

.vazio { padding: 44px 20px; text-align: center; color: var(--t3); }
.vazio .tit-vazio { font-family: var(--serif); font-size: 17px; color: var(--t2); margin-bottom: 4px; font-weight: 600; }
.vazio p { font-size: 13px; max-width: 46ch; margin: 0 auto 14px; }

/* barra de proporção */
.trilho { height: 5px; background: var(--sf-3); border-radius: 3px; overflow: hidden; }
.trilho i { display: block; height: 100%; background: var(--marca); }
.trilho i.ok { background: var(--ok); }
.trilho i.er { background: var(--er); }
.trilho i.av { background: var(--av); }

/* =========================================================================
   MODAIS
   ========================================================================= */
.modal {
    position: fixed; inset: 0; z-index: 60;
    background: var(--veu);
    display: grid; place-items: center;
    padding: 20px;
}
.modal[hidden] { display: none !important; }
.modal-caixa {
    background: var(--sf);
    border: 1px solid var(--ln-forte);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-3);
    width: 100%; max-width: 520px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
}
.modal-caixa.larga { max-width: 820px; }
.modal-topo {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--ln);
}
.modal-topo h3 { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.modal-topo .btn { margin-left: auto; }
.modal-corpo { padding: 16px; overflow-y: auto; }
.modal-rodape {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--ln); background: var(--sf-2);
}

/* =========================================================================
   PAGINAÇÃO E ABAS SECUNDÁRIAS
   ========================================================================= */
.paginacao { display: flex; align-items: center; gap: 6px; padding: 11px 0; font-size: 12.5px; color: var(--t3); }
.paginacao .btn { min-width: 30px; }
.paginacao .btn.on { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-txt); font-weight: 600; }
.paginacao .conta { margin-right: auto; }

.abas-2 { display: flex; gap: 2px; border-bottom: 1px solid var(--ln-forte); margin-bottom: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas-2::-webkit-scrollbar { display: none; }
.aba-2 {
    padding: 7px 12px; font-size: 12.5px; color: var(--t2);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0;
    font-family: var(--sans); white-space: nowrap;
}
.aba-2:hover { color: var(--t1); }
.aba-2.on { color: var(--marca); font-weight: 600; border-bottom-color: var(--marca); }

/* =========================================================================
   TELAS ESTREITAS — o cockpit se reorganiza, não encolhe
   ========================================================================= */
@media (max-width: 1100px) {
    .area { grid-template-columns: 1fr; }
    .gaveta {
        position: fixed; inset: 0 0 0 auto;
        width: min(340px, 92vw);
        z-index: 55;
        border-left: 1px solid var(--ln-forte);
        box-shadow: var(--sombra-3);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 160ms cubic-bezier(.4, 0, .2, 1);
    }
    .gaveta.aberta { transform: translateX(0); }
    .btn-fechar-gaveta { display: inline-flex; position: absolute; top: 10px; right: 12px; }
    .c-4 { grid-template-columns: repeat(2, 1fr); }
    .c-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .topo { padding: 0 14px; gap: 10px; }
    .btn-menu { display: grid; }
    .marca span { display: none; }
    .topo-usuario .nome { display: none; }
    .ctx .rot { display: none; }
    .ctx { flex: 0 1 auto; min-width: 0; }
    .ctx select { max-width: 130px; min-width: 84px; }
    .ctx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* as abas viram um painel que desce do topo */
    .abas {
        position: fixed;
        top: var(--h-topo); left: 0; right: 0;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 6px;
        border-bottom: 1px solid var(--ln-forte);
        box-shadow: var(--sombra-2);
        max-height: calc(100vh - var(--h-topo));
        overflow-y: auto;
        z-index: 45;
    }
    .abas.aberto { display: flex; }
    .aba { border-bottom: 0; margin: 0; border-radius: var(--r); padding: 10px 12px; font-size: 14px; }
    .aba.on { background: var(--marca-sv); box-shadow: inset 3px 0 0 var(--marca); }
    .aba.sair { margin-left: 0; }
    .aba-sep { width: auto; height: 1px; margin: 6px 10px; }

    /* a régua desliza na horizontal */
    .regua { grid-auto-columns: minmax(148px, 1fr); overflow-x: auto; scrollbar-width: none; }
    .regua::-webkit-scrollbar { display: none; }
    .met { padding: 9px 14px; }
    .gaveta { top: 0; }

    .principal { padding: 14px 14px 36px; }
    .c-2, .c-3, .c-4, .c-2-1, .c-1-2 { grid-template-columns: 1fr; }
    .lc-2, .lc-3, .lc-4 { grid-template-columns: 1fr; }
    .tit h1 { font-size: 19px; }
    .tit .acoes { margin-left: 0; width: 100%; }
    .filtros .fim { margin-left: 0; width: 100%; }
    .filtros .campo { flex: 1 1 140px; }
}

@media (max-width: 520px) {
    .marca b { font-size: 17px; }
    .topo { gap: 8px; }
    .ctx { padding: 0 8px; }
    .ctx select { max-width: 96px; min-width: 76px; font-size: 12.5px; }
    /* no telefone a competência vem primeiro; a empresa cabe na linha seguinte */
    .topo { flex-wrap: wrap; height: auto; padding-block: 7px; gap: 7px; }
    .abas { top: auto; }
    .modal { padding: 0; align-items: flex-end; }
    .modal-caixa { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; }
}

@media print {
    .topo, .abas, .regua, .gaveta, .tit .acoes, .filtros, .paginacao { display: none !important; }
    .area { grid-template-columns: 1fr; }
    .principal { padding: 0; }
    body { background: #fff; }
    .cartao, .tabela-caixa { border-color: #bbb; }
}

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