/* ──────────────────────────────────────────────────────────
   NR1-X · COLABORADOR PAGE STYLES
   ────────────────────────────────────────────────────────── */

body { background: var(--branco); overflow-x: hidden; }

.col-shell {
  display: flex;
  min-height: 100vh;
  background: var(--branco);
}

/* ── DESKTOP SIDEBAR ── */
.col-side {
  width: var(--sidebar-w);
  background: var(--roxo);
  color: var(--branco);
  padding: var(--s6) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  flex-shrink: 0;
  transition: width 320ms var(--ease-out);
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
}
.col-side.collapsed { width: var(--sidebar-w-collapsed); }
.col-side .sb-h { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2); height: 40px; }
.col-side .nrx-lockup-text { color: var(--branco); }
.col-side .nrx-lockup-mark { background: var(--amarelo); color: var(--roxo); }
.col-side.collapsed .nrx-lockup-text { opacity: 0; }
.col-side-toggle {
  position: absolute; top: 24px; right: 14px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--branco);
  cursor: pointer;
  transition: background 180ms, transform 360ms var(--ease-out);
}
.col-side-toggle svg { width: 14px; height: 14px; }
.col-side-toggle:hover { background: rgba(255,255,255,0.22); }
.col-side.collapsed .col-side-toggle { transform: rotate(180deg); right: 22px; }

.col-side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s4); }
.col-side-nav-label {
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
  padding: var(--s4) var(--s3) var(--s2);
  transition: opacity 200ms ease-out;
}
.col-side.collapsed .col-side-nav-label { opacity: 0; }
.col-side-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3); border-radius: var(--r-sm);
  color: rgba(255,255,255,0.72);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: background 220ms, color 200ms;
  white-space: nowrap;
  text-decoration: none;
}
.col-side-item:hover { background: rgba(255,255,255,0.08); color: var(--branco); }
.col-side-item.active { background: var(--amarelo); color: var(--roxo); font-weight: 600; }
.col-side-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
.col-side-item .lbl { transition: opacity 200ms; }
.col-side.collapsed .col-side-item .lbl { opacity: 0; }

.col-side-user {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.06);
}
.col-side-user .info { transition: opacity 200ms; }
.col-side.collapsed .info { opacity: 0; }

/* MAIN */
.col-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--s7) var(--s8) calc(var(--footer-h) + var(--s5));
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  gap: var(--s5);
}

/* HERO blocks (purple) */
.col-hero {
  background: var(--roxo);
  color: var(--branco);
  border-radius: var(--r-xl);
  padding: var(--s7);
  position: relative;
  overflow: hidden;
}
.col-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: var(--amarelo);
  border-radius: 50%;
  opacity: 0.16;
  animation: float 8s ease-in-out infinite;
}
.col-hero .greet { font-size: 11px; font-weight: 500; opacity: 0.7; letter-spacing: 0.12em; text-transform: uppercase; }
.col-hero .name  { font-size: 28px; font-weight: 300; margin-top: var(--s3); margin-bottom: var(--s3); letter-spacing: -0.025em; line-height: 1.15; }
.col-hero .sub   { font-size: 14px; opacity: 0.78; max-width: 480px; font-weight: 400; line-height: 1.55; }

/* bullets */
.bullets { display: flex; flex-direction: column; gap: var(--s3); }
.bullet { display: flex; align-items: flex-start; gap: var(--s3); font-size: 14px; line-height: 1.55; color: var(--cinza); }
.bullet .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bullet strong { font-weight: 600; }

/* points teaser on inicio */
.points-teaser {
  background: var(--cinza);
  color: var(--branco);
  border-radius: var(--r-lg);
  padding: var(--s5);
  display: flex; align-items: center; gap: var(--s4);
  cursor: pointer;
  transition: transform 240ms var(--ease-spring);
  position: relative; overflow: hidden;
  text-decoration: none;
}
.points-teaser:hover { transform: translateY(-3px); }
.points-teaser::before {
  content: ''; position: absolute;
  right: -30px; bottom: -30px;
  width: 100px; height: 100px;
  background: var(--amarelo);
  border-radius: 50%;
  opacity: 0.18;
}
.points-teaser .pt-icon {
  width: 44px; height: 44px;
  background: var(--amarelo);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--cinza);
  flex-shrink: 0;
  position: relative; z-index: 2;
}
.points-teaser .pt-info { flex: 1; min-width: 0; position: relative; z-index: 2; }
.pt-lab { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; }
.pt-val { font-size: 28px; font-weight: 300; color: var(--amarelo); letter-spacing: -0.03em; line-height: 1; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.pt-sub { font-size: 12px; opacity: 0.65; margin-top: var(--s2); }

/* QUESTÃO */
.q-topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) 0;
}
.q-back {
  width: 40px; height: 40px;
  background: var(--surface-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms;
  text-decoration: none;
  color: var(--cinza);
}
.q-back:hover { background: var(--surface-line); }
.q-progress { flex: 1; }
.q-counter { font-size: 12px; font-weight: 600; color: var(--roxo); font-variant-numeric: tabular-nums; }
.q-body { padding: var(--s5) 0; }
.q-cat-tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--amarelo);
  color: var(--cinza);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
