/* Dominia — "patio de juego" claro: banners redondeados de colores, tarjetas pastel, naranja de Claude solo en acciones y acentos */
:root{
  --bg:#f6f5fc; --surface:#ffffff; --ink:#1f1d3a; --muted:#67658a; --line:#e6e3f3; --soft:#f0eefa;
  --claude:#d97757; --claude-ink:#ffffff; --claude-soft:#fde9e0;
  --violet:#6c5ce7; --violet-soft:#ece9ff; --violet-ink:#ffffff;
  --mint:#21b47e; --mint-soft:#dcf6ea; --sky:#3b8cf0; --sky-soft:#e0eeff; --sun:#ffc93c; --sun-soft:#fff4d1; --rose:#f2557f; --rose-soft:#ffe1ea;
  --ok:#1a9e6b; --warn:#c98a00; --bad:#e0475e;
  --display:"Baloo 2", "Segoe UI", system-ui, sans-serif;
  --body:Nunito, "Segoe UI", system-ui, sans-serif;
  --shadow:0 10px 30px rgba(84,70,170,.10);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141327; --surface:#1e1c38; --ink:#f1efff; --muted:#a9a6cc; --line:#2f2c52; --soft:#262448;
  --claude:#e88a69; --claude-soft:#3a2630; --violet:#8b7df5; --violet-soft:#2c2758;
  --mint:#3ccf96; --mint-soft:#183a35; --sky:#64a7ff; --sky-soft:#1b2d4f; --sun:#ffd25c; --sun-soft:#3a3320; --rose:#ff7c9c; --rose-soft:#3e2238;
  --ok:#3ccf96; --warn:#ffc24a; --bad:#ff7c8c; --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141327; --surface:#1e1c38; --ink:#f1efff; --muted:#a9a6cc; --line:#2f2c52; --soft:#262448;
  --claude:#e88a69; --claude-soft:#3a2630; --violet:#8b7df5; --violet-soft:#2c2758;
  --mint:#3ccf96; --mint-soft:#183a35; --sky:#64a7ff; --sky-soft:#1b2d4f; --sun:#ffd25c; --sun-soft:#3a3320; --rose:#ff7c9c; --rose-soft:#3e2238;
  --ok:#3ccf96; --warn:#ffc24a; --bad:#ff7c8c; --shadow:0 10px 30px rgba(0,0,0,.35); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:16px/1.55 var(--body); transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.1; text-wrap:balance}
h1{font-size:clamp(32px,5vw,52px); font-weight:800}
h2{font-size:clamp(24px,3.2vw,34px); font-weight:800}
h3{font-size:21px; font-weight:700}
a{color:var(--violet)}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.muted{color:var(--muted)} .small{font-size:14px}
.stack{display:grid; gap:14px; align-content:start}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.center{text-align:center}
.card{background:var(--surface); border-radius:26px; padding:24px; box-shadow:var(--shadow); min-width:0}
.kicker{display:inline-flex; align-items:center; gap:8px; font:800 13px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--violet); background:var(--violet-soft); padding:6px 14px; border-radius:999px; justify-self:start}
.underline{background:linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 90%, transparent 90%); padding:0 4px}

