/* Pupitre — módulo perfil (login, onboarding, inicio, progreso, ajustes). Prefijo pf-. Sólo tokens de app.css. */

/* ---------- piezas compartidas ---------- */
.pf-ob [hidden],.pf-aj [hidden],.pf-graf [hidden]{display:none!important}
.pf-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(150deg,var(--brand),var(--brand-2));color:var(--on-brand)}
.pf-opc{font-size:.62em;font-weight:600;color:var(--muted);font-family:var(--f-body);letter-spacing:0;vertical-align:middle;background:var(--soft);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-left:4px}
label .pf-opc{font-size:11px;padding:1px 7px}
.pf-lbl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.pf-av-xl{width:56px;height:56px;border-radius:17px;font-size:19px;font-family:var(--f-head)}
.pf-empty{display:flex;flex-direction:column;align-items:center;gap:2px}
.pf-empty > svg{color:var(--muted);margin-bottom:8px;opacity:.8}
.pf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.pf-cols > section{min-width:0}
.pf-switch{width:44px;height:26px;border-radius:999px;background:var(--bar);border:1px solid var(--line);position:relative;flex:none;transition:background .2s}
.pf-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
[aria-checked="true"] > .pf-switch{background:var(--accent);border-color:var(--accent)}
[aria-checked="true"] > .pf-switch::after{transform:translateX(18px);background:var(--on-accent)}
.pf-colores{display:flex;flex-wrap:wrap;gap:10px}
.pf-colores button{width:34px;height:34px;border-radius:50%;border:0;background:var(--sw);box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line);transition:box-shadow .15s,transform .15s}
.pf-colores button:hover{transform:scale(1.06)}
.pf-colores button{position:relative}
.pf-colores button::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.pf-colores button[aria-checked="true"]{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--sw)}

/* ---------- 1) login (la pantalla de entrada está en entrada.css; aquí, piezas del modo demostración) ---------- */
#pf-nube:empty,#pf-locales:empty{display:none}
.pf-nube{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:16px;padding:12px 16px;min-height:62px;background:var(--accent);color:var(--on-accent);text-align:left}
.pf-nube:hover{background:var(--accent-2)}
.pf-nube .tx{flex:1;min-width:0}
.pf-nube .tx b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-nube .tx small{display:block;font-size:12.5px;opacity:.85}
.pf-nube-av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--on-accent) 20%,transparent)}
.pf-nube + .msg{margin-top:8px}
.pf-o{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;font-weight:600;margin-top:18px}
.pf-o::before,.pf-o::after{content:"";flex:1;height:1px;background:var(--line)}
.pf-buscando{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;padding:4px 2px}
.pf-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:pfspin .8s linear infinite}
@keyframes pfspin{to{transform:rotate(360deg)}}
.pf-cargando{opacity:.75;cursor:progress}
.pf-profs .pf-prof{display:flex;flex-direction:column}
.pf-prof-row{display:flex;align-items:center;min-width:0}
.pf-prof-row .li{flex:1}
.pf-prof .li .end{color:var(--muted)}
.pf-lock{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--soft);color:var(--ink-2)}
.pf-del{border:0;background:none;color:var(--muted);width:40px;height:40px;margin-right:6px;border-radius:10px;display:grid;place-items:center;flex:none;opacity:.6}
.pf-del:hover{opacity:1;background:var(--neg-soft);color:var(--neg)}
.pf-pinbox{display:flex;flex-direction:column;gap:8px;padding:2px 14px 14px 64px}
.pf-pinrow{display:flex;gap:8px}
.pf-pin{letter-spacing:.5em;font-size:18px;font-weight:700;max-width:150px;text-align:center}
.pf-pin::placeholder{letter-spacing:.35em;color:var(--muted);opacity:.6}
.pf-prof-msg{padding:0 14px 12px 64px}
.pf-shake{animation:pfshake .35s}
@keyframes pfshake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.pf-crear{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card)}
.pf-crear .pf-lbl{margin:0}
.pf-crear small.muted{font-size:12px}
.pf-crear .pf-pin{max-width:none;text-align:left}
.pf-nota{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.45;border-top:1px solid var(--line);padding-top:16px}
.pf-nota div{display:flex;gap:9px;align-items:flex-start}
.pf-nota svg{margin-top:1px;color:var(--ink-2)}
.pf-nota b{color:var(--ink-2);font-weight:600}

