/* ============================================================
   Alumni PCE — theme.css
   Design tokens + shell + glass + componentes.
   Consolidado dos 15 mockups (CLAUDE.md §4/§5). Fonte de verdade visual.
   ============================================================ */

:root{
  --pce-green:#61F858;      /* selo/aros/destaques de gamificação */
  --pce-cta:#2C9B68;        /* botão primário no tema escuro */
  --dark-button:#1A202C;    /* botão primário no tema claro */
  --rosa-1:#F2A6E0;
  --rosa-2:#E066C7;
  --rosa-3:#B84A93;
  --sidebar-w:264px;
  --sidebar-w-c:84px;
  --radius-lg:20px;
}
html[data-bs-theme="dark"]{
  --bg:#080C17; --surface:#0E1424; --surface-2:#131A2C;
  --ink:#F3F5F8; --muted:#8C93A8; --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.05);
}
html[data-bs-theme="light"]{
  --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#F1F2F5;
  --ink:#10131A; --muted:#6B7280; --line:rgba(10,15,25,.08);
  --glass:rgba(255,255,255,.65);
}

*{box-sizing:border-box;scrollbar-width:thin;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);transition:background-color .4s,color .4s;}
.ff-display{font-family:'Sora',sans-serif;}
a{text-decoration:none;}
.muted{color:var(--muted)!important;}

.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--line);border-radius:var(--radius-lg);}

/* Assinatura facetada (heros/banners de destaque — não usar em cards comuns) */
.faceted{clip-path:polygon(0 0,100% 0,100% 100%,26px 100%,0 calc(100% - 26px));}

.btn-pce{background:var(--pce-cta);color:#fff;border:none;font-weight:700;border-radius:12px;transition:transform .15s ease,background .2s ease;}
.btn-pce:hover{background:#278a5c;color:#fff;transform:translateY(-1px);}
html[data-bs-theme="light"] .btn-pce{background:var(--dark-button);}
html[data-bs-theme="light"] .btn-pce:hover{background:#000;}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:12px;font-weight:600;}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}

.form-control,.form-select,textarea.form-control{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:12px;}
.form-control:focus,.form-select:focus{background:var(--surface);color:var(--ink);border-color:var(--pce-green);box-shadow:0 0 0 .2rem rgba(97,248,88,.18);}
label{font-weight:600;font-size:.88rem;}

/* ── Marca / logo ─────────────────────────────────────────── */
.brand-mark{color:var(--ink);flex-shrink:0;}
.brand-word,.brand-text{font-weight:700;line-height:1.15;letter-spacing:.03em;}
.brand-word b,.brand-text b{color:var(--pce-green);}

/* Logo SVG oficial PCE: branca no dark, escura no light */
.brand-full svg,
.brand-icon-only svg,
.brand-logo-full svg {
  color: var(--ink);
  transition: color .4s;
}
/* No tema claro o ícone fica na cor do texto (escuro) */
html[data-bs-theme="light"] .brand-full svg,
html[data-bs-theme="light"] .brand-icon-only svg,
html[data-bs-theme="light"] .brand-logo-full svg {
  color: var(--ink);
}
/* No telão (fundo sempre escuro) força branco */
.telao-wrap svg.panther-svg,
.telao-wrap .brand-full svg {
  color: #fff;
}

/* ============================================================
   AUTH (login, trocar-senha, onboarding, sobre, 404)
   ============================================================ */
.bg-blob{position:fixed;border-radius:50%;filter:blur(110px);z-index:0;pointer-events:none;transition:opacity .4s ease;}
.blob-1{width:520px;height:520px;background:var(--pce-green);opacity:.16;top:-160px;left:-160px;}
.blob-2{width:420px;height:420px;background:var(--pce-cta);opacity:.14;bottom:-140px;right:-100px;}
html[data-bs-theme="light"] .blob-1,html[data-bs-theme="light"] .blob-2{opacity:.10;}
.theme-toggle{position:fixed;top:1.5rem;right:1.5rem;z-index:10;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .25s ease;}
.theme-toggle:hover{transform:scale(1.08) rotate(-8deg);}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;padding:1.5rem;}
.auth-card{width:100%;max-width:440px;background:var(--glass);backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--line);border-radius:22px;padding:2.4rem 2.1rem 2rem;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);}
.ribbon{position:absolute;top:0;left:0;width:120px;height:6px;background:linear-gradient(90deg,var(--pce-green),transparent);clip-path:polygon(0 0,100% 0,88% 100%,0% 100%);}
.input-icon{position:relative;}
.input-icon i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted);}
.input-icon .form-control{padding-left:2.6rem;}
.input-icon .toggle-eye{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;border:none;background:none;}
.link-green{color:var(--pce-green);font-weight:600;font-size:.85rem;}
.foot-note{font-size:.78rem;color:var(--muted);}
.foot-links a{color:var(--muted);font-size:.76rem;}
.foot-links a:hover{color:var(--ink);}

