:root {
    --primaria: #2b6cb0;
    --primaria-escura: #2c5282;
    --fundo: #f7fafc;
    --secundaria: #edf2f7;
    --texto: #2d3748;
    --texto-suave: #718096;
    --borda: #e2e8f0;
    --success: #48bb78;
    --danger: #f56565;
    --warning: #ed8936;
    --info: #4299e1;
    --neutral: #a0aec0;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

/* ------------------------------------------------ Topo e menu */

.topo {
    background: var(--primaria);
    color: #fff;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem; }

.menu-botao {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    border-radius: 4px;
    font-size: 1.1rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

.nav { display: none; width: 100%; flex-direction: column; gap: 0.25rem; }
.menu-aberto .nav { display: flex; }
.nav a, .nav button {
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 0.75rem;
    border-radius: 4px;
    font: inherit;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.nav a:hover, .nav button:hover, .nav a.ativo { background: rgba(255,255,255,0.15); }
.nav form { margin: 0; }
.nav .usuario-logado { font-size: 0.85rem; opacity: 0.8; padding: 0.6rem 0.75rem; }

@media (min-width: 900px) {
    .topo { padding: 1rem 2rem; flex-wrap: nowrap; }
    .menu-botao { display: none; }
    .nav { display: flex; flex-direction: row; width: auto; align-items: center; }
    .nav a, .nav button { width: auto; }
}

/* ------------------------------------------------ Estrutura */

.container {
    max-width: 1200px;
    width: 100%;
    margin: 1.5rem auto;
    padding: 0 1rem;
    flex: 1;
}

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.cabecalho-pagina h1 { margin: 0; font-size: 1.5rem; }
.cabecalho-pagina p { margin: 0.25rem 0 0; color: var(--texto-suave); }

.caixa {
    background: #fff;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}
.caixa h2 { margin-top: 0; font-size: 1.15rem; }

footer {
    text-align: center;
    padding: 1.25rem;
    background: var(--secundaria);
    color: var(--texto-suave);
    font-size: 0.85rem;
}

/* ------------------------------------------------ Avisos */

.aviso {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    border-left: 4px solid;
}
.aviso.success { background: #f0fff4; border-color: var(--success); }
.aviso.danger { background: #fff5f5; border-color: var(--danger); }
.aviso.warning, .aviso.message { background: #fffaf0; border-color: var(--warning); }

/* ------------------------------------------------ Indicadores */

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.card {
    background: #fff;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 5px solid var(--primaria);
}
.card.danger { border-left-color: var(--danger); }
.card.warning { border-left-color: var(--warning); }
.card.success { border-left-color: var(--success); }
.card h3 {
    margin: 0 0 0.5rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    text-transform: uppercase;
}
.card .numero { font-size: 2rem; font-weight: bold; }

/* ------------------------------------------------ Formulários */

.filtros, .grade-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
}
.campo label, .rotulo {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
}
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
    padding: 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 4px;
    font: inherit;
    font-size: 1rem;
    width: 100%;
    background: #fff;
    color: var(--texto);
}
textarea { min-height: 4rem; resize: vertical; }
.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; min-height: 42px; }
.check input { width: 1.2rem; height: 1.2rem; }

.btn {
    display: inline-block;
    background: var(--primaria);
    color: #fff;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    min-height: 42px;
    transition: background-color 0.2s;
}
.btn:hover { background: var(--primaria-escura); }
.btn.secundario { background: var(--secundaria); color: var(--texto); }
.btn.secundario:hover { background: var(--borda); }
.btn.perigo { background: var(--danger); }
.btn.perigo:hover { background: #c53030; }
.btn.grande { font-size: 1.1rem; padding: 0.9rem 1.75rem; }
.btn.pequeno { min-height: 34px; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* ------------------------------------------------ Tabelas */

.tabela {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { background: var(--secundaria); color: #4a5568; font-weight: 600; font-size: 0.9rem; }
tr:hover td { background: var(--fundo); }
td.vazio { text-align: center; color: var(--texto-suave); padding: 2rem; }
.suave { color: var(--texto-suave); font-size: 0.9rem; }

/* No celular, cada linha da tabela vira um cartão. */
@media (max-width: 700px) {
    .tabela.responsiva thead { display: none; }
    .tabela.responsiva tr { display: block; border-bottom: 1px solid var(--borda); padding: 0.5rem 0; }
    .tabela.responsiva td { display: flex; justify-content: space-between; gap: 1rem; border: none; padding: 0.35rem 1rem; text-align: right; }
    .tabela.responsiva td::before { content: attr(data-rotulo); font-weight: 600; color: #4a5568; text-align: left; }
    .tabela.responsiva td.vazio { display: block; text-align: center; }
    .tabela.responsiva td.vazio::before { content: none; }
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge.danger { background: #fed7d7; color: #9b2c2c; }
.badge.warning { background: #feebc8; color: #9c4221; }
.badge.success { background: #c6f6d5; color: #22543d; }
.badge.info { background: #bee3f8; color: #2a4365; }
.badge.neutral { background: var(--secundaria); color: #4a5568; }

/* ------------------------------------------------ Login */

.login {
    max-width: 380px;
    margin: 3rem auto;
}
.login .campo { margin-bottom: 1rem; }
.login .btn { width: 100%; }

/* ------------------------------------------------ Verificação */

.lista-pessoas { display: flex; flex-direction: column; gap: 0.5rem; }
.linha-pessoa {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    padding: 0.75rem 1rem;
    display: grid;
    gap: 0.6rem;
}
.linha-pessoa .identificacao strong { display: block; font-size: 1.05rem; }
.linha-pessoa .identificacao small { color: var(--texto-suave); }
.opcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    border: 2px solid var(--borda);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    user-select: none;
    min-width: 5.5rem;
    text-align: center;
}
.opcao input:focus-visible + span { outline: 3px solid var(--info); outline-offset: 2px; }
.opcao.success input:checked + span { background: var(--success); border-color: var(--success); color: #fff; }
.opcao.danger input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; }
.opcao.warning input:checked + span { background: var(--warning); border-color: var(--warning); color: #fff; }
.opcao.info input:checked + span { background: var(--info); border-color: var(--info); color: #fff; }
.opcao.neutral input:checked + span { background: #718096; border-color: #718096; color: #fff; }

/* Observação só aparece quando a pessoa não está como presente. */
.linha-pessoa:has(input[data-tipo="presente"]:checked) .obs { display: none; }

@media (min-width: 900px) {
    .linha-pessoa { grid-template-columns: 240px 1fr 280px; align-items: center; }
    .linha-pessoa:has(input[data-tipo="presente"]:checked) .obs { display: block; visibility: hidden; }
}

.barra-salvar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 8px rgba(0,0,0,0.06);
    padding: 0.75rem 1rem;
    margin: 1.5rem -1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.contagem { display: flex; gap: 1rem; flex-wrap: wrap; font-weight: 600; }

/* ------------------------------------------------ Configurações */

.linha-config {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--borda);
}
.linha-config input[type=text], .linha-config select { flex: 1; min-width: 120px; width: auto; }
.linha-config input[type=number] { width: 5.5rem; }
.linha-config .check { min-height: auto; }