/* =========================================================================
   SecurePass — design system "cockpit" (herdado do DRE 360)
   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], input[type=url], 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; }
}


/* =========================================================================
   SECUREPASS — peças próprias do cofre (mesmos tokens do tema)
   ========================================================================= */
.aba-perfil { margin-left: auto; }
.btn.perigo-cheio { background: var(--er); border-color: var(--er); color: #fff; }
.btn.perigo-cheio:hover { background: var(--er); border-color: var(--er); color: #fff; filter: brightness(.92); }
.btn svg { flex: 0 0 auto; }

/* campo com botões colados (senha, copiar, gerar) */
.grupo-campo { display: flex; align-items: stretch; }
.grupo-campo input { border-radius: var(--r) 0 0 var(--r); min-width: 0; }
.grupo-campo .btn { border-radius: 0; margin-left: -1px; flex: 0 0 auto; }
.grupo-campo .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
.grupo-campo input:focus { position: relative; z-index: 1; }

/* o segredo em destaque na tela de detalhes */
.segredo input { height: 40px; font-family: var(--mono); font-size: 15px; letter-spacing: .02em; }
.segredo .btn { height: 40px; }

/* ficha de leitura (detalhes da credencial) */
.ficha { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid var(--ln); }
.ficha > dt, .ficha > dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.ficha > dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); font-weight: 700; padding-top: 12px; }
.ficha > dd { min-width: 0; overflow-wrap: anywhere; }
.nota-texto { white-space: pre-wrap; color: var(--t2); }

/* nome do sistema na tabela, com o link logo abaixo */
.cel-sistema b { display: block; font-weight: 600; }
.cel-sistema a, .cel-sistema .menor { font-size: 11.5px; color: var(--t3); }
.cel-sistema a:hover { color: var(--marca); }

/* opções de compartilhamento */
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.opcao { flex: 1 1 200px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ln-forte); border-radius: var(--r); cursor: pointer; background: var(--sf); }
.opcao:hover { background: var(--hover); }
.opcao input { margin-top: 2px; accent-color: var(--marca); }
.opcao b { display: block; font-size: 13px; }
.opcao span { font-size: 12px; color: var(--t3); }
.opcao:has(input:checked) { border-color: var(--marca); background: var(--marca-sv); box-shadow: inset 3px 0 0 var(--marca); }
.painel { padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--sf-2); }
.painel[hidden] { display: none; }
.grade-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }

/* lista simples dentro de cartões */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--ln); font-size: 12.5px; }
.lista li:last-child { border-bottom: 0; }
.lista .apoio { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.lista .avatar { width: 24px; height: 24px; font-size: 10px; }

/* seção de formulário dentro de um cartão */
.secao-form + .secao-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ln); }
.secao-form h2 { font-family: var(--serif); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.secao-form > p { font-size: 12.5px; color: var(--t3); margin: 0 0 12px; }
.rodape-form { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ln); background: var(--sf-2); }

/* detalhe de um registro de auditoria */
.log-descricao { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--t1); }

@media (max-width: 860px) {
    .aba-perfil { margin-left: 0; }
    .ficha { grid-template-columns: 1fr; }
    .ficha > dt { border-bottom: 0; padding-bottom: 0; }
    .rodape-form .btn { flex: 1; }
    table.livro .some-no-celular { display: none; }
}
/* rótulos que envolvem um marcador não herdam o estilo de rótulo de campo */
label.marcador, label.opcao { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--t1); margin: 0; }
.lista li > div { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1100px) { table.livro .some-no-medio { display: none; } }
.grupo-campo input[readonly] { background: var(--sf-2); color: var(--t1); cursor: text; }

/* Símbolo do SecurePass: uma chave nas cores da marca (substitui o quadradinho herdado do DRE 360) */
.marca b { position: relative; }
.marca b::before {
    width: 17px; height: 17px; margin-right: 8px; border-radius: 0; box-shadow: none;
    background: var(--marca); vertical-align: -2px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='16.5' r='4.6'/%3E%3Cpath d='M10.8 13.2L20.5 3.5M16.8 7.2l3 3M13.9 10.1l2.2 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='16.5' r='4.6'/%3E%3Cpath d='M10.8 13.2L20.5 3.5M16.8 7.2l3 3M13.9 10.1l2.2 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* o miolo da argola da chave, no laranja de destaque */
.marca b::after {
    content: ""; position: absolute; left: 3.9px; bottom: 0.26em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--destaque);
}

