/* ============================================================
   Plataforma Psico · Pato — estilos
   Recriação fiel do protótipo (Claude Design) em CSS vanilla.
   ============================================================ */

:root{
  --bg:#F4F7F8; --surface:#ffffff; --surface-2:#F1F5F6;
  --ink:#102A33; --body:#2D4A50; --muted:#8AA0A6; --muted-2:#5A7077;
  --border:#E6EDEF; --track:#E0E9EB; --teal-text:#0E4D64;
  --accent-bg:#F0F8F7; --accent-bd:#CDE9E7; --accent-tx:#0E6A66;
  --accent-solid:#0E6A66;   /* fundo de botão teal sólido (combina com texto branco nos 2 temas) */
  --warm-bg:#FFF4EE; --warm-bd:#FFD9C2; --warm-tx:#C2410C; --warm-tx2:#E08A5C; --warm-hover:#FFEDE3;
  --ok-bg:#E6F6EE; --ok-bd:#A7E3C4; --ok-tx:#06915A;
}
:root[data-theme="dark"]{
  --bg:#0D181D; --surface:#15252B; --surface-2:#1F343B;
  --ink:#EAF2F3; --body:#BCCFD4; --muted:#86A0A7; --muted-2:#A7BEC4;
  --border:#284048; --track:#243840; --teal-text:#5BC0BE;
  --accent-bg:#15323A; --accent-bd:#2B4B53; --accent-tx:#6FD6CF;
  --warm-bg:#2A1E18; --warm-bd:#4A3526; --warm-tx:#F0A878; --warm-tx2:#C98A63; --warm-hover:#33251C;
  --ok-bg:#10271D; --ok-bd:#27513B; --ok-tx:#5FD39E;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  font-family:'Hanken Grotesk',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cdd9dc;border-radius:8px;}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2f4750;}

/* ---------- keyframes (do protótipo) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes pop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes popIn{from{transform:scale(.95);}to{transform:scale(1);}}
@keyframes growW{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes pulse{0%,100%{transform:scale(1);}45%{transform:scale(1.18);}}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes flipIn{from{opacity:0;transform:rotateX(-12deg) scale(.97);}to{opacity:1;transform:none;}}
@keyframes shimmer{from{background-position:-180px 0;}to{background-position:220px 0;}}
@keyframes slide{from{background-position:0 0;}to{background-position:200% 0;}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(255,122,69,.45);}70%{box-shadow:0 0 0 7px rgba(255,122,69,0);}100%{box-shadow:0 0 0 0 rgba(255,122,69,0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ganho de XP: "+X XP" flutuante + pulso no contador */
.xp-pop{
  position:fixed;z-index:9999;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(135deg,#5BC0BE,#0E4D64);color:#fff;
  font:800 13.5px 'Bricolage Grotesque';padding:7px 13px;border-radius:99px;
  box-shadow:0 8px 22px rgba(14,77,100,.35);white-space:nowrap;
  animation:xpRise 1.5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes xpRise{
  0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.8);}
  14%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06);}
  28%{transform:translateX(-50%) translateY(0) scale(1);}
  72%{opacity:1;transform:translateX(-50%) translateY(-22px) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(.95);}
}
.xp-bump{animation:xpBump .6s ease;}
@keyframes xpBump{0%,100%{transform:none;}35%{transform:scale(1.13);}}

/* respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   Layout shell
   ============================================================ */
.app-shell{display:flex;min-height:100vh;background:var(--bg);}

.sidebar{
  width:250px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:22px 18px;z-index:30;
  overflow-y:auto;
}

/* alternância de visualização em Revisão (Categorias | Índice) */
.rev-toggle{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:3px;}
.rev-tab{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:9px;padding:8px 16px;font:700 13.5px 'Hanken Grotesk';color:var(--muted-2);cursor:pointer;transition:background .15s ease,color .15s ease;}
.rev-tab.on{background:var(--surface);color:var(--teal-text);box-shadow:0 1px 3px rgba(16,42,51,.08);}

/* abas do perfil (Conta | Métricas) */
.pf-tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:3px;margin-bottom:22px;}
.pf-tab{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:9px;padding:8px 18px;font:700 13.5px 'Hanken Grotesk';color:var(--muted-2);cursor:pointer;transition:background .15s ease,color .15s ease;}
.pf-tab.on{background:var(--surface);color:var(--teal-text);box-shadow:0 1px 3px rgba(16,42,51,.08);}