/* header */
.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg)}
.topin{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:800 22px var(--display)}
.brand img{width:32px; height:32px}
.brand b{color:var(--claude)}
nav{display:flex; gap:4px; flex-wrap:wrap; flex:1}
nav a{text-decoration:none; color:var(--muted); font-weight:800; padding:8px 14px; border-radius:999px}
nav a:hover{color:var(--ink)}
nav a[aria-current="page"]{background:var(--surface); color:var(--violet); box-shadow:var(--shadow)}
.tools{display:flex; align-items:center; gap:10px; margin-left:auto}
@media (max-width:760px){.topin{gap:10px} .brand{font-size:19px} .brand img{width:26px;height:26px} .iconbtn{width:40px;height:40px} .tools{order:2} nav{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px} nav a{white-space:nowrap} .mechip span{display:none} .mechip{padding:4px}}
.iconbtn{width:44px; height:44px; border-radius:50%; border:0; background:var(--surface); box-shadow:var(--shadow); cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.iconbtn svg{width:22px; height:22px}
.mechip{display:flex; align-items:center; gap:8px; border:0; background:var(--surface); box-shadow:var(--shadow); border-radius:999px; padding:4px 14px 4px 4px; font:800 14px var(--body); color:var(--ink); cursor:pointer}
.mechip svg{border-radius:50%}
#view{padding-block:18px 56px; display:grid; gap:28px}

/* buttons & forms */
.btn{font:800 15px var(--body); border:0; background:var(--soft); color:var(--ink); padding:12px 20px; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--claude); color:var(--claude-ink); box-shadow:0 8px 20px color-mix(in srgb, var(--claude) 35%, transparent)}
.btn.sun{background:var(--sun); color:#3a2a00}
.btn.white{background:#fff; color:#2a2550}
.btn.small{padding:8px 14px; font-size:14px}
.btn:disabled{opacity:.5; cursor:default; transform:none}
label{font-weight:800; font-size:15px}
input,select,textarea{font:inherit; color:var(--ink); background:var(--soft); border:2px solid transparent; border-radius:16px; padding:12px 14px; width:100%}
textarea{min-height:110px; resize:vertical}
input[type=range]{accent-color:var(--claude); padding:0; background:transparent}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet)}
.btn:focus-visible,a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--violet); outline-offset:3px}