/* ---------- 2) onboarding ---------- */
.pf-ob{max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:22px;min-height:calc(100vh - 72px)}
.pf-ob-top{display:flex;align-items:center;gap:10px;font-size:18px}
.pf-ob-top .pf-mark{width:34px;height:34px;border-radius:10px}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf-step{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);min-width:0}
.pf-step i{display:block;height:5px;border-radius:999px;background:var(--bar)}
.pf-step[data-st="ok"] i,.pf-step[data-st="act"] i{background:var(--accent)}
.pf-step[data-st="act"]{color:var(--ink)}
.pf-step span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-ob-body{display:flex;flex-direction:column;gap:18px;flex:1;animation:viewIn .22s ease-out}
.pf-ob-h h1{font-size:30px;line-height:1.1;margin:4px 0 0;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.pf-ob-h p{margin:8px 0 0;max-width:62ch;font-size:15px}
.pf-ob-foot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.pf-ob-foot .msg{flex:1;min-width:0}
.pf-ob-foot .sp{display:none}
.pf-ob-foot [data-sig]{margin-left:auto}

.pf-etapas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border:1.5px solid var(--line);border-radius:18px;background:var(--card);min-height:150px;transition:border-color .15s,background .15s}
.pf-opt:hover{border-color:var(--accent)}
.pf-opt b{font-size:18px;margin-top:6px}
.pf-opt small{color:var(--muted);font-size:13.5px;line-height:1.45}
.pf-opt-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.pf-opt-ck,.pf-car-ck{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:transparent;background:var(--card)}
.pf-opt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pf-opt[aria-checked="true"] .pf-opt-ic{background:var(--accent);color:var(--on-accent)}
.pf-opt[aria-checked="true"] .pf-opt-ck{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pf-sub{display:flex;flex-direction:column;gap:10px}
.pf-sub:empty{display:none}
.pf-sub .flbl{font-size:13.5px;color:var(--ink);font-weight:600}
.pf-sems .chip{min-width:46px;justify-content:center}

.pf-voc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.pf-voc:hover{background:var(--soft)}
.pf-voc .ic-tile{background:var(--info-soft);color:var(--info)}
.pf-voc .tx{flex:1;min-width:0}
.pf-voc .tx b{display:block}
.pf-voc .tx small{color:var(--muted);font-size:13px}
.pf-cuenta-sel{font-size:13.5px}
.pf-cuenta-sel b{color:var(--ink)}
.pf-area{display:flex;flex-direction:column;gap:10px}
.pf-area-h{display:flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:15px;font-weight:600;margin:6px 0 0}
.pf-area-h i{width:10px;height:10px;border-radius:3px;background:var(--tint)}
.pf-cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pf-car{position:relative;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 44px 12px 12px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);min-width:0;transition:border-color .15s,background .15s}
.pf-car:hover{border-color:var(--tint)}
.pf-car .tx{min-width:0;flex:1}
.pf-car .tx b{display:block;line-height:1.25}
.pf-car .tx small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-car .pf-car-ck{top:50%;transform:translateY(-50%)}
.pf-car[aria-pressed="true"]{border-color:var(--tint);background:var(--tint-soft)}
.pf-car[aria-pressed="true"] .pf-car-ck{background:var(--tint);border-color:var(--tint);color:var(--card)}
.pf-car[aria-pressed="true"] .ic-tile{background:var(--tint);color:var(--card)}
.pf-principal{position:absolute;top:-9px;left:12px;display:none}
.pf-car[data-principal="true"] .pf-principal{display:inline-flex;box-shadow:0 0 0 2px var(--card)}