/* gráfico de evolução temporal (aba Métricas) */
.pf-chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding-top:6px;}
.pf-bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.pf-bar-val{font:800 11px 'Hanken Grotesk';color:var(--teal-text);height:14px;line-height:14px;}
.pf-bar{width:100%;max-width:34px;background:linear-gradient(180deg,#5BC0BE,#0E4D64);border-radius:7px 7px 3px 3px;transition:height .5s ease;}
.pf-bar-col:hover .pf-bar{filter:brightness(1.08);}
.pf-bar-lbl{font-size:10px;font-weight:600;color:var(--muted);margin-top:7px;white-space:nowrap;}

/* carrossel de métricas na sidebar */
.sm-dots{display:flex;gap:7px;justify-content:center;margin-top:11px;}
.sm-dot{width:6px;height:6px;border-radius:50%;background:var(--track);cursor:pointer;transition:background .3s ease,width .3s ease;}
.sm-dot:hover{background:var(--muted-2);}
.sm-dot.on{background:var(--teal-text);width:14px;border-radius:3px;}

/* ============================================================
   ESTUDO DE CASO — gamificado
   ============================================================ */
.caso-status{background:linear-gradient(125deg,#8338EC,#5B6CF0);border-radius:18px;padding:15px 18px;color:#fff;margin-bottom:18px;display:grid;grid-template-columns:1fr auto;gap:11px 14px;align-items:center;box-shadow:0 10px 26px rgba(131,56,236,.22);}
.cs-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cs-tag{background:rgba(255,255,255,.18);font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border-radius:7px;padding:4px 10px;}
.cs-num{font:700 14px 'Hanken Grotesk';opacity:.95;}
.cs-stats{display:flex;gap:8px;}
.cs-stat{background:rgba(255,255,255,.16);border-radius:9px;padding:5px 11px;font:800 13px 'Hanken Grotesk';white-space:nowrap;}
.cs-bar{grid-column:1/-1;height:6px;background:rgba(255,255,255,.24);border-radius:99px;overflow:hidden;}
.cs-bar>div{height:100%;background:#fff;border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.3,1);}

.caso-dossier{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px 24px;margin-bottom:22px;}
.cd-head{display:flex;align-items:center;gap:13px;}
.cd-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#8338EC,#5B6CF0);color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px 'Bricolage Grotesque';flex-shrink:0;}
.cd-name{font-weight:700;font-size:15.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cd-ref{font-size:13px;color:var(--muted);font-weight:600;margin-top:1px;}
.cd-badge{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:700;color:#8338EC;background:#F3E8FB;border-radius:7px;padding:5px 10px;align-self:flex-start;}
.caso-chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 2px;}
.caso-chip{font-size:12px;font-weight:700;color:var(--muted-2);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:5px 12px;}
.cd-vinheta{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--body);text-wrap:pretty;border-left:3px solid #E0D2F5;padding-left:14px;}
.caso-pergunta{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:14px;}

.caso-result{display:flex;align-items:center;gap:14px;border-radius:16px;padding:15px 18px;margin-top:20px;animation:pop .35s cubic-bezier(.34,1.56,.64,1) both;}
.caso-result.ok{background:#E6F6EE;border:1px solid #06D6A0;}
.caso-result.no{background:#FDECEC;border:1px solid #E5484D;}
.cr-emoji{font-size:28px;flex-shrink:0;line-height:1;}
.cr-title{font:800 16px 'Bricolage Grotesque';}
.caso-result.ok .cr-title{color:#06694A;}
.caso-result.no .cr-title{color:#B4282C;}
.cr-sub{font-size:13px;color:var(--muted-2);font-weight:600;margin-top:2px;}
/* banner do caso tem fundo claro FIXO nos dois temas -> subtítulo escuro fixo
   (senão no dark herda cinza-claro e some) */
.caso-result.ok .cr-sub{color:#0A7350;}
.caso-result.no .cr-sub{color:#9B3034;}
.caso-explica{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.ce-lbl{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.caso-explica p{margin:0;font-size:14px;line-height:1.6;color:var(--body);}
.caso-next{-webkit-appearance:none;appearance:none;background:linear-gradient(125deg,#8338EC,#5B6CF0);border:none;border-radius:12px;padding:12px 20px;font:700 14px 'Hanken Grotesk';color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:filter .18s ease,transform .18s ease;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  position:sticky;top:0;z-index:20;background:var(--bg);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  padding:14px 34px;display:flex;align-items:center;gap:18px;
  justify-content:space-between;
}
.topbar-left{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.topbar-center{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;padding:0 12px;}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;}

/* ---- busca global (header) ---- */
#global-search::placeholder{color:var(--muted);opacity:1;}
.search-hint{
  font:700 11px 'Hanken Grotesk';color:var(--muted);
  border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;line-height:1.4;flex-shrink:0;
}
.topbar-search:focus-within .search-hint{display:none;}
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 40px rgba(16,42,51,.16);
  padding:6px;max-height:min(420px,60vh);overflow-y:auto;
}
.search-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:none;border-radius:9px;cursor:pointer;
  background:transparent;text-align:left;transition:background .14s ease;
}
.search-item:hover,.search-item:focus{background:var(--surface-2);outline:none;}
.search-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.search-name{
  flex:1;min-width:0;font:600 14px 'Hanken Grotesk';color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-code{
  font:700 11px 'Hanken Grotesk';color:var(--muted-2);
  background:var(--bg);border-radius:6px;padding:2px 7px;flex-shrink:0;
}
.search-tag{
  font:700 10px 'Hanken Grotesk';letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:99px;
  padding:2px 9px;flex-shrink:0;
}
.search-empty{padding:16px 12px;font:500 13px 'Hanken Grotesk';color:var(--muted);text-align:center;}

.content{padding:30px 34px 60px;}
/* centraliza o conteúdo de cada tela dentro da área principal: em telas largas
   o espaço livre vira margem equilibrada nos dois lados (antes ficava todo à
   direita, pois cada <section> tem só max-width e era colado à esquerda). */
.content > section{margin-inline:auto;}

/* re-render disparado por interação (mesma tela): não repetir a animação de
   entrada do <section> nem do conector da timeline — evita o "flash de reload".
   As animações internas (acordeão, flip, feedback) continuam tocando. */
.content.static-update > section{animation:none !important;}
.content.static-update .crit-item::before{animation:none !important;}

/* barra de navegação inferior (apenas mobile) */
.bottom-nav{display:none;}

/* ============================================================
   Grids nomeados (para permitir media queries — o protótipo
   usava grid-template-columns inline, que não é sobreponível)
   ============================================================ */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px;}
/* grade de métricas do perfil (4 cards) */
.pf-stat-grid{grid-template-columns:repeat(4,1fr);margin-bottom:18px;}
.home-mid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:26px;}
.conq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px;}
.ficha-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;}
/* itens encolhíveis: evita que nomes longos do "Próximo" estourem a coluna no mobile */
.ficha-grid>*{min-width:0;}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;position:relative;}

/* ============================================================
   Responsividade
   ============================================================ */

/* tablets largos */
@media (max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .conq-grid{grid-template-columns:repeat(2,1fr);}
  .pf-stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* tablets / abaixo */
@media (max-width:880px){
  .home-mid{grid-template-columns:1fr;}
  .ex-grid{grid-template-columns:1fr;}
  .ficha-grid{grid-template-columns:1fr;}
  .ficha-rail{position:static !important;}
  .topbar{padding:12px 20px;gap:12px;}
  .content{padding:24px 20px 96px;}
}

/* celular: esconde a sidebar, mostra bottom nav */
@media (max-width:760px){
  .sidebar{display:none;}
  .topbar-search{display:none !important;}
  .pwa-pill{display:none !important;}   /* instalar app fica só no menu "Mais" */
  .match-grid{gap:18px;}
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--border);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:center;
    box-shadow:0 -4px 18px rgba(16,42,51,.06);
  }
  .bottom-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:transparent;border:none;cursor:pointer;padding:6px 4px;border-radius:12px;
    font:600 11px 'Hanken Grotesk';transition:color .18s ease,background .18s ease;
  }
}

@media (max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .conq-grid{grid-template-columns:1fr 1fr;}
  .match-grid{grid-template-columns:1fr;}
  .content{padding:20px 16px 96px;}
}

/* ============================================================
   FICHA — componentes do redesenho (usa --cat/--cat-soft
   injetados inline no .ficha-screen por categoria)
   ============================================================ */
@keyframes growV{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* botões da ficha são estilizados por classe (não inline); resetar a
   aparência nativa evita inconsistências de estilo entre navegadores/SO */
.ficha-screen button{-webkit-appearance:none;appearance:none;}

/* header */
.ficha-tag{display:inline-flex;align-items:center;background:var(--cat-soft);color:var(--cat);font-size:12.5px;font-weight:700;border-radius:8px;padding:5px 11px;}
.ficha-title{font:800 30px 'Bricolage Grotesque';letter-spacing:-.6px;margin:10px 0 14px;text-wrap:balance;display:flex;align-items:flex-start;gap:12px;}
.ficha-title::before{content:"";flex-shrink:0;width:5px;align-self:stretch;min-height:30px;background:var(--cat);border-radius:3px;}
.ficha-code-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.code-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font:700 12.5px 'Hanken Grotesk';color:var(--muted-2);}
.code-chip .lbl{color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.4px;}
.code-chip b{color:var(--teal-text);font-weight:800;}

/* resumo rápido (callout — único bloco preenchido da ficha) */
.ficha-summary{display:flex;gap:13px;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:14px;padding:15px 17px;margin:0 0 26px;}
.ficha-summary .fs-icon{width:30px;height:30px;border-radius:9px;background:var(--surface);border:1px solid var(--accent-bd);display:flex;align-items:center;justify-content:center;color:var(--accent-tx);flex-shrink:0;}
.ficha-summary .fs-icon svg{width:17px;height:17px;}
.ficha-summary .fs-label{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-tx);margin-bottom:3px;}
.ficha-summary p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body);}
/* tira de fatos-chave (idade de início, prevalência, sexo, diferencial) */
.ficha-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}
.fact-chip{font-size:12.5px;line-height:1.45;color:var(--body);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:5px 10px;}
.fact-chip b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);margin-bottom:1px;}
/* enunciado do quiz "por fatos": perfil epidemiológico (rótulo + valor) */
.quiz-facts{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.qf-row{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--cat,#C2410C);border-radius:11px;padding:10px 13px;}
.qf-lbl{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-2);}
.qf-val{font:600 15.5px 'Bricolage Grotesque';line-height:1.4;color:var(--body);}

/* heading com barra na cor da categoria */
.ficha-h3{font:700 17px 'Bricolage Grotesque';margin:0 0 14px;display:flex;align-items:center;gap:9px;}
.ficha-h3.mt{margin-top:30px;}
.ficha-h3 .bar{width:5px;height:18px;background:var(--cat);border-radius:3px;display:inline-block;flex-shrink:0;}

/* timeline de critérios */
.crit-group{font:800 14.5px 'Bricolage Grotesque';color:var(--cat);margin:22px 0 12px;display:flex;align-items:center;gap:9px;}
.crit-group:first-child{margin-top:4px;}
.crit-group::before{content:"";width:5px;height:16px;background:var(--cat);border-radius:3px;flex-shrink:0;}
.crit-timeline{display:flex;flex-direction:column;gap:14px;}
.crit-item{position:relative;display:flex;gap:14px;align-items:flex-start;}
.crit-item::before{content:"";position:absolute;left:14px;top:30px;width:2px;height:calc(100% + 14px);background:var(--cat-soft);z-index:0;transform-origin:top;animation:growV .4s ease both;}
.crit-item:last-child::before{display:none;}
.crit-badge{position:relative;z-index:1;width:30px;height:30px;border-radius:9px;background:var(--cat);color:#fff;font:800 14px 'Bricolage Grotesque';display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px var(--cat-soft);}
.crit-card{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cat);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;color:var(--body);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.crit-card .rich-p{margin:0 0 8px;}
.crit-card .rich-grp{font-weight:700;color:var(--ink);margin-top:10px;}
.crit-card > :last-child{margin-bottom:0;}

/* sub-listas numeradas/alfabéticas (critérios e seções) */
.crit-sublist{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.crit-sublist li{display:flex;gap:10px;align-items:flex-start;}
.csl-num{flex-shrink:0;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--cat-soft,var(--surface-2));color:var(--cat,var(--teal-text));font:800 12px 'Hanken Grotesk';display:flex;align-items:center;justify-content:center;}
.csl-tx{flex:1;min-width:0;padding-top:1px;}
.sec-acc-body .crit-sublist{margin:6px 0 12px;}
.crit-empty{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px dashed var(--border);border-radius:14px;padding:20px;color:var(--muted);font-size:14px;line-height:1.55;}
.crit-empty svg{flex-shrink:0;color:var(--cat);}
/* categoria residual / referência cruzada: o texto explica onde encontrar os
   critérios — bloco legível (não o intro discreto, nem o box contraditório). */
.crit-ref{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cat);border-radius:12px;padding:16px 18px;font-size:14.5px;line-height:1.7;color:var(--body);}

/* especificadores / subtipos — blocos com cabeçalho e lista de opções */
.spec-wrap{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.spec-block + .spec-block{border-top:1px solid var(--border);}
.spec-head{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cat);}
.spec-head::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cat);flex-shrink:0;}
.spec-list{list-style:none;margin:0;padding:11px 16px 13px;display:flex;flex-direction:column;gap:10px;}
.spec-list li{display:flex;gap:11px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--body);}
.spec-list li.spec-subhead{font-weight:800;color:var(--ink);font-size:13px;}
.spec-code{flex-shrink:0;font:800 11.5px 'Bricolage Grotesque';color:var(--teal-text);background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:6px;padding:3px 8px;}
.spec-opt-label{font-weight:800;color:var(--ink);}

