/* =============================================================================
   ÁREA DO ALUNO — PROTÓTIPO (/minha-area)
   Reaproveita as variáveis globais de site.css (blue-500/600 = verde-esmeralda,
   navy-950/900/800 para o fundo escuro) para manter a mesma identidade visual
   usada no mapa do Brasil e no painel do gestor.
   ============================================================================= */

.ma-proto-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--blue-500); background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.35);
  padding:5px 10px; border-radius:99px;
}
.ma-proto-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-500); box-shadow:0 0 0 3px rgba(16,185,129,0.25);}
.up-proto-badge{margin:10px 0 18px;}

.ma-modal-body{margin-top:4px;}
.ma-empty-filter{padding:36px 20px; text-align:center; color:var(--gray-500); font-size:14px;}

/* ---------- Estrutura (sidebar + conteúdo) ---------- */
/* 1180px é a largura de leitura do site público (texto/artigos) — a Minha
   Área é um painel, não uma página de leitura, e em monitor largo sobrava
   muito vazio dos dois lados. Os painéis de Empresa/Advogado já usam bem
   mais espaço; aqui alinha a mesma lógica sem exagerar (cartões não devem
   esticar indefinidamente num ultrawide). */
.up-shell{display:flex; align-items:flex-start; max-width:1600px; margin:0 auto; padding:32px 28px 70px; gap:28px;}

.up-sidebar{
  width:260px; flex-shrink:0; border-radius:16px; padding:22px 20px;
  background:linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 85%, var(--navy-700) 150%);
  color:#fff; position:sticky; top:20px;
  /* Era top:80px pra sobrar embaixo do nav público antigo (64px + respiro).
     Minha Área não tem mais nav.html acima (ver userpanel/panel.html) — só
     o respiro de sempre até o topo da viewport. */
}
.up-sidebar__profile-card{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:18px; padding:10px; margin-bottom:18px;
  box-shadow:0 0 24px -8px rgba(16,185,129,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.up-sidebar__profile-card .up-xp-bar{margin-bottom:0;}
/* gap:10px (era 12px): o cartão novo (.up-sidebar__profile-card) tirou ~28px
   de largura útil dessa linha com o próprio padding — sem isso, "@handle"
   com mais de ~12 caracteres quebrava no meio da palavra (overflow-wrap
   força isso, não tem hífen pra quebrar num @usuário). */
.up-sidebar__profile{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.up-sidebar__profile-info{flex:1; min-width:0;}
.up-sidebar__edit-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:var(--gray-300); cursor:pointer;
  padding:0; transition:background .15s ease, color .15s ease;
}
.up-sidebar__edit-btn:hover{background:rgba(255,255,255,0.16); color:#fff;}
.up-sidebar__edit-btn .icon{width:12px; height:12px;}
.up-sidebar__avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); font-size:15px; font-weight:700;
  box-shadow:0 0 0 2px rgba(16,185,129,0.28); color:#fff; letter-spacing:0.02em;
}
/* `overflow-wrap:anywhere`: a caixa pode encolher (min-width:0 no pai), mas
   um @ é UMA palavra só e sem isto ele não quebra — transborda e passa por
   baixo do botão de editar, do lado direito. As classes __name e __email
   continuam definidas porque o bloco cai no nome quando a conta não tem @. */
.up-sidebar__handle,
.up-sidebar__name{font-size:14px; font-weight:600; overflow-wrap:anywhere;}
.up-sidebar__email{font-size:11.5px; color:var(--gray-300); overflow-wrap:anywhere; line-height:1.4;}

/* ---------- Upload de foto de perfil ---------- */
.up-avatar-upload{position:relative; flex-shrink:0;}
.up-avatar-upload__btn{
  position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--blue-500); color:var(--navy-950);
  border:2px solid var(--navy-900); cursor:pointer; padding:0;
}
.up-avatar-upload__btn:hover{background:var(--blue-600);}
.up-avatar-upload__btn .icon{width:11px; height:11px;}
.up-avatar-upload__actions{display:flex; gap:8px; margin:-4px 0 14px;}
.up-avatar-upload__actions[hidden]{display:none;}
.up-avatar-upload__actions .btn{font-size:11.5px; padding:6px 12px;}
.up-flash-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.up-flash-list .auth-flash{padding:9px 12px; font-size:12px; margin:0;}
.up-sidebar__nav{display:flex; flex-direction:column; gap:4px; margin-top:18px;}
.up-sidebar__nav-label{
  font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gray-500); padding:14px 12px 4px;
}
.up-sidebar__nav-label:first-child{padding-top:0;}
.up-sidebar__link{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; border-left:3px solid transparent; cursor:pointer;
  padding:11px 10px; border-radius:8px; font-size:13.5px; font-weight:500;
  color:var(--gray-300); transition:background .15s ease, color .15s ease; text-decoration:none;
}
.up-sidebar__link .icon{width:17px; height:17px; flex-shrink:0;}
.up-sidebar__link:hover{background:rgba(255,255,255,0.06); color:#fff;}
.up-sidebar__link.is-active{background:rgba(16,185,129,0.14); border-left-color:var(--blue-500); color:#fff;}
.up-sidebar__count{
  margin-left:auto; background:color-mix(in srgb, var(--up-accent-solid, var(--blue-500)) 18%, transparent);
  color:var(--up-accent-solid, var(--blue-500)); font-family:var(--mono);
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px;
}
.up-sidebar__link--empresa.is-active{border-left-color:#D4AF37;}
.up-sidebar__link--admin{
  background:transparent; border:1px solid rgba(212,175,55,0.45); color:#D4AF37; font-weight:700;
  margin-bottom:8px;
}
.up-sidebar__link--admin:hover{background:rgba(212,175,55,0.12); color:#D4AF37;}
.up-sidebar__sair-form{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1);}
.up-sidebar__link--sair .icon{transform:rotate(180deg);}
.up-sidebar__link--sair:hover{background:rgba(239,68,68,0.12); color:#fca5a5;}
.up-sidebar__badge-pro{
  margin-left:auto; color:#D4AF37; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:0.03em; flex-shrink:0; opacity:0.85;
}

/* ---------- Nível / XP (gamificação) ---------- */
.up-sidebar__badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.up-level-badge{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; letter-spacing:0.03em; font-weight:700;
  color:var(--up-accent-solid, var(--blue-500));
  background:color-mix(in srgb, var(--up-accent-solid, var(--blue-500)) 16%, transparent);
  padding:2px 8px 2px 2px; border-radius:99px;
}
.up-level-badge__icon{width:18px; height:18px; flex-shrink:0;}
.up-level-badge--4{background:rgba(212,175,55,0.18); color:#D4AF37;}
.up-level-badge--5{background:rgba(212,175,55,0.22); color:#D4AF37;}
.up-occupation-tag{
  display:inline-block; font-size:10px; color:var(--gray-300); background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14); padding:2px 8px; border-radius:99px;
}
.up-xp-bar{margin:2px 0 14px;}
.up-xp-bar__track{width:100%; height:6px; border-radius:99px; background:rgba(255,255,255,0.12); overflow:hidden;}
.up-xp-bar__fill{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue-500), var(--blue-600));}
.up-xp-bar__label{
  display:block; width:100%; background:none; border:none; padding:0; text-align:left; font-family:inherit;
  font-size:10.5px; color:var(--gray-300); margin-top:5px; cursor:pointer;
}
.up-xp-bar__label:hover, .up-xp-bar__label:focus-visible{color:#fff;}

.up-levels-list{display:flex; flex-direction:column; gap:8px;}
.up-level-row{
  display:flex; align-items:center; gap:12px; background:var(--gray-50); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px;
}
.up-level-row.is-locked{opacity:0.6;}
.up-level-row.is-locked .up-level-row__badge{filter:grayscale(1) opacity(70%);}
.up-level-row.is-atual{background:rgba(16,185,129,0.07); border-color:rgba(16,185,129,0.3);}
.up-level-row__badge{width:34px; height:34px; flex-shrink:0;}
.up-level-row__body{display:flex; flex-direction:column; min-width:0; flex:1;}
.up-level-row__name{font-size:13.5px; font-weight:600; color:var(--navy-900);}
.up-level-row__xp{font-family:var(--mono); font-size:11px; color:var(--gray-500);}
.up-level-row__tag{
  font-family:var(--mono); font-size:10px; color:var(--gray-500); background:var(--gray-100);
  border-radius:99px; padding:3px 9px; white-space:nowrap; flex-shrink:0;
}
.up-level-row__tag--atual{color:var(--blue-600); background:rgba(16,185,129,0.14); font-weight:700;}
.up-level-row__check{width:16px; height:16px; flex-shrink:0; color:var(--blue-600);}

/* container-type: a Home precisa reagir à largura que SOBRA do conteúdo,
   não à largura da janela — com a barra lateral expandida (300px+) a
   coluna de conteúdo fica estreita bem antes de a janela encolher, e um
   @media por viewport não enxerga isso (ver .up-home-grid3/.up-home-hubs). */
.up-main{flex:1; min-width:0; container-type:inline-size;}
.up-section[hidden]{display:none;}
.up-panel-header{margin-bottom:22px;}
.up-panel-header h1{font-size:24px; margin-bottom:4px; color:var(--navy-900);}
.up-panel-header p{color:var(--gray-700); font-size:14px;}

/* ---------- Cabeçalho de perfil da Home (avatar + nível + insígnia em destaque) ---------- */
.up-profile-header{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); color:#fff;
  border-radius:16px; padding:22px 26px; margin-bottom:24px;
}
.up-profile-header__avatar{
  width:84px; height:84px; border-radius:16px; flex-shrink:0; overflow:hidden;
  border:2px solid var(--blue-500); box-shadow:0 0 0 4px rgba(16,185,129,0.15);
  display:flex; align-items:center; justify-content:center; background:var(--navy-800);
}
.up-profile-header__avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.up-profile-header__avatar-fallback{font-size:26px; font-weight:700; color:var(--blue-500);}
.up-profile-header__id{flex:1; min-width:160px;}
.up-profile-header__id h1{font-size:22px; margin:0 0 4px; color:#fff;}
.up-profile-header__id p{font-size:13px; color:var(--gray-300); margin:0;}
.up-profile-header__level{display:flex; flex-direction:column; align-items:flex-end; gap:10px; min-width:230px;}
.up-profile-header__level-row{display:flex; align-items:center; gap:10px;}
.up-profile-header__level-label{font-size:13px; color:var(--gray-300);}
.up-profile-header__level-value{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--blue-500); display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--blue-500); flex-shrink:0;
}
.up-profile-header__badge{
  display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:8px 12px; width:100%;
}
.up-profile-header__badge .up-achv-badge{width:32px; height:32px; flex-shrink:0;}
.up-profile-header__badge--empty{color:var(--gray-400); font-size:12.5px; justify-content:center; padding:14px 12px;}
.up-profile-header__badge-title{display:block; font-size:12.5px; font-weight:600; color:#fff;}
.up-profile-header__badge-xp{display:block; font-size:10.5px; color:var(--gray-400); font-family:var(--mono);}
.up-profile-header__actions{display:flex; gap:8px; align-self:flex-end;}
.up-profile-header__choose-btn{font-size:11.5px; padding:6px 12px;}
/* No celular a barra empilha logo acima deste cabeçalho, e as duas mostram
   foto, nome e nível — quase 600px de identidade repetida antes do primeiro
   conteúdo. Nada é escondido (a foto só se troca pela barra, e o resto daqui
   é exclusivo: insígnia em destaque, "Editar perfil"): o cabeçalho apenas
   fica denso, com foto e nome lado a lado em vez de empilhados. */
@media (max-width: 640px){
  .up-profile-header{flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px;}
  .up-profile-header__avatar{width:56px; height:56px;}
  .up-profile-header__avatar-fallback{font-size:19px;}
  .up-profile-header__id{flex:1; min-width:0;}
  .up-profile-header__id h1{font-size:19px; margin:0;}
  .up-profile-header__level{align-items:flex-start; width:100%; min-width:0;}
  .up-profile-header__actions{align-self:flex-start;}
}

/* ---------- Modal: escolher insígnia em destaque ---------- */
.up-featured-achv-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; margin-top:6px;}
.up-featured-achv-option{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--white); cursor:pointer; text-align:center; font-size:11.5px;
  font-weight:600; color:var(--navy-900); font-family:inherit; transition:border-color .15s ease, background .15s ease;
}
.up-featured-achv-option:hover{border-color:var(--blue-500);}
.up-featured-achv-option.is-selected{border-color:var(--blue-600); background:rgba(16,185,129,0.08);}
.up-featured-achv-option .up-achv-badge{width:40px; height:40px;}

/* ---------- Linha de estatísticas (tempo de estudo / desempenho / edital / frase) ---------- */

.up-form-section-title{font-size:12px; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.04em; margin:16px 0 8px;}
.up-form-section-title:first-of-type{margin-top:4px;}

/* ---------- Seletor de cores (modal Editar perfil) ---------- */
.up-color-picker{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 4px;}
.up-color-swatch{position:relative; width:30px; height:30px; flex-shrink:0;}
.up-color-swatch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.up-color-swatch__dot{
  position:absolute; inset:0; border-radius:50%; border:2px solid var(--line); pointer-events:none;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.up-color-swatch input:checked ~ .up-color-swatch__dot{border-color:var(--navy-900); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy-900);}
.up-color-swatch input:focus-visible ~ .up-color-swatch__dot{outline:2px solid var(--blue-500); outline-offset:3px;}

/* ---------- Constância nos estudos (calendário de sequência) ---------- */
.up-consistency{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--shadow-sm); margin-bottom:24px;
}

