:root {
    --verde: #0d6e4f;
    --verde-escuro: #094f38;
    --cinza-fundo: #f4f6f5;
    --cinza-borda: #dfe4e2;
    --texto-secundario: #6b7570;
    --vermelho: #b3261e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--cinza-fundo);
    color: #1c1f1e;
}

/* --- Login --- */
.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.cartao-login {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 340px;
}
.logo-login {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 130px;
    margin: 0 auto 0.5rem;
}
.subtitulo {
    margin: 0 0 1.5rem;
    color: var(--texto-secundario);
    font-size: 0.9rem;
    text-align: center;
}
.cartao-login form { display: flex; flex-direction: column; gap: 0.4rem; }
.cartao-login label { font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; }
.cartao-login input {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    font-size: 1rem;
}
.cartao-login button {
    margin-top: 1.2rem;
    padding: 0.7rem;
    border: none;
    border-radius: 8px;
    background: var(--verde);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.cartao-login button:hover { background: var(--verde-escuro); }
.mensagem-erro { color: var(--vermelho); font-size: 0.9rem; }

/* --- Menu --- */
.menu-topo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--verde-escuro);
    color: #fff;
    padding: 0.9rem 1.5rem;
}
.menu-marca { font-weight: 700; margin-right: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.menu-marca-icone { height: 26px; width: auto; display: block; }
.menu-topo a {
    color: #d8ede4;
    text-decoration: none;
    font-size: 0.95rem;
}
.menu-topo a.ativo, .menu-topo a:hover { color: #fff; font-weight: 600; }
.menu-topo .menu-sair { margin-left: auto; }

/* --- Conteúdo --- */
.conteudo { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.conteudo h1 { color: var(--verde-escuro); margin-bottom: 0.3rem; }
.texto-secundario { color: var(--texto-secundario); font-size: 0.9rem; }

/* --- Cartões de resumo (dashboard) --- */
.cartoes-resumo { display: flex; gap: 1rem; margin: 1.5rem 0; }
.cartao-resumo {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    min-width: 160px;
}
.cartao-resumo--verde { background: var(--verde); color: #fff; }
.cartao-resumo .numero { font-size: 2.2rem; font-weight: 700; }
.cartao-resumo .etiqueta { font-size: 0.85rem; }

/* --- Painéis / tabelas --- */
.painel { margin-bottom: 2rem; }
.tabela { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--cinza-borda); font-size: 0.92rem; }
.tabela th { background: #eef2f0; color: var(--verde-escuro); font-size: 0.85rem; }

.etiqueta-tipo { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.etiqueta-tipo--entrada { background: #e2f3ea; color: var(--verde-escuro); }
.etiqueta-tipo--saida { background: #fbe9e7; color: var(--vermelho); }

/* --- Filtros --- */
.formulario-filtros {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.2rem;
}
.campo-filtro { display: flex; flex-direction: column; gap: 0.3rem; }
.campo-filtro label { font-size: 0.8rem; font-weight: 600; color: var(--texto-secundario); }
.campo-filtro select, .campo-filtro input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
}
.formulario-filtros button {
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: var(--verde);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    height: fit-content;
}
.formulario-filtros button:hover { background: var(--verde-escuro); }
.botao-exportar {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--verde);
    border-radius: 6px;
    color: var(--verde-escuro);
    text-decoration: none;
    font-weight: 600;
    height: fit-content;
}
.botao-exportar:hover { background: var(--verde); color: #fff; }

/* --- Mensagens flash --- */
.mensagem-sucesso {
    background: #e2f3ea;
    color: var(--verde-escuro);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* --- Registo manual (dashboard) --- */
.painel--destaque {
    background: #fff;
    padding: 1.2rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.formulario-manual {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.8rem;
}
.formulario-manual select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    min-width: 220px;
}
.formulario-manual button {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}
.botao-entrada { background: var(--verde); }
.botao-entrada:hover { background: var(--verde-escuro); }
.botao-saida { background: var(--vermelho); }
.botao-saida:hover { background: #8f1e18; }

/* --- Cabeçalho de página com ação --- */
.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.botao-principal {
    background: var(--verde);
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}
.botao-principal:hover { background: var(--verde-escuro); }
.botao-secundario {
    color: var(--verde-escuro);
    text-decoration: none;
    padding: 0.6rem 1rem;
    font-weight: 600;
}

/* --- Estado (ativa/inativa) --- */
.etiqueta-estado { padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.etiqueta-estado--ativo { background: #e2f3ea; color: var(--verde-escuro); }
.etiqueta-estado--inativo { background: #efefef; color: var(--texto-secundario); }

.celula-acoes { display: flex; align-items: center; gap: 0.8rem; }
.formulario-inline { display: inline; margin: 0; }
.botao-ligacao {
    background: none;
    border: none;
    padding: 0;
    color: var(--vermelho);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}

/* --- Formulário de criança --- */
.conteudo--estreito { max-width: 560px; }
.formulario-crianca { display: flex; flex-direction: column; gap: 0.4rem; background: #fff; padding: 1.2rem 1.5rem; border-radius: 10px; }
.formulario-crianca label { font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; }
.formulario-crianca input[type="text"] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}
.formulario-crianca select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}
.formulario-crianca textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
}
.campo-checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 500 !important; }
.acoes-formulario { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.acoes-formulario button {
    padding: 0.6rem 1.3rem;
    border: none;
    border-radius: 6px;
    background: var(--verde);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.acoes-formulario button:hover { background: var(--verde-escuro); }

/* --- Tags recentes (crianca_editar.php) --- */
.lista-tags-recentes { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lista-tags-recentes li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.lista-tags-recentes code { background: #eef2f0; padding: 0.15rem 0.5rem; border-radius: 4px; }
.botao-usar-tag {
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--verde);
    background: #fff;
    color: var(--verde-escuro);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}
.botao-usar-tag:hover { background: var(--verde); color: #fff; }