/* ============================================================
   Cronograma Pro — estilos (offline, sem dependências)
   ============================================================ */
:root{
  /* Tema CLARO — padrão "papel & dourado" do Método Procedere (referência: site do Buscador Juris Pro) */
  --bg:#F2EEE3; --panel:#ffffff; --panel-2:#F8F5EE; --sidebar:#0a1213; --sidebar-2:#070d0e;
  --txt:#14332A; --muted:#6B6A5E; --line:#DDD6C4; --track:#E9E3D2;
  /* Barra lateral e topbar: mesmo tom "papel" (harmonia entre as três áreas) */
  --sidebar-bg:#F8F5EE; --sidebar-bg-2:#F8F5EE; --sidebar-txt:#14332A; --sidebar-txt-soft:#4B5A50;
  --sidebar-border:#DDD6C4; --sidebar-accent:#1B4332;
  --sidebar-item:transparent; --sidebar-item-shadow:none;
  --primary:#1B4332; --primary-d:#123024; --primary-soft:#E7EFEA; --primary-ink:#ffffff;
  --teal:#A6791E; --teal-soft:#F0E5C9; --teal-ink:#ffffff;        /* acento = dourado */
  --green:#2E7D4F; --green-soft:#E1EFE6; --amber:#A6791E; --amber-soft:#F0E5C9;
  --red:#c0392b; --red-soft:#f6e2de; --blue:#3B5BA6; --blue-soft:#dde6f5;
  --azulverde:#0F766E; --azulverde-soft:#D6EBE8;   /* modalidade "com prazo certo" */
  --verde:#1B4332; --dourado:#A6791E;                              /* cores de marca (detalhes) */
  /* marca "Registra aí Pro" — mesma fonte/cores da família Juris Pro */
  --brand-verde:#1B4332; --brand-dourado:#A6791E;
  --font-brand:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-head:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --radius:12px; --shadow:0 1px 3px rgba(11,19,20,.07),0 1px 2px rgba(11,19,20,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--txt);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:0}
.ico svg,.btn svg,.icon-btn svg,.estudar svg,.section-title svg,.tag svg{display:block}
svg.cp-ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.cp-ico .solid,.cp-ico .dot{fill:currentColor;stroke:none}
.cp-ico .fillable{fill:currentColor;opacity:.18}
.btn .cp-ico,.estudar .cp-ico{width:15px;height:15px}
.icon-btn .cp-ico{width:18px;height:18px}
.notes-fab-btn .cp-ico{width:21px;height:21px}

/* ---- Layout ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:236px;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);color:var(--sidebar-txt-soft);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;z-index:30;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.sidebar>*{flex-shrink:0}
/* Marca "Registra aí Pro" — fonte/cores da família Juris Pro */
.brand{font-family:var(--font-brand);font-size:18px;font-weight:700;letter-spacing:.2px;color:var(--txt);line-height:1.2;white-space:nowrap;text-decoration:none}
.brand b{display:inline;color:var(--brand-verde);font-weight:700}
.brand .pro{color:var(--brand-dourado);font-weight:600}
/* na sidebar, a marca ocupa uma faixa da MESMA altura da topbar (filete dourado contínuo) */
a.sidebar .brand,.sidebar a.brand{color:var(--txt)}
.sidebar .brand{margin:0;padding:0 14px;height:62px;display:flex;align-items:center;gap:10px;border-bottom:3px double var(--dourado);position:sticky;top:0;background:var(--sidebar-bg);z-index:2}
.sidebar a.brand:hover{background:var(--panel)}
/* selo do Método Procedere (redondo por natureza — sem cantos a arredondar) */
.brand-logo{width:30px;height:30px;flex-shrink:0;border-radius:50%}
.brand-logo-lg{width:44px;height:44px}
.auth-card .brand{display:flex;align-items:center;gap:10px}
.nav{flex:1;padding:10px}
.nav button,.nav-sec{width:100%;text-align:left;background:var(--sidebar-item);border:none;color:var(--sidebar-txt-soft);padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:11px;margin-bottom:2px;box-shadow:var(--sidebar-item-shadow);font-family:var(--font-body)}
.nav button:hover,.nav-sec:hover{background:var(--panel);color:var(--sidebar-txt)}
/* seção "Outros materiais": links externos + itens em construção */
.nav-outros{flex:0 0 auto;padding-top:0}
.nav-grupo{color:var(--sidebar-txt-soft);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7;padding:12px 22px 4px}
a.nav-sec{text-decoration:none;box-sizing:border-box}
.nav-soon{cursor:default;opacity:.7}
.nav-soon:hover{background:var(--sidebar-item);color:var(--sidebar-txt-soft)}
.soon-pill{margin-left:auto;font-size:10px;line-height:1;background:var(--panel);border:1px solid rgba(128,128,128,.25);border-radius:99px;padding:3px 7px;color:var(--sidebar-txt-soft);white-space:nowrap}
.nav button.active,.nav-sec.active{background:var(--primary);color:var(--primary-ink);font-weight:600}
.nav button.active .ico,.nav-sec.active .ico{color:var(--primary-ink)}
.nav button.nav-destaque{box-shadow:0 0 0 1px var(--dourado),0 3px 10px rgba(0,0,0,.14)}
.nav button.nav-destaque.active{box-shadow:0 0 0 1px var(--dourado)}
.ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.ico svg{width:18px;height:18px}
.nav-foot{padding:10px;border-top:1px solid var(--sidebar-border)}
.ver{font-size:11px;color:var(--muted);padding:8px 10px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--sidebar-bg);border-bottom:3px double var(--dourado);padding:0 22px;height:62px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
/* nome da aba nunca quebra linha: com 2 palavras ("Edital esquematizado",
   "Diário de estudos") ele empilhava e estourava os 62px da barra no celular */
#topTitle{white-space:nowrap;flex-shrink:0}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.topbar-right>*{flex-shrink:0}
.topbar-right::-webkit-scrollbar{height:5px}
.topbar-right::-webkit-scrollbar-track{background:transparent}
.topbar-right::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.plan-pick{display:flex;align-items:center;gap:8px}
.plan-pick .lbl{color:var(--muted);font-size:12.5px}
.content{padding:22px;max-width:1180px;width:100%}

h1.page{font-family:var(--font-head);font-size:27px;font-weight:700;letter-spacing:0;margin:0 0 4px}.sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.spacer{flex:1}
.section-title{font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dourado);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.section-title svg{width:16px;height:16px}