/* Panorama de questões — o mesmo painel da sub-aba Desempenho do
   Organizador (partials/_desempenho.html), aqui como visão consolidada do
   perfil. Os .dsp__* vêm de studies-panel.css, já carregado nesta página. */
.up-panorama{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--shadow-sm); margin-bottom:24px;
}
.up-consistency .up-home__block-title{margin:0 0 12px;}
.up-consistency__summary{font-size:13px; color:var(--gray-700); margin:12px 0 0;}
.up-consistency__summary strong{color:var(--navy-900);}
.up-consistency__grid{display:flex; flex-wrap:nowrap; gap:5px; overflow-x:auto; padding-bottom:2px;}
.up-consistency__day{width:100%; max-width:22px; aspect-ratio:1; min-width:10px; border-radius:5px; flex:1 1 auto;}
/* No celular os 30 dias encolhem para caber inteiros: a tira vira um
   panorama do mês, sem precisar arrastar. Antes ela cortava e o usuário via
   os dias mais ANTIGOS, que são os que menos importam. */
@media (max-width:640px){
  .up-consistency__grid{gap:3px;}
  .up-consistency__day{min-width:5px; max-width:14px; border-radius:3px;}
}
.up-consistency__day--done{background:linear-gradient(135deg, var(--blue-500), var(--blue-600));}
.up-consistency__day--missed{background:var(--gray-100); border:1px solid var(--gray-200);}
.up-consistency__day--future{background:transparent; border:1px dashed var(--gray-100);}

/* ---------- "Esta semana" (item 4 — consolida horas/meta/questões) ---------- */
.up-week-card{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--shadow-sm);
}
.up-week-card__head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.up-week-card__head .up-home__block-title{margin:0;}
.up-week-card__cta{font-size:12.5px; font-weight:600; color:var(--blue-600); text-decoration:none; white-space:nowrap;}
.up-week-card__cta:hover{text-decoration:underline;}
.up-week-card__goal-row{display:flex; justify-content:space-between; font-size:13px; color:var(--gray-700); margin-bottom:6px;}
.up-week-card__goal-row span:last-child{color:var(--gray-500);}
.up-week-card__bar{height:8px; margin:0;}
.up-week-card__pct{display:block; font-size:11.5px; color:var(--gray-500); margin-top:6px;}
.up-week-card__metrics{display:flex; gap:28px; margin-top:16px; flex-wrap:wrap;}
.up-week-card__metric{display:flex; flex-direction:column; gap:2px;}
.up-week-card__metric-value{font-size:20px; font-weight:700; color:var(--navy-900); font-family:var(--mono);}
.up-week-card__metric-label{font-size:11.5px; color:var(--gray-500);}
.up-week-card__upsell{font-size:13px; color:var(--gray-700); margin:0;}
.up-week-card__upsell a{color:var(--blue-600); font-weight:600;}
.up-week-card__foot{
  display:flex; align-items:center; gap:18px; width:100%; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--gray-100); background:none; border-left:none; border-right:none; border-bottom:none;
  font-family:inherit; font-size:12.5px; color:var(--gray-600); cursor:pointer; text-align:left;
}
.up-week-card__foot strong{color:var(--navy-900);}
.up-week-card__foot .icon{width:13px; height:13px; margin-left:auto; color:var(--gray-400); flex-shrink:0;}
.up-week-card__foot:hover .icon{color:var(--blue-600);}

