/* plat — tema único (painel de instrumento: chrome escuro, texto claro). Uma folha para todas as telas.
   As 15 primeiras regras são as do turno T1 (página inicial) e não mudam; o resto é a base das telas (T2). */
:root { --fundo: #14171c; --painel: #1d2129; --borda: #2c323d; --texto: #e6e9ee; --fraco: #9aa3b2; --ok: #3fb950; --falha: #f85149; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
.painel { max-width: 720px; margin: 3rem auto; padding: 0 1rem; }
header h1 { margin: 0; font-size: 2rem; letter-spacing: .04em; }
.aviso { margin: .25rem 0 1.5rem; color: var(--fraco); text-transform: lowercase; }
section { background: var(--painel); border: 1px solid var(--borda); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
dt { color: var(--fraco); }
dd { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; }
h2 { margin: 0 0 .5rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.estado { font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--borda); color: var(--fraco); }
.estado.ok { color: var(--ok); border-color: var(--ok); }
.estado.falha { color: var(--falha); border-color: var(--falha); }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--texto); }

/* ---------- tokens do painel de instrumento (T2) ---------- */
:root {
  --fundo-2: #0f1216; --painel-2: #232935; --borda-forte: #3a4252;
  --acento: #4c9be8; --acento-texto: #0b1a2b; --atencao: #d29922; --info: #58a6ff;
  --foco: #8ec5ff; --sombra: 0 12px 40px rgba(0, 0, 0, .5);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 6px; --lateral-largura: 232px;
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;
}
html { color-scheme: dark; }
body.tela { font-family: var(--sans); }
a { color: var(--info); }
a:hover { color: var(--foco); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -999px; top: var(--e2); z-index: 100; background: var(--acento); color: var(--acento-texto); padding: var(--e2) var(--e4); border-radius: var(--raio); }
.pular:focus { left: var(--e2); }

/* ---------- layout: barra lateral + área principal ---------- */
.app { display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); min-height: 100vh; }
body:not(.com-lateral) .app { grid-template-columns: minmax(0, 1fr); }
body:not(.com-lateral) .lateral { display: none; }
.lateral { background: var(--fundo-2); border-right: 1px solid var(--borda); display: flex; flex-direction: column; padding: var(--e4) 0; position: sticky; top: 0; height: 100vh; }
.lateral .marca { padding: 0 var(--e4) var(--e4); border-bottom: 1px solid var(--borda); }
.lateral .marca strong { font-size: 1.25rem; letter-spacing: .04em; display: block; }
.lateral .marca span { color: var(--fraco); font-size: .8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral nav { flex: 1; padding: var(--e2) 0; }
.lateral nav ul { list-style: none; margin: 0; padding: 0; }
.lateral nav a { display: block; padding: var(--e2) var(--e4); color: var(--texto); text-decoration: none; border-left: 3px solid transparent; }
.lateral nav a:hover { background: var(--painel); }
.lateral nav a[aria-current="page"] { border-left-color: var(--acento); background: var(--painel); font-weight: 600; }
.lateral .pessoa { padding: var(--e4); border-top: 1px solid var(--borda); display: grid; gap: var(--e2); }
.lateral .pessoa a { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .pessoa small { color: var(--fraco); display: block; }
.principal { padding: var(--e5) var(--e6); max-width: 1280px; width: 100%; }
.principal > h1 { margin: 0 0 var(--e4); font-size: 1.5rem; letter-spacing: .02em; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.principal > h1 .contagem { font-size: .9rem; color: var(--fraco); font-weight: 400; }
.cabecalho-tela { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.cartao > h2 { font-size: 1.05rem; margin-bottom: var(--e3); }
.cartao > h2 .estado { margin-left: auto; }
.linha-ferramentas { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.linha-ferramentas .direita { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.grade-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e3); }
.grade-atalhos a { display: block; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e4); color: var(--texto); text-decoration: none; }
.grade-atalhos a:hover { border-color: var(--acento); }
.grade-atalhos a small { display: block; color: var(--fraco); }
.rodape-tela { color: var(--fraco); font-size: .85rem; margin-top: var(--e4); }
@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--borda); }
  .lateral nav ul { display: flex; flex-wrap: wrap; }
  .lateral nav a { border-left: 0; border-bottom: 3px solid transparent; }
  .lateral nav a[aria-current="page"] { border-bottom-color: var(--acento); }
  .principal { padding: var(--e4); }
}