/* ── Wizard de onboarding ─────────────────────────────────── */
.card-wizard{width:100%;max-width:640px;background:var(--glass);backdrop-filter:blur(22px) saturate(150%);border:1px solid var(--line);border-radius:22px;padding:2.2rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.35);}
.steps{display:flex;gap:.4rem;margin-bottom:1.75rem;}
.steps .seg{height:6px;flex:1;background:var(--surface-2);border-radius:6px;overflow:hidden;}
.steps .seg i{display:block;height:100%;width:0%;background:var(--pce-green);transition:width .4s ease;}
.steps .seg.done i{width:100%;}
.steps .seg.active i{width:60%;}
.step-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pce-green);font-weight:700;}
.upload-drop{border:1.5px dashed var(--line);border-radius:16px;padding:1.4rem;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .2s;}
.upload-drop:hover{border-color:var(--pce-green);}
.avatar-preview{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--pce-green),var(--pce-cta));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:1.4rem;color:#06210f;margin:0 auto .75rem;}
.terms-box{max-height:150px;overflow-y:auto;background:var(--surface-2);border-radius:12px;padding:.9rem 1rem;font-size:.82rem;color:var(--muted);border:1px solid var(--line);}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:fadein .35s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.points-pop{font-family:'Sora',sans-serif;font-weight:800;color:var(--pce-green);font-size:1.6rem;}

/* Cartões de seleção de time no onboarding */
.team-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;}
.team-opt{border:1.5px solid var(--line);border-radius:16px;padding:1rem;cursor:pointer;text-align:center;transition:border-color .2s,transform .12s;background:var(--surface);}
.team-opt:hover{transform:translateY(-2px);}
.team-opt .dot{width:40px;height:40px;border-radius:12px;margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.team-opt input{display:none;}
.team-opt.selected{border-color:var(--pce-green);box-shadow:0 0 0 .18rem rgba(97,248,88,.16);}

.panther-glow{animation:glow 3.2s ease-in-out infinite;}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 10px rgba(224,102,199,.35));}50%{filter:drop-shadow(0 0 26px rgba(224,102,199,.65));}}

/* ============================================================
   SHELL (sidebar + topbar) — base_app.html
   ============================================================ */
