/* Writing Assistant · estilos propios (los comunes están en comun.css) */
:root { --lv-B1:#2fae84; --lv-B2:#3b4762; --lv-C1:#a16207; }

/* ─── Barra de controles ─── */
.wt-app { margin-top:-32px; margin-bottom:72px; position:relative; }
.wt-bar { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.wt-bar-l, .wt-bar-r { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.seg { display:inline-flex; gap:2px; background:var(--bg-body); padding:3px; border-radius:100px; border:1px solid var(--border); }
.seg button { border:none; background:none; cursor:pointer; padding:8px 14px; border-radius:100px; font-size:.85rem; font-weight:700; color:var(--text-muted); white-space:nowrap; transition:background .2s ease, color .2s ease; }
.seg button small { font-weight:600; opacity:.75; margin-left:4px; }
.seg button:hover:not(.on):not(:disabled) { color:var(--navy); }
.seg button.on { background:var(--bg-surface); color:var(--navy); box-shadow:var(--shadow-sm); }
.seg button:disabled { cursor:not-allowed; }
.sel { font-family:inherit; font-size:.88rem; font-weight:600; color:var(--navy); padding:9px 36px 9px 14px; border:1px solid var(--border); border-radius:100px; background:var(--bg-body) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b3349' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; appearance:none; -webkit-appearance:none; cursor:pointer; max-width:100%; }
.sel:disabled { opacity:.6; cursor:not-allowed; }
.sel:focus, .seg button:focus-visible, .wb:focus-visible, .inp:focus, .pts button:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.wb { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--bg-surface); color:var(--navy); border-radius:100px; padding:9px 16px; font-size:.86rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .2s ease, transform .15s ease, border-color .2s ease; text-decoration:none; }
.wb svg { width:16px; height:16px; flex-shrink:0; }
.wb:hover:not(:disabled) { background:var(--navy-tint); }
.wb:disabled { opacity:.5; cursor:not-allowed; }
.wb-mint { background:var(--mint-deep); border-color:var(--mint-deep); color:#fff; }
.wb-mint:hover:not(:disabled) { background:#279973; transform:translateY(-1px); }
.wb-navy { background:var(--navy); border-color:var(--navy); color:#fff; }
.wb-navy:hover:not(:disabled) { background:var(--navy-light); transform:translateY(-1px); }
.wb .count { background:var(--navy-tint); color:var(--navy); border-radius:100px; padding:0 7px; font-size:.75rem; }

/* ─── Mis writings ─── */
.hist { display:none; margin-top:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:8px; }
.hist.show { display:block; }
.hist-empty { padding:22px; text-align:center; color:var(--text-muted); font-size:.92rem; }
.hist-row { display:grid; grid-template-columns:minmax(0,1.6fr) auto auto auto; gap:16px; align-items:center; padding:12px 14px; border-radius:13px; }
.hist-row + .hist-row { border-top:1px solid var(--border); }
.hist-row:hover { background:var(--bg-body); }
.hist-t { font-weight:700; color:var(--dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-d { font-size:.8rem; color:var(--text-muted); }
.tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-block; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:100px; background:var(--navy-tint); color:var(--navy); white-space:nowrap; }
.tag.sent { background:var(--mint-tint); color:var(--mint-deep); }
.hist-n { font-size:.82rem; color:var(--text-muted); white-space:nowrap; }
.hist-a { display:flex; gap:6px; }
.hist-zona { display:block; padding:12px 14px 8px; border-top:1px solid var(--border); font-weight:700; font-size:.88rem; color:var(--mint-deep); text-decoration:none; }
.hist-zona:hover { text-decoration:underline; }
.lnk { border:none; background:none; cursor:pointer; font-weight:700; font-size:.84rem; color:var(--mint-deep); padding:6px 10px; border-radius:100px; }
.lnk:hover { background:var(--mint-tint); }
.lnk.del { color:#b42318; }
.lnk.del:hover { background:#fef3f2; }

/* ─── Rejilla principal ─── */
.wt-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:24px; margin-top:20px; align-items:start; }

/* ─── Checklist lateral ───
   Cabecera fija (progreso, pestañas, filtro y buscador) y debajo la lista,
   que es lo único que se desplaza. */
.wt-side { position:sticky; top:96px; max-height:calc(100vh - 116px); display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.wt-side [hidden] { display:none !important; }
.side-head { padding:16px 18px 12px; border-bottom:1px solid var(--border); background:var(--bg-surface); flex:none; }
.side-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.side-head h2 { font-family:'Inter',sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:800; }
.side-x { border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:1.35rem; line-height:1; width:30px; height:30px; border-radius:8px; }
.side-x:hover { background:var(--navy-tint); color:var(--navy); }
.prog-row { display:flex; justify-content:space-between; font-size:.88rem; margin-top:4px; color:var(--navy); font-weight:700; }
.prog { height:8px; background:var(--navy-tint); border-radius:100px; overflow:hidden; margin-top:8px; }
.prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mint-deep),var(--mint)); transition:width .3s ease; }
.side-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:var(--bg-body); border:1px solid var(--border); border-radius:12px; padding:3px; margin-top:14px; }
.side-tabs button { border:none; background:none; cursor:pointer; padding:7px 4px; border-radius:9px; font-size:.8rem; font-weight:700; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.2; transition:background .15s ease, color .15s ease; }
.side-tabs button span { font-size:.68rem; font-weight:600; opacity:.85; font-variant-numeric:tabular-nums; }
.side-tabs button:hover:not(.on) { color:var(--navy); }
.side-tabs button.on { background:var(--bg-surface); color:var(--navy); box-shadow:var(--shadow-sm); }
.side-tabs button:focus-visible, .lvl-chips button:focus-visible { outline:2px solid var(--mint); outline-offset:1px; }
.side-tools { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.lvl-chips { display:flex; gap:4px; }
.lvl-chips button { flex:1; border:1px solid var(--border); background:var(--bg-surface); border-radius:100px; padding:4px 6px; font-size:.74rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
.lvl-chips button:hover:not(.on) { color:var(--navy); border-color:#cfd5df; }
.lvl-chips button.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.side-busca { font:inherit; font-size:.84rem; padding:7px 12px 7px 32px; border:1px solid var(--border); border-radius:100px; width:100%; color:var(--dark);
  background:var(--bg-body) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px center / 14px; }
.side-busca:focus { outline:2px solid var(--mint); outline-offset:1px; background-color:#fff; }
.side-body { overflow:auto; flex:1; min-height:0; padding:4px 0 14px; }
.side-vacio { padding:24px 18px; text-align:center; color:var(--text-muted); font-size:.86rem; }
.wt-side summary { list-style:none; cursor:pointer; }
.wt-side summary::-webkit-details-marker { display:none; }
.lvl-h { font-family:'Plus Jakarta Sans',sans-serif; font-size:.92rem; font-weight:800; padding:14px 18px 6px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lv-B1 { color:var(--lv-B1); } .lv-B2 { color:var(--lv-B2); } .lv-C1 { color:var(--lv-C1); }
.lvl-n { font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700; background:var(--navy-tint); color:var(--navy); border-radius:100px; padding:2px 9px; }
.grp { margin:0 10px; }
.grp + .grp { margin-top:2px; }
.grp > summary { padding:9px 10px; font-weight:700; font-size:.86rem; color:var(--dark-soft); display:flex; align-items:center; gap:10px; border-radius:10px; }
.grp > summary::before { content:''; flex:none; width:7px; height:7px; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(-45deg); transition:transform .15s ease; margin:0 2px; }
.grp[open] > summary::before { transform:rotate(45deg); }
.grp > summary > span:first-child { flex:1; }
.grp > summary:hover { background:var(--bg-body); }
.grp-n { font-size:.7rem; font-weight:700; color:var(--text-muted); background:var(--bg-body); border-radius:100px; padding:1px 8px; font-variant-numeric:tabular-nums; }
.grp.completo .grp-n { background:var(--mint-tint); color:var(--mint-deep); }
.items { padding:0 4px 8px 14px; }
.chk { display:flex; gap:10px; align-items:flex-start; padding:7px 10px; border-radius:10px; cursor:pointer; }
.chk:hover { background:var(--bg-body); }
.chk input { margin-top:4px; width:16px; height:16px; accent-color:var(--mint-deep); flex-shrink:0; cursor:pointer; }
.chk-t { flex:1; min-width:0; }
.chk b { display:block; font-weight:600; font-size:.86rem; color:var(--dark); line-height:1.4; }
.chk i { display:block; font-size:.78rem; color:var(--text-muted); line-height:1.45; margin-top:2px; font-style:italic; }
.chk.done b { text-decoration:line-through; text-decoration-color:rgba(107,114,128,.6); color:var(--text-muted); }
.auto-tag { display:none; flex:none; font-style:normal; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mint-deep); background:var(--mint-tint); border-radius:100px; padding:2px 7px; margin-top:3px; }
.chk.auto .auto-tag, .chk-auto .auto-tag { display:inline-block; }
.chk-auto, .chk-auto input { cursor:default; }
.chk-auto:hover { background:none; }
.chk-auto:not(.done) .auto-tag { color:var(--text-muted); background:var(--bg-body); }
.fmt-h { padding:12px 18px 0; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--navy); font-size:1rem; line-height:1.3; }
.fmt-h span { display:block; font-family:'Inter',sans-serif; font-size:.74rem; font-weight:600; color:var(--text-muted); }
.fmt-sub { padding:6px 18px 8px; font-size:.8rem; color:var(--text-muted); line-height:1.5; }
#panel-fmt .items { padding:0 8px 8px; }

/* Zona de escritura */
.wt-main { min-width:0; }
.doc-head { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px; }
.doc-head-r { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.doc-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem; color:var(--navy); border:none; border-bottom:2px dashed transparent; background:transparent; flex:1; min-width:200px; padding:4px 0; letter-spacing:-.02em; }
.doc-title::placeholder { color:#b6bcc8; }
.doc-title:hover { border-bottom-color:var(--border); }
.doc-title:focus { outline:none; border-bottom-color:var(--mint); }
.wc { font-weight:700; font-size:.88rem; padding:8px 14px; border-radius:100px; border:2px solid var(--border); background:var(--bg-surface); color:var(--navy); white-space:nowrap; transition:all .25s ease; }
.wc.ok { border-color:var(--mint-deep); color:var(--mint-deep); background:var(--mint-tint); }
.wc.out { border-color:#f4b4ae; color:#b42318; background:#fef3f2; }
.nube { font-size:.8rem; font-weight:700; color:var(--mint-deep); white-space:nowrap; }
.nube:empty { display:none; }
.nube.guardando { color:#6b7280; }
.nube.error, .nube.limite { color:#b42318; cursor:help; }
.timer { font-weight:800; font-size:.88rem; font-variant-numeric:tabular-nums; padding:8px 14px; border-radius:100px; color:var(--navy); background:var(--navy-tint); white-space:nowrap; }
.timer:empty { display:none; }
.timer.on { background:var(--navy); color:#fff; }
.timer.warn { background:#f59e0b; color:#3b2400; }
.timer.over { background:#b42318; color:#fff; }

.prompt { background:var(--mint-tint); border:1px solid #c7eedd; border-left:4px solid var(--mint-deep); border-radius:16px; padding:16px 18px; display:flex; gap:14px; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.prompt small { display:block; text-transform:uppercase; font-size:.7rem; font-weight:800; letter-spacing:.08em; color:var(--mint-deep); }
.prompt p { color:var(--navy); font-weight:500; margin-top:4px; line-height:1.55; }
.icon-btn { width:38px; height:38px; border-radius:50%; border:1px solid #c7eedd; background:var(--bg-surface); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .3s ease, background .2s ease; }
.icon-btn:hover:not(:disabled) { background:#fff; transform:rotate(-60deg); }
.icon-btn:disabled { opacity:.4; cursor:not-allowed; }
.icon-btn svg { width:18px; height:18px; }

.analysis { display:none; background:var(--navy-tint); border:1px solid #d6dbe6; border-radius:16px; padding:18px 20px; margin-bottom:18px; }
.analysis.show { display:block; }
.an-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.an-top small, .an-texto > small { display:block; text-transform:uppercase; font-size:.7rem; font-weight:800; letter-spacing:.08em; color:var(--text-muted); }
.an-level { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.45rem; color:var(--navy); letter-spacing:-.02em; }
.an-close { border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:1.4rem; line-height:1; padding:2px 6px; border-radius:8px; }
.an-close:hover { background:#fff; color:var(--navy); }
.an-sub { font-size:.9rem; color:var(--dark-soft); margin-top:10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip { font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:100px; background:var(--bg-surface); border:1px solid var(--border); }
.chip.B1 { color:var(--lv-B1); } .chip.B2 { color:var(--lv-B2); } .chip.C1 { color:var(--lv-C1); }
.an-tip { margin-top:12px; font-size:.9rem; color:var(--navy); background:var(--bg-surface); border-radius:12px; padding:10px 14px; }
.analysis > .lnk { margin-top:10px; padding-left:0; }
.analysis > .lnk:hover { background:none; text-decoration:underline; }
.an-texto { margin-top:10px; background:var(--bg-surface); border-radius:12px; padding:14px 16px; }
.an-par { margin-top:10px; }
.an-par b { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--navy); }
.an-par p { white-space:pre-wrap; line-height:1.85; color:var(--dark); }
mark { border-radius:4px; padding:1px 2px; color:inherit; }
mark.m-B1, .an-ley .m-B1 { background:#d5f3e6; }
mark.m-B2, .an-ley .m-B2 { background:#dfe4f1; }
mark.m-C1, .an-ley .m-C1 { background:#fbe3b4; }
.an-ley { display:flex; gap:6px; margin-top:12px; }
.an-ley span { font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:6px; color:var(--dark); }
.an-note { font-size:.78rem; color:var(--text-muted); margin-top:10px; }

.para { background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; margin-bottom:14px; transition:border-color .2s ease, box-shadow .2s ease; }
.para:focus-within { border-color:var(--mint); box-shadow:0 0 0 4px rgba(95,208,166,.18); }
.para-h { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); }
.para-h b { font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--navy); font-weight:800; }
.para-h span { font-size:.74rem; font-weight:600; color:var(--text-muted); background:var(--bg-body); border:1px solid var(--border); border-radius:100px; padding:2px 9px; white-space:nowrap; }
.para textarea { display:block; width:100%; min-height:130px; border:none; padding:14px 16px; font-family:inherit; font-size:1rem; line-height:1.75; color:var(--dark); resize:vertical; background:transparent; outline:none; }
.para textarea::placeholder { color:#a3aab8; }
.para-f { padding:6px 16px; border-top:1px dashed var(--border); text-align:right; font-size:.76rem; color:var(--text-muted); font-weight:600; }
.doc-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:6px; }

/* Autoevaluación y envío */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:20px 22px; margin-top:20px; }
.card h3 { font-size:1.12rem; letter-spacing:-.02em; }
.card-h { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-sub { font-size:.9rem; color:var(--text-muted); margin-top:6px; }
.card-sub b { color:var(--navy); }
.card-sub .lnk { padding:2px 6px; }
.auto-total { font-weight:800; font-size:.88rem; color:var(--navy); background:var(--navy-tint); border-radius:100px; padding:5px 12px; white-space:nowrap; }
.crit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 18px; align-items:center; padding:14px 0; border-top:1px solid var(--border); }
.crit:first-child { margin-top:12px; }
.crit-t b { color:var(--navy); font-size:.92rem; }
.crit-t p { font-size:.84rem; color:var(--text-muted); line-height:1.45; margin-top:2px; }
.pts { display:flex; gap:4px; }
.pts button { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--bg-body); color:var(--navy); font-weight:700; font-size:.88rem; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.pts button:hover { border-color:var(--mint); }
.pts button.on { background:var(--mint-deep); border-color:var(--mint-deep); color:#fff; }
.card-envio { border-color:#c7eedd; background:linear-gradient(180deg,var(--mint-tint),var(--bg-surface) 70%); }
.env-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.inp { font-family:inherit; font-size:.95rem; padding:10px 16px; border:1px solid var(--border); border-radius:100px; background:var(--bg-surface); color:var(--dark); flex:1; min-width:220px; }
.inp-codigo { flex:0 1 190px; min-width:150px; font-size:1.15rem; font-weight:700; letter-spacing:.18em; text-align:center; font-variant-numeric:tabular-nums; }
.env-quien { font-weight:700; color:var(--navy); padding:9px 4px; }
.env-links { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.env-links .lnk { padding-left:0; }
.env-msg { margin-top:12px; font-size:.9rem; padding:10px 14px; border-radius:12px; background:var(--navy-tint); color:var(--navy); }
.env-msg.ok { background:var(--mint-tint); color:#1d6b52; border:1px solid #c7eedd; }
.env-msg.err { background:#fef3f2; color:#b42318; border:1px solid #f4cfca; }
.env-msg a { font-weight:700; color:inherit; }
.env-nota { font-size:.82rem; color:#92591a; margin-top:8px; }
.env-nota:empty { display:none; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--navy); color:#fff; font-weight:600; font-size:.9rem; padding:12px 22px; border-radius:18px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:300; max-width:min(560px, calc(100% - 32px)); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:980px) {
  .wt-grid { grid-template-columns:1fr; }
  .wt-side { position:static; max-height:none; order:2; }
  .side-head { position:static; }
}
@media (max-width:640px) {
  .wt-hero { padding:36px 0 56px; }
  .wt-hero h1 { font-size:1.85rem; }
  .wt-lead { font-size:1rem; }
  .wt-bar { padding:12px; }
  .wt-bar-l, .wt-bar-r { width:100%; }
  .seg { width:100%; } .seg button { flex:1; padding:8px 6px; }
  .sel { width:100%; }
  .wt-bar-r .wb, .doc-actions .wb { flex:1; justify-content:center; }
  .hist-row { grid-template-columns:1fr auto; gap:6px 12px; }
  .hist-row .tags, .hist-n { grid-column:1; justify-self:start; }
  .hist-a { grid-column:2; grid-row:1 / span 3; flex-direction:column; }
  .crit { grid-template-columns:1fr; }
  .pts button { width:38px; height:38px; }
  .card { padding:18px 16px; }
  .env-form .wb, .env-form .inp, .env-form .sel { flex:1 1 100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  .prog i, .wc, .icon-btn, .wb, .toast, .pts button { transition:none; }
}

/* ─── Hoja para imprimir / PDF ─── */
#print-sheet { display:none; }
@media print {
  body { background:#fff; }
  body > *:not(#print-sheet) { display:none !important; }
  #print-sheet { display:block; color:#111827; font-family:'Inter',sans-serif; }
  @page { margin:18mm; }
}
.ps-head { text-align:center; border-bottom:2px solid #e5e7eb; padding-bottom:14px; margin-bottom:20px; }
.ps-brand { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1rem; color:#2fae84; letter-spacing:-.02em; }
.ps-brand span { color:#2b3349; }
.ps-head h1 { font-size:1.7rem; margin:8px 0 6px; }
.ps-meta { color:#6b7280; font-size:.9rem; }
.ps-teacher { margin-top:8px; font-weight:700; color:#2b3349; }
.ps-prompt { border-left:3px solid #2fae84; padding:6px 12px; margin-bottom:20px; font-size:.92rem; color:#374151; }
.ps-prompt small { display:block; text-transform:uppercase; font-size:.68rem; font-weight:800; letter-spacing:.08em; color:#2fae84; }
.ps-body p { margin-bottom:14px; text-align:justify; white-space:pre-wrap; font-size:1.02rem; line-height:1.7; }

/* ─── Vocabulario del tema ─── */
.vocab { background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; padding:14px 18px; margin:-6px 0 18px; }
.vocab > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.vocab > summary::-webkit-details-marker { display:none; }
.vocab-t { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.vocab-t::before { content:'+ '; color:var(--mint-deep); }
.vocab[open] .vocab-t::before { content:'− '; }
.vocab-t b { color:var(--navy); }
.vocab-n { font-size:.76rem; font-weight:700; color:var(--mint-deep); background:var(--mint-tint); border-radius:100px; padding:2px 10px; white-space:nowrap; }
.vocab-sub { font-size:.82rem; color:var(--text-muted); margin:6px 0 10px; }
.vocab-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vchip { display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; border:1px solid var(--border); background:var(--bg-body); border-radius:12px; padding:7px 12px; cursor:pointer; text-align:left; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.vchip:hover { border-color:var(--mint); background:#fff; transform:translateY(-1px); }
.vchip:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.vchip b { font-size:.88rem; color:var(--navy); font-weight:700; }
.vchip span { font-size:.74rem; color:var(--text-muted); }
.vchip.usada { background:var(--mint-tint); border-color:#a8e3c8; }
.vchip.usada b::before { content:'✓ '; color:var(--mint-deep); }
body.exam-on .vocab { display:none; }
@media (prefers-reduced-motion: reduce) { .vchip { transition:none; } .vchip:hover { transform:none; } }

/* ─── Sin checklist: la escritura se queda con el ancho ─── */
body.sin-ayudas .wt-side { display:none; }
body.sin-ayudas .wt-grid { grid-template-columns:minmax(0,1fr); max-width:980px; margin-left:auto; margin-right:auto; }
#btn-ayudas[aria-pressed="true"] { background:var(--navy-tint); border-color:#cfd5df; }

/* ─── Modo examen ───
   Fuera todo lo que ayuda: la cabecera grande, el checklist, el vocabulario,
   el análisis, las guías de cada párrafo y los colores de la marca. Queda una
   hoja pautada, el enunciado y el reloj. */
.exam-banner, .exam-float { display:none; }
body.exam-on { --mint:#6b7280; --mint-deep:#374151; --mint-tint:#f1f2f4; --navy-tint:#eceef1; background:#e6e8ec; }
body.exam-on .wt-hero, body.exam-on .wt-bar, body.exam-on .hist, body.exam-on .wt-side, body.exam-on .vocab,
body.exam-on .analysis, body.exam-on .doc-actions, body.exam-on #autoeval, body.exam-on #envio,
body.exam-on #btn-prompt, body.exam-on #wt-timer, body.exam-on .para-f { display:none !important; }
body.exam-on .wt-app { margin-top:28px; }
body.exam-on .wt-grid { grid-template-columns:minmax(0,1fr); max-width:900px; margin-left:auto; margin-right:auto; }
body.exam-on .exam-banner { display:flex; align-items:center; gap:18px; max-width:900px; margin:0 auto; background:#111827; color:#fff; border-radius:14px; padding:16px 20px; box-shadow:var(--shadow-md); }
.eb-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.eb-txt b { text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:#9ca3af; }
.eb-txt span { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.05rem; color:#fff; }
.eb-txt small { font-size:.8rem; color:#9ca3af; }
.eb-clock { font-variant-numeric:tabular-nums; font-weight:800; font-size:2rem; letter-spacing:.02em; padding:4px 14px; border-radius:10px; background:rgba(255,255,255,.08); }
.eb-clock.warn, .exam-float.warn { background:#f59e0b; color:#1f1300; }
.eb-clock.over, .exam-float.over { background:#b42318; color:#fff; }
.eb-fin { background:#fff; color:#111827; border-color:#fff; }
.eb-fin:hover { background:#e5e7eb !important; }
body.exam-on .exam-float { display:block; position:fixed; right:18px; bottom:18px; z-index:60; background:#111827; color:#fff; font-weight:800; font-variant-numeric:tabular-nums; padding:8px 14px; border-radius:100px; box-shadow:var(--shadow-lg); font-size:.95rem; }
body.exam-on .doc-head { margin-top:22px; }
body.exam-on .doc-title { color:#111827; }
body.exam-on .wc, body.exam-on .wc.ok, body.exam-on .wc.out { border-color:#d1d5db; color:#374151; background:#fff; }
body.exam-on .prompt { background:#fff; border:1px solid #d1d5db; border-left:4px solid #111827; border-radius:8px; }
body.exam-on .prompt small { color:#6b7280; }
body.exam-on .prompt p { color:#111827; font-size:1.02rem; }
body.exam-on .para { border-radius:6px; border-color:#cfd3da; box-shadow:none; }
body.exam-on .para:focus-within { border-color:#6b7280; box-shadow:0 0 0 3px rgba(17,24,39,.08); }
body.exam-on .para-h { border-bottom-color:#e5e7eb; padding:6px 20px; }
body.exam-on .para-h > * { display:none; }
body.exam-on .para-h::before { content:attr(data-n); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; }
body.exam-on .para textarea { min-height:224px; padding:6px 20px 10px; font-family:Georgia,'Times New Roman',serif; font-size:1.08rem; line-height:32px; color:#111827;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #e3e6eb 31px, #e3e6eb 32px);
  background-position:0 6px; background-attachment:local; }
body.exam-on .para textarea::placeholder { color:transparent; }
@media (max-width:640px) {
  body.exam-on .exam-banner { flex-wrap:wrap; gap:10px; }
  .eb-clock { font-size:1.5rem; }
  .eb-fin { flex:1; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) { .side-tabs button, .grp > summary::before { transition:none; } }

/* ─── Entrada al modo examen ───
   Tres segundos: la capa aparece (250 ms), el texto sube (400 ms), y los dos
   cruzan la pantalla con el científico detrás. Lo que se mueve es solo
   transform y opacity. La carrera es lineal porque es movimiento constante;
   aparecer y desaparecer, con salida fuerte. */
.ex-intro { --ex-sale:cubic-bezier(0.23, 1, 0.32, 1);
  position:fixed; inset:0; z-index:1000; background:#111827; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5vh;
  overflow:hidden; cursor:pointer; opacity:0; animation:exAparece .25s var(--ex-sale) forwards; }
.ex-intro.sale { animation:exDesaparece .3s var(--ex-sale) forwards; pointer-events:none; }
@keyframes exAparece { to { opacity:1; } }
@keyframes exDesaparece { from { opacity:1; } to { opacity:0; } }

.ex-txt { text-align:center; padding:0 24px; opacity:0; transform:translateY(8px); animation:exTexto .4s var(--ex-sale) .2s forwards; }
@keyframes exTexto { to { opacity:1; transform:none; } }
.ex-txt small { display:block; text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; font-weight:800; color:#9ca3af; }
.ex-txt h2 { color:#fff; font-size:clamp(1.7rem, 4.6vw, 3.1rem); letter-spacing:-.03em; margin:12px 0 8px; }
.ex-txt p { color:#d1d5db; font-size:1rem; }
.ex-saltar { position:absolute; bottom:22px; left:0; right:0; text-align:center; font-size:.78rem; color:#6b7280; }

.ex-pista { position:relative; width:100%; height:min(46vh, 430px); border-bottom:2px solid rgba(255,255,255,.12); }
.ex-corre { position:absolute; left:0; bottom:0; height:100%; animation:exCruza 2.3s linear both; }
.ex-corre svg { height:100%; width:auto; display:block; overflow:visible; transform-origin:50% 100%; animation:exBote .16s ease-in-out infinite alternate; }
/* Van delante los dos; él, un poco más grande y medio segundo detrás. */
.ex-corre--chica { animation-delay:.15s; }
.ex-corre--chico { animation-delay:.3s; }
.ex-corre--cientifico { animation-delay:.55s; height:104%; }
@keyframes exCruza { from { transform:translateX(-30vw); } to { transform:translateX(112vw); } }
@keyframes exBote { from { transform:translateY(0) rotate(7deg); } to { transform:translateY(-3%) rotate(7deg); } }

/* Zancadas y braceo: cada pierna y cada brazo, a contratiempo de su pareja. */
.ex-corre .pn-pierna, .ex-corre .rn-pierna { transform-box:fill-box; transform-origin:50% 0; animation:exZancada .32s ease-in-out infinite alternate; }
.ex-corre .pn-pierna--b, .ex-corre .rn-pierna--b { animation-delay:-.32s; }
@keyframes exZancada { from { transform:rotate(30deg); } to { transform:rotate(-30deg); } }
.ex-corre .pn-brazo { transform-box:fill-box; transform-origin:50% 6%; animation:exBrazo .32s ease-in-out infinite alternate; }
.ex-corre .pn-saluda { animation-delay:-.32s; }
@keyframes exBrazo { from { transform:rotate(-34deg); } to { transform:rotate(34deg); } }
/* Él va blandiendo la brocha. */
.ex-corre .ci-brazo--d { transform-box:fill-box; transform-origin:0% 100%; animation:exBrocha .2s ease-in-out infinite alternate; }
.ex-corre .ci-brazo--i { transform-box:fill-box; transform-origin:100% 0%; animation:exBrazo .32s ease-in-out infinite alternate; }
@keyframes exBrocha { from { transform:rotate(-12deg); } to { transform:rotate(10deg); } }

@media (max-width:640px) {
  .ex-pista { height:34vh; }
  .ex-intro { gap:4vh; }
}
/* Menos movimiento: sin carrera. Queda el texto y un fundido. */
@media (prefers-reduced-motion: reduce) {
  .ex-pista { display:none; }
  .ex-txt { transform:none; animation:exAparece .2s ease .1s forwards; }
}