/* Layout: marca L&S Dev (azul eléctrico → cian sobre azul noche); pantalla de acceso partida, app con barra superior y contenido a 1120px */
:root{
  --bg:#060D20; --bg-2:#0A1430; --surface:#0D1934; --surface-2:#13234A; --line:#1F3160; --line-soft:#172852;
  --fg:#E9EFFC; --muted:#93A4C8; --faint:#61739C;
  --blue:#2A66FF; --cyan:#22D3EE; --brand-a:#1E5BFF; --brand-b:#22D3EE;
  --ok:#34D399; --ok-bg:rgba(52,211,153,.12); --bad:#F87171; --bad-bg:rgba(248,113,113,.12); --warn:#FBBF24; --warn-bg:rgba(251,191,36,.12);
  --focus:#7DD3FC; --shadow:0 18px 48px rgba(0,0,0,.35);
  --f-display:"Sora","Segoe UI",system-ui,sans-serif; --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#F2F5FC; --bg-2:#E7EDFA; --surface:#FFFFFF; --surface-2:#EDF2FC; --line:#D3DCEE; --line-soft:#E2E8F5;
  --fg:#0A1633; --muted:#4F5F80; --faint:#7A88A6; --blue:#1D4FE0; --cyan:#0891B2; --brand-a:#1D4FE0; --brand-b:#0AA5C8;
  --ok:#047857; --ok-bg:#E3F6EE; --bad:#C81E1E; --bad-bg:#FDECEC; --warn:#A15C07; --warn-bg:#FDF3DF; --focus:#1D4FE0; --shadow:0 14px 40px rgba(16,32,80,.10); color-scheme:light; } }
:root[data-theme="light"]{
  --bg:#F2F5FC; --bg-2:#E7EDFA; --surface:#FFFFFF; --surface-2:#EDF2FC; --line:#D3DCEE; --line-soft:#E2E8F5;
  --fg:#0A1633; --muted:#4F5F80; --faint:#7A88A6; --blue:#1D4FE0; --cyan:#0891B2; --brand-a:#1D4FE0; --brand-b:#0AA5C8;
  --ok:#047857; --ok-bg:#E3F6EE; --bad:#C81E1E; --bad-bg:#FDECEC; --warn:#A15C07; --warn-bg:#FDF3DF; --focus:#1D4FE0; --shadow:0 14px 40px rgba(16,32,80,.10); color-scheme:light; }

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.2;text-wrap:balance;margin:0}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.86em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.grad{background:linear-gradient(90deg,var(--brand-a),var(--brand-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1120px;margin:0 auto}
.eyebrow{font-family:var(--f-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600;font-size:.95rem;transition:background .15s,border-color .15s,transform .1s;text-decoration:none}
.btn:hover{border-color:var(--blue)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand-a),color-mix(in srgb,var(--brand-b) 85%,var(--brand-a)));border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 45%,transparent);color:var(--ok)}
.btn.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
.btn.sm{padding:6px 10px;font-size:.84rem;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:6px}
.field label{font-size:.86rem;font-weight:600;color:var(--muted)}
.input,select.input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:1rem;min-width:0}
.input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}
.msg{padding:11px 14px;border-radius:10px;font-size:.94rem;border:1px solid}
.msg.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.msg.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent);color:var(--ok)}
.msg.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--warn)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.pill.bad{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.pill.warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.pill.info{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent);border-color:transparent}

/* Splash */
.splash{min-height:80vh;display:grid;place-items:center;text-align:center;gap:14px}

