:root {
    --azul: #1f4e78;
    --azul-claro: #eaf1f8;
    --verde: #1e7e34;
    --verde-claro: #e6f4ea;
    --amarelo: #8a6d00;
    --amarelo-claro: #fff8e1;
    --vermelho: #a33;
    --vermelho-claro: #fdeaea;
    --cinza-borda: #d9d9d9;
    --cinza-texto: #555;
    --fundo: #f5f7f9;
}

* { box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--fundo);
    color: #222;
    margin: 0;
}

.topo {
    background: var(--azul);
    color: #fff;
}
.topo-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.marca {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}
.topo-nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 18px;
    font-size: 0.95em;
}
.topo-nav a:hover { text-decoration: underline; }

.conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 { color: var(--azul); margin-top: 0; }
h2 { color: var(--azul); }

a { color: var(--azul); }

.texto-apoio { color: var(--cinza-texto); font-size: 0.95em; }

.cartao {
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    padding: 20px;
    max-width: 420px;
    margin-bottom: 20px;
}
.cartao.destaque {
    max-width: none;
    border-left: 5px solid var(--azul);
}
.cartao label, form:not(.cartao) label {
    display: block;
    margin: 12px 0 4px;
    font-weight: bold;
    font-size: 0.9em;
}
.cartao input, .cartao select, .filtro-data input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--cinza-borda);
    border-radius: 4px;
    font-size: 1em;
}

.cartao-login {
    max-width: 340px;
    margin: 60px auto;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    padding: 24px;
}
.cartao-login label { display: block; margin: 12px 0 4px; font-weight: bold; }
.cartao-login input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--cinza-borda);
    border-radius: 4px;
}

.botao, button, input[type="submit"] {
    display: inline-block;
    background: var(--azul);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    margin-top: 14px;
}
.botao:hover, button:hover { opacity: 0.9; }
.botao-primario { background: var(--verde); }

.botoes { display: flex; gap: 12px; flex-wrap: wrap; }

.filtro-data {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.filtro-data label { font-weight: bold; }
.filtro-data input { width: auto; }

.alerta {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.alerta-sucesso { background: var(--verde-claro); color: var(--verde); border: 1px solid var(--verde); }
.alerta-erro { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid var(--vermelho); }
.alerta-atencao { background: var(--amarelo-claro); color: var(--amarelo); border: 1px solid var(--amarelo); }

.tabela-scroll { overflow-x: auto; margin-bottom: 20px; }
.tabela {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    font-size: 0.92em;
}
.tabela th, .tabela td {
    border: 1px solid var(--cinza-borda);
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
}
.tabela th {
    background: var(--azul-claro);
    color: var(--azul);
}
.tabela-cadastro td, .tabela-cadastro th { white-space: normal; }

.linha-destaque { background: var(--azul-claro); }
.linha-pendente { background: var(--amarelo-claro); }
.linha-vazia { background: #fafafa; color: #999; font-style: italic; }

.selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.82em;
    font-weight: bold;
}
.selo-ok { background: var(--verde-claro); color: var(--verde); }
.selo-atencao { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-pendente { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-estadual { background: var(--azul-claro); color: var(--azul); }
.selo-presidente { background: #f0e6f6; color: #6a1b9a; }

.pendente-texto { color: var(--vermelho); font-weight: bold; }

.lista-materiais { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.linha-material { display: flex; gap: 6px; align-items: center; }
.linha-material input { flex: 1; padding: 6px; border: 1px solid var(--cinza-borda); border-radius: 4px; min-width: 160px; }
.btn-remover-material {
    background: var(--vermelho-claro);
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
}
.btn-add-material {
    background: #fff;
    color: var(--azul);
    border: 1px dashed var(--azul);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    margin: 0;
    cursor: pointer;
}

.rodape {
    text-align: center;
    color: #999;
    font-size: 0.85em;
    padding: 30px 20px;
}

code {
    background: #eee;
    padding: 1px 5px;
    border-radius: 3px;
}