/* =====================================================================
   PERCURSO — folha de estilo única
   Identidade: verde-sálvia sereno (acolhimento clínico) + âmbar discreto.
   Mobile-first. Display: Fraunces. Interface: Inter.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root {
    --tinta:   #16302a;   /* verde quase preto — texto */
    --folha:   #2f6f5e;   /* sálvia média — primário   */
    --folha-2: #265c4d;   /* hover do primário          */
    --broto:   #6fae97;   /* verde claro — apoio        */
    --ambar:   #c9912f;   /* âmbar — acento pontual     */
    --papel:   #f3f6f3;   /* fundo claro frio           */
    --nuvem:   #ffffff;
    --linha:   #dfe7e2;   /* bordas suaves              */
    --cinza:   #5f6f69;   /* texto secundário           */
    --erro-bg: #fbeceb;
    --erro:    #b23b32;
    --ok-bg:   #e8f3ed;
    --ok:      #1f6b4d;
    --raio:    14px;
    --sombra:  0 10px 30px -12px rgba(22, 48, 42, .25);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--tinta);
    background: var(--papel);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

/* ---- Tela centralizada (login / cadastro) ------------------------- */
.tela {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.cartao {
    width: 100%;
    max-width: 400px;
    background: var(--nuvem);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px 28px;
}

/* ---- Marca --------------------------------------------------------- */
.marca {
    text-align: center;
    margin-bottom: 26px;
}
.marca .simbolo {
    width: 46px; height: 46px;
    margin: 0 auto 12px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--folha);
    color: var(--nuvem);
}
.marca h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: -.01em;
}
.marca p {
    margin: 4px 0 0;
    font-size: .85rem;
    color: var(--cinza);
}

/* ---- Formulários --------------------------------------------------- */
.campo { margin-bottom: 16px; }
.campo label {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--tinta);
}
.campo input {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
    outline: none;
    border-color: var(--folha);
    box-shadow: 0 0 0 3px rgba(47, 111, 94, .15);
}

.btn {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--nuvem);
    background: var(--folha);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--folha-2); }
.btn:focus-visible { outline: 3px solid var(--broto); outline-offset: 2px; }

.btn-secundario {
    background: transparent;
    color: var(--folha);
    border: 1px solid var(--linha);
}
.btn-secundario:hover { background: var(--papel); }

.rodape-form {
    margin-top: 18px;
    text-align: center;
    font-size: .85rem;
    color: var(--cinza);
}

/* ---- Avisos -------------------------------------------------------- */
.aviso {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .86rem;
    margin-bottom: 18px;
}
.aviso-erro { background: var(--erro-bg); color: var(--erro); }
.aviso-ok   { background: var(--ok-bg);   color: var(--ok); }
.aviso-atencao { background: #fdf4e3; color: #8a5a12; }

/* ---- App interno (painel/admin) ----------------------------------- */
.topo {
    background: var(--nuvem);
    border-bottom: 1px solid var(--linha);
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.topo .nome-app {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
}
.topo .sair { font-size: .85rem; }

.conteudo { max-width: 920px; margin: 0 auto; padding: 28px 20px; }

.painel-titulo {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 0 4px;
}
.painel-sub { color: var(--cinza); margin: 0 0 24px; }

.bloco {
    background: var(--nuvem);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 22px;
    margin-bottom: 18px;
}

.selo {
    display: inline-block;
    font-size: .76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.selo-ok    { background: var(--ok-bg);   color: var(--ok); }
.selo-aviso { background: #fdf4e3; color: #8a5a12; }
.selo-erro  { background: var(--erro-bg); color: var(--erro); }

/* ---- Tabela admin -------------------------------------------------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td {
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid var(--linha);
}
.tabela th { color: var(--cinza); font-weight: 500; font-size: .8rem; }
.tabela .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-mini {
    font: inherit; font-size: .78rem; font-weight: 500;
    padding: 5px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--linha); background: var(--nuvem); color: var(--tinta);
}
.btn-mini:hover { background: var(--papel); }
.btn-mini.perigo { color: var(--erro); border-color: #efc7c3; }

@media (max-width: 600px) {
    .tabela thead { display: none; }
    .tabela tr { display: block; border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 12px; padding: 8px; }
    .tabela td { display: flex; justify-content: space-between; border: none; padding: 7px 4px; }
    .tabela td::before { content: attr(data-rotulo); color: var(--cinza); font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* =====================================================================
   FASE 2 — navegação, pacientes, agenda, status de sessão
   ===================================================================== */

/* ---- Navegação no topo ---- */
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
    font-size: .88rem; font-weight: 500; color: var(--cinza);
    text-decoration: none; padding: 7px 12px; border-radius: 8px;
}
.nav a:hover { background: var(--papel); color: var(--tinta); }
.nav a.ativo { color: var(--folha); background: var(--papel); }
.topo .esq { display: flex; align-items: center; gap: 22px; }

/* ---- Cabeçalho de página com botão de ação ---- */
.cabecalho {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.cabecalho .painel-titulo { margin: 0; }

/* ---- Formulário: select e textarea ---- */
.campo select, .campo textarea {
    width: 100%; padding: 11px 13px; font: inherit; color: var(--tinta);
    background: var(--papel); border: 1px solid var(--linha); border-radius: 10px;
}
.campo textarea { min-height: 90px; resize: vertical; }
.campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--folha);
    box-shadow: 0 0 0 3px rgba(47,111,94,.15);
}
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .linha-campos { grid-template-columns: 1fr; } }
.secao-form {
    font-size: .78rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--cinza); margin: 22px 0 12px;
}

