/* ==========================================================================
   ALMA para profesores — sistema visual
   El naranja es la voz de ALMA (Copilot, propuestas, borradores).
   Las acciones del profesor usan tinta.
   ========================================================================== */
:root {
  --bg: #F6F5F2;
  --panel: #FFFFFF;
  --panel-2: #FAF9F7;
  --panel-3: #F3F1ED;
  --line: #ECE9E4;
  --line-2: #DFDBD3;
  --ink: #18191D;
  --ink-2: #4A4D55;
  --ink-3: #868A92;
  --ink-4: #B3B5BA;
  --brand: #F58220;
  --brand-600: #E2700F;
  --brand-ink: #A8520A;
  --brand-50: #FFF5EC;
  --brand-100: #FFE7D2;
  --ok: #2B7A57; --ok-50: #EAF4EE; --ok-200: #BFDCCB;
  --warn: #A86300; --warn-50: #FCF3E3; --warn-200: #F0D6A8;
  --info: #3159B8; --info-50: #ECF1FB; --info-200: #C7D5F2;
  --violet: #6247C6; --violet-50: #F1EEFB; --violet-200: #D6CEF3;
  --mute-50: #F2F0EC;
  --r-sm: 8px; --r: 11px; --r-lg: 15px; --r-xl: 20px;
  --sh-1: 0 1px 2px rgba(24, 25, 29, .05);
  --sh-2: 0 1px 2px rgba(24, 25, 29, .04), 0 4px 14px -4px rgba(24, 25, 29, .08);
  --sh-pop: 0 2px 6px rgba(24, 25, 29, .06), 0 18px 44px -12px rgba(24, 25, 29, .24);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --side-w: 252px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01', 'ss03'; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
kbd { font: 500 11px var(--font); color: var(--ink-3); background: var(--panel); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; }
s { color: var(--ink-3); text-decoration-color: rgba(168, 99, 0, .55); }
.ic { flex: none; display: block; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.ta-r { text-align: right; } .ta-c { text-align: center; }
.mt { margin-top: 18px; } .mt-s { margin-top: 8px; }
.grow { flex: 1; }
.only-m { display: none !important; }
.only-cards { display: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- armazón ---------- */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100vh; height: 100dvh; transition: grid-template-columns .28s var(--ease); }
.side { display: flex; flex-direction: column; min-width: 0; padding: 12px 10px 10px 12px; gap: 6px; position: relative; z-index: 30; }
.frame { display: flex; flex-direction: column; min-width: 0; margin: 8px 8px 8px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-1); overflow: hidden; }
.top { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--line); flex: none; }
.scroller { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
#main { outline: none; }

.academy { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--r); text-align: left; transition: background .15s; }
.academy:hover { background: rgba(24, 25, 29, .045); }
.academy img { border-radius: 8px; }
.academy-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.academy-t b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.academy-t small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.academy-chev { color: var(--ink-3); }
.side-search { display: flex; align-items: center; gap: 9px; margin: 4px 0 6px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); color: var(--ink-3); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: border-color .15s; width: 100%; }
.side-search:hover { border-color: var(--line-2); color: var(--ink-2); }
.side-search kbd { margin-left: auto; }
.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.nav-sec { display: flex; flex-direction: column; gap: 1px; }
.nav-title { font-size: 11.5px; font-weight: 500; color: var(--ink-3); padding: 6px 10px 4px; white-space: nowrap; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; white-space: nowrap; }
.nav-item .ic { color: var(--ink-3); transition: color .15s; }
.nav-item:hover { background: rgba(24, 25, 29, .045); color: var(--ink); }
.nav-item.active { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.nav-item.active .ic { color: var(--ink); }
.nav-copilot .ic { color: var(--brand); }
.nav-copilot.active .ic { color: var(--brand); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; }
.nav-count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.gdot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; display: inline-block; margin-right: 7px; vertical-align: 1px; }
.nav-item .gdot { margin: 0 4px 0 5px; }
.side-bottom { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; position: relative; }
.me { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 5px 6px; border-radius: var(--r); text-align: left; }
.me:hover { background: rgba(24, 25, 29, .045); }
.me-t { display: flex; flex-direction: column; min-width: 0; }
.me-t b { font-size: 13px; font-weight: 600; } .me-t small { font-size: 11.5px; color: var(--ink-3); }
.collapse { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-3); flex: none; }
.collapse:hover { background: rgba(24, 25, 29, .06); color: var(--ink); }

body.side-collapsed { --side-w: 68px; }
body.side-collapsed .nav-label, body.side-collapsed .academy-t, body.side-collapsed .academy-chev, body.side-collapsed .nav-title, body.side-collapsed .nav-count, body.side-collapsed .side-search kbd { display: none; }
body.side-collapsed .nav-item, body.side-collapsed .side-search { justify-content: center; padding: 0; }
body.side-collapsed .nav-item .gdot { margin: 0; }
body.side-collapsed .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
body.side-collapsed .side-bottom { flex-direction: column; }
body.side-collapsed .academy { justify-content: center; padding: 6px 0; }
body.side-collapsed .nav-sec + .nav-sec { border-top: 1px solid var(--line); padding-top: 10px; }

/* popovers */
.pop { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); padding: 6px; animation: popIn .16s var(--ease); }
.pop[hidden] { display: none; }
.pop-academy { top: 54px; left: 12px; width: 280px; }
.pop-profile { bottom: 54px; left: 10px; width: 290px; }
.pop-notifs { top: 44px; right: 0; width: 380px; padding: 0; max-height: 70vh; overflow: auto; }
.pop-h { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 1px; }
.pop-notifs .pop-h { flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.pop-h small { color: var(--ink-3); font-size: 12px; }
.pop-i { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; }
.pop-i:hover:not(:disabled) { background: var(--panel-3); }
.pop-i:disabled { color: var(--ink-4); cursor: default; }
.pop-i small { margin-left: auto; font-size: 11px; color: var(--ink-4); }
.pop-i img { border-radius: 5px; }
.pop-check { margin-left: auto; color: var(--brand); font-weight: 600; }
.pop-plus { width: 20px; height: 20px; border-radius: 5px; border: 1px dashed var(--line-2); display: grid; place-items: center; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* cabecera */
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--ink-3); flex: 1; overflow: hidden; white-space: nowrap; }
.crumbs a:hover { color: var(--ink); }
.crumbs span:last-child { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--ink-4); }
.top-r { display: flex; align-items: center; gap: 8px; flex: none; }
.demo-tag { font-size: 11.5px; font-weight: 500; color: var(--ink-3); border: 1px dashed var(--line-2); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.bell-wrap { position: relative; }
.bell-dot { position: absolute; top: 1px; right: -3px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--panel); pointer-events: none; }
.bell-dot[hidden] { display: none; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s, color .15s; user-select: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(24, 25, 29, .25), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-primary:hover { background: #2B2D33; }
.btn-ghost { background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--sh-1); }
.btn-ghost:hover { background: var(--panel-2); border-color: #CFCAC0; }
.btn-soft { background: var(--brand-50); color: var(--brand-ink); border: 1px solid var(--brand-100); }
.btn-soft:hover { background: var(--brand-100); }
.btn-soft .ic { color: var(--brand); }
.btn-ask { background: var(--brand-50); color: var(--brand-ink); border: 1px solid var(--brand-100); height: 34px; }
.btn-ask:hover { background: var(--brand-100); }
.btn-ask .ic { color: var(--brand); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: default; pointer-events: none; }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; color: var(--ink-2); flex: none; transition: background .15s; }
.icon-btn:hover { background: var(--panel-3); color: var(--ink); }
.icon-btn.disabled { opacity: .3; pointer-events: none; }
.icon-btn-sm { width: 28px; height: 28px; border-radius: 7px; }
.link { color: var(--ink-2); font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- elementos ---------- */
.av { --s: 32px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center; font-size: calc(var(--s) * .38); font-weight: 600; letter-spacing: -.02em; color: hsl(var(--h) 45% 28%); background: hsl(var(--h) 55% 91%); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 80% / .6); overflow: hidden; }
.av { display: inline-grid !important; flex-direction: row !important; place-items: center; line-height: 1; }
.av-char { color: #fff; box-shadow: none; }
.av-char img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.av-me { --h: 24; background: var(--ink); color: #fff; box-shadow: none; }
.av-more { background: var(--panel-3); color: var(--ink-2); font-size: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.avstack { display: inline-flex; }
.avstack .av { box-shadow: 0 0 0 2px var(--panel); }
.avstack .av + .av { margin-left: -7px; }
.lvl { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--panel-3); color: var(--ink-2); letter-spacing: .02em; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-50); color: var(--ok); }
.pill-warn { background: var(--warn-50); color: var(--warn); }
.pill-info { background: var(--info-50); color: var(--info); }
.pill-mute { background: var(--mute-50); color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--panel-3); color: var(--ink-2); white-space: nowrap; }
.chip-warn { background: var(--warn-50); color: var(--warn); }
.chip-ok { background: var(--ok-50); color: var(--ok); }
.chip-info { background: var(--info-50); color: var(--info); }
.chip-off { background: transparent; color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--line); }
.chip-en { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font-style: italic; color: var(--ink); }
.chip-en button { margin-left: 2px; color: var(--ink-3); }
.chip-btn { cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--violet-50); color: var(--violet); margin-left: 8px; vertical-align: 1px; }
.mini-new { background: var(--brand-50); color: var(--brand-ink); }
.ttag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.ttag .ic { color: var(--ink-3); }
.vtag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vtag-apoyo { background: var(--info-50); color: var(--info); }
.vtag-estandar { background: var(--panel-3); color: var(--ink-2); }
.vtag-reto { background: var(--violet-50); color: var(--violet); }
.vtag-btn { cursor: pointer; height: 28px; padding: 0 11px; }
.vtag-btn:hover { filter: brightness(.96); }
.count-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }
.count-badge.ghost { background: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.eyebrow-brand { color: var(--brand-ink); }
.eyebrow-brand .ic { color: var(--brand); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--ink-3); }
.empty strong { color: var(--ink); font-weight: 600; font-size: 14px; }
.empty span { font-size: 13px; max-width: 360px; }
.empty .ic { color: var(--ink-4); margin-bottom: 4px; }
.hot { color: var(--brand-ink) !important; }
.stale { color: var(--warn); }
.dotsbar { display: inline-flex; gap: 2px; }
.dotsbar i { width: 7px; height: 7px; border-radius: 2px; background: var(--line); }
.dotsbar i.on { background: currentColor; }

