:root { --azul: #2E65F5; --azul-escuro: #1f4cc4; --azul-claro: #e8efff; --texto: #1a2233; --suave: #5b6578; --fundo: #f4f6fb;
        --borda: #dbe1ee; --erro: #c0392b; --erro-fundo: #fdecea; --ok: #1e7b46; --ok-fundo: #e6f6ec; --alerta: #8a5a00; --alerta-fundo: #fff4d6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; }
header.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 20px; background: var(--azul); color: #fff; }
header.topo strong { font-size: 1.05rem; }
header.topo nav { display: flex; gap: 4px; flex: 1; }
header.topo nav a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 6px; opacity: .9; }
header.topo nav a:hover, header.topo nav a[aria-current] { background: rgba(255, 255, 255, .18); opacity: 1; }
header.topo #cabecalho { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
header.topo #cabecalho button { background: rgba(255, 255, 255, .18); border: 0; color: #fff; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
h1 { margin: 0 0 14px; font-size: 1.4rem; color: var(--azul); }
h2 { margin: 24px 0 10px; font-size: 1.1rem; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 20px; }
.grade dt { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.grade dd { margin: 2px 0 10px; font-weight: 600; word-break: break-word; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filtros label, .campo label { display: block; font-size: .78rem; color: var(--suave); margin-bottom: 3px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid #c8cfdd; border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
textarea { width: 100%; min-height: 90px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.campo { margin-bottom: 12px; }
.campo input[type=text], .campo input[type=password], .campo input[type=date], .campo input[type=number], .campo input:not([type]), .campo select { width: 100%; max-width: 420px; }
.campo .dica { font-size: .8rem; color: var(--suave); margin-top: 3px; }
button.primario, a.botao { background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
button.primario:hover, a.botao:hover { background: var(--azul-escuro); }
button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer; }
button.perigo { background: var(--erro); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; }
button.pequeno { padding: 4px 10px; font-size: .85rem; }
button:disabled { opacity: .55; cursor: default; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { background: var(--azul-claro); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
.tabela-rolagem { overflow-x: auto; }
.vazio { padding: 24px; text-align: center; color: var(--suave); background: #fff; border: 1px dashed var(--borda); border-radius: 10px; }
.selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--azul-claro); color: var(--azul-escuro); white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; }
.aviso[hidden] { display: none; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--borda); margin-bottom: 16px; }
.abas button { background: none; border: 0; padding: 10px 16px; font: inherit; cursor: pointer; color: var(--suave); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.abas button[aria-selected=true] { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.abas .contagem { margin-left: 6px; }
.paginacao { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: var(--suave); }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { padding: 8px 0 8px 14px; border-left: 3px solid var(--azul-claro); margin-left: 4px; }
.linha-tempo .quando { font-size: .78rem; color: var(--suave); }
.linha-tempo .detalhe { font-size: .82rem; color: var(--suave); word-break: break-word; }
.link-copiar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-copiar input { flex: 1; min-width: 240px; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.interruptor { border: 2px solid var(--borda); border-radius: 12px; padding: 18px; background: #fff; margin-bottom: 20px; }
.interruptor.ligado { border-color: var(--ok); background: var(--ok-fundo); }
.interruptor.desligado { border-color: var(--erro); background: var(--erro-fundo); }
.interruptor h2 { margin: 0 0 6px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sutil { color: var(--suave); font-size: .85rem; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
@media (max-width: 640px) { main { padding: 12px; } th, td { padding: 7px 8px; } }
.num-tab { font-variant-numeric: tabular-nums; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicador { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.indicador .rotulo { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.indicador .valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.indicador .detalhe { font-size: .82rem; color: var(--suave); margin-top: 2px; }
.progresso { margin: 10px 0 14px; }
.progresso .cabeca { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.progresso .trilho { height: 12px; background: var(--azul-claro); border-radius: 999px; overflow: hidden; }
.progresso .barra { height: 100%; background: var(--azul); border-radius: 999px; }
.progresso .barra.atingida { background: var(--ok); }
.integracao { border-top: 1px solid var(--borda); padding: 12px 0; }
.integracao:first-of-type { border-top: 0; }
.integracao .cabeca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.integracao .cabeca strong { font-size: .95rem; }
.integracao .linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.integracao .linha input { flex: 1; min-width: 200px; max-width: 420px; }
.integracao-extra { margin-top: 4px; }
.integracao-extra > .acoes { margin-bottom: 12px; }
.segredo-novo { border: 2px solid var(--alerta); background: var(--alerta-fundo); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }