/*
 ========================================================================
                  BIGARIUS — SISTEMA DE GESTÃO JURÍDICA
 ========================================================================
 Programa ..... BIGARIUS — Sistema de Gestão Jurídica
 Módulo ....... Central de Licenças — estilos do painel
 Arquivo ...... central/static/painel.css
 Versão ....... 1.0.0 (versão do programa; alterações registradas no Git)
 No Git desde . 2026-10-17
 Linguagem .... CSS
 Autor e titular dos direitos patrimoniais:
                Hermes Brandão Vilela Filho
 Copyright .... (c) 2026 Hermes Brandão Vilela Filho. Todos os direitos
                reservados, ressalvadas as licenças e os direitos de
                terceiros.
 Proteção ..... Programa de computador protegido pela Lei nº 9.609/1998
                e pela Lei nº 9.610/1998.
 Registro INPI  pendente
 Descrição .... Aparência do painel, com modo escuro automático.
 Este arquivo integra o conjunto identificado na documentação técnica
 (docs/DOCUMENTACAO-TECNICA.md) da versão correspondente do programa.
 ========================================================================
*/
:root {
  --ink: #242722;
  --muted: #74756d;
  --bronze: #9e7950;
  --bg: #f6f5f1;
  --line: #e8e7e0;
  --card: #fff;
  --top: #20241f;
  --ok: #3f6b45; --ok-bg: #eaf2e8;
  --info: #35618f; --info-bg: #e9f0f8;
  --warn: #8a6420; --warn-bg: #f8f0dc;
  --alert: #a3372b; --alert-bg: #f8e7e3;
  --off: #6f706a; --off-bg: #efefeb
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9e7df; --muted: #a3a29a; --bronze: #c8a77d; --bg: #171a16; --line: #30342e; --card: #20241f; --top: #111410;
    --ok: #9cc89f; --ok-bg: #22301f; --info: #9dbde3; --info-bg: #1d2a38; --warn: #e2c27e; --warn-bg: #352c18;
    --alert: #eba094; --alert-bg: #3a211d; --off: #b0afa8; --off-bg: #2a2d28
  }
}

* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif }
h1, h2 { font-family: Georgia, serif; font-weight: 500; margin: 4px 0 8px }
h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); margin: 22px 0 8px }
.sobre { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); margin: 0 }
.nota { color: var(--muted); font-size: 13px; margin: 4px 0 14px }
.erro { color: var(--alert); min-height: 1em; margin: 8px 0 }
code, .chave { font-family: ui-monospace, Menlo, monospace }

input, select, button { font: inherit; color: inherit }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card) }
input:focus, select:focus { outline: 2px solid var(--bronze); outline-offset: 0 }
label { display: block; font-size: 12px; color: var(--muted); }
label input, label select { margin-top: 4px; font-size: 14px }
.botao { border: 1px solid var(--line); background: var(--card); padding: 8px 14px; border-radius: 6px; cursor: pointer }
.botao.primario { background: var(--bronze); border-color: var(--bronze); color: #fff }
.botao.leve:hover { border-color: var(--bronze) }

.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px }
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px }
.entrar-cartao { width: min(400px, 100%); border-top: 3px solid var(--bronze); display: grid; gap: 12px }

.topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--top); color: #ece9df; padding: 12px 24px }
.topo .sobre { color: #c5a57c }
.abas { display: flex; gap: 4px; flex: 1 }
.abas button { background: none; border: 0; color: #bdbab0; padding: 6px 12px; border-radius: 6px; cursor: pointer }
.abas button.ativa { background: rgba(255, 255, 255, .1); color: #fff }
.quem { display: flex; align-items: center; gap: 10px; font-size: 13px }
.quem .botao { background: transparent; color: #ece9df; border-color: #4a4f47 }
main { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px }
.indicador { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px }
.indicador span { display: block; font-size: 12px; color: var(--muted) }
.indicador strong { display: block; font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums }
.indicador small { display: block; color: var(--muted); margin-top: 2px }
.indicador.destaque { border-top: 3px solid var(--bronze) }

.barra { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px }
.barra input { flex: 1 1 240px; width: auto }
.barra select { flex: 0 1 200px; width: auto }
.tabela-caixa { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto }
table { width: 100%; border-collapse: collapse }
th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line) }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums }
tbody tr { cursor: pointer }
tbody tr:hover, tbody tr:focus { background: var(--bg); outline: none }
td small { display: block; color: var(--muted) }
.vazio { padding: 18px; color: var(--muted); margin: 0 }

.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600 }
.selo.ativa { color: var(--ok); background: var(--ok-bg) }
.selo.teste, .selo.isenta { color: var(--info); background: var(--info-bg) }
.selo.carencia { color: var(--warn); background: var(--warn-bg) }
.selo.suspensa { color: var(--alert); background: var(--alert-bg) }
.selo.cancelada { color: var(--off); background: var(--off-bg) }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px }
.planos form { display: grid; gap: 10px }
.modulos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 0 }
.opcao { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink) }
.opcao input { width: auto; margin: 0 }

.janela { border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; width: min(640px, calc(100% - 32px)); background: var(--card); color: var(--ink) }
.janela.larga { width: min(860px, calc(100% - 32px)) }
.janela::backdrop { background: rgba(20, 22, 19, .45) }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.grade .largo { grid-column: 1 / -1 }
.modos { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 0 }
.modos legend { font-size: 12px; color: var(--muted); padding: 0 4px }
.acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px }
.chave { background: var(--bg); border: 1px dashed var(--bronze); border-radius: 6px; padding: 12px; word-break: break-all; font-size: 15px }

.ficha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.ficha-resumo { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 14px; font-size: 13px }
.ficha-resumo span { color: var(--muted) }
.acao { margin-top: 6px }
.acao h3 { margin-top: 0 }
.historico { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line) }
.historico li { padding: 6px 0 10px 14px; position: relative }
.historico li::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze) }
.historico small, .linhas small { color: var(--muted) }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.linhas { list-style: none; padding: 0; margin: 0 }
.linhas li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px }

@media (max-width: 640px) {
  .topo { padding: 12px 16px }
  .grade, .duas { grid-template-columns: 1fr }
  th:nth-child(5), td:nth-child(5) { display: none }
}

/* primeiro acesso */
.pilha { display: grid; gap: 12px }
.qr { display: block; width: 220px; height: 220px; margin: 4px auto 10px; border-radius: 8px; background: #fff; padding: 6px; image-rendering: pixelated }