.q-text {
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--cinza);
  margin-bottom: var(--s6);
}
.opts { display: flex; flex-direction: column; gap: var(--s3); }

/* RESULTADO */
.gauge-card {
  background: var(--roxo);
  color: var(--branco);
  border-radius: var(--r-xl);
  padding: var(--s8) var(--s7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gauge-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: var(--amarelo);
  border-radius: 50%;
  opacity: 0.16;
}
.gauge-card .label-top {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: var(--s4);
  position: relative; z-index: 2;
}
.gauge-svg-wrap { position: relative; display: inline-block; margin: 0 auto var(--s5); z-index: 2; }
.nivel-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--azul);
  color: var(--branco);
  padding: 8px 18px;
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em;
  position: relative; z-index: 2;
  animation: pop-bounce 600ms cubic-bezier(0.34,1.56,0.64,1) 800ms both;
}

.result-msg {
  font-size: 16px; line-height: 1.65;
  color: var(--cinza); opacity: 0.85;
  font-weight: 400;
}
.cat-bars { display: flex; flex-direction: column; gap: var(--s4); }
.cat-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.cat-name { font-size: 14px; font-weight: 500; color: var(--cinza); }
.cat-val { font-size: 16px; font-weight: 500; }

/* PLANO */
.plano-hero {
  background: var(--roxo);
  color: var(--branco);
  padding: var(--s6);
  border-radius: var(--r-xl);
  position: relative; overflow: hidden;
}
.plano-hero::before {
  content: ''; position: absolute;
  bottom: -40px; right: -40px;
  width: 140px; height: 140px;
  background: var(--amarelo);
  border-radius: 50%;
  opacity: 0.16;
}
.action-item {
  display: flex; gap: var(--s4);
  padding: var(--s5);
  background: var(--branco);
  box-shadow: var(--el-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 240ms var(--ease-spring), box-shadow 240ms;
  animation: slide-up 480ms cubic-bezier(0.16,1,0.3,1) both;
}
.action-item:hover { transform: translateY(-3px); box-shadow: var(--el-2); }
.action-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-soft);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 240ms var(--ease-out);
}
.action-item.done .action-check { background: var(--azul); }
.action-item.done .action-tit { text-decoration: line-through; opacity: 0.5; }
.action-tit { font-weight: 500; color: var(--cinza); font-size: 15px; margin-bottom: var(--s2); }
.action-desc { font-size: 13px; color: var(--cinza); opacity: 0.6; line-height: 1.5; }

/* TRILHA */
.trilha-item {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--branco);
  box-shadow: var(--el-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 240ms var(--ease-out);
  animation: slide-up 480ms cubic-bezier(0.16,1,0.3,1) both;
}
.trilha-item:hover { transform: translateY(-3px); }
.trilha-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--roxo);
  color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}
.trilha-item.done .trilha-num { background: var(--azul); }
.trilha-info { flex: 1; }
.trilha-tit { font-weight: 500; font-size: 14px; color: var(--cinza); }
.trilha-meta { font-size: 11px; color: var(--cinza); opacity: 0.55; margin-top: 2px; }
.trilha-item.done .trilha-tit { opacity: 0.5; text-decoration: line-through; }
.trilha-cta { color: var(--roxo); }

