/* ============================================================
   Raccoons D'Areia — Workshop de Administração
   Manual de operação · identidade: navy + areia + mar + laranja de andebol
   ============================================================ */

:root{
  /* palette */
  --navy:#0B1F3A;      --navy-700:#122a4a;   --navy-600:#1b3a63;   --navy-500:#264d7d;
  --sand:#FAF6EE;      --paper:#FFFDF8;      --line:#E7DECF;       --line-cool:#E3E8EF;
  --ink:#16202E;       --muted:#5B6675;      --faint:#8A95A3;
  --surf:#1E9E8A;      --surf-ink:#0C5C50;   --surf-bg:#E4F3EF;
  --flare:#FF5B36;     --flare-ink:#BE3C1E;  --flare-bg:#FDE8E1;
  --amber:#E8A317;     --amber-bg:#FBEFCF;   --amber-ink:#8A5D00;
  /* type */
  --disp:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* geometry */
  --r:14px; --r-sm:9px; --sbw:304px;
  --shadow:0 1px 2px rgba(11,31,58,.06), 0 8px 28px -12px rgba(11,31,58,.18);
  --shadow-lg:0 24px 60px -20px rgba(11,31,58,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--sand);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16px;
}
a{color:var(--flare-ink); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:700; letter-spacing:.01em; line-height:1.02}
em{font-style:normal; color:var(--flare-ink); font-weight:600}
code{
  font-family:var(--mono); font-size:.82em; background:#0b1f3a0d; color:var(--navy-600);
  padding:.08em .38em; border-radius:5px; border:1px solid #0b1f3a12; white-space:nowrap;
}