/* =========================================================================
   Kit padrão de cadastro (assets/css/cadastro.css) dentro do SecurePass:
   ajustes para o tema escuro e para o texto sobre a cor da marca.
   ========================================================================= */
:root .cad-rodape { background: var(--sf); border-color: var(--ln-forte); box-shadow: var(--sombra-2); }
:root .cad-btn-pri, :root .cad-tipo input:checked + span { color: var(--marca-txt); }
:root .cad-secao { background: var(--sf); }
.pub-caixa.larga-cadastro { max-width: 980px; }
.ficha-cadastro, .colunas > form { min-width: 0; }
.cad-linha .btn { height: auto; align-self: stretch; }

/* Celular: campos com 16px (abaixo disso o iPhone dá zoom sozinho ao tocar no campo)
   e alvos de toque com pelo menos ~40px de altura */
@media (max-width: 860px) {
    input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
    input[type=tel], input[type=search], input[type=url], select, textarea, .cad-input, .cad-select, .cad-textarea { font-size: 16px; height: 40px; }
    textarea, .cad-textarea { height: auto; }
    .btn { height: 38px; }
    .btn.pequeno { height: 34px; padding: 0 11px; }
    .btn.icone.pequeno { width: 34px; }
    .btn-sair, .btn-tema, .btn-menu { width: 36px; height: 36px; }
    .grupo-campo .btn { height: 40px; }
}

/* Celular: cada linha das listas vira um cartão (regra 9 do padrão de cadastro).
   As colunas marcadas some-no-celular continuam escondidas; as ações ficam embaixo, largas. */