.pf-metas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pf-meta{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:20px 16px 16px;border:1.5px solid var(--line);border-radius:18px;background:var(--card)}
.pf-meta:hover{border-color:var(--gold)}
.pf-meta-v{font-size:36px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--gold);margin-bottom:8px}
.pf-meta-v small{font-size:14px;margin-left:4px;font-weight:600;letter-spacing:0}
.pf-meta b{font-size:15px}
.pf-meta small{font-size:12.5px}
.pf-meta-d{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);color:var(--ink-2);width:100%}
.pf-meta[aria-checked="true"]{border-color:var(--gold);background:var(--gold-soft)}
.pf-meta[aria-checked="true"] .pf-meta-d{border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.pf-rec{position:absolute;top:-10px;right:12px;box-shadow:0 0 0 2px var(--card)}

.pf-yo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start}
.pf-yo-prev{display:flex;align-items:center;gap:14px}
.pf-yo-prev b{display:block;font-size:19px;line-height:1.2;word-break:break-word}
.pf-resumen{display:flex;flex-direction:column;gap:14px;background:var(--soft)}
.pf-res-i{display:flex;gap:12px;align-items:flex-start}
.pf-res-i > svg{color:var(--accent);margin-top:2px}
.pf-res-i small{display:block;color:var(--muted);font-size:12px}
.pf-res-i b{font-weight:600;font-size:14px}

