/* =============================================================================
   Tema da UPWAGE — SÓ as telas da plataforma (login e painel da UPWAGE).

   A identidade é a do site upwage.com.br (tokens lidos de lá em 07/10):
   fundo creme #F0EEE6, painel #FAF9F5, texto quase preto #141413, Poppins no
   texto e Fraunces nos títulos, botão preto de canto 6px e o azul-aço #41648A
   como acento. O lado da marca do login é a seção escura do site
   (--grad-navy) com o globo (login-platform/globo.js).

   Carregado POR ÚLTIMO e preso a body.upwage-login / body.upwage-painel: o
   login e o painel das EMPRESAS usam os mesmos CSS de base
   (login-admin.css + auth-tema.css, painel-admin.css + painel-tema.css) e não
   podem ser tocados — é white label, a marca deles é a deles.

   Escala: 1rem = 11px (os temas de base usam 10px). Pedido do dono: tudo ~10%
   maior nas telas da UPWAGE.
   ============================================================================= */

body.upwage-login,
body.upwage-painel {
  --up-bg:       #F0EEE6;
  --up-panel:    #FAF9F5;
  --up-white:    #FFFFFF;
  --up-ink:      #141413;
  --up-ink-2:    #2B2A26;
  --up-muted:    #54524C;
  --up-dim:      #76746C;
  --up-slate:    #C7C4B8;
  --up-line:     rgba(20, 20, 19, 0.12);
  --up-blue:     #41648A;
  --up-blue-400: #6E91BC;
  --up-blue-200: #A9C0DB;
  --up-dark:     linear-gradient(180deg, #211F1B 0%, #141413 55%, #0E0E0C 100%);
  --up-sans:     "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --up-serif:    "Fraunces", Georgia, "Times New Roman", serif;

  font-family: var(--up-sans);
  -webkit-font-smoothing: antialiased;
}

html:has(> body.upwage-login),
html:has(> body.upwage-painel) { font-size: 11px; }

/* =============================================================================
   LOGIN
   ============================================================================= */

body.upwage-login {
  /* tokens do login-admin.css */
  --bg:       #141413;
  --bg-deep:  #0E0E0C;
  --bg-light: var(--up-bg);
  --blue:     var(--up-ink);
  --blue-h:   var(--up-ink-2);
  --sky:      var(--up-blue-200);
  --ink:      var(--up-ink);
  --ink-mid:  #34332F;
  --ink-soft: var(--up-muted);
  --fog:      var(--up-dim);
  --mist:     #B9B6AC;
  --line:     var(--up-line);
  --surface:  var(--up-panel);
  background: var(--up-bg);
}
body.upwage-login ::selection { background: rgba(65, 100, 138, 0.18); }

/* ---------- formulário ---------- */
body.upwage-login .layout-login-form-area { background: var(--up-bg); }

body.upwage-login .component-login-form-title {
  font-family: var(--up-serif);
  font-weight: 500;
  font-size: 3.4rem;
  letter-spacing: -0.02em;
  color: var(--up-ink);
}
body.upwage-login .component-login-form-subtitle { color: var(--up-muted); }
body.upwage-login .component-login-label { color: #34332F; font-weight: 600; }

body.upwage-login .component-login-input {
  background-color: var(--up-panel);
  border-color: rgba(20, 20, 19, 0.14);
  border-radius: 0.8rem;
  color: var(--up-ink);
  font-family: var(--up-sans);
}
body.upwage-login .component-login-input::placeholder { color: #A3A096; }
body.upwage-login .component-login-input:focus {
  border-color: var(--up-ink);
  box-shadow: 0 0 0 0.4rem rgba(65, 100, 138, 0.16);
}
body.upwage-login .component-login-password-button { color: var(--up-dim); }

body.upwage-login .button-login-submit {
  background: var(--up-ink);
  border-radius: 0.6rem;
  font-family: var(--up-sans);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}
body.upwage-login .button-login-submit:hover {
  background: var(--up-ink-2);
  box-shadow: none;
  transform: none;
}
body.upwage-login .button-login-submit:focus-visible { outline-color: var(--up-blue); }

/* O logo é o do site: preto. A arte é azul — o filtro tira a cor sem pedir
   outro arquivo, e o PNG transparente vira a silhueta. */
body.upwage-login .auth-logo,
body.upwage-login .layout-login-mobile-header__logo img {
  filter: brightness(0);
  opacity: 0.94;
}

@media (min-width: 769px) {
  body.upwage-login .layout-login-form-area { background: var(--up-bg); }
  body.upwage-login .layout-login-form-box { width: min(100%, 42rem); }
  body.upwage-login .auth-logo { height: 4.4rem; margin-bottom: 4rem; }
  body.upwage-login .layout-login-form-box > .button-login-back { color: var(--up-muted); }
  body.upwage-login .layout-login-form-box > .button-login-back:hover { color: var(--up-ink); }
  body.upwage-login .component-login-input { height: 5rem; background-color: var(--up-panel); }
  body.upwage-login .button-login-submit { height: 5rem; }
}

@media (max-width: 768px) {
  body.upwage-login .component-login-form-title { font-size: 3rem; }
}

/* Celular: o cabeçalho com o logo fica no creme, como o site */
body.upwage-login .layout-login-mobile-header {
  background: var(--up-panel);
  border-bottom: 1px solid var(--up-line);
}
body.upwage-login .layout-login-mobile-header__back {
  color: var(--up-ink);
  border-color: var(--up-line);
  background: transparent;
}

/* ---------- marca (direita): a seção escura do site + o globo ---------- */
body.upwage-login .layout-login-brand {
  background: var(--up-dark);
}
body.upwage-login .layout-login-brand::before {
  background-image: radial-gradient(rgba(240, 238, 230, 0.05) 0.1rem, transparent 0.1rem);
  opacity: 1;
}
/* brilho atrás do globo, no azul-aço do site */
body.upwage-login .layout-login-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 70rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 145, 188, 0.20) 0%, rgba(110, 145, 188, 0.06) 38%, transparent 66%);
  pointer-events: none;
}
body.upwage-login .layout-login-brand-content { position: relative; z-index: 2; }

