/* Renovación 2026: espacio de estudio claro, con navegación persistente. */
body.app{
  --paper:#f6f7f3;--paper-soft:#fff;--paper-2:#e9eeea;--paper-line:#dce3de;
  --wine:#216459;--wine-dark:#174c43;--sage:#307b60;--sage-dark:#205b45;
  --sage-bg:#e5f2e9;--gold:#88733b;--text:#203a36;--text-soft:#687873;
  --ink:#142b2a;--ink-2:#203c37;--error:#a53c37;--error-bg:#fbeae7;
  padding:0;background:var(--paper);font-family:var(--sans);color:var(--text);
}
body.app::before{display:none}
body.app>.frame{max-width:none;display:flex;min-height:100vh}
.sidebar{width:248px;flex:none;background:#142b2a;color:#d5e2db;padding:34px 22px 24px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:10;overflow-y:auto}
.app-brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;font-size:21px;font-weight:650;letter-spacing:-.7px}
.brand-mark{display:flex;position:relative;align-items:center;justify-content:center;width:44px;height:47px;border:1px solid #6f8d80;border-radius:12px;font:22px Georgia,serif;color:#e4c998}
.brand-mark>span{position:absolute;font:15px var(--sans);top:1px;right:3px}
.brand-caption{display:block;font-size:9px;letter-spacing:2.1px;font-weight:500;color:#a0b9ad;margin-top:5px}
.sidebar-context{font-size:12px;display:flex;align-items:center;gap:7px;margin:28px 0 38px;color:#d8e4dd}
.sidebar-context>span:last-child{color:#8ba79a;margin-left:auto}
.live-dot,.workspace-status i{width:6px;height:6px;border-radius:50%;background:#afd6ae;display:inline-block}
.nav-label{font-size:9px;letter-spacing:1.4px;color:#8ca59b;margin:0 12px 14px}
nav.tabs{display:flex;flex-direction:column;gap:7px;margin:0}
nav.tabs{flex-wrap:nowrap}
nav.tabs button,nav.tabs button.active{display:flex;align-items:center;gap:12px;border:0;border-radius:8px;padding:13px 12px;background:transparent;box-shadow:none;color:#b7cdc2;text-align:left;font:500 13px var(--sans);transition:background .15s,color .15s}
nav.tabs button>span{font-size:20px;min-width:22px;text-align:center;font-weight:400;line-height:1}
nav.tabs button[data-view="correction"]>span{font-size:16px}
nav.tabs button.active{background:#29453e;color:#fff}
nav.tabs button:not(.active):hover{transform:none;color:#fff;background:#223f37}
.sidebar-bottom{margin-top:auto;padding-top:45px}
.sidebar-tip{border:1px solid #38554a;border-radius:10px;padding:18px 16px;margin-bottom:24px;background:linear-gradient(135deg,#253f36,#19322e)}
.sidebar-tip>span{font-size:8px;letter-spacing:1.5px;color:#d9c398}
.sidebar-tip p{font:23px/1.35 Georgia,serif;color:#eef0e4;margin:12px 0 2px}
.licencia-badge{display:block;color:#c6dacd;background:transparent;border:0;border-top:1px solid #345046;border-radius:0;font-size:10px;line-height:1.6;padding:18px 0 0;margin:0;letter-spacing:.3px;text-transform:none;overflow-wrap:anywhere}
.independent-note{font-size:10px;color:#9db5a7;line-height:1.7;margin:10px 0}
.sidebar-bottom>a{font-size:10px;color:#c8d9ce;text-decoration:none}
@media(min-width:821px) and (max-height:800px){.sidebar{padding-top:25px;padding-bottom:20px}.sidebar-context{margin:24px 0 28px}.sidebar-bottom{padding-top:24px}.sidebar-tip{padding:14px;margin-bottom:18px}.sidebar-tip p{font-size:21px;margin-top:9px}.licencia-badge{padding-top:12px}}
.workspace{width:calc(100% - 248px);margin-left:248px;min-width:0}
.workspace-bar{height:81px;margin:0 42px;border-bottom:1px solid var(--paper-line);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:1.4px;color:#788780}
.workspace-bar b{font-weight:600;color:#244c42;margin-left:6px}
.workspace-status{font-size:11px;letter-spacing:0;display:flex;align-items:center;gap:8px;color:#62776c}
.workspace-status i{background:#5b9d76}
main.sheet{background:transparent;padding:38px 42px 24px;box-shadow:none;border-radius:0;max-width:1320px;margin:auto;min-height:calc(100vh - 150px)}
.workspace-foot{margin:10px 42px 0;padding:22px 0;border-top:1px solid var(--paper-line);display:flex;justify-content:space-between;gap:14px;font-size:10px;color:#809087}
.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.7px;color:#668377;margin:0 0 10px}
.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
h2.section-title{font:500 clamp(25px,2.7vw,37px)/1.2 Georgia,serif;color:#213d35;letter-spacing:-.8px;margin:0 0 10px}
p.section-sub{font-size:13px;line-height:1.7;margin:0 0 24px;color:#6b7c72;max-width:760px}
.dashboard-heading .section-sub{margin:0}
.edition-tag{font-size:8px;letter-spacing:1.3px;white-space:nowrap;padding:9px 12px;border:1px solid #d8dfd5;border-radius:6px;color:#6f8073}
.study-banner{position:relative;display:flex;overflow:hidden;justify-content:space-between;background:#e8eddf;border:1px solid #dce4d3;border-radius:16px;padding:30px 34px;min-height:240px}
.banner-label{font-size:9px;letter-spacing:1.6px;color:#65816b;font-weight:600}
.study-banner h3{font:500 clamp(26px,2.9vw,39px)/1.15 Georgia,serif;letter-spacing:-.8px;margin:15px 0 12px;color:#264d3b}
.study-banner p{font-size:12px;color:#61735f;line-height:1.6;margin:0 0 22px}
body.app button.primary{background:#245b48;border-radius:7px;font-size:12px;padding:12px 18px}
body.app button.primary:hover{background:#153e31}
.study-banner button.primary>span{margin-left:24px}
.banner-art{width:235px;flex:none;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 20px 0 32px;margin-left:24px;color:#456b48}
.art-ring{position:absolute;width:270px;height:270px;border:1px solid #becdb1;border-radius:50%;left:5px;top:-17px;pointer-events:none}
.art-ring:after{content:"";position:absolute;border:1px solid #c6d3bc;border-radius:50%;inset:18px}
.art-caption{position:relative;font-size:8px;letter-spacing:1.8px}
.art-number{position:relative;font:100px/.95 Georgia,serif;letter-spacing:-8px;margin:22px 0 18px}
.art-number>span{font:24px Georgia,serif;letter-spacing:-1px;margin-left:8px;color:#899b78}
.art-line{height:3px;width:150px;background:linear-gradient(to right,#53784c 33%,#cbd6be 33%);position:relative}
.art-label{position:relative;font-size:7px;letter-spacing:1.1px;margin-top:12px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:30px 0 16px}
.section-heading h3{font-size:15px;font-weight:600;margin:0;letter-spacing:-.2px}
.section-heading>span{font-size:10px;color:#7e8d83}
.modules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.module-card{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:16px;min-width:0;background:#fff;border:1px solid #dfe5dd;border-radius:12px;padding:22px;min-height:258px;transition:transform .18s,border-color .18s,box-shadow .18s}
.module-card:hover{transform:translateY(-3px);border-color:#8ca68b;box-shadow:0 7px 20px #183c2810}
.module-card .seal{width:44px;height:44px;border-radius:11px;font-size:18px;background:#eaf0e6;color:#3f6e50;font-weight:500}
.module-card[data-go="typing"]{order:0}.module-card[data-go="correction"]{order:1}.module-card[data-go="trivia"]{order:2}
.module-card[data-go="correction"] .seal{background:#f7eee0;color:#9b7845}
.module-card[data-go="trivia"] .seal{background:#e8eef6;color:#587698;font-size:14px;letter-spacing:-1px}
.card-step{font-size:8px;font-weight:600;letter-spacing:1.2px;color:#75877a;width:100%;margin-top:-2px}
.card-step>span{position:absolute;right:22px;top:26px;color:#8a9c8e;font-size:18px;font-weight:400}
.module-card>span:has(h3){display:flex;flex:1;flex-direction:column}
.module-card h3{font:500 21px Georgia,serif;color:#284b3c;margin:0 0 10px;letter-spacing:-.4px}
.module-card p{font-size:11px;line-height:1.8;color:#748175;margin:0 0 14px}
.card-meta{font-size:8px;letter-spacing:.6px;color:#627667;line-height:1.8;margin-top:auto}
.card-meta i{font-style:normal;margin:0 5px;color:#b1bcae}
.module-card .score-pill{font-size:9px;font-weight:500;padding:5px 8px;margin:0;border-radius:5px}
.score-pill.none{background:#f1f4ef;color:#829080}
.progress-link{width:100%;display:flex;align-items:center;gap:15px;text-align:left;background:transparent;border:1px solid #dce3da;border-radius:10px;margin-top:20px;padding:17px 20px;font:12px var(--sans);color:#314e3e;cursor:pointer}
.progress-symbol{font-size:23px;color:#6b8d6b}.progress-link>span:nth-child(2)>span{display:block;font-size:10px;color:#7d897d;margin-top:5px}
.progress-action{margin-left:auto;white-space:nowrap;font-size:10px}.progress-link:hover{background:#edf1e8}
.rules-box{background:#fff;border:1px solid #dfe5dd;border-radius:10px;padding:20px 24px}
.rules-box h4{color:#5c785d;font-size:10px;letter-spacing:1px}.rules-box ul{font-size:11px;line-height:2}
.mode-card,.tema-row{background:#fff;border-color:#dce3da;border-radius:10px}.mode-card{padding:26px}.mode-card h4{font:24px Georgia,serif;color:#284b3c;margin:7px 0 12px}.mode-card p{line-height:1.8}
.back-link{color:#5a7964;font-size:11px;margin-bottom:24px}
.binary-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.binary-options .opt{padding:24px;display:flex;align-items:center;justify-content:center;gap:14px;min-height:96px;border:1.5px solid #cedacf;border-radius:12px;background:#fff;font-size:18px;margin:0;color:#345442}
.binary-options .opt:hover:not(:disabled){border-color:#447b60;background:#f0f5ec}
.binary-options .opt.chosen{background:#e5efdf;border-color:#447b60}
.binary-options .opt.correct{background:#e5f2e9;border-color:#307b60}.binary-options .opt.wrong{background:#fbeae7;border-color:#a53c37}
.binary-symbol{font-size:27px;font-weight:400}.question-instruction{font-size:11px;color:#7d8d7e;margin:28px 0 14px}
.q-prompt{font:500 clamp(22px,2.4vw,30px)/1.5 Georgia,serif;color:#233f34;max-width:950px;margin:0}
.q-tema{color:#618469;font-size:10px;margin-top:22px}.feedback-box{background:#eaf0e3;border-color:#85a56d;padding:18px;font-size:13px;border-radius:7px;line-height:1.8}
.quiz-footer{margin-top:28px;padding-top:20px;border-top:1px solid #dce3da}.typing-timer{border-radius:7px}.progress-bar{height:5px}.stat,.breakdown,.verdict{border-radius:10px}
button,input,textarea{font-family:var(--sans)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bf924a;outline-offset:4px}
.gate-overlay{background:#142b2af5;backdrop-filter:blur(10px);padding:24px;overflow-y:auto}
.gate-card{background:#f6f7f0;border:1px solid #d5dfcf;border-radius:20px;max-width:450px;padding:36px;box-shadow:0 24px 80px #071b1950}
.gate-logo{display:inline-flex;align-items:center;justify-content:center;border:1px solid #acbda6;border-radius:9px;width:62px;height:45px;color:#315440;font:21px Georgia,serif;margin-bottom:20px}
.gate-card h2{font:35px/1.15 Georgia,serif;color:#284b3b;letter-spacing:-.7px;margin:13px 0 20px}
.gate-card .gate-eyebrow{font:9px var(--sans);letter-spacing:1.5px;color:#678465}.gate-card>p{font-size:12px;color:#71816b}.gate-label{display:block;font-size:10px;font-weight:600;margin:25px 0 9px;color:#4c694b}
.gate-card input{background:#fff;border:1px solid #cbd7c6;border-radius:7px;padding:14px 12px;font-size:15px;width:100%;letter-spacing:1px;color:#2d4f3c}.gate-card .gate-foot{font-size:11px;line-height:1.8}
@media(min-width:1450px){main.sheet{padding-top:48px}.study-banner{min-height:280px;padding:38px 42px}.module-card{min-height:280px;padding:26px}}
@media(max-width:1100px){.sidebar{width:215px;padding:28px 16px}.workspace{width:calc(100% - 215px);margin-left:215px}main.sheet{padding:30px 26px 22px}.workspace-bar,.workspace-foot{margin-left:26px;margin-right:26px}.banner-art{width:180px;padding-left:15px}.art-number{font-size:85px}.edition-tag{display:none}.module-card{padding:17px}.module-card h3{font-size:19px}.card-meta{font-size:7px}.module-card p{font-size:10px}}
@media(max-width:820px){.sidebar{position:static;width:100%;padding:18px 20px 0;overflow:visible}.app-brand{font-size:19px}.brand-mark{width:35px;height:38px;font-size:19px}.sidebar-context{position:absolute;right:20px;top:26px;margin:0;gap:6px}.sidebar-context>span:last-child{margin:0}.nav-label,.sidebar-bottom{display:none}body.app>.frame{display:block}nav.tabs{flex-direction:row;overflow-x:auto;margin-top:20px;gap:4px;padding-bottom:12px}nav.tabs button,nav.tabs button.active{flex:none;font-size:11px;padding:10px;gap:7px}nav.tabs button>span{font-size:16px;min-width:16px}.workspace{margin:0;width:100%}.workspace-bar{height:58px}.workspace-status{font-size:10px}.study-banner{padding:25px}.banner-art{width:180px}.module-card{min-height:255px}.modules-grid{gap:12px}.module-card h3{font-size:20px}.module-card p{font-size:11px}.card-meta{font-size:8px}}
@media(max-width:600px){main.sheet{padding:26px 18px 20px}.workspace-bar,.workspace-foot{margin-left:18px;margin-right:18px}.workspace-bar{font-size:8px;letter-spacing:.9px}.workspace-status{font-size:9px;max-width:140px}.dashboard-heading{margin-bottom:22px}h2.section-title{font-size:29px;max-width:360px}.dashboard-heading .section-sub{font-size:12px}.eyebrow{font-size:8px}.study-banner{padding:24px;min-height:270px}.study-banner>div:first-child{position:relative;z-index:1}.study-banner h3{font-size:30px}.study-banner p{max-width:230px;font-size:11px}.banner-art{position:absolute;right:-135px;top:40px;opacity:.28;pointer-events:none}.banner-label{font-size:7px}.modules-grid{grid-template-columns:1fr}.module-card{min-height:0;padding:22px;gap:12px}.module-card p{font-size:12px}.card-meta{font-size:9px}.module-card h3{font-size:24px}.module-card .score-pill{position:absolute;top:26px;right:20px}.card-step>span{display:none}.progress-link{padding:17px 15px;gap:10px;flex-wrap:wrap}.progress-link>span:nth-child(2){flex:1}.progress-action{margin-left:33px}.section-heading>span{font-size:9px}.section-heading h3{font-size:14px}.rules-box{padding:18px}.rules-box ul{padding-left:15px}.workspace-foot{font-size:9px}.workspace-foot>span{white-space:nowrap}.binary-options{gap:10px}.binary-options .opt{padding:18px 10px;min-height:85px;font-size:16px;gap:8px}.quiz-footer{align-items:flex-start;flex-wrap:wrap}.quiz-footer .btn-row{flex-wrap:wrap}.gate-card{padding:28px;}.gate-card h2{font-size:32px}.mode-grid{grid-template-columns:1fr}.stat-row{flex-wrap:wrap}.stat{min-width:100px}.tema-row{gap:8px;padding:12px 10px}.tema-row .tname{font-size:12px}.tema-row .tcount{font-size:10px}.typing-input{max-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
