/* ============================================================
   PAINEL META 150 — TCE-GO / B02 Tecnologia da Informação
   ============================================================ */

:root{
  --bg:#0d1117; --bg2:#151b23; --bg3:#1c232c; --bg4:#242c37;
  --linha:#2b3441; --linha2:#3a4553;
  --txt:#e6edf3; --txt2:#a5b1c0; --txt3:#6e7c8c;
  --azul:#3b82f6; --azul2:#1d4ed8; --azulsuave:#3b82f61a;
  --verde:#22c55e; --verdesuave:#22c55e1a;
  --ambar:#f59e0b; --ambarsuave:#f59e0b1a;
  --vermelho:#ef4444; --vermelhosuave:#ef44441a;
  --roxo:#a855f7; --roxosuave:#a855f71a;
  --ciano:#06b6d4;
  --r:12px; --r2:16px;
  --sombra:0 4px 16px #0006;
  --fonte:-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:"Cascadia Code",Consolas,"Courier New",monospace;
}
html[data-tema="claro"]{
  --bg:#f6f8fb; --bg2:#ffffff; --bg3:#eef2f7; --bg4:#e2e8f0;
  --linha:#dde4ed; --linha2:#c6d0dd;
  --txt:#131922; --txt2:#4a5768; --txt3:#7c8899;
  --azulsuave:#3b82f614; --verdesuave:#22c55e14; --ambarsuave:#f59e0b14;
  --vermelhosuave:#ef444414; --roxosuave:#a855f714;
  --sombra:0 2px 10px #0f172a12;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte); background:var(--bg); color:var(--txt);
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:15px;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--linha2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--txt3)}

/* ---------- ESTRUTURA ---------- */
.app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}