@media (max-width: 600px) {
    .tabela-caixa { overflow: visible; }
    .tabela-caixa table.livro, .tabela-caixa table.livro tbody, .tabela-caixa table.livro tr, .tabela-caixa table.livro td { display: block; width: 100%; }
    .tabela-caixa table.livro thead { display: none; }
    .tabela-caixa table.livro tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--ln); }
    .tabela-caixa table.livro tbody tr:last-child { border-bottom: 0; }
    .tabela-caixa table.livro tbody tr[hidden] { display: none; }
    .tabela-caixa table.livro tbody td { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
    .tabela-caixa table.livro tbody tr:hover td { background: transparent; }
    .tabela-caixa table.livro td.d { text-align: left; }
    .tabela-caixa table.livro td.acoes { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
    .tabela-caixa table.livro td.acoes > .btn, .tabela-caixa table.livro td.acoes > form { flex: 1 1 auto; }
    .tabela-caixa table.livro td.acoes > form .btn { width: 100%; }
    .tabela-caixa table.livro td.acoes .btn.icone { flex: 0 0 auto; }
    .tabela-caixa table.livro td[colspan] { padding: 0; }
    .tabela-caixa .cartao-topo { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .tabela-caixa table.livro td.some-no-celular:not(.mostra-no-cartao) { display: none; }
    .tabela-caixa table.livro td.acoes > form { flex: 0 0 auto; }
    .tabela-caixa table.livro td.acoes > form .btn { width: auto; }
}
/* Celular: formulários do padrão ocupam a largura toda e a barra de salvar fica numa linha só */
@media (max-width: 600px) {
    :root .pub-miolo { padding: 10px 0 40px; }
    :root .pub-caixa { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
    :root .pub-cab, :root .pub-corpo, :root .pub-rodape { padding-left: 14px; padding-right: 14px; }
    :root .cad-rodape { flex-wrap: nowrap; padding: 10px 12px; border-radius: 0; margin-left: -14px; margin-right: -14px; }
    :root .cad-rodape .cad-rodape-info { display: none; }
    :root .cad-rodape .cad-btn-ghost { flex: 0 0 auto; }
    :root .cad-secao-corpo { padding-left: 14px; padding-right: 14px; }
}

/* Seta dos <select> do kit de cadastro: o kit usa o atalho "background", que apagava a seta
   no tema claro e a fazia se repetir pelo campo inteiro no tema escuro */
:root select.cad-select {
    background-color: var(--input);
    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='%23677884' 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 10px center;
    appearance: none; -webkit-appearance: none;
}
:root[data-tema="escuro"] select.cad-select {
    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='%238595a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* =========================================================================
   Proteção contra captura de tela (core/protecao.php, assets/js/protecao.js)
   ========================================================================= */
/* Impressão e "salvar em PDF" saem em branco nas telas internas */
@media print {
    html.sem-impressao body * { display: none !important; }
    html.sem-impressao body::after {
        content: "Impressão desativada: por segurança, o SecurePass não permite imprimir nem salvar telas em PDF.";
        display: block; padding: 60px 40px; font: 16px/1.5 Arial, sans-serif; color: #000;
    }
}

/* Marca d'água com quem está vendo (telas com senha) */
.marca-dagua { position: fixed; inset: 0; z-index: 38; pointer-events: none; background-repeat: repeat; background-position: 0 0; }

/* Fora de foco: conteúdo das telas com senha desfocado */
html.protecao-desfocada .area, html.protecao-desfocada .regua { filter: blur(14px); transition: none; }
.protecao-veu {
    position: fixed; inset: calc(var(--h-topo) + var(--h-abas)) 0 0 0; z-index: 39; border: 0; cursor: pointer;
    display: grid; place-items: center; background: transparent; color: var(--t1);
    font: 600 15px var(--sans); text-shadow: 0 1px 8px var(--bg);
}

/* Tecla Print Screen: tela toda escura por um instante */
.protecao-cortina {
    position: fixed; inset: 0; z-index: 9999; background: #000; color: #9aa7b1;
    display: grid; place-items: center; font: 600 16px var(--sans); letter-spacing: .02em;
}

/* Aviso rápido no rodapé da tela */
.protecao-aviso {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 9998;
    max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: var(--r-lg);
    background: var(--t1); color: var(--bg); font: 500 13.5px var(--sans); box-shadow: var(--sombra-3); text-align: center;
}
/* além do desfoque, esconde de vez a senha, o login e as observações (não depende do tempo de pintura do filtro) */
html.protecao-desfocada .area, html.protecao-desfocada .regua { filter: blur(18px); }
html.protecao-desfocada .segredo, html.protecao-desfocada .nota-texto, html.protecao-desfocada #campoLogin { visibility: hidden; }

/* Saúde do cofre */
.saude-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.saude-selos a { margin-left: 4px; }
.saude-grupo { padding: 8px 14px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--er); border-top: 1px solid var(--ln); }
.lista li > .as-icone { flex: 0 0 auto; }
.passos-importar { margin: 0; padding-left: 18px; font-size: 13px; color: var(--t2); }
.passos-importar li { padding: 3px 0; }
.rodape-form form { display: inline; }

/* Topo no celular: botões só com ícone para caberem sem alargar a página */
@media (max-width: 860px) {
    .topo .fim { flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 8px; }
    .topo .rotulo-topo { display: none; }
}
/* Texto de apoio dentro das listas quebra linha (não passa por baixo do botão) */
.lista li > div .apoio, .lista li > div .menor { white-space: normal; margin-left: 0; }
.codigo-bloco { margin: 6px 0 10px; padding: 9px 12px; border-radius: var(--r); background: var(--sf-2); border: 1px solid var(--ln); font: 12.5px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Pastas e etiquetas ---------- */
.chips-sugestao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.4;
    border: 1px solid var(--ln); background: var(--sf); color: inherit;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--marca); }
.chip.on { background: var(--marca); border-color: var(--marca); color: #fff; }
.etiquetas-linha { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.etiqueta {
    display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
    background: var(--marca-sv); border: 1px solid var(--marca-bd); color: var(--t2);
}
.filtros-pastas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
@media (max-width: 600px) { .filtros-pastas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } }

/* ---------- Revisão de acessos ---------- */
.revisao-cartao { margin-bottom: 12px; }
.revisao-cartao .lista li { align-items: center; }
.revisao-cartao .lista li > div { flex: 1 1 auto; min-width: 0; }
.revisao-cartao .lista li.sugere-remover { background: var(--av-sv); }
.remover-acesso { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
    .revisao-cartao .lista li { flex-wrap: wrap; }
    .remover-acesso { margin-left: 44px; }
}

/* ---------- LGPD ---------- */
.rodape-legal { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--t4); text-align: center; }
.rodape-legal a { color: var(--t3); }
.cad-aceite { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--sf-2); }
.cad-aceite.cad-campo-erro { border-color: var(--er); background: var(--er-sv); }
.cad-aceite .marcador { align-items: flex-start; line-height: 1.5; }
.cad-aceite .marcador input { margin-top: 3px; }
.zona-perigo { border-color: var(--er-bd); }
.zona-perigo .cartao-topo h2 { color: var(--er); }
.excluir-conta { border-top: 1px solid var(--ln); }
.excluir-conta summary { cursor: pointer; color: var(--er); }
.excluir-conta ul { margin: 4px 0 12px; padding-left: 20px; color: var(--t2); }