body.upwage-login .login-brand-badge {
  background: rgba(110, 145, 188, 0.10);
  border-color: rgba(110, 145, 188, 0.30);
  color: var(--up-blue-200);
  font-family: var(--up-sans);
  font-weight: 600;
}
body.upwage-login .component-login-title {
  font-family: var(--up-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--up-bg);
}
body.upwage-login .component-login-title span {
  font-style: italic;
  color: var(--up-blue-200);
}
body.upwage-login .component-login-description { color: #B9B6AC; }

/* O globo (substitui o cartão de benefícios das empresas) */
.upwage-globo {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.upwage-globo canvas {
  width: min(100%, 100%);
  height: auto;
  aspect-ratio: 1;
  max-height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
  cursor: grab;
  touch-action: pan-y;
  contain: layout paint size;
}
.upwage-globo canvas:active { cursor: grabbing; }
.upwage-globo.upwage-globo--pronto canvas { opacity: 1; }
/* sem WebGL o canvas fica vazio: some, e o texto ocupa o lado da marca */
.upwage-globo.upwage-globo--sem-webgl { display: none; }

@media (min-width: 769px) {
  body.upwage-login .layout-login-brand { gap: 3.2rem; padding: 4.8rem 5.6rem; }
  body.upwage-login .auth-visual.upwage-globo {
    width: min(100%, 62rem);
    height: clamp(36rem, 60vh, 64rem);
  }
  body.upwage-login .component-login-title { font-size: 4rem; line-height: 1.12; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body.upwage-login .auth-visual.upwage-globo { height: 34rem; }
  body.upwage-login .component-login-title { font-size: 3.2rem; }
}
@media (min-width: 769px) and (max-height: 760px) {
  body.upwage-login .auth-visual.upwage-globo { height: 44vh; }
}

/* =============================================================================
   PAINEL
   ============================================================================= */

body.upwage-painel {
  /* moldura: o creme do site, texto escuro */
  --tb-bg:        var(--up-bg);
  --tb-text:      var(--up-ink);
  --tb-text-mute: var(--up-dim);
  --tb-border:    rgba(20, 20, 19, 0.14);

  /* marca: escala do azul-aço (#41648A no 600) */
  --brand-text: #33506F;
  --brand-50:  #F0F4F8;
  --brand-100: #DFE7F0;
  --brand-200: #C3D2E3;
  --brand-300: #9DB6D3;
  --brand-400: #6E91BC;
  --brand-500: #5479A3;
  --brand-600: #41648A;
  --brand-700: #33506F;
  --brand-800: #2A4159;
  --brand-900: #1F3044;
  --brand-950: #141F2C;

  --info-50:  #F0F4F8;
  --info-100: #DFE7F0;
  --info-500: #5479A3;
  --info-700: #33506F;

  /* superfícies quentes */
  --bg-app:      var(--up-panel);
  --bg-app-tint: #F3F1EA;
  --bg-surface:  var(--up-white);
  --bg-muted:    #F7F5EF;
  --bg-subtle:   #EFEDE5;

  --border-subtle: rgba(20, 20, 19, 0.06);
  --border-soft:   rgba(20, 20, 19, 0.10);
  --border-strong: rgba(20, 20, 19, 0.16);

  --text-primary:   var(--up-ink);
  --text-secondary: #3F3E39;
  --text-tertiary:  #6B695F;
  --text-muted:     #9C998F;

  /* menu lateral */
  --sidebar-bg:          var(--up-panel);
  --sidebar-bg-2:        var(--up-panel);
  --sidebar-text:        #2B2A26;
  --sidebar-text-active: var(--up-ink);
  --sidebar-text-mute:   var(--up-dim);
  --sidebar-border:      rgba(20, 20, 19, 0.08);
  --sidebar-active:      #ECE9DF;

  --header-bg: var(--bg-app);

  --shadow-xs:   0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-sm:   0 1px 3px rgba(20, 20, 19, 0.07);
  --shadow-md:   0 4px 12px rgba(20, 20, 19, 0.06);
  --shadow-lg:   0 12px 24px rgba(20, 20, 19, 0.09);
  --shadow-xl:   0 24px 48px rgba(20, 20, 19, 0.16);
  --shadow-card: 0 1px 2px rgba(20, 20, 19, 0.04);

  background: var(--up-bg);
}
body.upwage-painel ::selection { background: rgba(65, 100, 138, 0.18); }

/* ---------- barra de cima: logo preto, etiqueta e "Sair" ---------- */
body.upwage-painel .client-sidebar__logo-full {
  display: block;
  height: 2.8rem;
  width: auto;
  filter: brightness(0);
  opacity: 0.94;
}
body.upwage-painel .client-sidebar__brand-tag {
  background: transparent;
  border-color: rgba(20, 20, 19, 0.16);
  color: var(--up-muted);
  font-family: var(--up-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
}
body.upwage-painel .client-sidebar__close { color: var(--up-dim); background: rgba(20, 20, 19, 0.05); }
body.upwage-painel .client-sidebar__close:hover { color: var(--up-ink); background: rgba(20, 20, 19, 0.10); }

/* ---------- menu ---------- */
body.upwage-painel .client-sidebar__link:hover,
body.upwage-painel .client-sidebar__sublink:hover { background: rgba(20, 20, 19, 0.045); }
body.upwage-painel .client-sidebar__link--active { font-weight: 600; }
body.upwage-painel .client-sidebar__link--active svg,
body.upwage-painel .client-sidebar__link--active:hover svg,
body.upwage-painel .client-sidebar__link:hover svg { color: var(--up-blue); }
body.upwage-painel .client-sidebar__sublink--active::before { background: var(--up-ink); }
body.upwage-painel .client-sidebar__badge { background: var(--up-ink); }
body.upwage-painel .client-sidebar__badge--danger { background: #B4412F; }

/* ---------- títulos: a serifada do site ---------- */
body.upwage-painel .admin-page__title,
body.upwage-painel .client-header__title {
  font-family: var(--up-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body.upwage-painel .admin-page__title { font-size: 2.8rem; }
body.upwage-painel .kpi-card__value {
  font-family: var(--up-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
body.upwage-painel .client-header__icon-btn:hover { background: rgba(20, 20, 19, 0.06); color: var(--up-ink); }

/* ---------- botões: preto chapado, canto 6px (o do site) ---------- */
body.upwage-painel .admin-btn,
body.upwage-painel .modal-btn,
body.upwage-painel .lgpd-btn { border-radius: 0.6rem; font-family: var(--up-sans); font-weight: 600; }

body.upwage-painel .admin-btn--primary,
body.upwage-painel .modal-btn--confirm { background: var(--up-ink); color: #FFFFFF; }
body.upwage-painel .admin-btn--primary:hover,
body.upwage-painel .modal-btn--confirm:hover:not(:disabled) { background: var(--up-ink-2); }
body.upwage-painel .admin-btn--primary:active,
body.upwage-painel .modal-btn--confirm:active { background: #000000; }

body.upwage-painel .admin-btn--secondary {
  background: var(--bg-surface);
  color: var(--up-ink);
  border-color: rgba(20, 20, 19, 0.18);
}
body.upwage-painel .admin-btn--secondary:hover {
  background: #F3F1EA;
  border-color: rgba(20, 20, 19, 0.30);
  color: var(--up-ink);
}

/* ---------- foco e "?" de ajuda: o azul fixo do tema de base vira azul-aço ---------- */
body.upwage-painel .admin-btn:focus-visible,
body.upwage-painel .modal-btn:focus-visible,
body.upwage-painel .admin-action-btn:focus-visible,
body.upwage-painel .admin-filter-btn:focus-visible,
body.upwage-painel .client-sidebar__link:focus-visible,
body.upwage-painel .client-sidebar__sublink:focus-visible { outline-color: var(--up-blue); }
/* "?" de ajuda (ajuda.css): contorno neutro; aberto, preto como o botão */
body.upwage-painel .ajuda {
  border-color: rgba(20, 20, 19, 0.18);
  background: transparent;
  color: #6B695F;
}
body.upwage-painel .ajuda:hover,
body.upwage-painel .ajuda:focus-visible,
body.upwage-painel .ajuda.ajuda--aberta {
  border-color: var(--up-ink);
  background: var(--up-ink);
  color: #FFFFFF;
}
body.upwage-painel .ajuda:focus-visible { box-shadow: 0 0 0 3px rgba(65, 100, 138, 0.25); }
body.upwage-painel .client-sidebar__link > .ajuda:hover,
body.upwage-painel .client-sidebar__link > .ajuda:focus-visible,
body.upwage-painel .client-sidebar__link > .ajuda.ajuda--aberta,
body.upwage-painel .client-header__tools .admin-toolbar > .ajuda:hover,
body.upwage-painel .client-header__tools .admin-toolbar > .ajuda:focus-visible,
body.upwage-painel .client-header__tools .admin-toolbar > .ajuda.ajuda--aberta {
  background: var(--up-ink);
  border-color: var(--up-ink);
  color: #FFFFFF;
}
body.upwage-painel .modal-input:focus,
body.upwage-painel .admin-search__input:focus {
  border-color: var(--up-ink);
  box-shadow: 0 0 0 3px rgba(65, 100, 138, 0.15);
}

/* ---------- o título da página no cabeçalho ("Dashboard", "Leads"…) ----------
   O painel-platform.css o escreve em branco (#fff) — sobra da moldura escura:
   sobre o cabeçalho claro ele sumia. Aqui é o título da página, na serifada. */
body.upwage-painel .pf-title {
  color: var(--up-ink);
  font-family: var(--up-serif);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}