/* ============================================================
   PORTAL DO PARCEIRO · DECOLOU ASSESSORIA
   Identidade visual herdada do site institucional (index.html):
   mesmas cores, tipografia (Fraunces + DM Sans), botões pill,
   cards com faixa vermelha, bordas suaves e animações.
   ============================================================ */

/* ── RESET & TOKENS ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #1a3a7c;
  --navy2:  #22489a;
  --red:    #c8102e;
  --red2:   #e01030;
  --cream:  #f7f6f2;
  --white:  #fff;
  --text:   #1a2744;
  --muted:  #5a6e98;
  --border: rgba(26,58,124,0.10);
  --border2:rgba(26,58,124,0.16);
  --soft:   rgba(26,58,124,0.04);
  --soft2:  rgba(26,58,124,0.06);
  --r:      14px;
  --shadow: 0 8px 32px rgba(26,58,124,0.10);
  --shadow-sm: 0 1px 16px rgba(26,58,124,0.06);
  --sidebar-w: 264px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }

/* Elementos utilitários compartilhados ── */
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--red);
}
[hidden] { display: none !important; }

/* ============================================================
   LOGIN  (herda a identidade sem mexer no login.js)
   ============================================================ */
.tela {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(26,58,124,0.07), transparent 70%),
    var(--cream);
}

.cartao {
  width: 100%; max-width: 400px;
  padding: 44px 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.cartao::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red2));
}

.login-marca {
  display: flex; align-items: center; gap: 11px; margin-bottom: 26px;
}
.login-marca img { height: 40px; width: auto; display: block; }
.login-marca .marca-nome {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 22px;
  color: var(--navy); line-height: 1;
}
.login-marca .marca-sub {
  font-size: 10px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

.titulo {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: 27px; line-height: 1.15; color: var(--navy);
  letter-spacing: -.01em;
}
.titulo em { font-style: italic; }

.subtitulo {
  margin: 8px 0 28px;
  font-size: 14.5px; font-weight: 300; color: var(--muted); line-height: 1.6;
}

.campo { margin-bottom: 18px; }
.campo label {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.campo input,
.campo select {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px; font-family: inherit; color: var(--text);
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26,58,124,0.10);
}
.campo input:disabled {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
}

.erro {
  margin: 0 0 18px;
  padding: 11px 14px;
  font-size: 13.5px; color: var(--red);
  background: #fdf0f2;
  border: 1px solid rgba(200,16,46,.2);
  border-radius: 10px;
}

/* Botão principal (pill vermelho, igual ao site) ── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 15px 24px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  color: #fff; background: var(--red);
  border: 0; border-radius: 100px; cursor: pointer;
  transition: opacity .18s, transform .18s;
}
.botao:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.botao:disabled { opacity: .55; cursor: not-allowed; }

/* Login: no desktop, formulário + card institucional lado a lado (2 colunas);
   no mobile empilham (ver media query no bloco RESPONSIVO). ── */
.login-col {
  width: 100%; max-width: 860px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch;
}
.login-col .cartao { max-width: none; }

/* Card institucional do Programa de Parceiros (complemento, não landing page) ── */
.cartao-cta {
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 26px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.cta-titulo {
  font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.cta-texto {
  font-size: 13.5px; font-weight: 300; color: var(--muted); line-height: 1.6;
  margin-bottom: 16px;
}
.cta-botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 20px;
  font-size: 14px; font-weight: 500;
  color: #fff; background: var(--navy);
  border-radius: 100px; text-decoration: none;
  transition: background .18s, transform .18s;
}
.cta-botao:hover { background: var(--navy2); transform: translateY(-1px); }

/* ============================================================
   SHELL DO PORTAL  (sidebar + topbar mobile + conteúdo)
   ============================================================ */
.portal {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}

/* ── Sidebar ── */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 26px 18px;
  background: var(--white);
  border-right: 1px solid var(--border);
}

.sidebar-marca {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 10px 22px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-marca img { height: 38px; width: auto; display: block; }
.sidebar-marca .marca-nome {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 20px;
  color: var(--navy); line-height: 1;
}
.sidebar-marca .marca-sub {
  font-size: 9.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  font-size: 14.5px; font-weight: 400; color: var(--text);
  text-decoration: none; border-radius: 10px;
  position: relative;
  transition: background .15s, color .15s;
}
.sidebar-nav a .ico {
  font-size: 17px; width: 22px; text-align: center; flex-shrink: 0;
  opacity: .8;
}
.sidebar-nav a:hover { background: var(--soft2); color: var(--navy); }
.sidebar-nav a.ativo {
  background: var(--soft2); color: var(--navy); font-weight: 500;
}
.sidebar-nav a.ativo::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--red);
}