.lateral{
  background:var(--bg2);border-right:1px solid var(--linha);
  padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
}
.marca{padding:6px 10px 18px;border-bottom:1px solid var(--linha);margin-bottom:12px}
.marca h1{font-size:19px;font-weight:800;letter-spacing:-.4px;display:flex;align-items:center;gap:9px}
.marca h1 .ico{color:var(--azul)}
.marca .sub{font-size:11.5px;color:var(--txt3);margin-top:3px;font-weight:500;letter-spacing:.2px}
.marca .badge{
  display:inline-block;margin-top:9px;font-size:10.5px;font-weight:700;
  background:var(--azulsuave);color:var(--azul);padding:3px 9px;border-radius:20px;
  border:1px solid #3b82f633;
}
.navitem{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  color:var(--txt2);font-weight:600;font-size:14px;transition:.14s;width:100%;text-align:left;
}
.navitem:hover{background:var(--bg3);color:var(--txt)}
.navitem.ativo{background:var(--azulsuave);color:var(--azul)}
.navitem .ic{display:grid;place-items:center;width:22px;flex-shrink:0;opacity:.85}
.navitem.ativo .ic{opacity:1}
.navitem .cnt{margin-left:auto;font-size:11px;background:var(--bg4);color:var(--txt3);padding:1px 7px;border-radius:20px;font-weight:700}
.navitem.ativo .cnt{background:#3b82f626;color:var(--azul)}
.nav-sep{font-size:10.5px;font-weight:800;color:var(--txt3);letter-spacing:1.1px;padding:16px 12px 6px;text-transform:uppercase}
.rodape-lat{margin-top:auto;padding-top:16px;border-top:1px solid var(--linha);font-size:11.5px;color:var(--txt3)}

.principal{padding:26px 36px 72px;width:100%;max-width:1680px;margin:0 auto;min-width:0}
@media(min-width:1900px){.principal{padding:30px 56px 80px}}
.topo{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.topo h2{font-size:26px;font-weight:800;letter-spacing:-.6px}
.topo p{color:var(--txt2);font-size:14px;margin-top:3px}

/* ---------- ÍCONES (Lucide, SVG inline) ---------- */
.ico{display:inline-block;vertical-align:-.18em;flex-shrink:0;stroke-width:2}
.ico-cx{display:grid;place-items:center;border-radius:9px;flex-shrink:0}
h2 .ico,h3 .ico,h4 .ico{vertical-align:-.14em}
.btn .ico{stroke-width:2.2}

/* ---------- COMPONENTES ---------- */
.cartao{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--r2);padding:20px}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media(max-width:1400px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow:visible}
  .marca{width:100%;border-bottom:none;padding-bottom:8px}
  .nav-sep{display:none}
  .navitem{width:auto}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
  .principal{padding:18px 16px 60px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:9px;font-weight:700;font-size:13.5px;
  background:var(--bg3);color:var(--txt);border:1px solid var(--linha);transition:.14s;
}
.btn:hover{background:var(--bg4);border-color:var(--linha2)}
.btn-p{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-p:hover{background:var(--azul2);border-color:var(--azul2)}
.btn-v{background:var(--verde);color:#052e16;border-color:var(--verde)}
.btn-v:hover{filter:brightness(1.1)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.t-azul{background:var(--azulsuave);color:var(--azul)}
.t-verde{background:var(--verdesuave);color:var(--verde)}
.t-ambar{background:var(--ambarsuave);color:var(--ambar)}
.t-verm{background:var(--vermelhosuave);color:var(--vermelho)}
.t-roxo{background:var(--roxosuave);color:var(--roxo)}
.t-cinza{background:var(--bg3);color:var(--txt3)}

.barra{height:8px;background:var(--bg4);border-radius:20px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:20px;background:var(--azul);transition:width .5s cubic-bezier(.4,0,.2,1)}
.barra.v i{background:var(--verde)}
.barra.a i{background:var(--ambar)}

/* ---------- PAINEL / HOME ---------- */
.hero{
  background:linear-gradient(135deg,#1e3a8a 0%,#312e81 55%,#4c1d95 100%);
  border-radius:var(--r2);padding:26px 28px;color:#fff;position:relative;overflow:hidden;
  border:1px solid #ffffff14;
}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:#ffffff0f}
.hero h3{font-size:14px;font-weight:700;opacity:.82;letter-spacing:.4px;text-transform:uppercase}
.contador{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1}
.contador div{text-align:center}
.contador b{display:block;font-size:42px;font-weight:900;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.contador span{font-size:11px;opacity:.78;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.hero-info{margin-top:18px;font-size:13px;opacity:.9;position:relative;z-index:1;line-height:1.75}

.kpi{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--r);padding:16px 18px}
.kpi{display:flex;flex-direction:column;justify-content:center}
.kpi .rot{font-size:11.5px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:7px}
.kpi .rot .ico{color:var(--azul);opacity:.95}
.kpi .val{font-size:30px;font-weight:900;margin:6px 0 2px;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.kpi .obs{font-size:12px;color:var(--txt2)}

.tarefa{
  display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:10px;
  background:var(--bg3);border:1px solid var(--linha);margin-bottom:9px;transition:.14s;
}
.tarefa:hover{border-color:var(--linha2)}
.tarefa.feita{opacity:.5}
.tarefa.feita .tt{text-decoration:line-through}
.chk{
  width:21px;height:21px;border-radius:6px;border:2px solid var(--linha2);flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;transition:.14s;
}
.chk:hover{border-color:var(--azul)}
.chk.on{background:var(--verde);border-color:var(--verde)}
.tarefa .tt{font-weight:650;font-size:14px}
.tarefa .td{font-size:12.5px;color:var(--txt3);margin-top:2px}

/* ---------- PLANO ---------- */
.fase{border-left:3px solid var(--azul);padding:2px 0 2px 16px;margin-bottom:22px}
.fase h4{font-size:16px;font-weight:800}
.fase p{font-size:13px;color:var(--txt2);margin-top:3px}
.dia{
  background:var(--bg2);border:1px solid var(--linha);border-radius:11px;padding:14px 16px;margin-bottom:10px;
}
.dia.hoje{border-color:var(--azul);box-shadow:0 0 0 3px var(--azulsuave)}
.dia.passado{opacity:.62}
.dia-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;flex-wrap:wrap}
.dia-data{font-weight:800;font-size:14px;display:flex;align-items:center;gap:9px}
.dia-num{font-size:11px;color:var(--txt3);font-weight:700}
.dia-corpo{margin-top:13px;padding-top:13px;border-top:1px solid var(--linha)}

/* ---------- AULAS ---------- */
.disc{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.disc-cab{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;transition:.14s}
.disc-cab:hover{background:var(--bg3)}
.disc-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.disc-cab h4{font-size:15.5px;font-weight:750}
.disc-cab .met{font-size:12px;color:var(--txt3);margin-top:2px}
.disc-prog{width:130px;flex-shrink:0}
.disc-lista{border-top:1px solid var(--linha);padding:8px}
.aula-item{
  display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:8px;cursor:pointer;transition:.14s;
}
.aula-item:hover{background:var(--bg3)}
.aula-item .nu{font-size:11.5px;color:var(--txt3);font-weight:800;width:34px;flex-shrink:0;font-variant-numeric:tabular-nums}
.aula-item .no{font-size:14px;font-weight:600;flex:1}
.aula-item.ok .no{color:var(--txt3)}

.leitura{max-width:900px}
.leitura h3{font-size:24px;font-weight:850;letter-spacing:-.5px;margin-bottom:6px}
.leitura .meta-aula{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.artigo{font-size:15.5px;line-height:1.82;color:var(--txt)}
.artigo h4{font-size:19px;font-weight:800;margin:32px 0 12px;letter-spacing:-.3px;padding-bottom:7px;border-bottom:1px solid var(--linha)}
.artigo h5{font-size:15.5px;font-weight:750;margin:24px 0 8px;color:var(--txt)}
.artigo p{margin-bottom:14px}
.artigo ul,.artigo ol{margin:0 0 15px 22px}
.artigo li{margin-bottom:7px}
.artigo strong{font-weight:750;color:var(--txt)}
.artigo code{
  font-family:var(--mono);font-size:13px;background:var(--bg3);color:var(--ciano);
  padding:1.5px 6px;border-radius:5px;border:1px solid var(--linha);
}
.artigo pre{
  background:var(--bg3);border:1px solid var(--linha);border-radius:10px;padding:15px 17px;
  overflow-x:auto;margin:0 0 16px;font-family:var(--mono);font-size:13px;line-height:1.65;
}
.artigo pre code{background:none;border:none;padding:0;color:var(--txt)}
.artigo table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;display:block;overflow-x:auto}
.artigo th,.artigo td{border:1px solid var(--linha);padding:9px 12px;text-align:left;vertical-align:top}
.artigo th{background:var(--bg3);font-weight:750;font-size:13px}
.artigo blockquote{border-left:3px solid var(--linha2);padding-left:16px;color:var(--txt2);margin:0 0 15px;font-style:italic}

.caixa{border-radius:11px;padding:15px 18px;margin:0 0 18px;border:1px solid;font-size:14.5px;line-height:1.72}
.caixa .cx-tit{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.caixa .cx-tit::before{content:"";width:17px;height:17px;flex-shrink:0;background-repeat:no-repeat;background-size:17px 17px}
.cx-analogia{background:var(--roxosuave);border-color:#a855f733}
.cx-analogia .cx-tit{color:var(--roxo)}
.cx-chave{background:var(--azulsuave);border-color:#3b82f633}
.cx-chave .cx-tit{color:var(--azul)}
.cx-pegadinha{background:var(--ambarsuave);border-color:#f59e0b33}
.cx-pegadinha .cx-tit{color:var(--ambar)}
.cx-alerta{background:var(--vermelhosuave);border-color:#ef444433}
.cx-alerta .cx-tit{color:var(--vermelho)}
.cx-decoreba{background:var(--verdesuave);border-color:#22c55e33}
.cx-decoreba .cx-tit{color:var(--verde)}
.caixa ul{margin:8px 0 0 20px}
.caixa li{margin-bottom:5px}
.caixa p:last-child{margin-bottom:0}

/* ---------- QUESTÕES ---------- */
.questao{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--r2);padding:22px 24px;margin-bottom:16px}
.q-cab{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.q-enun{font-size:15.5px;line-height:1.78;margin-bottom:18px}
.q-enun strong{font-weight:750}
.q-enun code{font-family:var(--mono);font-size:13px;background:var(--bg3);color:var(--ciano);padding:1.5px 6px;border-radius:5px}
.q-enun pre{background:var(--bg3);border:1px solid var(--linha);border-radius:9px;padding:13px 15px;overflow-x:auto;margin:12px 0;font-family:var(--mono);font-size:13px}
.alt{
  display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border-radius:10px;
  border:1.5px solid var(--linha);margin-bottom:9px;cursor:pointer;transition:.14s;background:var(--bg3);
}
.alt:hover{border-color:var(--linha2)}
.alt.sel{border-color:var(--azul);background:var(--azulsuave)}
.alt.certa{border-color:var(--verde);background:var(--verdesuave)}
.alt.errada{border-color:var(--vermelho);background:var(--vermelhosuave)}
.alt .letra{
  width:25px;height:25px;border-radius:50%;background:var(--bg4);display:grid;place-items:center;
  font-weight:800;font-size:12.5px;flex-shrink:0;
}
.alt.certa .letra{background:var(--verde);color:#052e16}
.alt.errada .letra{background:var(--vermelho);color:#fff}
.alt.sel .letra{background:var(--azul);color:#fff}
.alt .txt{font-size:14.5px;line-height:1.62;flex:1}
.alt .txt code{font-family:var(--mono);font-size:12.5px;color:var(--ciano)}
.gabarito{margin-top:16px;padding:16px 18px;border-radius:11px;background:var(--bg3);border:1px solid var(--linha)}
.gabarito .gt{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.gabarito .gc{font-size:14.5px;line-height:1.75;color:var(--txt2)}
.gabarito .gc strong{color:var(--txt)}
.gabarito .gc code{font-family:var(--mono);font-size:12.5px;color:var(--ciano)}

/* ---------- VÍDEOS ---------- */
.vid{
  background:var(--bg2);border:1px solid var(--linha);border-radius:var(--r);padding:16px 18px;
  display:flex;gap:14px;align-items:flex-start;transition:.14s;
}
.vid:hover{border-color:var(--linha2);transform:translateY(-1px)}
.vid-ico{width:42px;height:30px;border-radius:7px;background:#ff0000;display:grid;place-items:center;flex-shrink:0;color:#fff;font-size:14px}
.vid h5{font-size:14.5px;font-weight:700;margin-bottom:3px}
.vid p{font-size:12.5px;color:var(--txt3);line-height:1.6}
.vid .canais{font-size:12px;color:var(--txt2);margin-top:7px}

/* ---------- FLASHCARD ---------- */
.card-flip{
  min-height:230px;background:var(--bg2);border:1.5px solid var(--linha);border-radius:var(--r2);
  padding:34px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;transition:.16s;
}
.card-flip:hover{border-color:var(--azul)}
.card-flip .frente{font-size:20px;font-weight:750;line-height:1.55}
.card-flip .verso{font-size:15.5px;line-height:1.75;color:var(--txt2);margin-top:20px;padding-top:20px;border-top:1px solid var(--linha);width:100%}
.card-flip .dica{font-size:12px;color:var(--txt3);margin-top:18px}

/* ---------- MISC ---------- */
.vazio{text-align:center;padding:60px 20px;color:var(--txt3)}
.vazio .em{margin-bottom:12px;opacity:.45;display:flex;justify-content:center}
.sel-input,.txt-input{
  background:var(--bg3);border:1px solid var(--linha);border-radius:8px;padding:8px 12px;
  color:var(--txt);font-family:inherit;font-size:13.5px;
}
.sel-input:focus,.txt-input:focus{outline:none;border-color:var(--azul)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:6px 14px;border-radius:20px;background:var(--bg3);border:1px solid var(--linha);font-size:13px;font-weight:650;transition:.14s}
.chip:hover{border-color:var(--linha2)}
.chip.on{background:var(--azulsuave);border-color:var(--azul);color:var(--azul)}
.barrinha{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.barrinha .nm{font-size:13px;font-weight:650;width:240px;flex-shrink:0;display:flex;align-items:center;gap:8px;min-width:0}
.barrinha .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrinha .bb{flex:1}
.barrinha .pc{font-size:12.5px;font-weight:800;width:58px;text-align:right;color:var(--txt2);font-variant-numeric:tabular-nums}
@media(max-width:600px){.barrinha .nm{width:130px;font-size:12px}}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--bg4);border:1px solid var(--linha2);color:var(--txt);
  padding:12px 22px;border-radius:11px;font-weight:700;font-size:14px;
  box-shadow:var(--sombra);transition:.32s cubic-bezier(.4,0,.2,1);z-index:999;
}
.toast.on{transform:translateX(-50%) translateY(0)}

.anel{transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:9;stroke-linecap:round}
.anel .fundo{stroke:var(--bg4)}
.anel .frente{stroke:var(--azul);transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.anel-wrap{position:relative;display:grid;place-items:center}
.anel-txt{position:absolute;text-align:center}
.anel-txt b{font-size:25px;font-weight:900;letter-spacing:-1px;display:block;line-height:1}
.anel-txt span{font-size:10.5px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.6px}

/* ícones dos avisos dentro das aulas (Lucide) */
.cx-analogia .cx-tit::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a855f7%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16.24%207.76-1.804%205.411a2%202%200%200%201-1.265%201.265L7.76%2016.24l1.804-5.411a2%202%200%200%201%201.265-1.265z%22%2F%3E%3C%2Fsvg%3E")}
.cx-chave .cx-tit::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m2%2021%209.6-9.6%22%2F%3E%3Cpath%20d%3D%22m7.5%2015.5%202.3%202.3a1%201%200%200%201%200%201.4l-2.1%202.1a1%201%200%200%201-1.4%200L4%2019%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%227.5%22%20r%3D%225.5%22%2F%3E%3C%2Fsvg%3E")}
.cx-pegadinha .cx-tit::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f59e0b%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E")}
.cx-alerta .cx-tit::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ef4444%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016h.01%22%2F%3E%3Cpath%20d%3D%22M12%208v4%22%2F%3E%3Cpath%20d%3D%22M15.312%202a2%202%200%200%201%201.414.586l4.688%204.688A2%202%200%200%201%2022%208.688v6.624a2%202%200%200%201-.586%201.414l-4.688%204.688a2%202%200%200%201-1.414.586H8.688a2%202%200%200%201-1.414-.586l-4.688-4.688A2%202%200%200%201%202%2015.312V8.688a2%202%200%200%201%20.586-1.414l4.688-4.688A2%202%200%200%201%208.688%202z%22%2F%3E%3C%2Fsvg%3E")}
.cx-decoreba .cx-tit::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2322c55e%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.801%2010A10%2010%200%201%201%2017%203.335%22%2F%3E%3Cpath%20d%3D%22m9%2011%203%203L22%204%22%2F%3E%3C%2Fsvg%3E")}

/* ---------- COMPONENTES NOVOS (ícones + preenchimento do layout) ---------- */
.ico-azul{color:var(--azul)}
.ico-verde{color:var(--verde)}
.ico-ambar{color:var(--ambar)}
.ico-roxo{color:var(--roxo)}
.ico-verm{color:var(--vermelho)}

.tit-cartao{font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px;letter-spacing:-.2px}
.cel-ico{display:inline-flex;align-items:center;gap:7px}
.chip{display:inline-flex;align-items:center;gap:7px}

/* Coluna lateral do painel: anel + estatísticas rápidas */
.lado{display:flex;flex-direction:column;align-items:center;gap:15px}
.lado-anel{position:relative;display:grid;place-items:center;margin-top:2px}
.lado-anel .anel-txt{position:absolute}
.lado-stats{width:100%;margin-top:auto;padding-top:15px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:9px}
.mini-stat{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--txt2)}
.mini-stat .ms-rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-stat b{font-size:15px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}

/* Atalhos do painel */
.atalho{text-align:left;display:flex;gap:14px;align-items:center;cursor:pointer;transition:.14s}
.atalho:hover{border-color:var(--linha2);transform:translateY(-1px)}
.atalho-seta{color:var(--txt3);display:flex;transition:.14s}
.atalho:hover .atalho-seta{color:var(--azul);transform:translateX(3px)}

/* Listas de barras em 2 colunas quando há espaço */
.colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:0 32px}

/* Botões de avaliação do flashcard */
.btn-nota{flex-direction:column;gap:3px;padding:11px 12px;line-height:1.4}
.btn-nota span{display:flex;align-items:center;gap:7px}
.btn-nota small{font-weight:500;opacity:.72;font-size:11.5px}

/* Tela de aula: leitura + trilha lateral da disciplina */
.aula-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start;max-width:1340px}
.aula-layout .leitura{max-width:none}
.aula-lado{position:sticky;top:22px}
.aula-lado .cartao{padding:17px 18px}
.trilha{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto;margin:0 -6px}
.trilha-item{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:8px 9px;border-radius:8px;font-size:13px;color:var(--txt2);transition:.14s;line-height:1.45}
.trilha-item:hover{background:var(--bg3);color:var(--txt)}
.trilha-item.atual{background:var(--azulsuave);color:var(--azul);font-weight:700}
.trilha-item.feita .tr-no{color:var(--txt3)}
.trilha-item .tr-nu{font-size:11px;font-weight:800;width:20px;flex-shrink:0;color:var(--txt3);display:flex;justify-content:center;padding-top:1px}
.trilha-item.feita .tr-nu{color:var(--verde)}
.trilha-item.atual .tr-nu{color:var(--azul)}
@media(max-width:1240px){
  .aula-layout{grid-template-columns:1fr}
  .aula-lado{position:static}
  .trilha{max-height:none}
}

/* ============================================================
   MODO FOCO — leitura limpa (só na tela de aula)
   Ativado por App.trocarFoco() -> <html data-foco="1">
   ============================================================ */
.aula-topo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
kbd{
  font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 5px;margin-left:3px;
  border-radius:5px;background:var(--bg4);border:1px solid var(--linha2);color:var(--txt3);
}

/* Paleta mais suave: menos contraste, menos brilho */
html[data-foco]{
  --bg:#0f1319; --bg2:#141a22; --bg3:#181f28; --bg4:#222a34;
  --linha:#232b36; --linha2:#333d4a;
  --txt:#dde5ef; --txt2:#97a4b3;
}
html[data-foco][data-tema="claro"]{
  --bg:#faf7f1; --bg2:#fffdf9; --bg3:#f3ede2; --bg4:#e8e0d2;
  --linha:#e9e1d3; --linha2:#d6cbb8;
  --txt:#232019; --txt2:#5c5447; --txt3:#8b8172;
}

/* Some tudo que não é o texto */
html[data-foco] .lateral,
html[data-foco] .aula-lado,
html[data-foco] .aula-topo,
html[data-foco] .bloco-video{display:none}
html[data-foco] .app{grid-template-columns:minmax(0,1fr)}
html[data-foco] .principal{padding:98px 20px 120px;max-width:none}
html[data-foco] .aula-layout{grid-template-columns:minmax(0,1fr);max-width:none;gap:0}
html[data-foco] .aula-layout .leitura{max-width:var(--leitura-larg,70ch);margin:0 auto}

/* Tipografia de leitura — tamanho vem de --leitura-tam (botões A- / A+) */
html[data-foco] .leitura h3{font-size:calc(var(--leitura-tam) + 13px);line-height:1.22;margin-bottom:12px}
html[data-foco] .leitura .meta-aula{opacity:.6;margin-bottom:26px}
html[data-foco] .artigo{font-size:var(--leitura-tam);line-height:1.95}
html[data-foco] .artigo p{margin-bottom:19px}
html[data-foco] .artigo li{margin-bottom:9px}
html[data-foco] .artigo h4{font-size:calc(var(--leitura-tam) + 4px);margin:46px 0 15px}
html[data-foco] .artigo h5{font-size:calc(var(--leitura-tam) + 1px);margin:30px 0 10px}
html[data-foco] .artigo table,
html[data-foco] .artigo pre,
html[data-foco] .artigo code{font-size:calc(var(--leitura-tam) - 3px)}
html[data-foco] .caixa{font-size:calc(var(--leitura-tam) - 1px);line-height:1.9;padding:18px 20px;margin-bottom:22px}
html[data-foco] .cartao{background:transparent}

/* Barra flutuante do modo foco */
.foco-barra{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:16px;
  padding:11px 22px;border-bottom:1px solid var(--linha);
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);
  opacity:.4;transition:opacity .22s;
}
.foco-barra:hover,.foco-barra:focus-within{opacity:1}
.fb-tit{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.fb-tit span{min-width:0}
.fb-tit b{display:block;font-size:13.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-tit small{display:block;font-size:11.5px;color:var(--txt3)}
.fb-acoes{display:flex;gap:7px;align-items:center;flex-shrink:0}
.fb-a{min-width:38px;padding:6px 9px}
.foco-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.foco-prog i{display:block;height:100%;width:0;background:var(--azul);transition:width .12s linear}

@media(max-width:820px){
  html[data-foco] .principal{padding:86px 14px 90px}
  .foco-barra{padding:9px 13px;gap:10px}
  .fb-tit small{display:none}
}

/* Impressão: só o texto da aula */
@media print{
  .lateral,.aula-lado,.aula-topo,.foco-barra,.toast,.bloco-video,.btn,.trilha{display:none!important}
  .app{display:block}
  .principal{padding:0;max-width:none}
  .aula-layout{display:block}
  .artigo{font-size:11.5pt;line-height:1.6}
}