/* =====================================================================
   Sistema de Agenda para Dentista — Design base compartilhado
   Paleta: branco + dourado + onyx — elegante, limpo, refinado.
   (usado pelo site público e pelo painel admin)
   ===================================================================== */

:root {
    --cor-primaria: #B7953B;        /* dourado principal — configurável em Ajustes > Clínica */
    --cor-primaria-escura: #16130E; /* onyx — configurável em Ajustes > Clínica */
    --cor-primaria-clara: #F5EFDD;  /* dourado bem claro, pra fundos suaves */
    --dourado-escuro: #8C6F26;
    --cor-acento: #C9A227;
    --cor-sucesso: #4B7A5B;
    --cor-alerta: #B76E3C;
    --cor-perigo: #A23B3B;

    --texto-principal: #201C15;
    --texto-secundario: #6E6656;
    --texto-claro: #A39A85;

    --fundo: #ffffff;
    --fundo-suave: #FAF7F0;
    --fundo-cartao: #ffffff;
    --borda: #EAE3D1;

    --raio: 14px;
    --raio-peq: 8px;
    --raio-grande: 26px;
    --sombra: 0 4px 24px rgba(32, 28, 21, 0.07);
    --sombra-forte: 0 16px 50px rgba(32, 28, 21, 0.18);

    --fonte-titulo: 'Playfair Display', 'Georgia', serif;
    --fonte-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --largura-conteudo: 1180px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --texto-principal: #F4EFE2;
        --texto-secundario: #C2B79C;
        --texto-claro: #7E7460;
        --fundo: #14110C;
        --fundo-suave: #1B170F;
        --fundo-cartao: #1F1B12;
        --borda: #322C1D;
        --cor-primaria-clara: #2A2415;
        --dourado-escuro: #E0BE72; /* mais claro no modo escuro — senão fica dourado escuro sobre fundo escuro (ilegível) */
        --cor-sucesso: #7FBE96;
        --cor-alerta: #D99A69;
        --cor-perigo: #E28080;
        --sombra: 0 4px 24px rgba(0, 0, 0, 0.45);
        --sombra-forte: 0 16px 50px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    color: var(--texto-principal);
    background: var(--fundo-suave);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size: 15.5px;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.18;
    margin: 0 0 0.5em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

p { line-height: 1.65; color: var(--texto-secundario); margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
svg { flex-shrink: 0; }

.container {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Rótulo pequeno maiúsculo (usado em etiquetas/seções) ---------- */
.rotulo-fino {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cor-primaria);
}
.rotulo-fino::before, .rotulo-fino::after { content: ''; width: 18px; height: 1px; background: var(--cor-primaria); opacity: .6; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 14px 26px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
    min-height: 48px;
    touch-action: manipulation;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--cor-primaria-escura); color: #F4EFE2; box-shadow: 0 10px 26px rgba(22,19,14,.22); }
.btn-primario:hover { background: #000; }
.btn-acento { background: linear-gradient(135deg, var(--cor-acento), var(--cor-primaria)); color: #1a1508; box-shadow: 0 10px 26px rgba(183,149,59,.35); }
.btn-acento:hover { filter: brightness(1.06); }
.btn-fantasma { background: transparent; color: var(--dourado-escuro); border-color: var(--borda); }
.btn-fantasma:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-branco { background: #fff; color: var(--cor-primaria-escura); }
.btn-branco:hover { background: var(--cor-primaria-clara); }
.btn-perigo { background: transparent; color: var(--cor-perigo); border-color: rgba(162,59,59,.35); }
.btn-perigo:hover { background: rgba(162,59,59,.08); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1eb857; }
.btn-bloco { width: 100%; }
.btn-pequeno { padding: 9px 18px; font-size: 13.5px; min-height: 38px; }
.btn-pequeno svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Cartões ---------- */
.cartao {
    background: var(--fundo-cartao);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    border: 1px solid var(--borda);
    padding: 26px;
}

/* ---------- Formulários ---------- */
.campo { margin-bottom: 18px; }
.campo label {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 7px;
    color: var(--texto-principal);
}
.campo .ajuda { font-size: 12.5px; color: var(--texto-claro); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=time], input[type=url],
select, textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: 15.5px;
    font-family: inherit;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-peq);
    background: var(--fundo);
    color: var(--texto-principal);
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 48px;
}
textarea { min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(183,149,59,.15);
}
input[type=color] { padding: 4px; height: 48px; cursor: pointer; }
.checkbox-linha { display: flex; align-items: center; gap: 10px; }
.checkbox-linha input { width: 20px; height: 20px; min-height: auto; accent-color: var(--cor-primaria); }

/* ---------- Badges de status ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid transparent;
}
.badge-agendado { background: var(--cor-primaria-clara); color: var(--dourado-escuro); border-color: rgba(183,149,59,.3); }
.badge-confirmado { background: rgba(75,122,91,.1); color: var(--cor-sucesso); border-color: rgba(75,122,91,.25); }
.badge-concluido { background: rgba(75,122,91,.15); color: var(--cor-sucesso); border-color: rgba(75,122,91,.3); }
.badge-cancelado { background: rgba(162,59,59,.08); color: var(--cor-perigo); border-color: rgba(162,59,59,.25); }
.badge-falta { background: rgba(183,110,60,.1); color: var(--cor-alerta); border-color: rgba(183,110,60,.25); }

/* ---------- Utilitários ---------- */
.somente-mobile { display: none; }
.somente-desktop { display: block; }
@media (max-width: 860px) {
    .somente-mobile { display: block; }
    .somente-desktop { display: none; }
}
.centro-texto { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; }
.flex-coluna { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.icone-envolto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--cor-primaria-escura);
    color: #F4EFE2;
    padding: 14px 22px;
    border-radius: 999px;
    box-shadow: var(--sombra-forte);
    font-weight: 600;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.erro { background: var(--cor-perigo); color: #fff; }
.toast.sucesso { background: var(--cor-sucesso); color: #fff; }

/* ---------- Logo largo (imagem, no lugar do nome escrito) ---------- */
.logo-marca {
    display: block;
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 210px;
    object-fit: contain;
}
.logo-marca-grande { max-height: 72px; max-width: 280px; }
.marca-fallback { display: inline-flex; align-items: center; gap: 10px; }
.marca-fallback-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

@media (max-width: 480px) {
    body { font-size: 15px; }
    .logo-marca { max-height: 40px; max-width: 160px; }
}

/* ---------- Convite pra ativar notificações (site + agendamento, só quando app instalado) ---------- */
.banner-notif-paciente {
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    margin: 0 auto;
    background: var(--fundo-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    padding: 16px;
    z-index: 160;
    display: none;
    flex-direction: column;
    gap: 12px;
    transform: translateY(140%);
    transition: transform .35s ease;
}
.banner-notif-paciente.mostrar { display: flex; }
.banner-notif-paciente.visivel { transform: translateY(0); }
.banner-notif-conteudo { display: flex; align-items: flex-start; gap: 10px; }
.banner-notif-icone {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--cor-primaria-clara); color: var(--dourado-escuro);
    display: flex; align-items: center; justify-content: center;
}
.banner-notif-conteudo strong { font-size: 14.5px; }
.banner-notif-conteudo p { margin: 2px 0 0; font-size: 13px; color: var(--texto-secundario); }
.banner-notif-acoes { display: flex; gap: 8px; justify-content: flex-end; }