/* nota dos critérios (terminologia/esclarecimentos) */
.crit-note{margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 15px;display:flex;gap:11px;align-items:flex-start;}
.crit-note-lbl{flex-shrink:0;font:800 10.5px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;}
.crit-note p{margin:0;font-size:13.5px;line-height:1.55;color:var(--body);}
.crit-note + .crit-note{margin-top:8px;}   /* notas múltiplas: divisão visual */
.crit-note-cod{border-style:dashed;}        /* nota de codificação: acento próprio */
.crit-note-cod .crit-note-lbl{color:var(--cat,#0E4D64);border-color:var(--cat,#0E4D64);}
/* "Nota:" destacada DENTRO do card do critério (separa do enunciado) */
.crit-subnote{margin:11px 0 0;padding:9px 12px;background:var(--surface-2);border-left:3px solid var(--cat,#0E4D64);border-radius:9px;font-size:13px;line-height:1.55;color:var(--muted-2);}
.crit-subnote b{display:inline-block;font:800 10px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.5px;color:var(--cat,#0E4D64);margin-right:6px;}

/* seções: controles + acordeão */
.sec-controls{display:flex;gap:8px;margin-bottom:12px;}
.sec-ctl-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 12px;font:700 12px 'Hanken Grotesk';color:var(--muted-2);cursor:pointer;transition:all .15s ease;}
.sec-acc-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 16px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.sec-acc-head.open{border-radius:14px 14px 0 0;background:var(--accent-bg);border-color:var(--accent-bd);border-left:3px solid var(--cat);padding-left:14px;}
.sec-acc-head.open .sec-title{color:var(--teal-text);}
.sec-acc-head.open .sec-icon{background:var(--surface);}
/* seção aberta: realça o conjunto (cabeçalho + corpo) */
.sec-open{border-radius:14px;box-shadow:0 6px 20px rgba(16,42,51,.07);}
.sec-icon{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--cat-soft);color:var(--cat);display:flex;align-items:center;justify-content:center;}
.sec-icon svg{width:17px;height:17px;}
.sec-title{flex:1;min-width:0;font:700 14.5px 'Bricolage Grotesque';color:var(--ink);}
.sec-chev{flex-shrink:0;color:var(--muted-2);transition:transform .25s ease;}
.sec-chev.open{transform:rotate(180deg);}
.sec-acc-body{border:1px solid var(--border);border-top:none;border-left:3px solid var(--cat);border-radius:0 0 14px 14px;padding:16px 18px 8px 16px;background:var(--surface);animation:fadeUp .25s ease both;}
.sec-acc-body p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--body);}
.sec-acc-body p.has-lead{padding-left:11px;border-left:2px solid var(--cat-soft);}
.sec-acc-body .sub-lead{color:var(--ink);font-weight:800;}
.sec-acc-body .sub-head{font:800 13px 'Bricolage Grotesque';color:var(--ink);text-transform:none;letter-spacing:.2px;margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.sec-acc-body .sec-img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:10px;background:#fff;margin:10px 0 4px;}
.sec-acc-body .sec-caption{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.4;}

/* rail: índice, códigos, selo */
.rail-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;}
.rail-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:12px;}
.ficha-index{display:flex;flex-direction:column;gap:2px;}
.ficha-index-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:8px 9px;cursor:pointer;font:600 12.5px 'Hanken Grotesk';color:var(--muted-2);transition:background .15s ease,color .15s ease;}
.ficha-index-item svg{width:15px;height:15px;flex-shrink:0;color:var(--cat);}
.codes-table{display:flex;flex-direction:column;}
.codes-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);}
.codes-row:first-child{padding-top:0;}
.codes-row:last-child{border-bottom:none;padding-bottom:0;}
.codes-row .ct-label{font-size:12.5px;color:var(--muted-2);font-weight:700;}
.codes-row .ct-val{display:flex;align-items:center;gap:8px;}
.codes-row .ct-code{font:800 15px 'Bricolage Grotesque';color:var(--teal-text);}
.codes-var-label{font-size:12px;font-weight:700;color:var(--ink);margin:10px 0 4px;}
.code-copy{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted-2);flex-shrink:0;font:700 11px 'Hanken Grotesk';transition:all .15s ease;}
.code-copy.copied{color:var(--ok-tx);border-color:var(--ok-bd);background:var(--ok-bg);}
.revised-badge{display:flex;align-items:center;gap:9px;background:var(--ok-bg);border:1px solid var(--ok-bd);border-radius:14px;padding:12px 14px;}
.revised-badge .rb-icon{color:var(--ok-tx);display:flex;}
.revised-badge .rb-text{font:700 13px 'Hanken Grotesk';color:var(--ok-tx);flex:1;line-height:1.3;}
.revised-badge .rb-toggle{background:none;border:none;color:var(--ok-tx);font:700 11.5px 'Hanken Grotesk';cursor:pointer;padding:2px 4px;text-decoration:underline;opacity:.85;}
.revise-cta{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;cursor:pointer;font:700 13px 'Hanken Grotesk';color:var(--muted-2);transition:all .18s ease;}
.report-cta{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;cursor:pointer;font:700 13px 'Hanken Grotesk';color:var(--muted-2);transition:all .18s ease;}
.report-cta svg{width:17px;height:17px;flex-shrink:0;}

