/* ============================================================
   Distribuída — guia de estudo INE5418
   Design system: dark, acento emerald. Herda a linguagem do
   site de replicação do Grupo 17 (index.html), expandida para
   curso completo: nav de módulos, lições, exercícios, simulados.
   ============================================================ */
:root{
  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono','JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --r-card:14px; --r-input:10px; --r-pill:999px; --r-chip:8px;
  --maxw:1240px; --content:760px;
  --ease:cubic-bezier(.16,1,.3,1);

  --bg:#0d1014; --bg-grad:#11151b;
  --surface:#161b22; --surface-2:#1b212b; --surface-3:#212a35;
  --border:#283039; --border-soft:#20272f;
  --text:#e8eef4; --text-dim:#9fb0c0; --text-dimmer:#8595a4;
  --accent:#3ddc97; --accent-press:#33c386; --accent-soft:rgba(61,220,151,.12); --accent-line:rgba(61,220,151,.32);
  --on-accent:#06150e;
  --role-client:#9aa6b4; --role-client-bg:rgba(154,166,180,.14);
  --role-leader:#f6b24c; --role-leader-bg:rgba(246,178,76,.14);
  --role-replica:#6ea8fe; --role-replica-bg:rgba(110,168,254,.14);
  --danger:#ff6b6b; --danger-bg:rgba(255,107,107,.13);
  --warn:#f6b24c; --warn-bg:rgba(246,178,76,.12);
  --good:#3ddc97; --good-bg:rgba(61,220,151,.12);
  --purple:#b38bf6; --purple-bg:rgba(179,139,246,.13);
  --shadow:0 18px 50px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --shadow-soft:0 8px 26px rgba(0,0,0,.36);
  --code-bg:#0b0e12;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent}
/* scrollbar global, no estilo do site (nao a do Chrome) */
::-webkit-scrollbar{width:14px; height:14px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:999px; border:4px solid var(--bg); background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent-press)}
::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-weight:400; line-height:1.7;
  font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 80% -8%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 600px at -6% 10%, var(--role-replica-bg), transparent 55%),
    linear-gradient(180deg, var(--bg-grad), var(--bg) 42%);
  opacity:.9;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.14; letter-spacing:-.02em; color:var(--text)}
::selection{background:var(--accent); color:var(--on-accent)}

#progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--accent-press), var(--accent)); box-shadow:0 0 12px var(--accent-line)}

/* ---------------- HEADER ---------------- */
header.top{position:sticky; top:0; z-index:120; backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--border-soft)}
.top-in{max-width:var(--maxw); margin:0 auto; padding:0 22px; height:60px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; white-space:nowrap; text-decoration:none}
.brand .glyph{width:28px; height:28px; border-radius:8px; flex:none; background:var(--accent-soft); border:1px solid var(--accent-line); display:grid; place-items:center; color:var(--accent); font-size:15px}
.brand b{font-weight:700}
.brand .sub{color:var(--text-dimmer); font-weight:400; font-size:12.5px; font-family:var(--font-mono)}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.top-progress{font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim)}
.top-progress b{color:var(--accent)}
.icon-btn{width:36px; height:36px; flex:none; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; display:grid; place-items:center; transition:all .2s; font-size:15px}
.icon-btn:hover{color:var(--accent); border-color:var(--accent-line)}
#menuBtn{display:none}