.app-shell{display:flex;min-height:100vh;}
.app-sidebar{width:var(--sidebar-w);flex-shrink:0;position:fixed;top:0;left:0;bottom:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:1.2rem 1rem;z-index:1030;transition:width .3s ease,transform .3s ease;}
.app-sidebar.is-collapsed{width:var(--sidebar-w-c);}
.app-sidebar.is-collapsed .hide-c{opacity:0;width:0;overflow:hidden;pointer-events:none;}
/* Sidebar expandida: esconde o ícone isolado P (mostra só a logo completa) */
.app-sidebar:not(.is-collapsed) .hide-e{opacity:0;width:0;overflow:hidden;pointer-events:none;}
.app-sidebar.is-collapsed .sidebar-team-card{padding:.5rem;}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem;}
.brand-full{display:flex;align-items:center;gap:.6rem;color:var(--ink);}
.brand-text{font-size:.66rem;line-height:1.1;white-space:nowrap;}
.sidebar-toggle{border:1px solid var(--line);background:transparent;color:var(--muted);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-toggle:hover{color:var(--ink);}
.sidebar-nav{display:flex;flex-direction:column;gap:.2rem;flex:1;}
.side-link{display:flex;align-items:center;gap:.85rem;padding:.62rem .75rem;border-radius:12px;color:var(--muted);font-weight:600;font-size:.9rem;white-space:nowrap;}
.side-link i{font-size:1.1rem;width:22px;text-align:center;flex-shrink:0;}
.side-link:hover{background:var(--surface-2);color:var(--ink);}
.side-link.active{background:rgba(97,248,88,.12);color:var(--pce-green);}
.side-badge{margin-left:auto;background:var(--pce-cta);color:#fff;font-size:.66rem;padding:.1rem .42rem;border-radius:20px;}
.sidebar-team-card{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:.85rem;margin:.9rem 0;text-align:center;transition:padding .3s;}
.sidebar-team-card .mini-panther{width:44px;margin:0 auto .3rem;}
.sidebar-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:.8rem;font-size:.78rem;}
.sidebar-foot a{color:var(--muted);}
.icon-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.icon-btn:hover{color:var(--ink);background:var(--surface-2);}

.app-main{margin-left:var(--sidebar-w);flex:1;transition:margin-left .3s ease;min-height:100vh;}
.app-sidebar.is-collapsed ~ .app-main{margin-left:var(--sidebar-w-c);}
.app-topbar{position:sticky;top:28px;z-index:1020;background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:.75rem 1.4rem;display:flex;align-items:center;gap:1rem;}
.search-box{position:relative;flex:1;max-width:420px;}
.search-box input{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.5rem 1rem .5rem 2.4rem;color:var(--ink);width:100%;}
.search-box i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--muted);}
.notif-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;background:#ff5a7a;border-radius:50%;border:2px solid var(--surface);}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pce-green),var(--pce-cta));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:.85rem;color:#06210f;flex-shrink:0;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.mobile-btn{display:none;}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1025;display:none;}
@media(max-width:991.98px){
  .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.mobile-open{transform:translateX(0);width:270px;}
  .app-main{margin-left:0!important;}
  .mobile-btn{display:flex;}
  .search-box{display:none;}
  .sidebar-backdrop.show{display:block;}
}

.credit-foot{text-align:center;padding:1rem 0 2rem;font-size:.76rem;color:var(--muted);}

/* ============================================================
   FEED
   ============================================================ */
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:1.4rem;padding:1.4rem;max-width:1240px;margin:0 auto;}
@media(max-width:1199.98px){.content-grid{grid-template-columns:1fr;} .right-rail{order:2;}}

.stories-bar{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:.4rem;}
.story{flex-shrink:0;width:74px;text-align:center;}
.story .ring{width:64px;height:64px;border-radius:50%;padding:3px;background:conic-gradient(var(--pce-green),var(--rosa-2),var(--pce-green));margin:0 auto .35rem;}
.story .ring .in{width:100%;height:100%;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;color:var(--ink);border:2px solid var(--bg);}
.story span{font-size:.72rem;color:var(--muted);}
.story.add .ring{background:var(--surface-2);}
.story.add .ring .in{color:var(--pce-green);font-size:1.3rem;}

.challenge-banner{background:linear-gradient(120deg,rgba(97,248,88,.14),rgba(44,155,104,.05));border:1px solid var(--line);border-radius:20px;padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1rem;}
.challenge-icon{width:46px;height:46px;border-radius:12px;background:var(--pce-green);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#06210f;flex-shrink:0;}

.feed-tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--line);margin:1.1rem 0;overflow-x:auto;}
.feed-tabs a{padding:.5rem 0;color:var(--muted);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;white-space:nowrap;}
.feed-tabs a.active{color:var(--ink);border-color:var(--pce-green);}

.composer{padding:1rem 1.2rem;}
.composer-types{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem;}
.chip{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:20px;padding:.4rem .9rem;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:.4rem;}
.chip:hover{color:var(--ink);border-color:var(--pce-green);}
.chip.active{color:var(--pce-green);border-color:var(--pce-green);background:rgba(97,248,88,.1);}

