/* ===== estilos base ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{--pri:#1a3a6b;--sec:#e05c1a;--acc:#f5c842;--ok:#27ae60;--err:#c0392b;--bg:#f4f6fa;--card:#fff;--txt:#222;--red:#c0392b}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh}
.screen{display:none;flex-direction:column;min-height:100vh}
.screen.active{display:flex}

/* SPLASH */
#splash{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:30px;text-align:center}
#splash h2{color:var(--pri);font-size:1.05rem;font-weight:700}
#splash p{font-size:.78rem;color:#555;line-height:1.55;max-width:340px}
#splash .legal{font-size:.72rem;color:#999;max-width:340px}
#splash button{background:var(--pri);color:#fff;border:none;padding:13px 40px;
  border-radius:8px;font-size:1rem;cursor:pointer;font-weight:700;margin-top:4px}
#splash button:hover{background:#254f9a}

/* TOP BAR */
/* HEADER LOGO */
.hdr-logo{display:flex;align-items:center;flex-shrink:0}
.hdr-logo svg,.hdr-logo img{display:block}
.top-bar h1{font-size:.85rem;font-weight:700;flex:1;margin:0}

.top-bar{background:var(--pri);color:#fff;display:flex;align-items:center;
  gap:12px;padding:10px 16px;position:sticky;top:0;z-index:100;min-height:52px}
.top-bar h1{font-size:.95rem;font-weight:700;flex:1}
.btn-back{background:rgba(255,255,255,.18);border:none;color:#fff;padding:6px 14px;
  border-radius:6px;cursor:pointer;font-size:.88rem}
.btn-back:hover{background:rgba(255,255,255,.32)}

/* MENU */
.menu-hero{background:linear-gradient(150deg,var(--pri) 0%,#1e3d7a 100%);
  padding:28px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:14px}
.prog-bar-wrap{width:100%;max-width:420px;background:rgba(255,255,255,.15);border-radius:10px;overflow:hidden;height:10px}
.prog-bar-fill{height:10px;background:var(--acc);transition:.4s}
.prog-label{color:rgba(255,255,255,.85);font-size:.8rem}
.prog-detail{background:rgba(255,255,255,.1);border-radius:8px;padding:10px 14px;
  width:100%;max-width:420px;font-size:.78rem;color:rgba(255,255,255,.9)}
.prog-detail-row{display:flex;justify-content:space-between;padding:2px 0}
#btn-prog-toggle{background:rgba(255,255,255,.15);border:none;color:#fff;padding:4px 14px;
  border-radius:6px;cursor:pointer;font-size:.78rem}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;padding:18px 16px;max-width:700px;margin:0 auto;width:100%}
.menu-card{background:var(--card);border-radius:12px;padding:16px 12px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.09);cursor:pointer;border:none;
  transition:transform .15s,box-shadow .15s;text-align:center}
.menu-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.menu-card .icon{font-size:2rem}
.menu-card span{font-size:.82rem;font-weight:600;color:var(--pri)}

/* ── CONTENT ACCORDION ── */
.content-wrap{flex:1;padding:14px 14px 24px;max-width:820px;margin:0 auto;width:100%}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tab-btn{background:#e8edf5;border:none;padding:7px 14px;border-radius:20px;
  cursor:pointer;font-size:.82rem;color:var(--pri);font-weight:600;transition:.15s}
