/* Use of English Trainer · estilos propios (los comunes, en comun.css) */
:root {
  --ok:#1f9d6f; --ok-tint:#e7f8f0; --mal:#c2352b; --mal-tint:#fdecea; --medio:#b7791f; --medio-tint:#fdf4e3;
  --fr-sin:#e5e7eb; --fr-inf:#fde7b0; --fr-C:#c9efdd; --fr-B:#86dbb8; --fr-A:#2fae84;
}
.uoe [hidden] { display:none !important; }
.uoe { margin-top:-32px; margin-bottom:56px; position:relative; display:grid; gap:20px; }
.cc-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:22px; }

/* Selectores (los mismos de la calculadora) */
.seg { display:inline-flex; gap:2px; background:var(--bg-body); padding:3px; border-radius:100px; border:1px solid var(--border); flex-wrap:wrap; }
.seg button { border:none; background:none; cursor:pointer; padding:8px 14px; border-radius:100px; font-family:inherit; 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) { color:var(--navy); }
.seg button.on { background:var(--bg-surface); color:var(--navy); box-shadow:var(--shadow-sm); }
.seg-modo button.on[data-modo="examen"] { background:var(--navy); color:#fff; }
.seg button:disabled { opacity:.45; cursor:default; }
.seg-modo button small { display:inline-block; min-width:1.5em; margin-left:6px; padding:0 5px; border-radius:100px; background:var(--mal-tint); color:var(--mal); font-size:.72rem; font-weight:800; opacity:1; }
.uoe button:focus-visible, .uoe a:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.lnk { border:none; background:none; cursor:pointer; font-family:inherit; 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; }
.ux-btn { border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.88rem; color:#fff; background:var(--navy); padding:10px 18px; border-radius:100px; transition:background .2s ease; }
.ux-btn:hover { background:var(--navy-light); }
a.ux-btn { display:inline-block; text-decoration:none; }
.ux-btn-lg { font-size:1rem; padding:14px 34px; }

/* Panel de arriba */
.ux-ctrl { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.ux-partes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ux-partes.n2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ux-parte { position:relative; text-align:left; cursor:pointer; font-family:inherit; background:var(--bg-body); border:1px solid var(--border); border-radius:14px; padding:12px 14px; transition:border-color .2s ease, background .2s ease; }
.ux-parte b { display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--navy); font-size:1rem; }
.ux-parte span { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); line-height:1.3; margin-top:2px; }
.ux-parte i { position:absolute; top:10px; right:10px; font-style:normal; font-size:.68rem; font-weight:800; color:var(--mint-deep); background:var(--mint-tint); border-radius:100px; padding:1px 7px; }
.ux-parte:hover:not(.on) { border-color:#c9cfda; }
.ux-parte.on { background:var(--navy); border-color:var(--navy); }
.ux-parte.on b { color:#fff; }
.ux-parte.on span { color:#c8cee0; }
.ux-que { margin:14px 0 12px; font-size:.92rem; color:var(--dark-soft); }
.ux-ejs { display:flex; gap:8px; flex-wrap:wrap; }
.ux-ej { cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:700; color:var(--dark-soft); background:var(--bg-surface); border:1px solid var(--border); border-radius:100px; padding:7px 14px; display:inline-flex; align-items:center; gap:8px; transition:border-color .2s ease, color .2s ease; }
.ux-ej:hover:not(.on) { color:var(--navy); border-color:#c9cfda; }
.ux-ej.on { border-color:var(--mint-deep); color:var(--navy); box-shadow:0 0 0 1px var(--mint-deep) inset; }
.ux-ej em { font-style:normal; font-size:.7rem; font-weight:800; color:var(--text-muted); background:var(--navy-tint); border-radius:100px; padding:1px 7px; }
.ux-ej em.hecho { color:var(--mint-deep); background:var(--mint-tint); }

/* La hoja del ejercicio */
.ux-hoja { padding:28px clamp(18px,4vw,40px) 26px; position:relative; }
.ux-h { max-width:780px; }
.ux-kick { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep); }
.ux-rub { margin-top:6px; font-size:.95rem; font-style:italic; color:var(--dark-soft); }
.ux-tit { margin:20px 0 8px; font-size:1.25rem; letter-spacing:-.02em; }
.ux-texto { max-width:780px; font-size:1.04rem; line-height:2.25; color:var(--dark); }
.gn { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border-radius:100px; background:var(--navy); color:#fff; font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; flex:none; }

/* Huecos de escribir (Parts 2 y 3) */
.gap { display:inline-flex; align-items:center; gap:5px; vertical-align:baseline; margin:0 2px; white-space:nowrap; }
.gap input, .kw-b input { font-family:inherit; font-size:1rem; font-weight:600; color:var(--navy); width:8.5em; max-width:46vw; padding:3px 8px; border:1px solid #c9cfda; border-radius:8px; background:var(--bg-body); line-height:1.5; transition:border-color .2s ease, background .2s ease; }
.gap3 input { width:10.5em; }
.gap input:focus, .kw-b input:focus { outline:2px solid var(--mint); outline-offset:1px; background:#fff; }
.raiz { font-size:.72rem; font-weight:800; letter-spacing:.05em; color:var(--dark-soft); background:var(--navy-tint); border-radius:6px; padding:1px 6px; }
.st-ok input { border-color:var(--ok); background:var(--ok-tint); color:#14684a; }
.st-mal input { border-color:var(--mal); background:var(--mal-tint); }
.st-medio input { border-color:var(--medio); background:var(--medio-tint); }
.st-ver input { border-color:#9aa3b5; background:var(--navy-tint); color:var(--dark-soft); }
.st-vacio input { border-style:dashed; border-color:var(--mal); }
.st-ok .gn { background:var(--ok); } .st-mal .gn, .st-vacio .gn { background:var(--mal); } .st-medio .gn { background:var(--medio); } .st-ver .gn { background:#8b94a7; }
input[readonly] { cursor:default; }

/* Part 1: hueco en el texto y filas de opciones */
.g1 { display:inline-flex; align-items:center; gap:5px; vertical-align:baseline; text-decoration:none; color:var(--navy); font-weight:700; border-bottom:2px solid #c9cfda; padding:0 3px 0 0; margin:0 2px; }
.g1-v { display:inline-block; width:4.5em; }
.g1.st-ok { border-color:var(--ok); color:#14684a; } .g1.st-mal { border-color:var(--mal); } .g1.st-ver { border-color:#9aa3b5; }
.op-lista { margin-top:22px; display:grid; gap:10px; max-width:780px; }
.op-fila { display:grid; grid-template-columns:28px minmax(0,1fr); gap:6px 10px; align-items:start; scroll-margin:110px; }
.op-fila > .gn { margin-top:9px; }
.ops { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.op { display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer; font-family:inherit; font-size:.92rem; font-weight:600; color:var(--dark-soft); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0; overflow-wrap:anywhere; transition:border-color .2s ease, background .2s ease; }
.op b { flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--navy-tint); color:var(--navy); font-size:.72rem; }
.op:hover:not(:disabled):not(.sel) { border-color:#9aa3b5; }
.op.sel { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; color:var(--navy); }
.op.sel b { background:var(--navy); color:#fff; }
.op.bien { border-color:var(--ok); background:var(--ok-tint); color:#14684a; box-shadow:0 0 0 1px var(--ok) inset; }
.op.bien b { background:var(--ok); color:#fff; }
.op.fallo { border-color:var(--mal); background:var(--mal-tint); box-shadow:0 0 0 1px var(--mal) inset; color:var(--mal); }
.op.fallo b { background:var(--mal); color:#fff; }
.op:disabled { cursor:default; }
.op:disabled:not(.bien):not(.fallo) { opacity:.6; }
.op-fila .fb { grid-column:2; }

/* Part 4 */
.kw-lista { margin-top:18px; display:grid; gap:12px; max-width:780px; }
.kw { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-body); transition:border-color .2s ease; }
.kw > .gn { margin-top:2px; justify-self:start; }
.kw-a { color:var(--dark); }
.kw-k { margin:6px 0; font-weight:800; letter-spacing:.12em; color:var(--navy); }
.kw-b { color:var(--dark); line-height:2; }
.kw-b input { width:16em; max-width:100%; margin:0 4px; }
.kw-n { display:block; font-size:.76rem; font-weight:700; color:var(--text-muted); }
.kw-n.mal { color:var(--mal); }
.kw.st-ok { border-color:var(--ok); } .kw.st-mal, .kw.st-vacio { border-color:#f1b3ad; } .kw.st-medio { border-color:#ecc983; }

/* Corrección */
.fb { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--dark-soft); line-height:1.5; }
.fb-lista { list-style:none; margin:22px 0 0; padding:16px 0 0; border-top:1px solid var(--border); display:grid; gap:10px; max-width:780px; }
.op-fila .fb, .kw .fb { margin-top:6px; }
.fb-i { flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:100px; font-size:.78rem; font-weight:800; color:#fff; margin-top:1px; }
.fb-ok { background:var(--ok); } .fb-mal, .fb-vacio { background:var(--mal); } .fb-medio { background:var(--medio); } .fb-ver { background:#8b94a7; }
.fb-t { min-width:0; }
.fb-t b { color:var(--navy); }
.fb-n { display:inline-block; min-width:1.4em; color:var(--text-muted) !important; }
.fb-p { color:#92591a; font-weight:600; }
.fb-tu { font-weight:700; color:var(--dark); }
.fb-pts { font-size:.72rem; font-weight:800; background:var(--navy-tint); color:var(--navy); border-radius:100px; padding:1px 7px; }
.fb-ex { display:block; color:var(--text-main); margin-top:2px; }
.fb .lnk { padding:2px 8px; font-size:.8rem; }
.fb-pv { display:inline-block; margin-left:4px; font-size:.82rem; font-weight:700; color:var(--mint-deep); text-decoration:none; }
.fb-pv::after { content:' →'; }
.fb-pv:hover { text-decoration:underline; }

/* Pie de práctica */
.ux-pie { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; padding-top:18px; border-top:1px solid var(--border); }
.ux-cuenta { display:flex; align-items:baseline; gap:5px; }
.ux-cuenta b { font-family:'Plus Jakarta Sans',sans-serif; font-size:2rem; font-weight:800; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums; }
.ux-cuenta span { font-weight:700; color:var(--text-muted); }
.ux-cuenta small { font-size:.8rem; color:var(--text-muted); margin-left:4px; }
.ux-prog-txt { flex:1; min-width:180px; }
.ux-prog-txt p { font-size:.86rem; font-weight:600; color:var(--dark-soft); margin-bottom:6px; }
.ux-prog { height:8px; border-radius:100px; background:var(--navy-tint); overflow:hidden; }
.ux-prog i { display:block; height:100%; width:var(--p); background:var(--mint-deep); border-radius:100px; transition:width .3s cubic-bezier(0.23, 1, 0.32, 1); }
.ux-acc { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* Repaso: un hueco suelto */
.ux-repaso .ux-texto { margin-top:18px; }
.ux-repaso .op-lista { margin-top:14px; }
.ux-rp-otro { font-weight:600; color:var(--text-muted); }
.ux-rp-fb { margin-top:12px; max-width:780px; }
.ux-rp-msg { font-weight:700; }
.ux-rp-msg.rp-bien, .ux-rp-msg.rp-sale { color:var(--ok); }
.ux-rp-msg.rp-mal { color:var(--mal); }
.ux-rp-vacio { color:var(--dark-soft); margin-bottom:14px; max-width:640px; }

/* Modo examen: pantalla de inicio */
.ux-inicio h2 { font-size:1.35rem; letter-spacing:-.02em; }
.ux-inicio > p { margin-top:6px; color:var(--dark-soft); max-width:720px; }
.ux-reglas { margin:14px 0 18px; padding-left:20px; color:var(--text-main); font-size:.92rem; display:grid; gap:4px; }
.ux-tests { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ux-test { text-align:left; cursor:pointer; font-family:inherit; background:var(--bg-body); border:1px solid var(--border); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; transition:border-color .2s ease, background .2s ease; }
.ux-test b { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; color:var(--navy); }
.ux-test span { font-size:.84rem; color:var(--text-muted); }
.ux-test em { font-style:normal; font-size:.78rem; font-weight:700; color:var(--mint-deep); }
.ux-test i { font-style:normal; font-weight:800; font-size:.88rem; color:var(--navy); margin-top:6px; }
.ux-test:hover { border-color:var(--navy); background:#fff; }
.ux-hist { margin-top:20px; }
.ux-hist h3 { font-size:.95rem; margin-bottom:6px; }
.ux-hist ul { list-style:none; padding:0; margin:0; }
.ux-hist li { display:grid; grid-template-columns:70px 70px 1fr auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid var(--border); font-size:.88rem; color:var(--dark-soft); }
.ux-hist b { color:var(--navy); font-variant-numeric:tabular-nums; }
.ux-hist em { font-style:normal; font-weight:800; font-size:.8rem; color:var(--navy); border-radius:100px; padding:2px 9px; font-variant-numeric:tabular-nums; }
.ux-hist em.fr-A { color:#fff; }

/* Modo examen: en marcha. Más sobrio: sin colores de marca, hoja de papel. */
body.ux-on nav { position:relative; }
body.ux-on .wt-hero { background:#1f2533; padding-bottom:56px; }
body.ux-on .wt-hero h1 span { color:#fff; }
body.ux-on .wt-hero .wt-lead, body.ux-on .wt-hero .wt-note { display:none; }
.ux-barra { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; background:#1f2533; color:#e5e8ef; border-radius:16px; padding:12px 14px 12px 20px; box-shadow:var(--shadow-lg); }
.ux-b-t { flex:1; min-width:200px; font-size:.9rem; }
.ux-b-t b { color:#fff; }
.ux-b-prog { font-size:.86rem; color:#b6bdcc; }
.ux-b-prog b { color:#fff; font-variant-numeric:tabular-nums; }
.ux-b-reloj { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.35rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; min-width:4.2ch; text-align:right; }
.ux-barra.poco .ux-b-reloj { color:#f6c76b; }
.ux-barra.fuera .ux-b-reloj { color:#ff8f86; }
.ux-b-acc { display:flex; gap:6px; align-items:center; }
.ux-b-salir { color:#b6bdcc; }
.ux-b-salir:hover { background:rgba(255,255,255,.08); color:#fff; }
.ux-barra .ux-btn { background:#fff; color:#1f2533; }
.ux-barra .ux-btn:hover { background:#e5e8ef; }
.ux-fuera { background:var(--mal-tint); color:#8a2219; border-radius:12px; padding:10px 14px; font-size:.9rem; font-weight:600; }
.ux-papel { border-radius:8px; box-shadow:0 1px 3px rgba(17,24,39,.08); border-color:#d5dae3; }
.ux-papel .ux-kick { color:var(--dark-soft); }
.ux-papel .gn, .ux-papel .op.sel b { background:#1f2533; }
.ux-papel .op.sel { border-color:#1f2533; box-shadow:0 0 0 1px #1f2533 inset; color:#1f2533; }
.ux-papel .gap input:focus, .ux-papel .kw-b input:focus { outline-color:#8b94a7; }
.ux-final { text-align:center; padding:6px 0 10px; }

/* Modo examen: resultado */
.ux-res { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.cr-label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.cr-top { display:flex; align-items:center; gap:16px; margin-top:10px; padding:16px 18px; border-radius:16px; }
.cr-top.fr-sin { background:#f3f4f6; }
.cr-num { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:3.2rem; line-height:1; color:var(--navy); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.cr-num small { font-size:1.3rem; color:var(--text-muted); letter-spacing:0; }
.cr-txt b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.25rem; color:var(--navy); line-height:1.2; }
.cr-txt span { font-weight:700; color:var(--dark-soft); }
.cr-top.fr-A .cr-num, .cr-top.fr-A .cr-txt b, .cr-top.fr-A .cr-txt span { color:#fff; }
.cr-aviso { margin-top:12px; font-size:.78rem; color:var(--text-muted); line-height:1.5; }
.ux-nube { margin-top:12px; padding:10px 14px; border-radius:12px; background:var(--navy-tint); font-size:.86rem; color:var(--dark-soft); line-height:1.5; }
.ux-nube a { color:var(--mint-deep); font-weight:700; }
.ux-nube .lnk { padding:2px 8px; }
.ux-nube.n-ok { background:var(--ok-tint); color:#14684a; font-weight:600; }
.ux-nube.n-red, .ux-nube.n-noPermiso, .ux-nube.n-limite, .ux-nube.n-sinTabla { background:var(--medio-tint); color:#7a4d12; }
.ux-usado { margin-top:10px; font-size:.86rem; font-weight:600; color:var(--dark-soft); }
.fr-sin { background:var(--fr-sin); } .fr-inf { background:var(--fr-inf); } .fr-C { background:var(--fr-C); } .fr-B { background:var(--fr-B); } .fr-A { background:var(--fr-A); }
.ux-desglose { display:grid; gap:10px; }
.ux-dp { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 44px; gap:10px; align-items:center; font-size:.88rem; }
.ux-dp span { font-weight:600; color:var(--dark-soft); }
.ux-dp span small { display:block; font-size:.74rem; font-weight:600; color:var(--text-muted); }
.ux-dp i { height:10px; border-radius:100px; background:var(--navy-tint); position:relative; overflow:hidden; }
.ux-dp i::after { content:''; position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:100px; background:var(--navy); }
.ux-dp.aparte { padding-bottom:10px; border-bottom:1px dashed var(--border); }
.ux-dp.aparte i::after { background:#9aa3b5; }
.ux-dp b { text-align:right; color:var(--navy); font-variant-numeric:tabular-nums; }
.ux-acc-res { margin-top:18px; }
.ux-nota { position:absolute; top:22px; right:24px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem; color:var(--navy); font-variant-numeric:tabular-nums; }
.ux-nota small { font-size:.9rem; color:var(--text-muted); }

@media (max-width:900px) {
  .ux-partes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ux-res { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .cc-card { padding:18px 16px; }
  .ux-hoja { padding:22px 16px; }
  .seg { width:100%; } .seg button { flex:1; padding:8px 4px; }
  .ops { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ux-texto { font-size:1rem; line-height:2.3; }
  .gap input { width:7.5em; }
  .gap3 { white-space:normal; }
  .kw { grid-template-columns:1fr; padding:12px; }
  .kw-b input { width:100%; margin:4px 0; }
  .ux-tests { grid-template-columns:1fr; }
  .ux-barra { padding:10px 12px; border-radius:12px; gap:4px 12px; }
  .ux-b-t { min-width:100%; font-size:.8rem; }
  .ux-b-prog > span { display:none; }
  .ux-b-reloj { font-size:1.15rem; }
  .ux-b-acc { margin-left:auto; gap:2px; }
  .ux-barra .ux-btn { padding:8px 14px; font-size:.84rem; }
  .ux-b-salir { padding:6px 8px; }
  .ux-nota { position:static; display:block; margin-bottom:6px; }
  .ux-hist li { grid-template-columns:60px 1fr auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uoe *, .seg button { transition:none !important; }
}