/* ---------------- HERO ---------------- */
.hero{max-width:var(--maxw); margin:0 auto; padding:72px 22px 40px}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:6px 13px; border-radius:var(--r-pill); margin-bottom:22px}
.hero h1{font-size:clamp(2.4rem,5vw,3.7rem); margin:0 0 16px; max-width:18ch}
.hero h1 i{font-style:italic; color:var(--accent); font-weight:600}
.hero .lead{font-size:1.16rem; color:var(--text-dim); max-width:60ch; margin:0 0 26px}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-bottom:34px}
.btn{font-family:var(--font-sans); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; padding:12px 21px; border-radius:var(--r-pill); border:1px solid transparent; display:inline-flex; align-items:center; gap:9px; transition:transform .18s var(--ease), background .2s, border-color .2s}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 8px 24px var(--accent-line)}
.btn-primary:hover{background:var(--accent-press); transform:translateY(-2px)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent-line); color:var(--accent); transform:translateY(-2px)}
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.how .step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:18px}
.how .step .n{font-family:var(--font-mono); color:var(--accent); font-size:13px; font-weight:600}
.how .step h4{margin:8px 0 5px; font-size:1.02rem}
.how .step p{margin:0; font-size:14px; color:var(--text-dim)}

/* ---------------- LAYOUT DOCS ---------------- */
.layout{max-width:var(--maxw); margin:0 auto; padding:0 28px 120px; display:grid; grid-template-columns:256px minmax(0,1fr); gap:52px; align-items:start}
nav.toc{position:sticky; top:74px; align-self:start; max-height:calc(100vh - 92px); overflow-y:auto; padding:6px 6px 30px; scrollbar-width:thin}
nav.toc::-webkit-scrollbar{width:6px}
nav.toc::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px}
.toc-mod{margin:18px 0 4px}
.toc-mod:first-child{margin-top:4px}
.toc-mod>.mlabel{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); padding:6px 11px}
.toc-mod>.mlabel .mnum{color:var(--accent)}
nav.toc a{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-dim); text-decoration:none; padding:6px 11px 6px 13px; border-left:2px solid transparent; border-radius:0 7px 7px 0; transition:all .18s; line-height:1.3}
nav.toc a:hover{color:var(--text); background:var(--surface-2)}
nav.toc a.active{color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); font-weight:500}
nav.toc a .tick{width:15px; height:15px; flex:none; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; font-size:9px; color:transparent}
nav.toc a.done .tick{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}

main{min-width:0; max-width:none}
/* badges de prioridade (frequência na prova) */
.prio{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.03em; padding:2px 7px; border-radius:var(--r-pill); flex:none; white-space:nowrap}
.prio.alta{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line)}
.prio.media{background:var(--surface-3); color:var(--text-dim); border:1px solid var(--border)}
.prio.baixa,.prio.base{background:transparent; color:var(--text-dimmer); border:1px solid var(--border-soft)}
nav.toc a .prio{margin-left:auto; font-size:9px; padding:1px 6px}
.lhead .prio{font-size:11px; padding:3px 10px}
/* trilha rápida (pouco tempo) */
.fasttrack{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r-card); padding:18px 20px; margin:6px 0 10px}
.fasttrack h4{margin:0 0 4px; font-size:1.06rem; display:flex; align-items:center; gap:9px}
.fasttrack .ic{color:var(--accent); font-size:15px}
.fasttrack p{margin:0 0 13px; font-size:14px; color:var(--text-dim); max-width:70ch}
.fasttrack .chips{display:flex; flex-wrap:wrap; gap:8px}
.fasttrack .chips a{font-size:13px; text-decoration:none; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); color:var(--text-dim); transition:all .15s; display:inline-flex; align-items:center; gap:7px}
.fasttrack .chips a:hover{border-color:var(--accent-line); color:var(--accent); transform:translateY(-1px)}
.fasttrack .chips a .num{font-family:var(--font-mono); color:var(--accent); font-size:11px}
/* largura de leitura confortável para texto corrido; elementos largos (tabelas, código, widgets, exercícios) usam a coluna toda */
.lesson p, .lesson .examhook, .module-head p, .lesson h4.sub{max-width:74ch}

/* secoes / modulos */
.module-head{padding:48px 0 8px; scroll-margin-top:80px}
.module-head .mtag{display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:4px 11px; border-radius:var(--r-pill); margin-bottom:14px}
.module-head h2{font-size:clamp(1.7rem,3.4vw,2.25rem); margin:0 0 8px}
.module-head p{margin:6px 0 0; color:var(--text-dim); max-width:62ch}