/* ============================================================
   Formulário de Feedback
   ============================================================ */
.fb-label{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.fb-tabs{display:flex;flex-wrap:wrap;gap:7px;}
.fb-tab{-webkit-appearance:none;appearance:none;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font:700 13px 'Hanken Grotesk';color:var(--muted-2);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.fb-tab:hover{color:var(--ink);}
.fb-tab.on{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent-tx);}
.fb-ficha{display:flex;align-items:center;gap:10px;margin-top:13px;background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:11px;padding:9px 12px;}
.fb-ficha-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-tx);flex-shrink:0;}
.fb-ficha-nome{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fb-ficha-x{flex-shrink:0;background:none;border:none;color:var(--muted-2);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;}
.fb-textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font:500 14px 'Hanken Grotesk';color:var(--ink);line-height:1.55;resize:vertical;min-height:108px;outline:none;transition:border-color .15s ease;}
.fb-textarea:focus{border-color:var(--cat,var(--teal-text));}
.fb-textarea::placeholder{color:var(--muted);}
.fb-error{margin-top:11px;background:#FDECEC;border:1px solid #F5C2C2;border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;color:#B42318;}
:root[data-theme="dark"] .fb-error{background:#2A1718;border-color:#4A2A2B;color:#F0A6A6;}
.fb-note{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted-2);}
.fb-note svg{flex-shrink:0;width:16px;height:16px;margin-top:1px;}
.fb-submit{margin-top:16px;background:var(--accent-solid);border:none;border-radius:12px;padding:12px 20px;font:700 14px 'Hanken Grotesk';color:#fff;cursor:pointer;transition:background .18s ease,transform .18s ease;}
.fb-submit[disabled]{opacity:.6;cursor:default;}

/* flashcards card (tema corrigido) */
.fc-card{background:var(--warm-bg);border:1px solid var(--warm-bd);border-radius:16px;padding:16px 18px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:12px;width:100%;transition:background .18s ease;}
.fc-card .fc-t1{font-weight:700;font-size:13.5px;color:var(--warm-tx);}
.fc-card .fc-t2{font-size:12px;color:var(--warm-tx2);font-weight:500;}

/* deck por categoria */
.deck-card{-webkit-appearance:none;appearance:none;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.deck-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.deck-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.deck-icon svg{width:21px;height:21px;}
.deck-num{font:800 12px 'Bricolage Grotesque';border-radius:8px;padding:4px 9px;letter-spacing:.3px;}
.deck-name{font:700 15.5px 'Bricolage Grotesque';color:var(--ink);line-height:1.25;min-height:38px;}
.deck-count-row{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:6px;}
.deck-count-row b{font-weight:800;}
.deck-prog{height:6px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:13px;}
.deck-prog span{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.3,1);}
.deck-prog-lbl{font-size:11px;color:var(--muted);font-weight:600;margin-top:6px;}

/* Classificar (arrastar / tocar transtorno -> categoria) */
.cl-pool{display:flex;flex-wrap:wrap;gap:9px;align-items:center;min-height:56px;background:var(--surface);border:1.5px dashed var(--border);border-radius:14px;padding:12px;margin-bottom:18px;transition:border-color .15s ease,background .15s ease;}
.cl-pool.target{border-color:#5BC0BE;}
.cl-pool.over{border-color:#5BC0BE;background:var(--accent-bg);}
.cl-pool-empty{font-size:13px;color:var(--muted);font-weight:600;padding:4px 6px;}
.cl-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.cl-bin{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;}
.cl-bin.target{border-color:var(--accent-bd);}
.cl-bin.over{border-color:#5BC0BE;box-shadow:0 8px 22px rgba(91,192,190,.18);}
.cl-bin-h{padding:9px 13px;font:800 10.5px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.4px;line-height:1.25;}
.cl-bin-b{padding:10px;display:flex;flex-direction:column;gap:7px;min-height:84px;}
.cl-chip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1.5px solid var(--border);border-radius:11px;padding:9px 12px;cursor:grab;font:700 13px 'Hanken Grotesk';color:var(--ink);text-align:left;line-height:1.25;transition:border-color .12s ease,background .12s ease;touch-action:none;}
.cl-chip:hover{border-color:#9DD9D2;}
.cl-chip.sel{border-color:var(--teal-text);background:var(--accent-bg);}
.cl-bin .cl-chip{width:100%;background:var(--bg);}
.cl-chip.locked{cursor:default;background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx);}
.cl-name{flex:1;min-width:0;}
.cl-check{display:flex;color:var(--ok-tx);flex-shrink:0;}
.cl-check svg{width:15px;height:15px;}
.cl-drag{box-shadow:0 14px 30px rgba(16,42,51,.22);border-color:#5BC0BE !important;color:var(--teal-text);opacity:1;}

/* navegação anterior/próximo */
.ficha-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;}
.nav-prev{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 16px;font-weight:700;font-size:13.5px;color:var(--muted-2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .18s ease;}
.nav-next{background:var(--cat);border:none;border-radius:12px;padding:10px 16px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .18s ease;min-width:0;max-width:62%;overflow:hidden;}
.nav-next .nn-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1;overflow:hidden;}
.nav-next .nn-lbl{font-size:11px;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.4px;}
.nav-next .nn-name{align-self:stretch;font:700 13.5px 'Hanken Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:480px){
  .ficha-title{font-size:25px;}
  .crit-card{padding:12px 14px;}
  .rail-card{padding:16px;}
  .nav-next{max-width:55%;}
}

/* ============================================================
   REFERÊNCIAS — índice completo de transtornos
   ============================================================ */
.ref-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:24px 26px;align-items:start;}
.ref-cat-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.ref-cat-num{width:30px;height:30px;border-radius:9px;font:800 14px 'Bricolage Grotesque';display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ref-cat-name{flex:1;min-width:0;font:700 15px 'Bricolage Grotesque';color:var(--ink);line-height:1.2;}
.ref-cat-count{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:7px;padding:3px 9px;}
.ref-list{display:flex;flex-direction:column;gap:6px;}
.ref-item{-webkit-appearance:none;appearance:none;display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:10px 13px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.ref-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.ref-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;}
.ref-code{flex-shrink:0;font:700 11.5px 'Hanken Grotesk';color:var(--muted-2);background:var(--surface-2);border-radius:6px;padding:3px 8px;letter-spacing:.2px;}

@media (max-width:480px){
  .ref-cats{grid-template-columns:1fr;gap:20px;}
}

/* subgrupos da Classificação do DSM dentro da categoria */
.cat-subgroup{display:flex;align-items:center;gap:8px;margin-top:8px;font:800 12px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);}
.cat-subgroup::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cat,#5BC0BE);flex-shrink:0;}
.cat-subgroup.lvl2{margin-left:22px;font-size:11px;color:var(--muted);}
.cat-disorder.lvl2{margin-left:22px;}

/* ============================================================
   AVISOS — central de notificações (sino do topo)
   ============================================================ */
.topbar-bell.is-open{border-color:#5BC0BE;color:var(--teal-text);}
.topbar-bell.has-unread svg{animation:bellRing 2.6s ease-in-out infinite;transform-origin:top center;}
@keyframes bellRing{
  0%,88%,100%{transform:rotate(0);}
  90%{transform:rotate(11deg);}
  93%{transform:rotate(-9deg);}
  96%{transform:rotate(5deg);}
}
.notif-badge{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:#EF4444;color:#fff;border:2px solid var(--surface);
  font:800 10px 'Hanken Grotesk';line-height:13px;display:flex;align-items:center;justify-content:center;
  animation:badgePulse 2s ease-out infinite;
}
@keyframes badgePulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}
  70%{box-shadow:0 0 0 6px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.notif-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:340px;max-width:88vw;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 18px 50px -12px rgba(16,42,51,.35);overflow:hidden;
  transform-origin:top right;animation:notifPop .2s ease;
}
@keyframes notifPop{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--border);}
.notif-h-title{display:flex;align-items:center;gap:8px;font:800 14px 'Bricolage Grotesque';color:var(--ink);}
.notif-h-title svg{color:var(--teal-text);}
.notif-close{width:28px;height:28px;border-radius:8px;background:transparent;border:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease;}
.notif-close:hover{background:var(--surface-2);color:var(--ink);}
.notif-list{list-style:none;margin:0;padding:6px;max-height:60vh;overflow-y:auto;}
.notif-item{display:flex;gap:11px;padding:12px;border-radius:12px;transition:background .15s ease;}
.notif-item + .notif-item{margin-top:2px;}
.notif-item.is-new{background:var(--accent-bg);}
.notif-ico{width:38px;height:38px;border-radius:11px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.notif-item.is-new .notif-ico{background:var(--surface);}
.notif-main{flex:1;min-width:0;}
.notif-title{display:flex;align-items:center;gap:7px;font:800 13.5px 'Bricolage Grotesque';color:var(--ink);margin-bottom:3px;}
.notif-tag{font:800 9px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.5px;color:#fff;background:#0E8A86;border-radius:5px;padding:2px 5px;flex-shrink:0;}
.notif-body{font:500 12.5px 'Hanken Grotesk';color:var(--body);line-height:1.5;}
.notif-body b{color:var(--ink);font-weight:700;}
.notif-when{margin-top:6px;font:600 11px 'Hanken Grotesk';color:var(--muted);}
.notif-empty{padding:24px 12px;text-align:center;font:500 13px 'Hanken Grotesk';color:var(--muted);}

@media (max-width:560px){
  .notif-panel{position:fixed;top:64px;right:10px;left:10px;width:auto;max-width:none;}
}

/* ============================================================
   SIDEBAR COLAPSÁVEL (rail só com ícones)
   ============================================================ */
.sidebar{transition:width .2s ease,padding .2s ease;}
.side-toggle-btn{order:-1;}
.sidebar.collapsed{width:76px;padding:22px 12px;}
.sidebar.collapsed .side-logo{justify-content:center;padding:4px 0 18px;}
.sidebar.collapsed .side-logo-text{display:none;}
.sidebar.collapsed .side-nav button{justify-content:center;gap:0;padding:11px 0;}
.sidebar.collapsed .side-nav button span{display:none;}
.sidebar.collapsed .side-level,
.sidebar.collapsed .side-metric{display:none;}
.sidebar.collapsed .side-profile{justify-content:center;padding:14px 0 2px;margin-top:auto !important;border-top:none;}
.sidebar.collapsed .side-profile-text,
.sidebar.collapsed .side-profile-logout{display:none;}

@media (max-width:760px){
  .side-toggle-btn{display:none !important;}
  /* header compacto: pílula mostra só o nível (sem "130 XP") */
  .xp-amount, .xp-label{display:none;}
  #xp-pill{padding:5px;}
  /* ficha no mobile: sem índice "Nesta ficha" — navega pelo Anterior/Próximo */
  .rail-index{display:none;}
}

/* ============================================================
   LOADER DE MARCA (emoji de cérebro pulsante)
   ============================================================ */
.brand-loader{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);animation:fadeIn .25s ease;}
.brand-loader.inline{min-height:0;padding:48px 16px;background:transparent;}
.bl-brain{position:relative;font-size:52px;line-height:1;animation:blBob 1.5s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(14,77,100,.18));}
.bl-brain::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(91,192,190,.28),transparent 70%);animation:blHalo 1.5s ease-in-out infinite;z-index:-1;}
.brand-loader.inline .bl-brain{font-size:40px;}
.bl-msg{font:700 15px 'Hanken Grotesk';color:var(--teal-text);letter-spacing:.2px;}
.brand-loader.inline .bl-msg{font-size:13.5px;}
.bl-dots{display:flex;gap:7px;}
.bl-dots span{width:8px;height:8px;border-radius:50%;background:var(--teal-text);opacity:.35;animation:blDot 1s ease-in-out infinite;}
.bl-dots span:nth-child(2){animation-delay:.16s;}
.bl-dots span:nth-child(3){animation-delay:.32s;}
@keyframes blBob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-10px) scale(1.06);}}
@keyframes blHalo{0%,100%{transform:scale(.85);opacity:.5;}50%{transform:scale(1.18);opacity:1;}}
@keyframes blDot{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-5px);}}