/* ---------- Home adaptativa (item 10 — regras simples, sem IA) ---------- */
.up-home-adaptive{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); color:#fff;
  border-radius:14px; padding:18px 22px;
}
.up-home-adaptive__body h2{font-size:16px; margin:0 0 4px; color:#fff;}
.up-home-adaptive__body p{font-size:13px; color:var(--gray-300); margin:0; line-height:1.5;}
.up-home-adaptive__actions{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0;}
@media (max-width: 640px){.up-home-adaptive{flex-direction:column; align-items:flex-start;}}

/* ---------- Personalização de cores da Home (ver Editar perfil) ---------- */
/* Fundo de página cobrindo a janela inteira (não só a coluna de conteúdo)
   — a classe só existe no <body> enquanto a aba Home está ativa (JS em
   userpanel.js alterna ao trocar de aba, já nasce ligada no load inicial). */
body.up-home-active{background:var(--up-page-bg, var(--gray-50));}
/* --up-accent/--up-bg/--up-bg-text* são definidas inline em panel.html,
   escopadas a [data-up-panel="home"] — os seletores abaixo prefixam
   [data-up-panel="home"] antes de classes compartilhadas com outras
   páginas (.cp-card, .up-course-card) pra nunca vazar a personalização
   pro Painel da Empresa/Organizador de Estudos nem pra aba Meus Cursos. */
[data-up-panel="home"] .up-home__aside-card,
[data-up-panel="home"] .up-consistency,
[data-up-panel="home"] .up-week-card,
[data-up-panel="home"] .cp-card,
[data-up-panel="home"] .up-course-card--compact{
  background:var(--up-bg, var(--white));
}
[data-up-panel="home"] .cp-card__label,
[data-up-panel="home"] .cp-card__hint,
[data-up-panel="home"] .up-consistency__summary,
[data-up-panel="home"] .up-week-card__goal-row,
[data-up-panel="home"] .up-week-card__pct,
[data-up-panel="home"] .up-week-card__metric-label,
[data-up-panel="home"] .up-week-card__foot,
[data-up-panel="home"] .up-course-card--compact .up-course-card__meta{
  color:var(--up-bg-text-muted, var(--gray-500));
}
[data-up-panel="home"] .cp-card__value,
[data-up-panel="home"] .up-home__aside-card .up-home__block-title,
[data-up-panel="home"] .up-consistency__summary strong,
[data-up-panel="home"] .up-week-card__head .up-home__block-title,
[data-up-panel="home"] .up-week-card__metric-value,
[data-up-panel="home"] .up-week-card__foot strong,
[data-up-panel="home"] .up-course-card--compact .up-course-card__title{
  color:var(--up-bg-text, var(--navy-900));
}
[data-up-panel="home"] .up-progress__bar{
  background:var(--up-accent, linear-gradient(90deg, var(--blue-500), var(--blue-600)));
}
[data-up-panel="home"] .up-course-card--compact .up-course-card__pct{
  color:var(--up-accent-solid, var(--blue-600));
}

[data-up-panel="home"] .up-profile-header__avatar{
  border-color:var(--up-accent-solid, var(--blue-500));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--up-accent-solid, var(--blue-500)) 15%, transparent);
}
[data-up-panel="home"] .up-profile-header__avatar-fallback{color:var(--up-accent-solid, var(--blue-500));}
[data-up-panel="home"] .up-profile-header__level-value{
  border-color:var(--up-accent-solid, var(--blue-500));
  color:var(--up-accent-solid, var(--blue-500));
}

/* --up-accent* estão em .up-shell (não em [data-up-panel="home"]), então
   estas regras da sidebar não precisam de prefixo — herdam direto e valem
   em qualquer aba, não só na Home (a sequência laranja e os selos TAX PRO
   ficam de fora de propósito — são indicadores com cor própria). */
.up-sidebar__avatar{
  background:var(--up-accent, linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--up-accent-solid, var(--blue-500)) 28%, transparent);
}
.up-xp-bar__fill{background:var(--up-accent, linear-gradient(90deg, var(--blue-500), var(--blue-600)));}
.up-sidebar__link.is-active{
  background:color-mix(in srgb, var(--up-accent-solid, var(--blue-500)) 14%, transparent);
  border-left-color:var(--up-accent-solid, var(--blue-500));
}

/* ---------- Home (resumo, primeira aba a abrir) ---------- */
/* Indicadores rápidos no topo — números reais (sequência, edital, áreas
   PRO ativas, conquistas), nunca inventados. */
.up-home-stats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.up-home-stat{
  display:flex; flex-direction:column; gap:2px; background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:10px 16px; min-width:112px; box-shadow:var(--shadow-sm);
}
.up-home-stat__icon{display:inline-flex; color:var(--blue-600);}
.up-home-stat__icon .icon{width:15px; height:15px;}
.up-home-stat__value{font-size:17px; font-weight:700; color:var(--navy-900); display:flex; align-items:center; gap:6px;}
.up-home-stat__label{font-size:10.5px; color:var(--gray-500);}

/* Atalhos grandes para as três áreas — sempre visíveis (igual à barra
   lateral): quem não assina cai na tela de bloqueio do próprio painel. */
.up-home-hubs{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:24px;}
.up-home-hubs > *{min-width:0;}
.up-home-hub{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.up-home-hub:hover{border-color:var(--blue-500); transform:translateY(-1px);}
.up-home-hub--primary{background:linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); border-color:transparent;}
.up-home-hub__icon{
  width:38px; height:38px; border-radius:10px; background:var(--gray-50); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:var(--blue-600); background-size:cover; background-position:center;
}
.up-home-hub--primary .up-home-hub__icon{background-color:rgba(255,255,255,0.22); color:#fff;}
.up-home-hub__text{display:flex; flex-direction:column; gap:2px; min-width:0;}
/* Com logo/razão social própria (Advocacia/Empresa), o título vira
   "Advocacia · Nome do Escritório" — trunca em vez de quebrar linha,
   que no título de um cartão compacto feio estoura a altura. */
.up-home-hub__title{
  font-size:14.5px; font-weight:700; color:var(--navy-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.up-home-hub--primary .up-home-hub__title{color:#fff;}
.up-home-hub__sub{font-size:11.5px; color:var(--gray-500); line-height:1.3;}
.up-home-hub--primary .up-home-hub__sub{color:rgba(255,255,255,0.85);}

/* Grid 3x3 dos cartões da Home. Constância+Certificados empilham numa
   coluna só (.up-home-stack) para bater a altura de Biblioteca/Competências
   ao lado, e Continuar estudando estica por 2 colunas (.up-home-grid3__continue). */
.up-home-grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:start; margin-bottom:24px;}
/* Sem isto, o SVG do radar de Competências (460px intrínsecos) vira o
   min-content da coluna "1fr" que o segura — grid não encolhe uma coluna
   abaixo do conteúdo por padrão, então ela estourava a largura do grid
   inteiro e empurrava as outras duas pra fora, com a página ganhando
   rolagem horizontal e cortando a barra lateral. */
.up-home-grid3 > *{min-width:0;}
.up-home-stack{display:flex; flex-direction:column; gap:24px; min-width:0;}
/* A Constância ganha margin-bottom própria pra quando é cartão solto na
   página — aqui dentro do empilhado ela dobraria com o gap do flex acima,
   e os 30 quadradinhos do mês precisam encolher mais do que no desktop
   largo pra caber numa coluna de ~270px sem rolagem horizontal. */
.up-home-stack .up-consistency{margin-bottom:0;}
.up-home-stack .up-consistency__grid{gap:2px;}
.up-home-stack .up-consistency__day{min-width:5px; max-width:12px;}
.up-home-grid3__continue{grid-column:span 2; min-width:0;}

/* Colunas da Home em 2, depois 1, conforme a largura que sobra do
   conteúdo (não da janela — com a barra lateral expandida a coluna fica
   estreita bem antes da janela encolher, ver container-type em .up-main). */
@container (max-width: 900px){
  .up-home-hubs{grid-template-columns:repeat(2, 1fr);}
  .up-home-grid3{grid-template-columns:repeat(2, 1fr);}
  .up-home-grid3__continue{grid-column:span 2;}
}
@container (max-width: 560px){
  .up-home-hubs{grid-template-columns:1fr;}
  .up-home-grid3{grid-template-columns:1fr;}
  .up-home-grid3__continue{grid-column:span 1;}
}

.up-home-adaptive__progress{flex-basis:100%; display:flex; align-items:center; gap:10px; margin-top:2px;}
.up-home-adaptive__progress .up-progress{flex:1;}
.up-home-adaptive__pct{font-size:11.5px; color:var(--gray-300); font-weight:600; white-space:nowrap; flex-shrink:0;}

.up-home__block-title{font-size:15px; font-weight:700; color:var(--navy-900); margin:0 0 12px;}

.up-home__continue-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;}
.up-course-card--compact{padding:12px 14px; gap:12px;}
.up-course-card--compact .up-course-card__icon{width:36px; height:36px; border-radius:8px;}
.up-course-card--compact .up-course-card__title{font-size:13px;}

.up-home__aside-card{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-sm);
}
.up-home__quote{
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); color:#fff; border-radius:14px;
  padding:18px 20px; position:relative; overflow:hidden;
}
.up-home__quote::before{
  content:"\201C"; font-family:var(--serif); font-size:52px; color:rgba(16,185,129,0.35);
  position:absolute; top:-6px; left:12px; font-style:normal; line-height:1;
}
.up-home__greeting{font-size:11px; color:var(--gray-300); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.06em; font-family:var(--mono);}
.up-home__quote p{margin:0; position:relative; padding-left:16px; font-size:13.5px; line-height:1.6; font-style:italic;}