/* inline UI markers used inside content */
b.ui{font-weight:600; font-family:var(--body); font-size:.9em; background:var(--navy); color:#fff;
  padding:.12em .5em; border-radius:6px; white-space:nowrap; box-shadow:0 1px 0 #0006 inset;}
b.tab{font-weight:700; color:var(--navy-600); border-bottom:2px solid var(--surf); padding-bottom:1px;}

/* ---------- layout ---------- */
.app{display:grid; grid-template-columns:var(--sbw) 1fr; min-height:100vh}

/* ---------- sidebar ---------- */
.side{
  position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--navy); color:#dbe6f2;
  border-right:1px solid #0006; display:flex; flex-direction:column; scrollbar-width:thin;
}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:#ffffff22; border-radius:8px}
.brand{padding:22px 22px 14px; display:flex; align-items:center; gap:12px}
.brand .mark{width:44px; height:44px; border-radius:11px; background:#fff; padding:4px;
  display:grid; place-items:center; overflow:hidden; box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.brand .mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand .txt strong{display:block; font-family:var(--disp); font-weight:700; font-size:1.28rem; color:#fff; line-height:1; letter-spacing:.02em}
.brand .txt span{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#8fb0d6}

/* admin chip */
.admin{margin:4px 16px 6px; padding:10px 12px; background:#ffffff10; border:1px solid #ffffff1a; border-radius:12px;
  display:flex; align-items:center; gap:10px; cursor:pointer}
.admin:hover{background:#ffffff18}
.admin .av{width:32px;height:32px;border-radius:50%;background:var(--surf);color:#04231f;display:grid;place-items:center;font-weight:700;font-family:var(--disp);font-size:1.05rem}
.admin .who{min-width:0}
.admin .who b{display:block;color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin .who span{font-size:.68rem;color:#8fb0d6}

/* scoreboard (signature element) */
.placar{margin:8px 16px 12px; padding:14px; border-radius:14px; background:linear-gradient(160deg,#0e2545,#0a1a30);
  border:1px solid #ffffff14; box-shadow:inset 0 1px 0 #ffffff10}
.placar .lab{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#7fa6cf}
.placar .score{display:flex; align-items:baseline; gap:8px; font-family:var(--disp); margin:2px 0 8px}
.placar .score .n{font-size:2.5rem; font-weight:700; color:#fff; line-height:.9}
.placar .score .d{font-size:1.1rem; color:#6f93bd}
.placar .score .u{font-size:.7rem; color:#7fa6cf; text-transform:uppercase; letter-spacing:.12em; margin-left:auto}
.bar{height:8px; border-radius:6px; background:#ffffff14; overflow:hidden}
.bar>i{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--surf),#48d3ba); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.placar.ready{background:linear-gradient(160deg,#123c1f,#0c2c18); border-color:#48d3ba55}
.placar.ready .kick{margin-top:9px; font-family:var(--disp); font-weight:700; color:#7ff0c8; font-size:1.02rem; letter-spacing:.03em; display:flex; align-items:center; gap:6px}

/* nav */
nav{padding:6px 12px 22px; flex:1}
.nav-h{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#6f93bd; padding:12px 10px 6px}
.nav-i{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; cursor:pointer; color:#c6d6e8;
  font-size:.92rem; position:relative; transition:background .15s}
.nav-i:hover{background:#ffffff10; color:#fff}
.nav-i.active{background:var(--flare); color:#fff; box-shadow:0 6px 16px -8px #ff5b36}
.nav-i.active .num{color:#fff}
.nav-i .ico{width:24px; text-align:center; font-size:1.05rem; flex:none}
.nav-i .num{font-family:var(--mono); font-size:.7rem; color:#6f93bd; flex:none; width:20px}
.nav-i .t{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-i .chk{width:18px;height:18px;border-radius:50%;border:1.5px solid #ffffff33; flex:none; display:grid; place-items:center; font-size:.7rem}
.nav-i.done .chk{background:var(--surf); border-color:var(--surf); color:#04231f}
.nav-i.active .chk{border-color:#ffffff88}
.nav-i.active.done .chk{background:#fff;color:var(--flare)}

/* ---------- main ---------- */
main{min-width:0; padding:0 0 120px}
.topbar{display:none}
.wrap{max-width:900px; margin:0 auto; padding:38px 40px 0}

/* module header */
.eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.eyebrow .num{font-family:var(--mono); font-size:.8rem; color:var(--flare-ink); font-weight:600}
.eyebrow .tag{font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:4px 10px; border-radius:999px}
.mod-h1{font-size:3rem; text-transform:uppercase; color:var(--navy); letter-spacing:.005em}
.lead{font-size:1.12rem; color:#31404f; margin:12px 0 0; max-width:64ch}
.goal{margin:20px 0 6px; padding:13px 16px; border-radius:12px; background:var(--surf-bg); border:1px solid #1e9e8a2e;
  display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--surf-ink)}
.goal b{font-family:var(--disp); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem; color:var(--surf-ink)}
.goal .i{font-size:1.1rem; line-height:1.3}

/* block section */
.block{margin-top:30px}
.block-h{font-family:var(--disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:var(--navy);
  letter-spacing:.02em; display:flex; align-items:center; gap:10px; margin-bottom:14px}
.block-h::before{content:""; width:22px; height:3px; background:var(--flare); border-radius:2px}

/* steps */
.step{display:grid; grid-template-columns:38px 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line)}
.step:first-child{border-top:none}
.step .n{width:34px; height:34px; border-radius:10px; background:var(--navy); color:#fff; font-family:var(--disp);
  font-weight:700; font-size:1.25rem; display:grid; place-items:center}
.step .h{font-weight:700; font-size:1.04rem; color:var(--navy); margin-bottom:3px}
.step .b{color:#33424f; font-size:.97rem}
.step .tip{margin-top:9px; font-size:.87rem; color:var(--amber-ink); background:var(--amber-bg); border-left:3px solid var(--amber);
  padding:8px 12px; border-radius:0 8px 8px 0}
.step .tip::before{content:"💡 "; }

/* screenshot slot */
figure.shot{margin:14px 0 2px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-cool); background:var(--paper); box-shadow:var(--shadow)}
figure.shot img{display:block; width:100%; height:auto}
figure.shot figcaption{font-size:.78rem; color:var(--muted); padding:8px 12px; border-top:1px solid var(--line-cool); background:#fff}
.ph{aspect-ratio:16/9; display:grid; place-items:center; text-align:center; gap:8px; color:var(--faint);
  background:repeating-linear-gradient(135deg,#f3eee3,#f3eee3 12px,#efe9dd 12px,#efe9dd 24px)}
.ph .cam{font-size:2rem; opacity:.6}
.ph .t{font-size:.85rem; max-width:70%; color:var(--muted)}
.ph .pill{font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--flare-ink); border:1px solid var(--flare); padding:3px 9px; border-radius:999px}

/* rules list */
.rules{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper)}
.rules li{padding:12px 16px 12px 44px; position:relative; border-top:1px solid var(--line); font-size:.98rem}
.rules li:first-child{border-top:none}
.rules li::before{content:""; position:absolute; left:18px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--flare)}

/* callouts */
.callout{margin-top:22px; border-radius:var(--r); padding:15px 17px 15px 16px; display:grid; grid-template-columns:26px 1fr; gap:12px; border:1px solid}
.callout .ci{font-size:1.2rem; line-height:1.2}
.callout b.h{display:block; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1rem; margin-bottom:2px}
.callout p{margin:0; font-size:.95rem}
.callout.info{background:#eef4fb; border-color:#cfe0f2; color:#1c3a5c}
.callout.warn{background:var(--flare-bg); border-color:#f4b7a4; color:#8a2c14}
.callout.flare{background:var(--navy); border-color:var(--navy); color:#dceaf7}
.callout.flare b.h{color:#fff}
.callout.flare code{background:#ffffff1a; color:#bfe6ff; border-color:#ffffff22}

/* practice checklist */
.practice{margin-top:6px; border:1px dashed #1e9e8a80; border-radius:var(--r); background:var(--surf-bg); padding:6px 6px 10px}
.practice .task{display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:10px; cursor:pointer}
.practice .task:hover{background:#ffffff70}
.practice .task .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--surf); background:#fff; flex:none; display:grid; place-items:center; color:#fff; font-size:.8rem; margin-top:1px; transition:.12s}
.practice .task.on .box{background:var(--surf); border-color:var(--surf)}
.practice .task .lab{font-size:.97rem; color:#123}
.practice .task.on .lab{color:var(--surf-ink); text-decoration:line-through; text-decoration-color:#1e9e8a80}

/* quiz */
.quiz{margin-top:6px; display:grid; gap:14px}
.q{border:1px solid var(--line); border-radius:var(--r); background:var(--paper); padding:15px 17px}
.q .qq{font-weight:700; color:var(--navy); margin-bottom:11px; font-size:1.01rem}
.q .opt{display:flex; gap:11px; align-items:center; padding:10px 13px; border:1px solid var(--line-cool); border-radius:10px; cursor:pointer; margin-top:8px; font-size:.95rem; transition:.12s; background:#fff}
.q .opt:hover{border-color:var(--navy-500)}
.q .opt .d{width:24px;height:24px;border-radius:50%;border:2px solid #c7cfda; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:.85rem; color:var(--muted)}
.q .opt.correct{background:var(--surf-bg); border-color:var(--surf)}
.q .opt.correct .d{background:var(--surf); border-color:var(--surf); color:#fff}
.q .opt.wrong{background:var(--flare-bg); border-color:var(--flare)}
.q .opt.wrong .d{background:var(--flare); border-color:var(--flare); color:#fff}
.q .opt.lock{cursor:default; opacity:.75}
.q .opt.lock.correct,.q .opt.lock.wrong{opacity:1}
.q .why{margin-top:11px; font-size:.9rem; padding:10px 13px; border-radius:9px; background:#eef4fb; color:#1c3a5c; border-left:3px solid var(--navy-500); display:none}
.q.answered .why{display:block}

/* module footer nav */
.mod-foot{max-width:900px; margin:44px auto 0; padding:0 40px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.btn{font-family:var(--disp); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.92rem;
  border:none; border-radius:11px; padding:13px 20px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:.15s}
.btn.primary{background:var(--flare); color:#fff; box-shadow:0 10px 24px -12px #ff5b36}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--paper); color:var(--navy); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy-500)}
.btn.done-b{background:var(--surf); color:#04231f}
.btn:disabled{opacity:.45; cursor:not-allowed}
.mod-foot .spacer{flex:1}
.open-demo{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:9px 14px;border-radius:10px}
.open-demo:hover{border-color:var(--flare); color:var(--flare-ink); text-decoration:none}

/* ---------- home ---------- */
.home{max-width:960px; margin:0 auto; padding:0 40px}
.hero{padding:56px 0 28px}
.hero .kick{font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--flare-ink); font-weight:600}
.hero h1{font-size:4.4rem; text-transform:uppercase; color:var(--navy); margin:12px 0; letter-spacing:.004em; line-height:.94}
.hero h1 .o{color:var(--flare)}
.hero p{font-size:1.2rem; color:#33424f; max-width:60ch}
.namebox{margin:26px 0 8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.namebox input{font-family:var(--body); font-size:1rem; padding:13px 16px; border-radius:11px; border:1px solid var(--line); background:#fff; min-width:260px}
.namebox input:focus{outline:2px solid var(--surf); border-color:var(--surf)}
.flow{margin:38px 0; padding:24px; background:var(--navy); border-radius:20px; color:#dceaf7}
.flow h3{color:#fff; text-transform:uppercase; font-size:1.15rem; letter-spacing:.04em; margin-bottom:4px}
.flow p{color:#9fbdda; font-size:.9rem; margin:0 0 16px}
.flow-row{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch}
.flow-step{flex:1; min-width:96px; background:#ffffff0d; border:1px solid #ffffff18; border-radius:12px; padding:12px 10px; text-align:center; position:relative}
.flow-step .fi{font-size:1.4rem}
.flow-step .fn{font-family:var(--mono); font-size:.62rem; color:#7fa6cf}
.flow-step .ft{font-size:.78rem; color:#dceaf7; margin-top:2px; line-height:1.25}
.home-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:22px 0 60px}
.hc{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px; cursor:pointer; transition:.15s; text-align:left}
.hc:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--flare)}
.hc .top{display:flex; justify-content:space-between; align-items:center}
.hc .ico{font-size:1.5rem}
.hc .num{font-family:var(--mono); font-size:.72rem; color:var(--faint)}
.hc h4{font-family:var(--disp); font-weight:700; text-transform:uppercase; color:var(--navy); font-size:1.2rem; margin:10px 0 4px; letter-spacing:.02em}
.hc p{font-size:.83rem; color:var(--muted); margin:0}
.hc .st{margin-top:10px; font-size:.7rem; font-weight:600; color:var(--surf-ink); display:flex; align-items:center; gap:5px}
.hc.done{border-color:#1e9e8a55}

/* ---------- assistant "O Treinador" ---------- */
.fab{position:fixed; right:22px; bottom:22px; z-index:60; background:var(--navy); color:#fff; border:none;
  border-radius:16px; padding:13px 18px 13px 14px; display:flex; align-items:center; gap:10px; cursor:pointer;
  box-shadow:var(--shadow-lg); font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem}
.fab:hover{background:var(--navy-700)}
.fab .w{width:34px;height:34px;border-radius:10px;background:#fff;padding:3px;display:grid;place-items:center;overflow:hidden}
.fab .w img{width:100%;height:100%;object-fit:contain;display:block}
.fab .dot{position:absolute; top:-4px; right:-4px; width:14px;height:14px;border-radius:50%;background:var(--surf); border:2px solid var(--sand)}
.coach{position:fixed; right:22px; bottom:22px; z-index:61; width:min(400px,calc(100vw - 28px)); height:min(600px,calc(100vh - 40px));
  background:var(--paper); border-radius:20px; box-shadow:var(--shadow-lg); border:1px solid var(--line); display:none; flex-direction:column; overflow:hidden}
.coach.open{display:flex}
.coach-h{background:var(--navy); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:11px}
.coach-h .w{width:38px;height:38px;border-radius:10px;background:#fff;padding:3px;display:grid;place-items:center;overflow:hidden;flex:none}
.coach-h .w img{width:100%;height:100%;object-fit:contain;display:block}
.coach-h .ti strong{display:block; font-family:var(--disp); font-size:1.25rem; letter-spacing:.02em}
.coach-h .ti span{font-size:.72rem; color:#8fb0d6}
.coach-h .x{margin-left:auto; background:#ffffff18; border:none; color:#fff; width:32px;height:32px;border-radius:9px; cursor:pointer; font-size:1.1rem}
.coach-h .x:hover{background:#ffffff28}
.coach-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--sand)}
.msg{max-width:88%; padding:11px 14px; border-radius:15px; font-size:.92rem; line-height:1.5; white-space:pre-wrap}
.msg.bot{background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; color:#1f2c3a}
.msg.me{background:var(--navy); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.msg.bot code{background:#0b1f3a0d}
.msg.bot b.ui{font-size:.82em}
.chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 8px; background:var(--sand)}
.chip{font-size:.8rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; color:var(--navy-600)}
.chip:hover{border-color:var(--flare); color:var(--flare-ink)}
.coach-in{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--paper)}
.coach-in input{flex:1; border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-family:var(--body); font-size:.92rem}
.coach-in input:focus{outline:2px solid var(--surf); border-color:var(--surf)}
.coach-in button{background:var(--flare); color:#fff; border:none; border-radius:11px; width:44px; cursor:pointer; font-size:1.1rem}
.coach-note{font-size:.66rem; color:var(--faint); text-align:center; padding:4px 12px 9px; background:var(--paper)}

/* ---------- mobile ---------- */
.scrim{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; left:0; top:0; width:290px; z-index:80; transform:translateX(-100%); transition:transform .25s}
  .side.open{transform:none; box-shadow:var(--shadow-lg)}
  .scrim.show{display:block; position:fixed; inset:0; background:#0b1f3a66; z-index:79}
  .topbar{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--navy); color:#fff; position:sticky; top:0; z-index:40}
  .topbar .burger{background:#ffffff18; border:none; color:#fff; width:40px;height:40px;border-radius:10px; font-size:1.2rem; cursor:pointer}
  .topbar strong{font-family:var(--disp); font-size:1.3rem; letter-spacing:.02em}
  .topbar .mini{margin-left:auto; font-family:var(--mono); font-size:.8rem; color:#8fb0d6}
  .wrap,.home,.mod-foot{padding-left:20px; padding-right:20px}
  .hero h1{font-size:3rem}
  .mod-h1{font-size:2.3rem}
  .hero{padding:30px 0 12px}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--flare); outline-offset:2px; border-radius:4px}