/* ONIX ENGLISH ACADEMY — Cambridge Placement Test Hoja de estilos portada 1:1 desde onix-placement-test.html. Único ajuste: el selector de modo oscuro pasa de `body.dark` a `.onix-root.dark`, porque el JS alterna la clase "dark" sobre #onixRoot (el div raíz), no sobre . Los valores de las variables no cambian. */ :root{ --onix-dark:#082A2F; --onix-dark-2:#0f3a40; --onix-turq:#21C4C8; --onix-turq-dim:#1aa3a6; --ih-blue:#154C79; --white:#ffffff; --paper:#f5f9f9; --ink:#0d2326; --ink-soft:#4a6367; --line:#dbe9ea; --card:#ffffff; --shadow:0 12px 30px -14px rgba(8,42,47,.28); --gold:#c99a3a; --danger:#c04a4a; --ok:#1f8a5f; --radius:16px; } .onix-root.dark{ --paper:#07191c; --ink:#eaf6f6; --ink-soft:#a9c3c4; --line:#123236; --card:#0d2b2f; --shadow:0 12px 30px -14px rgba(0,0,0,.6); } *{box-sizing:border-box} html,body{margin:0;padding:0} .onix-root{ font-family:"Segoe UI",ui-sans-serif,-apple-system,BlinkMacSystemFont,Roboto,sans-serif; background:var(--paper); color:var(--ink); min-height:100vh; padding:0; transition:background .3s,color .3s; } .onix-serif{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif} .onix-shell{max-width:880px;margin:0 auto;padding:0 20px 60px} .onix-header{ background:linear-gradient(135deg,var(--onix-dark) 0%,var(--onix-dark-2) 65%,var(--ih-blue) 130%); color:#fff;position:relative;overflow:hidden;padding:34px 20px 46px; } .onix-header::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:40px; background:var(--paper); clip-path:path("M0,40 C 240,0 640,0 880,40 L880,40 L0,40 Z"); } .onix-header-inner{max-width:880px;margin:0 auto;position:relative;z-index:2} .onix-brandrow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px} .onix-logo{display:flex;align-items:center;gap:12px} .onix-logo-mark{ width:44px;height:44px;border-radius:12px; background:var(--onix-turq);color:var(--onix-dark); display:flex;align-items:center;justify-content:center; font-weight:800;font-size:18px;letter-spacing:.5px; box-shadow:0 6px 16px -4px rgba(33,196,200,.6); } .onix-brandname{font-weight:700;font-size:17px;letter-spacing:.3px} .onix-brandsub{font-size:11.5px;color:#bfe8e9;letter-spacing:.4px} .onix-partners{display:flex;gap:10px;font-size:11px;color:#cfeeee;align-items:center} .onix-chip{ border:1px solid rgba(255,255,255,.35);padding:5px 10px;border-radius:999px; background:rgba(255,255,255,.08);white-space:nowrap; } .onix-hero{margin-top:26px} .onix-eyebrow{ font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--onix-turq); font-weight:700; } .onix-title{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:10px 0 8px;font-weight:700} .onix-subtitle{color:#d6ecec;font-size:15px;max-width:560px;line-height:1.55} .onix-body{padding-top:22px} .onix-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:28px;margin-bottom:20px; } .onix-badge-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px} .onix-badge{ font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line); color:var(--ink-soft);background:var(--paper); } .onix-h2{font-size:21px;margin:0 0 6px;font-weight:700} .onix-p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 14px} .onix-btn{ appearance:none;border:none;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:700; cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s; } .onix-btn:active{transform:scale(.98)} .onix-btn-primary{background:var(--onix-turq);color:var(--onix-dark);box-shadow:0 8px 20px -8px rgba(33,196,200,.6)} .onix-btn-primary:hover{opacity:.92} .onix-btn-dark{background:var(--onix-dark);color:#fff} .onix-btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .onix-btn-danger{background:var(--danger);color:#fff} .onix-btn:disabled{opacity:.45;cursor:not-allowed} .onix-btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .onix-field{margin-bottom:16px} .onix-label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)} .onix-input,.onix-select{ width:100%;padding:11px 13px;border-radius:10px;border:1.5px solid var(--line); background:var(--paper);color:var(--ink);font-size:14.5px;font-family:inherit; } .onix-input:focus,.onix-select:focus{outline:2px solid var(--onix-turq);outline-offset:1px} .onix-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} @media (max-width:560px){.onix-grid2{grid-template-columns:1fr}} .onix-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);margin:14px 0} .onix-check input{margin-top:3px} .onix-error{color:var(--danger);font-size:12.5px;margin-top:12px} .onix-progresswrap{margin-bottom:22px} .onix-progress-top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:8px} .onix-progressbar{height:9px;background:var(--line);border-radius:999px;overflow:hidden} .onix-progressfill{height:100%;background:linear-gradient(90deg,var(--onix-turq),var(--ih-blue));transition:width .3s} .onix-timer{ display:inline-flex;align-items:center;gap:8px;font-weight:700;font-variant-numeric:tabular-nums; background:var(--paper);border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:14px; } .onix-timer.low{color:var(--danger);border-color:var(--danger)} .onix-qnum{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--onix-turq-dim);font-weight:800} .onix-qtext{font-size:19px;font-weight:600;margin:8px 0 22px;line-height:1.5} .onix-opt{ display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px; padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s; } .onix-opt:hover{border-color:var(--onix-turq)} .onix-opt.sel{border-color:var(--onix-turq);background:rgba(33,196,200,.08)} .onix-optletter{ width:28px;height:28px;flex:none;border-radius:8px;background:var(--onix-dark);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px; } .onix-opt.sel .onix-optletter{background:var(--onix-turq);color:var(--onix-dark)} .onix-navrow{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:10px;flex-wrap:wrap} .onix-jumpgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:18px} @media (max-width:640px){.onix-jumpgrid{grid-template-columns:repeat(8,1fr)}} .onix-jump{ aspect-ratio:1;border-radius:6px;border:1px solid var(--line);background:var(--paper); font-size:11px;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center; } .onix-jump.answered{background:var(--onix-turq);color:var(--onix-dark);border-color:var(--onix-turq);font-weight:700} .onix-jump.current{outline:2px solid var(--ih-blue);outline-offset:1px} .onix-resultgauge{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:10px 0 22px} .onix-gaugebox{ width:150px;height:150px;border-radius:50%;flex:none; background:conic-gradient(var(--onix-turq) calc(var(--pct)*1%), var(--line) 0); display:flex;align-items:center;justify-content:center;position:relative; } .onix-gaugeinner{ width:118px;height:118px;border-radius:50%;background:var(--card); display:flex;flex-direction:column;align-items:center;justify-content:center; } .onix-gaugepct{font-size:26px;font-weight:800} .onix-gaugelabel{font-size:11px;color:var(--ink-soft)} .onix-levelpill{ display:inline-block;background:var(--onix-dark);color:#fff;font-weight:800;font-size:22px; padding:8px 18px;border-radius:12px;letter-spacing:1px; } .onix-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px} .onix-table th,.onix-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left} .onix-table th{color:var(--ink-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px} .onix-tag-ok{color:var(--ok);font-weight:700} .onix-tag-bad{color:var(--danger);font-weight:700} .onix-scrolltable{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:12px} .onix-note{ background:rgba(33,196,200,.08);border:1px solid var(--onix-turq);border-radius:12px; padding:14px 16px;font-size:13.5px;color:var(--ink);line-height:1.55; } .onix-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px} .onix-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0} .onix-statcard{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper)} .onix-statnum{font-size:24px;font-weight:800} .onix-statlabel{font-size:12px;color:var(--ink-soft)} .onix-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px} .onix-barlabel{width:90px;flex:none;color:var(--ink-soft)} .onix-bartrack{flex:1;background:var(--line);border-radius:999px;height:14px;overflow:hidden} .onix-barfill{height:100%;background:linear-gradient(90deg,var(--onix-turq),var(--ih-blue))} .onix-barval{width:34px;text-align:right;font-weight:700} .onix-toggle{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:7px 12px; border-radius:999px;cursor:pointer;font-size:12.5px;color:var(--ink-soft);background:var(--paper); } .onix-footer{text-align:center;font-size:12px;color:var(--ink-soft);padding:20px 0 0} .onix-rowbtns{display:flex;gap:8px;flex-wrap:wrap} .onix-admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .onix-adminmini{font-size:12px;color:var(--ink-soft)} .onix-modalbg{position:fixed;inset:0;background:rgba(8,42,47,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px} .onix-modal{background:var(--card);border-radius:16px;padding:26px;max-width:420px;width:100%;box-shadow:var(--shadow)} .onix-spinner{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:onixspin .7s linear infinite;vertical-align:-3px;margin-right:6px} @keyframes onixspin{to{transform:rotate(360deg)}}