.up-home__deadline{display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--gray-100);}
.up-home__deadline .icon{width:20px; height:20px; color:var(--blue-600); flex-shrink:0;}
.up-home__deadline-title{font-size:13px; font-weight:600; color:var(--navy-900);}
.up-home__deadline-days{font-size:11.5px; color:var(--gray-500);}
.up-home__deadline-days--late{color:#b3413f; font-weight:600;}

.up-home__upsell{
  background:linear-gradient(135deg, var(--blue-50) 0%, #fff 100%); border:1px solid var(--blue-100);
  border-radius:14px; padding:18px 20px; text-align:center;
}
.up-home__upsell .icon{width:26px; height:26px; color:var(--blue-600); margin-bottom:8px;}
.up-home__upsell p{font-size:13px; color:var(--gray-700); margin:0 0 12px; line-height:1.5;}

.up-achv-badges-count{font-family:var(--mono); font-size:11px; color:var(--gray-500);}
.up-achv-badges-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;}
.up-achv-badge-card{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  background:var(--gray-50); border:1px solid var(--line); border-radius:10px; padding:18px 8px;
}
.up-achv-badge-card__icon{width:46px; height:46px; flex-shrink:0;}
.up-achv-badge-card__title{font-size:11.5px; font-weight:600; color:var(--navy-900); line-height:1.3;}

/* Prévia de Amigos na Home (substitui "Meus painéis", redundante desde que
   os cards de atalho no topo já levam aos painéis com nome/logo próprios).
   Avatares empilhados como a estante da Biblioteca (.up-library__strip),
   mesma linguagem visual. */
.up-friends-preview{display:flex; margin:14px 0 0; padding-left:10px;}
.up-friends-preview__avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; margin-left:-10px;
  box-shadow:0 0 0 2px var(--white); background:var(--blue-500); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  overflow:hidden;
}
.up-friends-preview__avatar img{width:100%; height:100%; object-fit:cover;}
.up-friends-empty{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:20px 8px; color:var(--gray-500); font-size:13px; line-height:1.5;
}
.up-friends-empty .icon{width:28px; height:28px; color:var(--gray-300);}

/* ---------- Meus cursos ---------- */
.up-course-list{display:flex; flex-direction:column; gap:12px; margin-bottom:28px;}
.up-course-card{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease;
  text-decoration:none; color:inherit;
}
.up-course-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.up-course-card[hidden]{display:none;}
.up-course-card__icon{
  flex-shrink:0; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue-600);
}
.up-course-card__body{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0;}
.up-course-card__title{font-size:14.5px; font-weight:600; color:var(--navy-900);}
.up-course-card__meta{font-size:12px; color:var(--gray-500);}
.up-progress{display:block; width:100%; height:7px; border-radius:99px; background:var(--gray-100); overflow:hidden; margin-top:2px;}
.up-progress__bar{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue-500), var(--blue-600));}
.up-course-card__pct{font-size:11.5px; font-weight:600; color:var(--blue-600); font-family:var(--mono);}

.up-course-card__owned-badge{
  display:inline-block; margin-left:8px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.03em;
  color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100); padding:2px 7px; border-radius:99px; vertical-align:middle;
}
.up-course-card__locked-badge{
  display:inline-block; margin-left:8px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:0.03em;
  color:var(--gray-600); background:var(--gray-100); border:1px solid var(--gray-200); padding:2px 7px; border-radius:99px; vertical-align:middle;
}
.up-course-card--locked{opacity:0.72;}
.up-course-card--locked:hover{opacity:0.9;}
.up-course-card--locked .up-course-card__icon{filter:grayscale(0.8); position:relative;}
.up-course-card__lock{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,0.45); border-radius:10px;
}
.up-course-card__lock .icon{width:18px; height:18px; color:#fff;}
.up-course-card__pct--locked{color:var(--gray-500);}

.up-course-pagination{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:4px;}
.up-course-pagination__label{font-size:12.5px; color:var(--gray-500); font-family:var(--mono);}
.up-course-pagination button:disabled{opacity:0.4; cursor:not-allowed;}

.up-course-modal__aula{
  background:var(--gray-50); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-weight:600; color:var(--navy-900); font-size:13.5px;
}

/* ---------- Meus certificados ---------- */
.up-cert-list{display:flex; flex-direction:column; gap:12px;}
.up-cert-card{
  display:flex; align-items:center; gap:16px; background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; box-shadow:var(--shadow-sm);
}
.up-cert-card__icon{
  flex-shrink:0; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); color:#fff;
}
.up-cert-card__body{flex:1; min-width:0;}
.up-cert-card__title{font-size:14.5px; font-weight:600; color:var(--navy-900);}
.up-cert-card__meta{font-size:12px; color:var(--gray-500); margin-top:2px;}
.up-cert-card__action{flex-shrink:0; white-space:nowrap;}

/* Variante da coluna lateral da Home (300px): sem borda/sombra propria —
   ja esta dentro de um .up-home__aside-card — e sem botao, porque o card
   inteiro e o alvo do clique. Nao muda o tamanho de nada em volta. */
.up-cert-card--mini{
  width:100%; text-align:left; gap:12px; padding:0; border:0; box-shadow:none;
  background:transparent; cursor:pointer; font:inherit; color:inherit;
}
.up-cert-card--mini .up-cert-card__icon{width:34px; height:34px; border-radius:8px;}
.up-cert-card--mini .up-cert-card__icon .icon{width:18px; height:18px;}
.up-cert-card--mini .up-cert-card__body{display:block;}
.up-cert-card--mini .up-cert-card__title{
  font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.up-cert-card--mini .up-cert-card__meta{font-size:11.5px; display:block;}
.up-cert-card--mini:hover .up-cert-card__title{text-decoration:underline;}
[data-up-panel="home"] .up-cert-card--mini .up-cert-card__title{color:var(--up-bg-text, var(--navy-900));}
[data-up-panel="home"] .up-cert-card--mini .up-cert-card__meta{color:var(--up-bg-text-muted, var(--gray-500));}

/* ---------- Minhas conquistas ---------- */
.up-achv-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.up-achv-filter{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; font-weight:600;
  background:var(--white); border:1px solid var(--line); color:var(--gray-700);
  padding:7px 14px; border-radius:99px; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.up-achv-filter:hover{border-color:var(--blue-500);}
.up-achv-filter.is-active{background:var(--blue-500); border-color:var(--blue-500); color:var(--navy-950);}

.up-achv-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.up-achv-card{
  display:flex; gap:14px; background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.up-achv-card[hidden]{display:none;}
.up-achv-card__icon{flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center;}
.up-achv-badge{width:48px; height:48px; display:block;}
.up-achv-card.is-locked{opacity:0.65;}
.up-achv-card.is-locked .up-achv-card__icon{filter:grayscale(1) opacity(60%);}
.up-achv-card__body{flex:1; min-width:0;}
.up-achv-card__title{font-size:14px; font-weight:600; color:var(--navy-900); margin-bottom:3px;}
.up-achv-card__desc{font-size:12px; color:var(--gray-500); line-height:1.5; margin-bottom:8px;}
.up-achv-card__xp{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--blue-600);}
.up-achv-card.is-locked .up-achv-card__xp{color:var(--gray-400);}

.modal--wide{max-width:780px;}

/* Certificado em formato paisagem. O quadro — cunhas navy nos cantos,
   filetes dourados e o papel texturizado — é UMA imagem, no lugar da onda
   verde em SVG e do papel montado com gradientes repetidos. */
.up-certificate{
  position:relative; overflow:hidden; border-radius:14px; margin-bottom:22px;
  min-height:400px; padding:44px 150px 34px 150px;
  /* `100% 100%` e não `cover`: a arte é 4:3 e o certificado é mais largo.
     Com `cover` o topo e a base seriam cortados e as cunhas dos cantos
     sairiam do quadro; esticar é imperceptível porque o desenho é
     geométrico e abstrato, sem nada que denuncie a deformação. */
  background:#F7F6F5 url("../img/brand/certificado-quadro.webp") center/100% 100% no-repeat;
  box-shadow:0 1px 3px rgba(15,23,42,0.08);
}
/* O selo fica no canto inferior direito, medido na prévia com o dono do
   produto: 105px, a 34px da direita e 22px da base. Aí ele encosta na cunha
   navy sem sumir nela — o anel claro do próprio selo dá o contorno. */
.up-certificate__seal{
  position:absolute; right:34px; bottom:22px; width:105px; height:auto; z-index:2;
  filter:drop-shadow(0 6px 10px rgba(15,23,42,0.25));
}
.up-certificate__content{position:relative; z-index:1; text-align:center;}

.up-certificate__kicker{
  font-family:var(--serif); font-size:34px; font-weight:700; letter-spacing:0.14em; color:var(--navy-900);
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.up-certificate__kicker-sub{font-family:var(--sans); font-size:12.5px; letter-spacing:0.35em; color:var(--gray-600); margin-top:2px;}
.up-certificate__rule{width:110px; height:1px; background:var(--gray-300); margin:14px auto 24px;}
.up-certificate__name{
  font-family:'Great Vibes', cursive; font-size:46px; line-height:1; color:var(--navy-900); margin-bottom:16px;
  text-shadow:0 1px 0 rgba(255,255,255,0.9);
}
.up-certificate__desc{font-size:13.5px; color:var(--gray-600); max-width:48ch; margin:0 auto 28px; line-height:1.65;}
.up-certificate__desc strong{color:var(--navy-900);}
.up-certificate__footer{display:flex; justify-content:center; gap:70px; margin-top:6px;}
.up-certificate__field{display:flex; flex-direction:column; align-items:center;}
.up-certificate__field-value{
  font-size:13px; color:var(--navy-900); padding-bottom:7px; margin-bottom:6px; min-width:150px;
  border-bottom:1px solid var(--gray-300);
}
.up-certificate__field-value--sig{font-family:'Great Vibes', cursive; font-size:24px; padding-bottom:2px;}
.up-certificate__field-label{font-family:var(--sans); font-size:10px; letter-spacing:0.15em; color:var(--gray-500);}
/* Centralizado embaixo, e não à esquerda: em `left:92px` ele encostava na
   arte do canto, e no celular passava por cima dela. Centrado, ainda ganha
   ar de registro oficial. */
.up-certificate__code{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
  font-family:var(--mono); font-size:9.5px; color:var(--gray-500); z-index:1;
}
@media(max-width:640px){
  .up-certificate{padding:34px 74px 30px 74px; min-height:0;}
  .up-certificate__seal{width:74px; right:18px; bottom:14px;}
  .up-certificate__kicker{font-size:26px;}
  .up-certificate__name{font-size:34px;}
  .up-certificate__footer{gap:28px; flex-wrap:wrap;}
}

/* ---------- Artigos favoritados ---------- */
.up-fav-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;}
.up-fav-card{
  display:block; text-decoration:none; border-radius:12px; overflow:hidden; position:relative;
  min-height:150px; background-size:cover; background-position:center; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.up-fav-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.up-fav-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0.15) 0%, rgba(15,23,42,0.85) 100%);
}
.up-fav-card__body{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; color:#fff;}
.up-fav-card__tag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em;
  background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.3); padding:2px 8px; border-radius:99px; margin-bottom:8px;
}
.up-fav-card__title{font-size:13.5px; font-weight:600; line-height:1.35;}

