/* ============================================================
   ATENDIA SKIN · Is'Art  (Fase 1 — shell + Home)
   Estética dark azul-petróleo + glassmorphism (inspirado no AtendIA),
   mantendo a identidade Is'Art: acento CEREJA + DOURADO.
   Carregado DEPOIS de app.css → vence os overrides claros do fim do arquivo.
   Reversível: é só remover o <link> deste arquivo no index.html.
   ============================================================ */

/* ---------- Tipografia: UI em Inter/Sora, logo continua Playfair ---------- */
body{ font-family:"Inter",system-ui,sans-serif !important; }
.topbar__title,.home__h2,.home__story h2,.home__mpcard b,.panel__head h2,
.svc__head h2,.fin__head h2,.pagehero h2,.pagehero__rowtxt h2,.stat b,.home__statbd b,
.modal__head h3{
  font-family:"Sora","Inter",sans-serif !important; letter-spacing:-.01em;
}
/* assinatura da marca permanece elegante */
.side__wm,.home__logo,.login__logo{ font-family:"Playfair Display",serif !important; }

/* ---------- Fundo da página: petróleo profundo + brilhos sutis ---------- */
body{
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(231,184,106,.06), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(176,42,68,.025), transparent 55%),
    var(--cream) !important;
}
.main{ background:transparent !important; }

/* ---------- Topbar: vidro fosco ---------- */
.topbar{
  background:rgba(16,17,21,.8) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}