/* ---- Botões ---- */
.btn{background:var(--primary);color:var(--primary-ink);border:none;padding:9px 16px;border-radius:9px;font-size:14px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body)}
.btn:hover{background:var(--primary-d)}
.btn svg{width:16px;height:16px}
.btn.sec{background:var(--panel);color:var(--txt);border:1px solid var(--line);font-weight:600}
.btn.sec:hover{background:var(--panel-2)}
.btn.ghost{background:transparent;color:var(--primary);padding:6px 10px}
.btn.ghost:hover{background:var(--primary-soft)}
.btn.danger{background:var(--panel);color:var(--red);border:1px solid var(--red-soft)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.go{background:var(--green);color:var(--primary-ink)}.btn.go:hover{filter:brightness(.94)}
.btn.warn{background:var(--amber);color:var(--teal-ink)}.btn.warn:hover{filter:brightness(.94)}
.btn.add-estudo{background:var(--teal);color:var(--teal-ink)}.btn.add-estudo:hover{filter:brightness(.94)}
.btn.icon-only{width:38px;height:38px;padding:0;justify-content:center}
/* Ação da topbar com rótulo: texto visível quando há largura; abaixo de 1180px
   volta a ser quadradinho só de ícone (o title/aria-label seguem valendo). */
.btn.com-rot{height:38px;padding:0 12px;gap:7px}
.tbar-rot{white-space:nowrap}
@media(max-width:1180px){ .btn.com-rot{width:38px;padding:0;justify-content:center} .tbar-rot{display:none} }
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- Form ---- */
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--txt);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
input[type="checkbox"],input[type="radio"]{width:auto;flex-shrink:0}
/* flex-column + justify-end: quando o grid do filtro estica um .fld pra
   igualar a altura da linha (rótulo de outro campo quebrou em 2 linhas), o
   campo desce e cola no rodapé em vez de ficar solto no meio — todos os
   inputs da linha ficam na mesma altura não importa o tamanho do rótulo. */
label.fld{display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:12px}
label.fld span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.inline-check{display:flex;gap:8px;align-items:center;padding:9px 0}.inline-check input{width:auto}
/* caixa de seleção múltipla (vínculos do professor, matrícula em turmas) */
.vinc-box{max-height:26vh;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:4px 10px}
.vinc-box .inline-check{padding:5px 0;font-size:13.5px}

/* ---- Cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.plan-card{cursor:pointer;transition:.12s}
.plan-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,70,229,.12)}
.plan-card.active-plan{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;background:var(--primary-soft);color:var(--primary-d);font-weight:600}
.tag.green{background:var(--green-soft);color:var(--green)}.tag.amber{background:var(--amber-soft);color:var(--amber)}.tag.gray{background:var(--track);color:var(--muted)}.tag.red{background:var(--red-soft);color:var(--red)}.tag.teal{background:var(--teal-soft);color:var(--teal)}
/* Tipos de tarefa do cronograma — cores SEMÂNTICAS, iguais em todas as telas.
   (--amber e --teal são o mesmo dourado no tema claro, então "Estudo" e "Revisão"
   ficavam indistinguíveis quando usavam esses nomes de cor direto.) */
.tag.t-estudo{background:var(--teal-soft);color:var(--teal)}          /* dourado  */
.tag.t-revisao{background:var(--blue-soft);color:var(--blue)}         /* azul     */
.tag.t-sprint{background:var(--red-soft);color:var(--red)}            /* vermelho */
.tag.t-feito{background:var(--green-soft);color:var(--green)}         /* verde    */
.tag.t-prazo{background:var(--azulverde-soft);color:var(--azulverde)} /* modalidade prazo certo */

.bar{height:8px;background:var(--track);border-radius:20px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;background:var(--primary);border-radius:20px}
.bar.green>i{background:var(--green)}.bar.teal>i{background:var(--teal)}

/* balões da Início (Mural/Calendário/Tarefas): SEMPRE no fluxo, num flex
   container (nunca flutuam, nunca se sobrepõem) — só o tamanho é ajustável
   (resize nativo do canto). Mural fica fixo em 1º (sem alça de arrastar);
   Calendário/Tarefas arrastam pela alça PRA REORDENAR entre si. */
.baloes-inicio{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;align-items:flex-start}
.painel-flex{resize:both;overflow:auto;min-width:260px;min-height:180px;box-sizing:border-box}
.painel-flex.medio{flex:0 1 auto;width:380px}
.painel-flex.grande{flex:0 1 auto;width:420px}
.painel-flex.largo{flex:0 1 auto;width:100%}
.painel-flex.arrastando{opacity:.5}
.painel-flex-alca{user-select:none}
.painel-flex-alca.movivel{cursor:move}
.painel-flex-alca .cp-ico{color:var(--muted)}

.empty{text-align:center;padding:46px 20px;color:var(--muted)}.empty .big{font-size:42px;margin-bottom:8px}

/* ---- Stats / widgets ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat .n{font-family:var(--font-head);font-size:30px;font-weight:700;letter-spacing:0}.stat .l{color:var(--muted);font-size:12.5px}
.stat .sub2{font-size:12px;color:var(--muted);margin-top:2px}
.widgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
/* mesmo tratamento dos títulos de balão da aba Início do Juris Pro (mesma família de
   produtos, mesma paleta): serifada, colorida, sem caixa alta — era só maiúsculas
   cinza-claro pequenas antes, sem o peso visual do resto da família de produtos */
.widget h4{margin:0 0 10px;font-family:var(--font-head);font-weight:600;color:var(--primary-d)}

/* ---- Tabelas ---- */
table{width:100%;border-collapse:collapse}
/* tabela larga: rola dentro da própria caixa em vez de empurrar a página
   (regra do celular — a página nunca rola na horizontal) */
/* texto de apoio em vários parágrafos: espaçamento curto entre eles (o padrão do
   navegador, 1em, abre buracos grandes demais dentro de um card) */
.dots p,.hint p{margin:0 0 7px}
.dots p:last-child,.hint p:last-child{margin-bottom:0}
.tbl-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tbl-rolagem>table{min-width:640px}
/* bloco do ciclo que o "Estude agora" está mostrando */
tr.bloco-agora td{background:var(--primary-soft)}
tr.bloco-agora:hover td{background:var(--primary-soft)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:var(--panel-2)}