/* CARTEIRA */
.cart-hero {
  background: var(--cinza);
  color: var(--branco);
  border-radius: var(--r-xl);
  padding: var(--s7);
  position: relative;
  overflow: hidden;
}
.cart-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: var(--roxo);
  border-radius: 50%;
  opacity: 0.5;
}
.cart-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 140px; height: 140px;
  background: var(--amarelo);
  border-radius: 50%;
  opacity: 0.12;
  animation: float 8s ease-in-out infinite;
}
.cart-hero .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amarelo); position: relative; z-index: 2; }
.cart-hero .big-num { font-size: 56px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; margin-top: var(--s3); font-variant-numeric: tabular-nums; position: relative; z-index: 2; }
.cart-hero .big-lab { font-size: 13px; opacity: 0.65; margin-top: var(--s2); position: relative; z-index: 2; }
.cart-hero-row {
  display: flex; gap: var(--s6); margin-top: var(--s6);
  padding-top: var(--s5);
  position: relative; z-index: 2;
}
.cart-hero-cell .v {
  font-size: 22px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.cart-hero-cell .v.warn { color: var(--amarelo); }
.cart-hero-cell .l { font-size: 11px; opacity: 0.55; margin-top: 2px; letter-spacing: 0.04em; }

/* user-programa cards */
.user-prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 480px) { .user-prog-grid { grid-template-columns: 1fr; } }
.user-programa {
  background: var(--branco);
  box-shadow: var(--el-1);
  border-radius: var(--r-md);
  padding: var(--s4);
  display: flex; align-items: flex-start; gap: var(--s4);
  cursor: pointer;
  animation: slide-up 480ms cubic-bezier(0.16,1,0.3,1) both;
  transition: transform 240ms var(--ease-spring), box-shadow 240ms;
}
.user-programa:hover { transform: translateY(-2px); box-shadow: var(--el-2); }
.user-prog-logo {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--branco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.user-prog-info { flex: 1; min-width: 0; }
.user-prog-nome { font-size: 13px; font-weight: 500; color: var(--cinza); }
.user-prog-pts { font-size: 20px; font-weight: 300; color: var(--cinza); letter-spacing: -0.02em; margin-top: 2px; }
.user-prog-warn { font-size: 11px; color: var(--vermelho); margin-top: 4px; font-weight: 500; }

/* concierge IA */
.concierge-card {
  background: var(--cinza);
  color: var(--branco);
  padding: var(--s6);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.concierge-card::before {
  content: ''; position: absolute;
  top: -40px; left: -40px;
  width: 140px; height: 140px;
  background: var(--roxo);
  border-radius: 50%;
  opacity: 0.5;
}
.concierge-label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amarelo);
  margin-bottom: var(--s4);
  position: relative; z-index: 2;
}
.concierge-text {
  font-size: 14.5px; line-height: 1.7; color: var(--branco); opacity: 0.92;
  font-weight: 300;
  min-height: 130px;
  position: relative; z-index: 2;
}
.concierge-text::after { content: '▋'; color: var(--amarelo); animation: blink 0.8s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* op-card */
.op-card {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--branco);
  padding: var(--s5);
  border-radius: var(--r-md);
  box-shadow: var(--el-1);
  cursor: pointer;
  transition: transform 240ms var(--ease-spring), box-shadow 240ms;
  animation: slide-up 480ms cubic-bezier(0.16,1,0.3,1) both;
}
.op-card:hover { transform: translateY(-3px); box-shadow: var(--el-2); }
.op-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--roxo);
  color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.op-card.op-amarelo .op-icon { background: var(--amarelo); color: var(--cinza); }
.op-card.op-dark .op-icon { background: var(--cinza); color: var(--amarelo); }
.op-icon svg { width: 22px; height: 22px; }
.op-body { flex: 1; min-width: 0; }
.op-tit { font-size: 14px; font-weight: 500; color: var(--cinza); }
.op-desc { font-size: 12px; color: var(--cinza); opacity: 0.55; margin-top: 2px; line-height: 1.5; }
.op-val {
  font-size: 13px; font-weight: 600; color: var(--roxo);
  padding: 4px 10px; background: rgba(124,24,124,0.08); border-radius: var(--r-full);
  flex-shrink: 0;
}
.op-card.op-amarelo .op-val { color: var(--cinza); background: rgba(255,212,0,0.25); }
.op-card.op-dark .op-val { color: var(--branco); background: var(--cinza); }

/* PERFIL */
.profile-hero {
  background: var(--roxo);
  color: var(--branco);
  padding: var(--s7);
  border-radius: var(--r-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: ''; position: absolute; inset: -40px;
  background: radial-gradient(circle at 50% 0%, rgba(255,212,0,0.18), transparent 50%);
  pointer-events: none;
}
.profile-hero .av {
  width: 80px; height: 80px;
  background: var(--amarelo);
  color: var(--cinza);
  border-radius: 50%;
  font-size: 26px; font-weight: 500;
  margin: 0 auto var(--s4);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .col-side { display: none; }
  .col-main { padding: var(--s5) var(--s5) calc(var(--footer-h) + var(--s5)); max-width: 100%; }
  .col-hero { padding: var(--s6) var(--s5); }
  .col-hero .name { font-size: 22px; }
  .q-text { font-size: 22px; }
  .gauge-card { padding: var(--s6) var(--s5); }
  .cart-hero { padding: var(--s5); }
  .cart-hero .big-num { font-size: 42px; }
}
@media (min-width: 901px) { .mobile-footer { display: none; } }
@media (max-width: 480px) {
  .col-main { padding: var(--s3) var(--s4) calc(var(--footer-h) + var(--s4)); }
  .col-hero { padding: var(--s5) var(--s4); }
  .col-hero .name { font-size: 22px; }
}

.col-mobile-top {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--s4);
  background: var(--branco);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 var(--surface-soft);
}
@media (max-width: 900px) { .col-mobile-top { display: flex; } }

/* mobile-footer-item as link */
.mobile-footer-item { text-decoration: none; }