
:root{--bg:#050b14;--panel:#0a1524;--panel2:#0d1c2e;--panel3:#11253a;--line:#1b3b55;--cyan:#2de3f2;--teal:#20c9b4;--text:#edf8ff;--muted:#9bb2c4;--soft:#6e899e;--green:#34d399;--yellow:#fbbf24;--red:#fb7185;--blue:#60a5fa;--radius:16px;--shadow:0 16px 45px #0005}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% -10%,#0c2b43 0,transparent 36%),var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button,a{transition:.18s ease}a{color:var(--cyan);text-decoration:none}a:hover{color:#a5f8ff}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.boot{min-height:100vh;display:grid;place-content:center;text-align:center;color:var(--muted)}.brand-mark{font:800 2rem 'Space Grotesk';color:var(--cyan)}
.topbar{position:sticky;top:0;z-index:20;background:#06101deF;border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.navwrap{max-width:1440px;margin:auto;padding:13px 26px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);min-width:190px}.brand img{width:43px;height:43px}.brand strong{display:block;font:700 1.05rem 'Space Grotesk';letter-spacing:.04em}.brand small{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.navlinks{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap}.navlinks a{padding:9px 12px;border-radius:9px;color:var(--muted);font-size:.88rem}.navlinks a.active,.navlinks a:hover{background:#0d2b3e;color:var(--cyan)}.navright{display:flex;align-items:center;gap:8px}.container{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:30px 0 70px}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:55px 0 35px}.eyebrow{color:var(--cyan);font-size:.77rem;letter-spacing:.17em;font-weight:800;text-transform:uppercase}.hero h1{font:700 clamp(2.4rem,5vw,4.6rem)/1.04 'Space Grotesk';letter-spacing:-.055em;margin:14px 0}.hero h1 span{color:var(--cyan)}.hero p{max-width:650px;color:#b2c7d8;font-size:1.08rem}.hero-art{min-height:300px;border:1px solid #174865;border-radius:26px;background:radial-gradient(circle at 50% 45%,#123d59,#091725 66%);position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 70px #00d4ff0b inset}.hero-art:before,.hero-art:after{content:"";position:absolute;border:1px solid #1a6077;border-radius:50%;width:290px;height:290px;transform:rotateX(67deg)}.hero-art:after{width:410px;height:410px;border-color:#17435e}.terminal{z-index:1;width:min(80%,400px);padding:22px;border:1px solid #21607b;border-radius:15px;background:#06111deF;box-shadow:0 18px 55px #0009;transform:rotate(-3deg)}.terminal-head{display:flex;gap:6px;margin-bottom:18px}.dot{width:8px;height:8px;border-radius:50%;background:#31536b}.terminal pre{color:#b3eaf5;font:13px/1.8 ui-monospace,monospace;white-space:pre-wrap}.terminal .accent{color:var(--teal)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:10px 16px;font-weight:700;font-size:.88rem}.btn-primary{background:linear-gradient(120deg,var(--cyan),#10b8d0);color:#03202a;box-shadow:0 5px 20px #00c9df20}.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#03202a}.btn-ghost{background:#0a1b2b;border-color:#22506b;color:var(--text)}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}.btn-small{padding:7px 10px;font-size:.8rem}.btn-danger{background:#3a1722;color:#fecdd3;border-color:#6d2638}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:26px 0 16px}.section-head h2,.page-title{font:700 clamp(1.5rem,3vw,2rem) 'Space Grotesk';margin:0}.section-head p{margin:5px 0 0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:28px 0}.stat,.card,.challenge-card,.panel{border:1px solid var(--line);background:linear-gradient(150deg,#0c1b2b,#081320);border-radius:var(--radius);box-shadow:var(--shadow)}.stat{padding:18px}.stat strong{display:block;font:700 1.8rem 'Space Grotesk';color:var(--cyan)}.stat span{color:var(--muted);font-size:.84rem}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card,.panel{padding:22px}.challenge-card{padding:19px;display:flex;flex-direction:column;min-height:220px;transition:transform .2s,border-color .2s}.challenge-card:hover{transform:translateY(-3px);border-color:#2a819b}.challenge-card h3{margin:12px 0 7px;font:700 1.12rem 'Space Grotesk'}.challenge-card p{color:var(--muted);font-size:.9rem;flex:1;margin:0}.card-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:.78rem;margin:15px 0}.badge,.pill{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:800}.level-basic{background:#123c31;color:#6ee7b7}.level-intermediate{background:#493815;color:#fcd34d}.level-advanced{background:#4b1e2b;color:#fda4af}.pill{background:#10283b;color:#9ad8e9;border:1px solid #1d4964}.muted{color:var(--muted)}.small{font-size:.82rem}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.input,.select,.textarea{width:100%;background:#06111d;border:1px solid #23445b;border-radius:9px;color:var(--text);padding:11px 12px}.input::placeholder,.textarea::placeholder{color:#67859b}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:.84rem;color:#c5d6e2;font-weight:600}.textarea{min-height:120px;resize:vertical}.filters{display:grid;grid-template-columns:minmax(220px,1fr) 200px;gap:10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse;min-width:620px}.table th,.table td{padding:13px 15px;text-align:left;border-bottom:1px solid #173148;font-size:.86rem}.table th{color:#8faec3;background:#0c1c2b;font-size:.73rem;text-transform:uppercase;letter-spacing:.08em}.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#0c2132}.status{font-size:.75rem;font-weight:700;color:var(--green)}.notice{padding:13px 15px;border:1px solid #23526a;border-radius:10px;background:#0a2030;color:#c4e8f4;margin:12px 0}.notice.warn{border-color:#70541e;background:#2b210e;color:#f9d98a}.notice.error{border-color:#773045;background:#2a121b;color:#ffc5d1}.tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:16px 0}.tab{border:0;background:transparent;color:var(--muted);padding:10px 13px;border-bottom:2px solid transparent}.tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}.codearea{width:100%;min-height:360px;resize:vertical;background:#030912;color:#c8f7f3;border:1px solid #23516b;border-radius:10px;padding:16px;font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.codearea:focus{outline:1px solid var(--cyan)}.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.result-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #1b3447}.result-row:last-child{border:0}.success{color:var(--green)}.failure{color:var(--red)}.warning{color:var(--yellow)}.empty{padding:35px 15px;text-align:center;color:var(--muted)}.footer{border-top:1px solid var(--line);padding:24px 18px;color:var(--muted);text-align:center;font-size:.8rem}.footer strong{color:var(--text)}.admin-layout{display:grid;grid-template-columns:220px 1fr;gap:18px}.side-menu{padding:13px;background:#081522;border:1px solid var(--line);border-radius:14px;align-self:start}.side-menu button{display:block;width:100%;text-align:left;padding:10px 12px;margin:3px 0;background:transparent;border:0;border-radius:8px;color:var(--muted)}.side-menu button.active,.side-menu button:hover{background:#103047;color:var(--cyan)}.inline-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.inline-form .full{grid-column:1/-1}.modal-backdrop{position:fixed;inset:0;background:#000a;z-index:50;display:grid;place-items:center;padding:18px}.modal{width:min(650px,100%);max-height:90vh;overflow:auto;background:#0a1726;border:1px solid #27607b;border-radius:17px;padding:23px;box-shadow:0 20px 90px #000c}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.toast{position:fixed;right:18px;bottom:18px;z-index:80;max-width:min(420px,calc(100% - 36px));background:#102c3c;border:1px solid #28718a;border-radius:12px;padding:14px 17px;box-shadow:var(--shadow)}.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kpi{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #1b3447}.kpi strong{font:700 1.2rem 'Space Grotesk';color:var(--cyan)}.hero-mini{padding:25px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,#0c2538,#081421)}.hero-mini h1{font:700 clamp(1.7rem,4vw,2.6rem) 'Space Grotesk';margin:8px 0}.form-note{color:var(--soft);font-size:.78rem}.checkline{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.84rem}.checkline input{margin-top:5px}.footer a{color:var(--cyan)}
@media(max-width:980px){.navwrap{flex-wrap:wrap;gap:10px;padding:12px 16px}.brand{min-width:150px}.navlinks{order:3;flex-basis:100%;overflow:auto;flex-wrap:nowrap}.navlinks a{white-space:nowrap}.hero{grid-template-columns:1fr}.hero-art{min-height:260px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-layout{grid-template-columns:1fr}.side-menu{display:flex;overflow:auto}.side-menu button{white-space:nowrap;width:auto}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.container{width:calc(100% - 24px);padding-top:20px}.hero{padding:32px 0 20px}.hero-art{min-height:230px}.terminal{width:88%;padding:15px}.grid-2,.grid-3,.grid-4,.split,.inline-form{grid-template-columns:1fr}.inline-form .full{grid-column:auto}.stats{gap:9px}.stat{padding:14px}.stat strong{font-size:1.45rem}.card,.panel{padding:16px}.navright{margin-left:auto}.navright .btn{padding:8px 10px}.filters{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.codearea{min-height:300px}.table th,.table td{padding:10px}.hero h1{font-size:2.5rem}}

/* Módulos de comunidad y maratones: extensión compatible con la identidad visual original */
.card-meta{flex-wrap:wrap;gap:8px 14px}.field select[multiple]{min-height:130px}.notice{overflow-wrap:anywhere}.card h3{overflow-wrap:anywhere}@media(max-width:760px){.navwrap{padding:10px 14px;gap:10px;flex-wrap:wrap}.brand{min-width:unset}.navlinks{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}.navlinks a{white-space:nowrap}.navright{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:30px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}.admin-layout{grid-template-columns:1fr}.split{grid-template-columns:1fr}}

/* === 3CB Code Arena · experiencia v2 === */
:root{color-scheme:dark}
.brand-chip{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#00d5ed,#1676ff);color:#03131e;font:950 1rem ui-monospace,monospace;box-shadow:0 0 24px #00d5ed35}
.navright{flex-wrap:wrap}.theme-tools{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.theme-btn{border:0;border-radius:8px;padding:7px 9px;background:transparent;color:var(--muted);font-weight:800}.theme-btn:hover,.theme-btn.selected{background:#12384b;color:var(--cyan)}
.auth-wrap{max-width:620px}.auth-card{padding:clamp(20px,4vw,34px)}
.pixel-world{max-width:1320px}.pixel-hero{position:relative;overflow:hidden;border:2px solid #6242a7;border-radius:20px;padding:clamp(22px,5vw,54px);background-color:#170d35;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px),radial-gradient(ellipse at 80% 25%,#5d25a8 0,transparent 42%),linear-gradient(135deg,#170d35,#101c49 65%,#092b45);background-size:24px 24px,24px 24px,auto,auto;box-shadow:0 20px 65px #0008;color:#fff}
.pixel-eyebrow,.pixel-tag{font:900 .72rem ui-monospace,monospace;letter-spacing:.14em;color:#67f8e5}.pixel-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px}.pixel-hero h1{font:1000 clamp(2.8rem,7vw,6rem)/.9 ui-monospace,monospace;letter-spacing:-.09em;margin:25px 0;text-shadow:5px 5px 0 #6726a8}.pixel-hero h1 span{color:#ff4de1}.pixel-hero p{max-width:570px;color:#d4c9f4;font-size:1.05rem}.bit-stage{min-height:290px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#4e2a8b 0,transparent 68%)}.pixel-stars{position:absolute;top:12%;color:#ffdb5c;font-size:1.3rem}.bit-mascot{font:900 clamp(1.3rem,3vw,2.5rem)/.95 ui-monospace,monospace;letter-spacing:.06em;text-align:center;color:#a5ff72;text-shadow:4px 4px 0 #1a783f,0 0 25px #a5ff7266;filter:drop-shadow(0 10px 0 #080c22);animation:bitfloat 2.5s ease-in-out infinite}.bit-mascot small{display:block;margin-top:12px;color:#ffdc58;font-size:.7rem;letter-spacing:.3em}.bit-dialog{position:absolute;bottom:0;right:0;background:#fff2a8;color:#211342;padding:10px 13px;border:3px solid #211342;box-shadow:4px 4px 0 #ff4de1;font:900 .65rem/1.5 ui-monospace,monospace;transform:rotate(-2deg)}@keyframes bitfloat{50%{transform:translateY(-9px)}}
.pixel-cta{display:inline-flex;align-items:center;justify-content:center;border:3px solid #110b2d;background:#b8ff5c;color:#15203a;padding:13px 17px;font:950 .78rem ui-monospace,monospace;box-shadow:5px 5px 0 #ff4de1;cursor:pointer}.pixel-cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #ff4de1;color:#15203a}.small-cta{font-size:.68rem;padding:10px 12px}.pixel-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.pixel-stats span{padding:8px 12px;border:1px solid #8b6bca;background:#110b2dbb;color:#ffdc58;font:900 .72rem ui-monospace,monospace}.pixel-card{padding:18px;border:2px solid #513c8c;border-radius:14px;background:linear-gradient(145deg,#211344,#101c3e);color:#fff;box-shadow:6px 6px 0 #09091b}.pixel-card h3{font:900 1.2rem ui-monospace,monospace;color:#ff63e8}.pixel-card p{color:#c8c1e7}.pixel-card-art{height:125px;display:grid;place-items:center;margin:-2px -2px 16px;border:2px solid #5540a0;background:repeating-linear-gradient(0deg,#2a1952 0 12px,#332062 12px 24px);font:900 4rem ui-monospace,monospace;color:#a5ff72;text-shadow:4px 4px #e83ec7}.art-1{color:#ffdb5c}.art-2{color:#6be8ff}.pixel-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding:24px;border:2px dashed #a65bdf;border-radius:16px;background:#1b1236;color:white}.pixel-callout h2{font:900 1.5rem ui-monospace,monospace;color:#ff63e8}.pixel-callout p{color:#c8c1e7}
.mt-3{margin-top:18px}
@media(max-width:980px){.navwrap{align-items:flex-start}.navright{margin-left:auto}.pixel-hero-grid{grid-template-columns:1fr}.bit-stage{min-height:220px}.pixel-callout{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.navright{width:100%;justify-content:space-between}.theme-tools{order:0}.navlinks{padding-bottom:4px}.pixel-hero{padding:22px 17px}.pixel-hero h1{font-size:clamp(2.7rem,15vw,4.3rem)}.bit-dialog{right:0;bottom:-4px;font-size:.55rem}.pixel-stats span{font-size:.65rem}.pixel-callout{padding:18px}}
/* Claro: contraste alto, fondos limpios y controles legibles. */
:root[data-theme="light"]{color-scheme:light;--bg:#f2f6fb;--panel:#fff;--panel2:#f7faff;--panel3:#e9f1f8;--line:#d4e0eb;--text:#142338;--muted:#52677c;--soft:#71859a;--shadow:0 12px 32px #20364a12}
:root[data-theme="light"] body{background:radial-gradient(ellipse at 80% -10%,#d7f4fa 0,transparent 38%),var(--bg);color:var(--text)}
:root[data-theme="light"] .topbar{background:#f8fbf3ee;border-color:var(--line)}
:root[data-theme="light"] .navlinks a{color:#52677c}:root[data-theme="light"] .navlinks a.active,:root[data-theme="light"] .navlinks a:hover{background:#dff6fa;color:#007e99}
:root[data-theme="light"] .stat,:root[data-theme="light"] .card,:root[data-theme="light"] .challenge-card,:root[data-theme="light"] .panel{background:linear-gradient(150deg,#fff,#f7faff);border-color:#d4e0eb;box-shadow:0 10px 28px #20364a0c}
:root[data-theme="light"] .btn-ghost{background:#fff;border-color:#c6d7e5;color:#20364a}
:root[data-theme="light"] .input,:root[data-theme="light"] .select,:root[data-theme="light"] .textarea{background:#fff;color:#142338;border-color:#b9ccdc}
:root[data-theme="light"] .field label{color:#344b61}
:root[data-theme="light"] .hero p,:root[data-theme="light"] .muted{color:#52677c}
:root[data-theme="light"] .terminal{background:#102235}
:root[data-theme="light"] .table th{background:#eaf2f8;color:#405970}
:root[data-theme="light"] .table th,:root[data-theme="light"] .table td{border-color:#d9e4ed}
:root[data-theme="light"] .table tr:hover td{background:#eef8fb}
:root[data-theme="light"] .side-menu{background:#fff}
:root[data-theme="light"] .side-menu button{color:#52677c}
:root[data-theme="light"] .modal{background:#fff;color:#142338}
:root[data-theme="light"] .notice{background:#eaf7fb;color:#17485b;border-color:#b8e1ed}
:root[data-theme="light"] .notice.warn{background:#fff7df;color:#77500c;border-color:#ead28b}
:root[data-theme="light"] .hero-mini{background:linear-gradient(120deg,#e5f7fc,#f5f8ff)}
/* Protección visual: temperatura cálida, menos brillo y contraste suave. */
:root[data-theme="eye"]{color-scheme:light;--bg:#f1eadb;--panel:#f8f1e4;--panel2:#eee5d4;--panel3:#e6dcc8;--line:#d2c4aa;--text:#342f27;--muted:#716858;--soft:#8c806e;--cyan:#98713b;--teal:#64816e;--shadow:0 10px 28px #4a39200e}
:root[data-theme="eye"] body{background:#f1eadb;color:#342f27}
:root[data-theme="eye"] .topbar{background:#f4eddfed;border-color:#d2c4aa}
:root[data-theme="eye"] .stat,:root[data-theme="eye"] .card,:root[data-theme="eye"] .challenge-card,:root[data-theme="eye"] .panel{background:#f8f1e4;border-color:#d2c4aa;box-shadow:none}
:root[data-theme="eye"] .btn-ghost{background:#eee5d4;color:#342f27;border-color:#cbbd9f}
:root[data-theme="eye"] .input,:root[data-theme="eye"] .select,:root[data-theme="eye"] .textarea{background:#fbf5e9;color:#342f27;border-color:#cbbd9f}
:root[data-theme="eye"] .field label{color:#51483a}
:root[data-theme="eye"] .hero p,:root[data-theme="eye"] .muted{color:#716858}
:root[data-theme="eye"] .side-menu{background:#f8f1e4}
:root[data-theme="eye"] .side-menu button{color:#716858}
:root[data-theme="eye"] .table th{background:#e9dfcc;color:#51483a}
:root[data-theme="eye"] .table th,:root[data-theme="eye"] .table td{border-color:#d8cbb4}
:root[data-theme="eye"] .notice{background:#e9dfcc;color:#51483a;border-color:#cbbd9f}
:root[data-theme="eye"] .notice.warn{background:#f7e8c7;color:#6c4d1b;border-color:#d8bd83}
:root[data-theme="eye"] .hero-mini{background:#e9dfcc}
:root[data-theme="eye"] .codearea,:root[data-theme="eye"] .terminal{background:#262b31;color:#e7e1d5}

.social-code{min-height:150px}.social-code-view{min-height:80px;max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}.social-code-label{font:800 .72rem ui-monospace,monospace;color:var(--cyan);margin-top:14px}.comment{padding:10px 12px;margin-top:8px;border-left:2px solid var(--cyan);background:#102338;border-radius:0 8px 8px 0}.comment p{margin:4px 0}.comment small{color:var(--soft)}.comment-form{display:flex;gap:8px;margin-top:12px}.comment-form .input{min-width:0}@media(max-width:600px){.comment-form{flex-direction:column}}
