/* Oitava Turma — Área do Assinante (login, cadastro, painel, admin) */

.auth-wrap { min-height:calc(100vh - 300px); display:flex; align-items:center; justify-content:center; padding:64px 24px; }
.auth-card { width:100%; max-width:420px; background:white; border:1px solid rgba(11,27,48,0.1); border-radius:8px; padding:40px 36px; box-shadow:0 12px 32px rgba(11,27,48,0.06); }
.auth-card .tag { font-size:12px; letter-spacing:2.5px; color:var(--burg); text-transform:uppercase; font-weight:600; display:block; margin-bottom:10px; }
.auth-card h1 { font-size:26px; color:var(--navy); margin-bottom:8px; }
.auth-card p.lead { font-size:14px; color:var(--gray); margin-bottom:28px; line-height:1.55; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.4px; }
.field input, .field textarea, .field select {
  width:100%; padding:11px 13px; border:1.5px solid rgba(11,27,48,0.15); border-radius:5px;
  font-family:'Work Sans', sans-serif; font-size:14.5px; color:var(--darktxt); background:var(--sand);
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--burg); background:white; }
.field textarea { resize:vertical; min-height:160px; line-height:1.6; }
.field-hint { font-size:12px; color:var(--gray); margin-top:5px; }
.btn-full { width:100%; text-align:center; padding:13px 24px; }
.auth-foot { text-align:center; margin-top:22px; font-size:13.5px; color:var(--gray); }
.auth-foot a { color:var(--burg); font-weight:600; }

.alert { padding:13px 16px; border-radius:5px; font-size:13.5px; margin-bottom:20px; line-height:1.5; }
.alert-error { background:rgba(107,39,55,0.08); border:1px solid rgba(107,39,55,0.25); color:var(--burg); }
.alert-success { background:rgba(31,74,129,0.08); border:1px solid rgba(31,74,129,0.25); color:var(--royal); }
.alert-info { background:rgba(122,122,118,0.1); border:1px solid rgba(122,122,118,0.25); color:var(--darktxt); }

/* Painel do assinante / admin */
.dash-hero { background:var(--navy); color:var(--sand); padding:48px 0 40px; }
.dash-hero .tag { color:var(--burg-l); font-size:13px; letter-spacing:3px; text-transform:uppercase; font-weight:600; display:block; margin-bottom:12px; }
.dash-hero h1 { font-size:30px; color:var(--sand); margin-bottom:8px; }
.dash-hero p { color:rgba(240,239,230,0.75); font-size:15px; }

.status-pill { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; }
.status-pendente { background:rgba(122,122,118,0.15); color:var(--gray); }
.status-ativo, .status-aprovado { background:rgba(31,74,129,0.12); color:var(--royal); }
.status-cancelado, .status-rejeitado { background:rgba(107,39,55,0.12); color:var(--burg); }

.dash-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:32px; padding:40px 0 64px; align-items:start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns:1fr; } }

.card { background:white; border:1px solid rgba(11,27,48,0.08); border-radius:8px; padding:28px 30px; margin-bottom:24px; }
.card h3 { font-size:18px; color:var(--navy); margin-bottom:18px; }

.sub-table { width:100%; border-collapse:collapse; }
.sub-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--gray); padding:8px 10px; border-bottom:2px solid rgba(11,27,48,0.08); }
.sub-table td { padding:12px 10px; font-size:14px; border-bottom:1px solid rgba(11,27,48,0.06); vertical-align:top; }
.sub-table tr:last-child td { border-bottom:none; }
.empty-note { color:var(--gray); font-size:14px; padding:14px 0; }

.mini-btn { display:inline-block; padding:6px 14px; border-radius:4px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; cursor:pointer; border:1.5px solid transparent; }
.mini-btn-approve { background:var(--royal); color:white; }
.mini-btn-approve:hover { opacity:.88; }
.mini-btn-reject { border-color:var(--burg); color:var(--burg); }
.mini-btn-reject:hover { background:rgba(107,39,55,0.08); }

.plan-box { background:var(--navy); color:var(--sand); border-radius:8px; padding:28px 30px; }
.plan-box h3 { color:var(--sand); font-size:17px; margin-bottom:10px; }
.plan-box p { font-size:13.5px; color:rgba(240,239,230,0.75); line-height:1.6; margin-bottom:18px; }

/* Painel do assinante — atalhos rápidos (barra de links em texto, no mesmo
   estilo do menu principal do site: maiúsculas, espaçadas, sem ícones) */