.sidebar-rodape {
  padding-top: 16px; margin-top: 12px;
  border-top: 1px solid var(--border);
}
.btn-sair {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  font-size: 13.5px; font-weight: 400; font-family: inherit;
  color: var(--muted); background: none;
  border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.btn-sair:hover { background: var(--soft2); color: var(--red); }

/* ── Topbar (só mobile) ──
   As regras de `.topbar`, `.topbar-marca` e `.hamburguer` foram movidas para
   ../../css/menu-movel.css, compartilhado com o Admin V2, para que os dois
   produtos não mantenham duas cópias do mesmo componente.
   Carregado no <head> de cada página do portal, ANTES desta folha.
   A media query que exibe a topbar (820px) continua aqui embaixo. */

/* Menu mobile ──
   Regras movidas para ../../css/menu-movel.css, componente compartilhado com
   o Admin V2, para que os dois produtos usem o mesmo painel. A media query
   que esconde a sidebar (820px) continua nesta folha. */
/* ── Conteúdo ── */
.conteudo {
  min-width: 0;
  padding: 44px 48px 64px;
  max-width: 1180px;
}

/* ============================================================
   CABEÇALHO DE PÁGINA
   ============================================================ */
.pagina-cabecalho { margin-bottom: 36px; }
.pagina-cabecalho .eyebrow { margin-bottom: 14px; }
.pagina-titulo {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12; color: var(--navy);
  letter-spacing: -.01em;
}
.pagina-titulo em { font-style: italic; }
.pagina-sub {
  margin-top: 12px;
  font-size: 16px; font-weight: 300; color: var(--muted); line-height: 1.6;
  max-width: 560px;
}

/* Identidade do parceiro (dashboard) ── */
.parceiro-info {
  display: flex; flex-wrap: wrap; gap: 10px 36px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.parceiro-info .item .rot {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.parceiro-info .item .val {
  font-size: 16px; font-weight: 600; color: var(--text);
}
/* Indicador "Parceiro ativo": mesma aparência do badge do footer do site. ── */
.badge-ativo {
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
  padding: 4px 12px 4px 9px;
  background: rgba(26,58,124,0.04);
  border: 1px solid rgba(26,58,124,0.10);
  border-radius: 100px;
  font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--muted);
}
.badge-ativo-dot {
  width: 6.5px; height: 6.5px; border-radius: 50%; flex-shrink: 0;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.16);
}

/* ============================================================
   CARDS DE INDICADORES
   ============================================================ */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 36px;
}
.indicador {
  position: relative; overflow: hidden;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.indicador::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red2));
}
.indicador:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(26,58,124,0.14);
}
.indicador .ind-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.indicador .ind-ico { font-size: 18px; opacity: .8; }
.indicador .ind-rot {
  font-size: 11px; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--navy);
}
.indicador .ind-val {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 48px;
  line-height: 1.05; color: var(--navy); letter-spacing: -.02em;
}

/* ============================================================
   SKELETON LOADING (apenas Dashboard, controlado por dashboard-ui.js)
   Discreto, na paleta institucional, shimmer suave e CSS puro.
   ============================================================ */
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes revela { from { opacity: 0; } to { opacity: 1; } }

