/* Ficha de examen (#/examen/<id>) y "Mis exámenes" (#/examenes), versión 2 (dueño, 2026-10-16: "la interfaz de
   exámenes me parece demasiado básica"). Misma familia que el IB (#/ib/...): color del examen por todas partes, tarjetas
   grandes con labio 3D, progreso visible, una acción principal clara. Solo presentación: el marcado lo pinta js/app.js
   (renderExamPage / renderExams). Tokens de styles.css; modo oscuro por color-mix sobre --surface. */

/* ---------- entrada suave (solo opacidad/transform: no bloquea el hilo; reduced-motion lo apaga en styles.css) ---------- */
@keyframes exv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.exv-in { animation: exv-rise .32s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ---------- cabecera ---------- */
.exam-header.exh { padding: var(--sp-5); border-radius: var(--r-xl); box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18), 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent); }
.exh-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0 !important; }
.exh-bg svg { position: absolute; right: -40px; top: -60px; width: 360px; height: 360px; opacity: .14; }
@media (max-width: 600px) { .exh-bg svg { width: 260px; height: 260px; right: -80px; top: -90px; } }
.exh-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.exh-top .exam-icon { width: 64px; height: 64px; border-radius: 18px; font-size: 1.15rem; }
.exh-top .exam-icon.long { font-size: .78rem; }
.exh-title { flex: 1; min-width: 180px; }
.exh-title h1 { margin: 0; }
.exh-sum { margin: var(--sp-3) 0 0; max-width: 68ch; opacity: .94; }
.exh-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); }
.exh-stats { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-4); }
.exh-stats .ring-track { stroke: rgb(255 255 255 / .28); }
.exh-stats .ring-fill { stroke: #fff; }
.exh-stats .ring-label { color: #fff; font-size: 1rem; }
.exh-kpis { display: flex; gap: var(--sp-5); flex-wrap: wrap; min-width: 0; }
.exh-kpi { display: grid; gap: 1px; min-width: 0; }
.exh-kpi small { font: 800 var(--t-xs) var(--font-display); text-transform: uppercase; letter-spacing: .07em; opacity: .85; }
.exh-kpi b { font: 800 var(--t-xl)/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.exh-kpi b.is-empty { font-size: var(--t-md); opacity: .9; }
.exh-cta-slot { flex: none; display: contents; }
.btn.exh-cta { background: #fff; color: var(--accent); box-shadow: 0 var(--lip) 0 rgb(0 0 0 / .22); flex: none; }
.btn.exh-cta:hover { filter: brightness(.96); }
.exh .facts { margin-top: var(--sp-4); }
.exh .pill { background: rgb(255 255 255 / .18); }
.exh #add-this-exam { background: #fff; color: var(--accent); box-shadow: 0 var(--lip) 0 rgb(0 0 0 / .22); }
@media (max-width: 600px) {
  .exam-header.exh { padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 6px); }
  .exh-row { gap: var(--sp-3); }
  .exh-stats { width: 100%; gap: var(--sp-3); }
  .exh-kpis { gap: var(--sp-4); }
  .exh-cta-slot { display: block; width: 100%; }
  .btn.exh-cta { width: 100%; }
  .exh .facts .pill { font-size: var(--t-xs); padding: 5px 10px; }
}

/* ---------- pestañas en píldoras con icono ---------- */
.tabs.exh-tabs { border: 0; gap: 6px; margin: 0 0 var(--sp-5); padding: 4px; background: var(--surface-2); border-radius: 999px; scrollbar-width: none; }
.tabs.exh-tabs::-webkit-scrollbar { display: none; }
.exh-tabs .tab { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px; margin: 0; border: 0; border-radius: 999px; color: var(--ink-2); transition: background .15s, color .15s, transform .08s; }
.exh-tabs .tab:hover { background: color-mix(in srgb, var(--surface) 70%, var(--surface-2)); color: var(--ink); }
.exh-tabs .tab:active { transform: scale(.97); }
.exh-tabs .tab[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.exh-tabs .tab .ic { width: 18px; height: 18px; }
@media (max-width: 600px) { .exh-tabs .tab { padding: 8px 12px; font-size: .74rem; letter-spacing: .04em; } }

/* ---------- tarjetas de sección ---------- */
.section-card.sec { position: relative; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4); border-bottom-width: 6px; border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); border-bottom-color: color-mix(in srgb, var(--accent) 38%, var(--border)); transition: border-color .15s, transform .12s; }
.section-card.sec:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.sec-head { display: flex; align-items: center; gap: 12px; }
.sec-ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 22%, transparent); }
.sec-ic .ic { stroke-width: 2.2; }
.sec-title { flex: 1; min-width: 0; }
.sec-title .eyebrow { margin: 0 0 2px; color: var(--accent); }
.sec-title h3 { margin: 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em; }
.sec-head > [data-pg] { flex: none; align-self: flex-start; display: contents; }
.sec-rec { flex: none; align-self: flex-start; background: var(--gold-soft); color: var(--gold); box-shadow: 0 2px 0 color-mix(in srgb, var(--gold-bright) 60%, transparent); }
.sec-rec .ic { color: var(--gold-dark); }
.sec-desc { margin: 0; font-size: var(--t-sm); line-height: 1.45; }
.sec-prog { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.sec-bar { display: flex; align-items: center; gap: 10px; }
.sec-bar .progress { flex: 1; height: 12px; }
.sec-bar .progress > i { min-width: 0; }
.sec-bar .progress > i::after { top: 3px; height: 3px; }
.sec-bar b { font: 800 var(--t-sm) var(--font-display); color: var(--accent); min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.sec-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.sec-last { display: inline-flex; align-items: center; gap: 4px; }
.sec-last.lvl-hi { color: var(--green-ink); }
.sec-last.lvl-mid { color: var(--gold); }
.sec-last.lvl-lo { color: var(--danger); }
.section-card.sec .facts { font-size: var(--t-xs); font-weight: 700; gap: 12px; }
.section-card.sec .facts .ic { color: var(--accent); }
.section-card.sec .actions { margin-top: auto; }
.section-card.sec .actions .btn-accent { flex: 1 1 auto; }
@media (max-width: 600px) { .section-card.sec .actions .btn { width: 100%; } }

/* ---------- tarjetas de test ---------- */
.tst-summary { margin: 0 0 var(--sp-3); font: 700 var(--t-sm) var(--font-ui); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tst-summary .ic { color: var(--accent); }
.test-card.tst { position: relative; gap: var(--sp-3); padding: var(--sp-4); border-bottom-width: 6px; border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); border-bottom-color: color-mix(in srgb, var(--accent) 38%, var(--border)); transition: border-color .15s; }
.test-card.tst:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.tst-head { display: flex; align-items: center; gap: 12px; }
.tst-num { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: #fff; font: 800 1.35rem var(--font-display); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .22); }
.tst-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tst-head h3 { margin: 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em; }
.tst-status { display: inline-flex; align-items: center; gap: 5px; font: 700 var(--t-xs) var(--font-ui); color: var(--ink-2); }
.tst-status.is-done { color: var(--green-ink); }
.tst-status.is-done .ic { background: var(--green-soft); border-radius: 50%; padding: 2px; }
.test-card.tst.is-done .tst-num { background: var(--green); }
.tst-mods { display: flex; gap: 6px; flex-wrap: wrap; }
.tst-mod { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); font-size: var(--t-xs); font-weight: 700; max-width: 100%; }
.tst-mod b { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tst-mod small { color: var(--ink-2); flex: none; }
.test-card.tst .facts { font-size: var(--t-xs); font-weight: 700; }
.test-card.tst .facts .ic { color: var(--accent); }
.test-card.tst > div:last-child { margin-top: auto; }
@media (max-width: 600px) { .test-card.tst .btn { width: 100%; } }

/* ---------- temario e información: cabeceras con el color del examen ---------- */
.exs-sec { margin-bottom: var(--sp-4); border-bottom-width: 6px; }
.exs-sec > h2 { display: flex; align-items: center; gap: 10px; font-size: var(--t-lg); margin: 0 0 var(--sp-2); }
.exs-sec > h2 .sec-ic { width: 40px; height: 40px; border-radius: 12px; }
.exs-sec .eyebrow { color: var(--accent); }
.exs-sec .skill-row .count { background: var(--surface-2); padding: 2px 8px; border-radius: 999px; }

/* ---------- pie: Resultados y Repaso ---------- */
.exam-foot.exf .exam-foot-link { border-bottom-width: 5px; transition: transform .1s, border-color .15s; }
.exam-foot.exf .exam-foot-link:hover { border-color: color-mix(in srgb, var(--nav-c) 70%, var(--border)); }
.exam-foot.exf .exam-foot-link:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.exam-foot.exf .exf-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--nav-c); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); }
.exam-foot.exf .exam-foot-link > .ic:first-child { display: none; }