.dash-quicklinks {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px;
  margin:28px 0 8px; padding:16px 22px;
  background:white; border:1.5px solid rgba(11,27,48,0.1); border-radius:8px;
}
.dash-tile {
  font-size:13px; font-weight:600; color:var(--darktxt); text-decoration:none;
  text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap;
  padding:4px 0; border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s;
}
.dash-tile:hover { color:var(--burg); border-color:var(--burg); }
@media (max-width: 640px) {
  .dash-quicklinks { gap:12px 18px; padding:14px 18px; }
}

/* Fluxo guiado (planos.php / cadastro.php) */
.flow-steps { display:flex; align-items:center; justify-content:center; gap:10px; max-width:520px; margin:0 auto; }
.flow-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; text-align:center; }
.flow-step-num {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; background:rgba(11,27,48,0.08); color:var(--gray);
}
.flow-step-label { font-size:11.5px; font-weight:600; color:var(--gray); letter-spacing:0.2px; }
.flow-step--active .flow-step-num { background:var(--burg); color:white; }
.flow-step--active .flow-step-label { color:var(--navy); }
.flow-step--done .flow-step-num { background:var(--royal); color:white; }
.flow-step--done .flow-step-label { color:var(--navy); }
.flow-step-line { height:1.5px; background:rgba(11,27,48,0.12); flex:0 0 40px; margin-bottom:20px; }

/* Vitrine de planos (assinante/planos.php) — 4 colunas lado a lado, com o
   plano intermediário em destaque, no padrão comum de páginas de preço
   (cartões brancos, barra de cor no topo, plano recomendado elevado). */
.planos-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; align-items:start; }
@media (max-width: 1080px) { .planos-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .planos-grid { grid-template-columns:1fr; } }
.plano-card {
  position:relative; background:white; border:1px solid rgba(11,27,48,0.09); border-radius:14px;
  padding:36px 26px 30px; display:flex; flex-direction:column;
  box-shadow:0 2px 12px rgba(11,27,48,0.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plano-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gray); border-radius:14px 14px 0 0; }
.plano-card:hover { transform:translateY(-5px); box-shadow:0 20px 36px rgba(11,27,48,0.1); }
.plano-card--royal::before { background:var(--royal); }
.plano-card--burg::before { background:var(--burg); }
.plano-card--navy::before { background:var(--navy); }
.plano-card--atual { border-color:var(--burg); }
/* Plano em destaque (mais popular): levemente elevado sobre os demais */
.plano-card--destaque {
  border-color:rgba(107,39,55,0.3); box-shadow:0 14px 32px rgba(107,39,55,0.12);
  margin-top:-14px; padding-top:48px; padding-bottom:38px;
}
.plano-card--destaque:hover { box-shadow:0 24px 44px rgba(107,39,55,0.18); }
@media (max-width: 1080px) { .plano-card--destaque { margin-top:0; padding-top:36px; padding-bottom:30px; } }
.plano-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--burg); color:white; font-size:10px;
  font-weight:700; text-transform:uppercase; letter-spacing:0.6px; padding:5px 14px; border-radius:20px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(107,39,55,0.25);
}
.plano-badge--atual { left:auto; right:16px; top:-10px; transform:none; background:var(--royal); box-shadow:0 4px 10px rgba(31,74,129,0.25); }
.plano-nome { font-size:18px; color:var(--navy); margin:6px 0 4px; }
.plano-tagline { font-size:12.5px; color:var(--gray); line-height:1.5; min-height:34px; margin-bottom:4px; }
.plano-preco { margin:14px 0 22px; padding-bottom:20px; border-bottom:1px solid rgba(11,27,48,0.08); min-height:64px; }
.plano-preco-valor { font-family:'Lora',serif; font-size:30px; font-weight:700; color:var(--navy); }
.plano-preco-periodo { font-size:13px; color:var(--gray); }
.plano-preco-ano { font-size:11.5px; color:var(--gray); margin-top:4px; }
.plano-recursos { list-style:none; margin:0 0 24px; flex:1; }
.plano-recursos li { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--darktxt); padding:6px 0; }
.plano-recursos .recurso-icone {
  flex-shrink:0; width:18px; height:18px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
}
.plano-recursos .recurso-on .recurso-icone { background:rgba(31,74,129,0.12); color:var(--royal); }
.plano-recursos .recurso-off { color:var(--gray); }
.plano-recursos .recurso-off .recurso-icone { background:rgba(122,122,118,0.12); color:var(--gray); }