/* ---- Sanfona (edital) ---- */
.disc{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--panel)}
.disc-head{padding:13px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.disc-head:hover{background:var(--panel-2)}.disc-head .name{font-weight:600}
.disc-body{padding:4px 16px 12px;border-top:1px solid var(--line)}
.topico{display:flex;align-items:center;gap:11px;padding:8px 4px;border-bottom:1px dashed var(--line)}
.topico:last-child{border-bottom:none}.topico .t-num{color:var(--muted);font-size:12px;min-width:30px}
.topico .t-name{flex:1}.topico.done .t-name{color:var(--muted);text-decoration:line-through}
.chk{width:19px;height:19px;cursor:pointer;accent-color:var(--green);flex-shrink:0}
/* no edital, o tópico + seus chips de status viram um bloco só: a borda
   passa a ser do bloco (para não duplicar linha entre a linha e os chips) */
.topico-wrap .topico{border-bottom:none}
.topico-wrap{border-bottom:1px dashed var(--line)}.topico-wrap:last-child{border-bottom:none}

/* status de estudo/revisão do tópico (chips coloridos, sob a linha do tópico) */
.topico-status{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 9px 44px}
.sem-card .topico-status{padding:6px 0 0;margin-top:2px;border-top:1px dashed var(--line)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 9px;border-radius:20px;border:none;cursor:pointer;font-weight:600;white-space:nowrap;font-family:inherit}
.chip:disabled{cursor:default}
.chip-ok{background:var(--green-soft);color:var(--green)}
.chip-off{background:var(--track);color:var(--muted)}
.chip-warn{background:var(--red-soft);color:var(--red)}
.chip-sched{background:var(--teal-soft);color:var(--teal)}
.chip-rev{background:var(--blue-soft);color:var(--blue)}
.chip-add{background:var(--panel-2);color:var(--muted);border:1px dashed var(--line)}
.chip-x{background:none;border:none;cursor:pointer;padding:0;margin-left:1px;display:inline-flex;color:inherit;opacity:.65}
.chip-x:hover{opacity:1}
.perf{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--track);color:var(--muted);white-space:nowrap}
.perf.g{background:var(--green-soft);color:var(--green)}.perf.r{background:var(--red-soft);color:var(--red)}
.estudar{background:var(--teal-soft);color:var(--teal);border:none;padding:5px 11px;border-radius:7px;font-size:12px;cursor:pointer;font-weight:700;display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.estudar:hover{filter:brightness(.96)}.estudar.running{background:var(--amber-soft);color:var(--amber)}
.mini{width:auto;padding:5px 8px;font-size:12px}.dots{font-size:11px;color:var(--muted)}

/* ---- Carregamento (spinner) ---- */
.spinner{display:inline-block;width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:cp-spin .7s linear infinite;flex-shrink:0}
@keyframes cp-spin{to{transform:rotate(360deg)}}
.loading-block{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;color:var(--muted);font-size:13px}
.btn .spinner{width:14px;height:14px;border-width:2px;border-color:rgba(255,255,255,.4);border-top-color:#fff}
/* Cronômetro (loading temático): corpo fixo + ponteiro tiquetaqueando */
.cp-cron{width:26px;height:26px;fill:none;stroke:var(--primary);stroke-width:1.8;flex-shrink:0}
.cp-cron-pont{transform-origin:12px 13.6px;animation:cp-cron-tick 1.1s steps(11) infinite}
@keyframes cp-cron-tick{to{transform:rotate(360deg)}}
.btn .cp-cron{width:16px;height:16px;stroke:#fff}
/* Overlay de "abrindo a plataforma" (boot/login) */
.cp-load-full{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg)}
.cp-load-full .cp-cron{width:46px;height:46px;stroke-width:1.6}
.cp-load-lbl{color:var(--muted);font-size:13.5px}
/* Grupos recolhíveis da Gestão (<details> nativo) — padrão recolhido */
.ger-col>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ger-col>summary::-webkit-details-marker{display:none}
.ger-col>summary:hover h3{color:var(--primary)}
.ger-col-chev{color:var(--muted);display:flex;transition:transform .2s}
.ger-col[open]>summary .ger-col-chev{transform:rotate(90deg)}
.ger-col-body{padding-top:6px}

/* barra de sub-abas do painel (Administração / Professor(a)). No desktop quebra
   em linhas; no celular vira UMA faixa que rola na horizontal — 13 botões
   empilhados empurravam o conteúdo pra fora da primeira tela. */
.ger-abas-card{margin-bottom:14px}
.ger-abas{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:880px){
  .ger-abas-card{padding:10px}
  .ger-abas{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}
  /* 10px de altura, não 7: é a única fileira do app com alvo abaixo de 34px, e
     ela rola na horizontal — errar o toque aqui troca de aba sem querer */
  .ger-abas .btn{flex:0 0 auto;font-size:12.5px;padding:10px 11px}
}
/* Lista de tópicos (multi-seleção) no "Registrar Estudo" */
.e-tops{border:1px solid var(--line);border-radius:9px;padding:8px 10px;max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.e-tops .e-top-item{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;cursor:pointer;line-height:1.35}
.e-tops .e-top-item input{margin-top:2px;flex-shrink:0}
.e-tops .e-top-empty{color:var(--muted);font-size:13px}
/* ---- Celebrações animadas (festa.js): conquista / rebaixamento / boas-vindas ---- */
.festa-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,13,14,.62);backdrop-filter:blur(3px);animation:festa-fade .3s ease;overflow:hidden}
.festa-ov.saindo{opacity:0;transition:opacity .25s ease}
.festa-card{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);border-top:3px double var(--dourado);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.5);max-width:420px;width:100%;padding:26px 24px;text-align:center}
.festa-pop{animation:festa-pop .5s cubic-bezier(.18,.9,.32,1.4)}
.festa-titulo{font-family:var(--font-head);font-size:24px;font-weight:800;margin:14px 0 4px;color:var(--txt)}
.festa-sub{font-size:15px;color:var(--txt);margin-bottom:6px}
.festa-txt{font-size:13.5px;color:var(--muted);line-height:1.55;margin:8px 0}
.festa-nota{font-size:12px;color:var(--muted);margin-top:12px}
.festa-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.festa-card>.btn{margin-top:14px}
.festa-acoes .btn{margin-top:0}
.festa-emblema{position:relative;width:96px;height:96px;margin:2px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--dourado)}
.festa-emblema svg{width:46px;height:46px;fill:currentColor;stroke:currentColor}
.festa-anel{position:absolute;inset:-6px;border-radius:50%;border:3px solid currentColor;opacity:.5;animation:festa-anel 1.5s ease-out infinite}
.festa-raios{position:absolute;inset:-42px;border-radius:50%;background:radial-gradient(circle,currentColor 0%,transparent 62%);opacity:.16;animation:festa-brilho 1.9s ease-in-out infinite}
@keyframes festa-brilho{0%,100%{transform:scale(.9);opacity:.10}50%{transform:scale(1.06);opacity:.24}}
.festa-ganho .festa-emblema{animation:festa-bounce .6s ease}
.festa-emblema.festa-vazio{color:var(--muted);filter:grayscale(1);opacity:.6}
.festa-cai{animation:festa-cai .7s ease}
.festa-confete{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.festa-confete i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:festa-queda linear forwards}
@keyframes festa-fade{from{opacity:0}to{opacity:1}}
@keyframes festa-pop{0%{opacity:0;transform:translateY(18px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes festa-bounce{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes festa-anel{0%{transform:scale(.85);opacity:.55}100%{transform:scale(1.4);opacity:0}}
@keyframes festa-cai{0%{transform:translateY(-16px) scale(1.1);opacity:0}55%{transform:translateY(4px) scale(1)}100%{transform:none;opacity:1}}
@keyframes festa-queda{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(108vh) rotate(560deg);opacity:.35}}
@media(prefers-reduced-motion:reduce){.festa-pop,.festa-ganho .festa-emblema,.festa-cai,.festa-anel{animation:none}.festa-confete{display:none}}

/* ---- Gráficos simples ---- */
.chart-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.chart-row .lbl{width:170px;font-size:13px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-row .track{flex:1;height:22px;background:var(--track);border-radius:6px;overflow:hidden}
.chart-row .track>i{display:block;height:100%;background:var(--primary);border-radius:6px}
.chart-row .val{width:90px;text-align:right;font-size:12.5px;color:var(--muted)}
/* No celular as colunas do gráfico não cabem: a data embaixo de cada barra tem
   uns 28px e 30 dias não entram em 309px. Antes elas simplesmente vazavam do
   card e faziam a PÁGINA INTEIRA rolar de lado. Agora a rolagem é do gráfico,
   como já acontece com as tabelas largas (.tbl-rolagem). */
.daybars{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.daybars .d{flex:1 0 28px;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.daybars .d .b{width:100%;background:var(--primary);border-radius:5px 5px 0 0;min-height:2px}
.daybars .d .b.q{background:var(--teal)}
.daybars .d .t{font-size:10px;color:var(--muted)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* ---- Modal ---- */
.overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;z-index:50;overflow-y:auto}
.modal{background:var(--panel);border-radius:16px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal.wide{max-width:860px}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-head h3{margin:0;font-size:17px}.modal-head .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;background:none;border:none}
.modal-body{padding:22px;max-height:68vh;overflow-y:auto}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;align-items:center}

.steps{display:flex;gap:8px;margin-bottom:20px}
.steps .step{flex:1;text-align:center;font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:3px solid var(--line)}
.steps .step.on{color:var(--primary);border-color:var(--primary);font-weight:700}
.steps .step.done{color:var(--green);border-color:var(--green)}

.dropzone{border:2px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted);cursor:pointer;background:var(--panel-2)}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-soft)}

.hint{background:var(--blue-soft);color:#1e3a8a;padding:11px 14px;border-radius:10px;font-size:12.5px;margin-bottom:14px}
/* avisos longos vêm quebrados em <p> pra não virar um bloco corrido de texto */
.hint p{margin:0 0 8px}.hint p:last-child{margin-bottom:0}
.hint.amber{background:var(--amber-soft);color:#7c2d12}.hint.green{background:var(--green-soft);color:#14532d}
.pill-days{display:flex;gap:6px;flex-wrap:wrap}
.pill-days label{display:flex;align-items:center;gap:5px;background:var(--panel-2);padding:6px 11px;border-radius:8px;cursor:pointer;font-size:13px;width:auto}
.pill-days input{width:auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:none;background:var(--panel);padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);font-family:var(--font-body)}
.seg button.on{background:var(--primary);color:var(--primary-ink)}

/* ---- Cronômetro flutuante ---- */
.timer-fab{position:fixed;left:20px;bottom:20px;z-index:80;background:var(--panel);color:var(--txt);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.4);width:300px;display:none;border:1px solid var(--line);border-top:3px double var(--dourado);resize:both;overflow:auto;min-width:232px;min-height:158px;max-width:80vw;max-height:80vh;container-type:inline-size}
.timer-fab.on{display:block}
.timer-fab .tf-head{padding:11px 16px;background:var(--teal);color:var(--teal-ink);font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:7px;cursor:move;user-select:none;touch-action:none;position:sticky;top:0}
.timer-fab .tf-head .paused{opacity:.75}
.timer-fab .tf-body{padding:16px}
.timer-fab .tf-time{font-size:clamp(26px,15cqi,80px);font-weight:700;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:1px;line-height:1.1}
.timer-fab .tf-what{font-size:12.5px;color:var(--muted);text-align:center;margin:6px 0 14px;min-height:18px}
.timer-fab .tf-btns{display:flex;gap:8px}.timer-fab .tf-btns button{flex:1;justify-content:center}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--sidebar-2);color:#fff;padding:11px 20px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:99;font-size:13.5px;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;bottom:30px}

/* Calendário mensal */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.cal-dow{text-align:center;font-size:11px;color:var(--muted);font-weight:600;padding-bottom:2px}
.cal-cell{min-height:54px;border:1px solid var(--line);border-radius:8px;padding:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:.1s}
.cal-cell:hover{border-color:var(--primary)}
.cal-cell.empty{border:none;background:transparent;cursor:default}
.cal-cell.hoje{outline:2px solid var(--primary);outline-offset:-1px}
.cal-cell .cal-num{font-size:12px;font-weight:600;color:var(--txt)}
.cal-cell .cal-mk{font-size:12px;line-height:1;display:flex;gap:2px}
.cal-cell.sel{border-color:var(--dourado);box-shadow:0 0 0 1px var(--dourado)}
.cal-cell.mini{min-height:32px;padding:3px}
.cal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.cal-dot.pessoal{background:var(--teal)}
.cal-dot.global{background:var(--dourado)}

/* Cronograma da semana (Planejamento — modo Semanal): kanban por dia */
.sem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.sem-col{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:100px}
.sem-col.hoje{border-color:var(--dourado);box-shadow:0 0 0 1px var(--dourado)}
.sem-col-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:12px}
/* relógio do Modo estudo: hora grande, data discreta embaixo */
.relogio{font-family:var(--font-titulo,inherit);font-size:52px;font-weight:700;line-height:1;letter-spacing:.02em;text-align:center;color:var(--primary);font-variant-numeric:tabular-nums}
.relogio-data{text-align:center;color:var(--muted);font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}
.sem-hoje-badge{align-self:flex-start;background:var(--dourado);color:var(--teal-ink);font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:1px 8px;border-radius:20px;margin-bottom:2px}
.sem-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px;position:relative;min-width:0;overflow:hidden}
/* as colunas do Cronograma da semana são estreitas (min 150px): etiqueta comprida
   (ex.: "planejado p/ 26/07/2026 (dom)") tem de quebrar dentro do cartão em vez de
   vazar por cima da coluna vizinha — .chip é nowrap por padrão. */
