/* =====================================================================
   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:   #eaf3ee;   /* fundo geral — verde bem pálido */
    --nuvem:   #ffffff;   /* cards e topo — branco          */
    --linha:   #d6e6df;   /* 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 { padding-top:10px; padding-bottom:10px; }
.topo .marca-app { display:flex; align-items:center; }
.topo .logo-app { height:92px; width:auto; display:block; }
@media (max-width:560px){ .topo .logo-app { height:60px; } }
.logo-login { width:320px; max-width:92%; height:auto; display:block; margin:4px auto 10px; }
.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; --ambar:#d99a4e;
    --papel:#e7f1f6; --nuvem:#ffffff; --linha:#d0e2ea; --tinta:#16313a; --cinza:#566b74;
}
/* Jade — verde menta, fresco */
body.tema-jade {
    --folha:#1f9e7e; --folha-2:#188065; --broto:#7fcfb6; --ambar:#d2a24a;
    --papel:#e7f5ef; --nuvem:#ffffff; --linha:#cfe9df; --tinta:#143a30; --cinza:#546e66;
}
/* Lavanda — roxo suave */
body.tema-lavanda {
    --folha:#6b5b95; --folha-2:#574a7d; --broto:#a99bc9; --ambar:#bd86a6;
    --papel:#f0ecf8; --nuvem:#ffffff; --linha:#ddd4ec; --tinta:#2b2342; --cinza:#675f7e;
}
/* Rosa — profissional e acolhedor */
body.tema-rosa {
    --folha:#bd5680; --folha-2:#a1466a; --broto:#e0a0bc; --ambar:#cf8a5b;
    --papel:#fbecf2; --nuvem:#ffffff; --linha:#f2d9e3; --tinta:#3c2230; --cinza:#7c6470;
}
/* Nude — areia e terroso */
body.tema-nude {
    --folha:#a77f5e; --folha-2:#8c684a; --broto:#cbb29a; --ambar:#bb8a55;
    --papel:#f5efe7; --nuvem:#fffdfa; --linha:#e8dccc; --tinta:#3a2e22; --cinza:#75685a;
}
/* Terracota — quente e elegante */
body.tema-terracota {
    --folha:#b35e44; --folha-2:#964c35; --broto:#dba48d; --ambar:#c98a3f;
    --papel:#f8ede7; --nuvem:#fffdfb; --linha:#eed7cc; --tinta:#3e2820; --cinza:#7a6155;
}
/* Ardósia — azul-acinzentado sóbrio */
body.tema-ardosia {
    --folha:#496274; --folha-2:#3a4f5e; --broto:#8aa2b3; --ambar:#bf9148;
    --papel:#edf1f4; --nuvem:#ffffff; --linha:#dae2e8; --tinta:#22303a; --cinza:#5d6b75;
}
/* 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-jade      { background:#1f9e7e; }
.temas .b-oceano    { background:#2f6f8f; }
.temas .b-ardosia   { background:#496274; }
.temas .b-lavanda   { background:#6b5b95; }
.temas .b-rosa      { background:#bd5680; }
.temas .b-nude      { background:#a77f5e; }
.temas .b-terracota { background:#b35e44; }
.temas .b-escuro    { background:#16302a; border:2px solid #5fae93; }

/* =====================================================================
   Aviso de vencimento (popup) + botão flutuante de suporte
   ===================================================================== */
.modal-fundo {
    position:fixed; inset:0; background:rgba(20,48,42,.45);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;
}
.modal-cartao {
    background:var(--nuvem); border-radius:var(--raio); max-width:380px; width:100%;
    padding:26px 24px; box-shadow:0 20px 50px -12px rgba(0,0,0,.35); text-align:center;
}
.modal-cartao h3 { font-family:'Fraunces',serif; font-size:1.3rem; margin:0 0 8px; }
.modal-cartao p { color:var(--cinza); margin:0 0 18px; }
.modal-botoes { display:flex; gap:8px; flex-direction:column; }

.suporte-flutuante {
    position:fixed; right:18px; bottom:18px; z-index:90;
    display:flex; align-items:center; gap:8px;
    background:#1faa55; color:#fff; text-decoration:none;
    padding:11px 16px; border-radius:999px; font-weight:600; font-size:.9rem;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.4); font-family:'Inter',system-ui,sans-serif;
}
.suporte-flutuante:hover { background:#1a9249; }
@media (max-width:560px){ .suporte-flutuante span { display:none; } .suporte-flutuante { padding:13px; } }

/* =====================================================================
   Calendário de sessões
   ===================================================================== */
.cal-topo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cal-mes { font-family:'Fraunces',serif; font-size:1.2rem; text-transform:capitalize; }
.cal-nav { display:flex; gap:6px; }
.cal-nav a { text-decoration:none; border:1px solid var(--linha); border-radius:8px; padding:6px 12px; color:var(--tinta); background:var(--nuvem); }
.cal-nav a:hover { background:var(--papel); }

.cal-grade { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cab { text-align:center; font-size:.72rem; color:var(--cinza); text-transform:uppercase; letter-spacing:.04em; padding:4px 0; }
.cal-dia {
    min-height:64px; border:1px solid var(--linha); border-radius:10px; padding:6px;
    background:var(--nuvem); position:relative; display:flex; flex-direction:column; gap:4px;
}
.cal-dia.vazio { background:transparent; border:none; }
.cal-dia.tem-sessao { cursor:pointer; }
.cal-dia.tem-sessao:hover { border-color:var(--folha); }
.cal-dia.hoje { box-shadow:inset 0 0 0 2px var(--ambar); }
.cal-dia.selecionado { border-color:var(--folha); background:var(--papel); }
.cal-num { font-size:.82rem; font-weight:600; color:var(--tinta); }
.cal-dia.tem-sessao .cal-num { color:var(--folha); }
.cal-pontos { display:flex; flex-wrap:wrap; gap:3px; margin-top:auto; }
.cal-ponto { width:8px; height:8px; border-radius:50%; }
.p-agendada  { background:#c9912f; }
.p-confirmada{ background:#2f6f5e; }
.p-realizada { background:#3b6ea5; }
.p-cancelada { background:#b34a43; }
.p-remarcada { background:#9a6cb4; }

.cal-legenda { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:.8rem; color:var(--cinza); }
.cal-legenda span { display:inline-flex; align-items:center; gap:6px; }

@media (max-width:560px){
    .cal-dia { min-height:52px; padding:4px; }
    .cal-num { font-size:.75rem; }
}