/* Quadro compacto de planos (assinante/cadastro.php, passo 1 do fluxo) */
.planos-grid--compacto .plano-card { padding:26px 20px; }
.planos-grid--compacto .plano-card--destaque { margin-top:0; padding-top:26px; padding-bottom:20px; }
.plano-card--clicavel { cursor:pointer; text-decoration:none; }
.plano-card--clicavel:hover { border-color:var(--burg); box-shadow:0 14px 28px rgba(11,27,48,0.1); transform:translateY(-4px); }

/* Cartão do plano escolhido (assinante/cadastro.php, passo 2) — mesmo visual da
   seção "Área do assinante" da home (id="assinante" em build_site.py). */
.sub-section { background:linear-gradient(135deg, var(--royal), var(--navy)); color:var(--sand); border-radius:10px; padding:48px 44px; }
.sub-section--compacto { padding:36px 40px; }
.sub-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sub-price { font-family:'Lora',serif; font-size:42px; font-weight:700; }
.sub-price span { font-size:16px; font-weight:400; font-family:'Work Sans'; }
.benefit-list { list-style:none; margin-top:16px; }
.benefit-list li { padding:8px 0; border-bottom:1px solid rgba(240,239,230,0.15); font-size:14px; display:flex; gap:10px; }
.benefit-list li:last-child { border-bottom:none; }
.check { color:var(--burg-l); font-weight:700; }
@media (max-width: 760px) {
  .sub-grid { grid-template-columns:1fr; }
  .sub-section, .sub-section--compacto { padding:32px 24px; }
}

/* Plano atual em destaque no painel do assinante */
.plan-box-eyebrow { display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--burg-l); font-weight:700; margin-bottom:6px; }
.plan-box-nome { font-size:22px !important; margin-bottom:10px !important; }
.plan-box-meta { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.plan-box-preco { font-size:13.5px; color:rgba(240,239,230,0.8); font-weight:600; }

/* Foto de autor (planos Prática e Full) */
.foto-autor-row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.foto-autor-preview { width:76px; height:76px; border-radius:50%; overflow:hidden; flex-shrink:0; background:rgba(11,27,48,0.06); display:flex; align-items:center; justify-content:center; }
.foto-autor-preview img { width:100%; height:100%; object-fit:cover; }
.foto-autor-placeholder { font-family:'Lora',serif; font-size:28px; font-weight:700; color:var(--gray); text-transform:uppercase; }
.foto-autor-form { flex:1; min-width:220px; }
.foto-autor-form input[type="file"] { font-size:12.5px; }

/* Avatar do autor junto às publicações (post.php / comunidade.php) */
.autor-byline { display:flex; align-items:center; gap:8px; }
.autor-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* Tela de bloqueio (jusatual.php) */
.locked-icon { width:38px; height:38px; border-radius:50%; background:rgba(107,39,55,0.08); color:var(--burg);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.locked-icon svg { width:17px; height:17px; }


/* Painel do assinante — abas de conteúdo (Publicar / Meus Cursos / Minha IA / Comunidade) */
.dash-tile--active { color:var(--burg); border-color:var(--burg); }
.painel-pane { display:none; }
.painel-pane--active { display:block; }

/* Estado vazio das abas Meus Cursos / Minha IA */
.pane-empty { text-align:center; padding:34px 20px 26px; }
.pane-empty-icon {
  width:54px; height:54px; border-radius:50%; background:rgba(11,27,48,0.06); color:var(--gray);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.pane-empty h4 { font-family:'Lora',serif; font-size:18px; color:var(--navy); margin-bottom:8px; }
.pane-empty p { font-size:13.5px; color:var(--gray); line-height:1.6; max-width:440px; margin:0 auto 18px; }

/* Lista de benefícios da aba Minha IA */
.ia-fase-list { list-style:none; margin:4px 0 24px; }
.ia-fase-list li { display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size:13.5px; line-height:1.55; color:var(--darktxt); border-bottom:1px solid rgba(11,27,48,0.06); }
.ia-fase-list li:last-child { border-bottom:none; }
.ia-fase-list .check-ok { color:var(--royal); font-weight:700; flex-shrink:0; }
.ia-fase-list .check-off { color:var(--gray); font-weight:700; flex-shrink:0; }

/* Botão do grupo do WhatsApp (aba Comunidade) */
.btn-whatsapp {
  display:inline-flex; align-items:center; gap:10px; background:#25D366; color:white;
  font-weight:700; font-size:14px; letter-spacing:0.2px; padding:13px 24px; border-radius:6px;
  text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.btn-whatsapp:hover { background:#1EBE5B; transform:translateY(-1px); }
.btn-whatsapp svg { width:19px; height:19px; flex-shrink:0; }