/* ============================================================
   SOBRE — ensaio em destaque (Psicodiagnóstico)
   ============================================================ */
.sobre-ensaio{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:30px 32px;margin:4px 0 26px;box-shadow:0 10px 30px rgba(16,42,51,.05);
  animation:fadeUp .4s ease both;
}
.se-kicker{display:inline-flex;align-items:center;gap:7px;font:800 11px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.8px;color:var(--accent-tx);background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:99px;padding:5px 12px;margin-bottom:15px;}
.se-title{font:800 24px 'Bricolage Grotesque';line-height:1.28;letter-spacing:-.4px;color:var(--ink);margin:0 0 18px;text-wrap:balance;}
.sobre-ensaio p{margin:0 0 15px;font-size:15px;line-height:1.75;color:var(--body);text-wrap:pretty;}
.sobre-ensaio p:last-child{margin-bottom:0;}
.se-fecho{margin-top:22px !important;padding:16px 20px;border-left:3px solid var(--teal-text);background:var(--accent-bg);border-radius:0 12px 12px 0;color:var(--ink) !important;font-weight:600 !important;font-size:15.5px !important;}
@media (max-width:480px){
  .sobre-ensaio{padding:22px 20px;}
  .se-title{font-size:21px;}
}

/* ============================================================
   PERFIL — apelido + avatar
   ============================================================ */
