:root {
  --azul: #1f3a8a; --azul-claro: #e8eefc; --texto: #1f2937; --cinza: #6b7280;
  --borda: #e5e7eb; --fundo: #f5f7fb; --vermelho: #dc2626; --verde: #15803d; --amarelo: #f59e0b;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 8px; padding: 10px 16px; background: var(--azul); color: #fff; font-weight: 600; }
button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--borda); }
button:disabled { opacity: .6; cursor: default; }
input, select { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
label { display: block; font-size: 14px; color: var(--cinza); margin: 12px 0 4px; }
.erro { color: var(--vermelho); font-size: 14px; min-height: 20px; margin-top: 8px; }
.ok { color: var(--verde); }

/* Login e convite */
.caixa-login { max-width: 380px; margin: 10vh auto; background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 28px; }
.caixa-login h1 { margin: 0 0 4px; font-size: 24px; color: var(--azul); }
.caixa-login p { margin: 0 0 8px; color: var(--cinza); }
.caixa-login button { width: 100%; margin-top: 18px; }

/* Aplicativo */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.menu { background: #fff; border-right: 1px solid var(--borda); padding: 16px 10px; }
.menu .marca { font-weight: 800; font-size: 20px; color: var(--azul); padding: 4px 10px 16px; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.menu a.ativo, .menu a:hover { background: var(--azul-claro); color: var(--azul); }
.menu .rodape { margin-top: 24px; padding: 10px 12px; font-size: 13px; color: var(--cinza); border-top: 1px solid var(--borda); }
.conteudo { padding: 20px 28px; }

/* Alertas: canto superior, bem chamativo */
.alertas { position: sticky; top: 0; z-index: 10; display: grid; gap: 8px; margin-bottom: 18px; }
.alerta { display: flex; gap: 12px; align-items: center; background: #fff4e5; border: 2px solid var(--amarelo); border-left-width: 8px; border-radius: 10px; padding: 12px 14px; animation: pulsar 2s ease-in-out 3; }
.alerta.urgente { background: #fdecec; border-color: var(--vermelho); }
.alerta .titulo { font-weight: 700; }
.alerta .descricao { font-size: 14px; color: var(--cinza); }
.alerta button { margin-left: auto; padding: 8px 12px; }
@keyframes pulsar { 50% { transform: scale(1.01); } }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.cartao h3 { margin: 0 0 6px; font-size: 14px; color: var(--cinza); font-weight: 600; }
.cartao .valor { font-size: 22px; font-weight: 800; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); font-size: 14px; }
th { background: #f9fafb; color: var(--cinza); font-weight: 600; }
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--azul-claro); color: var(--azul); }
.etiqueta.inativo { background: #f3f4f6; color: var(--cinza); }
.linha-form { display: grid; grid-template-columns: 2fr 1fr 1.5fr auto; gap: 10px; align-items: end; margin: 12px 0 20px; }
.link-convite { word-break: break-all; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px; font-size: 14px; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .menu { display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
  .menu .marca, .menu .rodape { display: none; }
  .conteudo { padding: 14px; }
  .linha-form { grid-template-columns: 1fr; }
}