/* Reading Trainer · estilos propios (los comunes, en comun.css y uoe.css) */

/* Panel de arriba: lecturas */
.rd-arts { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.rd-art { position:relative; display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; align-items:center; text-align:left; cursor:pointer; font-family:inherit; background:var(--bg-body); border:1px solid var(--border); border-radius:16px; padding:10px; transition:border-color .2s ease, background .2s ease; }
.rd-art img { width:88px; height:88px; object-fit:cover; border-radius:12px; display:block; background:var(--navy-tint); }
.rd-art-c { min-width:0; display:flex; flex-direction:column; gap:2px; padding-right:44px; }
.rd-art-c small { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-deep); }
.rd-art-c b { font-family:'Plus Jakarta Sans',sans-serif; font-size:.98rem; color:var(--navy); line-height:1.25; }
.rd-art-c span { font-size:.82rem; color:var(--text-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rd-art em { position:absolute; top:10px; right:10px; font-style:normal; font-size:.7rem; font-weight:800; color:var(--text-muted); background:var(--navy-tint); border-radius:100px; padding:1px 7px; }
.rd-art em.hecho { color:var(--mint-deep); background:var(--mint-tint); }
.rd-art:hover:not(.on) { border-color:#c9cfda; }
.rd-art.on { background:var(--bg-surface); border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.rd-info { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:14px; font-size:.86rem; font-weight:600; color:var(--dark-soft); }
.rd-chip { font-size:.74rem; font-weight:800; color:var(--navy); background:var(--navy-tint); border-radius:100px; padding:3px 10px; }
.rd-links { display:flex; gap:4px 14px; flex-wrap:wrap; margin-left:auto; }
.rd-links a { display:inline-flex; align-items:center; gap:4px; color:var(--mint-deep); font-weight:700; text-decoration:none; }
.rd-links a:hover { text-decoration:underline; }
.rd-links svg { width:14px; height:14px; }

/* La hoja: texto a la izquierda, tareas a la derecha */
.rd-hoja { padding:0; }
.rd-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.rd-txt { position:relative; padding:30px clamp(18px,4vw,44px) 24px; border-right:1px solid var(--border); min-width:0; }
.rd-col { position:sticky; top:82px; align-self:start; max-height:calc(100vh - 94px); overflow-y:auto; overscroll-behavior:contain; padding:22px 20px 24px; min-width:0; }
body.ux-on .rd-col { top:84px; max-height:calc(100vh - 96px); }

.rd-txt p, .rd-txt blockquote, .rd-txt .rd-sub, .rd-txt .rd-tit, .rd-txt .rd-fb, .rd-txt .pk, .rd-txt .rg-par { max-width:68ch; }
.rd-txt p { font-size:1.04rem; line-height:1.8; color:var(--dark); margin:0 0 1em; }
.rd-tit { font-size:clamp(1.35rem,2.4vw,1.7rem); letter-spacing:-.02em; line-height:1.2; margin:0 0 .8em; padding-right:70px; }
.rd-sub { font-size:1.08rem; margin:1.6em 0 .6em; color:var(--navy); }
.rd-cita { margin:1.2em 0; padding:4px 0 4px 18px; border-left:3px solid var(--mint); font-family:'Plus Jakarta Sans',sans-serif; font-size:1.12rem; font-weight:700; line-height:1.45; color:var(--navy); }
.rd-ayuda { font-size:.82rem; font-weight:600; color:var(--text-muted); margin:0 0 14px !important; }

/* Notas de lengua (como en el blog) */
.ing { border-bottom:2px dotted var(--mint-deep); cursor:pointer; border-radius:3px; transition:background .15s ease; }
.ing:hover, .ing.on { background:var(--mint-tint); }
.ing:focus-visible { outline:2px solid var(--mint-deep); outline-offset:2px; }
.ing-nota { display:block; margin:6px 0 10px; padding:10px 14px; background:var(--mint-tint); border-radius:12px; font-size:.9rem; line-height:1.55; color:var(--dark-soft); font-family:Inter,sans-serif; font-weight:500; font-style:normal; }
.rd-cita .ing-nota, .rd-tit .ing-nota { font-size:.9rem; }

/* Huecos */
.rg { cursor:pointer; border-radius:8px; padding:1px 6px 1px 3px; background:var(--navy-tint); border-bottom:2px solid #c9cfda; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .15s ease, border-color .15s ease; }
.rg-cab { white-space:nowrap; }
.rg .gn { margin-right:5px; vertical-align:1px; }
.rg-v { display:inline-block; width:5.5em; }
.rg-l { font-weight:800; color:var(--navy); margin-right:5px; }
.rg-t { color:var(--dark); }
.rg:not([data-gap]) { cursor:default; }
.rg[data-gap]:hover { border-bottom-color:var(--navy); }
.rg.act { background:#fff; outline:2px solid var(--mint); outline-offset:1px; }
.rg:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.rg.st-ok { background:var(--ok-tint); border-color:var(--ok); }
.rg.st-mal { background:var(--mal-tint); border-color:var(--mal); }
.rg.st-ver { background:var(--navy-tint); border-color:#9aa3b5; }
.rg.st-vacio { background:var(--mal-tint); border-bottom-style:dashed; border-color:var(--mal); }
.rg-par { display:flex; align-items:flex-start; gap:4px; margin:0 0 1em; padding:12px 14px; border:1.5px dashed #c9cfda; border-radius:12px; background:var(--bg-body); font-size:1.02rem; line-height:1.75; }
.rg-par .gn { margin-top:5px; }
.rg-par .rg-v { width:auto; font-size:.86rem; font-weight:600; color:var(--text-muted); padding-top:2px; }
.rg-par.lleno { border-style:solid; border-color:#c9cfda; background:#fff; }
.rg-par.st-ok { border-color:var(--ok); background:var(--ok-tint); }
.rg-par.st-mal { border-color:var(--mal); background:var(--mal-tint); }
.rg-par.st-ver { border-color:#9aa3b5; background:var(--navy-tint); }
.rg-par.st-vacio { border-color:var(--mal); }
.rg-par.act { outline-offset:2px; }

/* Corrección de un hueco, debajo de su párrafo */
.rd-fb { margin:-.3em 0 1.1em; }

/* Selector de frases */
.pk { margin:-.2em 0 1.2em; background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); padding:12px; transform-origin:top left; animation:rd-pk .2s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes rd-pk { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.pk-h { display:flex; align-items:center; gap:8px; padding:2px 2px 10px; }
.pk-h b { font-size:.9rem; color:var(--navy); flex:1; min-width:0; }
.pk-acc { display:flex; gap:2px; }
.pk-l { display:grid; gap:6px; }

/* Frases (en el selector y en la columna) */
.rf-l { display:grid; gap:8px; }
.rf { position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; text-align:left; cursor:pointer; font-family:inherit; font-size:.92rem; line-height:1.5; color:var(--dark); background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; transition:border-color .15s ease, background .15s ease; }
.rf b { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:var(--navy-tint); color:var(--navy); font-size:.8rem; }
.rf em { grid-column:2; justify-self:start; font-style:normal; font-size:.7rem; font-weight:800; color:var(--text-muted); background:var(--navy-tint); border-radius:100px; padding:1px 8px; }
.rf em.sobra { color:#92591a; background:var(--medio-tint); }
.rf-par .rf { font-size:.88rem; }
.rf:hover:not(:disabled) { border-color:#9aa3b5; }
.rf.usada { background:var(--bg-body); }
.rf.usada span { color:var(--text-muted); }
.rf.sel { border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; }
.rf.sel b { background:var(--navy); color:#fff; }
.rf:disabled { cursor:default; }
.rd-col .rf:disabled { opacity:1; }
.pk .rf:disabled { opacity:.5; }
.rd-pista { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; font-size:.86rem; font-weight:600; color:var(--dark-soft); margin:0 0 10px; padding:6px 6px 6px 12px; background:var(--bg-body); border-radius:10px; }
.rd-pista.act { color:var(--navy); background:var(--mint-tint); }
.rd-pista .lnk { padding:3px 10px; font-size:.8rem; }
.rd-pista.avisa { color:#92591a; background:var(--medio-tint); animation:rd-avisa .3s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes rd-avisa { 30% { transform:translateX(-3px); } 70% { transform:translateX(3px); } }
.rd-sobra { margin-top:14px; font-size:.88rem; line-height:1.55; color:var(--dark-soft); padding:10px 12px; background:var(--medio-tint); border-radius:12px; }
.rd-sobra b { color:#92591a; }

/* Columna: pestañas y preguntas */
.rd-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.rd-tabs .ux-parte { padding:10px 12px; }
.rd-tabs .ux-parte i { color:var(--text-muted); background:var(--navy-tint); }
.rd-tabs .ux-parte.on i { color:var(--navy); background:#fff; }
.rd-panel.off { display:none; }
.rd-panel .ux-h { margin-bottom:14px; }
.rd-panel .ux-rub { font-size:.88rem; }
.rq-l { display:grid; gap:20px; }
.rq-q { display:flex; gap:10px; align-items:flex-start; font-weight:700; color:var(--navy); line-height:1.45; margin-bottom:8px; }
.rq-q .gn { margin-top:1px; }
.rq .ops { grid-template-columns:1fr; gap:6px; }
.rq .op { font-size:.9rem; align-items:flex-start; line-height:1.45; }
.rq .op b { margin-top:1px; }
.rq .fb { margin-top:8px; }
.rq.st-ok .gn { background:var(--ok); }

/* Pie de práctica y examen */
.rd-pie { margin:0; padding:18px clamp(18px,4vw,44px); }
.rd-empezar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.rd-empezar span { font-size:.86rem; font-weight:700; color:var(--mint-deep); }
.rd-hist li { grid-template-columns:70px minmax(0,1fr) auto auto; }
.rd-hist li span:nth-child(2) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-num small { font-size:1.4rem; margin-left:2px; }
.cr-top.fr-B .cr-num { color:var(--navy); }
.ux-papel .rd-txt { border-right-color:#d5dae3; }
.ux-papel .rg { background:#f1f3f7; }
.ux-papel .rg.act { background:#fff; outline-color:#8b94a7; }
.ux-papel .rd-cita { border-left-color:#9aa3b5; }
.ux-papel .rd-tabs .ux-parte.on { background:#1f2533; border-color:#1f2533; }
.ux-papel .rd-art-c small, .ux-papel .ux-kick { color:var(--dark-soft); }
.ux-papel .rf.sel { border-color:#1f2533; box-shadow:0 0 0 1px #1f2533 inset; }
.ux-papel .rf.sel b, .ux-papel .rf b { background:#e5e8ef; color:#1f2533; }

/* En pantalla ancha el banco de la columna hace de selector. */
@media (min-width:901px) {
  .pk { display:none; }
}
@media (max-width:900px) {
  .rd-grid { grid-template-columns:1fr; }
  .rd-txt { border-right:none; border-bottom:1px solid var(--border); }
  .rd-col { position:static; max-height:none; overflow:visible; padding:22px clamp(18px,4vw,44px); }
  .rd-tabs { display:none; }
  .rd-panel.off { display:block; }
  .rd-panel + .rd-panel { margin-top:28px; padding-top:22px; border-top:1px solid var(--border); }
  .rd-links { margin-left:0; }
}
@media (max-width:600px) {
  .rd-arts { grid-template-columns:1fr; }
  .rd-art { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .rd-art img { width:64px; height:64px; border-radius:10px; }
  .rd-txt { padding:22px 16px 18px; }
  .rd-col { padding:20px 16px; }
  .rd-pie { padding:16px; }
  .rd-txt p { font-size:1rem; line-height:1.75; }
  .rd-tit { padding-right:0; }
  .rg-v { width:4em; }
  .pk { padding:10px; margin-left:-6px; margin-right:-6px; }
  .rd-hist li { grid-template-columns:52px minmax(0,1fr) auto auto; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk, .rd-pista.avisa { animation:none; }
  .rd *, .ing { transition:none !important; }
}