.sem-card .chip{max-width:100%;white-space:normal;text-align:left}
.sem-card .sem-titulo,.sem-card .sem-disc{overflow-wrap:anywhere}
.sem-card.feito{opacity:.6}
.sem-card.feito .sem-titulo{text-decoration:line-through}
.sem-check{position:absolute;top:6px;right:6px;color:var(--green)}
.sem-check .cp-ico{width:13px;height:13px}
.sem-disc{font-size:9.5px;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.sem-titulo{font-size:12.5px;font-weight:600;margin:2px 0 6px;padding-right:14px}
.sem-meta{display:flex;justify-content:space-between;align-items:center;gap:6px}
.sem-act{background:none;border:none;padding:2px;margin:0;cursor:pointer;color:var(--muted);display:inline-flex;border-radius:5px}
.sem-act:hover{background:var(--panel-2);color:var(--primary)}
.sem-act .cp-ico{width:13px;height:13px}
.tarefas-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
@media(max-width:600px){.tarefas-2col{grid-template-columns:1fr}}

/* Botões de ícone (barra superior) */
.icon-btn{position:relative;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:9px;width:38px;height:38px;cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn:hover{background:var(--panel-2)}
.badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* Notas adesivas (flutuante) */
.notes-fab-btn{position:fixed;right:20px;bottom:20px;z-index:75;width:46px;height:46px;border-radius:50%;border:none;background:var(--teal);color:var(--teal-ink);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.notes-panel{position:fixed;right:20px;bottom:76px;z-index:75;width:270px;height:auto;max-height:72vh;overflow:auto;display:none;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-top:3px double var(--dourado);border-radius:14px;padding:10px;box-shadow:0 14px 44px rgba(0,0,0,.3);resize:both;min-width:220px;min-height:120px;max-width:80vw}
.notes-panel.on{display:flex}
.notes-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--txt);cursor:move;user-select:none;touch-action:none}
.nota{position:relative;border-radius:10px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nota textarea{background:transparent;border:none;width:100%;resize:vertical;font-size:13px;min-height:64px;color:#1f2937}
.nota textarea:focus{outline:none}
.nota-x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.08);border:none;border-radius:6px;cursor:pointer;font-size:11px;width:18px;height:18px;color:#000}

/* ---- Tema escuro ---- */
body.dark{
  --bg:#0E241C; --panel:#132D24; --panel-2:#0A1B15; --sidebar:#0a1213; --sidebar-2:#070d0e;
  --txt:#F3EFE3; --muted:rgba(243,239,227,.60); --line:rgba(210,174,85,.22); --track:rgba(243,239,227,.10);
  --sidebar-bg:#0A1B15; --sidebar-bg-2:#0A1B15; --sidebar-txt:#F3EFE3; --sidebar-txt-soft:rgba(243,239,227,.65);
  --sidebar-border:rgba(210,174,85,.22); --sidebar-accent:#4C9A75;
  --sidebar-item:transparent; --sidebar-item-shadow:none;
  --brand-verde:#4C9A75; --brand-dourado:#D2AE55;
  --primary:#4C9A75; --primary-d:#6BB690; --primary-soft:rgba(76,154,117,.16); --primary-ink:#0E241C;
  --teal:#D2AE55; --teal-soft:rgba(210,174,85,.16); --teal-ink:#0E241C;
  --green:#6BB690; --green-soft:rgba(107,182,144,.16); --amber:#D2AE55; --amber-soft:rgba(210,174,85,.16);
  --red:#ef6b5a; --red-soft:rgba(239,107,90,.16); --blue:#7C9BD8; --blue-soft:rgba(124,155,216,.16);
  --azulverde:#5EBFB2; --azulverde-soft:rgba(94,191,178,.18);
  --verde:#4C9A75; --dourado:#D2AE55;
  --shadow:0 1px 3px rgba(0,0,0,.55);
}
body.dark .btn.sec{background:var(--panel);color:var(--txt)}
body.dark .btn.sec:hover{background:var(--panel-2)}
body.dark input,body.dark select,body.dark textarea{background:#0C1F19;color:var(--txt);border-color:var(--line)}
body.dark .seg button{background:var(--panel);color:var(--muted)}
body.dark .seg button.on{background:var(--primary);color:var(--primary-ink)}
body.dark .bar,body.dark .chart-row .track,body.dark .perf{background:var(--track)}
body.dark tr:hover td,body.dark .disc-head:hover,body.dark .dropzone{background:rgba(238,243,240,.04)}
/* topbar no escuro: botões de ícone e caixa do perfil com contraste real sobre o fundo #0A1B15 */
body.dark .icon-btn,body.dark .topbar .user{background:var(--panel);color:var(--txt);border-color:rgba(243,239,227,.28)}
body.dark .icon-btn:hover,body.dark .topbar .user:hover{background:rgba(243,239,227,.14)}
body.dark .menu-toggle{color:var(--txt)}
body.dark .modal,body.dark .auth-card{background:var(--panel);color:var(--txt)}
body.dark .card[style*="fafbfd"],body.dark .card[style*="fff"]{background:var(--panel-2) !important}
body.dark .hint{color:#cfe0f5}
body.dark .hint.amber{color:#f5d9a8}
body.dark .hint.green{color:#bfe6c6}
body.dark .tag.gray{background:rgba(238,243,240,.10);color:var(--muted)}
body.dark .pill-days label{background:rgba(238,243,240,.08);color:var(--txt)}
body.dark .tag{background:rgba(76,154,117,.18);color:#9FD4B8}
body.dark .nota-x{background:rgba(0,0,0,.18)}
body.dark ::placeholder{color:#6b7d78}
body.dark .topbar{background:var(--sidebar-bg)}
body.dark .nav button:hover,body.dark .nav-sec:hover{background:rgba(243,239,227,.06)}
body.dark .cal-cell{border-color:var(--line)}

/* Círculos / gráficos estatísticos */
:root{--ring-track:#E9E3D2}
body.dark{--ring-track:rgba(243,239,227,.10)}
.ring{display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ring svg{display:block}
.ring-val{font-family:var(--font-head);font-weight:600;fill:var(--txt)}
.ring-sub{fill:var(--muted)}
.ring-lbl{font-size:12.5px;color:var(--muted);max-width:120px;line-height:1.3}
.rings-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-around}
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut-leg{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.donut-leg .it{display:flex;align-items:center;gap:8px;color:var(--txt)}
.donut-leg .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}

.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer}
@media(max-width:880px){
  .sidebar{position:fixed;left:-244px;z-index:60;transition:.2s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .sidebar.open{left:0}.menu-toggle{display:block}
  .grid2,.grid3{grid-template-columns:1fr}.plan-pick .lbl{display:none}
  /* topbar continua em UMA linha (altura igual a da marca); o excesso rola
     na horizontal com barra fininha na cor da interface */
  .topbar{padding:0 12px;gap:8px}
  .topbar-right{gap:8px}
  .content{padding:14px}
}

/* ===== Ajustes (recolhível, zoom, marca, vision board, FAB estudar) ===== */
/* Barra lateral recolhível (desktop) */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--txt)}
.menu-toggle .cp-ico{width:22px;height:22px}
.sidebar{transition:width .2s ease}
.sidebar>*{white-space:nowrap}
@media(min-width:881px){ body.menu-collapsed .sidebar{width:0;min-width:0;padding:0;border:none;overflow:hidden} }

/* Marca em maiúsc/minúsc */
.brand{text-transform:none;letter-spacing:.2px}

/* Escala tipográfica (única fonte de verdade dos tamanhos por nível):
   título de página 27 > número de destaque 28 > título de modal 17 > corpo 15 >
   nav/botão/campo/linha 14 > apoio 13.5–12.5 > rótulo/etiqueta 12–11.5 */
body{font-size:15px}
.dots{font-size:12.5px}
.sub{font-size:14px}
.nav button,.nav-sec{font-size:14px}
.btn{font-size:14px}.btn.sm{font-size:12.5px}
input,select,textarea{font-size:14px}
th{font-size:11.5px}td{font-size:13.5px}
.stat .n{font-size:28px}.stat .l{font-size:13px}.stat .sub2{font-size:12px}
.tag{font-size:11.5px}.perf{font-size:11.5px}
h1.page{font-size:27px}
label.fld span{font-size:12.5px}
.plan-pick .lbl{font-size:12.5px}
.ring-lbl{font-size:12.5px}
.widget h4{font-size:15px}   /* nível "corpo" da escala, não mais "apoio" — ver .widget h4 acima (mesmo peso visual dos títulos de balão do Juris Pro) */
.topico .t-name,.assunto .a-name{font-size:14px}


/* Vision Board (Início): COLAGEM em mosaico, fotos de tamanhos variados */
/* colunas/linhas em --v-cell: um ResizeObserver (ligarVisionResize, views.js) ajusta essa
   variável e o nº de colunas conforme o tamanho do balão, não da viewport — então o pôster
   também escala quando o balão é redimensionado pelo canto, com célula sempre quadrada. */
.vboard{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--v-cell,110px);grid-auto-flow:dense;gap:0;margin-top:12px;border-radius:14px;overflow:hidden}
.vslot{position:relative;border:2px dashed var(--line);border-radius:12px;background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;overflow:hidden;color:var(--muted);font-size:12.5px;text-align:center;padding:6px}
.vslot:hover{border-color:var(--primary)}
.vslot.filled{border:none;border-radius:0;box-shadow:none;cursor:default;padding:0}
.vslot:not(.filled){margin:6px;border-radius:10px}
@media (hover:none){.vslot.filled .vacoes{display:flex}}
.vslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vslot .vacoes{position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:2}
.vslot.filled:hover .vacoes{display:flex}
.vslot .vacoes button{background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:7px;width:27px;height:27px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vslot .vacoes button:hover{background:rgba(0,0,0,.8)}
.vslot .vacoes .cp-ico{width:14px;height:14px}
.vslot small{font-size:10.5px;color:var(--muted)}

/* FAB "estudar" ao lado das notas (canto inferior direito) */
.estudar-fab{position:fixed;right:76px;bottom:20px;z-index:75;width:46px;height:46px;border-radius:50%;border:none;background:var(--primary);color:var(--primary-ink);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.estudar-fab .cp-ico{width:22px;height:22px}

/* ============ chat de suporte (conversas 1-para-1) ============ */
.chat-panel{position:fixed;top:56px;right:14px;z-index:90;width:min(360px,94vw);max-height:min(560px,80vh);
  background:var(--panel,#fff);border:1px solid var(--line,#e2e8f0);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);
  display:none;flex-direction:column;overflow:hidden}
.chat-panel,.chat-embed{font-size:13px;color:var(--txt,#0f172a)}
.chat-embed{display:flex;flex-direction:column;border:1px solid var(--line,#e2e8f0);border-radius:12px;overflow:hidden;max-height:420px}
.chat-cab{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line,#e2e8f0);background:var(--panel-2,#f8fafc)}
.chat-x{cursor:pointer;color:var(--muted,#64748b);font-weight:700;margin-left:8px}
.chat-filtros{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line,#e2e8f0)}
.chat-filtros input{flex:1;min-width:0}
.chat-filtros input,.chat-filtros select{border:1px solid var(--line,#e2e8f0);border-radius:8px;padding:5px 7px;font:inherit;background:var(--panel,#fff);color:inherit}
.chat-corpo{overflow:auto;flex:1;min-height:80px}
.chat-lista{display:flex;flex-direction:column;gap:2px;padding:6px}
.chat-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;color:inherit}
.chat-item:hover{background:var(--panel-2,#f1f5f9)}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex:none}
.chat-dot.on{background:#22c55e}
.chat-nome{display:flex;flex-direction:column;min-width:0;flex:1}
.chat-nome small{color:var(--muted,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-badge-fixa{position:static;display:inline-flex;margin-left:auto}
.chat-um-cab{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line,#e2e8f0)}
.chat-volta{cursor:pointer;color:var(--primary,#0ea5e9);font-weight:600;margin-right:2px}
.chat-msgs{display:flex;flex-direction:column;gap:6px;padding:10px}
.chat-msg{max-width:85%;background:var(--panel-2,#f1f5f9);border-radius:10px;padding:6px 9px;align-self:flex-start}
.chat-msg.minha{align-self:flex-end;background:var(--primary-soft,#e0f2fe)}
.chat-msg-cab{font-size:11px;color:var(--muted,#64748b);margin-bottom:2px;display:flex;align-items:center;gap:5px}
.chat-envia{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line,#e2e8f0)}
.chat-envia input{flex:1;border:1px solid var(--line,#e2e8f0);border-radius:8px;padding:6px 8px;font:inherit;background:var(--panel,#fff);color:inherit}

/* ============ tutorial guiado (tour) ============ */
.tour-spot{position:fixed;z-index:200;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 4px var(--dourado),0 0 0 9999px rgba(10,18,19,.62);transition:all .25s ease}
.tour-dim{position:fixed;inset:0;z-index:200;background:rgba(10,18,19,.62)}   /* passo sem alvo (centralizado) */
.tour-card{position:fixed;z-index:201;width:min(340px,92vw);background:var(--panel);color:var(--txt);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.4);padding:16px 18px;transition:all .25s ease;
  /* passos com vários parágrafos podem ficar altos: rola dentro do próprio cartão
     em vez de estourar a tela (celular deitado é o caso apertado) */
  max-height:min(76vh,560px);overflow-y:auto;overscroll-behavior:contain}
.tour-card h4{margin:0 0 8px;font-family:var(--font-head);font-size:16px}
.tour-card p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.55}
.tour-card p:last-of-type{margin-bottom:12px}
.tour-card .tour-passo{font-size:11.5px;color:var(--muted)}
.tour-card .tour-botoes{display:flex;gap:8px;align-items:center;margin-top:4px}
.tour-card .tour-pular{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:12.5px;text-decoration:underline}

/* ============ suavização de abertura (abas, modais, painéis) ============ */
@keyframes cp-tab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.content.tab-anim{animation:cp-tab .28s ease both}
@keyframes cp-fade{from{opacity:0}to{opacity:1}}
.overlay{animation:cp-fade .18s ease both}
@keyframes cp-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal{animation:cp-pop .24s cubic-bezier(.2,.8,.3,1) both}
.notes-panel.on,.chat-panel,.tour-card,.auth-card{animation:cp-pop .24s ease both}
a,button,.btn,.icon-btn,.nav button,.nav-sec,.estudar,.seg button,.tag,.vslot,.dropzone{transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ============ perfil (meus dados + foto) ============ */
.perfil-foto{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--primary-soft);color:var(--primary-d);
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;flex-shrink:0;box-shadow:var(--shadow)}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil-foto-linha{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.perfil-pub{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;margin-top:10px}
.perfil-pub .perfil-foto{width:44px;height:44px;font-size:18px}

/* ============ Constância (ofensiva/streak): fogo, painel, rankings ============ */
.flame-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);border-radius:9px;padding:7px 11px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700}
.flame-btn .cp-ico{width:17px;height:17px}
.flame-btn.on{color:#E25822;border-color:rgba(226,88,34,.45);background:rgba(226,88,34,.10)}
.flame-btn.on .cp-ico .solid{fill:#E25822;stroke:#E25822}
@keyframes cons-pulsa{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-6deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1)}}
.flame-btn.celebra .cp-ico{animation:cons-pulsa .9s ease 3}
.flame-btn.celebra{box-shadow:0 0 0 3px rgba(226,88,34,.25)}

.cons-topo{display:flex;align-items:center;gap:16px}
.cons-fogo{width:64px;height:64px;border-radius:50%;background:var(--track);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cons-fogo .cp-ico{width:34px;height:34px;color:var(--muted)}
.cons-fogo.on{background:rgba(226,88,34,.14)}
.cons-fogo.on .cp-ico{color:#E25822}.cons-fogo.on .cp-ico .solid{fill:#E25822;stroke:#E25822}
.cons-n{font-family:var(--font-head);font-size:30px;font-weight:900;line-height:1.1}
.cons-n span{font-size:15px;font-weight:600;color:var(--muted)}
.cons-passes{font-size:16px;letter-spacing:2px;margin:0 6px}
.passe-vago{opacity:.25;filter:grayscale(1)}

/* mapa de calor (estilo GitHub): colunas = semanas, linhas = seg→dom */
.cal-mapa{display:flex;gap:3px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cal-mapa::-webkit-scrollbar{height:5px}
.cal-mapa::-webkit-scrollbar-track{background:transparent}
.cal-mapa::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.cal-col{display:flex;flex-direction:column;gap:3px}
.cal-d{width:13px;height:13px;border-radius:3px;background:var(--track);flex-shrink:0}
.cal-d.vazio{background:transparent}
.cal-d.n1{background:#CDE3C1}.cal-d.n2{background:#8FBF7F}.cal-d.n3{background:#4E8E4E}.cal-d.n4{background:#1B4332}
body.dark .cal-d.n1{background:#2E4A33}body.dark .cal-d.n2{background:#3F6E46}
body.dark .cal-d.n3{background:#5A9E63}body.dark .cal-d.n4{background:#8FD69B}
.cal-d.gelo{background:#8FC6E8}
.cal-d.hoje{outline:2px solid var(--dourado);outline-offset:1px}
.cal-legenda{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;color:var(--muted)}

/* emblemas */
.emb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.emb{border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;opacity:.45;filter:grayscale(1);background:var(--panel-2)}
.emb.ganho{opacity:1;filter:none;box-shadow:var(--shadow)}
.emb-ico{font-size:20px}.emb-ico .cp-ico{width:22px;height:22px}
.emb-nome{font-weight:700;font-size:12.5px;margin-top:4px}
.emb-dias{font-size:11px;color:var(--muted)}
.emb-bronze.ganho{border-color:#B0703A;background:rgba(176,112,58,.12)}.emb-bronze.ganho .emb-ico{color:#B0703A}
.emb-prata.ganho{border-color:#9BA3AD;background:rgba(155,163,173,.14)}.emb-prata.ganho .emb-ico{color:#8A93A0}
.emb-ouro.ganho{border-color:var(--dourado);background:var(--teal-soft)}.emb-ouro.ganho .emb-ico{color:var(--dourado)}
.emb-platina.ganho{border-color:#7FB6C4;background:rgba(127,182,196,.14)}.emb-platina.ganho .emb-ico{color:#5C99A8}
.emb-mestre.ganho{border-color:#7D5BA6;background:rgba(125,91,166,.14)}.emb-mestre.ganho .emb-ico{color:#7D5BA6}
.emb-desafiante1.ganho,.emb-desafiante2.ganho,.emb-desafiante3.ganho{border-color:#C0392B;background:rgba(192,57,43,.10)}
.emb-desafiante1.ganho .emb-ico,.emb-desafiante2.ganho .emb-ico,.emb-desafiante3.ganho .emb-ico{color:#C0392B}
.emb-pro.ganho{border-color:var(--txt);background:var(--track)}.emb-pro.ganho .emb-ico{color:var(--txt)}
.emb .emb-ico .solid{fill:currentColor;stroke:currentColor}

/* tag VIP (emblema mais alto) — aparece nos rankings e no perfil */
.tag-vip{display:inline-block;background:var(--teal-soft);color:var(--teal);border:1px solid var(--teal);
  border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;margin-left:6px;vertical-align:middle}

/* Mentoria Pro (aluno): barras fixas (não recolhíveis) em verde claro, só pra destacar */
.mentoria-secao{background:var(--green-soft);border:1px solid var(--green);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.mentoria-secao .section-title{color:var(--green)}

/* Mentorados (Gestão > Mentoria Pro): grade de cartões pequenos lado a lado */
.ment-grid{display:flex;flex-wrap:wrap;gap:10px}
.ment-card{width:132px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;cursor:pointer;transition:box-shadow .15s ease}
.ment-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.ment-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary-d);margin-bottom:2px}
.ment-nome{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ment-acoes{display:flex;gap:6px;margin-top:6px;width:100%}
.ment-acoes .btn{flex:1;padding:4px 6px;font-size:11px}
.ment-msg{background:none;border:1px solid var(--line);border-radius:8px;width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.ment-msg:hover{color:var(--txt);border-color:var(--txt)}
.ment-msg .cp-ico{width:14px;height:14px}

/* Modo mentor (admin "dentro" da sessão de um aluno) */
body.modo-mentor .sidebar,body.modo-mentor .flame-btn,body.modo-mentor #chatBtn,body.modo-mentor .user,body.modo-mentor .menu-toggle{display:none}
body.modo-mentor #appRoot{margin-top:46px}
.banner-mentor{display:none;position:fixed;top:0;left:0;right:0;height:46px;z-index:200;background:var(--verde);color:#fff;
  align-items:center;gap:14px;padding:0 18px;font-size:12.5px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.banner-mentor b{font-weight:700}
.nav-mentor{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-mentor button{background:rgba(255,255,255,.14);border:none;color:#fff;padding:5px 10px;border-radius:8px;font-size:12px;cursor:pointer}
.nav-mentor button.on{background:#fff;color:var(--verde);font-weight:700}
.sair-mentor{background:var(--dourado);color:#1B1B1B;border:none;padding:6px 12px;border-radius:8px;font-weight:700;font-size:12px;cursor:pointer;flex-shrink:0}

/* balão de rankings (canto direito do Início) */
.cons-balao{position:fixed;right:16px;top:78px;width:236px;max-height:calc(100vh - 96px);overflow-y:auto;z-index:15;
  background:var(--panel);border:1px solid var(--line);border-top:3px double var(--dourado);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 14px;animation:cp-pop .24s ease both}
.cons-balao::before{content:"";position:absolute;top:-9px;right:26px;width:14px;height:14px;background:var(--panel);
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
#content.com-balao{padding-right:270px}
.rk-bloco+.rk-bloco{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.rk-bloco h4{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dourado);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.rk-bloco h4 .cp-ico{width:14px;height:14px;color:#E25822}.rk-bloco h4 .cp-ico .solid{fill:#E25822;stroke:#E25822}
.rk-linha{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;min-width:0}
.rk-pos{width:16px;text-align:right;color:var(--muted);font-weight:700;font-size:11px;flex-shrink:0}
.rk-foto{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--primary-soft)}
.rk-inic{display:inline-flex;align-items:center;justify-content:center;color:var(--primary-d);font-weight:700;font-size:12px}
.rk-linha{cursor:pointer;border-radius:8px}
.rk-linha:hover{background:var(--primary-soft)}
.rk-nome{flex:1;min-width:0;display:flex;align-items:center;gap:5px}
.rk-nome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-emb{display:inline-flex;flex-shrink:0;font-size:12px;line-height:1}
.rk-emb .cp-ico{width:13px;height:13px}
.rk-emb .cp-ico .solid,.rk-emb .cp-ico{fill:currentColor;stroke:currentColor;color:inherit}
.rke-bronze{color:#B0703A}.rke-prata{color:#8A93A0}.rke-ouro{color:var(--dourado)}
.rke-platina{color:#5C99A8}.rke-mestre{color:#7D5BA6}
.rke-desafiante1,.rke-desafiante2,.rke-desafiante3{color:#C0392B}
.rke-pro{color:var(--txt)}
.rk-val{font-weight:700;font-size:11.5px;color:var(--muted);flex-shrink:0}
@media (max-width:1180px){
  .cons-balao{position:static;width:auto;max-height:none;margin:0 0 16px;order:-1}
  .cons-balao::before{display:none}
  #content.com-balao{padding-right:0}
}

/* Campo de formulário no celular: 16px é o piso.
   O Safari do iPhone dá zoom sozinho ao focar um campo com fonte MENOR que 16px
   e não desfaz depois: a partir dali toda a navegação fica torta, com a barra
   lateral e os botões fora do lugar. O desktop segue nos 14px da escala.
   Fica no FIM do arquivo de propósito: regras como .chat-filtros usam a
   abreviação `font:inherit`, que zera o tamanho e venceria por vir depois. */
@media(max-width:880px){
  input,select,textarea,.mini{font-size:16px}
  .chat-filtros input,.chat-filtros select,.nota textarea,.chat-input textarea,.chat-input input{font-size:16px}
}