/* ============================================================
   Área de Membros · Empresário Ciborgue — portal.css
   Protótipo com dados fictícios. Reaproveita os tokens de marca
   de site/assets/styles.css. Não é o mesmo arquivo de propósito:
   este cobre componentes de app (sidebar, tabela, timeline) que
   o site de vendas não tem.
   ============================================================ */

:root{
  --cor-tinta:#141413;
  --cor-papel:#FAF9F5;
  --cor-humano:#E8602C;
  --cor-maquina:#3173B8;
  --cor-texto-suave:#6B675E;
  --cor-linha:#E6E1D5;
  --cor-papel-2:#F2EFE7;
  --cor-texto-claro:rgba(250,249,245,.92);
  --cor-texto-claro-suave:rgba(250,249,245,.62);
  --cor-linha-escura:rgba(250,249,245,.14);
  --fonte-titulo:'Poppins',system-ui,-apple-system,sans-serif;
  --fonte-corpo:'Poppins',system-ui,-apple-system,sans-serif;
  --fonte-mono:'Space Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --raio:14px; --raio-sm:8px; --raio-pill:999px;
  --sidebar-w:264px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fonte-corpo);
  font-weight:300;
  color:var(--cor-tinta);
  background:var(--cor-papel-2);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:700;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(1.7rem,4vw,2.2rem);letter-spacing:-.3px}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:0 0 .9rem}
.lead{font-size:1.02rem;color:var(--cor-texto-suave)}

.eyebrow{
  font-family:var(--fonte-mono);text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--cor-texto-suave);
  display:inline-block;margin-bottom:.7rem;font-weight:400;
}
.tag-mono{font-family:var(--fonte-mono);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}
.tag-mono .h{color:var(--cor-humano)}
.tag-mono .m{color:var(--cor-maquina)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--fonte-mono);text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;background:var(--cor-humano);color:#fff;
  padding:13px 22px;border-radius:var(--raio-sm);border:0;cursor:pointer;
  transition:opacity .15s ease;
}
.btn:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--cor-tinta);border:1.5px solid var(--cor-linha)}
.btn--ghost:hover{background:#fff}
.btn--sm{padding:9px 16px;font-size:.72rem}
.btn--full{width:100%}

/* ---------- Símbolo / wordmark ---------- */
.ec-lockup{display:flex;align-items:center;gap:12px}
.ec-wm{display:flex;flex-direction:column;line-height:1;font-family:var(--fonte-titulo)}
.ec-wm b{font-weight:300;letter-spacing:.16em;font-size:.68rem}
.ec-wm strong{font-weight:700;letter-spacing:.03em;font-size:.92rem}

/* ============================================================
   LOGIN
   ============================================================ */
.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:32px 18px;background:var(--cor-tinta);
}
.login-card{
  width:100%;max-width:400px;background:var(--cor-papel);
  border-radius:var(--raio);padding:38px 30px;
}
.login-card .ec-lockup{justify-content:center;margin-bottom:26px}
.login-card .ec-wm{color:var(--cor-tinta)}
.login-card h1{text-align:center;font-size:1.4rem;margin-bottom:.3em}
.login-card .lead{text-align:center;font-size:.92rem;margin-bottom:1.6rem}
.campo{margin-bottom:16px}
.campo label{
  display:block;font-family:var(--fonte-mono);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.12em;color:var(--cor-texto-suave);margin-bottom:6px;
}
.campo input{
  width:100%;padding:12px 14px;border:1.5px solid var(--cor-linha);
  border-radius:var(--raio-sm);font-family:var(--fonte-corpo);font-size:.95rem;
  background:#fff;color:var(--cor-tinta);
}
.campo input:focus{outline:2px solid var(--cor-maquina);outline-offset:1px}
.login-aviso{
  font-size:.78rem;color:var(--cor-texto-suave);text-align:center;margin-top:14px;
}
.login-aviso a{color:var(--cor-maquina);border-bottom:1px solid currentColor}
.login-erro{
  font-size:.82rem;color:var(--cor-humano);background:#FCEBE2;
  border-radius:var(--raio-sm);padding:10px 12px;margin:0 0 14px;
}
.login-ok{
  font-size:.82rem;color:var(--cor-maquina);background:#EAF1FA;
  border-radius:var(--raio-sm);padding:10px 12px;margin:0 0 14px;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 auto;background:var(--cor-tinta);
  color:var(--cor-texto-claro);padding:26px 20px;position:fixed;top:0;bottom:0;left:0;
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .2s ease;z-index:40;
}
.sidebar.aberta{transform:translateX(0)}
.sidebar .ec-wm{color:var(--cor-texto-claro)}
.sidebar__topo{margin-bottom:30px}
.sidebar__conta{
  font-family:var(--fonte-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--cor-texto-claro-suave);margin-top:14px;padding-top:14px;
  border-top:1px solid var(--cor-linha-escura);text-transform:uppercase;
}

.nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--raio-sm);
  font-size:.9rem;color:var(--cor-texto-claro-suave);transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:rgba(250,249,245,.06);color:var(--cor-texto-claro)}
.nav a.ativo{background:var(--cor-humano);color:#fff}
.nav__icone{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.nav__icone svg{width:100%;height:100%}

.sidebar__rodape{border-top:1px solid var(--cor-linha-escura);padding-top:16px;margin-top:16px}
.sidebar__rodape a{
  display:flex;align-items:center;gap:10px;font-size:.84rem;
  color:var(--cor-texto-claro-suave);padding:8px 12px;
}
.sidebar__rodape a:hover{color:var(--cor-texto-claro)}

.overlay{
  position:fixed;inset:0;background:rgba(20,20,19,.5);z-index:30;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.overlay.ativo{opacity:1;pointer-events:auto}

.main{flex:1;min-width:0;padding:20px 18px 60px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:22px;
}
.topbar__hamb{
  width:40px;height:40px;border-radius:var(--raio-sm);border:1.5px solid var(--cor-linha);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex:0 0 auto;
}
.topbar__hamb span,.topbar__hamb::before,.topbar__hamb::after{
  content:"";display:block;width:16px;height:2px;background:var(--cor-tinta);
}
.topbar__hamb{flex-direction:column;gap:3px}
.topbar__simbolo{width:30px;height:30px;flex:0 0 auto}
.topbar__simbolo svg{width:100%;height:100%}

.view{display:none}
.view.ativa{display:block;animation:aparece .18s ease}
@keyframes aparece{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.wrap-app{max-width:920px}

/* ---------- Cards ---------- */
.grid{display:grid;gap:16px}
.card{
  background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);
  padding:22px;
}
.card--tinta{background:var(--cor-tinta);color:var(--cor-texto-claro);border:0}
.card--tinta .eyebrow{color:var(--cor-texto-claro-suave)}
.card--destaque{border-color:var(--cor-humano);border-width:1.5px}
.card__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--fonte-mono);
  text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;
  padding:5px 10px;border-radius:var(--raio-pill);white-space:nowrap;
}
.badge--realizada{background:#EAF1FA;color:var(--cor-maquina)}
.badge--confirmada{background:#FCEBE2;color:var(--cor-humano)}
.badge--cancelada{background:var(--cor-papel-2);color:var(--cor-texto-suave)}
.badge--ativa{background:#EAF1FA;color:var(--cor-maquina)}
.badge--bloqueada{background:var(--cor-papel-2);color:var(--cor-texto-suave)}

/* ---------- Progresso ---------- */
.progresso__barra{
  height:8px;border-radius:var(--raio-pill);background:var(--cor-papel-2);
  overflow:hidden;margin:12px 0 8px;
}
.progresso__preenchido{height:100%;background:var(--cor-humano);border-radius:var(--raio-pill)}
.progresso__legenda{font-family:var(--fonte-mono);font-size:.72rem;color:var(--cor-texto-suave);text-transform:uppercase;letter-spacing:.05em}

/* ---------- Tabela ---------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--cor-linha);border-radius:var(--raio)}
table{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
th,td{text-align:left;padding:13px 16px;font-size:.88rem;border-bottom:1px solid var(--cor-linha)}
th{
  font-family:var(--fonte-mono);text-transform:uppercase;font-size:.68rem;
  letter-spacing:.08em;color:var(--cor-texto-suave);font-weight:400;background:var(--cor-papel-2);
}
tr:last-child td{border-bottom:0}
td.acoes{white-space:nowrap}
td.acoes a{color:var(--cor-maquina);border-bottom:1px solid currentColor;font-size:.82rem}

/* Abaixo de 680px a tabela vira uma lista de cartões (um por reunião), em
   vez de forçar rolagem lateral pra ler a linha inteira. O <thead> some
   visualmente mas continua acessível a leitor de tela; os rótulos visuais
   vêm de data-label em cada <td>. */
@media(max-width:679px){
  .tabela-wrap{overflow-x:visible;border:0;border-radius:0}
  table{min-width:0;border-collapse:separate;border-spacing:0 12px;background:transparent}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tr{display:block;background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio)}
  td{display:block;padding:9px 16px;border-bottom:0;font-size:.92rem}
  td:first-child{padding-top:16px;font-size:.98rem}
  td:not(:first-child):not(.acoes)::before{
    content:attr(data-label);display:block;font-family:var(--fonte-mono);
    text-transform:uppercase;font-size:.65rem;letter-spacing:.08em;
    color:var(--cor-texto-suave);margin-bottom:4px;
  }
  td.acoes{border-top:1px solid var(--cor-linha);margin-top:6px;padding:12px 16px 16px}
  td.acoes a{font-size:.85rem}
}

/* ---------- Timeline (jornada) ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline__item{display:flex;gap:16px;padding-bottom:26px;position:relative}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{
  content:"";position:absolute;left:15px;top:32px;bottom:0;width:1.5px;background:var(--cor-linha);
}
.timeline__item:last-child::before{display:none}
.timeline__no{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-family:var(--fonte-mono);font-size:.78rem;font-weight:700;
  border:1.5px solid var(--cor-linha);color:var(--cor-texto-suave);background:#fff;
}
.timeline__item--feito .timeline__no{background:var(--cor-humano);border-color:var(--cor-humano);color:#fff}
.timeline__item--atual .timeline__no{border-color:var(--cor-humano);color:var(--cor-humano)}
.timeline__corpo{padding-top:3px}
.timeline__corpo h3{margin-bottom:2px;font-size:.98rem}
.timeline__meta{font-family:var(--fonte-mono);font-size:.72rem;color:var(--cor-texto-suave);text-transform:uppercase;letter-spacing:.05em}
.timeline__desc{font-size:.86rem;color:var(--cor-texto-suave);margin-top:4px;margin-bottom:0}

/* ---------- Agenda embutida (Cal.com) ---------- */
.agenda-real{
  border:1px solid var(--cor-linha);border-radius:var(--raio);
  overflow:hidden;background:#fff;
}
.agenda-real iframe{display:block;width:100%;height:640px;border:0}
.agenda-nota{
  font-size:.78rem;color:var(--cor-texto-suave);margin-top:14px;padding:12px 14px;
  background:var(--cor-papel-2);border-radius:var(--raio-sm);
}
.agenda-nota code{font-family:var(--fonte-mono);font-size:.92em}

/* ---------- Grid de skills ---------- */
.skill-card{background:#fff;border:1px solid var(--cor-linha);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:8px}
.skill-card--bloqueada{opacity:.62}
.skill-card__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.skill-card h3{margin-bottom:0}
.skill-card p{font-size:.85rem;color:var(--cor-texto-suave);margin:0}

/* ---------- Perfil / form ---------- */
.form-grid{display:grid;gap:16px}
@media(min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}}

/* ---------- Responsivo desktop ---------- */
@media(min-width:900px){
  .sidebar{transform:translateX(0);position:sticky;height:100vh}
  .main{padding:34px 40px 60px;margin-left:0}
  .topbar__hamb{display:none}
  .topbar__simbolo{display:none}
  .overlay{display:none}
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}