.carregando #nome-parceiro,
.carregando #parceiro-desde,
.carregando .badge-ativo,
.carregando #link-indicacao,
.carregando .ind-val {
  color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--soft2) 25%, rgba(26,58,124,0.11) 50%, var(--soft2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  pointer-events: none;
}
.carregando .badge-ativo { width: 116px; height: 26px; border-color: transparent; }
.carregando .badge-ativo * { visibility: hidden; }
.carregando #nome-parceiro {
  display: inline-block; width: min(240px, 55vw); height: .72em; vertical-align: middle;
}
.carregando #parceiro-desde { display: inline-block; width: 120px; height: 1em; }
.carregando .ind-val { display: inline-block; width: 84px; max-width: 70%; height: 40px; }
.carregando .btn-copiar { visibility: hidden; }

/* Revela o conteúdo suavemente quando a carga termina. ── */
.carregado #nome-parceiro,
.carregado #parceiro-desde,
.carregado .badge-ativo,
.carregado #link-indicacao,
.carregado .ind-val { animation: revela .3s ease; }

/* ============================================================
   CARDS / PAINÉIS GENÉRICOS
   ============================================================ */
.painel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  margin-bottom: 28px;
}
.painel-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.painel-titulo {
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 22px;
  color: var(--navy);
}
.painel-titulo em { font-style: italic; }
.painel-desc { margin-top: 4px; font-size: 13.5px; font-weight: 300; color: var(--muted); }

/* ── Link de indicação ── */
.link-caixa {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.link-campo {
  flex: 1; min-width: 220px;
  display: flex; align-items: center;
  padding: 13px 16px;
  font-size: 14.5px; color: var(--text);
  background: var(--soft); border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'DM Sans', monospace;
}
.btn-copiar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  color: #fff; background: var(--navy);
  border: 0; border-radius: 100px; cursor: pointer; white-space: nowrap;
  transition: background .18s, transform .18s;
}
.btn-copiar:hover { background: var(--navy2); transform: translateY(-1px); }
.btn-copiar.copiado { background: #1f8a4c; }

.link-topo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--red);
  text-decoration: none;
}
.link-topo:hover { text-decoration: underline; }

/* ============================================================
   TABELAS
   ============================================================ */
.tabela-wrap { overflow-x: auto; }
.tabela {
  width: 100%; border-collapse: collapse; min-width: 480px;
}
.tabela thead th {
  text-align: left; padding: 0 16px 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--border);
}
.tabela tbody td {
  padding: 15px 16px;
  font-size: 14.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover td { background: var(--soft); }
.tabela .cel-cliente { font-weight: 500; }
.tabela .vazio {
  text-align: center; color: var(--muted); font-weight: 300;
  padding: 40px 16px;
}

/* Estado vazio: ícone discreto + mensagem amigável ── */
.estado-vazio {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px;
  padding: 44px 24px;
}
.estado-vazio-ico {
  font-size: 34px; line-height: 1; margin-bottom: 8px; opacity: .85;
}
.estado-vazio-titulo {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.estado-vazio-texto {
  font-size: 13.5px; font-weight: 300; color: var(--muted);
  line-height: 1.55; max-width: 380px;
}

/* Selos de situação ── */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px;
  font-size: 12px; font-weight: 500; border-radius: 100px;
  white-space: nowrap;
}
.selo::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.selo-andamento { color: #b26a00; background: #fff5e6; }
.selo-fechado   { color: #1f8a4c; background: #eaf7ef; }
.selo-cancelado { color: var(--muted); background: var(--soft2); }

.nota {
  padding: 14px 16px;
  font-size: 13.5px; font-weight: 300; color: #7a5b12; line-height: 1.55;
  background: #fdf8ec; border: 1px solid rgba(180,120,0,.22);
  border-radius: 10px;
}

/* ============================================================
   MATERIAIS
   ============================================================ */
.materiais-grupo { margin-bottom: 40px; }
.materiais-grupo .grupo-titulo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', serif; font-weight: 300; font-size: 22px;
  color: var(--navy); margin-bottom: 18px;
}
.materiais-grupo .grupo-titulo .cont {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--muted); background: var(--soft2);
  padding: 3px 10px; border-radius: 100px;
}
.materiais-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.material-card {
  display: flex; flex-direction: column;
  padding: 22px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.material-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border2);
}
.material-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
  background: var(--soft2); color: var(--navy);
}
.material-nome { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.material-desc {
  font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.55;
  flex: 1; margin-bottom: 16px;
}
.material-acao {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--red);
}