.post-card{padding:1.2rem;margin-bottom:1.1rem;}
.post-head{display:flex;align-items:center;gap:.7rem;}
.post-meta small{color:var(--muted);}
.type-tag{font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:20px;}
.type-tag.aplicacao{background:rgba(97,248,88,.14);color:var(--pce-green);}
.type-tag.vitrine{background:rgba(224,102,199,.14);color:var(--rosa-2);}
.type-tag.conquista{background:rgba(255,193,7,.14);color:#e6b800;}
.type-tag.pergunta{background:rgba(77,140,255,.14);color:#4d8cff;}
.type-tag.evento{background:rgba(140,147,168,.16);color:var(--muted);}
.structured-box{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin-top:.8rem;font-size:.88rem;}
.structured-box .row-item{display:flex;gap:.5rem;padding:.3rem 0;}
.structured-box b{color:var(--pce-green);min-width:110px;flex-shrink:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em;}
.media-frame{border-radius:16px;overflow:hidden;margin-top:.9rem;background:var(--surface-2);min-height:220px;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative;}
.media-frame img,.media-frame video{width:100%;border-radius:16px;display:block;}
.play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;border:1px solid rgba(255,255,255,.3);}
.reactions-bar{display:flex;align-items:center;gap:.4rem;margin-top:1rem;flex-wrap:wrap;}
.react-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:20px;padding:.35rem .75rem;font-size:.82rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:.35rem;transition:transform .12s ease;cursor:pointer;}
.react-btn:hover{transform:translateY(-2px);color:var(--ink);}
.react-btn.on{border-color:var(--pce-green);color:var(--pce-green);background:rgba(97,248,88,.1);}
.react-btn.connect.on{border-color:var(--rosa-2);color:var(--rosa-2);background:rgba(224,102,199,.12);}
.comment-input{border:1px solid var(--line);background:var(--surface-2);border-radius:20px;padding:.5rem 1rem;color:var(--ink);width:100%;}

.rail-card{padding:1.1rem 1.2rem;margin-bottom:1.1rem;}
.rank-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;}
.rank-row .bar-track{flex:1;height:7px;background:var(--surface-2);border-radius:6px;overflow:hidden;}
.rank-row .bar-fill{height:100%;border-radius:6px;}
.mini-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;overflow:hidden;}
.mini-avatar img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   PÁGINAS INTERNAS (container, ranking, diretório, perfil, etc.)
   ============================================================ */
.container-wide{max-width:1080px;margin:0 auto;padding:1.4rem;}
.page-head h1{font-family:'Sora',sans-serif;font-weight:700;}

/* Ranking */
.tabs-rank{display:flex;gap:1.4rem;border-bottom:1px solid var(--line);margin:1rem 0 1.4rem;}
.tabs-rank a{padding:.5rem 0;color:var(--muted);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;cursor:pointer;}
.tabs-rank a.active{color:var(--ink);border-color:var(--pce-green);}
.team-card{padding:1.2rem;position:relative;overflow:hidden;}
.team-card.leader{border:1px solid rgba(97,248,88,.4);}
.team-row{display:flex;align-items:center;gap:1rem;}
.team-pos{font-family:'Sora',sans-serif;font-weight:800;font-size:1.6rem;width:44px;text-align:center;}
.team-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;}
.team-bar-track{height:10px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin-top:.5rem;}
.team-bar-fill{height:100%;border-radius:8px;}
.ind-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .3rem;border-bottom:1px solid var(--line);}
.ind-row:last-child{border-bottom:none;}
.ind-pos{width:24px;text-align:center;font-weight:700;color:var(--muted);}

/* Diretório */
.filters-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.4rem;}
.company-card{padding:1.2rem;height:100%;display:flex;flex-direction:column;gap:.5rem;}
.company-logo{width:52px;height:52px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden;}
.company-logo img{width:100%;height:100%;object-fit:cover;}
.tag-seg{font-size:.7rem;font-weight:700;padding:.15rem .6rem;border-radius:20px;background:var(--surface-2);color:var(--muted);}

/* Perfil / empresa hero */
.profile-hero{padding:1.6rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;}
.profile-avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--pce-green),var(--pce-cta));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;color:#06210f;overflow:hidden;flex-shrink:0;}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.kpi-card{padding:1.1rem 1.2rem;text-align:center;}
.kpi-num{font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;color:var(--pce-green);}
.badge-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:.3rem .75rem;font-size:.8rem;font-weight:600;}

/* Notificações */
.notif-item{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-bottom:1px solid var(--line);}
.notif-item:last-child{border-bottom:none;}
.notif-item.nao-lida{background:rgba(97,248,88,.05);}
.notif-ico{width:40px;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--pce-green);flex-shrink:0;}

/* Página do time */
.team-hero{padding:2rem;text-align:center;position:relative;overflow:hidden;}
.panther-hero{width:280px;max-width:70vw;margin:0 auto;}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}