/* Test de nivel de inglés · estilos propios (los comunes, en comun.css) */
:root {
  --tn-ok:#1d7a5b; --tn-ok-tint:#e3f6ee; --tn-ok-bar:#2fae84;
  --tn-medio:#8a5212; --tn-medio-tint:#fdf3e1; --tn-medio-bar:#f0b429;
  --tn-bajo:#9b2c22; --tn-bajo-tint:#fdeeec; --tn-bajo-bar:#e07a6e;
  --tn-wa:#0f7a40; --tn-wa-hover:#0b6634;
}

.tn { margin-top:-32px; margin-bottom:56px; position:relative; }
.tn-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px; min-width:0; }
.tn-inicio, .tn-preg { max-width:760px; margin:0 auto; }
.tn-h { font-size:1.3rem; letter-spacing:-.02em; }
.tn-h:focus, .tn-frase:focus, .tn-nivel-code:focus { outline:none; }
.tn-sub { font-size:.93rem; color:var(--text-main); margin-top:6px; }
.tn-label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* Botones */
.tn-acciones { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:22px; }
.tn-btn { font-family:inherit; font-size:.98rem; font-weight:700; border:none; cursor:pointer; border-radius:100px; padding:13px 26px; background:var(--navy); color:#fff; min-height:48px; transition:background .2s ease, transform .15s ease; }
.tn-btn:hover:not(:disabled) { background:var(--navy-light); }
.tn-btn:active:not(:disabled) { transform:translateY(1px); }
.tn-btn:disabled { background:#c3c8d3; color:#4b5563; cursor:not-allowed; }
.tn-btn-sec { background:var(--bg-surface); color:var(--navy); border:1.5px solid #c3c8d3; }
.tn-btn-sec:hover:not(:disabled) { background:var(--navy-tint); }
.tn-btn:focus-visible, .tn-op:focus-visible, .tn-lnk:focus-visible, .tn-wa:focus-visible, .tn-links a:focus-visible { outline:3px solid var(--mint-deep); outline-offset:2px; }
.tn-lnk { border:none; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.88rem; color:var(--tn-ok); padding:6px 10px; border-radius:100px; text-decoration:underline; text-underline-offset:2px; }
.tn-lnk:hover { background:var(--mint-tint); }
.tn-lnk-gris { color:var(--text-muted); text-decoration:none; }

/* Inicio */
.tn-lista { margin:14px 0 0; padding-left:0; list-style:none; display:grid; gap:10px; }
.tn-lista li { position:relative; padding-left:28px; font-size:.97rem; color:var(--dark-soft); }
.tn-lista li::before { content:''; position:absolute; left:4px; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--mint); }
.tn-lista b { color:var(--navy); }
.tn-inicio .tn-acciones { justify-content:flex-start; }
.tn-ultimo { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:18px; padding:10px 14px; background:var(--navy-tint); border-radius:12px; font-size:.92rem; font-weight:600; color:var(--navy); }

/* Pregunta */
.tn-top { display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; align-items:baseline; }
.tn-kick { font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tn-ok); }
.tn-num { font-size:.86rem; font-weight:600; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.tn-bar { height:8px; border-radius:100px; background:var(--navy-tint); overflow:hidden; margin:10px 0 18px; }
.tn-bar i { display:block; height:100%; background:var(--mint-deep); border-radius:100px; transition:width .3s cubic-bezier(0.23, 1, 0.32, 1); }
.tn-aviso-sube { margin:-6px 0 14px; padding:8px 12px; border-radius:10px; background:var(--tn-ok-tint); color:var(--tn-ok); font-size:.9rem; font-weight:600; }
.tn-elige { font-size:.88rem; color:var(--text-muted); margin-bottom:6px; }
.tn-frase { font-family:'Inter',sans-serif; font-weight:600; font-size:1.3rem; line-height:1.6; color:var(--dark); letter-spacing:-.01em; margin-bottom:18px; overflow-wrap:anywhere; }
.tn-gap { display:inline-block; min-width:5.5em; border-bottom:3px solid #9aa3b5; margin:0 2px; line-height:1.2; vertical-align:baseline; }
.tn-gap.lleno { min-width:0; padding:0 6px; border-bottom-color:var(--navy); background:var(--navy-tint); border-radius:6px 6px 0 0; color:var(--navy); font-weight:700; }

.tn-ops { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tn-ops-1 { grid-template-columns:1fr; gap:8px; }
.tn-op { display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; font-family:inherit; font-size:1rem; line-height:1.4; color:var(--dark); background:var(--bg-surface); border:1.5px solid var(--border); border-radius:14px; padding:12px 14px; min-height:52px; transition:border-color .15s ease, background .15s ease; }
.tn-op b { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--navy-tint); color:var(--navy); font-size:.85rem; }
.tn-op span { min-width:0; overflow-wrap:anywhere; }
.tn-op:hover { border-color:#9aa3b5; }
.tn-op.on { border-color:var(--navy); background:var(--navy-tint); box-shadow:0 0 0 1px var(--navy) inset; }
.tn-op.on b { background:var(--navy); color:#fff; }
.tn-ops-1 .tn-op { font-size:.94rem; min-height:46px; padding:10px 12px; }

.tn-preg .tn-acciones { justify-content:space-between; }
.tn-preg .tn-acciones .tn-btn { flex:1 1 180px; }
.tn-pie { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.tn-atajo { font-size:.8rem; color:var(--text-muted); }

/* Lectura */
.tn-lect-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:26px; margin-top:18px; align-items:start; }
.tn-texto { background:var(--bg-body); border:1px solid var(--border); border-radius:16px; padding:20px 22px; position:sticky; top:96px; }
.tn-texto h3 { font-size:1.15rem; margin-bottom:10px; }
.tn-texto p { font-size:1rem; line-height:1.75; color:var(--dark); }
.tn-texto p + p { margin-top:.8em; }
.tn-lect-preg { display:grid; gap:20px; }
.tn-lq-q { display:flex; gap:10px; align-items:flex-start; font-weight:700; color:var(--navy); line-height:1.45; margin-bottom:8px; }
.tn-gn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:.78rem; margin-top:1px; }
.tn-acciones-fin { align-items:center; }
.tn-faltan { font-size:.88rem; font-weight:600; color:var(--text-muted); margin-right:auto; }

/* Resultado */
.tn-res-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; align-items:start; }
.tn-nivel { display:flex; align-items:center; gap:18px; margin-top:10px; padding:16px 20px; border-radius:16px; background:var(--tn-ok-tint); }
.tn-nivel-code { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:3.4rem; line-height:1; color:var(--navy); letter-spacing:-.04em; }
.tn-nivel-txt b { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.35rem; color:var(--navy); line-height:1.2; }
.tn-nivel-txt span { display:block; font-size:.88rem; font-weight:600; color:var(--dark-soft); margin-top:2px; }
.tn-nv-A1 { background:#fdf3e1; } .tn-nv-A2 { background:#fbf6d9; } .tn-nv-B1 { background:#e9f7ef; }
.tn-nv-B2 { background:#d6f2e5; } .tn-nv-C1 { background:#c3ecd9; }
.tn-nota { margin-top:12px; padding:10px 14px; border-radius:12px; background:var(--navy-tint); color:var(--navy); font-size:.92rem; font-weight:600; }
.tn-nota-ok { background:var(--tn-ok-tint); color:var(--tn-ok); }
.tn-bloque { margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.tn-examen { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.25rem; font-weight:800; color:var(--navy); margin-top:4px; }
.tn-areas { list-style:none; display:grid; gap:8px; margin-top:10px; }
.tn-areas li { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 14px; border-radius:12px; background:var(--tn-medio-tint); }
.tn-areas li div { min-width:0; }
.tn-areas b { display:block; color:var(--navy); font-size:.96rem; }
.tn-areas span { display:block; font-size:.86rem; color:var(--dark-soft); line-height:1.5; }
.tn-areas em { flex-shrink:0; font-style:normal; font-size:.74rem; font-weight:800; color:var(--tn-medio); background:#fff; border-radius:100px; padding:2px 9px; margin-top:2px; white-space:nowrap; }
.tn-desglose { list-style:none; display:grid; gap:8px; margin-top:10px; }
.tn-desglose li { display:grid; grid-template-columns:96px minmax(0,1fr) 92px; gap:10px; align-items:center; }
.tn-desglose span { font-size:.88rem; font-weight:700; color:var(--dark-soft); }
.tn-desglose i { height:10px; border-radius:100px; background:var(--navy-tint); overflow:hidden; }
.tn-desglose s { display:block; height:100%; border-radius:100px; background:var(--tn-ok-bar); text-decoration:none; }
.tn-desglose b { font-size:.86rem; text-align:right; color:var(--navy); font-variant-numeric:tabular-nums; }
.tn-d-medio s { background:var(--tn-medio-bar); }
.tn-d-bajo s { background:var(--tn-bajo-bar); }
.tn-d-no b { color:var(--text-muted); font-weight:600; font-size:.8rem; }
.tn-aviso { margin-top:20px; font-size:.82rem; color:var(--text-muted); line-height:1.55; }
.tn-res .tn-acciones { justify-content:flex-start; }

.tn-cta { position:sticky; top:96px; background:var(--navy); border-color:var(--navy); color:rgba(255,255,255,.86); }
.tn-cta-h { color:#fff; font-size:1.25rem; letter-spacing:-.02em; }
.tn-cta p { margin-top:8px; font-size:.95rem; }
.tn-wa { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; padding:14px 18px; border-radius:100px; background:var(--tn-wa); color:#fff; font-weight:800; font-size:1rem; text-decoration:none; min-height:50px; text-align:center; }
.tn-wa:hover { background:var(--tn-wa-hover); }
.tn-wa svg { width:22px; height:22px; flex-shrink:0; }
.tn-cta .tn-wa:focus-visible, .tn-cta .tn-links a:focus-visible { outline-color:#6ee7b7; }
.tn-links { list-style:none; margin-top:18px; display:grid; gap:4px; }
.tn-links a { display:block; padding:8px 0; color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px; }
.tn-links a:hover { color:#6ee7b7; }

/* Contenido fijo de la página (texto, tabla y preguntas frecuentes) */
.tn-sec { max-width:820px; margin:0 auto 64px; }
.tn-sec h2 { font-size:1.5rem; letter-spacing:-.03em; margin-bottom:12px; }
.tn-sec h2:not(:first-child) { margin-top:36px; }
.tn-sec > p { font-size:.97rem; margin-bottom:12px; }
.tn-sec details { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.tn-sec summary { cursor:pointer; font-weight:700; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.tn-sec summary::-webkit-details-marker { display:none; }
.tn-sec summary::after { content:'+'; color:var(--text-muted); font-weight:500; }
.tn-sec details[open] summary::after { content:'\2212'; }
.tn-sec summary:focus-visible { outline:3px solid var(--mint-deep); outline-offset:4px; border-radius:6px; }
.tn-sec details p { margin-top:8px; font-size:.94rem; color:var(--text-main); }
.tn-sec a { color:var(--tn-ok); font-weight:600; }
.tn-tabla { overflow-x:auto; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; }
.tn-tabla table { width:100%; border-collapse:collapse; font-size:.9rem; }
.tn-tabla th, .tn-tabla td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.tn-tabla thead th { color:var(--text-muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.tn-tabla tbody th { color:var(--navy); font-weight:800; white-space:nowrap; }
.tn-tabla td:nth-child(3) { white-space:nowrap; }
.tn-tabla tbody tr:last-child th, .tn-tabla tbody tr:last-child td { border-bottom:0; }

@media (max-width:900px) {
  .tn-lect-grid, .tn-res-grid { grid-template-columns:1fr; }
  .tn-texto, .tn-cta { position:static; }
}
@media (max-width:600px) {
  .tn-card { padding:20px 16px; }
  .tn-ops { grid-template-columns:1fr; gap:8px; }
  .tn-frase { font-size:1.12rem; }
  .tn-texto { padding:16px; }
  .tn-btn { padding:12px 18px; }
  .tn-nivel { padding:14px 16px; gap:14px; }
  .tn-nivel-code { font-size:2.8rem; }
  .tn-desglose li { grid-template-columns:76px minmax(0,1fr) 80px; gap:8px; }
  .tn-tabla td:nth-child(3) { white-space:normal; }
  .tn-tabla th, .tn-tabla td { padding:9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .tn-bar i, .tn-btn, .tn-op { transition:none; } }