.tab-btn.active,.tab-btn:hover{background:var(--pri);color:#fff}
.tema-panel{display:none}
.tema-panel.active{display:block}
.tema-panel > h2{color:var(--pri);font-size:1.1rem;margin-bottom:12px;padding-bottom:6px;
  border-bottom:3px solid var(--red)}

/* Accordion card (estilo Penal app) */
.acc-card{background:#fff;border-radius:10px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);overflow:hidden;border-left:4px solid var(--red)}
.acc-header{display:flex;align-items:center;gap:12px;padding:14px 16px;
  cursor:pointer;user-select:none;transition:background .15s}
.acc-header:hover{background:#fafafa}
.acc-icon{font-size:1.5rem;flex-shrink:0;width:36px;text-align:center}
.acc-titles{flex:1}
.acc-title{font-size:.92rem;font-weight:700;color:#1e2d40;line-height:1.3}
.acc-subtitle{font-size:.75rem;color:var(--pri);margin-top:2px}
.acc-arrow{color:#aaa;font-size:.85rem;transition:transform .25s;flex-shrink:0}
.acc-card.open .acc-arrow{transform:rotate(180deg)}
.acc-body{display:none;padding:14px 18px 18px;border-top:1px solid #f0f0f0}
.acc-card.open .acc-body{display:block}
.acc-pdf-bar{margin-bottom:14px}
.acc-pdf-link{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:10px;border:1px solid #b9cbe3;background:#fff;color:#173f7a;font-weight:700;text-decoration:none;font-size:.85rem;cursor:pointer}
.acc-pdf-link:hover{background:#eaf2ff}

/* Rich content boxes (inside accordion body) */
.acc-body h2{color:var(--pri);font-size:1rem;margin-bottom:10px}
.acc-body h3{color:var(--pri);font-size:.88rem;margin:12px 0 6px;border-left:3px solid var(--acc);padding-left:8px}
.acc-body table{width:100%;border-collapse:collapse;font-size:.82rem;margin:8px 0}
.acc-body th{background:#eef2fb;color:var(--pri);padding:7px 8px;text-align:left;font-size:.8rem}
.acc-body td{padding:6px 8px;border-bottom:1px solid #e8edf5;line-height:1.45;vertical-align:top}
.acc-body tr:hover td{background:#fafcff}
.info-box{background:#eef2fb;border-radius:8px;padding:10px 13px;margin:8px 0;font-size:.83rem;line-height:1.5}
.nemo{background:#fffbeb;border:1px solid var(--acc);border-radius:8px;padding:10px 13px;margin:10px 0;font-size:.83rem;line-height:1.5}
.nemo::before{content:"🧠 ";font-style:normal}
.alerta{background:#fdf2f2;border:1px solid var(--err);border-radius:8px;padding:8px 13px;margin:8px 0;font-size:.83rem;line-height:1.5}
.clave{background:#f0fdf4;border:1px solid var(--ok);border-radius:8px;padding:8px 13px;margin:8px 0;font-size:.83rem;line-height:1.5}
.nota-encuadre{background:#f4f5f7;border:1px dashed #9aa5b1;border-radius:8px;padding:8px 13px;margin:8px 0 14px;font-size:.8rem;line-height:1.5;color:#4a5568;font-style:italic}
.acc-body ul{padding-left:18px;font-size:.84rem;line-height:1.6}
.acc-body li{margin-bottom:3px}
.acc-body b{color:#1e2d40}

/* ── FLASHCARDS ── */
.fc-setup{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.fc-setup label{font-size:.85rem;font-weight:600;color:var(--pri)}
.fc-setup select,.fc-setup button{padding:7px 14px;border-radius:8px;font-size:.85rem;cursor:pointer}
.fc-setup select{border:2px solid var(--pri);color:var(--pri);background:#fff}
.fc-setup button{background:var(--pri);color:#fff;border:none}
.card-scene{width:100%;max-width:500px;margin:0 auto;perspective:900px}
.card-3d{width:100%;min-height:220px;position:relative;transform-style:preserve-3d;transition:.5s;cursor:pointer}
.card-3d.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;background:var(--card);border-radius:14px;
  padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;backface-visibility:hidden;box-shadow:0 4px 18px rgba(0,0,0,.12);min-height:220px}
.card-back{transform:rotateY(180deg);background:linear-gradient(135deg,var(--pri),#254f9a);color:#fff}
.card-face .q-text{font-size:1.05rem;font-weight:600;line-height:1.5}
.card-back .a-text{font-size:.92rem;line-height:1.6}
.fc-counter{text-align:center;margin:12px 0;font-size:.85rem;color:#777}

/* ── BUTTONS ── */
.btn-row{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.btn-pri{background:var(--pri);color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}
.btn-sec{background:var(--sec);color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}
.btn-acc{background:var(--acc);color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}
.btn-ok{background:var(--ok);color:#fff;border:none;padding:10px 24px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600}

/* ── TEST ── */
.test-setup-form{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--pri);margin-bottom:5px}
.form-group select,.form-group input{width:100%;padding:9px 12px;border:2px solid #dde;border-radius:8px;font-size:.9rem}
.q-box{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:12px}
.q-meta{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:700}
.badge-f{background:#d5f0e0;color:#1a7a40}.badge-m{background:#fff3cd;color:#856404}.badge-d{background:#fde8e8;color:#8b1a1a}.badge-t{background:#dce8ff;color:var(--pri)}
.q-text{font-size:.97rem;font-weight:600;margin-bottom:14px;line-height:1.5}
.opt-btn{display:block;width:100%;text-align:left;padding:11px 14px;margin-bottom:8px;
  border:2px solid #dde;border-radius:8px;background:#fff;cursor:pointer;font-size:.88rem;transition:.15s;line-height:1.4}
.opt-btn:hover:not(:disabled){border-color:var(--pri);background:#f0f4ff}
.opt-btn.correct{background:#d5f0e0;border-color:var(--ok);color:#1a5c30}
.opt-btn.wrong{background:#fde8e8;border-color:var(--err);color:#7a1a1a}
.opt-btn:disabled{cursor:default}
.exp-box{background:#fff8e6;border-left:4px solid var(--acc);border-radius:6px;padding:12px;margin-top:8px;font-size:.85rem;line-height:1.5}
.test-nav-row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px}.test-mark-btn{border:1px solid #d6e0ee;background:#fff;color:var(--pri);font-weight:800}.test-mark-btn.marked{background:#fff4d2;border-color:#f0c449;color:#8a5b00}.test-mark-btn .star{font-size:1.05rem;margin-right:4px}.test-nav-hint{width:100%;text-align:center;font-size:.78rem;color:#6a7b90;margin-top:4px}.opt-btn.chosen{box-shadow:0 0 0 2px rgba(32,74,135,.12)}.review-item.marked-review{border-left:4px solid #f0c449}.mini-review-count{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#fff4d2;color:#8a5b00;font-size:.78rem;font-weight:900;margin-left:8px}
.prog-strip{height:6px;background:#dde;border-radius:3px;margin-bottom:14px}
.prog-strip-fill{height:6px;background:var(--pri);border-radius:3px;transition:.3s}

/* ── VF ── */
.vf-setup{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.vf-setup label{font-size:.85rem;font-weight:600;color:var(--pri)}
.vf-setup select{padding:7px 14px;border-radius:8px;font-size:.85rem;cursor:pointer;border:2px solid var(--pri);color:var(--pri);background:#fff}
.vf-timer{height:6px;background:#dde;border-radius:3px;margin-bottom:14px;overflow:hidden}
.vf-timer-fill{height:6px;background:var(--sec);border-radius:3px;transition:width .1s linear}
.vf-stmt{font-size:1.05rem;font-weight:600;text-align:center;padding:20px;background:#fff;
  border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:16px;line-height:1.5;
  min-height:100px;display:flex;align-items:center;justify-content:center}
.vf-btns{display:flex;gap:14px;justify-content:center}
.vf-btn{padding:14px 36px;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:.15s}
.vf-btn-v{background:var(--ok);color:#fff}.vf-btn-f{background:var(--err);color:#fff}
.vf-exp{background:#f0f8ff;border-radius:8px;padding:12px;margin-top:12px;font-size:.85rem;line-height:1.5;border-left:4px solid var(--pri)}
.vf-score{text-align:center;padding:30px 20px}
.vf-score .big{font-size:3rem;font-weight:800;color:var(--pri)}

/* ── FILL ── */
.fill-stmt{font-size:.97rem;line-height:2.1;background:#fff;border-radius:10px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:10px}
.fill-input{border:none;border-bottom:2px solid var(--pri);background:#f0f4ff;padding:3px 8px;border-radius:4px;font-size:.95rem;width:140px;text-align:center}
.fill-input.ok{border-bottom-color:var(--ok);background:#d5f0e0}
.fill-input.err{border-bottom-color:var(--err);background:#fde8e8}
.fill-select{border:none;border-bottom:2px solid var(--pri);background:#f0f4ff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23173a6b" d="M7 10l5 5 5-5z"/></svg>') no-repeat right 6px center/14px;padding:3px 24px 3px 8px;border-radius:4px;font-size:.95rem;max-width:220px;text-align:center;cursor:pointer;appearance:none;-webkit-appearance:none;font-weight:700;color:#173a6b}
.fill-select.ok{border-bottom-color:var(--ok);background-color:#d5f0e0}
.fill-select.err{border-bottom-color:var(--err);background-color:#fde8e8}
.fill-correct-hint{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:10px;background:#fde8e8;color:var(--err);font-weight:700;font-size:.85rem;white-space:nowrap}
.fill-counter{font-size:.85rem;color:#777;text-align:center;margin-bottom:10px}

/* ── MATCH ── */
.match-grid{display:flex;gap:14px}
.match-col{flex:1;display:flex;flex-direction:column;gap:8px}
.match-card{padding:10px 12px;border:2px solid #dde;border-radius:8px;background:#fff;cursor:pointer;font-size:.82rem;text-align:center;transition:.15s;line-height:1.3}
.match-card.selected{border-color:var(--acc);background:#fffbeb}
.match-card.matched{border-color:var(--ok);background:#d5f0e0;cursor:default;opacity:.7}
.match-card.wrong{border-color:var(--err);background:#fde8e8}
.match-timer{text-align:center;font-size:1.2rem;font-weight:700;color:var(--pri);margin-bottom:10px}

/* ── CRUCIGRAMA ── */
.cw-setup{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.cw-setup label{font-size:.85rem;font-weight:600;color:var(--pri)}
.cw-setup select{padding:7px 14px;border-radius:8px;font-size:.85rem;cursor:pointer;border:2px solid var(--pri);color:var(--pri);background:#fff}
.cw-grid-wrap{overflow-x:auto;margin-bottom:14px}
.cw-grid{display:grid;border:2px solid var(--pri);width:fit-content}
.cw-cell{width:28px;height:28px;position:relative;background:#fff;border:1px solid #aab}
.cw-cell.black{background:#222}
.cw-cell input{width:100%;height:100%;border:none;text-align:center;text-transform:uppercase;font-size:.75rem;font-weight:700;background:transparent;outline:none;cursor:pointer;padding:0}
.cw-cell input:focus{background:#fffbeb}
.cw-cell .num{position:absolute;top:1px;left:2px;font-size:8px;color:#555;pointer-events:none}
.cw-cell input.ok{background:#d5f0e0}.cw-cell input.err{background:#fde8e8}
.cw-clues{display:flex;gap:14px;flex-wrap:wrap}
.clue-col{flex:1;min-width:200px}
.clue-col h4{color:var(--pri);margin-bottom:6px;font-size:.88rem}
.clue-item{font-size:.8rem;padding:3px 0;line-height:1.4}
.clue-item strong{color:var(--pri)}
.cw-result{padding:12px;border-radius:8px;text-align:center;font-weight:700;margin-bottom:10px;font-size:.9rem}

/* ── EXAMEN ── */
.exam-nav{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:#fff;border-radius:10px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.exam-nav-btn{width:34px;height:34px;border:2px solid #dde;border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;font-weight:700;transition:.15s}
.exam-nav-btn.answered{background:#d5f0e0;border-color:var(--ok)}
.exam-nav-btn.flagged{background:#fff3cd;border-color:var(--acc)}
.exam-nav-btn.current{border-color:var(--pri);box-shadow:0 0 0 2px rgba(26,58,107,.3)}
.exam-timer{text-align:right;font-size:1rem;font-weight:700;color:var(--pri);padding:6px 10px}
.exam-timer.warning{color:var(--err)}
.flag-btn{background:var(--acc);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.82rem}

/* ── RESULTS / SCORES ── */
.results-box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:12px;text-align:center}
.results-box .big-score{font-size:3rem;font-weight:800;color:var(--pri)}
.results-box .sub-label{font-size:.85rem;color:#777;margin-top:4px}
.stat-row{display:flex;justify-content:space-around;margin:14px 0;flex-wrap:wrap;gap:10px}
.stat{text-align:center}.stat .num{font-size:1.5rem;font-weight:800;color:var(--pri)}.stat .lbl{font-size:.75rem;color:#777}
.review-item{background:#fff;border-radius:10px;padding:14px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.review-item .q{font-size:.9rem;font-weight:600;margin-bottom:8px}
.ans-ok{color:var(--ok);font-weight:600}.ans-err{color:var(--err);font-weight:600}
.score-tema{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.score-tema .t-name{flex:1;font-size:.85rem;font-weight:600;color:var(--pri);white-space:nowrap}
.score-tema .bar{flex:2;height:10px;background:#eee;border-radius:5px;overflow:hidden}
.score-tema .bar-fill{height:10px;border-radius:5px;transition:.4s;background:var(--pri)}
.score-tema .pct{width:40px;text-align:right;font-size:.82rem;font-weight:700}

/* PWA BANNER */
#pwa-banner{display:none;background:var(--pri);color:#fff;padding:10px 16px;text-align:center;font-size:.82rem;position:sticky;top:0;z-index:200}
#pwa-banner button{margin-left:12px;background:rgba(255,255,255,.2);border:none;color:#fff;padding:4px 10px;border-radius:6px;cursor:pointer}

@media(max-width:480px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .match-grid{flex-direction:column}
  .cw-cell{width:22px;height:22px}
  .cw-cell input{font-size:.65rem}
}


/* ── CUENTAS ── */
.cloud-status{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;cursor:pointer;
  font-size:.78rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px}
.cloud-dot{width:9px;height:9px;border-radius:50%;background:#f39c12;box-shadow:0 0 0 3px rgba(255,255,255,.10)}
.cloud-dot.on{background:#27ae60}.cloud-dot.off{background:#c0392b}
.cloud-status:hover{background:rgba(255,255,255,.16)}
.auth-panel{background:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(10,36,75,.10);
  border:1px solid #dfe7f2;margin-bottom:16px}
.auth-panel h2{color:var(--pri);font-size:1.05rem;margin-bottom:8px}
.auth-panel p{font-size:.84rem;line-height:1.55;color:#5c6b7c;margin-bottom:12px}
.auth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.auth-card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e2eaf5;border-radius:14px;padding:14px}
.auth-card h3{font-size:.92rem;color:var(--pri);margin-bottom:8px}
.auth-card input{width:100%;padding:10px 12px;border:2px solid #dde;border-radius:10px;margin-bottom:9px;font-size:.9rem}
.auth-card button,.cloud-btn,.btn-login{border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;font-size:.85rem}
.btn-login{background:var(--pri);color:#fff;width:100%}
.auth-card .btn-create{background:var(--sec);color:#fff;width:100%}
.cloud-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.cloud-btn.primary{background:var(--pri);color:#fff}.cloud-btn.secondary{background:#eef3fb;color:var(--pri)}
.cloud-btn.warn{background:#fdf2f2;color:#8b1a1a;border:1px solid #f2b9b9}
.cloud-message{font-size:.82rem;line-height:1.5;margin-top:10px;padding:10px 12px;border-radius:10px;background:#eef6ff;color:#31548b;border:1px solid #d8e7fb}
.cloud-message.err{background:#fdf2f2;color:#8b1a1a;border-color:#f2b9b9}
.student-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:10px}
.student-table th{background:#eef3fb;color:var(--pri);text-align:left;padding:8px}
.student-table td{border-bottom:1px solid #e8edf5;padding:8px;vertical-align:top}
.student-pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#eef3fb;color:var(--pri);font-size:.72rem;font-weight:800}

/* ── MAPA PROGRESIÓN ── */
.mapa-card{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.09);border-left:4px solid #ddd;
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  cursor:pointer;transition:.15s}
.mapa-card.locked{opacity:.5;cursor:not-allowed}
.mapa-card.done{border-left-color:#27ae60}
.mapa-card.active{border-left-color:#e05c1a}
.mapa-card:not(.locked):hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.mapa-num{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;font-weight:900;flex-shrink:0}
.mapa-body h3{font-size:.9rem;font-weight:700;color:#1a3a6b;margin-bottom:4px}
.mapa-bars{display:flex;flex-direction:column;gap:3px}
.mapa-bar-row{display:flex;align-items:center;gap:6px;font-size:.72rem;color:#777}
.mapa-bar-bg{flex:1;height:5px;background:#eee;border-radius:3px;overflow:hidden}
.mapa-bar-fill{height:5px;border-radius:3px;transition:.4s}
.mapa-pct{width:30px;text-align:right;font-weight:700;font-size:.72rem}
.mapa-badge{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:50px;white-space:nowrap}
.mapa-badge-lock{background:#f0f0f0;color:#999}
.mapa-badge-done{background:#d5f0e0;color:#1a7a40}
.mapa-badge-go{background:rgba(224,92,26,.1);color:#e05c1a}
.tema-screen-header{background:#1a3a6b;color:#fff;padding:10px 16px;font-size:.82rem;
  display:flex;align-items:center;gap:10px}
.tema-screen-header strong{flex:1}
.btn-mapa{background:rgba(255,255,255,.18);border:none;color:#fff;padding:5px 12px;
  border-radius:6px;cursor:pointer;font-size:.78rem;white-space:nowrap}


/* ============================================================
   OPOCLICK NIVELES — REDISEÑO PREMIUM / CORPORATIVO
   ============================================================ */
:root{--line:#dfe7f2;--shadow-sm:0 4px 14px rgba(11,38,78,.08);--shadow-md:0 10px 28px rgba(11,38,78,.10);--radius-lg:18px}
body{background:linear-gradient(180deg,#eef3fa 0%,#f8faff 30%,#f4f6fa 100%)}
.top-bar{background:linear-gradient(135deg,var(--pri) 0%,#244d92 100%);min-height:58px;padding:12px 18px;box-shadow:0 8px 18px rgba(11,38,78,.18)}
.top-bar h1{font-size:1rem;font-weight:800;letter-spacing:.01em}
.btn-back{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:10px;font-weight:700;transition:.18s}
.btn-back:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.menu-hero{position:relative;overflow:hidden;box-shadow:0 18px 38px rgba(11,38,78,.22)}
.menu-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 28%),radial-gradient(circle at 85% 30%, rgba(245,200,66,.12), transparent 18%);pointer-events:none}
.menu-hero>*{position:relative;z-index:1}
.prog-bar-wrap{height:12px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.prog-bar-fill{height:12px;background:linear-gradient(90deg,#f5c842 0%,#ffd969 100%)}
#btn-prog-toggle{font-weight:700;letter-spacing:.01em}
.menu-shell{width:100%;max-width:980px;margin:0 auto;padding:20px 16px 28px;display:flex;flex-direction:column;gap:18px}
.menu-section{background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);border:1px solid #e8edf5;border-radius:18px;box-shadow:0 8px 24px rgba(11,38,78,.07);padding:18px 18px 16px;position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.menu-section.study-zone{border-top:5px solid #204a87}.menu-section.games-zone,.menu-section.games-zone-specific{border-top:5px solid #f0a52b}.menu-section.exam-zone{border-top:5px solid #2f9e78}
.menu-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.menu-section-head h2{margin:4px 0 6px;color:var(--pri);font-size:1.18rem;line-height:1.25;font-weight:900}
.menu-section-head p{margin:0;color:#5c6b7c;font-size:.86rem;line-height:1.5;max-width:680px}
.section-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6a7b90;background:linear-gradient(180deg,#f7f9fd 0%,#edf2fb 100%);border:1px solid #dce5f1;border-radius:999px;padding:5px 10px}
.section-badge{display:inline-flex;align-items:center;white-space:nowrap;background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);border:1px solid #dfe7f2;color:var(--pri);padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;padding:0;max-width:none}
.menu-grid.study-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.menu-grid.exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-card{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;box-shadow:0 3px 12px rgba(15,23,42,.08);cursor:pointer;border:1px solid #e7edf6;transition:all .18s ease;text-align:left;min-height:128px;position:relative;overflow:hidden}
.menu-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--card-accent,var(--pri))}
.menu-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(15,23,42,.12);border-color:#d3deed}.menu-card::after{content:"→";position:absolute;right:12px;bottom:10px;font-size:.92rem;font-weight:800;color:#b8c3d1;transition:.15s}.menu-card:hover::after{transform:translateX(3px);color:var(--pri)}
.menu-card .icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--icon-bg,#eef3fb);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px rgba(15,23,42,.06);font-size:2rem;line-height:1;margin-bottom:2px}
.menu-card .label{font-size:.96rem;font-weight:800;color:var(--pri);line-height:1.2;letter-spacing:.01em}.menu-card .desc{font-size:.79rem;font-weight:500;color:#627286;line-height:1.45;max-width:95%}
.study-card{--card-accent:#204a87;--icon-bg:#e7eefb}.tree-card{--card-accent:#2b9348;--icon-bg:#e8f6ec}.progress-card{--card-accent:#0f8b8d;--icon-bg:#e8f8f8}.map-card{--card-accent:#8e44ad;--icon-bg:#f0e8ff}.game-card{--card-accent:#f0a52b;--icon-bg:#fff4de}.test-card{--card-accent:#2f9e78;--icon-bg:#e8f6f0}.exam-card{--card-accent:#7a3ff2;--icon-bg:#f0e8ff}
.content-wrap{padding:22px 16px 34px;max-width:980px}.tabs{gap:8px;margin-bottom:16px;padding:10px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);backdrop-filter:blur(6px)}
.tab-btn{background:#eef3fb;border:1px solid #dde7f5;padding:9px 15px;border-radius:999px;font-size:.84rem;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.03)}.tab-btn.active,.tab-btn:hover{background:var(--pri);color:#fff;border-color:var(--pri);transform:translateY(-1px)}
.tema-panel>h2{font-size:1.18rem;font-weight:800;margin-bottom:14px;padding:14px 16px;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:14px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);box-shadow:var(--shadow-sm)}
.acc-card{border-radius:16px;margin-bottom:12px;box-shadow:var(--shadow-sm);border:1px solid var(--line);border-left:5px solid var(--red)}.acc-header{gap:14px;padding:16px 18px}.acc-header:hover{background:#fafcff}.acc-icon{font-size:1.6rem;width:40px}.acc-title{font-size:.98rem;font-weight:800}.acc-body{padding:18px 20px 22px;border-top:1px solid #edf2f8}
.acc-body h2{font-size:1.18rem;font-weight:800;line-height:1.35}.acc-body h3{font-size:1.03rem;font-weight:800;margin:18px 0 8px;border-left:4px solid var(--acc);padding-left:10px}.acc-body p{font-size:.94rem;line-height:1.72;margin:9px 0 12px;color:#243447;text-align:justify}.acc-body table{font-size:.88rem;margin:12px 0 14px}.acc-body th{font-size:.86rem;font-weight:800;padding:9px 10px}.acc-body td{padding:8px 10px;line-height:1.55}.info-box,.nemo,.alerta,.clave{border-radius:10px;padding:11px 14px;margin:10px 0;font-size:.9rem;line-height:1.65}.acc-body ul,.acc-body ol{font-size:.92rem;line-height:1.7;margin:8px 0 12px;padding-left:22px}.acc-body li{margin-bottom:5px}.acc-body b,.acc-body strong{color:#1e2d40}
.fc-setup,.vf-setup,.cw-setup{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;align-items:center;padding:14px 16px;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}.fc-setup label,.vf-setup label,.cw-setup label{font-size:.86rem;font-weight:700;color:var(--pri)}.fc-setup select,.vf-setup select,.cw-setup select,.fc-setup button{padding:9px 14px;border-radius:10px;font-size:.86rem}.fc-setup select,.vf-setup select,.cw-setup select{border:1px solid #cfd9e8;color:var(--pri);background:#fff}.fc-setup button{background:var(--pri);color:#fff;border:none;font-weight:700}
.card-scene{max-width:560px}.card-3d{min-height:250px}.card-face{border-radius:18px;min-height:250px;box-shadow:var(--shadow-md);border:1px solid var(--line)}.q-box,.test-setup-form,.results-box,.vf-stmt,.vf-score,.fill-stmt,.match-grid,.cw-grid-wrap,.clue-col,.review-item,.score-tema,.exam-nav{border-radius:18px;box-shadow:var(--shadow-md);border:1px solid var(--line);background:#fff}.q-text{font-size:1.02rem;font-weight:700;line-height:1.6}.opt-btn,.match-card,.exam-nav-btn{border:1px solid #dbe4f0;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.03)}.opt-btn{padding:13px 15px;margin-bottom:10px}.opt-btn:hover:not(:disabled){transform:translateY(-1px)}
.btn-pri,.btn-sec,.btn-acc,.btn-ok,.flag-btn{border:none;border-radius:12px;font-weight:700;box-shadow:0 10px 18px rgba(15,23,42,.10);transition:.18s}.btn-pri{background:linear-gradient(135deg,var(--pri),#2857a4)}.btn-sec{background:linear-gradient(135deg,var(--sec),#f27b3f)}.btn-acc{background:linear-gradient(135deg,#e8ae1a,var(--acc));color:#243447}.btn-ok{background:linear-gradient(135deg,var(--ok),#36c275)}.btn-pri:hover,.btn-sec:hover,.btn-acc:hover,.btn-ok:hover,.flag-btn:hover{transform:translateY(-2px)}
.screen-note{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid #dfe7f2;border-radius:16px;padding:14px 16px;margin:0 0 16px;box-shadow:var(--shadow-sm)}.screen-note .note-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:#eef3fb;flex-shrink:0}.screen-note .note-title{font-size:.92rem;font-weight:800;color:var(--pri);margin-bottom:3px}.screen-note .note-text{font-size:.85rem;line-height:1.55;color:#5c6b7c}.theme-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#eef3fb;border:1px solid #dbe5f3;font-size:.74rem;color:var(--pri);font-weight:800;margin-top:7px}
.study-tree{background:#fff;border-left:5px solid var(--pri);border-radius:16px;padding:14px 16px;line-height:1.6;font-size:.92rem;box-shadow:var(--shadow-md);border:1px solid var(--line)}.study-tree details{margin:8px 0;border:1px solid #e5edf8;border-radius:12px;background:#fbfcff;overflow:hidden}.study-tree details details{margin:8px 12px;background:#fff}.study-tree details details details{margin:8px 14px 10px;background:#fcfdff;border-style:dashed}.study-tree summary{cursor:pointer;font-weight:800;color:var(--pri);padding:10px 12px;user-select:none}.study-tree .tag{display:inline-block;background:#eef2fb;border-radius:999px;padding:2px 8px;font-size:.75rem;margin-left:6px;color:var(--pri);font-weight:700}.study-tree .brief{margin:0 14px 12px;padding:10px 12px;border-radius:10px;background:#f6f9fd;border:1px solid #e6edf7;color:#405369;font-size:.84rem;line-height:1.55}.study-tree .mini{margin:0 14px 12px 18px;padding:9px 11px;border-left:3px solid #dce8f6;color:#4f6075;font-size:.82rem;line-height:1.5;background:#fff}.study-tree .exam-tip{margin:0 14px 12px;padding:10px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f5d67b;color:#5f4a12;font-size:.82rem;line-height:1.5}.study-tree .memory{margin:0 14px 12px;padding:10px 12px;border-radius:10px;background:#f0fdf4;border:1px solid #b7ebc6;color:#285e3d;font-size:.82rem;line-height:1.5}.study-tree ul.compact{margin:0 0 12px 40px}.tree-tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:12px 0 14px}.tree-btn{background:linear-gradient(135deg,var(--pri),#2b5cad);color:#fff;border:none;padding:10px 16px;border-radius:12px;cursor:pointer;font-size:.86rem;font-weight:800;box-shadow:0 10px 18px rgba(15,23,42,.10)}.tree-btn.alt{background:linear-gradient(135deg,#296247,#3f9b6f)}.tree-print-note{font-size:.82rem;color:#5e6e82;margin-top:-4px;margin-bottom:10px}.review-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 16px}.review-card{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border:1px solid #dfe7f2;border-radius:16px;padding:14px 15px;box-shadow:var(--shadow-sm)}.review-card .rc-title{font-size:.9rem;font-weight:800;color:var(--pri);margin-bottom:6px}.review-card .rc-text{font-size:.83rem;line-height:1.55;color:#5c6b7c}.review-card .rc-tag{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:999px;background:#eef6ff;border:1px solid #d8e7fb;font-size:.72rem;font-weight:800;color:#31548b}
.legal-didactic-panel{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border:1px solid #dfe7f2;border-radius:18px;padding:16px;margin:0 0 18px;box-shadow:var(--shadow-sm)}.legal-didactic-panel h2{font-size:1.05rem;color:var(--pri);margin:0 0 8px;font-weight:900}.legal-didactic-panel p{font-size:.86rem;line-height:1.55;color:#5c6b7c;margin:0 0 12px}.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.legal-card{border:1px solid #e2eaf5;border-radius:14px;padding:13px;background:#fff;box-shadow:0 2px 8px rgba(11,38,78,.04)}.legal-card .lc-head{font-size:.86rem;font-weight:900;color:var(--pri);margin-bottom:6px}.legal-card ul{margin:0;padding-left:18px;font-size:.81rem;line-height:1.55;color:#4f6075}.legal-card li{margin-bottom:4px}.didactic-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.didactic-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#eef3fb;border:1px solid #dbe5f3;color:var(--pri);font-size:.73rem;font-weight:800}
#screen-content .top-bar{background:linear-gradient(135deg,#163764 0%,#245398 100%)}#screen-flashcards .top-bar{background:linear-gradient(135deg,#34528d 0%,#5b78b4 100%)}#screen-test-setup .top-bar,#screen-test .top-bar,#screen-results .top-bar{background:linear-gradient(135deg,#1c5a72 0%,#2d8098 100%)}#screen-truefalse .top-bar{background:linear-gradient(135deg,#1d7a5a 0%,#2ea26f 100%)}#screen-game-fill .top-bar{background:linear-gradient(135deg,#8b4f19 0%,#bf7429 100%)}#screen-game-match .top-bar{background:linear-gradient(135deg,#5a4a8f 0%,#7a64b7 100%)}#screen-crucigrama .top-bar{background:linear-gradient(135deg,#6d3c90 0%,#9156bb 100%)}#screen-examen-setup .top-bar,#screen-examen .top-bar,#screen-examen-results .top-bar{background:linear-gradient(135deg,#23466f 0%,#39628f 100%)}#screen-map .top-bar{background:linear-gradient(135deg,#296247 0%,#3a8b63 100%)}#screen-scores .top-bar{background:linear-gradient(135deg,#0f6070 0%,#1e879a 100%)}#screen-mapa .top-bar{background:linear-gradient(135deg,#513b88 0%,#7656bb 100%)!important}
.mapa-card{border-radius:16px;box-shadow:var(--shadow-sm);border:1px solid var(--line);border-left:5px solid #ddd}.study-tree>details.tree-locked{background:#f3f5f8}.study-tree>details.tree-locked>summary{cursor:not-allowed;color:#8a94a3;pointer-events:none}.study-tree>details.tree-locked>summary .tag{opacity:.6}.study-tree>details.tree-locked>*:not(summary):not(.tree-lock-note){display:none!important}.study-tree>details.tree-locked .tree-lock-note{margin:0 14px 12px;padding:10px 12px;border-radius:10px;background:#eceff3;border:1px solid #dde2e9;color:#71798a;font-size:.82rem;line-height:1.5}.mapa-card:not(.locked):hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.mapa-num{border-radius:14px}.tema-screen-header{background:linear-gradient(135deg,#1a3a6b,#2857a4);padding:11px 16px;box-shadow:0 6px 16px rgba(11,38,78,.12)}.btn-mapa{border:1px solid rgba(255,255,255,.2);border-radius:10px;font-weight:700}
@media(max-width:780px){.menu-section-head{flex-direction:column;align-items:flex-start}.menu-grid,.menu-grid.study-grid,.menu-grid.exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-wrap{padding:18px 14px 28px}.match-grid{flex-direction:column}}
@media(max-width:480px){.menu-shell{padding:16px 12px 24px}.menu-section{padding:16px 14px 14px;border-radius:16px}.menu-grid,.menu-grid.study-grid,.menu-grid.exam-grid{grid-template-columns:1fr}.menu-card{min-height:auto;padding:15px 13px}.top-bar{padding:10px 12px}.top-bar h1{font-size:.92rem}.content-wrap{padding:16px 12px 24px}.cw-cell{width:22px;height:22px}.cw-cell input{font-size:.65rem}}
@media print{body{background:#fff!important}body:not(.oc-imprimiendo-infografia) #pwa-banner,body:not(.oc-imprimiendo-infografia) .menu-hero,body:not(.oc-imprimiendo-infografia) #screen-menu,body:not(.oc-imprimiendo-infografia) .screen:not(#screen-map),body:not(.oc-imprimiendo-infografia) .tree-tools,body:not(.oc-imprimiendo-infografia) .btn-back{display:none!important}body:not(.oc-imprimiendo-infografia) #screen-map{display:block!important}body:not(.oc-imprimiendo-infografia) #screen-map .top-bar{position:static!important;box-shadow:none!important;background:#fff!important;color:#1a3a6b!important;border-bottom:2px solid #dbe4f0}body:not(.oc-imprimiendo-infografia) #screen-map .top-bar .hdr-logo{display:none!important}body:not(.oc-imprimiendo-infografia) #screen-map .content-wrap{max-width:100%!important;padding:0!important}body:not(.oc-imprimiendo-infografia) .study-tree,body:not(.oc-imprimiendo-infografia) .study-tree details,body:not(.oc-imprimiendo-infografia) .study-tree details details,body:not(.oc-imprimiendo-infografia) .study-tree details details details{box-shadow:none!important;border-color:#dbe4f0!important;background:#fff!important;break-inside:avoid;page-break-inside:avoid}body:not(.oc-imprimiendo-infografia) .study-tree details{display:block!important}body:not(.oc-imprimiendo-infografia) .study-tree details>*{display:block!important}}


/* ── HERRAMIENTAS AVANZADAS OPOCLICK ── */
.menu-section.tools-zone{border-top:5px solid #6c5ce7}
.menu-card.diag-card{--card-accent:#31548b;--icon-bg:#eef6ff}
.menu-card.smart-card{--card-accent:#9b59b6;--icon-bg:#f4eaff}
.menu-card.wrong-card{--card-accent:#c0392b;--icon-bg:#fdeeee}
.menu-card.update-card{--card-accent:#0f8b8d;--icon-bg:#e8f8f8}
.menu-card.settings-card{--card-accent:#566573;--icon-bg:#eef1f4}
.menu-card.cloud-card{--card-accent:#2563eb;--icon-bg:#eaf2ff}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tool-panel{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border:1px solid #dfe7f2;border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-sm,0 4px 14px rgba(11,38,78,.08))}
.tool-panel h2{color:var(--pri);font-size:1.05rem;margin:0 0 8px;font-weight:900}
.tool-panel p{font-size:.86rem;color:#5c6b7c;line-height:1.55;margin:0 0 10px}
.tool-card{background:#fff;border:1px solid #e2eaf5;border-radius:16px;padding:14px;box-shadow:0 2px 8px rgba(11,38,78,.04)}
.tool-card h3{font-size:.92rem;color:var(--pri);margin-bottom:6px}
.tool-card p,.tool-card li{font-size:.82rem;color:#516277;line-height:1.5}
.tool-card ul{padding-left:18px;margin:8px 0 0}
.tool-badge{display:inline-flex;gap:5px;align-items:center;padding:4px 9px;border-radius:999px;background:#eef3fb;border:1px solid #dbe5f3;color:var(--pri);font-size:.72rem;font-weight:800;margin-top:8px}
.cert-card{background:linear-gradient(135deg,#fff8e6 0%,#fff 70%);border:1px solid #f0d47a;border-radius:18px;padding:18px;text-align:center;box-shadow:0 8px 22px rgba(142,107,0,.08);margin:12px 0}
.cert-card .seal{font-size:2.6rem;margin-bottom:8px}
.cert-card h3{font-size:1.12rem;color:#8e6b00;margin-bottom:6px}
.cert-card p{font-size:.86rem;color:#5f4a12}
.update-list{display:flex;flex-direction:column;gap:10px}
.update-item{background:#fff;border:1px solid #e2eaf5;border-left:5px solid #0f8b8d;border-radius:14px;padding:12px 14px;box-shadow:0 2px 8px rgba(11,38,78,.04)}
.update-item h3{font-size:.9rem;color:var(--pri);margin-bottom:4px}
.update-item p{font-size:.82rem;color:#516277;line-height:1.5;margin:0}
.settings-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.settings-row button,.tool-action{border:none;border-radius:12px;padding:10px 14px;background:linear-gradient(135deg,var(--pri),#2b5cad);color:#fff;font-size:.86rem;font-weight:800;cursor:pointer;box-shadow:0 8px 15px rgba(15,23,42,.10)}
.tool-action.secondary{background:linear-gradient(135deg,#566573,#7b8794)}
.tool-action.ok{background:linear-gradient(135deg,#27ae60,#36c275)}
.tool-action.warn{background:linear-gradient(135deg,#c0392b,#df6258)}
.wrong-counter{font-size:2.2rem;font-weight:900;color:#c0392b;text-align:center;margin:8px 0}
body.big-font{font-size:112%}
body.dark-mode{--bg:#121722;--card:#1d2635;--txt:#eef2f7;background:#121722;color:#eef2f7}
body.dark-mode .menu-section,body.dark-mode .tool-panel,body.dark-mode .tool-card,body.dark-mode .results-box,body.dark-mode .q-box,body.dark-mode .test-setup-form,body.dark-mode .screen-note,body.dark-mode .acc-card,body.dark-mode .study-tree,body.dark-mode .review-card{background:#1d2635!important;border-color:#334155!important;color:#eef2f7}
body.dark-mode .menu-card,body.dark-mode .opt-btn,body.dark-mode .match-card,body.dark-mode .clue-col{background:#202b3b!important;color:#eef2f7;border-color:#334155!important}
body.dark-mode .desc,body.dark-mode .note-text,body.dark-mode .tool-card p,body.dark-mode .tool-card li,body.dark-mode .mini,body.dark-mode .brief{color:#cbd5e1!important}
body.high-contrast{--pri:#001f54;--sec:#b7410e;--acc:#ffd000;--bg:#fff;--txt:#000}
body.high-contrast .menu-card,body.high-contrast .tool-panel,body.high-contrast .q-box{border:2px solid #001f54!important}
body.no-animations *,body.no-animations *::before,body.no-animations *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}


/* ── CORRECCIÓN V6: LEGIBILIDAD Y ESPACIADO ── */
.acc-body,
.acc-body p,
.acc-body li,
.acc-body td,
.acc-body th,
.info-box,
.nemo,
.alerta,
.clave{
  white-space:normal!important;
  word-spacing:normal!important;
  letter-spacing:normal!important;
  overflow-wrap:break-word;
  word-break:normal;
  text-rendering:optimizeLegibility;
}
.acc-body{overflow-x:hidden}
.acc-body p{
  text-align:left!important;
  max-width:100%;
}
.acc-body table{
  max-width:100%;
  table-layout:auto;
}
@media(max-width:640px){
  .acc-body{padding:16px 14px 18px}
  .acc-body table{
    display:block;
    overflow-x:auto;
    white-space:nowrap!important;
  }
  .acc-body th,.acc-body td{
    white-space:nowrap!important;
  }
}



/* ── ACCESO PRIVADO POR ROL ── */
.user-pill{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  margin:10px auto 0;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.82rem;font-weight:800;max-width:92%;
}
.user-pill.light{background:#f6f9ff;border-color:#dbe7f8;color:#1a3a6b;margin:0 0 12px;justify-content:flex-start}
.role-login-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.role-login-card{position:relative;overflow:hidden;border:1px solid #dfe7f2;border-radius:18px;background:#fff;padding:16px;box-shadow:0 5px 18px rgba(11,38,78,.07)}
.role-login-card.student{border-left:5px solid #2563eb}
.role-login-card h3{margin:0 0 7px;color:#1a3a6b;font-size:1rem;font-weight:900}
.role-login-card p{font-size:.84rem;line-height:1.5;color:#5c6b7c;margin:0 0 10px}
.role-login-card input{width:100%;margin:5px 0;padding:10px 11px;border:1px solid #d9e2ef;border-radius:12px;font-size:.92rem;background:#fbfdff}
.password-field{position:relative;margin:5px 0 9px}
.password-field input{width:100%!important;margin:0!important;padding-right:46px!important}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid #d8e4f4;border-radius:12px;background:linear-gradient(135deg,#ffffff,#eef5ff);color:#173967;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;transition:.18s;box-shadow:0 4px 12px rgba(23,57,103,.10)}
.password-toggle:hover{background:linear-gradient(135deg,#fff8e6,#eaf2ff);color:#e05c1a;border-color:#f5c842;box-shadow:0 6px 16px rgba(224,92,26,.18)}
.password-toggle svg{width:21px;height:21px;display:block;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.password-toggle:focus-visible{outline:3px solid rgba(245,200,66,.65);outline-offset:2px}
.role-login-card .btn-login{width:100%;margin-top:8px}
.role-note{font-size:.78rem;color:#6a7b90;margin-top:8px;line-height:1.45}

.forgot-link{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  margin-top:8px;background:transparent;border:none;color:#1a3a6b;
  font-size:.82rem;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.forgot-link:hover{color:#e05c1a}
.recovery-card{border-left:5px solid #2f9e78!important}
.recovery-card .cloud-actions{margin-top:10px}

.hidden-by-role{display:none!important}
.locked-study-note{border:1px solid #f3d08b;background:#fff8e6;color:#745100;border-radius:14px;padding:10px 12px;margin:10px 0;font-size:.86rem;line-height:1.45}


/* V17 · repaso estratégico compacto: solo tema activo */
.legal-didactic-panel.v17-legal-compact{
  padding:12px 16px!important;
  margin:0 0 12px!important;
  border-radius:16px!important;
  border-left:5px solid #c0392b!important;
  box-shadow:0 6px 18px rgba(11,38,78,.07)!important;
}
.v17-legal-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.v17-legal-topline h2{font-size:1rem!important;margin:0 0 3px!important;color:#082d63!important;line-height:1.2!important}
.v17-legal-topline p{font-size:.8rem!important;margin:0!important;color:#5b6f88!important;line-height:1.35!important}
.v17-legal-badge{white-space:nowrap;border:1px solid #dbe7f6;background:#f2f7ff;color:#123d78;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:900}
.v17-legal-content{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.v17-legal-tip{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:#fff;border:1px solid #dbe5f3;color:#243b59;font-size:.78rem;line-height:1.25;font-weight:750;box-shadow:0 2px 8px rgba(11,38,78,.04)}
.v17-legal-tip strong{color:#0b2e63;font-weight:900}
@media(max-width:680px){.v17-legal-topline{flex-direction:column}.v17-legal-badge{align-self:flex-start}.v17-legal-tip{border-radius:12px;width:100%;align-items:flex-start}}



/* ============================================================
   OPOCLICK — INFOGRAFÍAS PREMIUM TEMA 1
   ============================================================ */
.oc-infografia{margin:18px 0 22px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid #dfe7f2;box-shadow:0 12px 30px rgba(11,38,78,.12)}
.oc-infografia-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(135deg,#1a3a6b 0%,#264f91 100%);color:#fff}
.oc-brand-left{display:flex;align-items:center;gap:10px;min-width:0}
.oc-brand-logo{display:inline-flex;align-items:center;gap:0;font-family:Nunito,'Arial Rounded MT Bold','Arial Black',Arial,sans-serif;font-weight:900;font-size:1.08rem;letter-spacing:.01em;white-space:nowrap}
.oc-brand-logo .opo{color:#fff}.oc-brand-logo .click{color:#f5c842}.oc-brand-pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:800;white-space:nowrap}.oc-brand-title{font-size:.78rem;font-weight:800;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-infografia img{display:block;width:100%;height:auto;background:#fff}.oc-infografia-foot{padding:10px 14px;background:#f8fbff;border-top:1px solid #edf2f8;font-size:.82rem;line-height:1.55;color:#52657d}.oc-infografia-foot strong{color:#1a3a6b}
.oc-quality-note{background:linear-gradient(180deg,#f0fdf4 0%,#f7fffb 100%);border:1px solid #b7ebc6;border-left:5px solid #27ae60;border-radius:14px;padding:12px 14px;margin:14px 0;font-size:.88rem;line-height:1.6;color:#285e3d}.oc-quality-note strong{color:#14623b}
.oc-study-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:14px 0}.oc-study-card{background:#fff;border:1px solid #dfe7f2;border-radius:14px;padding:12px 13px;box-shadow:0 4px 12px rgba(11,38,78,.06)}.oc-study-card h4{margin:0 0 6px!important;padding:0!important;border:0!important;color:#1a3a6b!important;font-size:.88rem!important}.oc-study-card p{margin:0!important;font-size:.84rem!important;text-align:left!important;color:#405369!important;line-height:1.55!important}
.oc-garantias{margin:18px 0 22px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid #dfe7f2;box-shadow:0 12px 30px rgba(11,38,78,.12)}.oc-garantias-head{background:linear-gradient(135deg,#1a3a6b 0%,#13294b 100%);color:#fff;padding:16px}.oc-garantias-kicker{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.78}.oc-garantias-title{font-size:1.15rem;font-weight:900;line-height:1.2;margin-top:4px}.oc-garantias-body{padding:16px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}.oc-protection-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.oc-lane{border-radius:16px;padding:13px;border:1px solid #e2eaf5;background:#fff;position:relative;overflow:hidden}.oc-lane::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--lane,#1a3a6b)}.oc-lane.max{--lane:#c0392b}.oc-lane.mid{--lane:#1a5fa8}.oc-lane.low{--lane:#2e7d32}.oc-lane .level{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--lane,#1a3a6b);background:#f5f7fb;border-radius:999px;padding:4px 8px;margin-bottom:8px}.oc-lane h4{font-size:.9rem!important;margin:0 0 7px!important;padding:0!important;border:0!important;color:#1e2d40!important}.oc-lane ul{padding-left:18px!important;margin:0!important;font-size:.82rem!important;line-height:1.55!important}.oc-lane li{margin-bottom:4px!important}.oc-formula{margin-top:14px;border-radius:14px;background:#fff8e6;border:1px solid #f5d67b;padding:12px 14px;font-size:.84rem;line-height:1.6;color:#5f4a12}.oc-formula strong{color:#92400e}.oc-pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.oc-mini-pill{display:inline-flex;align-items:center;gap:5px;background:#eef3fb;color:#1a3a6b;border:1px solid #dbe5f3;border-radius:999px;padding:5px 9px;font-size:.73rem;font-weight:900}
@media(max-width:560px){.oc-infografia-brand{align-items:flex-start;flex-direction:column}.oc-brand-title{white-space:normal}.oc-brand-pill{font-size:.68rem}.oc-garantias-title{font-size:1rem}}




/* OpoClick · chuletas finales tipo árbol */
.oc-chuleta-final{
  margin:18px 0 22px;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid #dfe7f2;box-shadow:0 14px 32px rgba(11,38,78,.12)
}
.oc-chuleta-head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:linear-gradient(135deg,#112e5c,#1f5b92);color:#fff
}
.oc-chuleta-pin{font-size:1.45rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.oc-chuleta-title{font-size:1.1rem;font-weight:950;letter-spacing:.01em;line-height:1.2}
.oc-chuleta-sub{font-size:.78rem;font-weight:800;opacity:.82;margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.oc-chuleta-body{padding:16px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)}
.oc-chuleta-explain{
  border-left:5px solid #f5c842;background:#fffaf0;border-radius:14px;
  padding:11px 13px;margin:0 0 13px;color:#27384d;font-size:.88rem;line-height:1.58
}
.oc-chuleta-explain strong{color:#123d78}
.oc-tree{
  background:#f7f7f7;border:1px solid #e5e8ee;border-radius:18px;
  padding:16px 18px;margin:0;overflow:auto;
  font-family:"Cascadia Mono","Consolas","Courier New",monospace;
  font-size:.78rem;line-height:1.65;color:#101827;white-space:pre
}
.oc-tree .hot{color:#b45309;font-weight:900}
.oc-tree .law{color:#123d78;font-weight:900}
.oc-tree .warn{color:#b91c1c;font-weight:900}
.oc-chuleta-footer{
  padding:10px 14px;background:#f0f6ff;border-top:1px solid #dce8f7;
  color:#4b627d;font-size:.78rem;line-height:1.5
}
@media(max-width:620px){.oc-chuleta-head{align-items:flex-start}.oc-tree{font-size:.68rem;padding:12px}.oc-chuleta-title{font-size:.98rem}}

/* OpoClick · desplegable de texto legal por artículo */
.legal-plus-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  margin-left:8px;padding:4px 9px;border-radius:999px;
  border:1px solid #d9e5f3;background:linear-gradient(135deg,#ffffff,#eef6ff);
  color:#123d78;font-size:.76rem;font-weight:900;cursor:pointer;
  box-shadow:0 3px 10px rgba(17,46,90,.08);vertical-align:middle;line-height:1.1;
  transition:.16s ease;
}
.legal-plus-btn .plus{font-size:1rem;line-height:1;font-weight:950;color:#e05c1a}
.legal-plus-btn:hover{border-color:#f5c842;background:linear-gradient(135deg,#fff8e6,#edf6ff);transform:translateY(-1px)}
.legal-plus-btn.open{background:linear-gradient(135deg,#143767,#24599d);color:#fff;border-color:#143767}
.legal-plus-btn.open .plus{color:#f5c842}
.legal-text-box{
  margin:10px 0 14px;padding:13px 15px;border-radius:16px;
  border:1px solid #dce8f7;border-left:5px solid #1a3a6b;
  background:linear-gradient(180deg,#fbfdff 0%,#f4f8fe 100%);
  box-shadow:0 8px 18px rgba(11,38,78,.08);color:#1f2d3d;
}
.legal-text-box .legal-kicker{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:#557093;margin-bottom:4px}
.legal-text-box .legal-art-title{font-size:.9rem;font-weight:900;color:#123d78;margin:8px 0 5px}
.legal-text-box .legal-art-body{white-space:pre-line;font-size:.84rem;line-height:1.62;color:#25364d}
.legal-text-box .legal-source-note{margin-top:10px;font-size:.72rem;color:#6b7d90;border-top:1px dashed #cddbeb;padding-top:8px}
.legal-text-row td{padding:0!important;background:#f8fbff!important;border-top:0!important}
.legal-text-row .legal-text-box{margin:8px 10px 12px}
td .legal-plus-btn{padding:3px 7px;font-size:.7rem;margin-left:6px}
@media(max-width:620px){.legal-plus-btn{margin-left:4px;margin-top:6px}.legal-text-box{font-size:.95rem}}


/* ── JUEGOS NUEVOS OPOCLICK: ARTÍCULO PERDIDO / TRAMPA / DUELOS ── */
.opo-game-panel{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border:1px solid #dfe7f2;border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:0 6px 18px rgba(11,38,78,.07)}
.opo-game-panel h2{color:var(--pri);font-size:1.05rem;margin:0 0 8px;font-weight:900}
.opo-game-panel p{font-size:.88rem;color:#5c6b7c;line-height:1.55;margin:0 0 12px}
.opo-game-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.opo-game-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef3fb;border:1px solid #dbe5f3;color:#1a3a6b;font-size:.78rem;font-weight:900}
.opo-game-card{background:#fff;border:1px solid #dfe7f2;border-radius:18px;padding:18px;box-shadow:0 8px 22px rgba(11,38,78,.07);margin-top:14px}
.opo-game-prompt{font-size:1.05rem;font-weight:900;color:#102542;line-height:1.45;margin:8px 0 14px}
.opo-game-clue{border-left:5px solid #f0a52b;background:#fff8e6;border-radius:14px;padding:13px 15px;color:#4e3b06;font-size:.95rem;line-height:1.55;margin:10px 0 14px}
.opo-game-options{display:grid;gap:10px}
.opo-game-option{border:2px solid #dce6f3;background:#fff;color:#102542;border-radius:14px;padding:12px 14px;text-align:left;font-size:.94rem;font-weight:800;cursor:pointer;transition:.15s}
.opo-game-option:hover:not(:disabled){border-color:#204a87;background:#f1f6ff;transform:translateY(-1px)}
.opo-game-option.ok{border-color:#2f9e78;background:#dff7e9;color:#11562d}
.opo-game-option.err{border-color:#c0392b;background:#fde8e8;color:#7a1a1a}
.opo-game-option:disabled{cursor:default}
.opo-game-feedback{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:.9rem;line-height:1.55;background:#f7f9fd;border:1px solid #dfe7f2;color:#35465e}
.opo-game-feedback.ok{background:#eaf8ef;border-color:#bce8ca;color:#14562d}
.opo-game-feedback.err{background:#fff0f0;border-color:#f0c2c2;color:#7a1a1a}
.opo-game-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.opo-mini-select{padding:9px 11px;border:1px solid #d9e2ef;border-radius:12px;background:#fff;font-size:.9rem;min-width:220px}



/* ============================================================
   OPOCLICK v36 — CAPA FINAL DE JERARQUÍA VISUAL Y PANEL ALUMNO
   Parche aislado: no modifica lógica de tests, juegos ni acceso.
   ============================================================ */
:root{
  --ok:#3f8f68;
  --ok-soft:#e9f5ee;
  --danger:#b9443b;
  --info:#315f92;
  --muted:#66768a;
  --surface:#ffffff;
  --surface-soft:#f7f9fc;
  --focus-ring:0 0 0 3px rgba(245,200,66,.42);
}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif;letter-spacing:.002em}
.screen.active{animation:ocScreenIn .2s ease both}
@keyframes ocScreenIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ocUnlock{0%{transform:scale(.98);box-shadow:0 0 0 rgba(63,143,104,0)}65%{transform:scale(1.012);box-shadow:0 12px 28px rgba(63,143,104,.18)}100%{transform:none}}
@keyframes ocAccordionIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Cabeceras y tipografía */
.top-bar h1{font-size:1.04rem;font-weight:850;letter-spacing:.015em}
.menu-section-head h2{font-size:1.28rem!important;letter-spacing:-.012em}
.menu-section-head p{font-size:.87rem!important;font-weight:400;color:#647489!important}
.tema-panel>h2{font-size:1.26rem!important;letter-spacing:-.01em}
.acc-title{font-size:1rem!important;letter-spacing:.002em}
.acc-subtitle,.screen-note .note-text,.menu-card .desc{font-weight:400!important}

/* Zona superior: panel personal y flujo recomendado */
.oc-student-dashboard{background:linear-gradient(135deg,#102f5f 0%,#1f4f8d 62%,#2c619e 100%);color:#fff;border-radius:22px;padding:20px;box-shadow:0 16px 38px rgba(11,38,78,.18);position:relative;overflow:hidden}
.oc-student-dashboard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 18%,rgba(245,200,66,.20),transparent 25%),radial-gradient(circle at 8% 92%,rgba(255,255,255,.12),transparent 25%);pointer-events:none}
.oc-dashboard-inner{position:relative;z-index:1}
.oc-dashboard-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.oc-greeting-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:#f5c842;margin-bottom:4px}
.oc-greeting{font-size:1.45rem;font-weight:900;line-height:1.15;letter-spacing:-.018em}
.oc-greeting-sub{font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.78);margin-top:6px}
.oc-level-chip{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:9px 12px;text-align:right;min-width:116px}
.oc-level-chip small{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.68);font-weight:800}
.oc-level-chip strong{display:block;font-size:1rem;margin-top:3px}
.oc-dashboard-progress{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:15px}
.oc-dashboard-bar{height:11px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.oc-dashboard-bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5c842,#ffe182);border-radius:inherit;transition:width .4s ease}
.oc-dashboard-pct{font-size:.9rem;font-weight:900;color:#f5c842;min-width:40px;text-align:right}
.oc-dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.oc-dash-stat{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 11px;min-height:68px}
.oc-dash-stat span{display:block;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:800;margin-bottom:5px}
.oc-dash-stat strong{font-size:.93rem;line-height:1.25}

.oc-flow-panel{background:#fff;border:1px solid #dfe7f2;border-radius:20px;padding:17px 18px;box-shadow:0 8px 24px rgba(11,38,78,.08)}
.oc-flow-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.oc-flow-head h2{font-size:1.08rem;color:var(--pri);margin:0;font-weight:900}
.oc-flow-head span{font-size:.74rem;color:#6b7c91;background:#eef3fb;border:1px solid #dce6f3;border-radius:999px;padding:5px 9px;font-weight:800}
.oc-primary-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.oc-flow-btn{border:none;border-radius:16px;padding:14px 15px;text-align:left;cursor:pointer;min-height:92px;transition:.2s ease;box-shadow:0 5px 15px rgba(15,23,42,.08);position:relative;overflow:hidden}
.oc-flow-btn:hover{transform:translateY(-3px);box-shadow:0 11px 22px rgba(15,23,42,.13)}
.oc-flow-btn:focus-visible{outline:none;box-shadow:var(--focus-ring),0 11px 22px rgba(15,23,42,.13)}
.oc-flow-btn strong{display:block;font-size:1rem;margin-bottom:5px}.oc-flow-btn small{display:block;font-size:.76rem;line-height:1.4;opacity:.78}
.oc-flow-btn.study{background:linear-gradient(135deg,#173b70,#285b9e);color:#fff}.oc-flow-btn.test{background:linear-gradient(135deg,#276f65,#3f8f68);color:#fff}.oc-flow-btn.games{background:linear-gradient(135deg,#fff4df,#fff9ed);color:#754512;border:1px solid #f3d69a}.oc-flow-btn.casos{background:linear-gradient(135deg,#6d2a80,#9c3fa0);color:#fff}
.oc-primary-flow.oc-primary-flow-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:780px){.oc-primary-flow.oc-primary-flow-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oc-secondary-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.oc-secondary-link{border:1px solid #dce5f1;background:#f8faff;color:#294868;border-radius:999px;padding:8px 12px;font-size:.78rem;font-weight:800;cursor:pointer;transition:.18s}
.oc-secondary-link:hover{background:#edf3fb;border-color:#c8d6e8;transform:translateY(-1px)}

/* Insignias */
.oc-badges-panel{background:linear-gradient(180deg,#fff,#fbfcff);border:1px solid #e0e7f1;border-radius:18px;padding:15px 17px;box-shadow:0 6px 18px rgba(11,38,78,.06)}
.oc-badges-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.oc-badges-title strong{color:var(--pri);font-size:.94rem}.oc-badges-title span{font-size:.72rem;color:#728095}
.oc-badges-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.oc-badge-item{border:1px solid #e1e7ef;background:#f6f8fb;border-radius:13px;padding:10px;opacity:.48;filter:grayscale(.45);transition:.2s}
.oc-badge-item.unlocked{opacity:1;filter:none;background:#fffaf0;border-color:#efd89d;animation:ocUnlock .35s ease}
.oc-badge-item b{display:block;font-size:.78rem;color:#253b56;margin-bottom:3px}.oc-badge-item small{font-size:.68rem;color:#738095;line-height:1.35}

/* Personalidad de cada zona */
.menu-section.study-zone{background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);border-top-color:#204a87!important}
.menu-section.games-zone,.menu-section.games-zone-specific{background:linear-gradient(180deg,#fffdf8 0%,#fff8e9 100%);border-color:#f1dfb9;border-top-color:#d88922!important}
.menu-section.exam-zone{background:linear-gradient(180deg,#fbfcfd 0%,#f1f5f5 100%);border-color:#dce5e3;border-top-color:#3f8f68!important}
.menu-section.tools-zone{background:linear-gradient(180deg,#fcfbff 0%,#f7f5fc 100%)}
.menu-card{min-height:124px}
.menu-card .icon{font-size:1.75rem}
.menu-card .label{font-size:.98rem!important}
.menu-card.primary-card{border-width:2px;box-shadow:0 8px 20px rgba(11,38,78,.12);transform:translateY(-1px)}
.menu-card.primary-card .label{font-size:1.04rem!important}

/* Botones semánticos consistentes */
.btn-pri,.cloud-btn.primary,.btn-login,.tool-action:not(.secondary):not(.ok):not(.warn),.tree-btn{background:linear-gradient(135deg,#173a6b,#285b9f)!important;color:#fff!important}
.btn-sec,.cloud-btn.secondary,.tool-action.secondary{background:#eef3f8!important;color:#294868!important;border:1px solid #d5e0ec!important;box-shadow:none!important}
.btn-ok,.tool-action.ok,.vf-btn-v{background:linear-gradient(135deg,#347b59,#4e9972)!important;color:#fff!important}
.tool-action.warn,.vf-btn-f,[onclick*="clearProgress"],[onclick*="clearWrongs"]{background:linear-gradient(135deg,#a93e37,#c9584f)!important;color:#fff!important}
.btn-acc,.flag-btn{background:linear-gradient(135deg,#e0a92a,#f5c842)!important;color:#26384d!important}
button{font-family:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:var(--focus-ring)!important}

/* Pantalla de tema profesional */
.oc-topic-overview{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(105px,.55fr));gap:10px;background:linear-gradient(135deg,#fff 0%,#f6f9fd 100%);border:1px solid #dce5f0;border-radius:18px;padding:15px 16px;margin-bottom:14px;box-shadow:0 7px 20px rgba(11,38,78,.07)}
.oc-topic-main small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#718096;font-weight:900;margin-bottom:3px}.oc-topic-main h2{font-size:1.12rem;color:var(--pri);margin:0 0 9px}.oc-topic-progress-row{display:flex;align-items:center;gap:9px}.oc-topic-progress{height:9px;flex:1;background:#e3e9f1;border-radius:99px;overflow:hidden}.oc-topic-progress span{display:block;height:100%;background:linear-gradient(90deg,#315f92,#3f8f68);border-radius:inherit;transition:width .4s}.oc-topic-progress-row b{font-size:.8rem;color:#315f92;min-width:38px;text-align:right}
.oc-topic-stat{background:#fff;border:1px solid #e1e7ef;border-radius:13px;padding:10px}.oc-topic-stat span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.045em;color:#7a8798;font-weight:800;margin-bottom:4px}.oc-topic-stat strong{font-size:.84rem;color:#263b55;line-height:1.3}

/* Acordeones y tarjetas */
.acc-header{transition:background .2s ease,transform .2s ease}.acc-header:active{transform:scale(.997)}
.acc-card.open .acc-body{animation:ocAccordionIn .2s ease both}
.card-3d{transition:transform .42s cubic-bezier(.2,.75,.25,1)!important}
.mapa-card.done{animation:ocUnlock .3s ease}

@media(max-width:820px){.oc-dashboard-stats,.oc-badges-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-topic-overview{grid-template-columns:1fr 1fr}.oc-topic-main{grid-column:1/-1}}
@media(max-width:620px){.oc-dashboard-top{flex-direction:column}.oc-level-chip{text-align:left}.oc-primary-flow{grid-template-columns:1fr}.oc-flow-btn{min-height:auto}.oc-dashboard-stats{grid-template-columns:1fr 1fr}.oc-badges-grid{grid-template-columns:1fr 1fr}.oc-topic-overview{grid-template-columns:1fr}.oc-topic-main{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.screen.active,.acc-card.open .acc-body,.mapa-card.done,.oc-badge-item.unlocked{animation:none!important}}



/* ============================================================
   V37 · NAVEGACIÓN UNIFICADA + SEGUIMIENTO DOCENTE
   Parche visual y funcional localizado.
   ============================================================ */
.oc-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.oc-close-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;padding:8px 13px;border-radius:10px;cursor:pointer;font-size:.82rem;font-weight:800;transition:.2s ease;white-space:nowrap}
.oc-close-btn:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.oc-close-btn:focus-visible{outline:3px solid rgba(245,200,66,.7);outline-offset:2px}
.top-bar>.oc-close-btn{margin-left:auto}
.student-table td{min-width:135px}
.student-table td:first-child{min-width:180px}
@media(max-width:720px){
  .top-bar{flex-wrap:wrap}
  .top-bar h1{min-width:120px}
  .oc-close-btn{padding:7px 10px;font-size:.76rem}
  .student-table{display:block;overflow-x:auto;white-space:nowrap}
}


/* ============================================================
   V38 · ACCESO POR MATERIAS Y PROGRAMA OFICIAL
   ============================================================ */
.materias-wrap{width:100%;max-width:980px;margin:0 auto;padding:28px 16px 36px}
.materias-hero{background:linear-gradient(135deg,#153665,#244f91);color:#fff;border-radius:24px;padding:24px;box-shadow:0 18px 38px rgba(11,38,78,.18);margin-bottom:18px}
.materias-hero h2{font-size:1.35rem;margin-bottom:7px;font-weight:950}.materias-hero p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:760px}
.materias-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.materia-card{border:1px solid #dfe7f2;border-radius:22px;background:#fff;padding:22px;box-shadow:0 10px 28px rgba(11,38,78,.09);position:relative;overflow:hidden}
.materia-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--mat-accent,#1a3a6b)}
.materia-card.common{--mat-accent:#244d92}.materia-card.specific{--mat-accent:#c8872b;background:linear-gradient(180deg,#fffdf8,#fff)}
.materia-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;background:#eef3fb;margin-bottom:14px}.specific .materia-icon{background:#fff3dd}
.materia-card h3{font-size:1.2rem;color:#173967;margin-bottom:6px}.materia-card p{font-size:.86rem;color:#5c6b7c;line-height:1.55;margin-bottom:12px}
.materia-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.materia-meta span{display:inline-flex;padding:5px 9px;border-radius:999px;background:#eef3fb;border:1px solid #dbe5f3;color:#173967;font-size:.72rem;font-weight:850}
.specific .materia-meta span{background:#fff7e8;border-color:#f1deb4;color:#805912}
.materia-action{width:100%;border:none;border-radius:13px;padding:12px 16px;font-size:.9rem;font-weight:900;cursor:pointer;background:linear-gradient(135deg,#173967,#2b5da8);color:#fff;box-shadow:0 10px 18px rgba(15,23,42,.10)}
.specific .materia-action{background:linear-gradient(135deg,#9b681b,#c88a2e)}
.programa-oficial{background:#fff;border:1px solid #dfe7f2;border-radius:20px;padding:18px;margin-top:18px;box-shadow:0 8px 22px rgba(11,38,78,.07)}
.programa-oficial h3{color:#173967;font-size:1.05rem;margin-bottom:10px}.programa-list{display:grid;gap:8px}.programa-item{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid #e3eaf4;border-radius:13px;background:#fbfdff}.programa-item .num{width:30px;height:30px;border-radius:9px;background:#e8effa;color:#173967;font-weight:950;display:flex;align-items:center;justify-content:center;flex:0 0 30px}.programa-item .txt{font-size:.83rem;line-height:1.48;color:#3f5168}.programa-item .status{display:inline-flex;margin-top:5px;padding:3px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:.68rem;font-weight:850}
.materia-context-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(135deg,#eef4fc,#fff);border:1px solid #dbe6f4;border-left:5px solid #244d92;border-radius:16px;padding:13px 15px;margin-bottom:16px;box-shadow:0 5px 16px rgba(11,38,78,.05)}
.materia-context-banner strong{display:block;color:#173967;font-size:.92rem}.materia-context-banner span{display:block;color:#66788d;font-size:.78rem;margin-top:2px}.materia-context-banner button{border:1px solid #cedbea;background:#fff;color:#173967;border-radius:10px;padding:8px 11px;font-weight:850;cursor:pointer;white-space:nowrap}
@media(max-width:700px){.materias-grid{grid-template-columns:1fr}.materia-context-banner{align-items:flex-start;flex-direction:column}.materia-context-banner button{width:100%}}


/* ===== infografias v42 ===== */
.oc-infografia{margin:22px 0 26px;background:#fff;border:1px solid #d6e2f3;border-radius:18px;box-shadow:0 10px 28px rgba(20,52,96,.10);overflow:hidden}
.oc-infografia__cabecera{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:linear-gradient(135deg,#f7faff,#eef4fc);border-bottom:1px solid #d9e5f5}
.oc-infografia__cabecera h4{margin:4px 0 0;color:#17386d;font-size:1.08rem}
.oc-infografia__etiqueta{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#b47b00}
.oc-infografia__estado{font-size:.78rem;font-weight:700;color:#5d6f89;background:#fff;border:1px solid #cfdaea;border-radius:999px;padding:6px 10px;white-space:nowrap}
.oc-infografia__estado.revisada{color:#2e6b50;background:#edf8f2;border-color:#b9ddca}
.oc-infografia__imagen-btn{display:block;width:100%;padding:0;border:0;background:#f7f9fc;cursor:zoom-in}
.oc-infografia__imagen-btn img{display:block;width:100%;height:auto}
.oc-infografia__acciones{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px 10px}
.oc-infografia .oc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 15px;border-radius:10px;border:1px solid transparent;font-weight:700;text-decoration:none;cursor:pointer;font:inherit}
.oc-infografia .oc-btn-primary{background:#173f7a;color:#fff}
.oc-infografia .oc-btn-secondary{background:#fff;color:#173f7a;border-color:#b9cbe3}
.oc-infografia .oc-btn-info{background:#eaf2ff;color:#173f7a;border-color:#c4d7f4}
.oc-infografia .oc-repaso-btn.activo{background:#fff4d6;color:#765100;border-color:#e6c66d}
.oc-infografia__nota{margin:0;padding:0 18px 15px;color:#65748a;font-size:.78rem}
.oc-chuleta-print-actions{display:flex;justify-content:flex-end;margin:0 0 12px}.oc-chuleta-print-actions .oc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 15px;border-radius:10px;border:1px solid #b9cbe3;background:#fff;color:#173f7a;font-weight:700;cursor:pointer;font:inherit}
.oc-mindmap{--mm-blue:#1f5fa8;--mm-green:#287a52;--mm-orange:#c56f09;--mm-purple:#7042a1;--mm-teal:#147b83;--mm-red:#aa3d4c;margin:4px 0 8px}.oc-mindmap-tools{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-bottom:16px}.oc-mindmap-tools .oc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 14px;border-radius:10px;border:1px solid #b9cbe3;background:#fff;color:#173f7a;font-weight:750;cursor:pointer}.oc-mindmap-tools .oc-btn-info{background:#eaf2ff}.oc-mindmap-canvas{position:relative;padding:18px;border-radius:20px;background:radial-gradient(circle at center,#eef5ff 0,#f8fbff 35%,#fff 72%);border:1px solid #dbe6f4}.oc-mindmap-core{width:min(330px,88%);margin:0 auto 28px;padding:18px 22px;text-align:center;border-radius:20px;background:linear-gradient(135deg,#102f61,#24599c);color:#fff;box-shadow:0 12px 26px rgba(16,47,97,.22);position:relative}.oc-mindmap-core:after{content:"";position:absolute;left:50%;bottom:-28px;width:2px;height:28px;background:#a9bdd8}.oc-mindmap-core span,.oc-mindmap-core small{display:block}.oc-mindmap-core span{font-size:.72rem;font-weight:850;letter-spacing:.14em;color:#f3bd36}.oc-mindmap-core strong{display:block;margin:4px 0;font-size:1.15rem}.oc-mindmap-core small{font-size:.78rem;opacity:.9}.oc-mindmap-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative}.oc-mindmap-branch{--branch:var(--mm-blue);background:#fff;border:1px solid #dce5f1;border-top:4px solid var(--branch);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(15,42,78,.07)}.oc-mindmap-branch.branch-green{--branch:var(--mm-green)}.oc-mindmap-branch.branch-orange{--branch:var(--mm-orange)}.oc-mindmap-branch.branch-purple{--branch:var(--mm-purple)}.oc-mindmap-branch.branch-teal{--branch:var(--mm-teal)}.oc-mindmap-branch.branch-red{--branch:var(--mm-red)}.oc-mindmap-branch summary{display:flex;align-items:center;gap:10px;padding:12px 14px;color:var(--branch);font-weight:850;cursor:pointer;list-style:none}.oc-mindmap-branch summary::-webkit-details-marker{display:none}.oc-mindmap-branch summary:after{content:"+";margin-left:auto;font-size:1.2rem}.oc-mindmap-branch[open] summary:after{content:"−"}.oc-mindmap-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--branch);color:#fff;font-size:.78rem}.oc-mindmap-leaves{display:grid;gap:7px;padding:0 12px 13px 50px}.oc-mindmap-leaves span{position:relative;padding:8px 10px;border-radius:9px;background:#f8fafc;color:#475569;font-size:.8rem;line-height:1.45}.oc-mindmap-leaves span:before{content:"";position:absolute;left:-15px;top:50%;width:12px;height:1px;background:var(--branch)}.oc-mindmap-leaves strong{color:var(--branch)}
@media(max-width:700px){.oc-mindmap-branches{grid-template-columns:1fr}.oc-mindmap-canvas{padding:12px}.oc-mindmap-tools .oc-btn{flex:1 1 100%}.oc-mindmap-leaves{padding-left:42px}}
@media print{.oc-mindmap-tools{display:none!important}.oc-mindmap-canvas{background:#fff;box-shadow:none}.oc-mindmap-branches{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-mindmap-branch{box-shadow:none}.oc-mindmap-branch summary:after{display:none}}

/* Ajustes de legibilidad y jerarquía del mapa mental */
.oc-mindmap,.oc-mindmap button,.oc-mindmap summary,.oc-mindmap p,.oc-mindmap span,.oc-mindmap strong,.oc-mindmap small{font-family:inherit}.oc-mindmap{--mm-blue:#17457f;--mm-green:#25624a;--mm-orange:#b45f06;--mm-purple:#67408f;--mm-teal:#176875;--mm-red:#913b4d}.oc-mindmap-canvas{background:linear-gradient(180deg,#f5f8fc 0%,#fff 42%)}.oc-mindmap-core{background:#12386d;border:4px solid #e9a318;box-shadow:0 10px 24px rgba(18,56,109,.2)}.oc-mindmap-core span{color:#ffd46c!important}.oc-mindmap-core strong{color:#fff!important;font-family:inherit!important;font-weight:850!important}.oc-mindmap-core small{color:#edf5ff!important;font-family:inherit!important}.oc-mindmap-explain{margin:0;padding:0 14px 12px;color:#51637a;font-size:.8rem;line-height:1.5}.oc-mindmap-groups{display:grid;gap:8px;padding:0 12px 13px}.oc-mindmap-group{background:#f8fafc;border-radius:10px;overflow:hidden}.oc-mindmap-group>summary{padding:9px 11px!important;color:#233e63!important;font-size:.8rem!important;font-weight:800!important}.oc-mindmap-group>summary:before{content:"↳";margin-right:7px;color:var(--branch)}.oc-mindmap-group>summary:after{font-size:1rem!important}.oc-mindmap-group .oc-mindmap-leaves{padding:0 10px 10px 32px}.oc-mindmap-group .oc-mindmap-leaves span{display:block;background:#fff}.oc-mindmap-group .oc-mindmap-leaves strong,.oc-mindmap-group .oc-mindmap-leaves small{display:block}.oc-mindmap-group .oc-mindmap-leaves strong{font-family:inherit!important;font-size:.78rem}.oc-mindmap-group .oc-mindmap-leaves small{margin-top:3px;color:#5c6d82;font-family:inherit!important;font-size:.75rem;line-height:1.45}.oc-mindmap-branch>summary>span:last-of-type{font-family:inherit!important;font-weight:850}.oc-mindmap-branch[open]>summary{border-bottom:1px solid #e3eaf3;margin-bottom:10px}
@media print{.oc-mindmap-group{display:block!important}.oc-mindmap-group>summary{border-bottom:1px solid #e3eaf3}.oc-mindmap-explain{color:#334155}}
.oc-infografia-modal{position:fixed;inset:0;z-index:99999;background:rgba(7,18,38,.92);display:flex;align-items:center;justify-content:center;padding:18px;animation:ocFadeIn .2s ease}
.oc-infografia-modal__contenido{position:relative;max-width:96vw;max-height:94vh}
.oc-infografia-modal img{display:block;max-width:96vw;max-height:91vh;object-fit:contain;border-radius:10px;background:#fff}
.oc-infografia-modal__cerrar{position:absolute;top:-13px;right:-13px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#17386d;font-size:25px;font-weight:800;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.3)}
@keyframes ocFadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:650px){.oc-infografia__cabecera{align-items:flex-start;flex-direction:column}.oc-infografia__acciones .oc-btn{flex:1 1 calc(50% - 10px)}}
@media print{body.oc-imprimiendo-infografia *{visibility:hidden!important}body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir,body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir *{visibility:visible!important}body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir{position:absolute;left:0;top:0;width:100%;margin:0;box-shadow:none;border:0;overflow:visible}body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir .oc-infografia__cabecera,body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir .oc-infografia__acciones,body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir .oc-infografia__estado,body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir .oc-infografia__nota{display:none!important}body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir .oc-infografia__imagen-btn{background:#fff}body.oc-imprimiendo-infografia .oc-infografia.oc-imprimir img{max-width:100%;max-height:calc(100vh - 16mm);width:auto;height:auto;margin:auto;object-fit:contain;break-inside:avoid;page-break-inside:avoid}}

/* ===== v44 topic cleanup ===== */
.oc-domain-requirements{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:12px}
.oc-domain-requirements span{display:block;padding:9px 11px;border-radius:10px;font-size:.86rem;font-weight:700;border:1px solid #d8e0eb;background:#f8fafc;color:#475569}
.oc-domain-requirements span.ok{background:#eef8f2;border-color:#a9d5b8;color:#27613c}
.oc-domain-requirements span.pending{background:#fff8eb;border-color:#ead7a6;color:#76591c}
.oc-mini-help{display:block;margin-top:7px;color:#64748b;line-height:1.45;max-width:760px}
#oc-mastery-panel button[disabled]{opacity:.56;cursor:not-allowed;filter:grayscale(.15);box-shadow:none}

/* ===== v39 style ===== */
/* V39 · BLINDAJE TEMA 1 + ESTÁNDAR PREMIUM TEMA 2 */
.oc-mastery-panel{margin:14px auto 20px;max-width:1120px;border:1px solid #dce5f2;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(11,38,78,.10);overflow:hidden}
.oc-mastery-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;background:linear-gradient(135deg,#173b6d,#28579d);color:#fff;cursor:pointer;user-select:none}
.oc-mastery-head h3{margin:0;font-size:1.05rem}.oc-mastery-head small{opacity:.83}.oc-lock-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);padding:7px 11px;border-radius:999px;font-size:.75rem;font-weight:900}
.oc-mastery-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;padding:7px 12px;border-radius:999px;font-size:.76rem;font-weight:800;white-space:nowrap}
.oc-mastery-toggle .oc-mastery-arrow{display:inline-block;transition:transform .2s ease}
.oc-mastery-panel.open .oc-mastery-toggle .oc-mastery-arrow{transform:rotate(180deg)}
.oc-mastery-body{padding:18px 20px;display:none}
.oc-mastery-panel.open .oc-mastery-body{display:block}
.oc-mastery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.oc-master-stat{border:1px solid #e2e8f1;border-radius:15px;padding:12px;background:#f8fafc}.oc-master-stat span{display:block;color:#68758a;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.oc-master-stat strong{display:block;color:#173b6d;font-size:1rem;margin-top:4px}.oc-domain-bar{height:10px;background:#e7ecf3;border-radius:999px;overflow:hidden;margin:14px 0 8px}.oc-domain-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2d6bb0,#5a9a7a);transition:width .25s ease}.oc-domain-status{font-size:.82rem;color:#526176;line-height:1.55}.oc-domain-status b{color:#173b6d}.oc-standard-note{margin:13px 0 0;padding:12px 14px;border-left:4px solid #d7a33d;background:#fff9e9;border-radius:10px;font-size:.8rem;line-height:1.55;color:#5d4b21}
.oc-premium-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:13px 0}.oc-premium-index div{padding:11px;border-radius:13px;background:#f4f7fb;border:1px solid #e1e7f0;font-size:.76rem;color:#41516a}.oc-premium-index strong{display:block;color:#173b6d;margin-bottom:3px}
.oc-integrity-warning{position:fixed;left:16px;right:16px;bottom:16px;z-index:99999;background:#8e2f35;color:#fff;padding:13px 16px;border-radius:14px;box-shadow:0 15px 35px rgba(0,0,0,.25);font-size:.82rem;font-weight:800;text-align:center}
@media(max-width:800px){.oc-mastery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-premium-index{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-mastery-head{align-items:flex-start;flex-direction:column}}

/* ===== v46: panel colapsable, filtro materias, subir arriba, salir de la app ===== */
.oc-theme-tab-group{display:none}
.oc-theme-tab-group.oc-visible{display:block}
.oc-scroll-top-btn{position:fixed;right:18px;bottom:22px;z-index:9998;display:none;align-items:center;gap:7px;padding:11px 16px;border:0;border-radius:999px;background:#173b6d;color:#fff;font-size:.82rem;font-weight:800;box-shadow:0 10px 26px rgba(11,38,78,.3);cursor:pointer}
.oc-scroll-top-btn.show{display:inline-flex}
.oc-scroll-top-btn:hover{background:#28579d}
.oc-exit-modal{position:fixed;inset:0;z-index:99999;background:rgba(7,18,38,.66);display:flex;align-items:center;justify-content:center;padding:18px;animation:ocFadeIn .2s ease}
.oc-exit-modal__box{background:#fff;border-radius:18px;max-width:420px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center}
.oc-exit-modal__box h3{margin:0 0 10px;color:#173b6d}
.oc-exit-modal__box p{margin:0 0 16px;color:#4b5769;font-size:.88rem;line-height:1.5}
.oc-exit-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== v45 completed topics style ===== */
/* OpoClick v45 — diferenciación visual de temas completados */
#content-tabs .tab-btn.oc-topic-completed{
  background:linear-gradient(135deg,#e8f5ee 0%,#d8ede2 100%) !important;
  border-color:#8dbba0 !important;
  color:#235f42 !important;
  box-shadow:0 5px 14px rgba(53,119,82,.14) !important;
}
#content-tabs .tab-btn.oc-topic-completed::after{
  content:'✓ Completado';
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:2px 7px;
  border-radius:999px;
  background:#377a55;
  color:#fff;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
}
#content-tabs .tab-btn.oc-topic-completed.active{
  background:linear-gradient(135deg,#2f7650 0%,#245f42 100%) !important;
  border-color:#245f42 !important;
  color:#fff !important;
  box-shadow:0 7px 18px rgba(36,95,66,.24) !important;
}
#content-tabs .tab-btn.oc-topic-completed.active::after{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
}
@media(max-width:620px){
  #content-tabs .tab-btn.oc-topic-completed::after{font-size:.6rem;margin-left:5px;padding:2px 6px}
}

/* Candado visual para temas bloqueados por la regla de progreso (secuencial) */
#content-tabs .tab-btn.oc-topic-locked{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.35);
}
#content-tabs .tab-btn.oc-topic-locked::after{
  content:'\1F512';
  margin-left:6px;
}

/* v47.1 · selectores de temario */
select option:disabled{color:#9aa6b5;background:#f2f4f7}


/* v47.2 — separación visual de Materias Comunes y Específicas */
#content-tabs{display:block;margin-bottom:16px}
.oc-theme-tab-group{border:1px solid #dce5f1;border-radius:14px;padding:12px 14px;margin-bottom:12px;background:#fff}
.oc-theme-tab-group-common{border-left:5px solid #244f8f}
.oc-theme-tab-group-specific{border-left:5px solid #c79213;background:#fffaf0}
.oc-theme-group-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:#183b70}
.oc-theme-group-heading strong{font-size:.9rem}
.oc-theme-group-heading span{font-size:.72rem;color:#6e7e91;font-weight:700}
.oc-theme-group-buttons{display:flex;flex-wrap:wrap;gap:7px}
.oc-theme-tab-group-specific .tab-btn{background:#fff3d6;border:1px solid #e5c36c}
.oc-theme-tab-group-specific .tab-btn.active,.oc-theme-tab-group-specific .tab-btn:hover{background:#9a6b08;color:#fff}
select optgroup{font-weight:900;color:#183b70}
select option{font-weight:500;color:#24364b}
@media(max-width:600px){.oc-theme-group-heading{align-items:flex-start;flex-direction:column;gap:3px}}

body.role-teacher .locked-study-note,body.role-teacher .oc-lock-chip,body.role-teacher .mapa-lock{display:none!important}body.role-teacher select option:disabled{color:inherit!important;background:#fff!important}
.oc-app-identity{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100000;
  padding:6px 12px;
  border:0;
  border-radius:0;
  box-shadow:0 2px 8px rgba(12,35,70,.2);
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  pointer-events:none;
}
.oc-app-identity-admin{background:#204b86;}
body{padding-top:28px;}
@media (max-width:700px){
  .oc-app-identity{padding:6px 8px;font-size:.65rem;}
}
.oc-topic-brand{
  display:flex;
  justify-content:center;
  margin:0 0 18px;
}
.oc-topic-brand img{
  display:block;
  width:min(536px,100%);
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(12,35,70,.16);
}
@media (max-width:600px){.oc-topic-brand{margin-bottom:12px}.oc-topic-brand img{border-radius:8px}}

/* SUPUESTOS PRÁCTICOS */
.supuesto-tema-group{background:#fff;border:1px solid #e4e8f0;border-radius:14px;padding:12px 14px;margin-bottom:12px}
.supuesto-tema-head{font-size:.9rem;margin-bottom:8px;color:#1a3a6b}
.supuesto-pick-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-top:1px solid #eef1f6;cursor:pointer}
.supuesto-pick-row:first-of-type{border-top:none}
.supuesto-pick-row input{flex-shrink:0;width:18px;height:18px}
.supuesto-pick-title{flex:1;font-size:.85rem}
.supuesto-pick-meta{font-size:.72rem;color:#888;white-space:nowrap}
.supuesto-bloque{background:#fff;border:1px solid #e4e8f0;border-radius:14px;padding:16px;margin-bottom:14px}
.supuesto-bloque h3{margin:0 0 10px;font-size:1rem;color:#1a3a6b;display:flex;align-items:center;justify-content:space-between;gap:8px}
.supuesto-enunciado{background:#f4f6fa;border-radius:10px;padding:12px 14px;font-size:.85rem;line-height:1.55;margin-bottom:14px}
.supuesto-pregunta{margin-bottom:16px}
.supuesto-pregunta-txt{font-size:.85rem;margin-bottom:8px;line-height:1.5}
.supuesto-opts{display:flex;flex-direction:column;gap:6px}
.supuesto-opt{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;background:#f8f9fb;border:1px solid #e4e8f0;border-radius:8px;padding:8px 10px;cursor:pointer}
.supuesto-opt input{margin-top:2px;flex-shrink:0}
.supuesto-textarea{width:100%;border:1px solid #d7dce4;border-radius:8px;padding:10px;font:inherit;font-size:.85rem;resize:vertical}
.supuesto-sep{border:none;border-top:2px dashed #dde3ee;margin:18px 0}
.supuesto-pct-badge{background:#6d2a80;color:#fff;border-radius:999px;padding:3px 10px;font-size:.78rem;flex-shrink:0}
.supuesto-res-item{border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:.83rem;line-height:1.5}
.supuesto-res-item.supuesto-res-ok{background:#eafaf0;border:1px solid #b8ecd0}
.supuesto-res-item.supuesto-res-mid{background:#fff8e6;border:1px solid #f3dfa0}
.supuesto-res-item.supuesto-res-ko{background:#fdecec;border:1px solid #f3bcbc}
.supuesto-res-item.supuesto-res-neutral{background:#f2f3f6;border:1px solid #e0e3ea}
.supuesto-res-detail{margin-top:5px;color:#444}
.supuesto-resumen-global{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#6d2a80,#9c3fa0);color:#fff;border-radius:14px;padding:16px 18px;margin-bottom:16px;font-size:.85rem;line-height:1.5}
.supuesto-resumen-pct{font-size:2.1rem;font-weight:800;flex-shrink:0}