:root {
  /* tokens do @baitaos/kit (src/estilo/base.css): canvas, ink, line, brand (stone) e accent (âmbar) */
  color-scheme: light;
  --fundo: #fafaf9; --superficie: #ffffff; --superficie-2: #f5f5f4; --borda: #e7e5e4;
  --texto: #1c1917; --texto-2: #57534e; --acento: #1c1917; --acento-texto: #fafaf9;
  --ok: #047857; --alerta: #b45309; --alerta-fundo: #fef3c7;
  --raio: 10px; --sombra: 0 1px 2px rgb(28 25 23 / .06), 0 8px 24px rgb(28 25 23 / .08);
  --dur: 160ms;
}
* { box-sizing: border-box }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--fundo); color: var(--texto); font: 14px/1.45 "Inter Variable", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased }
[hidden] { display: none !important }
a { color: var(--acento) }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px }
.visual-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }

.topo { height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--borda); flex: none }
.marca { display: flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-size: 16px }
.marca-pena { width: 24px; height: 24px; background: url("../marca/pena.svg") center / contain no-repeat }
.marca-pena.grande { width: 44px; height: 44px; margin-bottom: 4px }
.topo-doc { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0 }
.topo-doc h1 { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.marca { margin-right: auto }
.conta { display: flex; align-items: center; gap: 10px; color: var(--texto-2) }
.conta select { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 5px 8px; font: inherit }
.licencas { color: var(--texto-2); font-size: 12px }

.chip { flex: none; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); transition: color var(--dur), background var(--dur) }
.chip[data-tom="ok"] { color: var(--ok) }
.chip[data-tom="ok"]::before { content: "✓ " }
.chip[data-tom="alerta"] { color: var(--alerta); background: var(--alerta-fundo) }

.faixa-conflito { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--alerta-fundo); border-bottom: 1px solid #fcd34d; color: var(--texto) }
.faixa-conflito p { margin: 0; flex: 1 1 320px }

main { flex: 1; display: flex; flex-direction: column; min-height: 0 }
.painel { width: min(880px, 100% - 32px); margin: 32px auto }
.centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 12vh; max-width: 440px }
.centro h2 { margin: 4px 0 0; font-size: 20px }
.centro p { margin: 0 0 12px; color: var(--texto-2) }
.cabeca-lista { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px }
.cabeca-lista h2 { margin: 0; font-size: 20px }
.cabeca-lista small { color: var(--texto-2) }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }

.botao { appearance: none; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; transition: background var(--dur), border-color var(--dur), transform var(--dur) }
.botao:hover { background: var(--superficie-2); border-color: #d6d3d1 }
.botao:active { transform: translateY(1px) }
.botao.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto) }
.botao.primario:hover { background: #44403c }
.botao.fantasma { border-color: transparent; background: transparent; color: var(--texto-2); padding: 6px 8px }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid transparent; color: var(--texto); text-decoration: none; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur) }
.doc:hover { border-color: var(--borda); background: var(--superficie-2); box-shadow: var(--sombra) }
.doc-icone { width: 28px; height: 34px; flex: none; border-radius: 4px; background: linear-gradient(#f4f4f8, #dcdce6); position: relative }
.doc-icone::after { content: ""; position: absolute; inset: 9px 6px auto; height: 12px; background: repeating-linear-gradient(#9b9bb0 0 2px, transparent 2px 5px) }
.doc-texto { display: flex; flex-direction: column; min-width: 0 }
.doc-texto strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.doc-texto small { color: var(--texto-2) }

.esqueleto li { height: 60px; border-radius: var(--raio); background: linear-gradient(90deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%) 0 0 / 300% 100%; animation: brilho 1.4s linear infinite }
@keyframes brilho { to { background-position: -150% 0 } }

.quadro { flex: 1; min-height: 0; display: flex }
.quadro iframe { border: 0; flex: 1; min-width: 0 }

.aviso { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; background: var(--superficie-2); border: 1px solid var(--borda); box-shadow: var(--sombra); padding: 10px 16px; border-radius: var(--raio); animation: surgir var(--dur) ease-out }
@keyframes surgir { from { opacity: 0; translate: -50% 6px } }

@media (max-width: 600px) {
  .topo { gap: 10px; padding: 0 10px }
  .licencas, .quem { display: none }
  .painel { margin: 20px auto }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}