.av-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px;}
.av-preset{aspect-ratio:1/1;border-radius:50%;border:2px solid transparent;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none;}
.av-preset:hover{transform:translateY(-2px);}
.av-preset.on{border-color:#fff;box-shadow:0 0 0 2px var(--teal-text);}
.pf-input:focus{border-color:#5BC0BE;}
.pf-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:40px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A8A90' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;}
.pf-select:focus{border-color:#5BC0BE;}
.side-profile-main:hover{opacity:.82;}
.sidebar.collapsed .side-profile-main{flex:0 0 auto;justify-content:center;width:100%;}

/* ============================================================
   TABELAS reconstruídas (no lugar das imagens recortadas)
   ============================================================ */
.sec-table-wrap{overflow-x:auto;margin:6px 0 2px;border:1px solid var(--border);border-radius:14px;-webkit-overflow-scrolling:touch;}
.sec-table{border-collapse:collapse;width:100%;min-width:660px;}
.sec-table th,.sec-table td{border:1px solid var(--border);padding:12px 14px;text-align:left;vertical-align:top;}
.sec-table thead th{background:var(--cat-soft,var(--accent-bg));color:var(--cat,var(--teal-text));font:800 12.5px 'Hanken Grotesk';letter-spacing:.2px;}
.sec-table .st-rowhead{background:var(--surface-2);color:var(--ink);font:800 14px 'Bricolage Grotesque';white-space:nowrap;width:1%;}
.sec-table td p{margin:0 0 9px;font-size:13px;line-height:1.58;color:var(--body);}
.sec-table td p:last-child{margin-bottom:0;}
@media (max-width:560px){ .sec-table th,.sec-table td{padding:10px 11px;} }

/* matriz densa (substâncias): células compactas e centralizadas */
.sec-table-mx{min-width:840px;}
.sec-table-mx th,.sec-table-mx td{padding:8px 7px;}
.sec-table-mx thead th{font-size:10.5px;text-align:center;vertical-align:bottom;line-height:1.2;}
.sec-table-mx thead th.st-corner{text-align:left;}
.sec-table-mx .st-mx{text-align:center;white-space:nowrap;font:700 12px 'Hanken Grotesk';color:var(--ink);}
.sec-table-mx .st-rowhead{font:700 12px 'Hanken Grotesk';min-width:120px;}

/* botão "ver ficha completa" dentro das atividades (#17) */
.ficha-peek{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 16px;font:700 13.5px 'Hanken Grotesk';color:var(--muted-2);cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.ficha-peek svg{width:16px;height:16px;flex-shrink:0;}

/* deck cards: dois contadores (atividades feitas + fichas revisadas) — #18 */
.deck-stats{margin-top:14px;}
.deck-feitas{font-size:11.5px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:5px;}
.deck-feitas b{font:800 13.5px 'Bricolage Grotesque';}
.deck-stats .deck-prog{margin-top:0;}

/* ===== decks com forma distinta por atividade ===== */
/* flashcards: pilha de cartões (bordas que "espiam" atrás) */
.deck-stack{position:relative;padding-top:9px;}
.deck-stack::before,.deck-stack::after{content:"";position:absolute;height:12px;border-radius:12px 12px 0 0;border:1px solid #FFD9C2;border-bottom:none;z-index:0;}
.deck-stack::before{top:0;left:12px;right:12px;background:#FFE8D8;}
.deck-stack::after{top:4px;left:6px;right:6px;background:#FFF1E7;}
.deck-stack .deck-card{position:relative;z-index:1;}
:root[data-theme="dark"] .deck-stack::before{background:#3a2a1f;border-color:#4A3526;}
:root[data-theme="dark"] .deck-stack::after{background:#33251c;border-color:#4A3526;}

/* quiz: "?" + linhas de múltipla escolha */
.deck-quiz .quiz-q{font:800 22px 'Bricolage Grotesque';line-height:1;}
.quiz-opts{display:flex;flex-direction:column;gap:7px;margin-top:13px;}
.quiz-opts span{display:flex;align-items:center;gap:9px;}
.quiz-opts span::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid #C7D0F5;flex-shrink:0;box-sizing:border-box;}
.quiz-opts span::after{content:"";height:8px;border-radius:99px;background:var(--surface-2);}
.quiz-opts span:nth-child(1)::after{width:78%;}
.quiz-opts span:nth-child(2)::after{width:58%;}
.quiz-opts span:nth-child(3)::after{width:68%;}
.quiz-opts span:first-child::before{border-color:#4361EE;background:#4361EE;}

/* ===== menu "Mais" (bottom sheet) — #6 mobile ===== */
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.ms-backdrop,.ms-sheet{display:none;}
@media (max-width:760px){
  .ms-backdrop{display:block;position:fixed;inset:0;z-index:45;background:rgba(16,42,51,.4);animation:fadeIn .2s ease;}
  .ms-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:46;background:var(--surface);border-radius:20px 20px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(16,42,51,.22);animation:sheetUp .25s cubic-bezier(.2,.7,.3,1);max-height:80vh;overflow-y:auto;}
  .ms-handle{width:40px;height:4px;border-radius:99px;background:var(--track);margin:8px auto 6px;}
  .ms-title{font:800 12px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:4px 6px 8px;}
  .ms-search-field{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:11px 14px;margin:0 0 8px;}
  .ms-search-field svg{flex-shrink:0;color:var(--muted-2);}
  .ms-search-field input{flex:1;min-width:0;border:none;background:transparent;outline:none;font:500 15px 'Hanken Grotesk';color:var(--ink);}
  .ms-search-results{position:static;box-shadow:none;border:0;padding:0;margin:0 0 8px;max-height:46vh;}
  .ms-list{display:flex;flex-direction:column;gap:2px;}
  .ms-item{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;border-radius:12px;padding:14px 12px;cursor:pointer;font:700 15px 'Hanken Grotesk';color:var(--ink);text-align:left;transition:background .15s ease;}
  .ms-item:active{background:var(--surface-2);}
  .ms-item.on{background:var(--accent-bg);color:var(--teal-text);}
  .ms-item svg{flex-shrink:0;color:var(--muted-2);}
  .ms-item.on svg{color:var(--teal-text);}
  .ms-danger,.ms-danger svg{color:#E5484D;}
  .ms-install{color:var(--teal-text);background:var(--accent-bg);}
  .ms-install svg{color:var(--teal-text);}
  .ms-sep{height:1px;background:var(--border);margin:8px 4px;}
}

/* botão "Instalar app" (PWA): no mobile mostra só o ícone */
@media (max-width:560px){ .pwa-pill .pwa-lbl{display:none;} .pwa-pill{padding:0 11px;} }

/* ============================================================
   Ficha de psicopatologia/semiologia — layout "bento" (blocos)
   Textos curtos (1-4 frases/campo): em vez de empilhar cada campo
   num h3+card full-width (como a ficha de transtorno, pensada p/
   critérios A-E longos), trata cada campo como um tile paralelo
   escaneável num golpe de vista. Ver screenPsicoFicha() em app.js.
   ============================================================ */
.bento-tldr{font:700 18px 'Bricolage Grotesque';line-height:1.4;color:var(--ink);margin:0 0 20px;max-width:680px;}
.bento-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  grid-template-areas:"def fen" "ex  dif";
  gap:14px;
  align-items:stretch;
}
.bento-tile{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px 18px;min-width:0;}
.bt-head{display:flex;align-items:center;gap:8px;font:800 10.5px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);margin-bottom:10px;}
.bt-bar{width:4px;height:13px;border-radius:2px;background:var(--cat);flex-shrink:0;display:inline-block;}
.bt-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--body);}

.bt-quote{background:var(--surface-2);position:relative;overflow:hidden;}
.bt-quote-mark{position:absolute;top:2px;right:14px;font:800 56px 'Bricolage Grotesque';color:var(--cat-soft);line-height:1;pointer-events:none;}
.bt-text-quote{font-style:italic;position:relative;z-index:1;}

/* diferencial: acento sutil — é o dado que mais cai em prova */
.bt-diff{border-left:3px solid var(--cat);background:var(--accent-bg);}

.bento-tags{margin-top:16px;}
.bt-tags-label{font:800 11px 'Hanken Grotesk';text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:9px;}
.bt-tags-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.bento-chip{font-size:12px;font-weight:700;color:var(--cat);background:var(--cat-soft);border-radius:8px;padding:5px 10px;}

.bento-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);}
.bt-fonte{font-size:12px;color:var(--muted);white-space:nowrap;}

@media (max-width:880px){
  .bento-grid{grid-template-columns:1fr;grid-template-areas:"def" "fen" "ex" "dif";}
  .bento-footer{flex-direction:column;align-items:flex-start;gap:12px;}
  .bento-footer .ficha-nav{width:100%;justify-content:space-between;}
}
@media (max-width:480px){
  .bento-tldr{font-size:16.5px;}
  .bt-text{font-size:14px;}
}