/* ---------- botões ---------- */
.botao, button { font: inherit; color: var(--texto); background: var(--painel-2); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: var(--e2) var(--e4); cursor: pointer; line-height: 1.3; }
.botao:hover, button:hover { border-color: var(--acento); }
.botao[disabled], button[disabled] { opacity: .5; cursor: not-allowed; }
.botao.primario, button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; }
.botao.perigo, button.perigo { color: var(--falha); border-color: var(--falha); background: transparent; }
.botao.perigo:hover, button.perigo:hover { background: rgba(248, 81, 73, .12); }
.botao.pequeno, button.pequeno { padding: .15rem var(--e2); font-size: .85rem; }
.botao.texto, button.texto { background: transparent; border-color: transparent; color: var(--info); padding-left: var(--e1); padding-right: var(--e1); }
.botoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.acoes-linha { display: flex; gap: var(--e1); flex-wrap: wrap; }

/* ---------- formulário ---------- */
.form { display: grid; gap: var(--e3); }
.form .campo { display: grid; gap: var(--e1); }
.form .campo > label, .campo-rotulo { color: var(--fraco); font-size: .85rem; }
.form .campo .obrigatorio { color: var(--atencao); }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea, .busca input, .filtros input, .filtros select {
  font: inherit; color: var(--texto); background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: var(--e2) var(--e3); width: 100%; min-width: 0;
}
.form input:focus, .form select:focus, .form textarea:focus, .busca input:focus, .filtros input:focus, .filtros select:focus { border-color: var(--acento); outline: 2px solid var(--foco); outline-offset: 1px; }
.form input[aria-invalid="true"], .form select[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--falha); }
.form textarea { min-height: 5rem; font-family: var(--sans); }
.form .ajuda { color: var(--fraco); font-size: .8rem; }
.form .erro-campo { color: var(--falha); font-size: .8rem; }
.form .caixa { display: flex; align-items: center; gap: var(--e2); }
.form .caixa input { width: 1rem; height: 1rem; accent-color: var(--acento); }
.form .caixas { display: grid; gap: var(--e1); }
.form .caixas .grupo-caixas { color: var(--fraco); font-size: .8rem; margin-top: var(--e2); text-transform: uppercase; letter-spacing: .04em; }
.form .info { color: var(--texto); }
.form .botoes { margin-top: var(--e2); }
.form .linha-senha { display: flex; gap: var(--e2); }
.form .linha-senha input { flex: 1; }
.form.compacto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.form.compacto .botoes { grid-column: 1 / -1; }
.filtros { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: end; margin-bottom: var(--e3); }
.filtros label { display: grid; gap: var(--e1); color: var(--fraco); font-size: .85rem; min-width: 140px; }
.filtros input, .filtros select { color: var(--texto); }

/* ---------- tabela ---------- */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: var(--e2) var(--e3); text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--fraco); font-weight: 600; background: var(--fundo-2); position: sticky; top: 0; white-space: nowrap; }
.tabela tbody tr:hover { background: var(--painel-2); }
.tabela tbody tr[aria-selected="true"] { background: rgba(76, 155, 232, .12); }
.tabela td.mono, .mono { font-family: var(--mono); font-size: .85rem; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .vazio { color: var(--fraco); text-align: center; padding: var(--e5); }
.tabela input[type="checkbox"] { accent-color: var(--acento); width: 1rem; height: 1rem; }
.tabela .marcador { margin-right: var(--e1); }
.marcador { display: inline-block; font-size: .75rem; padding: 0 var(--e2); border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--fraco); white-space: nowrap; }
.marcador.ok { color: var(--ok); border-color: var(--ok); }
.marcador.falha { color: var(--falha); border-color: var(--falha); }
.marcador.atencao { color: var(--atencao); border-color: var(--atencao); }
.marcador.info { color: var(--info); border-color: var(--info); }
.paginacao { display: flex; align-items: center; gap: var(--e3); justify-content: flex-end; padding: var(--e3) 0; color: var(--fraco); font-size: .85rem; }
.busca { display: flex; align-items: center; min-width: 220px; }
.busca input { padding-left: var(--e3); }