/* ---------- Responsivo ---------- */
/* No desktop o botão não existe: a lista está sempre aberta ao lado. */
.up-sidebar__menu-toggle{
  display:none; width:100%; align-items:center; gap:10px; margin-top:16px;
  padding:11px 12px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  font-family:inherit; font-size:13px; font-weight:600; color:#fff;
  transition:background-color .16s ease, border-color .16s ease;
}
.up-sidebar__menu-toggle:hover{background:rgba(255,255,255,0.11);}
.up-sidebar__menu-toggle:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}
.up-sidebar__menu-toggle span{flex:1; text-align:left;}
.up-sidebar__menu-caret{transition:transform .18s ease;}
.up-sidebar.is-menu-open .up-sidebar__menu-caret{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){
  .up-sidebar__menu-caret{transition:none;}
}

@media(max-width:900px){
  /* `align-items:flex-start` faz sentido lado a lado, mas em coluna ele passa
     a dimensionar os filhos pelo CONTEÚDO em vez de esticá-los: .up-main
     nascia com 487px numa tela de 375px e a página rolava para o lado.
     `stretch` devolve a largura da tela a cada bloco. */
  .up-shell{flex-direction:column; align-items:stretch; padding:20px 16px 48px; gap:18px;}
  .up-sidebar{width:100%; position:relative; top:0; padding:16px;}
  .up-main{width:100%;}

  /* Recolhida, a barra é SÓ o botão. Foto, nome, e-mail e nível também se
     escondem: o cabeçalho do perfil, logo abaixo, já mostra tudo isso, e as
     duas coisas juntas eram quase 600px de identidade repetida antes do
     primeiro conteúdo. Ao abrir o menu, ela volta inteira — é ali que ficam
     a troca de foto e a régua de XP.
     As mensagens do sistema (.up-flash-list) ficam FORA disso: aviso que
     alguém precisa ler não pode depender de abrir um menu. */
  .up-sidebar__menu-toggle{display:flex; margin-top:0;}
  .up-sidebar__nav{display:none; margin-top:12px;}
  /* O cartão "glass" (.up-sidebar__profile-card) embrulha .up-sidebar__profile
     e a régua de XP, mas não esconde sozinho quando os dois somem — sem esta
     linha ele ficava de pé, vazio, como uma barra decorativa sem nada dentro. */
  .up-sidebar__profile-card,
  .up-sidebar__profile,
  .up-sidebar .up-xp-bar,
  .up-sidebar .up-avatar-upload__actions{display:none;}

  .up-sidebar.is-menu-open .up-sidebar__nav{display:flex;}
  .up-sidebar.is-menu-open .up-sidebar__profile-card{display:block;}
  .up-sidebar.is-menu-open .up-sidebar__profile{display:flex;}
  .up-sidebar.is-menu-open .up-xp-bar{display:block;}
  /* `:not([hidden])` respeita o estado do botão de salvar foto, que nasce
     escondido e só aparece depois de escolher uma imagem. */
  .up-sidebar.is-menu-open .up-avatar-upload__actions:not([hidden]){display:flex;}
}

/* ---------- Impressão do certificado (botão "Baixar certificado") ---------- */
/* O botão "Baixar certificado (PDF)" chama window.print(): o PDF sai da
   caixa de impressão do navegador, então é AQUI que ele é diagramado.

   O certificado é paisagem, e antes a folha saía em retrato com ele
   limitado a 640px — um diploma deitado, pequeno, no meio de uma página
   em pé. `@page` resolve a orientação; sem ela nenhuma largura adianta. */
@page{size:A4 landscape; margin:0;}
@media print{
  body *{visibility:hidden;}
  #upCertificatePrint, #upCertificatePrint *{visibility:visible;}
  #upCertificatePrint{
    position:fixed; inset:0; width:100%; height:100%;
    margin:0; border-radius:0; max-width:none;
  }
  /* O fundo do quadro é a peça — sem isto o navegador imprime a folha
     branca e some com as cunhas e os filetes. */
  #upCertificatePrint{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* ---------- Teste de Nivelamento (card Competências da Home) ------------ */
/* Aparece no lugar do radar para quem ainda não respondeu nenhuma questão.
   Vive dentro da coluna lateral (~340px), então tudo aqui é compacto. */
.up-teste__lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.up-teste__areas {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.up-teste__areas li {
  font-size: 11px; font-family: var(--mono); letter-spacing: .02em;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(16, 185, 129, .1); color: #047857;
}
/* O botão leva ao Banco de Questões, onde o teste roda de verdade — as
   regras do executor (enunciado, opções, feedback) saíram junto com ele. */
.up-teste__start { width: 100%; justify-content: center; text-align: center; }
.up-teste__free { margin: 8px 0 0; font-size: 11px; text-align: center; color: var(--gray-500); }

/* O atributo hidden nativo perde para as regras display: do radar acima. */
#upCompetencias[hidden] { display: none !important; }

/* ---------- Radar de Competências no grid da Home ------------------- */
/* O cartão de Competências vive numa das 3 colunas do grid (ver
   .up-home-grid3) — o SVG tem 460px intrínsecos; sem isto ele fica
   encostado à esquerda numa coluna bem mais estreita que isso. */
.up-home-grid3 .dsp--so-radar .cp-chart { display: flex; justify-content: center; }
.up-home-grid3 .dsp--so-radar .cp-chart svg { width: 100%; max-width: 100%; height: auto; }

/* ---------- Atalho da Biblioteca (Home) ----------
   O cartão inteiro é <a>, então herda a caixa de .up-home__aside-card e só
   precisa desfazer o sublinhado e ganhar a resposta ao ponteiro. A faixa de
   capas é o conteúdo: quatro miniaturas em 2:3, sobrepostas como lombadas
   numa prateleira — mostra o acervo em vez de anunciá-lo. */
.up-library{display:block; text-decoration:none; color:inherit; transition:border-color .16s ease;}
.up-library:hover{border-color:var(--gray-400);}
.up-library:hover .up-week-card__cta{text-decoration:underline;}
/* Os três últimos registrados, sobrepostos como lombadas numa prateleira.
   A margem negativa é o que os encosta um no outro; o anel branco separa um
   do outro sem precisar de borda colorida. */
.up-library__strip{display:flex; gap:0; margin:18px 0 14px; padding-left:10px;}
.up-library__strip img,
.up-library__blank{
  width:76px; height:114px; flex:0 0 auto; border-radius:8px; display:block;
  margin-left:-10px; box-shadow:0 0 0 2px var(--white), 0 2px 6px rgba(15,23,42,.2);
  transition:transform .18s ease;
}
.up-library__strip img{object-fit:cover;}
/* Sem capa, a mesma solução da estante: o título faz as vezes da arte. A cor
   vem de .sp-tipo[data-tipo] (studies-panel.css, também carregado aqui). */
.up-library__blank{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px 6px; box-sizing:border-box; overflow:hidden;
  font-size:9.5px; line-height:1.4; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tipo, var(--gray-500)); overflow-wrap:anywhere;
  background:var(--gray-100);
  background:color-mix(in srgb, var(--tipo, var(--gray-500)) 10%, var(--white));
}
.up-library:hover .up-library__strip img,
.up-library:hover .up-library__blank{transform:translateY(-3px);}
@media (prefers-reduced-motion:reduce){
  .up-library__strip img, .up-library__blank{transition:none;}
  .up-library:hover .up-library__strip img,
  .up-library:hover .up-library__blank{transform:none;}
}