.topbar__title{ color:#fff !important; }

/* ---------- Sidebar (estilo AtendIA: petróleo + item ativo translúcido) ---------- */
.side{
  background:linear-gradient(180deg,#191b21 0%,#0d0e12 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}
.side__wm{ color:#f3eee6 !important; }
.side__wm small{ color:rgba(236,238,243,.5) !important; }
.brand-cherry,.side__wm i,.side__cherry{ color:var(--cherry) !important; }
.side__link{ color:rgba(236,238,243,.72) !important; border-radius:10px; }
.side__link:hover{ background:rgba(255,255,255,.05) !important; color:#fff !important; }
.side__link.is-active{
  background:linear-gradient(135deg,rgba(176,42,68,.22),rgba(176,42,68,.07)) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 0 var(--gold), 0 8px 20px -10px rgba(176,42,68,.5) !important;
}
.side__link.is-active svg{ color:var(--gold) !important; }
.side__label{ color:rgba(236,238,243,.4) !important; }
.side__user{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important; }
.side__userbd b{ color:#fff !important; }
.side__userbd small{ color:rgba(236,238,243,.6) !important; }
.side__foot{ color:rgba(236,238,243,.5) !important; }
.side__client{ color:rgba(236,238,243,.82) !important; }
.side__client:hover{ background:rgba(255,255,255,.06) !important; }

/* ---------- Botões ---------- */
.btn--primary{
  background:linear-gradient(135deg,var(--wine),var(--wine-deep)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px -10px rgba(176,42,68,.6) !important;
}
.btn--primary:hover{ filter:brightness(1.06); transform:translateY(-1px) !important;
  box-shadow:0 14px 30px -8px rgba(176,42,68,.7) !important; }
.btn--ghost,.icon-btn{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:var(--ink) !important;
}
.btn--ghost:hover,.icon-btn:hover{
  background:rgba(231,184,106,.14) !important; color:#fff !important;
  border-color:rgba(231,184,106,.3) !important;
}

/* ---------- Inputs / busca / selects ---------- */
.search,.sel{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.1) !important; color:var(--ink) !important;
}
.search input{ color:var(--ink) !important; }
.search input::placeholder{ color:var(--muted) !important; }
.search svg{ stroke:var(--muted) !important; }
.search:focus-within,.sel:focus{
  outline:none !important; border-color:var(--wine) !important;
  box-shadow:0 0 0 3px rgba(176,42,68,.2) !important;
}

/* ---------- Glassmorphism: cards e superfícies ---------- */
.home__card,.home__stat,.home__mpcard,.home__val,.home__link,.stat,.panel,.cl-card,
.trn__checklist,.trn__guide,.prfcard,.eq__card,.kcard,.svc__card,.md__card,.kcol,.aprovbox{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 8px 30px rgba(0,0,0,.35) !important;
}
.home__card:hover,.home__stat:hover,.home__val:hover,.home__link:hover{
  transform:translateY(-3px);
  border-color:rgba(231,184,106,.35) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.45) !important;
}

/* ---------- Home: textos e acentos ---------- */
.home__h2,.home__story h2,.home__mpcard b,.home__card b{ color:#fff !important; }
.home__h2::after{ background:linear-gradient(90deg,var(--wine),var(--gold)) !important; }
.home__eyebrow2{ color:var(--gold) !important; }
.home__card span,.home__val p,.home__link small,.home__mpcard p{ color:var(--muted) !important; }
.home__val b,.home__link b{ color:#eceef3 !important; }
.home__mpcard>span,.home__link>span{ color:var(--cherry) !important; }
.home__val>span{ color:var(--gold) !important; }
.home__cardico{
  background:linear-gradient(135deg,var(--wine),#7a1f2e) !important;
  box-shadow:0 10px 22px -8px rgba(176,42,68,.5) !important; color:#fff !important;
}

/* card "história" e blocos com header em gradiente → vidro com fio de luz */
.home__story{
  background:#1c1e24 !important;
  border:1px solid rgba(255,255,255,.09) !important;
}
.home__story::before{ background:linear-gradient(var(--wine),var(--gold)) !important; }
.home__story p{ color:var(--muted) !important; }
.home__story b{ color:var(--gold) !important; }

/* ---------- KPIs (home__stats) estilo AtendIA ---------- */
.home__stat{ align-items:center; }
.home__statbd b{ color:#fff !important; font-family:"Sora","Inter",sans-serif !important; }
.home__statbd small{ color:var(--muted) !important; }
.home__statico{ box-shadow:inset 0 -8px 16px rgba(0,0,0,.28) !important; }

/* ---------- Stats da barra do calendário ---------- */
.stat b{ color:var(--gold) !important; }
.stat--total{ background:linear-gradient(135deg,var(--wine),var(--wine-deep)) !important; color:#fff !important; border:0 !important; }

/* ---------- Modais (card dark sólido + inputs) ---------- */
.modal{ background:rgba(10,11,14,.66) !important; }
.modal__card{
  background:linear-gradient(180deg,rgba(30,33,40,.98),rgba(20,22,27,.99)) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7) !important;
}
.modal__head{ border-bottom:1px solid rgba(255,255,255,.08) !important; }
.modal__head h3{ color:#fff !important; }
.modal__body label{ color:var(--muted) !important; }
.modal__body input,.modal__body select,.modal__body textarea{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important; color:var(--ink) !important;
}
.modal__body input:focus,.modal__body select:focus,.modal__body textarea:focus{
  outline:none !important; border-color:var(--wine) !important;
  box-shadow:0 0 0 3px rgba(176,42,68,.2) !important;
}
.modal__crmlink{
  background:rgba(231,184,106,.1) !important; border:1px solid rgba(231,184,106,.25) !important;
  color:var(--gold) !important;
}
.modal__crmlink small{ color:var(--muted) !important; }

/* ---------- Tela de login / pending (card de vidro dark) ---------- */
.login{
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(176,42,68,.16), transparent 60%),
    radial-gradient(720px 500px at 100% 100%, rgba(231,184,106,.08), transparent 55%),
    var(--cream) !important;
}
.login__card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 40px 90px rgba(0,0,0,.55) !important;
}
.login__logo{ color:#fff !important; }
.login__logo span{ color:var(--gold) !important; }
.login__cherry{ color:var(--cherry) !important; }
.login__sub{ color:rgba(236,238,243,.55) !important; }
.login__welcome{ color:#fff !important; }
.login__hint,.login__foot{ color:var(--muted) !important; }
.login__field span{ color:var(--muted) !important; }
.login__field input{
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.12) !important; color:var(--ink) !important;
}
.login__field input::placeholder{ color:rgba(236,238,243,.4) !important; }
.login__field input:focus{ border-color:var(--wine) !important; box-shadow:0 0 0 3px rgba(176,42,68,.22) !important; }
.login__toggle{ color:var(--gold) !important; }
.login__err{ background:rgba(239,68,68,.14) !important; color:#ff9a9a !important; }

/* ---------- Sidebar: grupos com label de seção (refs) ---------- */
.side__nav{ gap:.1rem !important; }
.side__grouplabel{
  margin:.95rem .15rem .2rem; font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(236,238,243,.34) !important;
}
.side__grouplabel:first-child{ margin-top:.1rem; }
.side__link{ font-size:.88rem !important; padding:.55rem .7rem !important; }
.side__link svg,.side__link .ic{ opacity:.92; }

/* ---------- Login: split foto vintage + form (ref 2) — SÓ no #loginGate ---------- */
@media(min-width:821px){
  #loginGate:not([hidden]){ display:grid !important; grid-template-columns:1.04fr .96fr !important; align-items:stretch !important; padding:0 !important; min-height:100vh; gap:0 }
  #loginGate::before{ content:""; display:block; background:linear-gradient(160deg,rgba(15,16,20,.34),rgba(15,16,20,.8)),url(../assets/vh-2.jpg?v=83) center/cover no-repeat; border-right:1px solid rgba(255,255,255,.07) }
  #loginGate .login__card{ align-self:center; justify-self:center; margin:0 !important; width:min(420px,86%) }
}
/* ---------- Pending / conta criada: SEMPRE centralizado e um pouco maior (só quando visível) ---------- */
#pendingGate:not([hidden]){ display:flex !important; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem !important; }
#pendingGate::before{ display:none !important; content:none !important; }
/* trava de segurança: gate escondido fica escondido de verdade */
#loginGate[hidden],#pendingGate[hidden],#greetGate[hidden]{ display:none !important; }
#pendingGate .login__card{ width:min(480px,94%); padding:2.6rem 2.4rem !important; text-align:center; }
#pendingGate .login__welcome{ font-size:1.6rem !important; }
#pendingGate .pending__ico{ transform:scale(1.15); }

/* ---------- Scrollbar discreta ---------- */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:20px; border:2px solid transparent; background-clip:content-box; }