/* ============================================================
   DADOS DA PARCERIA (somente leitura)
   ============================================================ */
.parceria-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
}
.parceria-item { display: flex; flex-direction: column; gap: 5px; }
.parceria-rot {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.parceria-val { font-size: 16px; font-weight: 600; color: var(--text); }

/* ============================================================
   FORMULÁRIO DE PERFIL
   ============================================================ */
/* Desktop: "Dados pessoais" e "Dados bancários" lado a lado;
   telas menores empilham (ver bloco RESPONSIVO). ── */
.perfil-grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.perfil-grade .painel { margin-bottom: 0; }

.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grade .campo { margin-bottom: 0; }
.form-grade .col-2 { grid-column: 1 / -1; }
.form-rodape {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border);
}
.form-rodape .botao { width: auto; }
.form-status { font-size: 13.5px; font-weight: 500; }
.form-status.ok { color: #1f8a4c; }
.form-status.falha { color: var(--red); }

/* Radio de forma de recebimento (PIX x Conta) ── */
.radio-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-opcao {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; flex: 1; min-width: 160px;
  border: 1px solid var(--border2); border-radius: 10px; cursor: pointer;
  font-size: 14.5px; transition: border-color .15s, background .15s;
}
.radio-opcao:hover { background: var(--soft); }
.radio-opcao input { accent-color: var(--navy); width: 17px; height: 17px; }
.radio-opcao.marcada { border-color: var(--navy); background: var(--soft2); }

.opcional { font-weight: 400; font-size: 12px; color: var(--muted); }

/* Conta + dígito na mesma linha ── */
.conta-digito { display: flex; gap: 10px; }
.conta-digito #conta { flex: 1; min-width: 0; }
.conta-digito .campo-digito { width: 80px; flex-shrink: 0; }

/* Entrada suave dos campos ao alternar PIX x Conta (CSS puro; a animação
   se repete sempre que o campo volta a ser exibido). ── */
@keyframes campoEntra {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modo-pix, .modo-conta { animation: campoEntra .18s ease; }

/* ============================================================
   RESPONSIVO
   Mesmo comportamento do site institucional: sidebar some,
   topbar + hamburger assumem no mobile.
   ============================================================ */
@media (max-width: 1024px) {
  .conteudo { padding: 40px 32px 56px; }
}

@media (max-width: 900px) {
  .form-grade { grid-template-columns: 1fr; }
  .perfil-grade { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .portal { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { display: flex; }
  .conteudo { padding: 28px 20px 56px; }
  .pagina-cabecalho { margin-bottom: 28px; }
  .parceiro-info { gap: 14px 28px; }
}

@media (max-width: 720px) {
  .login-col { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 600px) {
  .conteudo { padding: 24px 16px 48px; }
  .painel { padding: 22px 18px; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: 12px; }
  .indicador { padding: 18px; }
  .indicador .ind-val { font-size: 36px; }
  .link-caixa { flex-direction: column; }
  .btn-copiar { justify-content: center; }
  .materiais-grade { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .indicadores { grid-template-columns: 1fr; }
  .cartao { padding: 34px 24px; }
}

/* Respeita quem prefere menos movimento (acessibilidade/performance). ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}