* { box-sizing: border-box; }
body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: #f4f6f8; color: #222; }
a { color: #1a5276; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Login */
.pagina-login { display: flex; align-items: center; justify-content: center; height: 100vh; background: #1a3c5e; }
.caixa-login { background: #fff; padding: 36px; border-radius: 10px; width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.caixa-login h1 { font-size: 18px; text-align: center; margin: 0 0 4px; color: #1a3c5e; }
.caixa-login .subtitulo { text-align: center; color: #666; font-size: 13px; margin-bottom: 20px; }
.caixa-login label { display: block; margin-top: 12px; font-size: 13px; color: #444; }
.caixa-login input { width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 5px; }
.caixa-login button { width: 100%; margin-top: 20px; padding: 10px; background: #1a5276; color: #fff; border: none; border-radius: 5px; font-size: 15px; cursor: pointer; }
.caixa-login button:hover { background: #154360; }
.erro { background: #fdecea; color: #a94442; padding: 8px; border-radius: 5px; font-size: 13px; }
.sucesso { background: #eafaf1; color: #196f3d; padding: 8px 12px; border-radius: 5px; font-size: 13px; margin-bottom: 12px; }

/* App layout */
.app { display: flex; min-height: 100vh; }
.menu-lateral { width: 240px; background: #1a3c5e; color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.menu-lateral .marca { padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,.15); }
.menu-lateral .marca strong { display: block; font-size: 14px; }
.menu-lateral .marca span { font-size: 12px; opacity: .75; }
.menu-lateral nav { flex: 1; padding: 10px 0; }
.menu-lateral nav a { display: block; padding: 10px 16px; color: #dce6f0; font-size: 14px; }
.menu-lateral nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.menu-lateral nav .grupo-menu-titulo { padding: 14px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.menu-lateral nav a.item-submenu { padding-left: 28px; font-size: 13px; }
.rodape-menu { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.rodape-menu a { color: #f5b7b1; }
.conteudo { flex: 1; padding: 28px 32px; max-width: 1200px; }

h1.titulo-pagina { font-size: 22px; margin: 0 0 20px; color: #1a3c5e; }

/* Cartoes do painel */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.cartao { background: #fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 5px solid #ccc; }
.cartao.verde { border-color: #27ae60; }
.cartao.amarelo { border-color: #f39c12; }
.cartao.vermelho { border-color: #c0392b; }
.cartao h3 { margin: 0 0 6px; font-size: 13px; color: #666; text-transform: uppercase; }
.cartao .numero { font-size: 28px; font-weight: bold; }

/* Tabelas */
table.tabela-dados { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
table.tabela-dados th, table.tabela-dados td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
table.tabela-dados th { background: #eef2f5; font-size: 12px; text-transform: uppercase; color: #555; }
table.tabela-dados tr:hover { background: #f9fbfc; }

.selo { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; color: #fff; }
.selo.verde { background: #27ae60; }
.selo.amarelo { background: #f39c12; }
.selo.vermelho { background: #c0392b; }
.selo.cinza { background: #7f8c8d; }
.selo.azul { background: #2980b9; }

.barra-acoes { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.botao { display: inline-block; padding: 9px 16px; background: #1a5276; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.botao:hover { background: #154360; text-decoration: none; }
.botao.secundario { background: #7f8c8d; }
.botao.perigo { background: #c0392b; }

form.formulario-padrao { background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); max-width: 780px; }
form.formulario-padrao label { display: block; margin-top: 14px; font-size: 13px; color: #444; font-weight: 600; }
form.formulario-padrao input, form.formulario-padrao select, form.formulario-padrao textarea {
    width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; font-family: inherit;
}
form.formulario-padrao .linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
form.formulario-padrao .acoes-form { margin-top: 22px; display: flex; gap: 10px; }

.linha-do-tempo { list-style: none; padding: 0; margin: 0; }
.linha-do-tempo li { padding: 12px 16px; border-left: 3px solid #1a5276; background: #fff; margin-bottom: 8px; border-radius: 0 6px 6px 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.linha-do-tempo .data-evento { font-size: 12px; color: #888; }
.linha-do-tempo .titulo-evento { font-weight: 600; }

.aviso-caixa { background: #fff8e1; border: 1px solid #f1c40f; padding: 12px 16px; border-radius: 6px; font-size: 13px; margin-bottom: 18px; }