/* ---------- Foto no modal "Editar perfil" ----------
   Mesmo padrão da capa da biblioteca: a imagem É o campo de arquivo. O
   input fica oculto visualmente (e não com display:none) para continuar
   clicável no Safari do iPhone e focável pelo teclado; o anel de foco
   aparece na moldura, via :focus-within. */
.ep-avatar{
  display:flex; align-items:center; gap:16px;
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.ep-avatar__box{
  position:relative; width:96px; height:96px; flex:0 0 auto; border-radius:16px;
  overflow:hidden; cursor:pointer; background:var(--gray-100);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.10);
  transition:box-shadow .16s ease;
}
.ep-avatar__box:hover{box-shadow:inset 0 0 0 1px rgba(15,23,42,.2), 0 4px 14px rgba(15,23,42,.12);}
.ep-avatar__box:focus-within{outline:2px solid var(--blue-500); outline-offset:3px;}
.ep-avatar__box.is-dragging{outline:2px dashed var(--blue-500); outline-offset:3px;}
.ep-avatar__box img{width:100%; height:100%; object-fit:cover; display:block;}
.ep-avatar__box img[hidden]{display:none;}
.ep-avatar__initial{font-size:30px; font-weight:700; color:var(--gray-400);}
.ep-avatar__initial[hidden]{display:none;}
/* Etiqueta sempre visível, e não só no hover: em tela de toque não existe
   hover, e um alvo que só se anuncia com o ponteiro não existiria no
   celular. */
/* Ocupa a base inteira da moldura: com margens laterais sobravam 55px para
   o texto e "Trocar foto" quebrava em duas linhas. */
.ep-avatar__pick{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 4px; background:rgba(255,255,255,.94);
  font-size:10.5px; font-weight:600; color:var(--navy-900); white-space:nowrap;
  box-shadow:0 -1px 3px rgba(15,23,42,.12);
}
.ep-avatar__pick .icon{width:12px; height:12px; flex:0 0 auto;}
.ep-avatar__side{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.ep-avatar__hint{margin:0; font-size:12.5px; color:var(--gray-500);}
.ep-avatar__side .btn[hidden]{display:none;}


/* ---------- Convites de painel esperando resposta ----------
   Só existe quando há algo pendente, e por isso pode chamar atenção sem
   virar ruído permanente: é uma decisão que alguém está esperando. */
.up-invites{
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%);
  color:#fff; border-radius:16px; padding:20px 22px; margin-bottom:24px;
}
.up-invites .up-home__block-title{color:#fff; margin:0 0 12px;}
.up-invites__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.up-invites__item{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
}
.up-invites__texto{flex:1; min-width:200px; font-size:13.5px; color:var(--gray-200); line-height:1.5;}
.up-invites__texto strong{color:#fff;}
.up-invites__oque{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px;
  background:rgba(255,255,255,0.1); font-size:11px; color:var(--gray-300);
}
.up-invites__acoes{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.up-invites__recusar{
  appearance:none; background:none; border:0; padding:6px 8px; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--gray-400); transition:color .16s ease;
}
.up-invites__recusar:hover{color:#fff;}
@media (max-width:560px){
  .up-invites__acoes{width:100%; justify-content:flex-end;}
}

/* ---------- Aba Assinatura ---------------------------------------------
   O conteúdo chega por fetch depois que a aba abre (ver
   js/userpanel-assinatura.js), então há um estado de espera de verdade —
   não é enfeite: a consulta à Stripe leva um instante perceptível. */
.up-assin-carregando{
  display:flex; align-items:center; gap:10px;
  color:var(--gray-600); font-size:14px; padding:26px 2px;
}
.up-assin-spinner{
  width:15px; height:15px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--gray-300); border-top-color:var(--blue-500);
  animation:up-assin-girar .7s linear infinite;
}
@keyframes up-assin-girar{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .up-assin-spinner{animation:none; border-top-color:var(--gray-400);}
}

.up-assin-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.up-assin-card__topo{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:10px;
}
.up-assin-card__rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray-500);
}
.up-assin-card__plano{font-size:20px; color:var(--navy-900); margin:2px 0 0;}
.up-assin-card__desc{color:var(--gray-600); font-size:14px; margin:8px 0 16px; max-width:56ch;}
.up-assin-card__titulo{
  font-size:12px; font-family:var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-500); margin:0 0 12px;
}
.up-assin-card--vazio{text-align:left;}

.up-assin-selo{
  font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px;
  background:rgba(16,185,129,.12); color:#047857; white-space:nowrap;
}
.up-assin-selo--alerta{background:rgba(217,119,6,.12); color:#B45309;}

/* O valor é a informação que a pessoa vem procurar: fica em corpo maior,
   sozinho, acima dos demais fatos. */
.up-assin-preco{font-size:15px; color:var(--gray-700); margin:0 0 14px;}
.up-assin-preco strong{font-size:22px; color:var(--navy-900); font-weight:700;}

.up-assin-fatos{
  display:flex; flex-wrap:wrap; gap:10px 40px; margin:0;
  padding-top:14px; border-top:1px solid var(--line);
}
.up-assin-fato dt{font-size:11.5px; color:var(--gray-500); margin-bottom:2px;}
.up-assin-fato dd{font-size:14px; color:var(--navy-900); margin:0; font-weight:500;}

.up-assin-nota{
  display:flex; gap:8px; font-size:13px; line-height:1.55;
  color:var(--gray-600); margin:14px 0 0;
}
.up-assin-nota--alerta{
  background:rgba(217,119,6,.08); color:#92400E; border-radius:9px;
  padding:10px 13px; border:1px solid rgba(217,119,6,.22);
}

.up-assin-cartao{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0; font-size:14px;}
.up-assin-cartao__bandeira{
  font-weight:600; color:var(--navy-900); border:1px solid var(--line);
  border-radius:6px; padding:3px 9px; font-size:12.5px;
}
.up-assin-cartao__num{font-family:var(--mono); color:var(--navy-900); letter-spacing:.04em;}
.up-assin-cartao__val{color:var(--gray-500); font-size:12.5px;}

.up-assin-faturas{list-style:none; margin:0; padding:0;}
/* Colunas fixas: data, valor, situação e o PDF. Alinhadas de uma linha para
   a outra, dá para correr o olho pela coluna do valor sem ler o resto. */
.up-assin-fatura{
  display:grid; grid-template-columns:1fr auto 84px 52px; gap:12px;
  align-items:center; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.up-assin-fatura:last-child{border-bottom:0;}
.up-assin-fatura__data{color:var(--gray-700);}
.up-assin-fatura__valor{font-variant-numeric:tabular-nums; color:var(--navy-900); font-weight:500;}
.up-assin-fatura__status{font-size:12px; color:var(--gray-500);}
.up-assin-fatura__status--paga{color:#047857;}
.up-assin-fatura__pdf{
  font-size:12px; font-weight:600; color:var(--blue-600); text-decoration:none;
  justify-self:end;
}
.up-assin-fatura__pdf:hover{text-decoration:underline;}
.up-assin-fatura__pdf--vazio{color:var(--gray-400); font-weight:400;}

#upAssinaturaPortal{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px;}
.up-assin-dica{font-size:12.5px; color:var(--gray-500);}
.up-assin-rodape{
  font-size:12px; color:var(--gray-500); line-height:1.6;
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line); max-width:64ch;
}

@media(max-width:640px){
  .up-assin-fatura{grid-template-columns:1fr auto 46px; gap:8px;}
  .up-assin-fatura__status{display:none;}
  .up-assin-fatos{gap:10px 24px;}
}

/* Trocando de semana COM semana já na tela: a de agora fica, esmaecida, em
   vez de dar lugar a um spinner. A espera continua a mesma; o que muda é que
   a pessoa não perde a referência de onde estava, e a tela não pisca. */
.up-section.is-ag-carregando [data-ag-conteudo],
.up-section.is-ag-carregando .up-ag-dias{
  opacity:.42; pointer-events:none;
}
.up-section.is-ag-carregando .up-ag-periodo{opacity:.42;}
.up-section.is-ag-carregando [data-ag-conteudo],
.up-section.is-ag-carregando .up-ag-dias,
.up-section.is-ag-carregando .up-ag-periodo{
  transition:opacity .15s ease;
}
/* O "Tentar de novo" nasce dentro do parágrafo de erro. */
.up-ag-vazio .up-ag-hoje{margin-left:8px; vertical-align:baseline;}

/* O atributo hidden nativo perde para as regras display: acima. */
.up-assin-card[hidden], #upAssinaturaConteudo[hidden], #upAssinaturaPortal[hidden],
.up-assin-carregando[hidden]{display:none !important;}

/* ---------- Aba Agenda Geral -------------------------------------------
   Estrutura tirada do exemplo de rotina semanal: abas de dia, trilho
   vertical e ponto colorido por item. A paleta é a CLARA do painel, e não
   a escura do exemplo — a aba mora dentro do Minha Área, e um bloco escuro
   ali seria uma ilha.

   A cor de cada item vem por --ag-cor, definida no JS a partir da MESMA
   tabela que monta a legenda (app/agenda_geral.py::CORES). Assim não há
   como a bolinha da legenda discordar da bolinha do evento. */
.up-ag-barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.up-ag-nav{display:flex; align-items:center; gap:10px;}
.up-ag-seta{
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--navy-900);
  font:inherit; line-height:1; display:flex; align-items:center; justify-content:center;
}
.up-ag-seta:hover{border-color:var(--blue-500); color:var(--blue-600);}
.up-ag-seta:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}
.up-ag-periodo{
  font-family:var(--mono); font-size:13px; color:var(--navy-900);
  min-width:118px; text-align:center; font-variant-numeric:tabular-nums;
}
.up-ag-hoje{
  appearance:none; border:1px solid var(--line); background:#fff; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--gray-700);
  padding:6px 12px; border-radius:8px;
}
.up-ag-hoje:hover{border-color:var(--blue-500); color:var(--blue-600);}