/* Auth */
.auth{display:grid;grid-template-columns:1.05fr 1fr;gap:0;min-height:calc(100vh - 32px);max-width:1180px;margin:16px auto;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.auth-brand{position:relative;padding:44px 44px 40px;display:flex;flex-direction:column;gap:28px;background:radial-gradient(120% 80% at 30% 0%,#123077 0%,#081335 45%,#050B1E 100%);color:#E9EFFC;overflow:hidden;min-width:0}
.auth-brand canvas{position:absolute;inset:auto 0 0 0;width:100%;height:46%;pointer-events:none;opacity:.9}
.auth-brand > *{position:relative}
.brand-lockup{display:flex;align-items:center;gap:14px}
.brand-lockup .ls{font-family:var(--f-display);font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.brand-lockup .ls b{background:linear-gradient(90deg,#1E5BFF,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.product{display:grid;gap:12px}
.product h1{font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:800;letter-spacing:-.02em}
.product h1 .inf{background:linear-gradient(90deg,#1E5BFF,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.product p{color:#B7C5E6;max-width:44ch;font-size:1.06rem}
.feat{display:grid;gap:14px;max-width:46ch}
.feat div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.feat .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.25);color:#7FE6F7;font-family:var(--f-mono);font-size:.78rem}
.feat b{font-family:var(--f-display);font-weight:600;font-size:.98rem;display:block}
.feat span{color:#9FB0D4;font-size:.92rem}
.tagline{margin-top:auto;font-family:var(--f-display);letter-spacing:.3em;font-size:.68rem;color:#8CA0CC;text-transform:uppercase}
.auth-form{padding:40px 44px;display:flex;flex-direction:column;gap:22px;min-width:0}
.tabs{display:flex;gap:4px;background:var(--bg-2);padding:4px;border-radius:12px;border:1px solid var(--line)}
.tabs button{flex:1;border:0;background:transparent;padding:9px 10px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--fg);box-shadow:0 1px 0 var(--line)}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.role{position:relative;border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px 40px;cursor:pointer;background:var(--bg-2);display:block}
.role input{position:absolute;left:14px;top:15px;accent-color:var(--blue)}
.role b{display:block;font-family:var(--f-display);font-weight:600;font-size:.93rem}
.role span{font-size:.82rem;color:var(--muted)}
.role:has(input:checked){border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--bg-2))}
.netline{display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--muted);padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
@media (max-width:900px){.auth .feat{display:none}.auth{grid-template-columns:1fr;min-height:auto}.auth-brand{padding:32px 24px}.auth-brand canvas{height:120px}.auth-form{padding:28px 22px}}
@media (max-width:460px){.roles{grid-template-columns:1fr}}

/* App shell */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px))) 0;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.top .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top .name{font-family:var(--f-display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav button{border:0;background:transparent;padding:8px 12px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--muted);font-size:.93rem;position:relative}
.nav button[aria-current="page"]{color:var(--fg);background:var(--surface-2)}
.nav .count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:9px;background:var(--bad);color:#fff;font-size:.68rem;display:grid;place-items:center;padding:0 4px}
.userchip{display:flex;align-items:center;gap:10px;font-size:.88rem}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.8rem;background:linear-gradient(135deg,var(--brand-a),var(--brand-b));color:#fff}
main{padding-block:28px 64px}
.page-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.stack{display:grid;gap:16px}

/* Home */
.hero-card{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;padding:26px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-a) 16%,var(--surface)) 0%,var(--surface) 60%)}
@media (max-width:800px){.hero-card{grid-template-columns:1fr}}
.struct{width:100%;border-collapse:collapse;font-size:.93rem}
.struct td,.struct th{padding:7px 4px;border-bottom:1px solid var(--line-soft);text-align:left}
.struct th{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.struct td:last-child,.struct th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.struct tr.total td{font-weight:700;border-bottom:0}
.comp-card{display:grid;gap:10px;cursor:pointer;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px}
.comp-card:hover{border-color:var(--blue)}
.comp-card .code{font-family:var(--f-mono);font-size:.75rem;color:var(--cyan)}
.comp-card h4{font-size:1rem;font-weight:600}
.meter{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}

/* Exam */
.exam{display:grid;gap:16px}
.exam-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.timer{font-family:var(--f-mono);font-size:1.15rem;font-variant-numeric:tabular-nums;padding:4px 12px;border-radius:8px;background:var(--surface-2)}
.timer.low{color:var(--bad);background:var(--bad-bg)}
.progress{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;flex-basis:100%}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-a),var(--brand-b));transition:width .3s}
.qlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.qlayout.with-ctx{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:860px){.qlayout.with-ctx{grid-template-columns:minmax(0,1fr)}}
.passage{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px;font-size:1.02rem;line-height:1.7;max-height:60vh;overflow:auto}
.passage .eyebrow{display:block;margin-bottom:8px}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:18px}
.qnum{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stem{font-size:1.1rem;font-weight:500;line-height:1.6}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:12px 14px;cursor:pointer;font-size:1rem;line-height:1.5}
.opt .lt{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;background:var(--surface-2);border:1px solid var(--line);font-size:.9rem}
.opt:hover{border-color:var(--blue)}
.opt[aria-pressed="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--bg-2))}
.opt[aria-pressed="true"] .lt{background:var(--blue);color:#fff;border-color:var(--blue)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.right .lt{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .lt{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt[disabled]{cursor:default}
.qfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px}
.qmap button{height:32px;border-radius:7px;border:1px solid var(--line);background:var(--bg-2);font-size:.74rem;font-family:var(--f-mono);cursor:pointer;color:var(--muted)}
.qmap button.done{background:color-mix(in srgb,var(--blue) 22%,var(--bg-2));color:var(--fg);border-color:color-mix(in srgb,var(--blue) 50%,var(--line))}
.qmap button.cur{outline:2px solid var(--cyan);outline-offset:1px}
.qmap button.pending{opacity:.45;border-style:dashed}
.qmap .sec{grid-column:1/-1;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:600}

/* Capsule */
.capsule{border:1px solid color-mix(in srgb,var(--cyan) 40%,var(--line));border-radius:16px;overflow:hidden;background:var(--surface)}
.capsule-head{display:flex;gap:14px;align-items:center;padding:16px 20px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand-a) 22%,var(--surface)),color-mix(in srgb,var(--brand-b) 14%,var(--surface)))}
.capsule-head .ico{width:40px;height:40px;flex:none}
.capsule-body{padding:18px 20px;display:grid;gap:14px}
.capsule-body ol{margin:0;padding-left:20px;display:grid;gap:4px}
.capsule .why{border-left:3px solid var(--ok);padding:8px 12px;background:var(--ok-bg);border-radius:0 8px 8px 0}
.capsule .norm{font-size:.86rem;color:var(--muted)}
.feedback{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:12px}