section.lesson{padding:38px 0; border-top:1px solid var(--border-soft); scroll-margin-top:80px}
.lesson .lhead{display:flex; align-items:flex-start; gap:14px; margin-bottom:6px}
.lesson .lhead h3{font-size:1.5rem; margin:0; flex:1}
.lesson .examhook{display:flex; gap:11px; align-items:flex-start; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r-card); padding:12px 15px; margin:14px 0 22px; font-size:14.5px; color:var(--text)}
.lesson .examhook .ic{color:var(--accent); flex:none; font-size:15px; margin-top:1px}

/* blocos de conteudo */
.lesson p{margin:14px 0; color:var(--text-dim)}
.lesson p strong, .lesson li strong, .lesson td strong{color:var(--text); font-weight:600}
.lesson h4.sub{font-size:1.12rem; margin:30px 0 8px; font-family:var(--font-display); font-weight:600; color:var(--text)}
.lesson code{font-family:var(--font-mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--border-soft); padding:2px 6px; border-radius:6px; color:var(--text)}
.term{border-bottom:1.5px dotted var(--accent-line); color:var(--text); font-weight:500; cursor:help}

.callout{display:flex; gap:13px; padding:15px 17px; border-radius:var(--r-card); margin:20px 0; border:1px solid var(--border); background:var(--surface)}
.callout .ic{flex:none; font-size:18px; line-height:1.3; margin-top:1px}
.callout p{margin:0; color:var(--text-dim); font-size:15.5px}
.callout p b{color:var(--text)}
.callout.tip{background:var(--accent-soft); border-color:var(--accent-line)}
.callout.warn{background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 40%, transparent)}
.callout.danger{background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger) 38%, transparent)}
.callout.analogy{background:var(--role-replica-bg); border-color:color-mix(in srgb,var(--role-replica) 34%, transparent)}
.callout.key{background:var(--purple-bg); border-color:color-mix(in srgb,var(--purple) 40%, transparent)}
.callout .lbl{font-weight:700; color:var(--text)}

.tbl{width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; display:block; overflow-x:auto}
.tbl table{width:100%; border-collapse:collapse}
.tbl th{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; text-align:left; color:var(--text-dimmer); padding:12px 15px; background:var(--surface-2); white-space:nowrap}
.tbl td{padding:12px 15px; color:var(--text-dim); vertical-align:top; border-top:1px solid var(--border-soft)}
.tbl td b{color:var(--text)}

