/* Demo «Mira cómo funciona Revopol» · maqueta de conversión (2026-09-24).
   El lienzo mide 1200 × 840 (460 × 960 en móvil) y se escala para caber en pantalla.
   Dentro se replican las pantallas reales con sus clases y colores: asistente del formulario
   (student-study-form.css), vista visual del laboratorio (weekly-timeline.css), campus,
   seguimiento del preparador y cuadernillo (booklet-*.css). */

/* ---------- Maqueta: demo o las tres secciones anteriores ---------- */
html[data-como="demo"] #tribunal,
html[data-como="demo"] #diagnostico,
html[data-como="demo"] #producto,
html[data-como="demo"] .nav a[href="#tribunal"] { display: none; }
html[data-como="anterior"] #como-funciona { display: none; }

/* ---------- Sección ---------- */
.demo { background: linear-gradient(180deg, #fff 0%, #f3f7fe 100%); overflow: hidden; }
.demo .section-head { margin-bottom: 26px; }
.dm { display: grid; gap: 16px; justify-items: center; }

.dm-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.dm-rail button {
  all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 10px;
  width: 100%; height: 100%; padding: 12px 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.dm-rail button:hover { border-color: var(--line-2); transform: translateY(-1px); }
.dm-rail button:focus-visible { outline: 3px solid rgba(8, 103, 255, .35); outline-offset: 2px; }
.dm-rail-n { padding-top: 2px; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.dm-rail-t b { display: block; font-size: 14.5px; font-weight: 750; line-height: 1.3; color: var(--ink); }
.dm-rail-t small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dm-rail-bar { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px; background: var(--none); overflow: hidden; }
.dm-rail-bar i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.dm-rail button.is-active { border-color: var(--blue); box-shadow: 0 10px 24px rgba(8, 103, 255, .13); }
.dm-rail button.is-active .dm-rail-n { color: var(--blue); }
.dm-rail button.is-done .dm-rail-n { color: var(--dom); }
.dm-rail button.is-done .dm-rail-bar i { background: #3aa57a; }

.dm-window {
  position: relative; max-width: 100%; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: #fff;
  box-shadow: 0 34px 90px rgba(10, 33, 79, .17), 0 4px 14px rgba(10, 33, 79, .06);
}
.dm-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #f3f6fb; border-bottom: 1px solid var(--line); }
.dm-dots { display: flex; gap: 6px; }
.dm-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d3dceb; }
.dm-url {
  flex: 1; max-width: 620px; margin-inline: auto; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.dm-url .i { width: 12px; height: 12px; color: #1d9a67; }
.dm-url [data-dm-url] { overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
.dm-url .is-out { opacity: 0; }
.dm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--weak); }
.dm-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dmLive 1.6s ease-in-out infinite; }
.dm.is-paused .dm-live i, .dm.is-finished .dm-live i { animation: none; opacity: .45; }

.dm-viewport { position: relative; overflow: hidden; background: #eef3f9; }
.dm-canvas {
  position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: #092452;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.dm-canvas p, .dm-canvas h1, .dm-canvas h2, .dm-canvas h3 { margin: 0; }
.dm-canvas .i { width: 1em; height: 1em; }

.dm-foot { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 9px 12px 9px 10px; border-top: 1px solid var(--line); background: #fff; }
.dm-rig { flex: 0 0 48px; width: 48px; height: 48px; }
.dm-rig svg { width: 100%; height: 100%; display: block; }
.dm-rig svg > path[d^="m0 2"], .dm-rig svg > path[d^="m0 3"] { display: none; }
.dm-say { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); transition: opacity .17s, transform .17s; }
.dm-say.is-out { opacity: 0; transform: translateY(4px); }
.dm-say b { font-weight: 750; color: var(--blue-2); }
.dm-ctrl { display: flex; gap: 8px; }
.dm-ctrl button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.dm-ctrl button:hover { border-color: var(--ink-2); }
.dm-ctrl .i { width: 15px; height: 15px; }

.dm-end { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(243, 247, 254, .8); backdrop-filter: blur(6px); animation: dmFade .5s ease-out; }
.dm-end-card { width: min(540px, 100%); padding: 28px 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.dm-end-card .kicker { margin-bottom: 8px; }
.dm-end-card h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.dm-end-card ol { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 8px; text-align: left; }
.dm-end-card li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink-2); }
.dm-end-card li .i { width: 18px; height: 18px; color: var(--dom); flex: 0 0 18px; }
.dm-end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.dm-cursor { position: absolute; left: 0; top: 0; z-index: 50; width: 28px; height: 28px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transition: opacity .25s; filter: drop-shadow(0 3px 5px rgba(10, 33, 79, .32)); }
.dm-cursor.is-on { opacity: 1; }
.dm-cursor svg { display: block; width: 28px; height: 28px; transform-origin: 18% 12%; transition: transform .12s; }
.dm-cursor.is-down svg { transform: scale(.84); }
.dm-ripple { position: absolute; z-index: 49; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid rgba(8, 103, 255, .55); border-radius: 50%; background: rgba(8, 103, 255, .12); pointer-events: none; animation: dmRipple .6s ease-out forwards; }

html.dm-onscreen .sticky-cta { opacity: 0; transform: translateY(110%); pointer-events: none; transition: opacity .25s, transform .25s; }

.dm.is-paused .dm-canvas *, .dm.is-paused .dm-canvas *::before, .dm.is-paused .dm-canvas *::after { animation-play-state: paused !important; }

.sc { position: absolute; inset: 0; transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.sc.is-entering { opacity: 0; transform: translateY(16px) scale(.985); }
.sc.is-leaving { opacity: 0; transform: translateY(-10px) scale(.99); pointer-events: none; }

/* ================================================================
   1 · Entrevista (StudentStudyForm)
   ================================================================ */
.sc-form { display: flex; padding: 26px 56px; background: #edf3f9; }
.sf-card { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d6e1f0; border-radius: 16px; background: #fff; box-shadow: 0 12px 44px #19385812; color: #071b43; }
.sf-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; border-bottom: 1px solid #d6e1f0; }
.sf-logo { font-size: 24px; font-weight: 900; letter-spacing: -.055em; }
.sf-save { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #51698b; }
.sf-save .i { width: 16px; height: 16px; }
.sf-save.is-saved .i { color: #1d9a67; stroke-width: 2.6; }
.sf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 18px 32px 0; }
.sf-titles h1 { font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.sf-titles p { margin-top: 4px; font-size: 15.5px; color: #51698b; }
.sf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 110px); }
.sf-steps li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: #51698b; text-align: center; }
.sf-steps li::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 1px; background: #d6e1f0; transition: background .3s; }
.sf-steps li:first-child::before { display: none; }
.sf-steps li.is-done::before, .sf-steps li.is-active::before { background: #0867ff; }
.sf-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d6e1f0; border-radius: 50%; background: #f2f5f9; font-size: 14px; font-weight: 700; color: #51698b; transition: all .3s; }
.sf-dot .i { display: none; width: 16px; height: 16px; stroke-width: 2.6; }
.sf-steps .is-active .sf-dot, .sf-steps .is-done .sf-dot { border-color: #0867ff; background: #0867ff; color: #fff; }
.sf-steps .is-done .sf-dot b { display: none; }
.sf-steps .is-done .sf-dot .i { display: block; }
.sf-steps .is-active > span:last-child { font-weight: 650; color: #071b43; }
.sf-steps .is-done > span:last-child { color: #0867ff; }
.sf-body { position: relative; flex: 1; margin: 14px 32px 0; }
.sf-pane { position: absolute; inset: 0; opacity: 0; transform: translateX(40px); pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.sf-pane.is-active { opacity: 1; transform: none; }
.sf-pane.is-past { transform: translateX(-40px); }
.sf-pane h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.sf-h2sub { margin-top: 2px; font-size: 14.5px; color: #51698b; }
.sf-q { margin: 14px 0 8px; font-size: 14.5px; font-weight: 650; }
.sf-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-choice { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #d6e1f0; border-radius: 8px; background: #fff; font-size: 15px; transition: all .25s; }
.sf-choice.is-selected { border-color: #0867ff; background: #eff6ff; box-shadow: inset 0 0 0 1px #0867ff; }
.sf-radio { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border: 1.5px solid #8da7cb; border-radius: 50%; background: #fff; }
.is-selected > .sf-radio, .sf-trow.is-yes [data-yes] .sf-radio, .sf-trow.is-no [data-no] .sf-radio { border-color: #0867ff; }
.is-selected > .sf-radio::after, .sf-trow.is-yes [data-yes] .sf-radio::after, .sf-trow.is-no [data-no] .sf-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0867ff; animation: dmPop .3s; }
.sf-check { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border: 1.5px solid #8da7cb; border-radius: 5px; background: #fff; transition: all .2s; }
.sf-check .i { width: 13px; height: 13px; color: #fff; stroke-width: 3.2; opacity: 0; }
.is-selected > .sf-check, .sf-tr.is-on .sf-check { border-color: #0867ff; background: #0867ff; }
.is-selected > .sf-check .i, .sf-tr.is-on .sf-check .i { opacity: 1; }
.sf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 18px; }
.sf-field { position: relative; display: grid; gap: 6px; }
.sf-label { font-size: 13.5px; font-weight: 600; }
.sf-select { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid #b7c9e0; border-radius: 6px; background: #fff; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.sf-select > .i { width: 16px; height: 16px; color: #51698b; }
.sf-val.is-ph { color: #687e9c; }
.sf-select.is-open { border-color: #0867ff; box-shadow: 0 0 0 3px #0867ff33; }
.sf-select.is-flash { animation: sfFlash .6s ease-out; }
.sf-select-sm { min-height: 28px; font-size: 13px; }
.sf-list { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 4px; list-style: none; border: 1px solid #b7c9e0; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(7, 27, 67, .18); animation: sfDrop .2s ease-out; }
.sf-list li { padding: 8px 10px; border-radius: 5px; font-size: 14.5px; }
.sf-list li.is-hover { background: #0867ff; color: #fff; }
.sf-inline { display: flex; align-items: center; gap: 18px; min-height: 44px; }
.sf-rad { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.sf-fold { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; color: #075bd8; }
.sf-fold .i { width: 16px; height: 16px; transform: rotate(-90deg); }
.sf-h2row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sf-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid #8da7cb; border-radius: 6px; background: #fff; color: #071b43; font-size: 15px; font-weight: 500; white-space: nowrap; transition: all .2s; }
.sf-button .i { width: 17px; height: 17px; }
.sf-outline { border-color: #0867ff; color: #0867ff; }
.sf-primary { min-width: 230px; min-height: 46px; border-color: #0867ff; background: #0867ff; color: #fff; }
.sf-primary.is-busy { opacity: .75; }
.sf-ghost { min-height: 46px; }
.sf-time { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; margin-top: 12px; }
.sf-table { display: grid; }
.sf-tr { display: grid; grid-template-columns: 26% 25% 25% 24%; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid #e3eaf4; }
.sf-tr.sf-th { padding: 0 4px 6px; border-top: 0; font-size: 12.5px; font-weight: 600; color: #51698b; }
.sf-tr.is-copied { animation: sfRow .9s ease-out; }
.sf-day { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #8a9ab3; transition: color .2s; }
.sf-tr.is-on .sf-day { color: #071b43; }
.sf-input { display: flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid #d6e1f0; border-radius: 6px; background: #f4f6f9; color: #9aabc2; font-size: 15px; transition: all .25s; }
.sf-tr.is-on .sf-input { border-color: #b7c9e0; background: #fff; color: #687e9c; }
.sf-input.is-filled { color: #071b43 !important; }
.sf-input.is-typing { border-color: #0867ff !important; box-shadow: 0 0 0 3px #0867ff33; color: #071b43 !important; }
.sf-extra { display: flex; align-items: center; gap: 8px; }
.sf-extra .sf-link { opacity: 0; transition: opacity .3s; }
.sf-tr.is-on .sf-extra .sf-link { opacity: 1; }
.sf-next { display: none; padding: 2px 8px; border-radius: 20px; background: #fff4de; color: #8b5905; font-size: 12px; font-weight: 600; }
.sf-tr.is-next .sf-next { display: inline-block; animation: dmPop .35s; }
.sf-tr.is-next .sf-link { display: none; }
.sf-link { font-size: 13.5px; color: #075bd8; }
.sf-side { display: grid; align-content: start; gap: 12px; }
.sf-info { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 8px; background: #eef5ff; font-size: 14px; color: #22386a; }
.sf-info > .i { flex: 0 0 24px; width: 24px; height: 24px; color: #0867ff; }
.sf-total b { display: block; font-size: 17px; font-weight: 750; }
.sf-total small { display: block; font-size: 13px; color: #51698b; }
.sf-hint { font-size: 13px; line-height: 1.5; color: #51698b; }
.sf-copied { font-size: 13px; font-weight: 600; color: #1d9a67; }
.sf-copied:empty { display: none; }
.sf-topbar { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 2px; padding: 7px 14px; border-radius: 8px; background: #f5f8fc; font-size: 14px; }
.sf-topics { display: grid; }
.sf-trow { display: grid; grid-template-columns: 1.3fr .8fr 1.1fr; align-items: center; gap: 14px; min-height: 34px; padding: 1px 4px; border-top: 1px solid #e3eaf4; font-size: 14px; transition: background .3s; }
.sf-trow.sf-th { min-height: 0; padding-bottom: 6px; border-top: 0; font-size: 12.5px; font-weight: 600; color: #51698b; }
.sf-trow.is-yes { background: #f7fbff; }
.sf-tt { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sf-pending { font-size: 13px; color: #8a9ab3; }
.sf-planned { font-size: 13px; color: #51698b; animation: dmFade .4s; }
.sf-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.sf-actions .sf-button { min-height: 36px; font-size: 14px; }
.sf-support { margin-top: 14px; }
.sf-support .sf-choice { padding: 16px 18px; }
.sf-field-wide { margin-top: 18px; }
.sf-textarea { min-height: 76px; padding: 10px 12px; border: 1px solid #b7c9e0; border-radius: 6px; font-size: 15px; line-height: 1.5; }
.sf-ph { color: #687e9c; }
.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -3px; background: #0867ff; animation: dmBlink .8s steps(1) infinite; }
.sf-input.is-typing::after { display: none; }
.sf-pane[data-pane="3"] .sf-info { margin-top: 14px; }
.sf-review { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px 18px; }
.sf-rblock { padding: 12px 16px; border: 1px solid #d6e1f0; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: #22386a; opacity: 0; transform: translateY(8px); transition: .45s; }
.sf-pane.is-active .sf-rblock { opacity: 1; transform: none; }
.sf-pane.is-active .sf-rblock:nth-child(2) { transition-delay: .12s; }
.sf-pane.is-active .sf-rblock:nth-child(3) { transition-delay: .24s; }
.sf-pane.is-active .sf-rblock:nth-child(4) { transition-delay: .36s; }
.sf-rblock-time { grid-row: span 2; }
.sf-rblock h3 { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 14.5px; font-weight: 650; color: #071b43; }
.sf-edit { font-size: 12.5px; font-weight: 500; color: #075bd8; }
.sf-quote { margin-top: 4px !important; padding-left: 8px; border-left: 3px solid #d6e1f0; color: #51698b; }
.sf-pane[data-pane="4"] .sf-info { margin-top: 12px; }
.sf-sent { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: #f1f5f9; opacity: 0; pointer-events: none; transition: opacity .45s; }
.sf-sent.is-on { opacity: 1; }
.sf-sent-card { display: grid; justify-items: center; gap: 10px; width: 440px; padding: 30px; border: 1px solid #e2e8f0; border-radius: 24px; background: #fff; text-align: center; transform: translateY(14px) scale(.97); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.sf-sent.is-on .sf-sent-card { transform: none; }
.sf-sent-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #eff6ff; color: #2563eb; }
.sf-sent-ic .i { width: 28px; height: 28px; stroke-width: 2.6; }
.sf-sent-card h2 { font-size: 24px; font-weight: 800; }
.sf-sent-card p { color: #64748b; }
.sf-sent-card .sf-button { min-width: 200px; border-color: #2563eb; border-radius: 12px; background: #2563eb; }
.sf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 14px 32px; border-top: 1px solid #d6e1f0; }
.sf-foot-l { font-size: 14px; color: #51698b; }

/* ================================================================
   2 · Plan: vista visual del laboratorio (weekly-timeline.css)
   ================================================================ */
.sc-plan { display: flex; flex-direction: column; gap: 10px; padding: 16px 28px; background: #f5f8fc; }
.lp-crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #607391; }
.lp-crumbs b { font-size: 15px; color: #173256; }
.lp-chip { padding: 3px 9px; border-radius: 6px; background: #eef4ff; color: #3964a1; font-size: 12px; font-weight: 600; }
.lp-weekly-timeline {
  --wt-ink: #173256; --wt-muted: #607391; --wt-line: #e8edf5; --wt-surface: #fff; --lab: 148px;
  padding: 18px 22px 12px; border: 1px solid var(--wt-line); border-radius: 12px; background: var(--wt-surface); color: var(--wt-ink); box-shadow: 0 10px 30px rgba(23, 50, 86, .06);
}
.lp-wt-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.lp-wt-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.lp-wt-heading h3 { font-size: 20px; font-weight: 650; letter-spacing: -.025em; line-height: 1.4; }
.lp-wt-heading p { font-size: 13px; color: var(--wt-muted); }
.lp-calendar-view-actions { display: flex; align-items: center; gap: 12px; }
.lp-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #dfe7f3; border-radius: 8px; background: #eef2f8; }
.lp-segmented span { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #4d6588; }
.lp-segmented [aria-pressed="true"] { background: #fff; color: #235db7; box-shadow: 0 1px 3px rgba(23, 50, 86, .12); }
.lp-wt-badge { padding: 4px 9px; border-radius: 6px; background: #f1f5fb; color: #4d6588; font-size: 11px; transition: background .3s, color .3s; }
.lp-wt-new-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px !important; font-size: 13px; }
.lp-wt-new-topics > span { color: var(--wt-muted); }
.lp-wt-new-topics strong { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #285faf; }
.lp-wt-new-topics i { font-style: normal; color: #8aa0c0; }
.lp-wt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 10px 0 0; padding: 8px 0; border-block: 1px solid var(--wt-line); }
.lp-wt-facts > div { display: flex; flex-direction: column; gap: 2px; }
.lp-wt-facts dt { font-size: 11px; color: var(--wt-muted); }
.lp-wt-facts dd { order: -1; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.lp-wt-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 12px; padding: 0; list-style: none; }
.lp-wt-legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.6; color: var(--wt-muted); }
.lp-wt-legend strong { display: inline-block; margin-left: 6px; font-weight: 650; color: var(--wt-ink); white-space: nowrap; }
.lp-wt-legend .is-zero strong { font-weight: 500; color: var(--wt-muted); }
.lp-wt-legend i, .lp-wt-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--wt-color); }
.lp-weekly-timeline .is-study, .cp-mini .is-study { --wt-color: #3978db; --wt-fill: #dce8ff; }
.lp-weekly-timeline .is-review, .cp-mini .is-review { --wt-color: #bd901b; --wt-fill: #fbefcf; }
.lp-weekly-timeline .is-test, .cp-mini .is-test { --wt-color: #c5568f; --wt-fill: #f7dfed; }
.lp-weekly-timeline .is-psycho, .cp-mini .is-psycho { --wt-color: #188e81; --wt-fill: #d5eee9; }
.lp-weekly-timeline .is-break, .cp-mini .is-break { --wt-color: #5c9160; --wt-fill: #e2efdf; }
.lp-weekly-timeline .is-free, .cp-mini .is-free { --wt-color: #ca8146; --wt-fill: #fae7d6; }
.lp-wt-chart { position: relative; }
.lp-wt-axis, .lp-wt-day { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; }
.lp-wt-axis { margin-bottom: 4px; font-size: 11px; color: var(--wt-muted); }
.lp-wt-axis > div { position: relative; height: 16px; }
.lp-wt-axis time { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lp-wt-axis time.is-first { transform: none; }
.lp-wt-axis time.is-last { transform: translateX(-100%); }
.lp-wt-day { padding: 4px 0; border-bottom: 1px solid var(--wt-line); }
.lp-wt-day:last-of-type { border-bottom: 0; }
.lp-wt-day-label { padding-top: 3px; }
.lp-wt-day-label > strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-bottom: 1px; font-size: 14px; font-weight: 650; line-height: 1.35; }
.lp-wt-day-label time { font-size: 12px; font-weight: 550; color: var(--wt-muted); }
.lp-wt-day-label > span { display: block; font-size: 11px; line-height: 1.5; color: var(--wt-muted); white-space: nowrap; }
.lp-wt-day.is-selected .lp-wt-day-label > strong { color: #235db7; }
.lp-wt-day-content { min-width: 0; }
.lp-wt-track { position: relative; height: 38px; border-radius: 5px; background: #f2f4f8; }
.lp-wt-segment {
  position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; height: 100%; min-width: 0; padding: 3px 2px; overflow: hidden;
  border-right: 1px solid #ffffffd9; border-radius: 5px; background: var(--wt-fill); color: var(--wt-ink); font-size: 12.5px; font-weight: 650; line-height: 1.25; text-align: center;
  container-type: inline-size; clip-path: inset(0 100% 0 0);
}
.lp-wt-segment > span { opacity: 0; transition: opacity .35s; }
.lp-wt-segment.is-lit > span { opacity: 1; }
.lp-wt-segment.is-done { animation: wtPop .5s ease-out; }
.lp-wt-segment.is-done::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translateX(-110%); animation: wtSheen .8s ease-out forwards; pointer-events: none; }
.lp-wt-segment-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-wt-segment-duration { display: block; font-size: 10.5px; font-weight: 400; color: #4a6283; white-space: nowrap; }
.lp-wt-duration-short { display: none; }
.lp-wt-segment.is-small { padding-inline: 0; }
.lp-wt-segment.is-small.is-free .lp-wt-segment-label { display: none; }
.lp-wt-segment.is-small .lp-wt-duration-full { display: none; }
.lp-wt-segment.is-small .lp-wt-duration-short { display: inline; }
.lp-wt-segment.is-rescheduled { border-bottom: 3px solid #7857a8; }
.lp-wt-moved-icon { color: #65418e; }
.lp-wt-segment.is-pressed { z-index: 2; outline: 2px solid #235db7; outline-offset: 2px; }
@container (max-width: 70px) { .lp-wt-duration-full { display: none; } .lp-wt-duration-short { display: inline; } }
@container (max-width: 40px) { .lp-wt-segment-label { font-size: 10.5px; } .lp-wt-segment-duration { font-size: 9.5px; } }
@container (max-width: 22px) { .lp-wt-segment-duration { display: none; } .lp-wt-segment.is-small.is-free .lp-wt-segment-label { display: block; } }
.lp-wt-day-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 12px; min-height: 16px; margin-top: 3px; font-size: 11px; line-height: 1.45; opacity: 0; transform: translateY(-3px); transition: opacity .35s, transform .35s; }
.st-notes .lp-wt-day-notes { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
.lp-wt-day-summary { color: var(--wt-muted); }
.lp-wt-references, .lp-wt-rescheduled { display: flex; flex-wrap: wrap; gap: 1px 10px; margin: 0; padding: 0; list-style: none; color: #4a6283; }
.lp-wt-references li span { margin-right: 4px; font-weight: 650; color: var(--wt-ink); }
.lp-wt-rescheduled li { padding: 0 6px; border: 1px solid #dfd3ed; border-radius: 5px; background: #f6f0fb; color: #65418e; font-size: 10.5px; }
.lp-wt-detail { min-height: 62px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wt-line); }
.lp-wt-detail.is-flash { animation: wtDetail .45s ease-out; }
.lp-wt-detail p { margin-top: 4px; font-size: 12px; line-height: 1.6; color: #506580; }
.lp-wt-detail p:first-child { margin-top: 0; }
.lp-wt-detail-heading { display: flex; align-items: center; gap: 9px; }
.lp-wt-detail-heading strong { min-width: 0; font-size: 14px; font-weight: 600; color: var(--wt-ink); }
.lp-wt-detail-heading > span:last-child { margin-left: auto; font-size: 12px; color: var(--wt-muted); white-space: nowrap; }
.lp-wt-detail .lp-wt-detail-meta { font-size: 11px; color: #4c6c9b; }
.lp-wt-material { font-weight: 600; color: var(--wt-ink); }
.lp-activity-rescheduling { margin-bottom: 8px; padding: 6px 10px; border-left: 3px solid #7857a8; border-radius: 4px; background: #f6f0fb; color: #65418e; font-size: 11.5px; }
.lp-activity-rescheduling p { margin-top: 2px !important; font-size: 11.5px !important; color: #65418e !important; }
.lp-activity-rescheduling p > span { margin-right: 14px; }

/* Cómo se pinta: cabecera → rejilla → barrido → notas */
.lp-wt-header, .lp-wt-new-topics { opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.st-head .lp-wt-header, .st-head .lp-wt-new-topics { opacity: 1; transform: none; }
.lp-wt-new-topics b { display: inline-block; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.st-head .lp-wt-new-topics b { opacity: 1; transform: none; transition-delay: calc(.25s + var(--k) * .22s); }
.lp-wt-facts, .lp-wt-legend { opacity: 0; transition: opacity .45s; }
.st-head .lp-wt-facts, .st-grid .lp-wt-legend { opacity: 1; }
.lp-wt-axis time { opacity: 0; transition: opacity .35s; }
.st-grid .lp-wt-axis time { opacity: 1; transition-delay: calc(var(--i) * 60ms); }
.lp-wt-day-label { opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; }
.st-grid .lp-wt-day-label { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms); }
.lp-wt-track { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.st-grid .lp-wt-track { transform: none; transition-delay: calc(var(--i) * 60ms + .1s); }
.dm-beam { position: absolute; top: 16px; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--p, 0)); z-index: 3; width: 2px; margin-left: -1px; opacity: 0; pointer-events: none; background: linear-gradient(#0867ff00, #0867ff 10%, #0867ff 90%, #0867ff00); box-shadow: 0 0 14px 3px rgba(8, 103, 255, .45); transition: opacity .3s; }
.dm-beam::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 110px; background: linear-gradient(90deg, rgba(8, 103, 255, 0), rgba(8, 103, 255, .09)); }
.is-sweeping .dm-beam { opacity: 1; }

.lp-weekly-timeline.is-compact { padding: 12px 18px 10px; }
.is-compact .lp-wt-heading h3 { font-size: 17px; }
.is-compact .lp-wt-facts { margin-top: 8px; padding: 6px 0; }
.is-compact .lp-wt-facts dd { font-size: 16px; }
.is-compact .lp-wt-legend { margin: 8px 0 8px; }
.is-compact .lp-wt-track { height: 30px; }
.is-compact .lp-wt-segment { font-size: 11.5px; }
.is-compact .lp-wt-segment-duration { font-size: 9.5px; }
.is-compact .lp-wt-day-label > strong { font-size: 13px; }
.is-compact .lp-wt-day-notes { min-height: 14px; font-size: 10.5px; }
.is-compact .lp-wt-detail { min-height: 58px; }
.is-compact .lp-wt-legend { gap: 4px 14px; }
.is-compact .lp-wt-legend li { font-size: 11px; }
.is-compact .lp-wt-legend strong { margin-left: 3px; }
.is-compact .lp-wt-day-notes { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.is-compact .lp-wt-references { flex-wrap: nowrap; }
.is-compact .lp-wt-rescheduled { display: none; }
.is-compact .lp-wt-axis time:nth-last-child(2) { display: none; }
.is-compact .lp-wt-new-topics { margin-top: 4px !important; }
.lp-weekly-timeline.is-compact { position: relative; }
.is-compact .lp-wt-detail { position: absolute; right: 14px; bottom: 12px; z-index: 6; width: 440px; min-height: 0; margin: 0; padding: 10px 12px; border: 1px solid #dfe8fa; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(23, 50, 86, .18); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.is-compact .lp-wt-detail.is-flash { opacity: 1; transform: none; animation: none; }
.st-changes .lp-wt-segment.is-added { z-index: 1; outline: 2px dashed #bd901b; outline-offset: 2px; animation: wtAdded 1.4s ease-in-out 2; }
.st-changes .lp-wt-segment.is-rescheduled { animation: wtAdded 1.4s ease-in-out 2; }

/* ================================================================
   3 · Manos a la obra (campus)
   ================================================================ */
.sc-work { display: flex; flex-direction: column; background: #f4f7fb; }
.cp-top { display: flex; align-items: center; gap: 24px; height: 56px; padding: 0 24px; border-bottom: 1px solid #d8e3f1; background: #fff; }
.cp-logo { font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.cp-nav { display: flex; gap: 4px; }
.cp-nav span { padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #52698f; transition: all .25s; }
.cp-nav span.is-active { background: #eff5fe; color: #0868f7; }
.cp-user { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; font-weight: 600; }
.cp-user i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f7a8a0, #d9788c); color: #fff; font-style: normal; font-weight: 800; }
.cp-main { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; min-height: 0; padding: 18px 22px; }
.cp-agenda { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; }
.cp-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0868f7; }
.cp-prog { font-size: 13px; color: #52698f; }
.cp-prog b { font-size: 22px; font-weight: 800; color: #092452; }
.cp-bar { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 6px; background: #eef2f8; }
.cp-bar > i { display: block; height: 100%; background: #10b981; transform: scaleX(0); transform-origin: left; }
.cp-days { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cp-days li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; transition: background .3s; }
.cp-dname { font-size: 12.5px; font-weight: 700; color: #52698f; }
.cp-dbody { min-width: 0; }
.cp-mini { display: flex; gap: 1px; height: 7px; overflow: hidden; border-radius: 4px; background: #eef2f8; }
.cp-mini i { display: block; height: 100%; background: var(--wt-color); opacity: .3; transition: opacity .4s; }
.cp-dsum { display: block; margin-top: 3px; overflow: hidden; font-size: 11px; color: #8191aa; white-space: nowrap; text-overflow: ellipsis; }
.cp-dstate { display: grid; place-items: center; min-width: 22px; height: 22px; border: 1.5px solid #d8e3f1; border-radius: 50%; color: transparent; }
.cp-dstate .i { width: 13px; height: 13px; stroke-width: 3; }
.cp-days li.is-current { background: #eff5fe; }
.cp-days li.is-current .cp-dname { color: #0868f7; }
.cp-days li.is-current .cp-dstate { border-color: #0868f7; animation: cpPulse 1.2s ease-in-out infinite; }
.cp-days li.is-done .cp-mini i { opacity: 1; }
.cp-days li.is-done .cp-dstate { border-color: #10b981; background: #10b981; color: #fff; animation: dmPop .35s; }
.cp-days li.is-pending .cp-mini i { opacity: .8; }
.cp-days li.is-pending .cp-dstate { padding: 0 7px; border-color: #f6e2b5; border-radius: 6px; background: #fff4de; color: #8b5905; font-size: 10.5px; font-weight: 700; white-space: nowrap; animation: dmPop .35s; }
.cp-now { display: grid; gap: 2px; margin-top: auto; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #0b2a66, #071433); color: #fff; }
.cp-now.is-flash { animation: cpNow .5s ease-out; }
.cp-now-k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8dbbff; }
.cp-now b { font-size: 15px; }
.cp-now span:last-child { font-size: 12.5px; color: #cfdcf3; }
.cp-stage { position: relative; min-height: 0; }
.cp-screen { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s, transform .45s; }
.cp-screen.is-active { opacity: 1; transform: none; }
.cp-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #0868f7; color: #fff; font-size: 14px; font-weight: 700; transition: background .3s; }
.cp-btn .i { width: 16px; height: 16px; }
.cp-btn.is-done { background: #10b981; }

.rd { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; }
.rd-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid #e9eff7; font-size: 13px; color: #52698f; }
.rd-crumb i { margin: 0 4px; font-style: normal; color: #8191aa; }
.rd-time { display: flex; align-items: center; gap: 6px; }
.rd-time .i { width: 14px; height: 14px; }
.rd-progress { display: block; height: 3px; background: #eef2f8; }
.rd-progress > i { display: block; height: 100%; background: linear-gradient(90deg, #0868f7, #5aa2ff); transform: scaleX(0); transform-origin: left; }
.rd-page { position: relative; flex: 1; overflow: hidden; padding: 0 44px; }
.rd-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(#fff0, #fff); pointer-events: none; }
.rd-scroll { max-width: 700px; margin: 0 auto; padding: 24px 0 60px; font-size: 16px; line-height: 1.72; color: #1d2f52; }
.rd-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0868f7; }
.rd-scroll h2 { margin: 6px 0 14px; font-size: 28px; font-weight: 800; letter-spacing: -.8px; color: #092452; }
.rd-scroll p { margin-bottom: 16px; }
.rd-table { width: 100%; overflow: hidden; border: 1px solid #d8e3f1; border-radius: 12px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.55; }
.rd-table th { padding: 8px 12px; background: #eff5fe; font-size: 11.5px; letter-spacing: .06em; text-align: left; text-transform: uppercase; color: #52698f; }
.rd-table td { padding: 10px 12px; border-top: 1px solid #e9eff7; vertical-align: top; }
.rd-table td:first-child { width: 36%; color: #092452; }
.rd-table tr:nth-child(even) td { background: #fafcff; }
.rd-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid #e9eff7; }
.rd-note { font-size: 13px; color: #52698f; }

.tq { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.tq-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; }
.tq-head b { display: block; font-size: 16px; }
.tq-head span { font-size: 12.5px; color: #52698f; }
.tq-pen { padding: 5px 10px; border-radius: 8px; background: #eff5fe; color: #0868f7 !important; font-size: 12px !important; font-weight: 700; }
.tq-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; min-height: 0; }
.tq-q { display: flex; flex-direction: column; min-height: 0; padding: 20px 24px; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; }
.tq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tq-n { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1f4ba8; }
.tq-meta > i { width: 1px; height: 11px; background: #d8e3f1; }
.tq-chip { display: none; padding: 3px 8px; border-radius: 6px; background: #fdf2f1; color: #b91c1c; font-size: 11.5px; font-weight: 700; }
.tq-chip.is-on { display: inline-flex; animation: dmPop .3s; }
.tq-topic { font-size: 12px; color: #52698f; }
.tq-q h3 { margin: 12px 0 16px; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; color: #0f2340; }
.tq-opts { display: grid; gap: 10px; }
.tq-opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #c9d6e8; border-radius: 11px; background: #fff; font-size: 15px; color: #2c4160; transition: all .25s; }
.tq-l { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9d6e8; border-radius: 7px; background: #fff; font-size: 13px; font-weight: 700; color: #52698f; transition: all .25s; }
.tq-tag { font-size: 11px; font-weight: 700; }
.tq-opt.is-hover, .tq-opt.is-selected { border-color: #1f4ba8; background: #f7faff; }
.tq-opt.is-selected .tq-l { border-color: #1f4ba8; background: #1f4ba8; color: #fff; }
.tq-opt.is-right { border-color: #a7ddc4; background: #f4f7fb; color: #134e3a; }
.tq-opt.is-right .tq-l { border-color: #059669; background: #059669; color: #fff; }
.tq-opt.is-right .tq-tag { color: #0f7a57; }
.tq-opt.is-wrong { border-color: #f0b6b0; background: #fdf2f1; color: #7f1d1d; animation: tqShake .4s; }
.tq-opt.is-wrong .tq-l { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.tq-opt.is-wrong .tq-tag { color: #b91c1c; }
.tq-opt.is-dim { opacity: .55; }
.tq-expl { margin-top: 14px; padding: 12px 16px; border: 1px solid #e0e8fa; border-radius: 12px; background: #f7faff; font-size: 13.5px; line-height: 1.6; color: #1a3860; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
.tq-expl.is-on { opacity: 1; transform: none; }
.tq-expl b { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #0868f7; }
.tq-expl p { margin-bottom: 8px; }
.tq-ref { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; background: #eff5fe; color: #0868f7; font-size: 12px; font-weight: 600; }
.tq-ref .i { width: 14px; height: 14px; }
.tq-map { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; }
.tq-map > p { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #52698f; }
.tq-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.tq-cells i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; background: #eef2f8; color: #8191aa; font-size: 10px; font-style: normal; font-weight: 600; transition: all .25s; }
.tq-cells i.is-ok { background: #d1f2e3; color: #0f7a57; }
.tq-cells i.is-ko { background: #fbd9dd; color: #b91c1c; }
.tq-cells i.is-bl { background: #e2e8f0; color: #64748b; }
.tq-cells i.is-now { background: #fff; color: #1f4ba8; box-shadow: 0 0 0 2px #1f4ba8; }
.tq-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.tq-score > span { display: grid; padding: 6px 2px; border-radius: 8px; background: #f4f7fb; font-size: 11px; text-align: center; color: #52698f; }
.tq-score b { font-size: 17px; color: #092452; }
.tq-net { grid-column: 1 / -1; padding: 10px; border-radius: 10px; background: #fff4de; text-align: center; opacity: 0; transform: scale(.95); transition: opacity .4s, transform .4s; }
.tq-score.is-final .tq-net { opacity: 1; transform: none; }
.tq-net b { display: block; font-size: 24px; color: #a66812; }
.tq-net small { font-size: 11px; color: #8b5905; }

.tf { display: flex; flex-direction: column; gap: 14px; height: 100%; overflow: hidden; padding-bottom: 18px; border: 1px solid #e5e9f0; border-radius: 14px; background: radial-gradient(circle at 50% -10%, #dbe9ff 0, transparent 55%), #f6f8fc; }
.tf-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #e5e9f0; background: rgba(255, 255, 255, .94); }
.tf-q { display: grid; font-size: 12px; color: #64748b; }
.tf-q b { font-size: 14px; color: #0f172a; }
.tf-segs { flex: 1; display: flex; gap: 4px; }
.tf-segs i { flex: 1; height: 4px; border-radius: 3px; background: #e5e9f0; transition: background .3s; }
.tf-segs i.is-ok { background: #059669; }
.tf-segs i.is-now { background: #0f172a; }
.tf-pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 999px; background: #f1f5f9; font-size: 12.5px; font-weight: 600; color: #0f172a; }
.tf-meta, .tf-card, .tf-btns, .tf-result { width: min(640px, calc(100% - 40px)); margin: 0 auto; }
.tf-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #64748b; }
.tf-diff { display: inline-flex; align-items: center; gap: 3px; }
.tf-diff i { width: 4px; height: 10px; border-radius: 2px; background: #0868f7; }
.tf-diff i.is-off { background: #cbd5e1; }
.tf-streak { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-weight: 700; }
.tf-streak.is-bump { animation: dmPop .45s; }
.tf-card { padding: 24px 28px; border: 1px solid #e5e9f0; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .05); transition: border-color .3s; }
.tf-card.is-ok { border-color: #a7f3d0; }
.tf-card.is-new { animation: tfIn .5s ease-out; }
.tf-kicker { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.tf-card h3 { margin-top: 8px; font-size: 20px; font-weight: 600; line-height: 1.45; color: #0f172a; }
.tf-verdict { display: none; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 12px; border-radius: 10px; background: #ecfdf5; color: #047857; font-size: 14px; font-weight: 700; }
.tf-card.is-ok .tf-verdict { display: inline-flex; animation: dmFade .35s; }
.tf-verdict .i { width: 16px; height: 16px; stroke-width: 3; }
.tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-btn { display: flex; justify-content: center; align-items: center; gap: 10px; height: 62px; border-radius: 14px; color: #fff; font-size: 17px; font-weight: 700; transition: transform .15s, box-shadow .2s; }
.tf-btn.is-true { background: #059669; }
.tf-btn.is-false { background: #e11d48; }
.tf-btn .i { width: 20px; height: 20px; stroke-width: 2.6; }
.tf-btn kbd { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .2); font-family: inherit; font-size: 11px; }
.tf-btn.is-picked { transform: scale(.97); box-shadow: 0 0 0 5px rgba(5, 150, 105, .22); }
.tf-btn.is-false.is-picked { box-shadow: 0 0 0 5px rgba(225, 29, 72, .2); }
.tf-result { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border: 1px solid transparent; border-radius: 14px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.tf-result.is-ok { border-color: #bbf0d9; background: #f0fdf8; color: #065f46; opacity: 1; transform: none; }
.tf-res-ic { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #059669; color: #fff; }
.tf-res-ic .i { width: 17px; height: 17px; stroke-width: 3; }
.tf-result b { display: block; }
.tf-result small { font-size: 12.5px; }
.tf-result em { margin-left: auto; font-size: 18px; font-style: normal; font-weight: 800; color: #059669; animation: dmPop .5s; }

/* ================================================================
   4 · Tutoría del domingo (laboratorio de Alejandro)
   ================================================================ */
.sc-tutor { display: grid; grid-template-columns: 188px minmax(0, 1fr); background: #f6f8fc; }
.lt-side { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; background: #0b1f45; color: #b9c6de; }
.lt-brand { padding: 0 10px 14px; font-size: 18px; font-weight: 900; letter-spacing: -.04em; color: #fff; }
.lt-brand small { margin-left: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8dbbff; }
.lt-side span { padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; transition: all .25s; }
.lt-side span.is-active { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 3px 0 0 #3f8cff; }
.lt-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 24px; }
.lt-origin { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #617c9b; }
.lt-origin b { font-size: 14px; color: #132f59; }
.lt-ok { padding: 2px 8px; border-radius: 20px; background: #eaf6ef; color: #237151; font-weight: 600; }
.lt-who { display: flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 600; color: #132f59; }
.lt-who i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #235ef5; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; }
.lt-view { position: absolute; inset: 52px 24px 16px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s, transform .45s; }
.lt-view.is-active { opacity: 1; transform: none; }
.lt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lt-kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #597599; }
.lt-head h2 { display: flex; align-items: center; gap: 10px; font-size: 25px; font-weight: 700; letter-spacing: -.035em; color: #132f59; }
.lt-badge { padding: 3px 9px; border: 1px solid transparent; border-radius: 6px; background: #e8efff; color: #315eea; font-size: 11.5px; font-weight: 600; letter-spacing: 0; transition: all .3s; }
.lt-badge.is-blue { border-color: #d5e2fa; background: #eef4ff; color: #3964a1; }
.lt-badge.is-green { border-color: #bfe3cf; background: #edf8f2; color: #267052; animation: dmPop .4s; }
.lt-meta { font-size: 12.5px; color: #60769a; }
.lt-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid #d4dfed; border-radius: 7px; background: #fff; color: #476a97; font-size: 13px; font-weight: 650; white-space: nowrap; }
.lt-primary { border-color: #235ef5; background: #235ef5; color: #fff; }
.lt-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dfe8fa; border-radius: 12px; background: #fff; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.st-metrics .lt-metrics { opacity: 1; transform: none; }
.lt-metrics > div { display: flex; gap: 12px; min-width: 0; padding: 14px 16px; border-left: 1px solid #e5ecfa; }
.lt-metrics > div:first-child { border-left: 0; }
.lt-ic { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #eaf0ff; color: #285cff; }
.lt-ic .i { width: 18px; height: 18px; }
.lt-metrics p { display: grid; gap: 1px; min-width: 0; }
.lt-metrics small { font-size: 11.5px; color: #60769a; }
.lt-metrics b { font-size: 22px; font-weight: 700; color: #132f59; }
.lt-metrics em { overflow: hidden; font-size: 11.5px; font-style: normal; color: #60769a; white-space: nowrap; text-overflow: ellipsis; }
.lt-bar { display: block; height: 5px; margin: 3px 0; overflow: hidden; border-radius: 4px; background: #eef2f8; }
.lt-bar > i { display: block; height: 100%; background: #2b9e62; transform: scaleX(0); transform-origin: left; }
.lt-cols { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; min-height: 0; }
.lt-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 16px 18px; border: 1px solid #dfe8fa; border-radius: 12px; background: #fff; }
.lt-card h3 { font-size: 15px; font-weight: 650; color: #132f59; }
.lt-textarea { min-height: 112px; padding: 12px 14px; border: 1px solid #d4dfed; border-radius: 8px; font-size: 14.5px; line-height: 1.55; color: #132f59; }
.lt-ph { color: #8aa0bd; }
.lt-help { font-size: 11.5px; color: #60769a; }
.lt-student { margin-top: auto; padding: 12px 14px; border: 1px solid #e0e8fa; border-radius: 10px; background: #f5f8ff; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.lt-student.is-on { opacity: 1; transform: none; }
.lt-st-h { margin: 2px 0 4px !important; font-size: 13.5px; font-weight: 700; color: #132f59; }
.lt-student p:last-child { font-size: 13px; line-height: 1.5; color: #3b5378; }
.lt-legend { font-size: 11.5px; color: #60769a; }
.lt-results ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lt-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .4s, box-shadow .3s; }
.st-results .lt-results li { opacity: 1; transform: none; }
.st-results .lt-results li:nth-child(2) { transition-delay: .08s; }
.st-results .lt-results li:nth-child(3) { transition-delay: .16s; }
.st-results .lt-results li:nth-child(4) { transition-delay: .24s; }
.st-results .lt-results li:nth-child(5) { transition-delay: .32s; }
.st-results .lt-results li:nth-child(6) { transition-delay: .4s; }
.lt-rt { font-size: 13px; color: #132f59; }
.lt-rs { font-size: 13px; color: #60769a; }
.lt-rs b { font-size: 15px; color: #285cff; }
.lt-results small { font-size: 11px; color: #60769a; }
.lt-results li.is-low { border-color: #f0dbad; background: #fff8e9; }
.lt-results li.is-low .lt-rs b { color: #9a6716; }
.lt-warn { display: flex; grid-column: 1 / -1; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; font-style: normal; color: #a56d17; }
.lt-warn .i { width: 13px; height: 13px; }
.lt-results li.is-focus { box-shadow: 0 0 0 2px #f0b44c; animation: dmPop .4s; }
.lt-note { margin-top: auto; font-size: 11px; color: #8aa0bd; }
.lt-why { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #eff8f3; font-size: 12.5px; color: #347456; }
.lt-why span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lt-why .i { width: 15px; height: 15px; }
.lt-why { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 14px; }
.lt-why-r { overflow: hidden; color: #4b7a63; white-space: nowrap; text-overflow: ellipsis; }
.lt-toast { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 10px; background: #132f59; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 30px rgba(19, 47, 89, .3); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.lt-toast.is-on { opacity: 1; transform: none; }
.lt-toast .i { width: 16px; height: 16px; color: #6ee7b7; stroke-width: 3; }

/* ================================================================
   5 · Cuadernillo (review-booklet)
   ================================================================ */
.sc-booklet { display: flex; flex-direction: column; background: #f4f7fb; }
.pl-top { display: flex; align-items: center; gap: 14px; padding: 12px 26px; border-bottom: 1px solid #d8e3f1; background: #fff; }
.pl-top > div { min-width: 0; }
.pl-x { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #d8e3f1; border-radius: 10px; color: #52698f; }
.pl-x .i { width: 16px; height: 16px; }
.pl-top h1 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.pl-top p { max-width: 640px; overflow: hidden; font-size: 12px; color: #8191aa; white-space: nowrap; text-overflow: ellipsis; }
.pl-attempt { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 6px 10px; border: 1px solid #d8e3f1; border-radius: 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pl-attempt .i { width: 14px; height: 14px; }
.pl-saved { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #0f7a57; white-space: nowrap; }
.pl-saved .i { width: 14px; height: 14px; stroke-width: 3; }
.pl-track { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 26px; list-style: none; border-bottom: 1px solid #e9eff7; background: #fff; }
.pl-track li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #8191aa; white-space: nowrap; transition: color .3s; }
.pl-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #eef2f8; color: #8191aa; transition: all .3s; }
.pl-ic .i { display: none; width: 15px; height: 15px; stroke-width: 3; }
.pl-track li.is-current { color: #0868f7; }
.pl-track li.is-current .pl-ic { background: #0868f7; color: #fff; box-shadow: 0 0 0 4px rgba(8, 104, 247, .15); }
.pl-track li.is-done { color: #0f7a57; }
.pl-track li.is-done .pl-ic { background: #10b981; color: #fff; }
.pl-track li.is-done .pl-ic b { display: none; }
.pl-track li.is-done .pl-ic .i { display: block; }
.pl-line { flex: 1; height: 2px; border-radius: 2px; background: #d8e3f1; transition: background .4s; }
.pl-line.is-done { background: #10b981; }
.pl-stage { position: relative; flex: 1; min-height: 0; }
.pl-phase { position: absolute; inset: 0; padding: 18px 26px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s, transform .45s; }
.pl-phase.is-active { opacity: 1; transform: none; }
.pl-phase[data-phase="flash"], .pl-phase[data-phase="tf"], .pl-phase[data-phase="test"], .pl-phase[data-phase="grade"] { display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
.pl-phase .ex-head, .pl-phase .bk-flip, .pl-phase .vf-card, .pl-phase .vf-btns, .pl-phase .vf-verdict, .pl-phase .bt-score, .pl-phase .bt-card, .pl-phase .gr { width: 100%; }

.fc-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; gap: 20px; height: 100%; }
.fc-index, .fc-legend { align-self: start; display: grid; gap: 3px; padding: 14px; border: 1px solid #d8e3f1; border-radius: 18px; background: #fff; }
.fc-k { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #52698f; }
.fc-item { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 4px; border-radius: 7px; font-size: 12px; line-height: 1.35; color: #3b4d6d; transition: all .25s; }
.fc-item span { font-size: 11px; font-weight: 700; color: #9aa8bf; }
.fc-item span .i { width: 13px; height: 13px; stroke-width: 3; }
.fc-item.is-active { background: #eff5fe; color: #0868f7; }
.fc-item.is-active span { color: #0868f7; }
.fc-item.is-read span { color: #10b981; }
.fc-read { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #52698f; }
.fc-read b { color: #092452; }
.fc-meter { display: block; height: 6px; overflow: hidden; border-radius: 6px; background: #edf1f7; }
.fc-meter > i { display: block; height: 100%; background: #0868f7; transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.fc-sheet { position: relative; min-height: 0; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -34px rgba(9, 36, 82, .45), 0 0 0 1px #e3ebf6; }
.fc-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(#fff0, #fff); pointer-events: none; }
.fc-hero { padding: 24px 32px 16px; background: radial-gradient(circle at 100% 0, rgba(8, 104, 247, .08), transparent 45%); }
.fc-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0868f7; }
.fc-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #0868f7; color: #fff; font-size: 15px; letter-spacing: 0; }
.fc-hero h2 { margin: 12px 0 8px; font-size: 27px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #092452; }
.fc-lead { font-size: 16.5px; line-height: 1.62; color: #2c3f63; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.fc-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #e3ebf6; border-radius: 9px; background: #f4f7fb; font-size: 12px; font-weight: 700; color: #3b4d6d; }
.fc-chips .i { width: 13px; height: 13px; }
.fc-chips .is-exam { border-color: #f6e2b5; background: #fff4de; color: #8b5905; }
.fc-chips .is-red { border-color: #f7d3da; background: #fdedf0; color: #a92843; }
.fc-chips .is-reading { border-color: #d7e6fd; background: #eff5fe; color: #0868f7; }
.fc-chips .is-done { border-color: #c9eedd; background: #e8f8f1; color: #0f7a57; animation: dmPop .35s; }
.fc-body { padding: 4px 32px 30px; font-size: 15px; line-height: 1.72; color: #1d2f52; }
.fc-body p { margin-bottom: 12px; }
.fc-block { margin-top: 6px; padding-top: 14px; border-top: 1px solid #edf2f8; }
.fc-block h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 18px; font-weight: 800; color: #092452; }
.fc-block h3 span { padding: 3px 7px; border-radius: 7px; background: #eff5fe; color: #0868f7; font-size: 11.5px; }
.dm-canvas .hl {
  background-image: linear-gradient(to top, var(--hl) 0 42%, transparent 42%); background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s ease-out;
}
.dm-canvas .hl.is-drawn { background-size: 100% 100%; }
.hl-azul { --hl: #bfdbfe; }
.hl-verde { --hl: #bbf7d0; }
.hl-ambar { --hl: #fde68a; }
.hl-rojo { --hl: #fecaca; }
.fc-end { display: grid; justify-items: start; gap: 6px; margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, #0b2a66, #071433); color: #fff; }
.fc-end small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.fc-end b { font-size: 17px; }
.fc-l { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; transition: background .3s; }
.fc-l .sw { display: block; width: 26px; height: 16px; margin: 0; border-radius: 4px; }
.fc-l .sw-azul { background: #bfdbfe; }
.fc-l .sw-verde { background: #bbf7d0; }
.fc-l .sw-ambar { background: #fde68a; }
.fc-l .sw-rojo { background: #fecaca; }
.fc-l b { display: block; font-size: 12.5px; color: #092452; }
.fc-l small { display: block; font-size: 11px; line-height: 1.35; color: #8191aa; }
.fc-l em { min-width: 18px; font-size: 13px; font-style: normal; font-weight: 800; text-align: right; color: #092452; }
.fc-l.is-bump { background: #f4f7fb; }
.fc-l.is-bump em { animation: dmPop .35s; }
.fc-help { margin-top: 6px; font-size: 11px; color: #8191aa; }

.ex-head { display: flex; justify-content: space-between; align-items: flex-end; max-width: 760px; margin: 6px auto 18px; }
.ex-k { font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #0868f7; }
.ex-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.5px; color: #092452; }
.ex-score { display: flex; gap: 14px; font-size: 14px; font-weight: 800; }
.ex-score .is-g { color: #0f7a57; }
.ex-score .is-a { color: #c97a05; }
.ex-score .is-r { color: #d6455e; }
.bk-flip { max-width: 760px; height: 300px; margin: 0 auto; perspective: 1200px; }
.bk-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bk-flip.is-flipped .bk-inner { transform: rotateY(180deg); }
.bk-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; border: 1px solid #d8e3f1; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px -52px rgba(10, 36, 84, .45); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bk-back { background: #fbfdff; transform: rotateY(180deg); }
.bk-n { font-size: 12px; font-weight: 900; color: #8191aa; }
.bk-lab { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0868f7; }
.bk-front p { margin: auto 0; font-size: 22px; font-weight: 600; line-height: 1.4; color: #092452; }
.bk-front small { font-size: 12.5px; color: #8191aa; }
.bk-back p { font-size: 17px; font-weight: 500; line-height: 1.6; color: #1a3860; }
.bk-src { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding: 4px 9px; border-radius: 8px; background: #eff5fe; color: #0868f7; font-size: 12px; font-weight: 600; }
.bk-src .i { width: 14px; height: 14px; }
.ex-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.ex-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid #d8e3f1; border-radius: 12px; background: #fff; color: #092452; font-size: 14.5px; font-weight: 800; }
.ex-btn .i { width: 16px; height: 16px; }
.ex-primary { min-width: 200px; border-color: #0868f7; background: #0868f7; color: #fff; }
.ex-amber { border-color: #fde68a; background: #fffbeb; color: #8b5905; }
.ex-green { border-color: #a7f3d0; background: #ecfdf5; color: #0f7a57; }
.sc-booklet [data-again], .sc-booklet [data-knew] { display: none; }
.sc-booklet.is-answer [data-again], .sc-booklet.is-answer [data-knew] { display: inline-flex; }
.sc-booklet.is-answer [data-show] { display: none; }
.vf-card, .vf-btns, .vf-verdict, .bt-score, .bt-card { max-width: 760px; margin-inline: auto; }
.vf-card { padding: 26px 32px; border: 1px solid #d8e3f1; border-radius: 20px; background: #fff; }
.vf-card h3 { margin-top: 8px; font-size: 21px; font-weight: 700; line-height: 1.45; color: #092452; }
.vf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.vf-btn { display: flex; justify-content: center; align-items: center; gap: 10px; height: 62px; border: 1px solid #d8e3f1; border-radius: 14px; background: #fff; color: #092452; font-size: 17px; font-weight: 800; transition: all .25s; }
.vf-btn kbd { padding: 2px 6px; border-radius: 5px; background: #f4f7fb; color: #8191aa; font-family: inherit; font-size: 11px; }
.vf-btn.is-right { border-color: #10b981; background: #ecfdf5; color: #0f7a57; }
.vf-btn.is-dim { border-style: dashed; opacity: .6; }
.vf-verdict { margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.vf-verdict.is-on { opacity: 1; transform: none; }
.vf-verdict b { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; background: #ecfdf5; color: #0f7a57; font-size: 17px; font-weight: 900; }
.vf-verdict .i, .bt-verdict b .i { width: 18px; height: 18px; stroke-width: 3; }
.vf-verdict p { margin-top: 8px !important; padding: 12px 16px; border-radius: 12px; background: #f7faff; font-size: 15px; line-height: 1.6; color: #1a3860; }
.bt-score { display: flex; gap: 16px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: #52698f; }
.bt-score .is-g { color: #0f7a57; }
.bt-score .is-r { color: #d6455e; }
.bt-card { padding: 20px 26px; border: 1px solid #d8e3f1; border-radius: 20px; background: #fff; }
.bt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px !important; font-size: 12.5px; }
.bt-top b { font-weight: 900; color: #092452; }
.bt-top span { padding: 3px 8px; border-radius: 6px; background: #eff5fe; color: #0868f7; font-size: 11px; font-weight: 700; }
.bt-top em { margin-left: auto; font-size: 12px; font-style: normal; color: #8191aa; }
.bt-card h3 { margin: 6px 0 14px; font-size: 19px; font-weight: 700; line-height: 1.45; color: #092452; }
.bt-opts { display: grid; gap: 8px; }
.bt-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border: 1px solid #d8e3f1; border-radius: 14px; font-size: 15px; font-weight: 600; color: #092452; transition: all .25s; }
.bt-l { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e9eff7; border-radius: 10px; background: #f9fbfe; font-weight: 900; color: #0868f7; transition: all .25s; }
.bt-opt.is-right { border-color: #10b981; background: #ecfdf5; color: #0f7a57; }
.bt-opt.is-right .bt-l { border-color: #10b981; background: #10b981; color: #fff; }
.bt-opt.is-dim { opacity: .5; }
.bt-verdict { max-height: 0; margin-top: 12px; overflow: hidden; opacity: 0; transition: opacity .45s, max-height .45s; }
.bt-verdict.is-on { max-height: 280px; opacity: 1; }
.bt-verdict b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; color: #0f7a57; }
.bt-verdict p { margin: 6px 0 8px !important; padding: 10px 14px; border-radius: 12px; background: #f7faff; font-size: 13.5px; line-height: 1.6; color: #1a3860; }
.gr { display: grid; justify-items: center; gap: 8px; max-width: 620px; margin: 6px auto; padding: 26px 30px; border: 1px solid #d8e3f1; border-radius: 24px; background: #fff; text-align: center; }
.gr-num { display: grid; gap: 6px; }
.gr-num b { font-size: 84px; font-weight: 800; letter-spacing: -3px; line-height: 1; color: #0f7a57; }
.gr-num small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8191aa; }
.gr h2 { font-size: 24px; font-weight: 800; color: #092452; opacity: 0; transition: opacity .4s; }
.gr.is-in h2 { opacity: 1; }
.gr-txt { max-width: 480px; font-size: 14.5px; line-height: 1.6; color: #52698f; }
.gr-boxes { display: flex; gap: 10px; }
.gr-boxes span { padding: 10px 16px; border-radius: 12px; background: #f4f7fb; font-size: 13px; color: #52698f; }
.gr-boxes b { display: block; font-size: 20px; color: #092452; }
.gr-delta { display: flex; align-items: center; gap: 12px; margin-top: 8px !important; padding: 12px 18px; border-radius: 14px; background: linear-gradient(135deg, #0b2a66, #071433); color: #fff; font-size: 13.5px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.gr-delta.is-on { opacity: 1; transform: none; }
.gr-delta .is-from { font-size: 22px; color: #fca5a5; text-decoration: line-through; text-decoration-thickness: 2px; }
.gr-delta i { font-style: normal; color: #8dbbff; }
.gr-delta .is-to { font-size: 28px; color: #6ee7b7; }

/* ================================================================
   Formato móvil del lienzo (460 × 960)
   ================================================================ */
[data-form="tall"] .sc-form { padding: 12px; }
[data-form="tall"] .sf-top { padding: 12px 16px; }
[data-form="tall"] .sf-logo { font-size: 20px; }
[data-form="tall"] .sf-head { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px 0; }
[data-form="tall"] .sf-titles h1 { font-size: 22px; }
[data-form="tall"] .sf-titles p { font-size: 14px; }
[data-form="tall"] .sf-steps { grid-template-columns: repeat(4, 1fr); }
[data-form="tall"] .sf-steps li { font-size: 11px; }
[data-form="tall"] .sf-body { margin: 14px 16px 0; }
[data-form="tall"] .sf-cards3, [data-form="tall"] .sf-grid2, [data-form="tall"] .sf-time, [data-form="tall"] .sf-review { grid-template-columns: 1fr; }
[data-form="tall"] .sf-support { grid-template-columns: 1fr 1fr; }
[data-form="tall"] .sf-choice { padding: 11px 12px; font-size: 14px; }
[data-form="tall"] .sf-h2row { flex-direction: column; }
[data-form="tall"] .sf-h2row .sf-button { min-height: 36px; font-size: 13.5px; }
[data-form="tall"] .sf-tr { grid-template-columns: 34% 25% 25% 16%; gap: 6px; }
[data-form="tall"] .sf-day { gap: 7px; font-size: 13.5px; }
[data-form="tall"] .sf-input { height: 34px; padding: 0 8px; font-size: 13.5px; }
[data-form="tall"] .sf-extra .sf-link { display: none; }
[data-form="tall"] .sf-side .sf-hint, [data-form="tall"] .sf-copied { display: none; }
[data-form="tall"] .sf-time { gap: 12px; margin-top: 8px; }
[data-form="tall"] .sf-tr { padding: 4px; }
[data-form="tall"] .sf-next { padding: 1px 5px; font-size: 10px; }
[data-form="tall"] .sf-trow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
[data-form="tall"] .sf-trow .sf-state { display: none; }
[data-form="tall"] .sf-trow.sf-th span:last-child { display: none; }
[data-form="tall"] .sf-rblock-time { grid-row: auto; }
[data-form="tall"] .sf-rblock-time p:nth-child(n+3):nth-last-child(n+2) { display: none; }
[data-form="tall"] .sf-foot { padding: 12px 16px; }
[data-form="tall"] .sf-primary { min-width: 0; }
[data-form="tall"] .sf-sent-card { width: 380px; }

[data-form="tall"] .sc-plan { padding: 12px; }
[data-form="tall"] .lp-crumbs .lp-chip { display: none; }
[data-form="tall"] .lp-weekly-timeline { --lab: 78px; padding: 14px 12px 10px; }
[data-form="tall"] .lp-segmented { display: none; }
[data-form="tall"] .lp-wt-heading { flex-direction: column; }
[data-form="tall"] .lp-wt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-form="tall"] .lp-wt-legend { gap: 4px 12px; }
[data-form="tall"] .lp-wt-legend li { font-size: 11px; }
[data-form="tall"] .lp-wt-axis, [data-form="tall"] .lp-wt-day { grid-template-columns: 70px minmax(0, 1fr); column-gap: 8px; }
[data-form="tall"] .lp-wt-axis time:nth-child(even) { visibility: hidden; }
[data-form="tall"] .lp-wt-day-label > strong { font-size: 12.5px; }
[data-form="tall"] .lp-wt-day-label > span { font-size: 9.5px; }
[data-form="tall"] .lp-wt-day-notes .lp-wt-references { display: none; }

[data-form="tall"] .cp-top { gap: 12px; padding: 0 14px; }
[data-form="tall"] .cp-nav { display: none; }
[data-form="tall"] .cp-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 10px; }
[data-form="tall"] .cp-agenda { gap: 6px; padding: 10px 12px; }
[data-form="tall"] .cp-days { grid-template-columns: repeat(7, 1fr); gap: 4px; }
[data-form="tall"] .cp-days li { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 4px 2px; }
[data-form="tall"] .cp-dbody, [data-form="tall"] .cp-now { display: none; }
[data-form="tall"] .cp-dname { font-size: 10.5px; }
[data-form="tall"] .cp-days li.is-pending .cp-dstate { padding: 0 3px; font-size: 8px; }
[data-form="tall"] .rd-page { padding: 0 18px; }
[data-form="tall"] .rd-scroll { font-size: 14.5px; }
[data-form="tall"] .rd-scroll h2 { font-size: 22px; }
[data-form="tall"] .rd-table { font-size: 12.5px; }
[data-form="tall"] .rd-top, [data-form="tall"] .rd-foot { padding: 10px 14px; }
[data-form="tall"] .rd-note { display: none; }
[data-form="tall"] .tq-head span { display: none; }
[data-form="tall"] .tq-head .tq-pen { display: inline; }
[data-form="tall"] .tq-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
[data-form="tall"] .tq-q { padding: 14px 16px; }
[data-form="tall"] .tq-q h3 { font-size: 17px; }
[data-form="tall"] .tq-opt { padding: 10px 12px; font-size: 14px; }
[data-form="tall"] .tq-map > p { display: none; }
[data-form="tall"] .tq-cells { grid-template-columns: repeat(15, 1fr); gap: 3px; }
[data-form="tall"] .tq-cells i { font-size: 0; }
[data-form="tall"] .tq-score { grid-template-columns: repeat(4, 1fr); }
[data-form="tall"] .tq-net { grid-column: auto; padding: 4px; }
[data-form="tall"] .tq-net b { font-size: 15px; }
[data-form="tall"] .tq-net small { display: none; }
[data-form="tall"] .tf-pill:last-child { display: none; }
[data-form="tall"] .tf-card h3 { font-size: 17px; }

[data-form="tall"] .sc-tutor { grid-template-columns: 1fr; }
[data-form="tall"] .lt-side { display: none; }
[data-form="tall"] .lt-main { padding: 12px; }
[data-form="tall"] .lt-origin span:not(.lt-who) { display: none; }
[data-form="tall"] .lt-view { inset: 50px 12px 12px; gap: 10px; }
[data-form="tall"] .lt-head .lt-btn { display: none; }
[data-form="tall"] .lt-head h2 { font-size: 20px; }
[data-form="tall"] .lt-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-form="tall"] .lt-metrics > div { padding: 10px 12px; border-top: 1px solid #e5ecfa; }
[data-form="tall"] .lt-ic { display: none; }
[data-form="tall"] .lt-cols { grid-template-columns: 1fr; grid-template-rows: auto auto; }
[data-form="tall"] .lt-textarea { min-height: 80px; font-size: 13px; }
[data-form="tall"] .lt-student, [data-form="tall"] .lt-note { display: none; }
[data-form="tall"] .lt-results li:nth-child(-n+2) { display: none; }
[data-form="tall"] .lt-why-r { display: none; }

[data-form="tall"] .pl-top { padding: 10px 14px; }
[data-form="tall"] .pl-top p, [data-form="tall"] .pl-attempt { display: none; }
[data-form="tall"] .pl-top h1 { font-size: 14.5px; }
[data-form="tall"] .pl-track { padding: 8px 14px; gap: 6px; }
[data-form="tall"] .pl-track li:not(.is-current) { font-size: 0; gap: 0; }
[data-form="tall"] .pl-phase { padding: 12px; }
[data-form="tall"] .fc-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
[data-form="tall"] .fc-index { display: none; }
[data-form="tall"] .fc-legend { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-radius: 12px; }
[data-form="tall"] .fc-legend .fc-k, [data-form="tall"] .fc-help, [data-form="tall"] .fc-l small { display: none; }
[data-form="tall"] .fc-l { grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: 2px; }
[data-form="tall"] .fc-l b { font-size: 10px; text-align: center; }
[data-form="tall"] .fc-l em { text-align: center; }
[data-form="tall"] .fc-legend { order: -1; }
[data-form="tall"] .fc-hero { padding: 18px 18px 12px; }
[data-form="tall"] .fc-hero h2 { font-size: 22px; }
[data-form="tall"] .fc-lead { font-size: 14.5px; }
[data-form="tall"] .fc-body { padding: 4px 18px 24px; font-size: 14px; }
[data-form="tall"] .ex-head { flex-direction: column; align-items: flex-start; gap: 6px; }
[data-form="tall"] .bk-flip { height: 380px; }
[data-form="tall"] .bk-front p { font-size: 19px; }
[data-form="tall"] .ex-ctrl { flex-wrap: wrap; }
[data-form="tall"] .gr { padding: 20px 16px; }
[data-form="tall"] .gr-delta { flex-wrap: wrap; justify-content: center; }

/* ---------- Carril y pie en pantallas estrechas ---------- */
@media (max-width: 1100px) {
  .dm-rail-t small { display: none; }
}
@media (max-width: 700px) {
  .dm-rail { display: flex; gap: 8px; margin-inline: -24px; padding: 2px 24px 6px; width: calc(100% + 48px); overflow-x: auto; scrollbar-width: none; }
  .dm-rail::-webkit-scrollbar { display: none; }
  .dm-rail li { flex: 0 0 auto; }
  .dm-rail button { padding: 9px 12px 13px; }
  .dm-rail-t b { font-size: 13.5px; white-space: nowrap; }
  .dm-bar .dm-live span { display: none; }
  .dm-foot { flex-wrap: wrap; min-height: 0; }
  .dm-say { flex-basis: calc(100% - 60px); font-size: 14.5px; }
  .dm-ctrl { width: 100%; justify-content: flex-end; }
}

/* ---------- Animaciones ---------- */
@keyframes dmRipple { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
@keyframes dmPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes dmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmBlink { 50% { opacity: 0; } }
@keyframes dmLive { 50% { opacity: .35; } }
@keyframes sfFlash { 0% { background: #e6f0ff; } 100% { background: #fff; } }
@keyframes sfDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sfRow { 0% { background: #e6f0ff; } 100% { background: transparent; } }
@keyframes wtPop { 0% { filter: brightness(1.14) saturate(1.3); } 100% { filter: none; } }
@keyframes wtSheen { to { transform: translateX(110%); opacity: 0; } }
@keyframes wtDetail { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wtAdded { 50% { filter: brightness(1.08); box-shadow: 0 0 0 6px rgba(189, 144, 27, .22); } }
@keyframes cpPulse { 50% { box-shadow: 0 0 0 5px rgba(8, 104, 247, .15); } }
@keyframes cpNow { from { transform: translateY(8px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes tqShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes tfIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dm-canvas *, .dm-canvas *::before, .dm-canvas *::after { animation: none !important; transition: none !important; }
  .sc { transition: none; }
}