/* Abas de dia. Rolam na horizontal em tela estreita em vez de espremer
   sete colunas até o número do dia ficar ilegível. */
.up-ag-dias{
  display:flex; gap:6px; margin-bottom:18px; padding-top:8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.up-ag-dias .up-ag-dia{min-width:52px;}
.up-ag-dia{
  appearance:none; cursor:pointer; font:inherit; flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px 11px; border-radius:11px; position:relative;
  border:1px solid var(--line); background:#fff; color:var(--gray-700);
}
.up-ag-dia:hover{border-color:var(--blue-300);}
.up-ag-dia:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}
.up-ag-dia__nome{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;}
.up-ag-dia__num{font-size:17px; font-weight:600; color:var(--navy-900); line-height:1.1;}
.up-ag-dia.is-ativo{
  background:var(--navy-900); border-color:var(--navy-900); color:rgba(255,255,255,.75);
}
.up-ag-dia.is-ativo .up-ag-dia__num{color:#fff;}
/* Hoje ganha um fio embaixo, e não a cor de fundo — a cor de fundo já é o
   estado "aba aberta", e usar a mesma para duas coisas confunde as duas. */
.up-ag-dia.is-hoje::after{
  content:""; position:absolute; left:26%; right:26%; bottom:5px;
  height:2px; border-radius:2px; background:var(--blue-500);
}
/* O contador fica NO CANTO SUPERIOR, meio para fora da aba: dentro dela
   ele cobria o nome do dia, e encolher a fonte só tornaria os dois
   ilegíveis em vez de um. */
.up-ag-dia__pin{
  position:absolute; top:-6px; right:-4px; min-width:17px; height:17px;
  border-radius:999px; background:var(--blue-500); color:#fff;
  font-size:10px; font-weight:600; line-height:17px; text-align:center;
  padding:0 4px; box-shadow:0 0 0 2px #fff;
}

.up-ag-carregando{
  display:flex; align-items:center; gap:10px;
  color:var(--gray-700); font-size:14px; padding:22px 2px;
}
.up-ag-spinner{
  width:15px; height:15px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--gray-300); border-top-color:var(--blue-500);
  animation:up-ag-girar .7s linear infinite;
}
@keyframes up-ag-girar{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .up-ag-spinner{animation:none; border-top-color:var(--gray-400);}
}