pre.code{font-family:var(--font-mono); font-size:13.5px; line-height:1.6; background:var(--code-bg); color:#cdd9e5; border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; margin:20px 0; overflow-x:auto; tab-size:2}
pre.code .cm{color:var(--text-dimmer)}
pre.code .kw{color:var(--accent)}

/* worked example */
.worked{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px; margin:22px 0; box-shadow:var(--shadow-soft)}
.worked .wtag{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:3px 9px; border-radius:var(--r-pill)}
.worked h4{margin:10px 0 4px; font-size:1.06rem; font-family:var(--font-display)}
.worked .wintro{font-size:14.5px; color:var(--text-dim); margin:0 0 12px}
.worked ol{list-style:none; counter-reset:step; padding:0; margin:0}
.worked ol li{counter-increment:step; position:relative; padding:11px 0 11px 42px; border-top:1px solid var(--border-soft); font-size:15px; color:var(--text-dim)}
.worked ol li:first-child{border-top:none}
.worked ol li::before{content:counter(step); position:absolute; left:0; top:11px; width:26px; height:26px; border-radius:8px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-weight:600; font-size:13px; display:grid; place-items:center}
.worked ol li .slab{display:block; font-family:var(--font-mono); font-size:12px; color:var(--text-dimmer); margin-bottom:2px}
.worked ol li b{color:var(--text)}

/* ======= WIDGET shell ======= */
.lab{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px; margin:24px 0; box-shadow:var(--shadow-soft)}
.lab-head{display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap}
.lab-head .tag{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--accent-line)}
.lab-head h4{margin:0; font-family:var(--font-sans); font-size:1.04rem; font-weight:700}
.lab .hint{font-size:13.5px; color:var(--text-dimmer); margin:0 0 14px}
.ctrl-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; flex-wrap:wrap}
.seg button{font-family:var(--font-sans); font-size:13.5px; font-weight:500; border:none; background:transparent; color:var(--text-dim); padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s}
.seg button.on{background:var(--accent); color:var(--on-accent)}
.mini{font-family:var(--font-sans); font-size:13.5px; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface-2); color:var(--text); transition:all .2s; display:inline-flex; align-items:center; gap:7px}
.mini:hover{border-color:var(--accent-line); color:var(--accent)}
.mini.solid{background:var(--accent); color:var(--on-accent); border-color:transparent}
.mini.solid:hover{background:var(--accent-press)}
.mini:disabled{opacity:.4; cursor:not-allowed}
input[type=range]{-webkit-appearance:none; appearance:none; height:5px; border-radius:5px; background:var(--surface-3); outline:none; cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); cursor:pointer}
.slider-block{display:flex; align-items:center; gap:13px; margin:10px 0}
.slider-block label{font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); width:150px; flex:none}
.slider-block .val{font-family:var(--font-mono); font-weight:600; color:var(--accent); width:28px; text-align:right}
.verdict{margin-top:14px; padding:13px 15px; border-radius:11px; font-size:14.5px; border:1px solid var(--border); background:var(--surface-2)}
.verdict.good{background:var(--good-bg); border-color:var(--accent-line); color:var(--text)}
.verdict.bad{background:var(--danger-bg); border-color:color-mix(in srgb,var(--danger) 40%, transparent); color:var(--text)}
.verdict b{color:var(--text)}

/* quorum ring */
.ring{display:flex; flex-wrap:wrap; gap:10px 14px; margin:18px 0 26px; justify-content:center}
.node{width:58px; height:58px; border-radius:13px; display:grid; place-items:center; flex:none; font-family:var(--font-mono); font-size:12px; font-weight:600; background:var(--surface-2); border:2px solid var(--border); color:var(--text-dimmer); position:relative; transition:all .3s var(--ease)}
.node small{position:absolute; bottom:-18px; font-size:10px; color:var(--text-dimmer); font-weight:500}
.node.w{border-color:var(--role-leader); color:var(--role-leader); background:var(--role-leader-bg)}
.node.r{border-color:var(--role-replica); color:var(--role-replica); background:var(--role-replica-bg)}
.node.wr{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

/* space-time grid (lamport / vector) */
.stgrid{margin:14px 0; overflow-x:auto}
.stgrid .procrow{display:flex; align-items:center; gap:10px; margin:18px 0; min-width:520px}
.stgrid .plabel{font-family:var(--font-mono); font-size:13px; color:var(--text-dim); width:34px; flex:none}
.stgrid .line{position:relative; flex:1; height:2px; background:var(--border)}
.stgrid .ev{position:absolute; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px}
.stgrid .ev .dot{width:13px; height:13px; border-radius:50%; background:var(--surface-3); border:2px solid var(--text-dimmer)}
.stgrid .ev.lit .dot{background:var(--accent); border-color:var(--accent)}
.stgrid .ev .tag{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); white-space:nowrap; min-height:14px}
.stgrid .ev .tag.show{color:var(--accent); font-weight:600}
.stgrid .ev input{width:64px; font-family:var(--font-mono); font-size:11px; text-align:center; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:2px 4px}
.stgrid .ev input.ok{border-color:var(--accent); background:var(--good-bg)}
.stgrid .ev input.no{border-color:var(--danger); background:var(--danger-bg)}