/* ---- Status de sessão (pills) ---- */
.st { display: inline-block; font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.st-agendada  { background: #fdf4e3; color: #8a5a12; }
.st-confirmada{ background: var(--ok-bg); color: var(--ok); }
.st-remarcada { background: #fbe8d8; color: #9a5a18; }
.st-cancelada { background: var(--erro-bg); color: var(--erro); }
.st-realizada { background: #e7edf3; color: #3a5470; }

/* ---- Ficha do paciente ---- */
.ficha-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
@media (max-width: 560px) { .ficha-dados { grid-template-columns: 1fr; } }
.ficha-dados .rotulo { font-size: .76rem; color: var(--cinza); }
.ficha-dados .valor { font-size: .95rem; }

/* ---- Estado vazio ---- */
.vazio { text-align: center; color: var(--cinza); padding: 40px 20px; }
.vazio svg { opacity: .4; margin-bottom: 10px; }

/* ---- Linha de paciente / agenda clicável ---- */
.tabela tr.clicavel:hover td { background: var(--papel); cursor: pointer; }
.link-puro { color: var(--folha); text-decoration: none; font-weight: 500; }
.link-puro:hover { text-decoration: underline; }

/* =====================================================================
   TEMAS — cada profissional escolhe o seu (salvo na conta)
   O padrão (Sálvia) é o :root lá em cima. Cada tema só sobrescreve
   o que muda a "cara" do sistema.
   ===================================================================== */

/* Oceano — azul sereno */
body.tema-oceano  { --folha:#2f6f8f; --folha-2:#255c77; --broto:#6fa9c0; }
/* Lavanda — roxo suave */
body.tema-lavanda { --folha:#6b5b95; --folha-2:#574a7d; --broto:#a99bc9; }
/* Rosa */
body.tema-rosa    { --folha:#b1567f; --folha-2:#97476b; --broto:#d99ab8; }
/* Nude — terroso e quente */
body.tema-nude    { --folha:#a77f5e; --folha-2:#8c684a; --broto:#cbb29a; --papel:#f6f2ec; }
/* Escuro — modo noturno */
body.tema-escuro  {
    --tinta:#e8edec; --papel:#13201d; --nuvem:#1b2b27; --linha:#2c3f3a;
    --cinza:#9fb3ad; --folha:#5fae93; --folha-2:#4f9a80; --broto:#6fae97;
}
body.tema-escuro .aviso-ok   { background:#1d3a2e; color:#9fe0bf; }
body.tema-escuro .selo-ok    { background:#1d3a2e; color:#9fe0bf; }
body.tema-escuro .st-confirmada { background:#1d3a2e; color:#9fe0bf; }

/* ---- Seletor de temas (bolinhas no topo) ---- */
.temas { display:flex; gap:7px; align-items:center; }
.temas .bolinha {
    width:18px; height:18px; border-radius:50%; cursor:pointer; padding:0;
    border:2px solid transparent; outline:none; transition:transform .12s;
}
.temas .bolinha:hover { transform:scale(1.15); }
.temas .bolinha.ativo { border-color:var(--tinta); box-shadow:0 0 0 2px var(--nuvem); }
.temas .b-padrao  { background:#2f6f5e; }
.temas .b-oceano  { background:#2f6f8f; }
.temas .b-lavanda { background:#6b5b95; }
.temas .b-rosa    { background:#b1567f; }
.temas .b-nude    { background:#a77f5e; }
.temas .b-escuro  { background:#16302a; border:2px solid #5fae93; }