/* ---------- 3) inicio ---------- */
.pf-top{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px}
.pf-hero{gap:18px;padding:24px}
.pf-hero .deco,.pf-rhero .deco{color:var(--flame);opacity:.07}
.pf-hero .deco{top:auto;bottom:-46px;right:-34px}
.pf-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pf-racha{display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-racha .k svg,.pf-rhero .k svg{color:var(--flame)}
.pf-flame-n{color:var(--flame)}
.pf-flame-n[data-cero="true"]{color:var(--muted)}
.pf-rmsg{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13.5px}
.pf-metabox{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pf-ring{width:104px;height:104px}
.pf-ring > span{width:calc(100% - 16px);height:calc(100% - 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;color:var(--ink)}
.pf-ring > span b{font-size:26px;letter-spacing:-.02em}
.pf-ring > span small{font-size:11px;color:var(--muted);font-family:var(--f-body);font-weight:600}
.pf-ring > span svg{color:var(--pos)}
.pf-metabox > small{font-size:12px;font-weight:600}
.pf-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:420px}
.pf-dia{display:flex;flex-direction:column;align-items:center;gap:6px}
.pf-dia-l{font-size:12px;font-weight:700;color:var(--muted)}
.pf-dia-c{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1.5px solid var(--line)}
.pf-dia[data-on="true"] .pf-dia-c{background:var(--flame);border-color:var(--flame);color:var(--on-hot)}
.pf-dia[data-hoy="true"] .pf-dia-l{color:var(--ink)}
.pf-dia[data-hoy="true"][data-on="false"] .pf-dia-c{border:2px dashed var(--flame);background:var(--flame-soft)}
.pf-hero-acc{position:relative}
.pf-cont{max-width:100%;min-width:0}
.pf-cont span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pf-stats{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-stats .stat{flex:1}
.pf-stats .stat .v{font-size:18px;white-space:nowrap}
.pf-stats .stat .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-stats .stat > div:nth-child(2){flex:1}
.pf-ic-gold{color:var(--gold)!important;background:var(--gold-soft)!important}
.pf-ic-info{color:var(--info)!important;background:var(--info-soft)!important}
.pf-stats .stat .ic{background:var(--accent-soft)}
.bars.pf-bars-gold{color:var(--gold)}
.bars.pf-bars-info{color:var(--info)}
.pf-stats .bars i:last-child{box-shadow:0 0 0 1px var(--card)}
.pf-ict{width:38px;height:38px;border-radius:12px}
.li .end small{font-size:12px;white-space:nowrap}
.pf-wrap .li .tx b,.pf-wrap .li .tx small{white-space:normal}
.pf-wrap .li .tx b{line-height:1.3;margin-bottom:1px}
.pf-tono{background:var(--accent-soft)!important;color:var(--accent)!important}
.pf-tono[data-tono="flame"]{background:var(--flame-soft)!important;color:var(--flame)!important}
.pf-tono[data-tono="bad"]{background:var(--neg-soft)!important;color:var(--neg)!important}
.pf-tono[data-tono="info"]{background:var(--info-soft)!important;color:var(--info)!important}
.pf-tono[data-tono="gold"]{background:var(--gold-soft)!important;color:var(--gold)!important}

.pf-ruta{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pf-carcard{display:flex;flex-direction:column;gap:14px;padding:16px;min-width:0}
.pf-carcard-h{display:flex;align-items:center;gap:12px;min-width:0}
.pf-carcard-h .tx{flex:1;min-width:0}
.pf-carcard-h .tx b{display:block;font-family:var(--f-head);font-size:16px;font-weight:600;line-height:1.2}
.pf-carcard-h .tx small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-carcard-h .tag{align-self:flex-start}
.pf-carcard-p{display:flex;flex-direction:column;gap:8px}
.pf-carcard-n{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.pf-prog-tint i{background:var(--tint,var(--accent))}
.pf-prog-gold i{background:var(--gold)}
.pf-carcard-f{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);min-width:0}
.pf-carcard-f > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* semestre en curso, semestres aprobados y promedio */
.pf-acad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-acad-i{background:var(--soft);border-radius:12px;padding:9px 10px;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-acad-i small{font-size:11px;color:var(--muted);font-weight:600;line-height:1.25}
.pf-acad-i b{font-size:20px;font-weight:700;line-height:1.1;display:inline-flex;align-items:center;gap:5px;letter-spacing:-.01em}
.pf-acad-i b span{font-size:13px;color:var(--muted);font-weight:600;font-family:var(--f-body)}
.pf-acad-sem{background:var(--tint-soft,var(--accent-soft))}
.pf-acad-sem b{color:var(--tint,var(--accent))}
.pf-acad-sem b svg{width:16px;height:16px}
.nota.pf-nota-nd{color:var(--muted)}
.pf-semtrack{display:flex;gap:3px;align-items:center}
.pf-semtrack i{flex:1;height:7px;border-radius:999px;background:var(--bar);min-width:0}
.pf-semtrack i[data-st="ok"]{background:var(--pos)}
.pf-semtrack i[data-st="act"]{background:var(--info);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px color-mix(in srgb,var(--info) 45%,transparent)}
.pf-semtrack-lg i{height:10px}
.pf-rec-lock .ic-tile{background:var(--soft)!important;color:var(--muted)!important}
.pf-rec-lock .tx b{color:var(--ink-2)}
.pf-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;border-style:dashed;border-width:1.5px;color:var(--muted);text-align:center;padding:16px}
.pf-add:hover{background:var(--soft);color:var(--accent);border-color:var(--accent)}
.pf-add b{color:var(--ink);font-weight:600}
.pf-add small{font-size:12.5px}

.pf-areas11{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pf-area11{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:12px;align-items:center;text-align:left;padding:16px;min-width:0}
.pf-area11:hover{border-color:var(--tint,var(--accent));background:var(--soft)}
.pf-area11-n{min-width:0}
.pf-area11-n b{display:block;font-family:var(--f-head);font-weight:600;font-size:15.5px;line-height:1.2}
.pf-area11-n small{display:block;font-size:12px;color:var(--muted)}
.pf-area11-p{grid-column:1 / -1;display:flex;align-items:baseline;gap:6px}
.pf-area11-p .h{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pf-area11-p small{color:var(--muted);font-size:12.5px}
.pf-area11-p.pf-sin small{font-weight:600}
.pf-area11 .prog{grid-column:1 / -1;margin-top:-4px}
.pf-sim{background:var(--accent-soft);border-color:transparent}
.pf-sim .ic-tile{background:var(--accent);color:var(--on-accent)}
.pf-sim:hover{background:var(--accent-soft);border-color:var(--accent)}
.pf-sec2{margin-top:22px}
.banner.pf-sec2{flex-wrap:wrap}

/* ---------- 4) progreso ---------- */
.pf-prog-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.pf-rhero{gap:14px;padding:24px}
.pf-rhero-msg{margin:0;color:var(--ink-2);max-width:52ch}
.pf-rh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.pf-rh-stats small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.pf-rh-stats b{font-size:22px;font-weight:700;line-height:1}
.pf-rh-stats b span{font-size:13px;color:var(--muted);font-family:var(--f-body);font-weight:500}
.pf-snows{display:flex;gap:5px}
.pf-snows span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--muted);border:1px dashed var(--line)}
.pf-snows span[data-on="true"]{background:var(--info-soft);color:var(--info);border:1px solid transparent}
.pf-explica{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.5;position:relative}
.pf-explica p{margin:0}
.pf-explica b{color:var(--ink-2)}
.pf-explica svg{margin-top:2px}
.pf-nivel{display:flex;flex-direction:column;gap:16px}
.pf-nv-h{display:flex;align-items:center;gap:14px}
.pf-nv-h b{display:block;font-size:22px;line-height:1.1;font-weight:700}
.pf-nv-badge{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);font-size:28px;font-weight:700;border:1.5px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.pf-nv-n{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-top:8px}
.pf-nv-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.pf-nv-mini > div{background:var(--soft);border-radius:12px;padding:10px 12px;min-width:0}
.pf-nv-mini small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.pf-nv-mini b{font-size:18px;font-weight:700}

.pf-hm-wrap{overflow-x:auto;padding-bottom:2px}
.pf-hm{display:grid;grid-template-columns:18px repeat(20,minmax(10px,1fr));grid-template-rows:16px repeat(7,auto);gap:4px;max-width:620px}
.pf-hm i{aspect-ratio:1;border-radius:4px;background:var(--bar);display:block;min-width:0}
.pf-hm i[data-l="1"],.pf-hm-leg i[data-l="1"]{background:color-mix(in srgb,var(--accent) 30%,var(--bar))}
.pf-hm i[data-l="2"],.pf-hm-leg i[data-l="2"]{background:color-mix(in srgb,var(--accent) 55%,var(--bar))}
.pf-hm i[data-l="3"],.pf-hm-leg i[data-l="3"]{background:color-mix(in srgb,var(--accent) 80%,var(--bar))}
.pf-hm i[data-l="4"],.pf-hm-leg i[data-l="4"]{background:var(--accent)}
.pf-hm i[data-hoy="true"]{outline:2px solid var(--ink);outline-offset:1px}
.pf-hm i.pf-hm-x{background:none}
.pf-hm-m{grid-row:1;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;align-self:end}
.pf-hm-dl{grid-column:1;font-size:11.5px;color:var(--muted);font-weight:600;align-self:center}
.pf-hm-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.pf-hm-pie b{color:var(--ink)}
.pf-hm-leg{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.pf-hm-leg i{width:12px;height:12px;border-radius:3px;background:var(--bar);display:inline-block}
.pf-hm-leg i:first-child{margin-left:4px}.pf-hm-leg i:last-child{margin-right:4px}
.pf-hm-card{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px}
.pf-hm-main{min-width:0}
.pf-hm-main .pf-hm{max-width:560px}
.pf-wk-box{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line);padding-left:24px;min-width:0}
.pf-wk-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-wk-h h3{margin:0;font-size:15px;font-weight:600}
.pf-wk{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:150px}
.pf-wk-d{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%}
.pf-wk-d > span{font-size:11.5px;font-weight:700;color:var(--muted);height:16px}
.pf-wk-hoy > span{color:var(--ink)}
.pf-wk-bar{flex:1;width:100%;max-width:22px;display:flex;align-items:flex-end;background:var(--soft);border-radius:6px;overflow:hidden}
.pf-wk-bar i{display:block;width:100%;background:color-mix(in srgb,var(--gold) 55%,var(--bar));border-radius:6px 6px 0 0}
.pf-wk-bar i.ok{background:var(--gold)}
.pf-wk-fut .pf-wk-bar{background:none;border:1px dashed var(--line)}
.pf-wk-meta{position:absolute;left:0;right:0;border-top:1.5px dashed color-mix(in srgb,var(--gold) 70%,transparent);pointer-events:none;z-index:1}
.pf-wk-meta small{position:absolute;right:0;top:-17px;font-size:11.5px;font-weight:700;color:var(--gold);background:var(--card);padding:0 3px;border-radius:4px}
.pf-wk-p{margin:0;font-size:12.5px;line-height:1.45}
.pf-cong{margin-left:4px}

/* rendimiento académico */
.pf-rend{display:flex;flex-direction:column;gap:16px}
.pf-rend-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-rend-k{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--soft);min-width:0}
.pf-rend-k > div{min-width:0;display:flex;flex-direction:column}
.pf-rend-k b{font-size:26px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.pf-rend-k small{font-size:12px;color:var(--muted);font-weight:600;line-height:1.3}
.pf-rend-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--card);color:var(--accent);border:1px solid var(--line)}
.pf-rend-k:nth-child(2) .pf-rend-ic{color:var(--pos)}
.pf-rend-k:nth-child(3) .pf-rend-ic{color:var(--gold)}
.pf-rend-l{display:flex;flex-direction:column}
.pf-rend-l > * + *{border-top:1px solid var(--line)}
.pf-rend-c{display:flex;flex-direction:column;gap:10px;padding:14px 0}
.pf-rend-c:first-child{padding-top:2px}
.pf-rend-h{display:flex;align-items:center;gap:12px;min-width:0}
.pf-rend-h .ic-tile{width:40px;height:40px;border-radius:12px}
.pf-rend-h .tx{flex:1;min-width:0}
.pf-rend-h .tx b{display:block;font-family:var(--f-head);font-weight:600;font-size:15.5px;line-height:1.2}
.pf-rend-h .tx small{display:block;color:var(--muted);font-size:12.5px}
.pf-rend-prom{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pf-rend-prom small{font-size:11px;color:var(--muted);font-weight:600}
.pf-rend-prom b{font-size:24px;line-height:1.05}
.pf-rend-n{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pf-rend-n b{color:var(--ink)}
.pf-rend-ley{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600;padding-top:12px;border-top:1px solid var(--line)}
.pf-rend-ley span{display:inline-flex;align-items:center;gap:6px}
.pf-rend-ley i{width:18px;height:7px;border-radius:999px;background:var(--bar)}
.pf-rend-ley i[data-st="ok"]{background:var(--pos)}
.pf-rend-ley i[data-st="act"]{background:var(--info)}

.pf-logros{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pf-logro{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);min-width:0}
.pf-lg-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--soft);color:var(--muted)}
.pf-logro[data-ok="true"] .pf-lg-ic{background:var(--gold-soft);color:var(--gold)}
.pf-logro[data-ok="false"] .pf-lg-tx b,.pf-logro[data-ok="false"] .pf-lg-tx > small{opacity:.62}
.pf-logro[data-ok="false"]{background:var(--soft);border-style:dashed}
.pf-logro[data-ok="false"] .pf-lg-ic{background:var(--card)}
.pf-lg-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.pf-lg-tx b{font-weight:600;font-size:14px;line-height:1.3}
.pf-lg-tx > small{color:var(--muted);font-size:12.5px;line-height:1.4}
.pf-lg-f{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--gold);margin-top:4px}
.pf-lg-av{display:flex;align-items:center;gap:8px;margin-top:6px}
.pf-lg-av .prog{flex:1;height:5px;background:var(--card)}
.pf-lg-av small{font-size:11.5px;color:var(--muted);font-weight:600}

.pf-rank-off{display:flex;gap:14px;align-items:flex-start}
.pf-rank-off .ic-tile{background:var(--info-soft);color:var(--info)}
.pf-rank-off b{display:block;font-family:var(--f-head);font-size:15.5px;font-weight:600}
.pf-rank-off p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.pf-rank-yo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--muted);font-weight:600}
.pf-rank-yo b{font-size:20px;color:var(--gold)}
.pf-rk{padding:10px 14px}
.pf-rk .av{width:32px;height:32px;border-radius:10px;font-size:12px}
.pf-rk-pos{width:26px;text-align:center;font-weight:700;font-family:var(--f-head);color:var(--muted);flex:none}
.pf-rk-pos[data-pos="1"]{color:var(--gold)}
.pf-rk-pos[data-pos="2"],.pf-rk-pos[data-pos="3"]{color:var(--ink-2)}
.pf-rk-yo{background:var(--accent-soft)}
.pf-rk-fl{display:inline-flex;align-items:center;gap:2px;color:var(--flame);font-weight:600}
.pf-rk .end{flex-direction:column;align-items:flex-end;gap:0;line-height:1.15}
.pf-rk-xp{color:var(--ink);font-family:var(--f-head);font-size:15px}
.pf-rk .end small{font-size:11px}
.pf-rk .tx b .tag{vertical-align:1px;margin-left:4px}

