/* ==========================================================================
   Tema "Ateliê" — MarqueAgendas
   Carregar DEPOIS do <style> de cada página:
     <?php include __DIR__.'/tema_head.php'; ?>   (antes de </head>)
   Mantém as variáveis que o sistema já usa (--c, --cd, --cl, --c-texto,
   --sobre-c, --c-borda, --txt, --mut, --bor) — só muda os valores-base e
   a "pele" dos componentes comuns. Nenhum ID/JS é tocado.
   ========================================================================== */

:root{
  /* Base fixa (não depende da cor da profissional) */
  --at-bg:#FAF6F2;        /* marfim — fundo de página */
  --at-surface:#FFFFFF;   /* cartões */
  --at-ink:#2A1F24;       /* texto principal / superfícies escuras */
  --at-ink-2:#6E5A62;     /* texto secundário */
  --at-mut:#7A6A70;       /* rótulos, legendas */
  --at-faint:#A89A9F;     /* rodapé, desabilitado */
  --at-line:#EADFD8;      /* bordas/hairlines */
  --at-line-2:#D9CCC4;    /* bordas de inputs/botões outline */
  --at-soft:#F3ECE7;      /* placeholders, fundo de foto */
  --at-ok-bg:#E6F0EA;  --at-ok:#2F6B4B;
  --at-warn-bg:#F7EEDB;--at-warn:#8A6116;
  --at-err-bg:#F5E1E1; --at-err:#A23B3B;
  --at-lilac-bg:#EEE4F0;--at-lilac:#6B3F5E;

  --at-serif:'Cormorant Garamond',Georgia,serif;
  --at-sans:'Manrope',system-ui,-apple-system,sans-serif;

  --at-r-sm:12px; --at-r:16px; --at-r-lg:20px; --at-r-xl:28px; --at-pill:999px;
  --at-shadow:0 12px 30px rgba(42,31,36,.14);

  /* Sobrescreve os neutros do sistema */
  --txt:var(--at-ink); --mut:var(--at-mut); --bor:var(--at-line);
}

html,body{background:var(--at-bg)!important;color:var(--at-ink);font-family:var(--at-sans)!important;
  -webkit-font-smoothing:antialiased}
body{background-image:none!important}
/* Cormorant usa algarismos "antigos" por padrão — o 1 parece um I. Alinhados em tudo. */
html,body{font-variant-numeric:lining-nums}
h1,h2,h3,.hero-nome,.titulo,.dn{font-family:var(--at-serif)!important;font-weight:500!important;letter-spacing:-.2px}
a{color:var(--at-ink)} a:hover{color:var(--at-ink-2)}

/* ---------- Topbar + drawer (menu_admin.php / páginas públicas) ---------- */
.topbar{background:var(--at-bg)!important;color:var(--at-ink)!important;box-shadow:none!important;
  border-bottom:1px solid var(--at-line);height:60px}
.topbar strong,.topbar-brand{color:var(--at-ink)!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:1.6px;text-transform:uppercase}
.topbar button,#topEntrar{background:transparent!important;color:var(--at-ink)!important;
  border:1px solid var(--at-line-2)!important;border-radius:var(--at-pill)!important;box-shadow:none!important;
  font-family:var(--at-sans)!important;font-weight:600!important}