/* ---------- páginas ---------- */
.view-enter { animation: viewIn .32s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.page { max-width: 1240px; margin: 0 auto; padding: 32px 40px 72px; }
.page-narrow { max-width: 880px; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.page-h h1 { font-size: 26px; letter-spacing: -.025em; }
.page-h .eyebrow { margin-bottom: 6px; }
.lede-sm { color: var(--ink-3); margin-top: 4px; font-size: 14px; }
.sub-h { font-size: 14px; margin: 28px 0 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.card + .card { margin-top: 16px; }
.card-flush { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-h h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-h-r { display: flex; gap: 8px; }
.card-t { font-size: 14px; margin-bottom: 12px; }
.card-note { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); margin: -4px 0 14px; }
.card-note .ic { margin-top: 2px; }
.card-quiet { background: var(--panel-2); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.two-col > div > .card + .card, .two-col > aside > .card + .card { margin-top: 16px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.lg-f { background: var(--ink); } .lg-c { background: #9EA2AA; } .lg-n { background: var(--line); }
.lg-ok { background: var(--ok); } .lg-warn { background: #D99A2B; } .lg-mute { background: var(--line-2); }
.lg { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.lg-t { background: var(--violet); } .lg-a { background: #D99A2B; } .lg-info { background: var(--info); }

/* ---------- inicio ---------- */
.hello { margin: 8px 0 30px; }
.hello-date { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.display { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -.01em; }
.lede { font-size: 17px; color: var(--ink-2); margin-top: 8px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.col-side .card + .card, .col-main .card + .card { margin-top: 16px; }
.card-hero { padding: 24px 24px 12px; border-color: #F1E4D6; background: linear-gradient(180deg, #FFFBF7 0%, var(--panel) 120px); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.hero-num { font-size: 22px; font-weight: 600; margin: 8px 0 6px; letter-spacing: -.02em; }
.hero-num .num { font-family: var(--serif); font-weight: 400; font-size: 38px; color: var(--brand-ink); vertical-align: -3px; margin-right: 2px; }
.hero-top p { max-width: 520px; font-size: 13.5px; }
.prows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.card-hero .prows { margin: 0 -12px; border-top: 0; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 70px 16px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); transition: background .15s; }
.prow + .prow { box-shadow: 0 -1px 0 var(--line); }
.prow:hover { background: var(--panel-2); box-shadow: none; }
.prow:hover + .prow { box-shadow: none; }
.prow-t { display: flex; flex-direction: column; min-width: 0; }
.prow-t b { font-weight: 500; }
.prow-t small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-d { font-size: 12.5px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.arow-chev { color: var(--ink-4); }
.arows { display: flex; flex-direction: column; margin: 0 -10px; container-type: inline-size; }
@container (max-width: 620px) { .arow { grid-template-columns: minmax(0, 1fr) 24px 16px; gap: 6px 12px; } .arow-prog { grid-column: 1 / -1; grid-row: 2; } }
.arow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px) 24px 16px; gap: 18px; align-items: center; padding: 12px 10px; border-radius: var(--r); transition: background .15s; }
.arow + .arow { box-shadow: 0 -1px 0 var(--line); }
.arow:hover { background: var(--panel-2); box-shadow: none; }
.arow:hover + .arow { box-shadow: none; }
.arow-t { font-weight: 500; }
.arow-m { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.arow-m .sep { margin: 0 6px; color: var(--ink-4); }
.arow-nums { display: flex; gap: 12px; font-size: 12px; color: var(--ink-3); margin-top: 6px; flex-wrap: wrap; }
.arow-nums b { color: var(--ink); font-weight: 600; }
.prog { display: flex; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prog span { display: block; height: 100%; transition: width .5s var(--ease); }
.prog-f { background: var(--ink); }
.prog-c { background: #9EA2AA; }
.mini-prog { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.mini-prog small { color: var(--ink-3); font-size: 12px; }

.diff { padding: 16px 0; border-top: 1px solid var(--line); }
.diff:first-of-type { border-top: 0; padding-top: 4px; }
.diff-head { display: flex; justify-content: space-between; gap: 10px; }
.diff-cat { font-size: 11.5px; font-weight: 500; color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.diff-g { font-size: 12px; color: var(--ink-3); }
.diff-sentence { font-size: 16px; line-height: 1.45; margin: 6px 0 10px; color: var(--ink); letter-spacing: -.01em; }
.diff-sentence b { font-weight: 600; }
.diff-t { font-size: 15px; margin: 4px 0 8px; }
.diff-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.diff-meta b { font-weight: 600; }
.diff-ex { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 12px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.diff-ex .ic { color: var(--ink-4); }
.diff-ex b { font-weight: 500; color: var(--ok); }
.diff-act { display: flex; gap: 8px; flex-wrap: wrap; }

.card-copilot { border-color: var(--brand-100); background: radial-gradient(120% 100% at 100% 0%, #FFF3E7 0%, var(--panel) 60%); }
.cop-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.cop-head h3 { font-size: 15px; }
.cop-head p { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.cop-orb { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #FFB067, var(--brand) 55%, #E0620A); box-shadow: 0 4px 12px -3px rgba(245, 130, 32, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cop-orb-sm { width: 28px; height: 28px; border-radius: 9px; }
.cop-orb-lg { width: 56px; height: 56px; border-radius: 18px; }
.cop-ask { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--sh-1); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.cop-ask span { flex: 1; }
.cop-ask .ic { color: var(--ink-3); }
.cop-ask:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.cop-sugs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sug { display: inline-flex; align-items: center; gap: 6px; text-align: left; font-size: 12.5px; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.sug:hover { background: var(--panel); border-color: var(--line-2); color: var(--ink); }
.glist { display: flex; flex-direction: column; margin: 0 -10px; }
.gitem { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); transition: background .15s; }
.gitem:hover { background: var(--panel-2); }
.gitem-l { display: flex; align-items: center; flex: 1; min-width: 0; }
.gitem-l > span { display: flex; flex-direction: column; min-width: 0; }
.gitem-l b { font-weight: 500; font-size: 13.5px; }
.gitem-l small { font-size: 12px; color: var(--ink-3); }
.spark rect { fill: #CFCBC3; transition: fill .15s; }
.spark:hover rect { fill: #A9A49A; }
.gitem .spark rect:last-child, .gcard .spark rect:last-child, .kpi .spark rect:last-child { fill: var(--brand); }
.quiet-stats { display: flex; gap: 24px; margin: 10px 0 8px; }
.quiet-stats div { display: flex; flex-direction: column; }
.quiet-stats b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.quiet-stats span { font-size: 12px; color: var(--ink-3); }

/* ---------- grupos ---------- */
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gcard { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); position: relative; overflow: hidden; }
.gcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gc); opacity: .85; }
.gcard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.gcard-top { display: flex; align-items: flex-start; gap: 14px; }
.gcard-top h2 { font-size: 18px; }
.gcard-top p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.gcard-lvl { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--gc); background: color-mix(in srgb, var(--gc) 11%, white); flex: none; }
.gcard-go { margin-left: auto; color: var(--ink-4); transition: transform .2s var(--ease), color .2s; }
.gcard:hover .gcard-go { transform: translateX(3px); color: var(--ink); }
.gcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin: 0; }
.gcard-stats dt { font-size: 12px; color: var(--ink-3); }
.gcard-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.gcard-part { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gcard-part > div { display: flex; flex-direction: column; gap: 3px; }
.gcard-part small { font-size: 12px; color: var(--ink-2); }

.ghead { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.ghead-l { display: flex; align-items: center; gap: 14px; }
.ghead h1 { font-size: 26px; letter-spacing: -.025em; }
.ghead-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: color .15s; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); animation: tabIn .25s var(--ease); }
@keyframes tabIn { from { transform: scaleX(.4); opacity: 0; } }
.tab-n { font-size: 11.5px; color: var(--ink-3); background: var(--panel-3); padding: 1px 7px; border-radius: 10px; font-weight: 500; }
.tab-body { animation: viewIn .25s var(--ease); }
.tab-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.kpi-link { transition: border-color .15s, box-shadow .15s; }
.kpi-link:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.kpi-v { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.kpi-v small { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.kpi-v-sm { font-size: 20px; padding: 6px 0 3px; }
.kpi .spark { margin-top: 8px; }
.kpi-quiet { background: var(--panel-2); }
.capmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.cap:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.cap-t { font-weight: 500; font-size: 13.5px; }
.cap-n { display: flex; flex-direction: column; gap: 5px; }
.cap-n small { font-size: 11.5px; color: var(--ink-3); }
.cap-evidencia .cap-n { color: var(--ok); }
.cap-desarrollo .cap-n { color: #D99A2B; }
.cap-sin .cap-n { color: var(--ink-4); }
.feed { display: flex; flex-direction: column; }
.fe { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; }
.card-flush .fe { padding: 11px 18px; }
.fe + .fe { border-top: 1px solid var(--line); }
.fe-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-3); color: var(--ink-3); }
.fe-dificultad .fe-ic { background: var(--warn-50); color: var(--warn); }
.fe-uso .fe-ic { background: var(--ok-50); color: var(--ok); }
.fe-feedback .fe-ic { background: var(--violet-50); color: var(--violet); }
.fe-refuerzo .fe-ic { background: var(--brand-50); color: var(--brand-ink); }
.fe-practica .fe-ic { background: var(--info-50); color: var(--info); }
.fe-b { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.feed-compact .fe-b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-st { font-weight: 500; }
.fe-st:hover { text-decoration: underline; }
.fe-t { color: var(--ink-2); }
.fe-b small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-d { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hday h3 { font-size: 13px; color: var(--ink-2); margin: 24px 0 10px; display: flex; gap: 8px; align-items: center; }
.hday h3 span { font-size: 11.5px; color: var(--ink-3); background: var(--panel-3); padding: 1px 7px; border-radius: 10px; font-weight: 500; }

/* ---------- filtros ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tab-tools .filters { margin-bottom: 0; }
.search-in { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-3); min-width: 220px; transition: border-color .15s, box-shadow .15s; }
.search-in:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--panel-3); }
.search-in input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; color: var(--ink); }
.select-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-3); font-size: 13px; transition: border-color .15s; }
.select-chip:hover { border-color: #CFCAC0; }
.select-chip select { appearance: none; border: 0; background: none; outline: 0; color: var(--ink); font-weight: 500; padding-right: 2px; cursor: pointer; font-size: 13px; }
.select-chip.on { border-color: var(--ink); }
.select-full { display: flex; width: 100%; }
.select-full select { flex: 1; }
.fchip { height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: all .15s; }
.fchip:hover { border-color: #CFCAC0; color: var(--ink); }
.fchip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--panel-3); flex-wrap: wrap; }
.seg > a, .seg > button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.seg > a:hover, .seg > button:hover { color: var(--ink); }
.seg > .on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.seg-n { font-size: 11px; color: var(--ink-3); }
.seg-block { display: flex; width: 100%; }
.seg-block > button { flex: 1; justify-content: center; height: 34px; }

/* ---------- tablas ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13.5px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr:hover { background: var(--panel-2); }
.cell-person { display: flex; align-items: center; gap: 10px; }
.cell-person b { font-weight: 500; }
.cell-person > span { display: flex; flex-direction: column; }
.cell-person small { font-size: 12px; color: var(--ink-3); }
.cell-main { font-weight: 500; }
.cell-main:hover { text-decoration: underline; }
.cell-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cell-sub .mini-tag { margin-left: 0; }
.row-acts { display: inline-flex; gap: 6px; }
.evdots { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.evd { width: 10px; height: 10px; border-radius: 3px; background: var(--line); }
.evd-evidencia { background: var(--ok); } .evd-desarrollo { background: #D99A2B; } .evd-apoyo { background: var(--info); } .evd-indeterminado { background: var(--line-2); }
.tbl-results td small { color: var(--ink-3); font-size: 12px; }
.tbl-results td .chip + .chip { margin-left: 4px; }

/* ---------- ficha del alumno ---------- */
.ctxbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; }
.ctx-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); font-weight: 500; padding: 4px 8px 4px 4px; border-radius: 7px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-back:hover { color: var(--ink); background: var(--panel-3); }
.ctx-nav { display: inline-flex; align-items: center; gap: 4px; }
.shead { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.shead-t { flex: 1; min-width: 240px; }
.shead h1 { font-size: 28px; letter-spacing: -.025em; }
.shead-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.shead-m > * { display: inline-flex; align-items: center; gap: 6px; }
.shead-m a:hover { color: var(--ink); }
.shead-r { display: flex; gap: 8px; flex-wrap: wrap; }
.sstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 24px; overflow: hidden; }
.sstats > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.sstats > div + div { border-left: 1px solid var(--line); }
.sstats span { font-size: 12px; color: var(--ink-3); }
.sstats b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.tasks li a { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.tasks li + li a { border-top: 1px solid var(--line); }
.tasks li a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.tasks b { font-weight: 500; }
.tasks small { font-size: 12.5px; color: var(--ink-3); }
.task-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-4); flex: none; }
.task-dot.doing { border-color: var(--info); background: linear-gradient(90deg, var(--info) 50%, transparent 50%); }
.lastp-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lastp-h > div { display: flex; flex-direction: column; }
.lastp-h small { color: var(--ink-3); font-size: 12.5px; }
.evl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.evl li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; color: var(--ink-2); }
.evl li b { color: var(--ink); font-weight: 500; }
.evl li > .pill { justify-self: start; }
.evl-col li { grid-template-columns: 1fr; gap: 4px; }
.evl-col li > span:not(.pill) { display: flex; flex-direction: column; gap: 2px; }
.evl-col li .link { align-self: flex-start; font-size: 12.5px; }
.card-thread { border-color: #EADFD2; }
.thread { padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.thread + .thread { margin-top: 10px; }
.thread-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.thread-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.thread-tag .ic { color: var(--brand); }
.thread p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.thread .caveat { display: flex; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); line-height: 1.45; }
.thread .caveat .ic { margin-top: 2px; }
.caplist { display: flex; flex-direction: column; }
.caprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.caprow + .caprow { border-top: 1px solid var(--line); }

.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.act-grid aside .card + .card { margin-top: 16px; }
.threads { margin-bottom: 18px; }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.tl { position: relative; padding-left: 4px; }
.tl::before { content: ''; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-date { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 18px 0 8px 44px; }
.tl-e:first-child .tl-date { margin-top: 0; }
.tl-row { display: flex; gap: 14px; align-items: flex-start; position: relative; margin-bottom: 8px; }
.tl-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--panel); border: 2px solid var(--line-2); color: var(--ink-3); position: relative; z-index: 1; transition: transform .2s var(--ease); }
.tl-card { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, box-shadow .15s, opacity .2s; }
.tl-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.tl-k { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.tl-p { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; background: var(--panel-3); color: var(--ink-2); padding: 1px 7px; border-radius: 5px; }
.tl-t { font-weight: 500; margin-top: 3px; }
.tl-d { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.tl-open { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 4px 9px 4px 7px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); transition: all .15s; }
.tl-open:hover { color: var(--ink); border-color: var(--line-2); background: var(--panel); }
.tl-dificultad .tl-node { border-color: #E9C27F; color: var(--warn); background: var(--warn-50); }
.tl-dificultad .tl-k { color: var(--warn); }
.tl-uso .tl-node { border-color: var(--ok-200); color: var(--ok); background: var(--ok-50); }
.tl-uso .tl-k { color: var(--ok); }
.tl-uso .tl-card { border-color: var(--ok-200); }
.tl-refuerzo .tl-node { border-color: var(--brand-100); color: var(--brand-ink); background: var(--brand-50); }
.tl-refuerzo .tl-k { color: var(--brand-ink); }
.tl-feedback .tl-node { border-color: var(--violet-200); color: var(--violet); background: var(--violet-50); }
.tl-feedback .tl-k { color: var(--violet); }
.tl-practica .tl-node { border-color: var(--info-200); color: var(--info); background: var(--info-50); }
.tl-asignacion .tl-card, .tl-autonoma .tl-card { background: var(--panel-2); border-style: dashed; }
.tl-asignacion .tl-node, .tl-autonoma .tl-node { width: 28px; height: 28px; }
.tl-e.dim .tl-card { opacity: .35; }
.tl-e.dim .tl-node { opacity: .45; }
.tl-e.thread-on .tl-node { transform: scale(1.12); box-shadow: 0 0 0 4px var(--brand-50); }
.asl { display: flex; flex-direction: column; }
.asl li > a, .asl li > .asl-p { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; }
.asl li + li > a, .asl li + li > .asl-p { border-top: 1px solid var(--line); }
.asl li > a > span:first-child, .asl-p > span { display: flex; flex-direction: column; min-width: 0; }
.asl b { font-weight: 500; font-size: 13.5px; }
.asl small { font-size: 12px; color: var(--ink-3); }
.asl a:hover b { text-decoration: underline; }
.capd { padding: 12px 0; }
.capd + .capd { border-top: 1px solid var(--line); }
.capd-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.capd-h b { font-weight: 500; }
.capd-ev { display: flex; flex-wrap: wrap; gap: 6px; }
.evlink { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); transition: all .15s; }
.evlink:hover { border-color: var(--line-2); color: var(--ink); background: var(--panel); }
.pdet { padding: 14px 0; }
.pdet + .pdet { border-top: 1px solid var(--line); }
.pdet-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.pdet h4 { font-size: 14.5px; margin-top: 2px; }
.exl { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
.exl button { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); transition: all .15s; }
.exl button:hover { border-color: var(--line-2); background: var(--panel); }
.exl-d { font-size: 12px; color: var(--ink-3); grid-row: span 2; padding-top: 1px; }
.exl-w { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.exl-w b { font-weight: 500; color: var(--ok); }
.exl-w .ic { color: var(--ink-4); }
.exl small { font-size: 12px; color: var(--ink-3); }
.exl-big button { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.exl-big .exl-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exl-big .ic:last-child { color: var(--ink-4); }
.fbgroup { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; background: var(--panel); }
.fbgroup + .fbgroup { margin-top: 12px; }
.fbgroup header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fbgroup header b { font-weight: 600; }
.fbgroup header .link { margin-left: auto; }
.fb { padding: 10px 12px; border-radius: 10px; margin-top: 8px; border-left: 3px solid; }
.fb-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
.fb-h span { color: var(--ink-3); }
.fb p { font-size: 13.5px; margin-top: 4px; color: var(--ink-2); }
.fb-t { background: var(--violet-50); border-color: var(--violet); }
.fb-t .fb-h { color: var(--violet); }
.fb-p { background: var(--panel-3); border-color: var(--ink-3); }
.fb-a { background: var(--panel-2); border-color: #D99A2B; }
.fb-a .fb-h .ic { color: #D99A2B; }
.fb-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.fb-legend .lg { margin-left: 8px; }

/* ---------- resultados ---------- */
.rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.rhead-l { flex: 1; min-width: 300px; }
.rhead-l .eyebrow { margin-bottom: 8px; }
.rhead h1 { font-size: 26px; letter-spacing: -.025em; }
.rhead-obj { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink-2); margin-top: 8px; max-width: 720px; }
.rhead-obj .ic { margin-top: 3px; color: var(--brand); }
.rhead-m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.rhead-m > * { display: inline-flex; align-items: center; gap: 6px; }
.rhead-r { display: flex; gap: 8px; flex-wrap: wrap; }
.rstats { display: grid; grid-template-columns: repeat(4, minmax(0, 140px)) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; }
.rstat { display: flex; flex-direction: column; padding: 14px 18px; border-right: 1px solid var(--line); transition: background .15s; }
.rstat:hover { background: var(--panel-2); }
.rstat.on { background: var(--panel-3); box-shadow: inset 0 -2px 0 var(--ink); }
.rstat span { font-size: 12px; color: var(--ink-3); }
.rstat b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.rstat.hot b { color: var(--brand-ink); }
.rstat-bar { padding: 18px 20px 12px; display: flex; flex-direction: column; justify-content: center; }
.rstat-bar .legend { margin-top: 10px; }
.snap { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; }
.vsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.vsum-i { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; transition: all .15s; }
.vsum-i:hover { border-color: var(--line-2); }
.vsum-i.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.vsum-i span { font-size: 13px; font-weight: 500; }
.vsum-i small { font-size: 12px; color: var(--ink-3); }

/* ---------- revisión ---------- */
.page-review { max-width: 1440px; padding-top: 18px; }
.rv-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rv-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; }
.rv-who > div { display: flex; flex-direction: column; min-width: 0; }
.rv-who b { font-weight: 600; font-size: 15px; }
.rv-who small { color: var(--ink-3); font-size: 12.5px; }
.rv-nav { display: flex; align-items: center; gap: 10px; }
.rv-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.rv-col { min-width: 0; }
.rv-goal, .rv-fb { position: sticky; top: 16px; }
.rv-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.rv-h-r { margin-left: auto; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.rv-n { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; background: var(--ink); color: #fff; }
.goal-card { padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.goal-t { font-size: 15px; font-weight: 500; line-height: 1.45; margin: 6px 0 8px; letter-spacing: -.01em; }
.goal-ch { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.cond { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cond-r { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.cond-r > span:first-child { font-size: 12px; color: var(--ink-3); }
.audio-note { display: flex; gap: 7px; font-size: 12px; color: var(--ink-3); margin-top: 16px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2); line-height: 1.45; }
.audio-note .ic { margin-top: 1px; }
.rv-prod { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px 18px 20px; }
.prod-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-bottom: 14px; }
.prod-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-end; position: relative; animation: viewIn .35s var(--ease) both; }
.msg:nth-child(2) { animation-delay: .03s; } .msg:nth-child(3) { animation-delay: .06s; } .msg:nth-child(4) { animation-delay: .09s; } .msg:nth-child(n+5) { animation-delay: .12s; }
.msg-s { flex-direction: row-reverse; }
.bub { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; position: relative; }
.msg-a .bub { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg-s .bub { background: #23252B; color: #F4F3F0; border-bottom-right-radius: 5px; }
.who { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.msg-s .who { color: #A5A8AF; }
.tn { font-weight: 400; margin-left: 4px; }
.mtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mtag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 5px; }
.mtag-ev { background: rgba(80, 180, 130, .18); color: #8FD9B3; }
.mtag-sup { background: rgba(110, 150, 240, .2); color: #AFC5F7; }
.corr { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #FFF8EB; color: var(--ink); border-left: 3px solid #D99A2B; }
.corr-h { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--warn); }
.corr-b { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 4px 0 2px; font-size: 13.5px; }
.corr-b b { color: var(--ok); font-weight: 600; }
.corr-b .ic { color: var(--ink-4); }
.corr-n { font-size: 12px; color: var(--ink-2); }
.tcomment { display: flex; gap: 6px; margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: #EEEAFB; color: #3B2A86; font-size: 12.5px; }
.tcomment .ic { margin-top: 2px; }
.msg.hl .bub { box-shadow: 0 0 0 3px var(--brand), 0 8px 24px -8px rgba(245, 130, 32, .5); }
.msg-a.hl .bub { box-shadow: 0 0 0 3px var(--brand-100); }
.turn-cmt { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); background: var(--panel); border: 1px solid var(--line); opacity: 0; transition: opacity .15s; align-self: center; }
.msg:hover .turn-cmt, .turn-cmt:focus-visible { opacity: 1; }
.turn-cmt:hover { color: var(--violet); border-color: var(--violet-200); }
.msg-end { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); padding: 8px; }
.chat-compact .bub { font-size: 13.5px; }
.alma-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--brand-100); background: linear-gradient(180deg, #FFF8F1, var(--brand-50)); color: var(--brand-ink); font-weight: 600; font-size: 13.5px; margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; }
.alma-btn .ic { color: var(--brand); }
.alma-btn:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.alma-btn.thinking .ic { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fb-field { border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); transition: border-color .2s, box-shadow .2s, background .3s; overflow: hidden; }
.fb-field:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--panel-3); }
.fb-field.is-draft { border-color: var(--brand); background: #FFFBF6; box-shadow: 0 0 0 3px var(--brand-50); }
.fb-field.loading textarea { background: linear-gradient(90deg, transparent 0, rgba(245, 130, 32, .08) 50%, transparent 100%) 0 0 / 200% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.fb-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 0; font-size: 12.5px; font-weight: 500; color: var(--ink-2); flex-wrap: wrap; }
.fb-field textarea { display: block; width: 100%; border: 0; outline: 0; resize: vertical; padding: 8px 12px 12px; font-size: 13.5px; line-height: 1.55; background: transparent; min-height: 140px; }
.draft-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--brand-ink); background: var(--brand-50); padding: 2px 8px; border-radius: 6px; }
.draft-tag.edited { color: var(--violet); background: var(--violet-50); }
.tclist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tc { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; background: var(--violet-50); font-size: 12.5px; }
.tc span { flex: 1; color: #3B2A86; }
.pnote { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.pnote summary { display: flex; align-items: center; gap: 7px; padding: 11px 0; cursor: pointer; font-size: 13px; font-weight: 500; list-style: none; }
.pnote summary::-webkit-details-marker { display: none; }
.pnote textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; resize: vertical; font-size: 13px; margin-bottom: 8px; outline: none; }
.pnote textarea:focus { border-color: var(--ink-3); }
.pnote .btn { margin-bottom: 12px; }
.fb-acts { display: flex; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap; align-items: center; }
.fb-acts .btn { flex: 1; }
.done-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 13px; font-weight: 500; flex: 1; justify-content: center; }
.fb-foot { margin-top: 10px; }
.quote { margin: 10px 0 12px; padding: 10px 12px; border-left: 3px solid var(--line-2); background: var(--panel-2); border-radius: 0 8px 8px 0; font-size: 13.5px; }

/* ---------- dificultad ---------- */
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; font-size: 12.5px; color: var(--ink-3); }
.flow-s { display: inline-flex; align-items: center; gap: 6px; }
.flow-s b { width: 18px; height: 18px; border-radius: 5px; background: var(--panel-3); color: var(--ink-2); display: grid; place-items: center; font-size: 11px; }
.flow .ic { color: var(--ink-4); }
.plist { display: flex; flex-direction: column; margin: 0 -10px; }
.plist-a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; transition: background .15s; }
.plist-a:hover { background: var(--panel-2); }
.plist-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.plist-t b { font-weight: 500; }
.plist-t small { font-size: 12px; color: var(--ink-3); }
.plist-a > .ic { color: var(--ink-4); }

/* ---------- actividades ---------- */
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); transition: border-color .2s, box-shadow .2s; animation: viewIn .3s var(--ease) both; }
.pcard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.pcard-top { display: flex; align-items: center; gap: 8px; }
.pcard-top .mini-tag { margin-left: 0; }
.pcard h3 { font-size: 16px; }
.pcard-title { text-align: left; font-weight: 600; letter-spacing: -.015em; }
.pcard-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard-obj { display: flex; gap: 7px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.pcard-obj .ic { margin-top: 2px; color: var(--ink-4); }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-3); }
.pcard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.pcard-acts .btn-soft { margin-left: auto; }
.pdl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pdl dt { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.pdl dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pdl-ch { display: flex; align-items: center; gap: 10px; }
.pdl-ch > span { display: flex; flex-direction: column; }
.pdl-ch small { color: var(--ink-3); font-size: 12px; }
.pdl-tight { gap: 10px; }

/* ---------- constructor ---------- */
.page-builder { max-width: 1180px; }
.bhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.bhead h1 { font-size: 24px; letter-spacing: -.025em; margin-top: 4px; }
.stepper { display: flex; gap: 6px; }
.stepper li button { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; transition: all .2s; }
.stepper li button:disabled { cursor: default; opacity: .6; }
.st-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--panel-3); color: var(--ink-3); }
.st-t { display: flex; flex-direction: column; line-height: 1.25; }
.st-t b { font-size: 13px; font-weight: 600; }
.st-t small { font-size: 11.5px; color: var(--ink-3); }
.stepper .cur button { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.stepper .cur .st-n { background: var(--ink); color: #fff; }
.stepper .done .st-n { background: var(--ok-50); color: var(--ok); }
.origin { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--brand-50); border: 1px solid var(--brand-100); margin-bottom: 20px; color: var(--ink-2); font-size: 13.5px; animation: viewIn .4s var(--ease); }
.origin .ic { color: var(--brand); margin-top: 2px; }
.origin b { display: block; color: var(--ink); }
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.bgrid-2 { grid-template-columns: minmax(0, 1fr) 340px; }
.bside { position: sticky; top: 16px; }
.bstart { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); margin-bottom: 18px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.bstart > span { display: inline-flex; align-items: center; gap: 8px; }
.bsec { padding: 22px 0; border-top: 1px solid var(--line); }
.bsec:first-of-type { border-top: 0; padding-top: 0; }
.bsec h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 16px; }
.bsec h2 > span { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: var(--panel-3); color: var(--ink-2); }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.typeopt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); transition: all .18s var(--ease); }
.typeopt:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.typeopt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-2); }
.typeopt-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-3); color: var(--ink-2); margin-bottom: 2px; transition: all .18s; }
.typeopt.on .typeopt-ic { background: var(--ink); color: #fff; }
.typeopt b { font-size: 14px; }
.typeopt small { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.typeopt em { display: flex; gap: 5px; font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.typeopt em .ic { margin-top: 2px; }
.bf { margin-bottom: 16px; }
.bf-l { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.bf-h { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.in { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); outline: none; font-size: 14px; transition: border-color .15s, box-shadow .15s; resize: vertical; }
.in:focus { border-color: var(--ink-3); box-shadow: 0 0 0 3px var(--panel-3); }
.in-inline { width: auto; flex: 1; min-width: 180px; padding: 5px 10px; font-size: 13px; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.charopt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line); text-align: left; transition: all .15s; }
.charopt:hover { border-color: var(--line-2); }
.charopt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.charopt > span { display: flex; flex-direction: column; min-width: 0; }
.charopt b { font-size: 13px; font-weight: 600; }
.charopt small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.units { display: flex; flex-direction: column; gap: 8px; }
.unit { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); text-align: left; }
.unit > span { flex: 1; display: flex; flex-direction: column; }
.unit small { color: var(--ink-3); font-size: 12px; }
.unit.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-3); font-size: 13px; }
.dropzone:hover { border-color: var(--ink-3); color: var(--ink); }
.sups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sup { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: all .15s; }
.sup:hover { border-color: var(--line-2); }
.sup.on { background: var(--panel-2); border-color: var(--line-2); }
.sup input { position: absolute; opacity: 0; pointer-events: none; }
.sw { width: 32px; height: 19px; border-radius: 10px; background: var(--line-2); position: relative; flex: none; margin-top: 1px; transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.sup.on .sw { background: var(--ink); }
.sup.on .sw::after { transform: translateX(13px); }
.sup input:focus-visible + .sw { outline: 2px solid var(--brand); outline-offset: 2px; }
.sup > span:last-child { display: flex; flex-direction: column; }
.sup b { font-size: 13.5px; font-weight: 500; }
.sup small { font-size: 12px; color: var(--ink-3); }
.exprs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; }
.exprs .in-inline { border: 0; box-shadow: none; }
.bprev-mini { padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.mini-dl { margin: 10px 0 0; display: flex; flex-direction: column; gap: 9px; }
.mini-dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.mini-dl dt { color: var(--ink-3); }
.mini-dl dd { margin: 0; }
.bfoot { display: flex; gap: 8px; align-items: center; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .85), var(--panel) 40%); padding-bottom: 14px; z-index: 5; }
.phone-prev { max-width: 380px; padding: 18px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 14px; }
.pp-top { display: flex; gap: 12px; align-items: center; }
.pp-top > div { display: flex; flex-direction: column; }
.pp-top small { color: var(--ink-3); font-size: 12px; }
.pp-goal { padding: 12px 14px; border-radius: 14px; background: var(--brand-50); }
.pp-goal p { font-size: 14px; font-weight: 500; margin-top: 3px; }
.pp-ctx { font-size: 13px; color: var(--ink-2); }
.pp-sups { display: flex; gap: 6px; flex-wrap: wrap; }
.vintro { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; border: 1px dashed var(--brand-100); background: #FFFCF9; flex-wrap: wrap; }
.vintro h3, .vhead h3 { font-size: 15px; }
.vintro p { font-size: 13px; color: var(--ink-2); margin-top: 4px; max-width: 520px; }
.vhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.vgoal { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; margin-bottom: 12px; }
.vgoal .ic { color: var(--brand); }
.vcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; animation: viewIn .35s var(--ease); }
.vcol { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 12px; }
.vcol-apoyo { border-top: 3px solid var(--info); }
.vcol-estandar { border-top: 3px solid var(--ink-4); }
.vcol-reto { border-top: 3px solid var(--violet); }
.vcol-h { display: flex; justify-content: space-between; align-items: center; }
.vsups { display: flex; flex-direction: column; gap: 4px; }
.vsups li { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px; border-radius: 7px; font-size: 13px; color: var(--ink-3); }
.vsups li.on { color: var(--ink); }
.vsups li.changed { background: var(--panel-2); }
.vsups label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.vsups input { position: absolute; opacity: 0; pointer-events: none; }
.vchk { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; transition: all .15s; }
.vsups li.on .vchk { background: var(--ink); border-color: var(--ink); }
.vsups input:focus-visible + .vchk { outline: 2px solid var(--brand); outline-offset: 2px; }
.vdiff { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.vdiff.plus { background: var(--ok-50); color: var(--ok); }
.vdiff.minus { background: var(--warn-50); color: var(--warn); }
.vdemand { display: flex; gap: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.vdemand .ic { margin-top: 2px; color: var(--ink-3); }
.vex { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.vex small { width: 100%; font-size: 11.5px; color: var(--ink-3); }
.quicksel { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.mx-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.mx-bulk > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mx-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; max-height: 520px; overflow-y: auto; }
.mx { width: 100%; border-collapse: collapse; }
.mx th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.mx td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.mx tr:last-child td { border-bottom: 0; }
.mx tr.off td { opacity: .45; }
.mx-st { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.mx-st > span { display: flex; flex-direction: column; }
.mx-st input { width: 15px; height: 15px; accent-color: var(--ink); }
.mx-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--warn); }
.mx-c { text-align: center; width: 110px; }
.mx-inc { width: 70px; }
.mx-r { display: inline-grid; place-items: center; cursor: pointer; }
.mx-r input { position: absolute; opacity: 0; }
.mx-r span { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: all .15s; position: relative; }
.mx-r input:checked + span { border-width: 6px; }
.mx-apoyo input:checked + span { border-color: var(--info); }
.mx-estandar input:checked + span { border-color: var(--ink-2); }
.mx-reto input:checked + span { border-color: var(--violet); }
.mx-r input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.mx-r input:disabled + span { opacity: .4; }
.mini-sw { position: relative; display: inline-block; cursor: pointer; }
.mini-sw input { position: absolute; opacity: 0; }
.mini-sw span { display: block; width: 30px; height: 18px; border-radius: 9px; background: var(--line-2); position: relative; transition: background .2s; }
.mini-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.mini-sw input:checked + span { background: var(--ink); }
.mini-sw input:checked + span::after { transform: translateX(12px); }
.assign-card h3 { font-size: 15px; margin-bottom: 14px; }
.asum { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.asum li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.asum li > span:first-child { color: var(--ink-3); }
.asum b { font-weight: 500; text-align: right; }
.asum-v { flex-direction: column; }
.asum-v > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.vcount { display: inline-flex; align-items: center; gap: 5px; }
.vcount b { font-size: 13px; }
.assign-card .btn-lg { margin-bottom: 10px; }

/* simulación del alumno */
.modal-sim { width: min(820px, 96vw); padding: 0; display: grid; grid-template-columns: 280px 1fr; overflow: hidden; }
.sim { display: contents; }
.sim-side { padding: 24px; background: var(--panel-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sim-side h3 { font-size: 18px; }
.sim-vsw { margin: 6px 0; }
#simBox { padding: 20px; display: grid; place-items: center; background: radial-gradient(100% 80% at 50% 0%, #FFF4E9, #FBF9F6); }
.sim-phone { width: 340px; max-width: 100%; height: 600px; max-height: 76vh; border-radius: 34px; background: #FFFDFB; border: 8px solid #1C1D21; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; }
.sim-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 4px; font-size: 12px; font-weight: 600; }
.sim-pill { font-size: 10.5px; font-weight: 600; background: var(--ink); color: #fff; padding: 2px 8px; border-radius: 10px; }
.sim-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--line); }
.sim-head > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sim-head small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-goal { display: flex; gap: 6px; align-items: flex-start; margin: 10px 12px 0; padding: 8px 10px; border-radius: 12px; background: var(--brand-50); font-size: 12px; color: var(--brand-ink); font-weight: 500; }
.sim-goal .ic { margin-top: 1px; }
.sim-prep { margin: 8px 12px 0; padding: 8px 10px; border-radius: 10px; background: var(--info-50); color: var(--info); font-size: 12px; display: flex; gap: 6px; }
.sim-vocab { margin: 8px 12px 0; font-size: 12px; }
.sim-vocab summary { cursor: pointer; display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-weight: 500; }
.sim-vocab div { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 6px; }
.sim-chat { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sim-msg { max-width: 84%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.45; animation: viewIn .25s var(--ease); }
.sim-a { background: #F1EEE9; align-self: flex-start; border-bottom-left-radius: 5px; }
.sim-s { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.sim-h { align-self: center; font-size: 11.5px; color: var(--info); background: var(--info-50); border-radius: 10px; text-align: center; }
.sim-typing { display: flex; gap: 4px; padding: 12px; }
.sim-typing i, .think-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); animation: blink 1s infinite; }
.sim-typing i:nth-child(2), .think-dots i:nth-child(2) { animation-delay: .15s; }
.sim-typing i:nth-child(3), .think-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; transform: translateY(-2px); } }
.sim-sugs { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 6px; scrollbar-width: none; }
.sim-sug { flex: none; font-size: 12px; font-style: italic; padding: 5px 10px; border-radius: 14px; border: 1px solid var(--brand-100); background: var(--panel); color: var(--brand-ink); }
.sim-in { display: flex; gap: 6px; align-items: center; padding: 8px 10px 12px; border-top: 1px solid var(--line); }
.sim-in input { flex: 1; min-width: 0; height: 38px; border-radius: 19px; border: 1px solid var(--line-2); padding: 0 14px; outline: none; font-size: 13px; }
.sim-in input:focus { border-color: var(--brand); }
.sim-mic { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.sim-hint { width: 34px; height: 34px; border-radius: 50%; color: var(--info); background: var(--info-50); display: grid; place-items: center; flex: none; }

/* ---------- copilot ---------- */
.page-copilot { max-width: 1320px; padding-bottom: 24px; }
.cop-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; height: calc(100vh - 54px - 16px - 56px); height: calc(100dvh - 54px - 16px - 56px); min-height: 520px; }
.cop-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cop-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; gap: 12px; }
.cop-top h1 { display: flex; align-items: center; gap: 10px; font-size: 24px; letter-spacing: -.025em; }
.cop-top h1 .ic { color: var(--brand); }
.cop-scroll { flex: 1; overflow-y: auto; padding: 4px 4px 20px; min-height: 0; scroll-behavior: smooth; }
.cop-ctx { overflow-y: auto; }
.cop-ctx .card + .card { margin-top: 14px; }
.cop-welcome { max-width: 680px; margin: 6vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: viewIn .4s var(--ease); }
.cop-welcome h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -.01em; margin-top: 8px; }
.cop-welcome p { color: var(--ink-2); max-width: 520px; }
.cop-sug-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 18px; }
.cop-sug { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 13.5px; color: var(--ink-2); transition: all .15s; }
.cop-sug .ic { color: var(--brand); }
.cop-sug:hover { border-color: var(--line-2); box-shadow: var(--sh-2); color: var(--ink); transform: translateY(-1px); }
.cm { display: flex; gap: 10px; margin-bottom: 16px; animation: viewIn .3s var(--ease); }
.cm-u { justify-content: flex-end; }
.cm-u .cm-b { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 16px 16px 5px 16px; max-width: 75%; font-size: 14px; }
.cm-ctx { display: block; font-size: 11px; color: #A5A8AF; margin-top: 3px; }
.cm-a .cm-b { flex: 1; min-width: 0; }
.cm-think { display: inline-flex !important; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; padding-top: 4px; flex: none !important; }
.think-dots { display: inline-flex; gap: 4px; }
.ans { font-size: 14px; line-height: 1.6; color: var(--ink-2); padding-top: 3px; }
.ans > p { margin-bottom: 10px; }
.ans b { color: var(--ink); font-weight: 600; }
.ans a:not(.btn) { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ans a:not(.btn):hover { text-decoration-color: var(--ink); }
.ans-sec { margin: 10px 0; padding: 12px 14px 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.ans-sec-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.ans-registro .ans-sec-h { color: var(--info); }
.ans-dificultad .ans-sec-h { color: var(--warn); }
.ans-propuesta { border-color: var(--brand-100); background: #FFFBF7; }
.ans-propuesta .ans-sec-h, .ans-borrador .ans-sec-h { color: var(--brand-ink); }
.ans-borrador { border-color: var(--brand-100); }
.ans-list { display: flex; flex-direction: column; gap: 5px; }
.ans-list li { position: relative; padding-left: 14px; font-size: 13.5px; }
.ans-list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }
.ans-rank { counter-reset: r; display: flex; flex-direction: column; gap: 10px; }
.ans-rank li { counter-increment: r; position: relative; padding-left: 26px; font-size: 13.5px; }
.ans-rank li::before { content: counter(r); position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 5px; background: var(--warn-50); color: var(--warn); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ans-inline { display: flex; gap: 12px; margin-top: 3px; }
.ans-steps { counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.ans-steps li { counter-increment: s; position: relative; padding-left: 26px; font-size: 13.5px; }
.ans-steps li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ans-src { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.ans-src .ic { margin-top: 2px; }
.ans-src b { color: var(--ink-2); }
.ans-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ans-acts:empty { display: none; }
.ans-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ans-draft-h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ans-draft-h b { font-size: 15px; }
.ans .mini-dl > div { grid-template-columns: 110px minmax(0, 1fr); }
.ans .pill { vertical-align: 1px; }
.cop-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--sh-2); transition: border-color .15s, box-shadow .15s; }
.cop-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50), var(--sh-2); }
.cop-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; font-size: 14px; line-height: 1.5; padding: 7px 4px; max-height: 140px; background: none; }
.cop-send { width: 36px; height: 36px; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; transition: background .15s; }
.cop-send:hover { background: var(--brand-600); }
.cop-ctxchip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border-radius: 9px; background: var(--panel-3); color: var(--ink-2); font-size: 12.5px; flex: none; }
.cop-ctxchip select { appearance: none; border: 0; background: none; outline: none; font-weight: 500; font-size: 12.5px; cursor: pointer; max-width: 140px; }
.cop-ctx .cop-ctxchip { width: 100%; height: 34px; }
.cop-ctx .cop-ctxchip select { flex: 1; max-width: none; }
.covrow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 12.5px; padding: 5px 0; }
.covrow .dotsbar { grid-column: 2 / 4; color: var(--ok); }
.checklist { display: flex; flex-direction: column; gap: 7px; }
.checklist li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.checklist li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border-left: 1.75px solid var(--ok); border-bottom: 1.75px solid var(--ok); transform: rotate(-45deg); }
.drawer-copilot { display: flex; }
.drawer-copilot .drawer-in { display: flex; flex-direction: column; height: 100%; }
.cop-dhead { align-items: center !important; }
.cop-dt { display: flex; gap: 10px; align-items: center; }
.cop-dt h2 { font-size: 15px !important; }
.cop-dt small { font-size: 12px; color: var(--ink-3); }
.cop-dbody { flex: 1; overflow-y: auto; }
.cop-dbody .cop-welcome { margin-top: 20px; }
.cop-dbody .cop-welcome h2 { font-size: 28px; }
.cop-dbody .cop-sug-grid { grid-template-columns: 1fr; }
.cop-dfoot { padding: 12px 16px 16px; border-top: 1px solid var(--line); }

/* ---------- informes ---------- */
.rlist li a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; transition: background .15s; }
.rlist li + li a { border-top: 1px solid var(--line); }
.rlist li a:hover { background: var(--panel-2); }
.rlist li a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.rlist b { font-weight: 500; }
.rlist small { font-size: 12.5px; color: var(--ink-3); }
.rl-ic { color: var(--ink-3); }
.page-report { max-width: 1180px; }
.rp-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.rp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.rp-side { position: sticky; top: 16px; }
.rp-side .card + .card { margin-top: 14px; }
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 48px 56px 40px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 40px -24px rgba(0, 0, 0, .18); }
.doc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.doc-brand { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.doc-t { font-family: var(--serif); font-weight: 400; font-size: 40px; margin: 26px 0 18px; letter-spacing: -.01em; }
.doc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc-meta > div { display: flex; flex-direction: column; gap: 2px; }
.doc-meta span { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.doc-meta b { font-size: 13.5px; font-weight: 500; }
.doc-s { padding: 18px 0 6px; }
.doc-s-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.doc-s h2 { font-size: 16px; }
.doc-s h2 span { color: var(--ink-3); font-weight: 500; margin-right: 2px; }
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 6px; }
.src-alma { background: var(--brand-50); color: var(--brand-ink); }
.src-t { background: var(--violet-50); color: var(--violet); }
.doc-edit { width: 100%; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; margin-left: -10px; width: calc(100% + 20px); font-size: 14px; line-height: 1.65; resize: none; outline: none; color: var(--ink-2); background: transparent; transition: border-color .15s, background .15s; overflow: hidden; }
.doc-edit:hover { background: var(--panel-2); }
.doc-edit:focus { border-color: var(--line-2); background: var(--panel); box-shadow: 0 0 0 3px var(--panel-3); }
.doc-s[data-sec="observaciones"] .doc-edit { border: 1px dashed var(--violet-200); background: #FCFBFF; min-height: 80px; }
.doc-text { font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.doc-ev { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.doc-f { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.steps-v { display: flex; flex-direction: column; gap: 12px; }
.steps-v li { position: relative; padding-left: 24px; font-size: 13px; color: var(--ink-3); display: flex; flex-direction: column; }
.steps-v li::before { content: ''; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); }
.steps-v li.done { color: var(--ink); }
.steps-v li.done::before { background: var(--ok); border-color: var(--ok); }
.steps-v li.cur { color: var(--ink); font-weight: 500; }
.steps-v li.cur::before { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.steps-v small { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.vers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vers li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 7px; }
.vers li.cur { background: var(--panel-3); }
.vers a { font-weight: 600; }
.vers small { margin-left: auto; color: var(--ink-3); }
.print-root { display: none; }

/* ---------- panel lateral, modal, avisos ---------- */
.scrim { position: fixed; inset: 0; background: rgba(24, 25, 29, .22); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 70; backdrop-filter: blur(1px); }
body.drawer-open .scrim, body.mnav-open .scrim { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; width: 480px; max-width: calc(100vw - 16px); background: var(--panel); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--sh-pop); z-index: 80; transform: translateX(calc(100% + 24px)); transition: transform .32s var(--ease); display: flex; flex-direction: column; overflow: hidden; }
.drawer-wide { width: 620px; }
.drawer-copilot { width: 520px; }
body.drawer-open .drawer { transform: none; }
.drawer-in { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 18px; margin-top: 2px; }
.drawer-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.drawer-meta a { color: var(--ink); font-weight: 500; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.ev-goal { margin-bottom: 12px; }
.ev-goal p { font-size: 14px; font-weight: 500; margin-top: 2px; }
.ev-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ev-row { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.ev-row .pill { min-width: 120px; }
.ev-sup { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.capev { display: flex; flex-direction: column; gap: 14px; }
.capev-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.capev-h a { font-weight: 500; flex: 1; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.form input, .form select { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); outline: none; background: var(--panel); font-weight: 400; }
.form input:focus, .form select:focus { border-color: var(--ink-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.code-row { display: flex; gap: 8px; align-items: center; }
.code-row code { flex: 1; padding: 9px 12px; border-radius: 10px; background: var(--panel-3); font-size: 14px; letter-spacing: .06em; }
.checks { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.checks-2 { display: grid; grid-template-columns: 1fr 1fr; max-height: none; }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.check:hover { background: var(--panel-2); }
.check input { width: 15px; height: 15px; accent-color: var(--ink); }
.check small { color: var(--ink-3); margin-left: 4px; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(24, 25, 29, .3); opacity: 0; pointer-events: none; transition: opacity .2s; backdrop-filter: blur(2px); }
body.modal-open .modal { opacity: 1; pointer-events: auto; }
.modal-card { background: var(--panel); border-radius: 18px; box-shadow: var(--sh-pop); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; transform: translateY(8px) scale(.98); transition: transform .25s var(--ease); }
body.modal-open .modal-card { transform: none; }
.modal-sm { width: min(460px, 100%); }
.modal-md { width: min(600px, 100%); }
.modal-pad { padding: 22px 24px; }
.modal-pad h3 { font-size: 18px; margin-bottom: 8px; }
.modal-pad > p { font-size: 13.5px; line-height: 1.55; }
.modal-pad textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; outline: none; resize: vertical; }
.modal-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.modal-h h3 { margin: 4px 0 0; }
.modal-pad .muted.small { display: flex; gap: 6px; align-items: flex-start; margin-top: 14px; }
.about { text-align: left; }
.about img { border-radius: 12px; margin-bottom: 10px; }
.about-list { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.about-list li { font-size: 13px; color: var(--ink-2); padding-left: 16px; position: relative; }
.about-list li::before { content: '·'; position: absolute; left: 4px; font-weight: 700; }
.modal-cmdk { width: min(620px, 100%); align-self: start; margin-top: 12vh; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.cmdk-in input { flex: 1; border: 0; outline: 0; font-size: 16px; color: var(--ink); background: none; }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-list li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmdk-list li b { font-weight: 500; }
.cmdk-list li small { font-size: 12px; color: var(--ink-3); }
.cmdk-list li > .ic { color: var(--ink-4); opacity: 0; }
.cmdk-list li.sel { background: var(--panel-3); }
.cmdk-list li.sel > .ic { opacity: 1; }
.cmdk-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--panel-3); display: grid; place-items: center; color: var(--ink-3); }
.cmdk-empty { color: var(--ink-3); justify-content: center; cursor: default !important; }
.cmdk-foot { font-size: 12px; color: var(--ink-3); padding: 10px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }
.notifs li a { display: flex; gap: 10px; padding: 12px 14px; transition: background .15s; }
.notifs li + li a { border-top: 1px solid var(--line); }
.notifs li a:hover { background: var(--panel-2); }
.notifs li.unread a { background: #FFFBF6; }
.notifs li.unread .nt { font-weight: 500; }
.notifs li a > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.notifs small { font-size: 11.5px; color: var(--ink-3); }
.nk { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--panel-3); color: var(--ink-3); }
.nk-entrega { background: var(--brand-50); color: var(--brand-ink); }
.nk-fecha { background: var(--warn-50); color: var(--warn); }
.nk-asignacion { background: var(--ok-50); color: var(--ok); }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; box-shadow: var(--sh-pop); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .25s, transform .3s var(--ease); pointer-events: auto; max-width: min(560px, calc(100vw - 32px)); }
.toast.in { opacity: 1; transform: none; }
.toast-ic { color: #7FD3A8; }
.toast-act { margin-left: 6px; font-weight: 600; color: #FFC58F; padding: 4px 8px; border-radius: 7px; }
.toast-act:hover { background: rgba(255, 255, 255, .1); }
.sub-h { color: var(--ink); }

/* ---------- navegación móvil ---------- */
.mnav { display: none; }
.top-logo { border-radius: 7px; }

/* ---------- adaptable ---------- */
@media (max-width: 1240px) {
  .rv-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .rv-fb { grid-column: 1 / -1; position: static; max-width: 760px; }
  .rv-goal { position: static; }
}
@media (max-width: 1120px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .col-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .col-side .card + .card { margin-top: 0; }
  .col-side .card-quiet { grid-column: 1 / -1; }
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act-grid, .rp-layout, .bgrid, .bgrid-2 { grid-template-columns: minmax(0, 1fr); }
  .bside, .rp-side { position: static; }
  .cop-page { grid-template-columns: minmax(0, 1fr); }
  .cop-ctx { display: none; }
  .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rstat-bar { grid-column: 1 / -1; border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { display: block; height: auto; }
  .side { position: fixed; top: 0; left: 0; bottom: 0; width: 290px; background: var(--bg); box-shadow: var(--sh-pop); transform: translateX(-105%); transition: transform .3s var(--ease); z-index: 75; padding-bottom: 16px; }
  body.mnav-open .side { transform: none; }
  body.side-collapsed { --side-w: 252px; }
  body.side-collapsed .nav-label, body.side-collapsed .academy-t, body.side-collapsed .academy-chev, body.side-collapsed .nav-title, body.side-collapsed .nav-count { display: initial; }
  .collapse { display: none; }
  .frame { margin: 0; border: 0; border-radius: 0; overflow: visible; box-shadow: none; min-height: 100vh; }
  .top { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); padding: 0 8px 0 6px; gap: 8px; }
  .scroller { overflow: visible; }
  .only-m { display: inline-grid !important; }
  .top-logo.only-m { display: block !important; }
  .crumbs { font-size: 13px; }
  .crumbs > a, .crumbs > .crumb-sep { display: none; }
  .btn-ask span { display: none; }
  .btn-ask { width: 34px; padding: 0; }
  .demo-tag { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-width: 420px) {
  .demo-tag { font-size: 0; padding: 0; border: 0; }
  .demo-tag::before { content: 'Demo'; font-size: 10.5px; padding: 2px 7px; border: 1px dashed var(--line-2); border-radius: 999px; }
}
@media (max-width: 900px) {
  .page { padding: 20px 16px 110px; }
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 500; color: var(--ink-3); padding: 4px 0; position: relative; }
  .mnav a.active { color: var(--ink); }
  .mnav-cop .ic { color: var(--brand); }
  .mnav-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
  .mnav-badge[hidden] { display: none; }
  .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none; height: 88vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .toasts { bottom: 84px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
  .gsum .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pop-notifs { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; }
  .cop-page { height: calc(100dvh - 54px - 150px); }
  .page-copilot { padding-bottom: 90px; }
  .modal-sim { grid-template-columns: 1fr; }
  .sim-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px; }
  .sim-side p { display: none; }
  #simBox { padding: 12px; }
  .sim-phone { height: 520px; max-height: 62vh; }
  .hide-m { display: none; }
}
@media (max-width: 680px) {
  .display { font-size: 38px; }
  .lede { font-size: 15.5px; }
  .hello { margin-bottom: 22px; }
  .col-side { grid-template-columns: minmax(0, 1fr); }
  .gcards { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; }
  .card-hero { padding: 18px 16px 8px; }
  .hero-top { flex-direction: column; gap: 12px; }
  .hero-top .btn { width: 100%; }
  .hero-num { font-size: 18px; }
  .prow { grid-template-columns: auto minmax(0, 1fr) auto 14px; }
  .prow-x { display: none; }
  .arow { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px; }
  .arow-prog { grid-column: 1 / -1; grid-row: 2; }
  .arow-chev { display: none; }
  .kpis, .gsum .kpis, .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; }
  .kpi-v { font-size: 24px; }
  .capmap { grid-template-columns: minmax(0, 1fr); }
  .sstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sstats > div:nth-child(3) { border-left: 0; }
  .sstats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .shead h1 { font-size: 23px; }
  .shead .av { --s: 48px !important; }
  .shead-r { width: 100%; }
  .shead-r .btn { flex: 1; }
  .ghead-r { width: 100%; }
  .ghead-r .btn { flex: 1; }
  .rstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rstat:nth-child(2) { border-right: 0; }
  .rstat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .vsum { grid-template-columns: minmax(0, 1fr); }
  .search-in { min-width: 0; flex: 1 1 100%; }
  .filters .seg { max-width: 100%; }
  .types, .sups { grid-template-columns: minmax(0, 1fr); }
  .vcols { grid-template-columns: minmax(0, 1fr); }
  .stepper { width: 100%; }
  .stepper li { flex: 1; }
  .stepper li button { width: 100%; padding: 6px; justify-content: center; }
  .st-t small { display: none; }
  .bfoot { flex-wrap: wrap; }
  .bfoot .grow { display: none; }
  .bfoot .btn { flex: 1; }
  .mx-c { width: 64px; padding: 7px 4px !important; }
  .mx-c .vtag { font-size: 10px; padding: 0 5px; }
  .doc { padding: 26px 20px; }
  .doc-t { font-size: 32px; }
  .doc-meta { grid-template-columns: 1fr 1fr; }
  .rp-acts { width: 100%; }
  .rp-acts .btn { flex: 1; }
  .evl li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cop-sug-grid { grid-template-columns: minmax(0, 1fr); }
  .cop-welcome { margin-top: 2vh; }
  .cop-welcome h2 { font-size: 28px; }
  .cm-u .cm-b { max-width: 88%; }
  .cop-ctxchip select { max-width: 90px; }
  .bub { max-width: 88%; }
  .turn-cmt { opacity: 1; width: 26px; height: 26px; }
  .rv-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .rv-bar .ctx-back { max-width: 100%; align-self: flex-start; }
  .rv-who { min-width: 0; width: 100%; }
  .rv-who > div { flex: 1; }
  .rv-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-nav { width: 100%; justify-content: space-between; }
  .checks-2 { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .pcard-acts .btn-soft { margin-left: 0; }
  .lib { grid-template-columns: minmax(0, 1fr); }
  /* tablas → tarjetas */
  .tbl-cards thead { display: none; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
  .tbl-cards tr { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .tbl-cards tbody tr:last-child { border-bottom: 0; }
  .tbl-cards td { border: 0 !important; padding: 0; font-size: 13px; }
  .tbl-cards td:first-child { grid-column: 1 / -1; }
  .tbl-cards td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font-size: 11px; color: var(--ink-3); margin-bottom: 2px; }
  .tbl-cards td.ta-r { grid-column: 1 / -1; text-align: left; }
  .tbl-cards td.ta-r .btn { width: 100%; }
  .tbl-cards .row-acts { display: flex; width: 100%; }
  .tbl-cards .row-acts .btn { flex: 1; }
  .only-cards { display: block !important; }
}

/* ==========================================================================
   V2 · Rediseño premium
   Menos tarjetas, más jerarquía: bloques con borde suave para lo principal,
   secciones sin caja en las columnas laterales, una sola lista priorizada en
   Inicio y un diario cronológico en la ficha del alumno.
   ========================================================================== */
:root { --line-soft: #F0EDE8; --r-lg: 14px; }
.page { padding-top: 28px; }
h2 { letter-spacing: -.018em; }

/* navegación */
.nav-foot { margin-top: auto; padding: 8px 2px 0; }
.nav-reset { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); padding: 6px 8px; border-radius: 7px; transition: background .15s, color .15s; }
.nav-reset:hover { background: rgba(24, 25, 29, .045); color: var(--ink); }
body.side-collapsed .nav-foot { display: none; }

/* bloques genéricos */
.block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; }
.block + .block { margin-top: 18px; }
.block-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.block-h h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.block-h h3 { font-size: 14px; }
.side-block { padding: 2px 0 20px; }
.side-block + .side-block { border-top: 1px solid var(--line); padding-top: 18px; }
.side-quiet .muted.small { margin-top: 10px; line-height: 1.5; }

/* ---------- Inicio ---------- */
.hello { margin: 4px 0 26px; }
.display { font-size: 48px; }
.home-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
.attn { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.attn-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.attn-h h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.attn-n { min-width: 22px; height: 22px; border-radius: 11px; padding: 0 7px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--panel-3); color: var(--ink-2); }
.attn-list { display: flex; flex-direction: column; }
.attn-i { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 20px; transition: background .15s; }
.attn-i + .attn-i { border-top: 1px solid var(--line-soft); }
.attn-i:hover { background: #FCFBF9; }
.attn-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-ink); }
.attn-ic-due { background: var(--info-50); color: var(--info); }
.attn-ic-diff { background: var(--warn-50); color: var(--warn); }
.attn-ic-mute { background: var(--panel-3); color: var(--ink-3); }
.attn-k { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.attn-b h3 { font-size: 15.5px; font-weight: 600; margin-top: 3px; letter-spacing: -.012em; }
.attn-m { font-size: 13px; color: var(--ink-2); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attn-m b { font-weight: 600; }
.attn-m .avstack .av { box-shadow: 0 0 0 2px var(--panel); }
.attn-a { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.attn-a .btn { min-width: 150px; }
.attn-prog { margin-top: 10px; max-width: 360px; }
.attn-i .diff-ex { margin: 10px 0 0; }
.attn-lead { background: linear-gradient(180deg, #FFFBF6, var(--panel)); padding-top: 22px; padding-bottom: 22px; }
.attn-lead h3 { font-size: 19px; }
.attn-lead .attn-ic { width: 40px; height: 40px; border-radius: 12px; }
.attn-quiet h3 { font-size: 14.5px; font-weight: 500; }
.attn-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.person-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 4px; border-radius: 15px; background: var(--panel); border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.person-chip small { color: var(--ink-3); font-size: 11px; font-weight: 600; }
.person-chip:hover { border-color: var(--ink-3); box-shadow: var(--sh-1); }
.col-main > .block { margin-top: 22px; }
.cop-card { padding: 18px; border-radius: 16px; border: 1px solid var(--brand-100); background: radial-gradient(120% 100% at 100% 0%, #FFF3E7 0%, var(--panel) 62%); margin-bottom: 22px; }
.col-side .side-block:first-of-type { padding-top: 0; }
.gitem { padding: 9px 10px; }
.gitem-lvl { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--gc); background: color-mix(in srgb, var(--gc) 11%, white); flex: none; }
.qstats { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.qstats > div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.qstats dt { font-size: 13px; color: var(--ink-2); }
.qstats dd { margin: 0; font-weight: 600; font-size: 15px; }
.qstats dd small { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 3px; }

/* filas de actividad (corrige el desbordamiento en columnas estrechas) */
.arow { grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) 26px 16px; grid-template-areas: 'main prog badge chev'; }
.arow-main { grid-area: main; min-width: 0; } .arow-prog { grid-area: prog; min-width: 0; } .arow > .count-badge { grid-area: badge; } .arow > .arow-chev { grid-area: chev; }
@container (max-width: 620px) { .arow { grid-template-columns: minmax(0, 1fr) 26px 16px; grid-template-areas: 'main badge chev' 'prog prog prog'; } }

/* ---------- Grupo ---------- */
.kstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; background: var(--panel); }
.ks { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; min-width: 0; }
.ks + .ks { border-left: 1px solid var(--line); }
.ks > span:first-child { font-size: 12px; color: var(--ink-3); }
.ks b { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ks b small { font-size: 13px; color: var(--ink-3); font-weight: 400; margin-left: 3px; }
.ks > small { font-size: 12px; color: var(--ink-3); }
.ks-row { display: flex; align-items: center; gap: 8px; }
.ks-row small { font-size: 12px; color: var(--ink-3); }
.ks-link { transition: background .15s; }
.ks-link:hover { background: var(--panel-2); }
.ks .spark rect:last-child { fill: var(--brand); }
.gsum-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.drows { display: flex; flex-direction: column; }
.drow { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 18px 0; }
.drow + .drow { border-top: 1px solid var(--line); }
.drow:first-child { padding-top: 4px; }
.drow-n { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 14px; background: var(--warn-50); color: var(--warn); }
.drow-n b { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.drow-n span { font-size: 11px; font-weight: 500; margin-top: 3px; }
.drow-b h3 { font-size: 15.5px; margin: 3px 0 8px; }
.drow-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.diff-ex-btn { cursor: pointer; transition: border-color .15s, background .15s; }
.diff-ex-btn:hover { border-color: var(--line-2); background: var(--panel); }
.diff-ex-btn small { color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }
.ctable { display: flex; flex-direction: column; margin: 0 -10px; }
.crow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) 64px 150px 16px; gap: 14px; align-items: center; padding: 10px; border-radius: 10px; text-align: left; transition: background .15s; }
.crow + .crow { box-shadow: 0 -1px 0 var(--line-soft); }
.crow:hover { background: var(--panel-2); }
.crow-t { font-size: 13.5px; font-weight: 500; }
.crow-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.crow-bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.crow-n { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.crow .pill { justify-self: start; }
.amini-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; }
.amini { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; transition: background .15s; }
.amini:hover { background: var(--panel-2); }
.amini-t { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.amini-t b { font-weight: 500; font-size: 13.5px; }
.amini small { font-size: 12px; color: var(--ink-3); }
.prows-tight { border-top: 0; margin: 0 -12px; }
.prows-tight .prow { grid-template-columns: auto minmax(0, 1fr) 16px; }
.prows-tight .prow-x, .prows-tight .prow-d { display: none; }

/* ---------- Ficha del alumno ---------- */
.shead { margin-bottom: 18px; }
.sstats { background: var(--panel); }
.sstats > a { padding: 14px 18px; display: flex; flex-direction: column; gap: 1px; min-width: 0; transition: background .15s; }
.sstats > a + a { border-left: 1px solid var(--line); }
.sstats > a:hover { background: var(--panel-2); }
.sstats > a > span { font-size: 12px; color: var(--ink-3); }
.sstats > a > b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sstats > a > small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.block-thread .thread { background: var(--panel); }
.thread-tag { font-size: 14px; }
.tsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 6px 0 12px; position: relative; }
.tstep { position: relative; padding-top: 18px; }
.tstep::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line); }
.tstep::after { content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink-4); }
.tstep-dificultad::after { border-color: var(--warn); background: var(--warn-50); }
.tstep-refuerzo::after { border-color: var(--brand); background: var(--brand-50); }
.tstep-practica::after { border-color: var(--info); background: var(--info-50); }
.tstep-uso::after { border-color: var(--ok); background: var(--ok); }
.tstep-sin::after { border-style: dashed; }
.tstep > button, .tstep > div { display: flex; flex-direction: column; text-align: left; padding: 4px 12px 4px 0; border-radius: 8px; width: 100%; }
.tstep > button:hover b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.tstep-d { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.tstep b { font-size: 13px; font-weight: 600; }
.tstep small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.thread-sum { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.tasks li a { padding: 9px 0; }
.task-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--panel-3); color: var(--ink-3); }
.task-rev { background: var(--brand-50); color: var(--brand-ink); }
.task-doing { background: var(--info-50); color: var(--info); }
.tasks .arow-chev { margin-left: auto; }

/* diario */
.act-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.tl-filters { border-top: 0; padding-top: 0; }
.jr { position: relative; }
.j { display: grid; grid-template-columns: 54px 26px minmax(0, 1fr); gap: 0 12px; position: relative; padding-bottom: 14px; }
.j::before { content: ''; position: absolute; left: 78px; top: 4px; bottom: -4px; width: 2px; background: var(--line); }
.j:last-child::before { bottom: auto; height: 20px; }
.j-date { text-align: right; padding-top: 3px; display: flex; flex-direction: column; }
.j-date b { font-size: 13px; font-weight: 600; }
.j-date small { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }
.j-node { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line-2); color: var(--ink-3); position: relative; z-index: 1; margin-top: 1px; }
.j-practica .j-node { border-color: var(--info-200); color: var(--info); background: var(--info-50); }
.j-refuerzo .j-node { border-color: var(--brand-100); color: var(--brand-ink); background: var(--brand-50); }
.j-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 16px; transition: border-color .15s, box-shadow .15s, opacity .2s; min-width: 0; }
.j-card:hover { border-color: var(--line-2); }
.j-card-quiet { background: var(--panel-2); border-style: dashed; padding: 9px 14px; }
.j-card-teacher { background: #FFFBF6; border-color: var(--brand-100); }
.j-k { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.j-k .pill, .j-k .vtag { text-transform: none; letter-spacing: 0; height: 20px; font-size: 11px; }
.j-t { font-weight: 600; font-size: 14.5px; margin-top: 4px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.j-card-quiet .j-t { font-weight: 500; font-size: 13.5px; }
.j-d { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.js-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.js { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 10px; border-radius: 9px; font-size: 13px; }
.js > .ic { margin-top: 2px; }
.js b { font-weight: 600; }
.js .link { font-size: 12px; white-space: nowrap; }
.js-diff { background: var(--warn-50); } .js-diff > .ic { color: var(--warn); }
.js-ok { background: var(--ok-50); } .js-ok > .ic { color: var(--ok); }
.js-fb { background: var(--violet-50); } .js-fb > .ic { color: var(--violet); }
.js-note { background: var(--panel-3); } .js-note > .ic { color: var(--ink-3); }
.js-q s { color: var(--ink-3); }
.js-quote { color: var(--ink-2); }
.j-acts { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.j-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 4px 9px 4px 7px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); }
.j-toggle:hover { border-color: var(--line-2); color: var(--ink); }
.j-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }
.j-acts .j-link { margin-top: 0; }
.j-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.j-conv { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); max-height: 460px; overflow-y: auto; }
.j.dim .j-card { opacity: .35; }
.j.dim .j-node { opacity: .45; }
.j.on .j-node { box-shadow: 0 0 0 4px var(--brand-50); border-color: var(--brand); }
.j.on .j-card { border-color: var(--brand-100); }
.capgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.capgrid .capd { border-top: 1px solid var(--line); }
.capd-err { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--warn); }
.pdet { padding: 20px 22px; }
.pdet h3 { font-size: 16px; margin: 3px 0 4px; }
.pdet-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 14px; }
.exl-ok button { border-color: var(--ok-200); background: var(--ok-50); }
.exl-ok .exl-w { font-style: italic; }

/* ---------- Revisión ---------- */
.rv-sum { margin-top: 12px; font-size: 13px; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.rv-diffs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rv-diffs button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; background: var(--warn-50); border: 1px solid var(--warn-200); }
.rv-diffs b { font-size: 13px; font-weight: 600; color: var(--warn); }
.rv-diffs small { font-size: 12px; color: var(--ink-2); }
.alma-btn { flex-wrap: wrap; text-align: left; }
.alma-btn small { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: var(--brand-ink); opacity: .75; padding-left: 26px; margin-top: -4px; }
.fb-row { display: flex; gap: 8px; padding: 0 12px 12px; }
.fb-row .btn { flex: 1; }
.fbs { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 2px 8px; border-radius: 6px; background: var(--panel-3); }
.fbs-draft { color: var(--brand-ink); background: var(--brand-50); }
.fbs-dirty { color: var(--warn); background: var(--warn-50); }
.fbs-saved { color: var(--info); background: var(--info-50); }
.fbs-shared { color: var(--ok); background: var(--ok-50); }
.rv-done { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rv-done .done-tag { justify-content: flex-start; }
.auto-next { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.auto-next input { accent-color: var(--ink); width: 15px; height: 15px; }
.fb-foot { display: flex; gap: 6px; align-items: flex-start; }
@media (min-width: 1241px) and (min-height: 700px) {
  .page-review { padding-bottom: 16px; }
  .rv-grid { height: calc(100vh - 54px - 16px - 18px - 70px - 16px); }
  .rv-col { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .rv-goal, .rv-fb { position: static; }
  .rv-goal { padding-right: 6px; }
  .rv-fb { display: flex; flex-direction: column; }
  .rv-fb-scroll { flex: 1; overflow-y: auto; padding: 0 4px 4px 0; margin-right: -4px; scrollbar-width: thin; }
  .rv-done { flex: none; }
}

/* ---------- Constructor ---------- */
.bsec-lede { margin: -8px 0 16px; font-size: 13.5px; }
.types-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.typeopt { padding: 18px 16px; gap: 8px; }
.typeopt-st { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink); padding: 8px 10px; border-radius: 9px; background: var(--panel-2); width: 100%; line-height: 1.4; }
.typeopt-st span { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.typeopt.on .typeopt-st { background: var(--panel-3); }
.saved-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.saved-i { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.saved-i:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.saved-i.on { border-color: var(--ink); }
.saved-i b { font-size: 13.5px; font-weight: 600; }
.saved-i small { font-size: 12px; color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgrid-rev { grid-template-columns: minmax(0, 1fr) 300px; }
.stu-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); max-width: 560px; }
.pp-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-ctx { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.pp-sups { display: flex; flex-wrap: wrap; gap: 6px; }
.vintro { align-items: center; }
.vintro-ill { display: flex; flex-direction: column; gap: 4px; flex: none; }
.vtable-wrap { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; background: var(--panel); }
.vtable { width: 100%; border-collapse: collapse; min-width: 640px; }
.vtable th, .vtable td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.vtable tbody tr:last-child th, .vtable tbody tr:last-child td { border-bottom: 0; }
.vtable thead th { background: var(--panel-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vtable tbody th { text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; width: 170px; }
.vth { width: 30%; }
.vth small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin: 6px 0 8px; line-height: 1.35; min-height: 30px; }
.vth-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.vth-apoyo { box-shadow: inset 0 3px 0 var(--info); }
.vth-estandar { box-shadow: inset 0 3px 0 var(--ink-4); }
.vth-reto { box-shadow: inset 0 3px 0 var(--violet); }
.vc { position: relative; }
.vc.changed { background: #FCFBF8; }
.vc .vdiff { position: absolute; top: 50%; margin-top: -9px; left: 48px; }
.vtoggle { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: #fff; transition: all .15s; background: var(--panel); }
.vtoggle.on { background: var(--ink); border-color: var(--ink); }
.vtoggle:hover { border-color: var(--ink-3); }
.vt-text td { font-size: 12.5px; vertical-align: top; }
.vt-text td .chip { margin: 0 4px 4px 0; height: 22px; font-size: 11.5px; }
.vfree { display: block; font-size: 13px; margin-bottom: 2px; }
.mx-seg { width: 320px; }
.vseg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--panel-3); gap: 2px; }
.vseg-b { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; transition: background .15s, color .15s; }
.vseg-b:hover:not(:disabled) { color: var(--ink); }
.vseg-b:disabled { opacity: .4; cursor: default; }
.vseg-apoyo.on { background: var(--info-50); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-200); }
.vseg-estandar.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.vseg-reto.on { background: var(--violet-50); color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet-200); }
.mx tr.marked td { background: #FFFBF6; }

/* ---------- Copilot ---------- */
.ans-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.ans-follow > span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.cop-demo { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); margin-top: 8px; text-align: center; }
.cop-dfoot .cop-demo { margin-top: 6px; }

/* ---------- adaptable (V2) ---------- */
@media (min-width: 1241px) and (max-width: 1420px) {
  .page-review { padding-left: 24px; padding-right: 24px; }
  .rv-grid { grid-template-columns: 230px minmax(0, 1fr) 310px; gap: 14px; }
  .rv-prod { padding: 14px 12px 16px; }
  .rv-prod .bub { max-width: 90%; }
  .rv-prod .msg-a .av { display: none; }
  .rv-h-r { display: none; }
}
@media (max-width: 1240px) {
  .types-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saved-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crow { grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) 60px auto 16px; }
}
@media (max-width: 1120px) {
  .home-grid, .gsum-grid, .sgrid, .act-grid, .bgrid-rev { grid-template-columns: minmax(0, 1fr); }
  .col-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .col-side .cop-card { grid-column: 1 / -1; }
  .col-side .side-block + .side-block { border-top: 0; padding-top: 0; }
  .gsum-side, .sgrid-side { margin-top: 24px; }
}
@media (max-width: 900px) {
  .kstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks:nth-child(3) { border-left: 0; }
  .ks:nth-child(n+3) { border-top: 1px solid var(--line); }
  .attn-i { grid-template-columns: 36px minmax(0, 1fr); }
  .attn-a { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; padding-top: 0; }
  .pdet-cols, .capgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .display { font-size: 36px; }
  .col-side { grid-template-columns: minmax(0, 1fr); }
  .block { padding: 16px; }
  .attn-h { padding: 14px 16px; }
  .attn-i { padding: 16px; gap: 12px; grid-template-columns: 32px minmax(0, 1fr); }
  .attn-ic, .attn-lead .attn-ic { width: 32px; height: 32px; border-radius: 10px; }
  .attn-lead h3 { font-size: 17px; }
  .attn-a { grid-column: 1 / -1; }
  .attn-a .btn { flex: 1; min-width: 0; }
  .attn-a .link { width: 100%; justify-content: center; }
  .drow { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .drow-n { height: 56px; }
  .drow-n b { font-size: 22px; }
  .diff-act .btn { flex: 1 1 auto; }
  .crow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .crow-bar { grid-column: 1 / -1; grid-row: 2; }
  .crow-n { grid-row: 1; grid-column: 2; }
  .crow .pill, .crow > .ic { display: none; }
  .sstats > a:nth-child(3) { border-left: 0; }
  .sstats > a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .j { grid-template-columns: 42px 22px minmax(0, 1fr); gap: 0 8px; }
  .j::before { left: 60px; }
  .j-node { width: 22px; height: 22px; }
  .j-node .ic { width: 11px; height: 11px; }
  .j-card { padding: 11px 12px; }
  .js { grid-template-columns: 16px minmax(0, 1fr); }
  .js .link { grid-column: 2; justify-self: start; }
  .tsteps { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tstep { padding: 0 0 6px 22px; }
  .tstep::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .tstep::after { top: 4px; }
  .types-4, .saved-list { grid-template-columns: minmax(0, 1fr); }
  .mx-seg { width: auto; }
  .vseg-b { padding: 0 7px; font-size: 11px; }
  .mx td { padding: 7px 8px; }
  .mx-st .av { display: none; }
  .fb-row { flex-direction: column; }
  .kstrip .ks b { font-size: 21px; }
  .stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .stepper li button { flex-direction: column; gap: 3px; padding: 6px 2px; }
  .stepper .st-t b { font-size: 11.5px; }
  .attn-m { display: block; line-height: 1.6; }
  .attn-m .avstack { vertical-align: middle; margin-right: 6px; }
  .vtable-wrap { margin-left: -4px; margin-right: -4px; }
}

/* ---------- impresión del informe (V2) ---------- */
@media print {
  @page { size: A4; margin: 18mm 16mm 20mm; }
  .print-root .doc { font-size: 11pt; }
  .print-root .doc-t { font-size: 30pt; margin: 14pt 0 10pt; }
  .print-root .doc-h { padding-bottom: 10pt; }
  .print-root .doc-meta { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #ddd; }
  .print-root .doc-s h2 { font-size: 12.5pt; }
  .print-root .doc-text { color: #222; font-size: 10.5pt; line-height: 1.55; }
  .print-root .doc-f { font-size: 8.5pt; }
  .print-root .doc-s { break-inside: avoid-page; }
  .print-root .doc-sign { display: flex !important; }
}
.doc-sign { display: none; justify-content: space-between; gap: 40px; margin-top: 40px; font-size: 10pt; color: #555; }
.doc-sign div { flex: 1; border-top: 1px solid #bbb; padding-top: 6px; }

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- impresión ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; overflow: visible; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .doc { border: 0; box-shadow: none; padding: 0; }
  .print-root .pill { border: 1px solid #ccc; }
  .doc-s { break-inside: avoid; }
}