/* hero banner */
.banner{position:relative; overflow:hidden; border-radius:36px; padding:clamp(24px,4vw,44px); color:#fff; background:linear-gradient(135deg,#7b6cf0 0%,#5b4ad6 100%); display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:24px; align-items:center}
.banner::after{content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:-80px; bottom:-140px; background:rgba(255,255,255,.08)}
.banner h1{color:#fff}
.banner .kicker{background:rgba(255,255,255,.18); color:#fff}
.banner p{margin:0; opacity:.92; font-size:17px; max-width:60ch}
.banner .ava{position:relative; z-index:1}
.banner .ava svg{filter:drop-shadow(0 16px 30px rgba(0,0,0,.25)); width:clamp(150px,22vw,230px); height:auto}
.bubble{position:absolute; top:-6px; right:-10px; background:#fff; color:#2a2550; font:800 15px var(--display); padding:10px 14px; border-radius:18px 18px 18px 4px; box-shadow:0 8px 20px rgba(0,0,0,.15); max-width:150px; line-height:1.15}
@media (max-width:720px){.banner{grid-template-columns:minmax(0,1fr)} .banner .ava{justify-self:center; order:-1}}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.18)}
.pill{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px; padding:5px 12px; border-radius:999px; background:var(--soft); color:var(--ink); white-space:nowrap}
.pill.ok{background:var(--mint-soft); color:var(--ok)} .pill.warn{background:var(--sun-soft); color:var(--warn)} .pill.bad{background:var(--rose-soft); color:var(--bad)} .pill.acc{background:var(--claude-soft); color:var(--claude)} .pill.vio{background:var(--violet-soft); color:var(--violet)}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{border-radius:24px; padding:18px 20px; background:var(--t-soft); display:grid; gap:4px}
.tile span{font-weight:800; font-size:13px; color:var(--t); text-transform:uppercase; letter-spacing:.05em}
.tile b{font:800 34px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums}
.meter{height:14px; border-radius:999px; background:var(--soft); overflow:hidden; position:relative}
.meter i{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--m, var(--claude)); transition:width .6s}
.meter u{position:absolute; top:-2px; bottom:-2px; width:4px; border-radius:2px; background:var(--ink)}
.banner .meter{background:rgba(255,255,255,.22)} .banner .meter i{background:var(--sun)} .banner .meter u{background:#fff}

/* course cards */
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
.course{border-radius:30px; padding:24px; background:var(--c-soft); display:grid; gap:12px; position:relative; overflow:hidden; align-content:start}
.course .hd{display:flex; gap:14px; align-items:flex-start}
.course .num{width:52px; height:52px; border-radius:18px; flex:none; display:grid; place-items:center; font:800 24px var(--display); background:var(--c); color:#fff}
.course.done .num{background:var(--ok)}
.course h3{color:var(--ink)}
.course .org{font-weight:800; font-size:13px; color:var(--c)}
.course .tags{display:flex; flex-wrap:wrap; gap:8px}
.course .tag{font-weight:800; font-size:13px; padding:5px 12px; border-radius:999px; background:var(--surface); color:var(--ink)}
.course p{margin:0}
.course details summary{cursor:pointer; font-weight:800; color:var(--c)}
.course ul{margin:8px 0 0; padding-left:20px}
.course .meter{background:var(--surface)} .course .meter i{background:var(--c)}
.course .ft{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.course.now{outline:3px solid var(--c); outline-offset:3px}
.c-violet{--c:var(--violet); --c-soft:var(--violet-soft)} .c-claude{--c:var(--claude); --c-soft:var(--claude-soft)} .c-mint{--c:var(--mint); --c-soft:var(--mint-soft)}
.c-sky{--c:var(--sky); --c-soft:var(--sky-soft)} .c-rose{--c:var(--rose); --c-soft:var(--rose-soft)} .c-sun{--c:var(--warn); --c-soft:var(--sun-soft)}
.list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.list li{display:grid; gap:2px}
.strike{text-decoration:line-through; text-decoration-color:var(--bad); text-decoration-thickness:2px}

/* who are you */
.people{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px}
.person{border:0; cursor:pointer; text-align:center; background:var(--surface); border-radius:28px; padding:22px 16px; box-shadow:var(--shadow); display:grid; gap:10px; justify-items:center; color:var(--ink); font:inherit; transition:transform .18s}
.person:hover{transform:translateY(-4px) rotate(-1deg)}
.person .nm{font:800 18px/1.15 var(--display)}
.silhouette{width:120px; height:120px; border-radius:50%; background:var(--soft); display:grid; place-items:center; font:800 40px var(--display); color:var(--muted)}

/* avatar editor */
.editor{display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:820px){.editor{grid-template-columns:minmax(0,1fr)} .editor .prev{justify-self:center}}
.prev{position:sticky; top:90px; display:grid; gap:10px; justify-items:center}
.presets{display:flex; flex-wrap:wrap; gap:10px}
.presets button{border:3px solid transparent; border-radius:50%; padding:0; background:none; cursor:pointer}
.presets button[aria-pressed="true"]{border-color:var(--claude)}
.opt-row{display:grid; gap:8px}
.opt-row .opts{display:flex; flex-wrap:wrap; gap:8px}
.o{border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:7px 14px; font:700 14px var(--body); cursor:pointer}
.o[aria-pressed="true"]{border-color:var(--violet); background:var(--violet-soft); color:var(--violet)}
.sw{width:34px; height:34px; border-radius:50%; padding:0; border:3px solid var(--surface); box-shadow:0 0 0 2px var(--line); cursor:pointer}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--violet)}
.steps{display:flex; gap:10px; flex-wrap:wrap}
.steps span{font-weight:800; font-size:14px; padding:6px 14px; border-radius:999px; background:var(--soft); color:var(--muted)}
.steps span.on{background:var(--violet); color:#fff}

/* team */
.team{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.member{display:grid; gap:10px; justify-items:start}
.member .hd{display:flex; gap:12px; align-items:center}
.member .nm{font:800 17px/1.2 var(--display)}
.badges{display:flex; flex-wrap:wrap; gap:8px}
.badge{font-weight:800; font-size:13px; padding:6px 12px; border-radius:12px; background:var(--soft); color:var(--muted)}
.badge.on{background:var(--sun-soft); color:var(--warn)}
.tablebox{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:12px; border-bottom:2px solid var(--soft)}
th{font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* training */
.tabs{display:flex; flex-wrap:wrap; gap:10px}
.tab{font:800 15px var(--body); border:0; background:var(--surface); color:var(--ink); padding:11px 18px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow)}
.tab[aria-selected="true"]{background:var(--violet); color:#fff}
.opts-q{display:grid; gap:12px}
.opt{text-align:left; font:700 16px var(--body); padding:14px 18px; border-radius:18px; border:2px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--violet)}
.opt.right{border-color:var(--ok); background:var(--mint-soft)} .opt.wrong{border-color:var(--bad); background:var(--rose-soft)}
.explain{background:var(--sun-soft); padding:14px 18px; border-radius:18px}
.sent{display:block; width:100%; text-align:left; font:600 17px/1.5 var(--body); padding:12px 16px; border-radius:16px; border:2px dashed var(--line); background:var(--surface); color:var(--ink); cursor:pointer}
.sent.marked{border-style:solid; border-color:var(--warn); background:var(--sun-soft)}
.sent.hit{border-style:solid; border-color:var(--ok); background:var(--mint-soft)}
.sent.miss{border-style:solid; border-color:var(--bad); background:var(--rose-soft)}
.rubric{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.rubric li{display:flex; gap:10px; align-items:center; font-weight:700}
.rubric li::before{content:""; width:22px; height:22px; border-radius:8px; border:2px solid var(--line); flex:none}
.rubric li.ok::before{background:var(--mint); border-color:var(--mint)}
.flip{perspective:1000px; cursor:pointer; max-width:560px}
.flip .in{position:relative; min-height:220px; transition:transform .55s; transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute; inset:0; backface-visibility:hidden; border-radius:28px; display:grid; place-items:center; padding:24px; text-align:center}
.flip .f{background:linear-gradient(135deg,#7b6cf0,#5b4ad6); color:#fff; font:800 32px var(--display)}
.flip .b{background:var(--sun-soft); transform:rotateY(180deg); font-size:19px; font-weight:700}
.score{font:800 56px var(--display); color:var(--claude); line-height:1}
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}}

.demo{background:var(--sun-soft); text-align:center; font-weight:700; font-size:14px; padding:8px 16px; border-radius:16px}
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 22px; border-radius:999px; font-weight:800; z-index:20; max-width:calc(100% - 32px); box-shadow:var(--shadow)}
.pop{animation:pop .5s ease} @keyframes pop{0%{transform:scale(.8)} 60%{transform:scale(1.06)} 100%{transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Demuestra tu aprendizaje */
.cpick{display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px}
.cchip{flex:none; display:flex; align-items:center; gap:10px; border:2px solid transparent; background:var(--surface); box-shadow:var(--shadow); border-radius:999px; padding:6px 16px 6px 6px; font:800 14px var(--body); color:var(--ink); cursor:pointer; max-width:280px; text-align:left}
.cchip.on{border-color:var(--claude)}
.cchip .ring{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; background:conic-gradient(var(--mint) calc(var(--pct) * 1%), var(--soft) 0)}
.cchip .ring span{width:32px; height:32px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font-size:11px; font-weight:800}
.pathbox{border-radius:36px; background:var(--c-soft); padding:clamp(20px,4vw,36px); display:grid; gap:22px; overflow:hidden}
.pathhead{display:grid; gap:8px; max-width:560px}
.pathhead .org{font-weight:800; font-size:13px; color:var(--c)}
.pathhead .meter{background:var(--surface)} .pathhead .meter i{background:var(--c)}
.path{display:grid; gap:62px; justify-items:center; padding-block:10px}
.pnode{display:grid; justify-items:center; gap:8px; transform:translateX(var(--x)); position:relative; width:min(240px,70vw)}
.pbtn{width:84px; height:84px; border-radius:50%; border:0; font:800 30px var(--display); display:grid; place-items:center; cursor:pointer; color:#fff; background:var(--c); box-shadow:0 7px 0 color-mix(in srgb, var(--c) 60%, #000); transition:transform .12s}
.pbtn:active:not(:disabled){transform:translateY(5px); box-shadow:0 2px 0 color-mix(in srgb, var(--c) 60%, #000)}
.pbtn.ok{background:var(--sun); color:#5a3d00; box-shadow:0 7px 0 #c99700}
.pbtn.lock{background:var(--line); color:var(--muted); box-shadow:0 7px 0 color-mix(in srgb, var(--line) 70%, #000); cursor:not-allowed}
.pbtn.next{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.go{position:absolute; top:-38px; background:var(--surface); color:var(--c); font:800 13px var(--body); letter-spacing:.06em; padding:6px 12px; border-radius:12px; box-shadow:var(--shadow); white-space:nowrap}
.go::after{content:""; position:absolute; left:50%; bottom:-6px; margin-left:-6px; border:6px solid transparent; border-bottom:0; border-top-color:var(--surface)}
.plabel{font-weight:800; font-size:14px; text-align:center; line-height:1.25}
.plabel small{display:block; font-weight:700; color:var(--muted); font-size:12px; margin-top:2px}
.trophy{width:84px; height:84px; border-radius:24px; display:grid; place-items:center; background:var(--surface); color:var(--muted)}
.trophy.on{background:var(--sun); color:#5a3d00}
.btn.mintb{background:var(--mint); color:#fff} .btn.roseb{background:var(--bad); color:#fff}
.lesson{position:fixed; inset:0; z-index:30; background:var(--bg); display:grid; grid-template-rows:auto 1fr auto; padding-top:env(safe-area-inset-top, 0px)}
.lstop{display:flex; align-items:center; gap:16px; padding:16px max(16px, env(safe-area-inset-left, 0px)); max-width:900px; width:100%; margin:0 auto}
.lmeter{flex:1; height:18px} .lmeter i{background:var(--mint)}
.hearts{display:flex; gap:2px}
.lbody{max-width:760px; width:100%; margin:0 auto; padding:12px max(16px, env(safe-area-inset-left, 0px)) 24px; display:grid; gap:24px; align-content:start; overflow-y:auto}
.lq{display:flex; gap:16px; align-items:flex-start}
.mascot{position:relative; flex:none}
.mascot .say{position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); background:var(--surface); box-shadow:var(--shadow); font:800 13px var(--display); padding:5px 10px; border-radius:12px 12px 12px 3px; white-space:nowrap}
.lq h2{font-size:clamp(22px,3vw,30px)}
.lopts{display:grid; gap:12px}
.lopt{display:flex; gap:14px; align-items:center; text-align:left; font:700 17px var(--body); padding:16px 18px; border-radius:18px; border:2px solid var(--line); border-bottom-width:5px; background:var(--surface); color:var(--ink); cursor:pointer}
.lopt kbd{flex:none; width:30px; height:30px; border-radius:9px; border:2px solid var(--line); display:grid; place-items:center; font:800 14px var(--body); color:var(--muted)}
.lopt.sel{border-color:var(--sky); background:var(--sky-soft)}
.lopt.right{border-color:var(--ok); background:var(--mint-soft)} .lopt.wrong{border-color:var(--bad); background:var(--rose-soft)}
.lfoot{border-top:2px solid var(--line); background:var(--surface); padding:18px max(16px, env(safe-area-inset-left, 0px)) calc(18px + env(safe-area-inset-bottom, 0px))}
.lfoot.good{background:var(--mint-soft); border-color:transparent; color:var(--ok)} .lfoot.badf{background:var(--rose-soft); border-color:transparent; color:var(--bad)}
.lfoot.good p,.lfoot.badf p{color:var(--ink)}
.lfin{max-width:760px; margin:0 auto; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.lfin .btn{min-width:160px}
.lstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:480px; margin:0 auto; width:100%}
.lbody.center{justify-items:center; text-align:center}

/* v3: acceso, insignias y accesibilidad */
.skip{position:absolute; left:-9999px; top:8px; z-index:50; background:var(--surface); color:var(--ink); padding:10px 16px; border-radius:12px; font-weight:800}
.skip:focus{left:16px}
.authbox{max-width:520px; width:100%; margin:0 auto}
.linkbtn{border:0; background:none; color:var(--violet); font:800 14px var(--body); cursor:pointer; justify-self:start; padding:4px 0}
.lbl{font-weight:800; font-size:15px}
.code{font-family:ui-monospace, Menlo, monospace; letter-spacing:.12em}
.cbadge{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px; padding:8px 14px 8px 10px; border-radius:999px; color:#fff; background:var(--b); box-shadow:0 6px 14px color-mix(in srgb, var(--b) 35%, transparent)}
#view:focus{outline:none}

/* ---------- Varias IAs ---------- */
.aitag{display:inline-flex; align-items:center; gap:5px; font:800 12px var(--body); padding:3px 10px; border-radius:999px; color:color-mix(in srgb, var(--ai) 45%, var(--ink)); background:color-mix(in srgb, var(--ai) 12%, var(--surface)); white-space:nowrap; vertical-align:middle; text-transform:none; letter-spacing:0}
.aitag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ai)}
.cai{display:block; font-size:11px; color:color-mix(in srgb, var(--ai) 45%, var(--ink))}
.aipick{display:flex; flex-wrap:wrap; gap:10px}
.aipick label{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:2px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:800; background:var(--surface)}
.aipick label:has(input:checked){border-color:var(--ai); background:color-mix(in srgb, var(--ai) 12%, var(--surface))}
.aipick input{accent-color:var(--ai); width:18px; height:18px; margin:0}
.aipick label:has(input:focus-visible){outline:3px solid var(--ai); outline-offset:3px}
th.nt{text-transform:none; letter-spacing:0}
.lbl-t{font-weight:800}
.eqt{min-width:520px} .eqt th[scope=row]{text-align:left; width:130px; min-width:110px}
.eqt td{vertical-align:top} .eqc{display:flex; flex-direction:column; gap:2px; margin-bottom:8px}

/* ---------- Chispa ---------- */
.chispa{overflow:visible; display:block}
.chispa .ch-body{transform-box:fill-box; transform-origin:50% 50%; animation:chFloat 3.2s ease-in-out infinite}
.chispa .ch-eyes{transform-box:fill-box; transform-origin:50% 50%; animation:chBlink 4.2s infinite}
@keyframes chFloat{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes chBlink{0%,93%,100%{transform:scaleY(1)} 96%{transform:scaleY(.1)}}
.chdock{position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:40; display:flex; align-items:flex-end; gap:8px; pointer-events:none}
.chdock[hidden]{display:none}
.chbtn{pointer-events:auto; border:0; background:none; padding:0; cursor:pointer; width:84px; height:84px; filter:drop-shadow(0 10px 18px rgba(60,40,140,.25))}
.chbtn:focus-visible{outline:3px solid var(--violet); outline-offset:4px; border-radius:50%}
.chsay{pointer-events:auto; order:-1; max-width:min(300px,64vw); background:var(--surface); color:var(--ink); font:800 15px/1.25 var(--display); padding:12px 16px; border-radius:18px 18px 4px 18px; box-shadow:var(--shadow); margin-bottom:46px; cursor:pointer; animation:chIn .25s ease-out}
.chsay[hidden]{display:none}
@keyframes chIn{from{opacity:0; transform:translateY(8px) scale(.96)}}
.hop{animation:chHop .5s ease-out} .jump{animation:chJump .9s ease-out} .spin{animation:chSpin .8s ease-in-out} .wiggle{animation:chWig .6s ease-in-out}
@keyframes chHop{40%{transform:translateY(-14px) scale(1.06,.94)} 70%{transform:translateY(0) scale(.96,1.04)}}
@keyframes chJump{25%{transform:translateY(-34px) rotate(-8deg)} 50%{transform:translateY(0) scale(1.1,.9)} 70%{transform:translateY(-14px) rotate(6deg)} 100%{transform:none}}
@keyframes chSpin{to{transform:rotate(360deg)}}
@keyframes chWig{20%{transform:rotate(-10deg)} 40%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(3deg)}}
.ch-confetti{position:absolute; right:42px; bottom:42px; width:0; height:0; pointer-events:none}
.ch-confetti i{position:absolute; width:9px; height:6px; border-radius:2px; animation:chConf 1.1s ease-out forwards}
@keyframes chConf{to{transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0}}
.mascot .chispa{width:86px; height:86px}
.lesson .mascot.react{animation:chJump .9s ease-out}
.brand .chispa{width:40px; height:40px}
@media (max-width:720px){.chbtn{width:68px; height:68px} .chsay{margin-bottom:38px} .chdock{bottom:max(12px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion: reduce){.chispa .ch-body,.chispa .ch-eyes,.hop,.jump,.spin,.wiggle,.chsay,.lesson .mascot.react{animation:none}}
body:has(#lesson:not([hidden])) .chdock{display:none}
.lesson .ava{position:relative; display:inline-block}
.ava .ch-confetti{left:50%; top:50%; right:auto; bottom:auto}

/* Camino de etapas: se llena al aprobar */
.path{position:relative}
.path .pnode{z-index:1}
.road{position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none}
.road path{fill:none; stroke-linecap:round; stroke-width:14}
.road .rbase{stroke:color-mix(in srgb, var(--line) 85%, var(--c-soft)); stroke-dasharray:2 22}
.road .rfill{stroke:var(--c); stroke-width:14; filter:drop-shadow(0 3px 0 color-mix(in srgb, var(--c) 55%, #000))}
.road .rfill.grow{stroke-dasharray:100; stroke-dashoffset:100; animation:roadGrow .9s cubic-bezier(.6,.1,.3,1) forwards; animation-delay:calc(.35s + var(--d))}
@keyframes roadGrow{to{stroke-dashoffset:0}}
.plabel{background:var(--c-soft); padding:4px 10px; border-radius:12px; position:relative}
@media (prefers-reduced-motion: reduce){.road .rfill.grow{animation:none; stroke-dashoffset:0}}
.pbtn.rest{background:var(--surface); color:var(--violet); box-shadow:0 7px 0 var(--line); cursor:not-allowed}

/* Lector de cursos propios (bonus) */
.reader .rd-body{max-width:760px; margin:0 auto; width:100%; overflow-y:auto; display:grid; gap:14px; align-content:start; padding-bottom:24px}
.rd-tabs{display:flex; gap:8px; flex-wrap:wrap}
.rd-tab{width:40px; height:40px; border-radius:12px; border:2px solid var(--line); background:var(--surface); font:800 15px var(--display); color:var(--muted); cursor:pointer}
.rd-tab.on{border-color:var(--violet); background:var(--violet-soft); color:var(--violet)}
.rd-head{display:flex; gap:14px; align-items:center}
.rd-head h2{margin:0}
.rd-idea{background:var(--violet-soft); border-radius:20px; padding:16px 18px}
.rd-idea p,.rd-q p{margin:6px 0 0}
.rd-q{background:var(--sun-soft); border-radius:20px; padding:16px 18px}
.rd-list{margin:0; padding-left:22px; display:grid; gap:8px; line-height:1.45}
.rd-list.take li::marker{content:"★  "; color:var(--violet)}
.rd-list.check li::marker{content:"☐  "; color:var(--violet)}
.reader h3{margin:6px 0 0}
.course.bonus{outline:3px dashed color-mix(in srgb, var(--violet) 45%, transparent); outline-offset:-6px}
body:has(#reader:not([hidden])) .chdock{display:none}
/* Equipo: rutas asignadas por el líder, invitaciones y solicitudes */
select.trk{width:auto; padding:8px 12px; border-radius:12px; font-weight:700}
.invites{border:2px solid var(--violet)}
.aipick small{font-size:.78rem}