.up-ag-painel{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; box-shadow:var(--shadow-sm);
}
.up-ag-cab{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.up-ag-cab__dia{font-size:18px; color:var(--navy-900); margin:0;}
.up-ag-chip-hoje{
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(16,185,129,.12); color:var(--blue-600);
  padding:3px 9px; border-radius:999px;
}

.up-ag-resumo{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
.up-ag-stat{
  display:flex; align-items:baseline; gap:7px;
  background:#F8FAFC; border:1px solid var(--line);
  border-radius:9px; padding:6px 12px;
}
.up-ag-stat__val{font-size:16px; font-weight:700; color:var(--navy-900); font-variant-numeric:tabular-nums;}
.up-ag-stat__rot{font-size:11.5px; color:var(--gray-700);}
.up-ag-stat--zero{opacity:.45;}

.up-ag-faixa-titulo{
  font-size:10.5px; font-family:var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:var(--gray-500);
  margin:18px 0 9px;
}
.up-ag-faixa{display:flex; flex-direction:column; gap:7px;}

/* O trilho é o ::before da lista, e não uma borda em cada item: assim ele
   é contínuo entre os itens e para exatamente no último. */
.up-ag-linha{position:relative; padding-left:19px; display:flex; flex-direction:column; gap:7px;}
.up-ag-linha::before{
  content:""; position:absolute; left:5px; top:9px; bottom:9px;
  width:2px; background:var(--line); border-radius:2px;
}

.up-ag-item{
  display:flex; align-items:flex-start; gap:12px; position:relative;
  text-decoration:none; border-radius:10px; padding:10px 12px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .14s ease, transform .14s ease;
}
.up-ag-item:hover{border-color:var(--ag-cor, var(--blue-500)); transform:translateX(1px);}
.up-ag-item:focus-visible{outline:2px solid var(--ag-cor, var(--blue-500)); outline-offset:2px;}
/* A bolinha do trilho. Fica no item, sobre a linha desenhada pela lista. */
.up-ag-linha .up-ag-item::before{
  content:""; position:absolute; left:-18px; top:15px;
  width:9px; height:9px; border-radius:50%;
  background:var(--ag-cor, #64748B); box-shadow:0 0 0 3px #fff;
}
/* Na faixa "o dia todo" não há trilho, então a cor vira um fio à esquerda. */
.up-ag-faixa .up-ag-item{border-left:3px solid var(--ag-cor, #64748B);}

.up-ag-item__hora{
  font-family:var(--mono); font-size:12.5px; color:var(--navy-900);
  font-variant-numeric:tabular-nums; flex-shrink:0; padding-top:1px; min-width:42px;
}
.up-ag-item__corpo{flex:1; min-width:0;}
.up-ag-item__nome{
  display:block; font-size:14px; font-weight:600; color:var(--navy-900);
  line-height:1.35; overflow-wrap:anywhere;
}
.up-ag-item__meta{display:block; font-size:12px; color:var(--gray-700); margin-top:2px;}
.up-ag-item__tipo{color:var(--ag-cor, var(--gray-700)); font-weight:500;}
.up-ag-item__sep{margin:0 5px; color:var(--gray-400);}
.up-ag-item__origem{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gray-500); border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; flex-shrink:0; align-self:center;
}

.up-ag-vazio{color:var(--gray-500); font-size:13.5px; padding:16px 2px 4px; margin:0;}

.up-ag-legenda{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:16px;}
.up-ag-tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gray-700);}
.up-ag-tag__ponto{width:9px; height:9px; border-radius:3px; flex-shrink:0;}

/* Botão de excluir só do evento "Geral" — o único tipo que não tem painel
   de origem pra oferecer essa ação. */
.up-ag-item__excluir{
  flex-shrink:0; align-self:center; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--gray-500);
  font-size:15px; line-height:1; cursor:pointer; transition:background .14s ease, color .14s ease;
}
.up-ag-item__excluir:hover{background:#FEF2F2; border-color:#FCA5A5; color:#DC2626;}

/* ---------- Cabeçalho da Agenda Geral + modal "+ Novo evento" ----------
   O cabeçalho ganha um botão à direita só aqui — .up-panel-header sozinho
   (reaproveitado pelas outras abas) continua um bloco simples, sem virar
   flex pra todo mundo por causa de uma aba só. */
.up-ag-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}

.up-ag-criar-cats{display:flex; gap:8px; flex-wrap:wrap;}
.up-ag-criar-cat{
  padding:8px 14px; border-radius:999px; border:1px solid var(--gray-300); background:#fff;
  color:var(--gray-700); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.up-ag-criar-cat:hover{border-color:var(--navy-700);}
.up-ag-criar-cat.is-selecionado{background:var(--navy-900); border-color:var(--navy-900); color:#fff;}

.up-ag-criar-duracao{display:flex; gap:8px;}
.up-ag-criar-duracao .form-input{width:50%;}
/* Empresa não tem hora nem duração — sobra só a Data, e a grade de 2
   colunas deixaria metade da linha vazia ao lado dela. */
#upAgCriarForm .form-row--grid:has(#upAgCriarHoraCol[hidden]):has(#upAgCriarDuracaoCol[hidden]){grid-template-columns:1fr;}

.up-ag-criar-check{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--navy-900); cursor:pointer; margin-bottom:14px;
}
.up-ag-criar-check input{accent-color:var(--blue-500); width:16px; height:16px;}

.up-ag-criar-recorrencia{
  background:var(--gray-50); border:1px solid var(--line); border-radius:10px;
  padding:14px 14px 2px; margin-bottom:14px;
}
.up-ag-criar-dias{display:flex; flex-wrap:wrap; gap:4px 12px;}
.up-ag-criar-dias label{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--gray-700);}
.up-ag-criar-dias input{accent-color:var(--blue-500);}

.up-ag-criar-erro{
  font-size:12.5px; color:#DC2626; background:#FEF2F2; border:1px solid #FCA5A5;
  border-radius:8px; padding:8px 11px; margin:0 0 14px;
}

@media(max-width:560px){
  .up-ag-header{flex-direction:column; align-items:stretch;}
  .up-ag-header #upAgCriarAbrir{width:100%;}
}

@media(max-width:640px){
  .up-ag-painel{padding:16px 15px;}
  .up-ag-item__origem{display:none;}
  .up-ag-dia{min-width:58px;}
}

/* O atributo hidden nativo perde para as regras display: acima. */
.up-ag-carregando[hidden], .up-ag-legenda[hidden],
[data-ag-conteudo][hidden], .up-ag-hoje[hidden]{display:none !important;}

/* Card "Agenda de hoje" da Home. É resumo, não agenda: no máximo três itens
   e um "+N hoje" — a semana inteira mora na aba, a um clique. Por isso as
   linhas aqui são bem mais enxutas que as de .up-ag-item. */
.up-ag-mini{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; padding:12px 14px; border-radius:9px;
  border-left:4px solid var(--ag-cor, #64748B);
  background:#F8FAFC; margin-bottom:9px;
  transition:background .14s ease;
}
.up-ag-mini:last-child{margin-bottom:0;}
.up-ag-mini:hover{background:#EEF2F7;}
.up-ag-mini:focus-visible{outline:2px solid var(--ag-cor, var(--blue-500)); outline-offset:2px;}
.up-ag-mini__hora{
  font-family:var(--mono); font-size:12.5px; color:var(--gray-700);
  font-variant-numeric:tabular-nums; flex-shrink:0; min-width:38px;
}
.up-ag-mini__nome{
  flex:1; min-width:0; font-size:14.5px; font-weight:500; color:var(--navy-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.up-ag-mini__origem{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gray-500); flex-shrink:0;
}
.up-ag-mini__resto{
  margin:9px 0 0; font-size:12.5px; color:var(--gray-500);
}
/* Vazio: ícone decorativo pra não sobrar um fiapo de texto sozinho no
   cartão, agora numa coluna tão larga quanto Meta semanal/Competências. */
#upHomeAgendaVazio{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:22px 10px; color:var(--gray-500);
}
#upHomeAgendaVazio .icon{width:28px; height:28px; color:var(--gray-300);}

#upHomeAgendaLista[hidden], #upHomeAgendaVazio[hidden]{display:none !important;}

/* ---------- Tema escuro das abas fora da Home ----------
   A Home usa página clara (var(--gray-50), igual ao resto do site) com
   cards escuros por cima — não uma página inteira escura. Meus Cursos,
   Meus Certificados, Amigos, Assinatura e Minhas Conquistas usavam cards
   brancos (background:var(--white), convenção de ANTES da Home ganhar o
   visual escuro) — a página já nascia clara nelas, só que sem nenhum card
   escuro em cima, então destoavam de todo o resto do Minha Área. Esta
   seção escurece exatamente os mesmos componentes que a Home já escurece
   (cards de nível/curso/certificado/conquista), sem mexer no texto solto
   do cabeçalho de cada aba (`.up-panel-header`), que já funciona certo
   sobre a página clara. Artigos Favoritados fica de fora: o card ali já é
   a própria capa do artigo com um degradê escuro por cima, não um
   retângulo branco. Agenda Geral fica de fora de propósito — tem paleta
   própria documentada no local (ver .up-ag-barra acima). */
/* Meus Cursos / Meus Certificados */
.up-section:not([data-up-panel="home"]) .up-course-card,
.up-section:not([data-up-panel="home"]) .up-cert-card{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-color:rgba(255,255,255,0.1);
}
.up-section:not([data-up-panel="home"]) .up-course-card__title,
.up-section:not([data-up-panel="home"]) .up-cert-card__title{color:#fff;}
.up-section:not([data-up-panel="home"]) .up-course-card__meta,
.up-section:not([data-up-panel="home"]) .up-cert-card__meta{color:rgba(255,255,255,0.6);}
.up-section:not([data-up-panel="home"]) .up-course-card__pct--locked{color:rgba(255,255,255,0.5);}
.up-section:not([data-up-panel="home"]) .up-course-modal__aula{
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:#fff;
}

/* Amigos — o formulário "Adicionar pelo @" fica como já estava (a página
   continua clara aqui, só os cards de amigo abaixo precisavam escurecer). */
.up-section[data-up-panel="amigos"] .fr-linha{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:10px 14px;
}
.up-section[data-up-panel="amigos"] .fr-linha__id strong{color:#fff;}
.up-section[data-up-panel="amigos"] .fr-linha__link:hover .fr-linha__id strong{color:var(--blue-400);}
.up-section[data-up-panel="amigos"] .fr-linha__handle{color:rgba(255,255,255,0.55);}
.up-section[data-up-panel="amigos"] .fr-linha__ver{color:var(--blue-400);}
.up-section[data-up-panel="amigos"] .fr-linha__recusar{color:rgba(255,255,255,0.5);}
.up-section[data-up-panel="amigos"] .fr-linha__recusar:hover{color:#F87171;}

/* Assinatura */
.up-section[data-up-panel="assinatura"] .up-assin-card{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-color:rgba(255,255,255,0.1);
}
.up-section[data-up-panel="assinatura"] .up-assin-card__rotulo,
.up-section[data-up-panel="assinatura"] .up-assin-card__titulo{color:rgba(255,255,255,0.5);}
.up-section[data-up-panel="assinatura"] .up-assin-card__plano{color:#fff;}
.up-section[data-up-panel="assinatura"] .up-assin-card__desc{color:rgba(255,255,255,0.65);}
.up-section[data-up-panel="assinatura"] .up-assin-preco{color:rgba(255,255,255,0.75);}
.up-section[data-up-panel="assinatura"] .up-assin-preco strong{color:#fff;}
.up-section[data-up-panel="assinatura"] .up-assin-fatos{border-top-color:rgba(255,255,255,0.1);}
.up-section[data-up-panel="assinatura"] .up-assin-fato dt{color:rgba(255,255,255,0.5);}
.up-section[data-up-panel="assinatura"] .up-assin-fato dd{color:#fff;}
.up-section[data-up-panel="assinatura"] .up-assin-nota{color:rgba(255,255,255,0.65);}
.up-section[data-up-panel="assinatura"] .up-assin-cartao__bandeira{color:#fff; border-color:rgba(255,255,255,0.18);}
.up-section[data-up-panel="assinatura"] .up-assin-cartao__num{color:#fff;}
.up-section[data-up-panel="assinatura"] .up-assin-cartao__val{color:rgba(255,255,255,0.5);}
.up-section[data-up-panel="assinatura"] .up-assin-fatura{border-bottom-color:rgba(255,255,255,0.1);}
.up-section[data-up-panel="assinatura"] .up-assin-fatura__data{color:rgba(255,255,255,0.7);}
.up-section[data-up-panel="assinatura"] .up-assin-fatura__valor{color:#fff;}
.up-section[data-up-panel="assinatura"] .up-assin-fatura__status{color:rgba(255,255,255,0.5);}
.up-section[data-up-panel="assinatura"] .up-assin-fatura__pdf--vazio{color:rgba(255,255,255,0.35);}
/* up-assin-dica e up-assin-rodape ficam de fora: vivem fora do card
   (ver #upAssinaturaPortal/up-assin-rodape em panel.html), direto sobre a
   página clara, então o estilo padrão (escuro sobre claro) já é o certo. */

/* Minhas conquistas — os chips de filtro ficam como já estavam (claros,
   soltos sobre a página clara); só o grid de cards precisava escurecer. */
.up-section[data-up-panel="conquistas"] .up-achv-card{
  background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-color:rgba(255,255,255,0.1);
}
.up-section[data-up-panel="conquistas"] .up-achv-card__title{color:#fff;}
.up-section[data-up-panel="conquistas"] .up-achv-card__desc{color:rgba(255,255,255,0.6);}