/* concurrency checker rows */
.ccheck{display:flex; flex-direction:column; gap:10px; margin:14px 0}
.ccheck .crow{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); font-family:var(--font-mono); font-size:13.5px}
.ccheck .crow .vecs{color:var(--text); flex:1; min-width:180px}
.ccheck .crow .opts{display:flex; gap:6px}
.ccheck .crow .opts button{font-family:var(--font-mono); font-size:12px; padding:6px 11px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:all .15s}
.ccheck .crow .opts button.sel{border-color:var(--accent); color:var(--accent)}
.ccheck .crow.right .opts button.sel{background:var(--good-bg); border-color:var(--accent); color:var(--text)}
.ccheck .crow.wrong .opts button.sel{background:var(--danger-bg); border-color:var(--danger); color:var(--text)}
.ccheck .crow .res{font-size:12px; color:var(--text-dimmer)}

/* server tiers diagram */
.tiers{display:grid; grid-template-columns:auto auto auto; gap:14px; align-items:center; margin:18px 0; overflow-x:auto}
.tiers .col{display:flex; flex-direction:column; gap:8px}
.tiers .tbox{border:2px solid var(--border); border-radius:11px; padding:10px 13px; background:var(--surface-2); text-align:center; font-size:13px; min-width:96px}
.tiers .tbox.s1{border-color:var(--accent); background:var(--accent-soft); cursor:pointer; transition:all .2s}
.tiers .tbox.s1:hover{transform:translateY(-2px)}
.tiers .arrow{color:var(--text-dimmer); text-align:center; font-size:18px}

/* ======= EXERCISES ======= */
.exwrap{margin:26px 0 6px; padding-top:20px; border-top:1px dashed var(--border)}
.exwrap .exlabel{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); margin-bottom:14px; display:flex; align-items:center; gap:8px}
.ex{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:18px 19px; margin:14px 0}
.ex .efrom{font-family:var(--font-mono); font-size:11px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); padding:2px 9px; border-radius:var(--r-pill); float:right; margin-left:10px}
.ex .eq{font-weight:600; color:var(--text); margin:0 0 14px; font-size:15.5px; line-height:1.55}
.ex .eq .pts{font-family:var(--font-mono); font-weight:500; font-size:12.5px; color:var(--text-dimmer)}
.opt{display:block; width:100%; text-align:left; font-family:var(--font-sans); font-size:14.5px; color:var(--text-dim); padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; margin:8px 0; transition:all .15s}
.opt:hover{border-color:var(--accent-line)}
.opt.correct{border-color:var(--accent); background:var(--good-bg); color:var(--text)}
.opt.wrong{border-color:var(--danger); background:var(--danger-bg); color:var(--text)}
.opt.disabled{cursor:default; pointer-events:none}
.ex .explain{font-size:14px; color:var(--text-dim); margin:12px 0 0; padding:11px 13px; border-left:2px solid var(--accent-line); background:var(--surface-2); border-radius:0 8px 8px 0; display:none}
.ex .explain.show{display:block}
.ex .explain b{color:var(--text)}