/* Results */
.score-big{font-family:var(--f-display);font-weight:800;font-size:3.4rem;line-height:1;font-variant-numeric:tabular-nums}
.bars{display:grid;gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 54px;gap:12px;align-items:center;font-size:.92rem}
.bar-row .track{height:12px;border-radius:6px;background:var(--surface-2);position:relative}
.bar-row .track i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b))}
.bar-row .track i.badfill{background:var(--bad)}
.bar-row .track i.warnfill{background:var(--warn)}
.bar-row .val{text-align:right;font-family:var(--f-mono);font-size:.85rem}
.bar-row .cut{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--warn)}
@media (max-width:520px){.bar-row{grid-template-columns:1fr 54px}.bar-row .track{grid-column:1/-1;grid-row:2}}

/* Admin */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:820px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:4px}
.kpi .v{font-family:var(--f-display);font-weight:700;font-size:1.9rem;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:.84rem;color:var(--muted)}
.kpi.alert{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.kpi.alert .v{color:var(--warn)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.subtabs button{border:0;background:transparent;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--cyan)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:28px;text-align:center;color:var(--muted);display:grid;gap:6px;justify-items:center}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-family:var(--f-body);font-size:11px}
.chart .grid line{stroke:var(--line-soft)}
.toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 32px));font-size:.93rem}
.cfg-table input{width:72px;text-align:right}
.dx-comp{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:grid;gap:12px}
.dx-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dx-head h4{font-size:1.1rem}
.dx-tema{border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-2)}
.dx-tema summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 14px;cursor:pointer;font-weight:600;list-style:none}
.dx-tema summary::-webkit-details-marker{display:none}
.dx-tema summary::after{content:"+";font-family:var(--f-mono);color:var(--muted)}
.dx-tema[open] summary::after{content:"–"}
.dx-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:4px 14px 14px;font-size:.94rem}
@media (max-width:760px){.dx-body{grid-template-columns:minmax(0,1fr)}}
.dx-body ol,.dx-q{margin:6px 0 0;padding-left:18px;display:grid;gap:6px}
.dx-k{font-family:var(--f-display);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.dx-body .norm{font-size:.86rem;color:var(--muted);margin-top:6px}
.dx-reco{border-left:3px solid var(--cyan);padding:8px 12px;background:color-mix(in srgb,var(--cyan) 8%,transparent);border-radius:0 8px 8px 0;font-size:.94rem}
.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--faint)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}