.pf-evo{display:flex;flex-direction:column;gap:10px}
.pf-evo-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pf-evo-h small{display:block;font-size:12px;font-weight:600}
.pf-evo-h b{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em}
.pf-evo-h b span{font-size:14px;color:var(--muted);font-family:var(--f-body);font-weight:500;letter-spacing:0}
.pf-graf{position:relative;min-width:0;width:100%}
.pf-graf svg{display:block;max-width:100%;height:auto;overflow:visible}
.pf-g-grid{stroke:var(--line);stroke-width:1}
.pf-g-t{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.pf-g-v{fill:var(--ink);font-size:13px;font-weight:700;font-family:var(--f-head)}
.pf-g-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pf-g-area{fill:var(--accent);fill-opacity:.08;stroke:none}
.pf-g-pt{fill:var(--card);stroke:var(--accent);stroke-width:2}
.pf-g-hit{fill:transparent;cursor:pointer}
.pf-g-hit:hover + .pf-g-hit{fill:transparent}
.pf-g-tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:var(--card);padding:6px 10px;border-radius:10px;font-size:12.5px;pointer-events:none;white-space:nowrap;text-align:center;box-shadow:var(--shadow)}
.pf-g-tip small{display:block;opacity:.75;font-size:11px}

/* ---------- 5) ajustes ---------- */
.pf-aj{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.pf-aj-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.pf-aj-sec{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-aj-sec .sec-h{margin-bottom:0}
.pf-aj-yo{display:flex;align-items:flex-end;gap:14px}
.pf-aj-yo .field{flex:1}
.pf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;max-width:440px}
.pf-seg-sm{max-width:300px}
.pf-seg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.08)}
.pf-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;text-overflow:ellipsis}
.pf-aj select.input{appearance:auto;cursor:pointer}
.pf-aj-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.pf-aj-ayuda{font-size:12.5px;line-height:1.45}
.pf-ob-sem{align-items:flex-start}
.pf-ob-sem svg{color:var(--accent);margin-top:1px}
.pf-aj-metas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf-aj-metas button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:9px 11px;text-align:left;min-width:0}
.pf-aj-metas button b{font-size:15px;font-weight:700;color:var(--ink)}
.pf-aj-metas button small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pf-aj-metas button:hover{border-color:var(--gold)}
.pf-aj-metas button[aria-checked="true"]{border-color:var(--gold);background:var(--gold-soft)}
.pf-aj-metas button[aria-checked="true"] b{color:var(--gold)}
.pf-fila{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px 14px}
.pf-fila:hover{background:var(--soft)}
.pf-fila .tx{flex:1;min-width:0}
.pf-fila .tx b{display:block;font-weight:600}
.pf-fila .tx small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.pf-cta{display:flex;gap:14px;align-items:flex-start}
.pf-cta b{display:block;font-weight:600}
.pf-cta p{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.pf-cuidado{grid-column:1 / -1;border-color:color-mix(in srgb,var(--neg) 35%,var(--line))}
.pf-cuidado-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pf-cuidado-in > div{flex:1;min-width:240px}
.pf-cuidado h2{margin:0;font-size:17px;font-weight:600;color:var(--neg)}
.pf-cuidado p{margin:4px 0 0;font-size:13.5px;max-width:72ch}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pf-top,.pf-prog-top{grid-template-columns:minmax(0,1fr)}
  .pf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-stats .stat{flex-wrap:wrap;gap:10px 12px}
  .pf-stats .stat .ic{width:36px;height:36px}
  .pf-stats .stat .l{white-space:normal}
  .pf-stats .stat .bars{margin-left:0;width:100%}
  .pf-stats .stat .bars i{flex:1;width:auto}
  .pf-areas11{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-metas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-hm-card{grid-template-columns:minmax(0,1fr);gap:18px}
  .pf-wk-box{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}
  .pf-wk{max-width:420px;width:100%}
}
@media (max-width:900px){
  .pf-ob{min-height:calc(100vh - 46px)}
  .pf-cols,.pf-aj,.pf-yo{grid-template-columns:minmax(0,1fr)}
  .pf-etapas{grid-template-columns:minmax(0,1fr)}
  .pf-opt{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 44px 14px 14px;align-items:center}
  .pf-opt .pf-opt-ic{grid-row:1 / 3}
  .pf-opt b{margin-top:0;font-size:16px}
  .pf-opt-ck{top:50%;transform:translateY(-50%)}
  .pf-ob-h h1{font-size:24px}
}
@media (max-width:640px){
  .pf-stats{grid-template-columns:minmax(0,1fr)}
  .pf-stats .stat{flex-wrap:nowrap}
  .pf-stats .stat .bars{margin-left:auto;width:auto}
  .pf-stats .stat .bars i{flex:none;width:5px}
  .pf-hero,.pf-rhero{padding:18px}
  .pf-ring{width:88px;height:88px}
  .pf-ring > span b{font-size:21px}
  .pf-dia-c{width:32px;height:32px}
  .pf-hero-acc .btn{flex:1 1 100%}
  .pf-areas11{grid-template-columns:minmax(0,1fr)}
  .pf-area11{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:10px}
  .pf-area11-p{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;gap:0}
  .pf-area11 .prog{grid-row:2;margin-top:0}
  .pf-rh-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pf-rh-stats b{font-size:19px}
  .pf-nv-mini b{font-size:16px}
  .pf-aj-metas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-aj-yo{align-items:center}
  .pf-pinbox,.pf-prof-msg{padding-left:14px}
  .pf-cars{grid-template-columns:minmax(0,1fr)}
  .pf-logros{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pf-rend-top{gap:6px}
  .pf-rend-k{padding:10px;flex-direction:column;align-items:flex-start;gap:6px}
  .pf-rend-ic{width:30px;height:30px;border-radius:9px}
  .pf-rend-ic svg{width:16px;height:16px}
  .pf-rend-k small{font-size:11px}
  .pf-rend-k b{font-size:21px}
  .pf-rend-prom b{font-size:21px}
  .pf-acad{gap:6px}
  .pf-acad-i{padding:8px}
  .pf-acad-i small{font-size:11.5px}
  .pf-acad-i b{font-size:18px}
  .pf-logro{flex-direction:column;gap:8px;padding:12px}
  .pf-lg-ic{width:36px;height:36px;border-radius:11px}
  .pf-lg-tx b{font-size:13.5px}
  .pf-lg-tx > small{font-size:12px}
  .pf-ob-foot .btn{padding:10px 14px}
  .title .btn.soft{width:100%}
}
@media (max-width:420px){
  .pf-seg button{padding:7px 6px;font-size:13px}
  .pf-seg button svg{display:none}
  .pf-colores{gap:8px}
  .pf-colores button{width:36px;height:36px}
  .pf-colores button::after{inset:-4px}
  .pf-hm{gap:3px}
  .pf-hm-dl{font-size:11px}
}

/* entrar sin iniciar sesión */
.pf-invitado{display:flex;flex-direction:column;gap:8px}
.pf-invitado small{text-align:center;font-size:12.5px}

/* Asistente de bienvenida: sin omitir; "Siguiente" se habilita con una selección válida */
.pf-ob-salir{font-size:13px;color:var(--muted);font-weight:600}
.pf-ob-foot .pf-ob-hint{color:var(--muted);font-weight:500;font-size:12.5px}
.pf-grados .chip,.pf-sems .chip{min-width:52px;justify-content:center}