/* discursive */
.disc textarea{width:100%; min-height:140px; resize:vertical; font-family:var(--font-sans); font-size:14.5px; line-height:1.6; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-input); padding:12px 14px; transition:border .2s}
.disc textarea:focus{outline:none; border-color:var(--accent-line)}
.disc .discbar{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap}
.disc .gradeout{margin-top:14px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); padding:0; overflow:hidden; display:none}
.disc .gradeout.show{display:block}
.disc .gradeout .ghead{display:flex; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid var(--border-soft)}
.disc .gradeout .score{font-family:var(--font-display); font-weight:700; font-size:1.4rem}
.disc .gradeout.good .score{color:var(--accent)} .disc .gradeout.mid .score{color:var(--warn)} .disc .gradeout.bad .score{color:var(--danger)}
.disc .gradeout .smeta{font-size:13.5px; color:var(--text-dim)}
.disc .gradeout .gbody{padding:13px 15px; font-size:14.5px; color:var(--text-dim)}
.disc .gradeout .gbody b{color:var(--text)}
.disc .model{margin-top:10px}
.disc .model summary{cursor:pointer; font-size:13.5px; color:var(--text-dimmer); font-family:var(--font-mono); padding:6px 0}
.disc .model summary:hover{color:var(--accent)}
.disc .model .mbody{font-size:14.5px; color:var(--text-dim); padding:12px 14px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:11px; margin-top:6px}
.spinner{width:15px; height:15px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* simulado */
.simulado{background:linear-gradient(180deg, var(--surface), var(--bg)); border:1px solid var(--accent-line); border-radius:var(--r-card); padding:26px; margin:34px 0; scroll-margin-top:80px}
.simulado .sttag{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.simulado h3{font-size:1.4rem; margin:8px 0 4px}
.simulado p.sub{margin:0 0 8px; color:var(--text-dim); font-size:14.5px}

/* tooltip */
#tip{position:fixed; z-index:300; max-width:280px; background:var(--surface-3); color:var(--text); font-size:13.5px; line-height:1.5; padding:10px 13px; border-radius:10px; border:1px solid var(--border); box-shadow:var(--shadow); opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; pointer-events:none}
#tip.show{opacity:1; transform:translateY(0)}

/* reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* footer */
footer{border-top:1px solid var(--border-soft); margin-top:30px}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:36px 22px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
.foot-in p{margin:0; font-size:13.5px; color:var(--text-dimmer)}
.foot-in .who{font-family:var(--font-mono); font-size:12.5px}

/* responsivo */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  nav.toc{position:fixed; inset:60px auto 0 0; width:290px; background:var(--surface); border-right:1px solid var(--border); z-index:115; transform:translateX(-100%); transition:transform .3s var(--ease); max-height:none; height:calc(100vh - 60px); box-shadow:var(--shadow)}
  nav.toc.open{transform:none}
  #menuBtn{display:grid}
  .how{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .top-progress{display:none}
  .lesson .lhead h3{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
}

/* ---------------- CRONOMETRO / PACER POR ITEM ---------------- */
.pacer{position:fixed; right:18px; bottom:18px; z-index:130; width:200px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; box-shadow:var(--shadow)}
.pacer-row{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dimmer)}
.pacer-deadline{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); border-radius:var(--r-chip); padding:2px 9px; font:600 12px var(--font-mono); cursor:pointer}
.pacer-deadline:hover{background:var(--accent-line)}
.pacer-x{margin-left:auto; background:none; border:none; color:var(--text-dimmer); cursor:pointer; font-size:17px; line-height:1; padding:0 2px}
.pacer-x:hover{color:var(--text)}
.pacer-item{font:700 34px/1.05 var(--font-mono); color:var(--accent); margin:6px 0 3px; font-variant-numeric:tabular-nums}
.pacer.over .pacer-item{color:var(--danger)}
.pacer.over{border-color:var(--danger); background:var(--danger-bg)}
.pacer-sub{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); line-height:1.45}
.pacer-toggle{position:fixed; right:18px; bottom:18px; z-index:130; width:46px; height:46px; border-radius:50%; display:none; place-items:center; background:var(--surface-2); border:1px solid var(--border); color:var(--accent); font-size:20px; cursor:pointer; box-shadow:var(--shadow); transition:transform .18s var(--ease), border-color .2s}
.pacer-toggle:hover{border-color:var(--accent-line); transform:translateY(-2px)}
@media (max-width:640px){ .pacer{right:10px; bottom:10px; width:172px; padding:10px 12px} .pacer-item{font-size:28px} .pacer-toggle{right:10px; bottom:10px} }