/* ==========================================================
   Estimular Fisioterapia — estilos base
   Paleta reaproveitada de gui_modals.py (identidade já existente)
   ========================================================== */

:root {
    --cor-primaria: #53BFC3;
    --cor-primaria-escura: #3B898C;
    --cor-secundaria: #7DC2A5;
    --cor-secundaria-escura: #5A8B76;
    --cor-fundo: #F8F4F0;
    --cor-texto: #826245;
    --cor-texto-secundario: #8C7A68;
    --cor-branco: #FFFFFF;
    --cor-borda: #E8DFD5;
    --cor-erro: #C0564B;

    --fonte-titulo: "Baloo 2", sans-serif;
    --fonte-corpo: "Nunito Sans", sans-serif;

    --raio: 16px;
    --raio-pequeno: 10px;
    --sombra: 0 4px 16px rgba(130, 98, 69, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--cor-primaria-escura);
    margin-top: 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }

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

/* ---------- Cabeçalho + navegação ---------- */

.cabecalho {
    background: var(--cor-primaria);
    padding: 18px 32px;
}

.cabecalho .marca {
    font-family: var(--fonte-titulo);
    color: var(--cor-branco);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-pills a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--cor-branco);
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.15s ease;
}

.nav-pills a:hover {
    background: rgba(255, 255, 255, 0.3);
}

.nav-pills a.ativo {
    background: var(--cor-branco);
    color: var(--cor-primaria-escura);
}

/* ---------- Conteúdo / cartão principal ---------- */

.conteudo {
    max-width: 760px;
    margin: 36px auto;
    padding: 0 20px;
}

.cartao {
    background: var(--cor-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px;
}

.subtitulo {
    color: var(--cor-texto-secundario);
    margin-top: -8px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

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

.campo {
    margin-bottom: 18px;
}

.campo label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: var(--cor-texto);
}

.campo input,
.campo select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    font-family: var(--fonte-corpo);
    font-size: 0.95rem;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    transition: border-color 0.15s ease;
}

.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background: var(--cor-branco);
}

.linha-dois {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .linha-dois { grid-template-columns: 1fr; }
}

/* ---------- Botões ---------- */

.botao {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: var(--raio-pequeno);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--cor-branco);
    background: var(--cor-primaria);
    transition: background 0.15s ease, transform 0.1s ease;
}

.botao:hover { background: var(--cor-primaria-escura); }
.botao:active { transform: scale(0.98); }

.botao-secundario { background: var(--cor-secundaria); }
.botao-secundario:hover { background: var(--cor-secundaria-escura); }

/* ---------- Tabela (Histórico) ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th {
    text-align: left;
    font-family: var(--fonte-titulo);
    color: var(--cor-primaria-escura);
    padding: 10px 12px;
    border-bottom: 2px solid var(--cor-borda);
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cor-borda);
}

tr:hover td { background: var(--cor-fundo); }

.vazio {
    color: var(--cor-texto-secundario);
    font-style: italic;
}

/* ---------- Sessões (Recibo) ---------- */

.sessoes-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.sessao-linha {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.sessao-linha .campo {
    margin-bottom: 0;
}

.botao-remover {
    background: none;
    border: 1.5px solid var(--cor-borda);
    color: var(--cor-erro);
    border-radius: var(--raio-pequeno);
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.1rem;
}

.botao-remover:hover {
    background: var(--cor-erro);
    color: var(--cor-branco);
    border-color: var(--cor-erro);
}

.botao-adicionar {
    background: none;
    border: 1.5px dashed var(--cor-secundaria-escura);
    color: var(--cor-secundaria-escura);
    border-radius: var(--raio-pequeno);
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--fonte-corpo);
    margin-bottom: 24px;
}

.botao-adicionar:hover {
    background: var(--cor-secundaria);
    color: var(--cor-branco);
    border-style: solid;
}

.total-recibo {
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.total-recibo .valor {
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
    color: var(--cor-primaria-escura);
}

.total-recibo .extenso {
    font-style: italic;
    color: var(--cor-texto-secundario);
    font-size: 0.85rem;
}

/* ---------- Avaliação Cefálica ---------- */

.grade-resultados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0;
}

@media (max-width: 640px) {
    .grade-resultados { grid-template-columns: 1fr; }
}

.imagem-resultado {
    width: 100%;
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: 10px;
}

.resumo-numeros {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--cor-fundo);
    border-radius: var(--raio-pequeno);
    padding: 16px 20px;
    margin-bottom: 8px;
}

.resumo-numeros .item .rotulo {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    display: block;
}

.resumo-numeros .item .valor {
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
    color: var(--cor-primaria-escura);
}

.aviso-clinico {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    font-style: italic;
    margin-top: 24px;
}