.topbar .ham-btn{background:var(--at-ink)!important;border:none!important;border-radius:50%!important;width:42px!important;height:42px!important;gap:4px!important}
.topbar .ham-btn .bar{background:#fff!important;height:1.5px!important;width:16px!important}
.topbar .ham-btn:not(.open) .bar:nth-child(2){display:none}
.topbar .ham-btn:not(.open) .bar:nth-child(3){width:10px!important;margin-left:6px}
.topbar .ham-btn.open .bar:nth-child(1){transform:translateY(2.75px) rotate(45deg)!important}
.topbar .ham-btn.open .bar:nth-child(3){transform:translateY(-2.75px) rotate(-45deg)!important}
.drawer{background:var(--at-ink)!important;color:#fff;width:300px!important;box-shadow:none!important}
.drawer-hd{background:transparent!important;padding:80px 24px 6px!important;display:flex;align-items:center;gap:14px}
.drawer-hd .dav{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-family:var(--at-serif);font-style:italic;font-size:22px;color:#fff}
.drawer-hd .dav{overflow:hidden}
.drawer-hd .dav img{width:100%;height:100%;object-fit:cover;display:block}
.drawer-hd .dtx{min-width:0;display:flex;flex-direction:column;gap:2px}
.drawer-hd .dn{font-family:var(--at-serif)!important;font-size:26px!important;line-height:1!important;font-weight:500!important;color:#fff}
.drawer-hd .ds{color:#B8A9AE!important;opacity:1!important;font-size:12px!important;text-decoration:none}
.drawer-nav{padding:0 24px 30px!important}
.drawer-grp{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#8C7B81;font-weight:700;margin:22px 0 2px}
.drawer-nav a{display:flex!important;align-items:center;gap:12px!important;color:#E8DEE1!important;padding:10px 0!important;font-size:14.5px!important;
  font-weight:500!important;border-bottom:1px solid rgba(255,255,255,.07);background:transparent!important}
.drawer-nav a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:transparent}
.drawer-nav a:hover{background:transparent!important;color:#fff!important}
.drawer-nav a.ativo{color:#fff!important;font-weight:700!important}
.drawer-nav a.ativo::before{background:var(--c-borda,var(--c))}
.drawer-nav a .ico{display:none}
.drawer-pe{display:flex;justify-content:space-between;padding-top:24px}
.drawer-pe a{border:none!important;padding:0!important;font-size:13.5px!important}
.drawer-pe a::before{display:none}
.drawer-pe a:first-child{color:#fff!important;font-weight:600!important}
.drawer-pe a.sair{color:#B8A9AE!important}
.drawer-sep{display:none!important}
.drawer-ov{background:rgba(30,22,25,.45)!important}

/* ---------- Cartões / seções ---------- */
.card{background:var(--at-surface)!important;border:1px solid var(--at-line)!important;
  border-radius:var(--at-r-lg)!important;box-shadow:none!important}
.card-ttl,.card h2,.card h3{font-family:var(--at-serif)!important;font-size:22px!important;font-weight:500!important}
.section-label,.sec-title{font-family:var(--at-sans)!important;font-size:10.5px!important;letter-spacing:2px!important;
  text-transform:uppercase;font-weight:700!important;color:var(--at-ink)!important}

/* ---------- Hero da página pública ---------- */
.hero{background:transparent!important}
.hero::before,.hero::after{display:none!important}
.avatar-img{border:none!important;box-shadow:0 0 0 6px var(--at-bg),0 0 0 7px var(--at-line-2)!important}
.badge-on{background:#fff!important;color:var(--at-ink)!important;border:1px solid var(--at-line)!important;
  font-weight:600!important;box-shadow:0 4px 14px rgba(42,31,36,.08)!important}
.hero-nome{font-size:38px!important;line-height:1.02!important;color:var(--at-ink)!important}
.hero-bio{color:var(--at-ink-2)!important;font-size:14px!important;line-height:1.6!important}
.chip{background:transparent!important;border:1px solid var(--at-line)!important;box-shadow:none!important;
  border-radius:var(--at-pill)!important;color:var(--at-ink)!important}
.insta-link{color:var(--at-ink-2)!important}
.btn-hero-p{background:var(--c)!important;color:var(--sobre-c,#fff)!important;border-radius:var(--at-r)!important;
  box-shadow:none!important;height:50px;font-weight:600!important}
.btn-hero-g{background:transparent!important;color:var(--at-ink)!important;border:1px solid var(--at-ink)!important;
  border-radius:var(--at-r)!important;height:50px;font-weight:600!important}

/* ---------- Carrossel de datas ---------- */
.date-chip{border:1px solid var(--at-line)!important;border-radius:var(--at-r)!important;min-width:58px!important;
  padding:12px 10px!important;background:#fff!important}
.date-chip:hover:not(.folga){background:#fff!important;border-color:var(--at-ink)!important;transform:none!important}
.date-chip.selected{background:var(--at-ink)!important;border-color:var(--at-ink)!important;box-shadow:none!important}
.dc-num{font-family:var(--at-serif)!important;font-weight:600!important;font-size:26px!important}
.dc-mes{text-transform:uppercase;letter-spacing:.8px;font-size:10px!important;display:block!important}
.dc-folga{color:var(--at-mut)!important}

/* ---------- Serviços (grade da pública) ---------- */
.svc-card{border:1px solid var(--at-line)!important;border-radius:var(--at-r-lg)!important;box-shadow:none!important}
.svc-card:hover{transform:none!important;box-shadow:none!important;border-color:var(--at-line-2)!important}
.svc-card.selected{border-color:var(--c-borda,var(--c))!important;box-shadow:0 0 0 2px var(--c-borda,var(--c))!important}
.svc-card.selected .svc-nome{color:var(--at-ink)!important}
.svc-nome{color:var(--at-ink)!important;font-weight:600!important}
.svc-preco{font-family:var(--at-serif)!important;font-size:18px!important;color:var(--at-ink)!important}
.svc-foto-ph{background:var(--at-soft)!important}

/* ---------- Horários / slots ---------- */
.mhor-slot,.slot-btn{border:1px solid var(--at-line)!important;color:var(--at-ink)!important;border-radius:14px!important}
.mhor-slot:hover{background:#fff!important;border-color:var(--at-ink)!important;transform:none!important}
.mhor-slot.ativo{background:var(--c)!important;border-color:var(--c)!important;color:var(--sobre-c,#fff)!important;box-shadow:none!important}
.mhor-sel-hora,.mhor-svc-nome{font-family:var(--at-serif)!important;color:var(--at-ink)!important}
.btn-confirmar,.btn-marcar,.btn-agendar{background:var(--c)!important;color:var(--sobre-c,#fff)!important;
  border-radius:var(--at-r)!important;box-shadow:none!important;font-weight:700!important}
.btn-confirmar.pulsing{animation:none!important}

/* ---------- Modais / bottom-sheets ---------- */
.modal-backdrop{background:rgba(30,22,25,.45)!important}
.modal{background:var(--at-bg)!important;border-radius:30px 30px 0 0!important}
.modal-handle{background:var(--at-line-2)!important;width:40px!important;height:4px!important}
.btn-x{border:1px solid var(--at-line-2)!important;background:transparent!important;border-radius:50%!important}

/* ---------- Formulários ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],input[type=time],select,textarea{
  border:1px solid var(--at-line-2)!important;border-radius:14px!important;background:#fff!important;
  font-family:var(--at-sans)!important;color:var(--at-ink)!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:var(--at-ink)!important;outline:none!important}
/* Rótulo em MAIÚSCULAS só nas telas redesenhadas (<body class="at-rotulos">).
   Nas telas só com o tema, há <label> com frase longa e caixa de marcar
   dentro, que em maiúsculas ficavam difíceis de ler. O :where() mantém a
   força da regra antiga (só `label`), para as classes da página vencerem. */
label{color:var(--at-ink)}
:where(body.at-rotulos) label:where(:not(:has(input[type=checkbox],input[type=radio]))){font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700}

/* ---------- Status (agenda.php e cliente) ---------- */
.badge,.ag-status{border-radius:var(--at-pill)!important;font-weight:700!important;font-size:10.5px!important}
.badge.confirmado,.ag-status.confirmado{background:var(--at-ok-bg)!important;color:var(--at-ok)!important}
.badge.pendente,.ag-status.pendente,.ag-status.aguardando_pagamento{background:var(--at-warn-bg)!important;color:var(--at-warn)!important}
.badge.concluido,.ag-status.concluido{background:#EEE8EA!important;color:var(--at-ink-2)!important}
.badge.cancelado,.ag-status.cancelado,.badge.nao_compareceu{background:var(--at-err-bg)!important;color:var(--at-err)!important}

/* ---------- Grade do dia (agenda.php) ---------- */
.slot{border:1px solid var(--at-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:inset 3px 0 0 var(--c)!important}
.slot-hora{font-weight:700!important;color:var(--at-ink)!important}
.slot-nome{font-weight:700!important}

/* ---------- Rodapé ---------- */
footer{color:var(--at-faint)!important;font-size:10.5px!important}
footer a{color:var(--at-ink-2)!important}
.wpp-hint{color:var(--at-mut)!important}
.wpp-hint a{color:var(--at-ink)!important;font-weight:600}