* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Arial, sans-serif; color: #1b1f24; background: #f4f6f8; }
header { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 56px; background: #003b71; color: #fff; position: relative; z-index: 10; }
header h1 { font-size: 1.1rem; margin: 0; white-space: nowrap; }
#menu { flex: 1; display: flex; gap: 4px; align-self: stretch; align-items: stretch; }
#user { font-size: .85rem; opacity: .9; white-space: nowrap; }
button, .botao { font: inherit; cursor: pointer; border: 0; border-radius: 4px; text-decoration: none; }
#logout { background: #fff; color: #003b71; padding: 6px 14px; }
.botao { background: #003b71; color: #fff; padding: 8px 16px; display: inline-block; }

/* menu do cabeçalho: uma categoria = um menu suspenso */
.cat { position: relative; display: flex; }
.cat > button { background: none; color: #fff; padding: 0 14px; border-radius: 0; display: flex; align-items: center; gap: 6px; }
.cat > button::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.cat > button:hover, .cat > button[aria-expanded="true"], .cat > button.ativa { background: rgba(255, 255, 255, .15); }
.cat > button.ativa { box-shadow: inset 0 -3px 0 #fff; }
.cat ul { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; margin: 0; padding: 6px; list-style: none; background: #fff; color: #1b1f24; border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.cat.aberta ul { display: block; }
.cat li button { display: block; width: 100%; text-align: left; background: none; color: inherit; padding: 8px 12px; border-radius: 4px; }
.cat li button:hover, .cat li button:focus-visible { background: #e3eefa; }
.cat li button[aria-current="true"] { background: #e3eefa; font-weight: 600; }
.cat li small { display: block; color: #5a6672; font-size: .75rem; margin-top: 2px; }
button:focus-visible, .botao:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cat li button:focus-visible { outline-color: #003b71; }

main { padding: 16px 24px; }
#entrar { max-width: 420px; margin: 64px auto; background: #fff; padding: 24px; border-radius: 8px; }
#erro { color: #b00020; }
#painel iframe { width: 100%; height: calc(100vh - 100px); border: 0; background: #fff; border-radius: 8px; }
@media (max-width: 700px) { #user { display: none; } header { padding: 0 12px; } header h1 { display: none; } }