/* ---------- aviso ---------- */
plat-aviso { display: block; border: 1px solid var(--borda-forte); border-left-width: 4px; border-radius: var(--raio); padding: var(--e2) var(--e3); margin: var(--e2) 0; background: var(--painel-2); white-space: pre-line; }
plat-aviso[hidden] { display: none; }
plat-aviso[data-tipo="erro"] { border-color: var(--falha); }
plat-aviso[data-tipo="ok"] { border-color: var(--ok); }
plat-aviso[data-tipo="atencao"] { border-color: var(--atencao); }
plat-aviso[data-tipo="info"] { border-color: var(--info); }
.aviso-pendencia { border: 1px solid var(--atencao); border-radius: var(--raio); padding: var(--e3) var(--e4); margin-bottom: var(--e4); background: rgba(210, 153, 34, .1); }
.aviso-pendencia strong { color: var(--atencao); }

/* ---------- diálogo e painel lateral ---------- */
dialog.dialogo { background: var(--painel); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 0; width: min(560px, 92vw); box-shadow: var(--sombra); }
dialog.dialogo::backdrop { background: rgba(0, 0, 0, .55); }
dialog.dialogo-lateral { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100vh; max-height: 100vh; width: min(520px, 96vw); border-radius: 0; border-width: 0 0 0 1px; display: flex; flex-direction: column; }
dialog.dialogo:not([open]) { display: none; }
.dialogo-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda); }
.dialogo-cabecalho h2 { margin: 0; font-size: 1.05rem; }
.dialogo-corpo { padding: var(--e4); overflow: auto; flex: 1; }
.dialogo-botoes { display: flex; gap: var(--e2); justify-content: flex-end; padding: var(--e3) var(--e4); border-top: 1px solid var(--borda); }
.dialogo-botoes:empty { display: none; }
.fechar-x { background: transparent; border-color: transparent; font-size: 1.2rem; line-height: 1; padding: var(--e1) var(--e2); }

/* ---------- abas ---------- */
.abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e4); }
.abas [role="tab"] { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--fraco); padding: var(--e2) var(--e4); }
.abas [role="tab"][aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
[role="tabpanel"][hidden] { display: none; }

/* ---------- código, segredo, QR ---------- */
.codigo { font-family: var(--mono); background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: var(--e2) var(--e3); word-break: break-all; display: block; user-select: all; }
.codigo.grande { font-size: 1.1rem; letter-spacing: .04em; }
.lista-codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e2); list-style: none; padding: 0; margin: var(--e3) 0; }
.lista-codigos li { font-family: var(--mono); background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: var(--e2); text-align: center; }
.svg-qr { background: #fff; padding: var(--e3); border-radius: var(--raio); width: 220px; height: 220px; display: inline-block; }
.svg-qr svg { width: 100%; height: 100%; display: block; }
.par-qr { display: flex; gap: var(--e5); flex-wrap: wrap; align-items: flex-start; }
.par-qr > div { flex: 1; min-width: 240px; display: grid; gap: var(--e2); }
.privilegios-lista { columns: 2; column-gap: var(--e5); list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.privilegios-lista li { break-inside: avoid; padding: .1rem 0; }
.privilegios-lista li.sem { color: var(--fraco); }
details summary { cursor: pointer; color: var(--info); }
.json-dobravel { font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; max-width: 420px; }

/* ---------- tela de login ---------- */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); }
.entrar .cartao { width: min(420px, 100%); padding: var(--e5) var(--e6); }
.entrar .marca { margin-bottom: var(--e5); }
.entrar .marca strong { font-size: 1.6rem; letter-spacing: .04em; display: block; }
.entrar .marca span { color: var(--fraco); text-transform: lowercase; }
.entrar .inquilino-nome { font-size: 1.05rem; margin-bottom: var(--e4); }
.entrar .inquilino-nome span { color: var(--fraco); }
.entrar .provedores:empty { display: none; }
.entrar .provedores { display: grid; gap: var(--e2); margin-top: var(--e4); }
.entrar .contador { color: var(--fraco); font-size: .85rem; }
.entrar .rodape { color: var(--fraco); font-size: .8rem; margin-top: var(--e4); }
.entrar .aviso-beta { color: var(--fraco); font-size: .8rem; text-transform: lowercase; }

/* ---------- utilidades ---------- */
.fraco { color: var(--fraco); }
.oculto { display: none !important; }
.espaco { margin-top: var(--e4); }
.direita { text-align: right; }
.resultado-lote { margin-top: var(--e2); }
.sem-permissao { max-width: 560px; }