/* ---------- "Mis exámenes" ---------- */
.my-exams.xts { gap: var(--sp-4); }
.exam-tile.xt { padding: 0; gap: 0; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); border-bottom-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.exam-tile.xt:hover { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.xt-top { position: relative; display: flex; align-items: center; gap: 12px; padding: var(--sp-4); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-bottom: var(--bw) solid color-mix(in srgb, var(--accent) 18%, var(--border)); }
.xt-top::before { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; }
.xt-top::after { content: ""; position: absolute; right: 40px; bottom: -50px; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 7%, transparent); pointer-events: none; }
.xt-top > * { position: relative; }
.xt-name { flex: 1; min-width: 0; }
.xt-name h3 { margin: 0; font-size: var(--t-xl); }
.xt-name .meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xt-ring { flex: none; }
.xt-ring .ring-label { font-size: .9rem; }
.xt-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.xt-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.xt-stat { display: grid; gap: 1px; min-width: 0; }
.xt-stat small { font: 800 var(--t-xs) var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.xt-stat b { font: 800 var(--t-lg)/1.15 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.xt-stat b.is-empty { color: var(--ink-2); font-size: var(--t-sm); }
.xt-stat b em { font-style: normal; font: 700 var(--t-xs) var(--font-ui); color: var(--ink-2); }
.xt .tile-actions { display: flex; align-items: center; gap: 8px; }
.xt .tile-actions .btn-accent { flex: 1; }
.xt .tile-actions .remove-exam { flex: none; }