*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button{cursor:pointer;font-family:inherit}a{text-decoration:none;color:inherit}
/* ═══ TOKENS ═══ */
:root{
--g: #1f9350;
--gd: #007828;
--gf: #0a2e1a;
--gt: #eaf5ec;
--gs: #c8e6d0;
--coral: #D85A30;
--coral-d: #b84020;
--amber: #e8940a;
--page: #f0f2f0;
--surf: #ffffff;
--line: #e4e6e2;
--ink: #1c2422;
--ink2: #52615b;
--ink3: #8a9690;
--sh: 0 1px 8px rgba(20,30,25,.06);
--shm: 0 4px 18px rgba(20,30,25,.09);
--shl: 0 12px 36px rgba(20,30,25,.13);
--r: 12px;
--rl: 16px;
--rp: 999px;
--hn: 78px; /* navbar height */
--sw: 220px; /* sidebar width */
--sw-min: 64px; /* sidebar plegado, solo iconos */
--rpw: 272px; /* right panel width */
--head: 'Montserrat','Segoe UI',sans-serif;
--body: 'Inter','Segoe UI',sans-serif;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
--page:#0d1810;--surf:#132018;--line:#1e2e24;
--ink:#d8ead0;--ink2:#7fa888;--ink3:#4a6257;
--gt:#162419;--gs:#1c2e22;
--sh:0 1px 8px rgba(0,0,0,.25);--shm:0 4px 18px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
--page:#0d1810;--surf:#132018;--line:#1e2e24;
--ink:#d8ead0;--ink2:#7fa888;--ink3:#4a6257;
--gt:#162419;--gs:#1c2e22;
}
body{font-family:var(--body);color:var(--ink);background:var(--page);min-height:100vh}
/* ═══ SCREENS ═══ */
.screen{display:none;min-height:100vh;width:100%}
.screen.active{display:flex;flex-direction:column}
#screen-login.active,#screen-tutor.active{display:flex}
/* ═══ DEMO BAR ═══ */
.demo-bar{
position:fixed;bottom:0;left:0;right:0;z-index:500;
background:rgba(8,18,12,.95);backdrop-filter:blur(12px);
display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 16px;
}
.demo-bar span{color:#5fa875;font-family:var(--head);font-weight:700;font-size:.72rem;margin-right:4px}
.db{background:none;border:1px solid rgba(255,255,255,.14);color:#b0c4b8;
border-radius:var(--rp);padding:4px 13px;font-family:var(--head);font-size:.72rem;font-weight:700;transition:.15s}
.db:hover,.db.on{background:var(--g);border-color:var(--g);color:#fff}
/* ════════════════════════════════════
LOGIN
════════════════════════════════════ */
#screen-login{
background:linear-gradient(150deg,#07261a 0%,#007828 100%);
align-items:center;justify-content:center;padding:40px 16px 72px;
}
.lc{background:var(--surf);border-radius:22px;box-shadow:0 24px 60px rgba(5,50,25,.4);
width:100%;max-width:400px;padding:38px}
.lc-logo{text-align:center;margin-bottom:26px}
.lc-logoimg{display:block;margin:0 auto 18px;max-width:200px;height:auto}
.lc-title{font-family:var(--head);font-weight:900;font-size:1.45rem;color:var(--gd);margin-bottom:5px}
.lc-sub{font-size:.83rem;color:var(--ink2)}
.fl{margin-bottom:15px}
.fl label{display:block;font-weight:600;font-size:.75rem;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.fl input{width:100%;border:1.5px solid var(--line);border-radius:10px;
padding:10px 12px;font-family:var(--body);font-size:.9rem;color:var(--ink);
background:var(--page);outline:none;transition:.15s}
.fl input:focus{border-color:var(--g);background:var(--surf);box-shadow:0 0 0 3px rgba(31,147,80,.1)}
.fl-row{display:flex;justify-content:space-between;align-items:center}
.fl-row a{font-size:.75rem;color:var(--g);font-weight:600}
.btn-primary{width:100%;margin-top:8px;padding:12px;background:var(--coral);color:#fff;border:none;
border-radius:var(--rp);font-family:var(--body);font-weight:700;font-size:.92rem;
box-shadow:0 4px 16px rgba(216,90,48,.28);transition:.18s}
.btn-primary:hover{background:var(--coral-d);transform:translateY(-1px)}
.lc-foot{text-align:center;margin-top:16px;font-size:.78rem;color:var(--ink2)}
.lc-foot a{color:var(--g);font-weight:600}
/* ════════════════════════════════════
APP SHELL
════════════════════════════════════ */
.shell{display:flex;flex-direction:column;flex:1;width:100%}
/* ── NAVBAR ── */
.navbar{
height:var(--hn);background:var(--surf);border-bottom:1px solid var(--line);
display:flex;align-items:center;padding:0 20px;gap:14px;
position:sticky;top:0;z-index:100;
}
.nb-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.nb-logo-img{height:40px;width:auto;display:block}
.nb-search{width:260px;flex-shrink:0;position:relative}
.nb-search input{width:100%;background:var(--page);border:1.5px solid var(--line);
border-radius:var(--rp);padding:7px 14px 7px 36px;font-family:var(--body);
font-size:.83rem;color:var(--ink);outline:none;transition:.15s}
.nb-search input:focus{border-color:var(--g);background:var(--surf)}
.nb-search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.nb-search .si svg{width:15px;height:15px}
.nb-gap{flex:1}
.nb-actions{display:flex;align-items:center;gap:6px}
.ib{width:34px;height:34px;border-radius:var(--rp);border:none;background:none;
color:var(--ink2);display:flex;align-items:center;justify-content:center;
position:relative;transition:.15s}
.ib:hover{background:var(--gt);color:var(--g)}
.ib svg{width:17px;height:17px}
.ib .nd{width:7px;height:7px;border-radius:50%;background:var(--coral);
position:absolute;top:6px;right:6px;border:2px solid var(--surf)}
.nb-av{width:34px;height:34px;border-radius:50%;
background:linear-gradient(135deg,var(--g),var(--gd));
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:800;font-size:.78rem;font-family:var(--head);cursor:pointer}
/* ── BODY ROW ── */
.body-row{display:flex;flex:1;align-items:flex-start;width:100%}
/* ── SIDEBAR ── */
.sidebar{
width:var(--sw);flex-shrink:0;
background:var(--surf);border-right:1px solid var(--line);
position:sticky;top:var(--hn);height:calc(100vh - var(--hn));
overflow-y:auto;
display:flex;flex-direction:column;padding:12px 0 20px;
}
.sl{padding:14px 16px 5px;font-size:.65rem;font-weight:700;text-transform:uppercase;
letter-spacing:.08em;color:var(--ink3);font-family:var(--head)}
.ni{display:flex;align-items:center;gap:9px;
padding:8px 14px;margin:1px 8px;border-radius:9px;
font-size:.845rem;font-weight:500;color:var(--ink2);
border:none;background:none;width:calc(100% - 16px);text-align:left;transition:.14s;cursor:pointer}
.ni svg{width:17px;height:17px;flex-shrink:0;opacity:.65}
.ni:hover{background:var(--gt);color:var(--g)}
.ni:hover svg{opacity:1}
.ni.on{background:var(--gt);color:var(--g);font-weight:600}
.ni.on svg{opacity:1}
.ni .nbadge{margin-left:auto;background:var(--coral);color:#fff;
border-radius:var(--rp);padding:1px 6px;font-size:.62rem;font-weight:700}
.ni.coral-ni{color:var(--coral)}
.ni.coral-ni:hover,.ni.coral-ni.on{background:#fdeee8;color:var(--coral-d)}
.ni.coral-ni svg{opacity:1}
.sb-spacer{flex:1}
/* Plegado del sidebar. El boton nace APAGADO y solo lo enciende la @media de
escritorio del final del fichero: en tablet y movil el sidebar es un cajon
y plegarlo no significa nada. */
.sb-toggle{display:none}
/* Salto al indice de lectura: solo en movil, donde el panel queda debajo del
contenido. Nace apagado; lo enciende la @media del final del fichero. */
.lec-ir-idx{display:none}
.sb-discover{margin:10px 10px 4px;border-radius:10px;
background:linear-gradient(135deg,#0a2e1a 0%,#07431f 100%);
padding:11px 12px;overflow:hidden}
.sb-discover-hd{font-family:var(--head);font-weight:800;font-size:.6rem;
text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);
margin-bottom:8px;display:flex;align-items:center;gap:5px}
.sb-discover-hd svg{width:10px;height:10px;flex-shrink:0}
.sb-ditem{display:flex;align-items:center;gap:7px;padding:5px 6px;margin:2px -4px;
border-radius:7px;cursor:pointer;transition:.14s;text-decoration:none}
.sb-ditem:hover{background:rgba(255,255,255,.1)}
.sb-ditem-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sb-ditem-name{font-family:var(--head);font-weight:700;font-size:.72rem;
color:rgba(255,255,255,.82);line-height:1.2}
.sb-ditem-tag{margin-left:auto;font-size:.55rem;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;padding:2px 5px;border-radius:20px;white-space:nowrap}
.sb-jpc{padding:8px 14px;margin:0 8px 6px;display:flex;align-items:center;gap:8px}
.sb-jpc img{width:28px;height:28px;object-fit:contain}
.sb-jpc-label{font-size:.62rem;font-weight:700;color:var(--ink3);font-family:var(--head);
text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.sb-user{padding:10px 14px;margin:0 8px;border-radius:9px;background:var(--gt);
display:flex;align-items:center;gap:9px}
.su-av{width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,var(--g),var(--gd));
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:800;font-size:.74rem;font-family:var(--head);flex-shrink:0}
.su-name{font-weight:700;font-size:.8rem}
.su-role{font-size:.7rem;color:var(--ink3)}
.su-more{margin-left:auto;color:var(--ink3);font-size:.95rem;line-height:1}
/* ── CONTENT + RIGHT ── */
/* ── .cr en GRID, no en flex ─────────────────────────────────────────────
Con flex + flex-wrap el footer caia en una segunda linea que empieza
DESPUES de la columna mas alta, y el panel derecho suele ser mas alto que
el contenido: de ahi el hueco en blanco (medido: contenido acababa en 608,
panel en 894, footer en 912).
En grid el panel ocupa su columna abarcando TODAS las filas (grid-row 1/-1),
asi que el alto de la fila 1 lo marca solo el contenido y el footer cae
inmediatamente debajo de la ultima tarjeta.
La columna 2 es 'auto': si no hay panel (las otras 4 vistas) colapsa a 0 y
el contenido ocupa todo el ancho.
OJO: #view-curso y #view-actividad son display:contents, asi que .content y
.rp son items del grid aunque en el DOM sean nietos; por eso los selectores
son de descendencia y no de hijo directo. */
.cr{display:grid;grid-template-columns:1fr auto;align-items:start;flex:1;min-width:0}
.cr .content,
.cr .campus-view{grid-column:1}
/* 'span 2' y no '1 / -1': -1 apunta a la ultima linea de la rejilla
EXPLICITA, y aqui las filas son implicitas, asi que 1/-1 colapsaba a una
sola fila y el footer seguia cayendo debajo del panel. */
.cr .rp{grid-column:2;grid-row:1 / span 2}
.cr > .campus-footer{grid-column:1}
/* Modo lectura: hay una tercera columna (el indice) que JS inserta como primer
hijo de #view-actividad. Solo existe mientras el modo lectura esta montado. */
.cr:has(#lec-lateral){grid-template-columns:auto 1fr auto}
.cr:has(#lec-lateral) #lec-lateral{grid-column:1;grid-row:1 / span 2}
.cr:has(#lec-lateral) .content{grid-column:2}
.cr:has(#lec-lateral) .rp{grid-column:3;grid-row:1 / span 2}
.cr:has(#lec-lateral) > .campus-footer{grid-column:2}
/* El padding inferior de 60px existia para dar aire al final de la pagina.
Ahora debajo va la tarjeta del footer, que aporta su propio margen: si se
mantuviese, quedaria un hueco de 78px entre la ultima tarjeta y el footer. */
.content{flex:1;min-width:0;padding:22px 22px 0}
/* padding-top = 22 - 16 = 6px: alinea la primera card del panel con la LINEA
DE CABECERA del contenido. Sirve de base para las vistas de actividad, cuya
referencia es el borde superior de su banner. */
.rp{width:var(--rpw);flex-shrink:0;border-left:1px solid var(--line);
padding:6px 16px 40px;position:sticky;top:calc(var(--hn) + 16px);
align-self:flex-start;max-height:calc(100vh - var(--hn) - 32px);overflow-y:auto;
scrollbar-width:thin}
/* ════════════════════════════════════
COURSE HERO BANNER
════════════════════════════════════ */
.ch{
border-radius:var(--rl);overflow:hidden;position:relative;
background:linear-gradient(120deg,var(--coral) 0%,#6b2408 30%,#0a4020 65%,var(--gd) 100%);
padding:24px 28px;margin-bottom:18px;
display:flex;align-items:center;gap:20px;
}
.ch-bg{
position:absolute;right:16px;top:50%;transform:translateY(-50%);
font-family:var(--head);font-weight:900;font-size:5.5rem;letter-spacing:-.02em;
color:rgba(255,255,255,.055);white-space:nowrap;pointer-events:none;user-select:none;line-height:1;
}
.ch-left{flex:1;position:relative;z-index:1}
.ch-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
color:rgba(255,255,255,.55);margin-bottom:8px;font-family:var(--head)}
.ch-title{font-family:var(--head);font-weight:900;font-size:1.55rem;color:#fff;
line-height:1.15;margin-bottom:12px;text-wrap:balance}
.ch-pills{display:flex;flex-wrap:wrap;gap:6px}
.cpill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);
color:#fff;border-radius:var(--rp);padding:3px 11px;
font-size:.7rem;font-weight:700;font-family:var(--head);letter-spacing:.03em}
/* Donut circle progress */
.ch-donut{flex-shrink:0;position:relative;z-index:1;text-align:center}
.ch-donut svg{display:block}
.ch-donut .pct{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.ch-donut .pct-n{font-family:var(--head);font-weight:900;font-size:1.45rem;color:#fff;line-height:1}
.ch-donut .pct-l{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:rgba(255,255,255,.6);margin-top:2px;font-family:var(--head)}
/* ════════════════════════════════════
PROGRESS STRIP
════════════════════════════════════ */
.prog-strip{
background:var(--surf);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh);
padding:14px 18px;margin-bottom:18px;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.ps-bar-wrap{flex:1;min-width:120px}
.ps-bar{background:var(--gs);border-radius:999px;height:7px;overflow:hidden}
.ps-fill{background:var(--g);height:100%;border-radius:999px}
.ps-meta{display:flex;gap:16px;font-size:.78rem;color:var(--ink2);flex-wrap:wrap;margin-top:6px}
.ps-meta strong{color:var(--g);font-family:var(--head)}
.ps-title{font-family:var(--head);font-weight:800;font-size:.85rem;color:var(--ink);white-space:nowrap}
/* ════════════════════════════════════
MODULE UNITS
════════════════════════════════════ */
.unit{background:var(--surf);border-radius:var(--r);border:1px solid var(--line);
box-shadow:var(--sh);margin-bottom:10px;overflow:hidden}
.unit-hdr{
background:var(--gt);padding:11px 16px;
display:flex;align-items:center;gap:10px;cursor:pointer;transition:.14s;user-select:none;
}
.unit-hdr:hover{background:var(--gs)}
.un{width:24px;height:24px;border-radius:50%;background:var(--g);
display:flex;align-items:center;justify-content:center;
color:#fff;font-family:var(--head);font-weight:900;font-size:.7rem;flex-shrink:0}
/* MF badge */
.mf-pill{background:var(--g);color:#fff;border-radius:5px;
padding:2px 7px;font-size:.65rem;font-weight:800;font-family:var(--head);letter-spacing:.04em;flex-shrink:0}
.mf-pill.coral{background:var(--coral)}
.unit-hdr h4{font-family:var(--head);font-weight:800;font-size:.875rem;color:var(--gd);flex:1;line-height:1.25}
.unit-meta{font-size:.72rem;color:var(--ink2);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px}
.unit-chevron{color:var(--ink3);transition:.2s;flex-shrink:0}
.unit.open .unit-chevron{transform:rotate(180deg)}
/* El tope de alto lo pone eellUnitAlto() midiendo el contenido, y lo suelta al
acabar la transicion. Aqui NO hay ningun max-height para el estado abierto:
el 900px que habia era un numero a mano que cortaba los modulos largos en
movil (medido: 1274px de contenido contra 900 de caja). */
.unit-body{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .32s ease}
/* Activity row */
.ar{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.ar:last-child{border-bottom:none}
.ar-thumb{font-size:0;
width:40px;height:40px;border-radius:9px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:1.1rem;
background:var(--page);overflow:hidden;
}
.ar-thumb.v{background:#fff8e1}
.ar-thumb.d{background:#e3f2fd}
.ar-thumb.q{background:#f3e5f5}
.ar-thumb.t{background:#fce4ec}
.ar-thumb.s{background:var(--gt)}
.ar-thumb.z{background:#e8f5e9}
.ar-thumb.f{background:#fdf0e4}
.ar-thumb.e{background:#fdf6e0}
.ar-thumb.a{background:#e8eef9}
.ar-thumb.l{background:#fce7ef}
.ar-info{flex:1;min-width:0}
.ar-name{font-weight:600;font-size:.855rem;color:var(--ink);line-height:1.3}
.ar-sub{font-size:.73rem;color:var(--ink3);margin-top:1px}
.ar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Type pills */
.tp{border-radius:5px;padding:2px 8px;font-size:.65rem;font-weight:800;font-family:var(--head);white-space:nowrap}
.tp-scorm{background:var(--gt);color:var(--g)}
.tp-video{background:rgba(46,42,100,.09);color:#2E2A64}
.tp-pdf{background:rgba(14,53,54,.08);color:#0E3536}
.tp-lect{background:rgba(155,44,90,.10);color:#8E2751}
.tp-quiz{background:rgba(124,111,242,.1);color:#5a4ed4}
.tp-tarea{background:rgba(255,107,53,.1);color:#CC4415}
.tp-zoom{background:rgba(14,114,237,.09);color:#0a5aa0}
.tp-foro{background:#C25E00;color:#fff}
.tp-enlace{background:#F2B441;color:#5a4a10}
/* Duration */
.ar-dur{font-size:.72rem;color:var(--ink3);font-weight:600;white-space:nowrap}
/* Check circle (JPC-logo inspired) */
.arc{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;
display:flex;align-items:center;justify-content:center;transition:.15s}
.arc.done{background:var(--g);border-color:var(--g)}
.arc.done svg{display:block}
.arc svg{display:none;width:11px;height:11px}
/* ════════════════════════════════════
RIGHT PANEL CARDS
════════════════════════════════════ */
.rpc{background:var(--surf);border-radius:var(--rl);border:1px solid var(--line);box-shadow:var(--sh);padding:16px;margin-bottom:14px}
.rpc h4{font-family:var(--head);font-weight:800;font-size:.875rem;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:6px}
/* Mi progreso */
.mp-body{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.mp-ring{flex-shrink:0;position:relative}
.mp-ring svg{display:block}
.mp-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center}
.mp-ring-pct{font-family:var(--head);font-weight:900;font-size:1.3rem;color:var(--gd);line-height:1}
.mp-ring-sub{font-size:.52rem;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;color:var(--ink3);margin-top:2px}
.mp-stats{flex:1;display:flex;flex-direction:column;gap:7px}
.mp-stat{background:var(--page);border-radius:8px;padding:8px 10px;display:flex;
align-items:center;gap:8px}
.mp-stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mp-stat-info{flex:1;min-width:0}
.mp-stat-val{font-family:var(--head);font-weight:900;font-size:.92rem;color:var(--gd)}
.mp-stat-lbl{font-size:.65rem;color:var(--ink3);white-space:nowrap}
.mp-stat .mv{font-family:var(--head);font-weight:900;font-size:1.4rem;color:var(--g);line-height:1}
.mp-stat .ml{font-size:.7rem;color:var(--ink2);margin-top:2px}
.mp-stat .ml2{font-size:.64rem;color:var(--ink3);margin-top:1px}
.mp-bar{background:var(--gs);border-radius:999px;height:6px;overflow:hidden;margin-bottom:6px}
.mp-fill{background:var(--g);height:100%;border-radius:999px}
.mp-pct{font-size:.75rem;color:var(--g);font-weight:700;font-family:var(--head);margin-bottom:12px}
.mp-btn{width:100%;padding:9px;background:var(--coral);color:#fff;border:none;
border-radius:var(--rp);font-family:var(--body);font-weight:700;font-size:.82rem;
transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px}
.mp-btn:hover{background:var(--coral-d)}
/* Mis presenciales */
.ses-list{display:flex;flex-direction:column;gap:5px}
.ses-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;border-left:3px solid transparent;transition:background .15s}
.ses-item.done{border-left-color:var(--g);background:rgba(31,147,80,.04)}
.ses-item.current{border-left-color:var(--amber);background:rgba(232,148,10,.06)}
.ses-item.future{border-left-color:var(--line);background:transparent}
.ses-cal{min-width:42px;text-align:center;background:var(--page);border:1.5px solid var(--line);border-radius:7px;padding:4px 5px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.ses-item.done .ses-cal{border-color:var(--gs);background:var(--gt)}
.ses-item.current .ses-cal{border-color:rgba(232,148,10,.5);background:rgba(232,148,10,.07)}
.ses-day{font-family:var(--head);font-weight:800;font-size:.76rem;color:var(--ink);line-height:1.15}
.ses-item.done .ses-day{color:var(--gd)}
.ses-item.current .ses-day{color:#8a5500}
.ses-item.future .ses-day{color:var(--ink3)}
.ses-mon{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);margin-top:1px}
.ses-item.done .ses-mon{color:var(--g)}
.ses-item.current .ses-mon{color:#8a5500}
.ses-info{flex:1;min-width:0}
.ses-name{display:block;font-size:.77rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ses-item.done .ses-name{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(31,147,80,.35)}
.ses-item.future .ses-name{color:var(--ink3)}
.ses-st{display:block;font-size:.67rem;font-weight:600;margin-top:2px;letter-spacing:.01em}
.ses-st.done-st{color:var(--g)}
.ses-st.current-st{color:#8a5500}
.ses-st.future-st{color:var(--ink3)}
/* Una falta o una sesion sin registrar no se pintan como "pendiente": el color
las distingue de lo que aun no ha llegado. */
/* ── Popup de los eventos de un dia ── */
.cal-pop{position:fixed;inset:0;z-index:9998;background:rgba(20,30,25,.42);
display:flex;align-items:center;justify-content:center;padding:20px}
.cal-pop-caja{background:var(--surf);border-radius:var(--rl);box-shadow:var(--shm);
width:min(420px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.cal-pop-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 18px;border-bottom:1px solid var(--line)}
.cal-pop-dia{font-family:var(--head);font-weight:900;font-size:1.7rem;color:var(--gd);
line-height:1;margin-right:10px}
.cal-pop-mes{font-size:.78rem;color:var(--ink2);text-transform:capitalize}
.cal-pop-x{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--ink3);
cursor:pointer;padding:0 4px}
.cal-pop-x:hover{color:var(--ink)}
.cal-pop-lista{overflow-y:auto;padding:4px 6px 10px}
.cal-pop-lista .ev-item{border-bottom:1px solid var(--line)}
.cal-pop-lista .ev-item:last-child{border-bottom:0}
.ses-st.ses-st-falta{color:var(--coral)}
/* ── Calendario con datos reales ── */
/* Marcadores del dia: un punto por evento, coloreado por tipo. Se limitan a
tres para que no desborden la celda; el title lleva la lista completa. */
/* La maqueta YA tenia su punto de evento en .cal-day.has-event::after. En vez
de anadir un segundo mecanismo, se colorea ese: el tipo del evento llega en
la variable --cal-punto que pone el propio marcado. */
.cal-day.has-event{font-weight:800}
/* Boton de exportar a calendario, uno por evento. */
.ev-item{position:relative}
.ev-ics{flex-shrink:0;align-self:center;display:inline-flex;align-items:center;
justify-content:center;width:26px;height:26px;border-radius:8px;color:var(--ink3);
text-decoration:none;transition:background .14s,color .14s}
.ev-ics:hover{background:var(--gt);color:var(--gd)}
.ev-ics svg{width:14px;height:14px}
/* Lo ya hecho se apaga, no desaparece: sigue siendo informacion. */
.ev-hecho{opacity:.6}
.ev-hecho .ev-name{text-decoration:line-through;
text-decoration-color:rgba(31,147,80,.35)}
/* Estado vacio dentro de una tarjeta de eventos: la misma sangria que un item,
para que no parezca que se sale de la tarjeta. */
.ev-card > .eell-muted{padding:10px 14px 12px;margin:0}
.ses-pie{margin:7px 0 0;font-size:.67rem;color:var(--ink3);font-weight:600;
text-align:right;letter-spacing:.01em}
/* ════════════════════════════════════════════════════════════════════
PROXIMA SESION EN DIRECTO — vive en el SIDEBAR, no en el panel derecho.
Paleta azul clara (tono Zoom atenuado): tiene que leerse como informacion
util sin competir con el verde de marca ni con la navegacion. Por eso el
fondo es un azul muy claro y solo el boton de unirse va en azul saturado.
════════════════════════════════════════════════════════════════════ */
:root{
--zc:#eff5fd; /* fondo del widget: azul casi blanco */
--zc2:#e3edfb; /* segundo tono del degradado */
--zb:#cfe0f7; /* borde */
--zi:#14395e; /* texto principal */
--zi2:#57738f; /* texto secundario */
--zt:#dbe8f9; /* pastilla del tipo de sesion */
--zbtn:#1a6bb5; /* boton de unirse (azul Zoom) */
--zbtnh:#155c9e; /* su hover */
}
/* caja en el sidebar: respeta el margen lateral de las entradas .ni */
.sb-zoom{margin:10px 8px 14px}
.zoom-c{
border-radius:var(--rl);
background:linear-gradient(150deg,var(--zc),var(--zc2));
border:1px solid var(--zb);
padding:14px;position:relative;overflow:hidden;
}
.zoom-c::before{content:'';position:absolute;right:-18px;top:-18px;
width:80px;height:80px;border-radius:50%;background:rgba(26,107,181,.05)}
.z-eye{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
color:var(--zi2);margin-bottom:7px;font-family:var(--head);line-height:1.25;
align-items:flex-start}
.z-eye svg{width:13px;height:13px}
.z-title{font-family:var(--head);font-weight:800;font-size:.86rem;color:var(--zi);
margin-bottom:3px;line-height:1.3}
.z-time{font-size:.69rem;color:var(--zi2);display:flex;align-items:center;gap:4px;
margin-bottom:9px;white-space:nowrap}
.z-time svg{width:12px;height:12px}
.z-type{display:block;background:var(--zt);border-radius:9px;padding:5px 9px;
font-size:.63rem;font-weight:700;color:var(--zi);font-family:var(--head);
margin-bottom:11px;line-height:1.4;text-wrap:balance}
.z-btn{
width:100%;background:var(--zbtn);color:#fff;border:none;cursor:pointer;
border-radius:var(--rp);padding:9px 6px;font-weight:700;font-size:.78rem;
font-family:var(--head);line-height:1.2;
display:flex;align-items:center;justify-content:center;gap:7px;
box-shadow:0 2px 8px rgba(26,107,181,.22);transition:.15s;
}
.z-btn:hover{background:var(--zbtnh)}
.z-btn svg{width:15px;height:15px}
/* el hueco que queda libre en el panel derecho: preparado, sin contenido */
.rp-slot{background:var(--surf);border:1px solid var(--line);
border-radius:var(--rl);padding:16px;margin-bottom:14px}
/* Solicitar tutoría */
.tutor-btn{
width:100%;background:none;border:1.5px solid var(--zb);color:var(--zi);
border-radius:var(--rp);padding:8px 6px;font-weight:700;font-size:.72rem;
font-family:var(--head);cursor:pointer;line-height:1.2;
display:flex;align-items:center;justify-content:center;gap:6px;
margin-top:8px;transition:.15s;
}
.tutor-btn:hover{background:#fff;border-color:var(--zbtn);color:var(--zbtn)}
.tutor-btn svg{width:14px;height:14px}
/* ════════════════════════════════════
MODAL — SOLICITAR TUTORÍA
════════════════════════════════════ */
.modal-bg{
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;
display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-bg.open{display:flex}
.modal{background:var(--surf);border-radius:20px;box-shadow:var(--shl);
width:100%;max-width:440px;padding:28px;position:relative}
.modal h3{font-family:var(--head);font-weight:900;font-size:1.2rem;color:var(--gd);margin-bottom:4px}
.modal .m-sub{font-size:.83rem;color:var(--ink2);margin-bottom:22px}
.modal-close{
position:absolute;top:16px;right:16px;width:30px;height:30px;
border-radius:50%;border:none;background:var(--page);
color:var(--ink2);display:flex;align-items:center;justify-content:center;transition:.15s;
}
.modal-close:hover{background:var(--gs)}
.modal-close svg{width:14px;height:14px}
.mf2{margin-bottom:14px}
.mf2 label{display:block;font-weight:600;font-size:.75rem;color:var(--ink2);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.mf2 select,.mf2 input,.mf2 textarea{
width:100%;border:1.5px solid var(--line);border-radius:9px;
padding:9px 12px;font-family:var(--body);font-size:.875rem;color:var(--ink);
background:var(--page);outline:none;transition:.15s;resize:none;
}
.mf2 select:focus,.mf2 input:focus,.mf2 textarea:focus{border-color:var(--g);background:var(--surf)}
.m-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.m-note{font-size:.75rem;color:var(--ink3);margin-top:-8px;margin-bottom:14px}
.modal-actions{display:flex;gap:10px;margin-top:4px}
.btn-sec{flex:1;padding:10px;border:1.5px solid var(--line);border-radius:var(--rp);
background:none;color:var(--ink2);font-weight:600;font-size:.875rem;transition:.15s}
.btn-sec:hover{border-color:var(--ink2);color:var(--ink)}
.btn-pri{flex:2;padding:10px;border:none;border-radius:var(--rp);
background:var(--g);color:#fff;font-weight:700;font-size:.875rem;transition:.15s}
.btn-pri:hover{background:var(--gd)}
/* body{padding-bottom:50px} -- reservaba hueco para el .demo-bar fijo,
eliminado en la integracion: dejaba una franja clara bajo el gradiente. */
/* ════════════════════════════════════
CAMPUS VIEWS (Calendario, Materiales, etc.)
════════════════════════════════════ */
.campus-view{display:none;flex:1;flex-direction:column;padding:22px 22px 0;min-width:0}
.campus-view.active{display:flex}
.cv-hd{font-family:var(--head);font-weight:900;font-size:1.45rem;color:var(--ink);margin-bottom:4px;line-height:1.2}
.cv-sub{font-size:.85rem;color:var(--ink2);margin-bottom:20px}
/* Calendar */
.cal-wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.cal-main{flex:1;min-width:280px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.cal-nav-title{font-family:var(--head);font-weight:900;font-size:1rem;color:var(--ink)}
.cal-nav-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink2);display:flex;align-items:center;justify-content:center;transition:.13s}
.cal-nav-btn:hover{border-color:var(--g);color:var(--g)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:10px 12px 14px;gap:2px}
.cal-dow{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink3);text-align:center;padding:4px 0 8px;font-family:var(--head)}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
border-radius:8px;font-size:.82rem;font-weight:500;color:var(--ink2);
cursor:pointer;transition:.12s;position:relative}
.cal-day:hover:not(.empty):not(.today){background:var(--gt)}
.cal-day.empty{cursor:default}
.cal-day.today{background:var(--g);color:#fff;font-weight:700}
/* El punto de 4px de la maqueta se retira: era casi invisible. Lo sustituye
.cal-marca, un icono del tipo del evento con el mismo lenguaje que los de
Materiales. */
.cal-day{flex-direction:column;gap:4px}
.cal-num{line-height:1}
.cal-marca{display:inline-flex;align-items:center;gap:2px;border-radius:var(--rp);
padding:2px 6px;line-height:0}
.cal-marca svg{width:13px;height:13px}
.cal-marca i{font-style:normal;font-family:var(--head);font-weight:900;font-size:.6rem;
line-height:1}
/* Sobre el verde de hoy, la marca necesita su propio fondo para no perderse. */
.cal-day.today .cal-marca{background:rgba(255,255,255,.92) !important}
.cal-day.other-month{color:var(--ink3);opacity:.5}
.cal-day.past{color:var(--ink3)}
.cal-day.highlighted{background:var(--gt);color:var(--gd);font-weight:600}
/* Event sidebar */
.cal-aside{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
.ev-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh);overflow:hidden}
.ev-card-hd{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.ev-card-hd h4{font-family:var(--head);font-weight:800;font-size:.82rem;color:var(--ink);flex:1}
.ev-badge{background:var(--coral);color:#fff;border-radius:var(--rp);padding:2px 7px;font-size:.62rem;font-weight:700}
.ev-item{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.ev-item:last-child{border-bottom:none}
.ev-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0}
.ev-info{flex:1;min-width:0}
.ev-name{font-weight:600;font-size:.83rem;color:var(--ink);line-height:1.3}
.ev-date{font-size:.72rem;color:var(--ink3);margin-top:2px}
.ev-tag{display:inline-block;margin-top:4px;font-size:.62rem;font-weight:700;border-radius:4px;padding:1px 6px}
/* Materiales */
.mat-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mat-filter{display:flex;gap:4px;flex-wrap:wrap}
.mf-chip{padding:5px 13px;border-radius:var(--rp);border:1.5px solid var(--line);background:none;
font-family:var(--head);font-size:.72rem;font-weight:700;color:var(--ink2);cursor:pointer;transition:.13s}
.mf-chip:hover{border-color:var(--g);color:var(--g)}
.mf-chip.on{background:var(--g);border-color:var(--g);color:#fff}
.mat-search{flex:1;min-width:200px;position:relative}
.mat-search input{width:100%;background:var(--page);border:1.5px solid var(--line);
border-radius:var(--rp);padding:7px 14px 7px 34px;font-family:var(--body);
font-size:.83rem;color:var(--ink);outline:none;transition:.15s}
.mat-search input:focus{border-color:var(--g);background:var(--surf)}
.mat-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ink3)}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;
align-items:stretch}
.mat-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:14px;display:flex;flex-direction:column;gap:8px;transition:.14s;cursor:pointer}
.mat-card:hover{box-shadow:var(--shm);transform:translateY(-1px)}
.mat-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mat-card-icon svg{width:22px;height:22px}
/* El titulo es el nombre del material; se limita a tres lineas para que las
tarjetas de una misma fila no queden de alturas dispares. */
.mat-card-title{font-weight:700;font-size:.855rem;color:var(--ink);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* El nombre real del fichero es interno: se conserva por utilidad al descargar,
pero apagado y en una sola linea, sin competir con el titulo. */
.mat-card-file{font-size:.68rem;color:var(--ink3);font-family:ui-monospace,SFMono-Regular,
Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px}
.mat-card-meta{font-size:.72rem;color:var(--ink3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mat-card-tag{font-size:.62rem;font-weight:700;border-radius:4px;padding:1px 6px;margin-left:auto}
.mat-card-action{width:100%;margin-top:auto;padding:7px;border:1.5px solid var(--line);border-radius:8px;
background:none;font-size:.78rem;font-weight:600;color:var(--ink2);display:flex;align-items:center;justify-content:center;gap:5px;transition:.13s}
.mat-card-action:hover{border-color:var(--g);color:var(--g)}
.mat-card-action svg{width:13px;height:13px}
.mat-section-title{font-family:var(--head);font-weight:800;font-size:.85rem;color:var(--ink);
margin:16px 0 8px;display:flex;align-items:center;gap:6px}
.mat-section-title::after{content:'';flex:1;height:1px;background:var(--line)}
/* Calificaciones */
.grade-summary{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:var(--sh);padding:20px 22px;margin-bottom:18px;
display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gs-ring{flex-shrink:0;position:relative;text-align:center}
.gs-ring svg{display:block}
.gs-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gs-ring-score{font-family:var(--head);font-weight:900;font-size:1.6rem;color:var(--gd);line-height:1}
.gs-ring-max{font-size:.68rem;color:var(--ink3);font-weight:600;margin-top:1px}
.gs-info{flex:1}
.gs-info h3{font-family:var(--head);font-weight:900;font-size:1.1rem;color:var(--ink);margin-bottom:6px}
.gs-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.gs-pill{border-radius:var(--rp);padding:3px 11px;font-size:.72rem;font-weight:700;font-family:var(--head)}
.gs-pill.pass{background:var(--gt);color:var(--gd)}
.gs-pill.pend{background:rgba(232,148,10,.1);color:#8a6000}
.gs-stars{display:flex;gap:2px}
.gs-star{color:var(--amber);font-size:1.05rem}
.gs-star.empty{color:var(--line)}
.grade-table{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:var(--sh);overflow:hidden}
.gt-thead{display:grid;grid-template-columns:1fr 80px 80px 90px;padding:10px 16px;
background:var(--page);border-bottom:1px solid var(--line);
font-family:var(--head);font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.gt-row{display:grid;grid-template-columns:1fr 80px 80px 90px;padding:11px 16px;
border-bottom:1px solid var(--line);align-items:center;transition:.12s}
.gt-row:last-child{border-bottom:none}
.gt-row:hover{background:var(--page)}
.gt-name{font-weight:600;font-size:.855rem;color:var(--ink);line-height:1.3}
.gt-sub{font-size:.72rem;color:var(--ink3)}
.gt-score{font-family:var(--head);font-weight:900;font-size:.95rem;text-align:center}
.gt-score.pass{color:var(--gd)}
.gt-score.pend{color:var(--ink3)}
.gt-score.fail{color:var(--coral)}
.gt-date{font-size:.72rem;color:var(--ink3);text-align:center}
.gt-status{display:flex;justify-content:center}
.gts{border-radius:var(--rp);padding:2px 8px;font-size:.63rem;font-weight:700;font-family:var(--head);white-space:nowrap}
.gts.pass{background:var(--gt);color:var(--gd)}
.gts.pend{background:rgba(232,148,10,.1);color:#8a6000}
.gts.lock{background:var(--page);color:var(--ink3)}
.gts.fail{background:rgba(216,90,48,.1);color:var(--coral-d)}
/* Mi perfil */
.perfil-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:640px){.perfil-wrap{grid-template-columns:1fr}}
.pcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);box-shadow:var(--sh);padding:18px}
.pcard h4{font-family:var(--head);font-weight:800;font-size:.875rem;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.pcard h4 svg{width:15px;height:15px;color:var(--g)}
.profile-hero{background:linear-gradient(130deg,var(--gf) 0%,var(--gd) 100%);border-radius:var(--rl);
padding:22px 18px;display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ph-av{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.15);
border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:900;font-size:1.3rem;color:#fff;flex-shrink:0}
.ph-name{font-family:var(--head);font-weight:900;font-size:1.15rem;color:#fff;line-height:1.2}
.ph-role{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:3px}
.ph-id{font-size:.7rem;color:rgba(255,255,255,.45);margin-top:2px}
.pf-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.pf-row:last-child{border-bottom:none}
.pf-label{font-size:.72rem;font-weight:700;color:var(--ink3);text-transform:uppercase;
letter-spacing:.05em;min-width:90px;padding-top:1px;flex-shrink:0}
/* min-width:0 y overflow-wrap: sin ellos un valor de una sola palabra larga
(el correo, "israel2+eelltest@juventudparacristo.net") fija el min-content de
la celda, el flex:1 no puede encogerla y la fila se sale del ancho. En movil
eso eran 104px de scroll lateral, medidos: la fila llegaba a 494 en una
pantalla de 390. Se arregla donde nace, no en la rejilla. */
.pf-value{font-size:.875rem;color:var(--ink);font-weight:500;flex:1;
min-width:0;overflow-wrap:anywhere}
.pf-edit{font-size:.72rem;color:var(--g);font-weight:600;padding:1px 6px;border-radius:5px;
background:none;border:none;cursor:pointer;transition:.12s}
.pf-edit:hover{background:var(--gt)}
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
border-bottom:1px solid var(--line);font-size:.855rem;color:var(--ink)}
.notif-row:last-child{border-bottom:none}
.notif-row label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}
.notif-row .nl{flex:1}
.notif-row .ns{font-size:.73rem;color:var(--ink3);margin-top:1px}
.toggle-sw{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle-sw input{opacity:0;width:0;height:0;position:absolute}
.toggle-sw-track{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:.2s;cursor:pointer}
.toggle-sw input:checked + .toggle-sw-track{background:var(--g)}
.toggle-sw-track::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle-sw input:checked + .toggle-sw-track::after{left:calc(100% - 17px)}
.cert-card{background:linear-gradient(130deg,#07261a 0%,var(--gd) 100%);border-radius:var(--r);
padding:16px;display:flex;align-items:center;gap:12px;text-decoration:none;transition:.15s;cursor:pointer}
.cert-card:hover{opacity:.9}
.cert-icon{font-size:1.8rem;flex-shrink:0}
.cert-info{flex:1}
.cert-name{font-family:var(--head);font-weight:800;font-size:.875rem;color:#fff;line-height:1.3}
.cert-status{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:2px}
.cert-arrow{color:rgba(255,255,255,.5);font-size:1.1rem}
/* ── LANGUAGE TOGGLE ── */
.lang-toggle{display:flex;align-items:center;gap:2px;margin-right:2px;flex-shrink:0}
.lt-btn{padding:3px 8px;border-radius:var(--rp);border:1.5px solid var(--line);
background:none;font-family:var(--head);font-weight:800;font-size:.62rem;
color:var(--ink3);cursor:pointer;transition:.15s;letter-spacing:.06em}
.lt-btn:hover{border-color:var(--g);color:var(--g)}
.lt-btn.on{background:var(--g);border-color:var(--g);color:#fff}
/* ── CAMPUS FOOTER ── */
/* Footer GLOBAL: vive al final de .cr, fuera de #view-curso, y ocupa una
linea completa gracias al flex-wrap de .cr. Aparece en todas las vistas. */
/* Tarjeta como las del contenido: los valores son los mismos de .prog-strip
(var(--surf), var(--r), var(--sh), 1px solid var(--line)), no otros nuevos.
flex:1 1 100% (no 0 0) para que pueda encogerse y respetar los margenes.
Los 22px laterales son el padding lateral de .content, asi el borde cae en
la misma linea que las tarjetas "Tu progreso" y los modulos.
Va en la columna 1 del grid de .cr, asi que no hace falta reservar el ancho
del panel a mano: la propia columna ya lo excluye. */
.campus-footer{
background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);
padding:20px 22px;
margin:18px 22px 28px; /* 18px = el mismo hueco que .prog-strip deja bajo si */
}
/* (Ya no hace falta reservar el ancho del panel con un margen condicional:
el footer vive en la columna 1 del grid, que excluye la columna del panel.) */
.cf-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cf-brand{display:flex;align-items:center;gap:10px}
.cf-brand-img{height:26px;width:auto;opacity:.65;filter:grayscale(20%)}
.cf-tagline{font-size:.75rem;color:var(--ink3);line-height:1.4}
.cf-socials{display:flex;align-items:center;gap:8px}
.cf-soc-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
background:none;color:var(--ink3);display:flex;align-items:center;justify-content:center;
transition:.15s;cursor:pointer;text-decoration:none}
.cf-soc-btn:hover{border-color:var(--g);color:var(--g);background:var(--gt)}
.cf-soc-btn svg{width:14px;height:14px}
.cf-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.cf-accred{font-size:.68rem;color:var(--ink3);font-family:var(--head);font-weight:600;letter-spacing:.03em}
.cf-links-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cf-links-row a{font-size:.68rem;color:var(--ink3);font-weight:500;transition:.1s}
.cf-links-row a:hover{color:var(--g)}
/* Reportar un problema: mismo tono que el resto del pie, con un punto delante
para que se encuentre sin convertirlo en una llamada a la accion. */
.cf-reportar{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
color:var(--ink2)}
.cf-reportar::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--gs,#8fc7a5);flex-shrink:0}
.cf-reportar:hover{color:var(--gd)}
#soporte-modal .mf2 textarea{resize:vertical;min-height:96px}
#sop-contexto{line-height:1.5}
.cf-copy{font-size:.68rem;color:var(--ink3)}
.ar-thumb svg{width:18px;height:18px;opacity:.75}
.ar-thumb.v svg{color:#8B7400}
.ar-thumb.d svg{color:#1256a0}
.ar-thumb.s svg{color:var(--g)}
.ar-thumb.q svg{color:#5a4ed4}
.ar-thumb.z svg{color:#0a5aa0}
.ar-thumb.t svg{color:#a03010}
.ar-thumb.f svg{color:#C25E00}
.ar-thumb.e svg{color:#a07d1c}
.ar-thumb.a svg{color:#2b4f8c}
.ar-thumb.l svg{color:#8E2751}
/* ── Asistencia y desbloqueo progresivo (§16a) ── */
.tp-asis{background:#e8eef9;color:#2b4f8c}
/* Fila restringida: presente pero apagada, y sin cursor de "abrible". */
.ar-bloq{opacity:.62}
.ar-bloq .ar-name{color:var(--ink2);font-weight:600}
.ar-bloq-txt{color:var(--ink3);line-height:1.35}
.ar-bloq-txt strong{color:var(--ink2);font-weight:700}
.ar-candado{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:var(--rp);background:var(--page);
color:var(--ink3);flex-shrink:0}
.ar-candado svg{width:13px;height:13px}
.asis-bloq{display:flex;gap:13px;align-items:flex-start}
.asis-bloq svg{width:22px;height:22px;color:var(--ink3);flex-shrink:0;margin-top:2px}
.asis-bloq h4{font-family:var(--head);font-weight:800;font-size:.9rem;color:var(--ink);margin:0 0 5px}
.asis-bloq-por{font-size:.84rem;color:var(--ink2);line-height:1.5}
.asis-bloq-por strong{color:var(--ink);font-weight:700}
.asis-cab{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.asis-cab svg{width:30px;height:30px;color:#2b4f8c;flex-shrink:0}
.asis-cab h3{font-family:var(--head);font-weight:900;font-size:1.02rem;color:var(--ink);margin:0 0 4px}
.asis-cab p{margin:0;font-size:.85rem;color:var(--ink2);line-height:1.45}
.asis-pasos{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.asis-pasos li{font-size:.85rem;color:var(--ink2);line-height:1.45}
.asis-pasos strong{color:var(--ink);font-weight:700}
.asis-btn{border:0;border-radius:var(--rp);padding:11px 20px;cursor:pointer;
background:#2b4f8c;color:#fff;font-family:var(--head);font-weight:800;font-size:.86rem;
transition:background .14s}
.asis-btn:hover:not(:disabled){background:#22406f}
.asis-btn:disabled{opacity:.6;cursor:default}
.asis-nota{margin:11px 0 0;font-size:.76rem;color:var(--ink3);line-height:1.45}
.asis-nota-error{color:var(--coral);font-weight:600}
/* ── Marcado de asistencia dentro del campus ── */
.asis-form{margin:4px 0 0}
.asis-form label{display:block;font-family:var(--head);font-weight:800;font-size:.7rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:7px}
.asis-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.asis-fila input{flex:1;min-width:180px;border:1.5px solid var(--line);border-radius:10px;
padding:12px 14px;font-family:var(--head);font-weight:800;font-size:1.05rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--surf)}
.asis-fila input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--gt)}
.asis-estado{display:flex;align-items:center;gap:9px;margin:6px 0 0;
font-size:.92rem;font-weight:700;font-family:var(--head)}
.asis-estado svg{width:20px;height:20px;flex-shrink:0}
.asis-otras{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.asis-otras-t{display:block;font-family:var(--head);font-weight:800;font-size:.68rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:7px}
.asis-otra{font-size:.8rem;color:var(--ink2);padding:3px 0}
/* ── Avisos internos (campana) ── */
.nb-actions .ib{position:relative}
.nb-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
border-radius:var(--rp);background:var(--coral);color:#fff;font-family:var(--head);
font-weight:900;font-size:.58rem;display:flex;align-items:center;justify-content:center;
line-height:1;box-shadow:0 0 0 2px var(--surf)}
.av-pop{position:fixed;inset:0;z-index:9997;background:rgba(20,30,25,.28);
display:flex;align-items:flex-start;justify-content:flex-end;padding:64px 20px 20px}
.av-caja{background:var(--surf);border-radius:var(--rl);box-shadow:var(--shm);
width:min(360px,92vw);max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.av-cab{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;
border-bottom:1px solid var(--line)}
.av-cab h4{font-family:var(--head);font-weight:800;font-size:.86rem;color:var(--ink);margin:0}
.av-x{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--ink3);cursor:pointer}
.av-lista{overflow-y:auto}
.av-item{padding:11px 16px;border-bottom:1px solid var(--line)}
.av-item:last-child{border-bottom:0}
.av-nuevo{background:var(--gt)}
.av-t{font-weight:700;font-size:.82rem;color:var(--ink)}
.av-x2{font-size:.76rem;color:var(--ink2);margin-top:2px;line-height:1.45}
.av-f{font-size:.66rem;color:var(--ink3);margin-top:4px}
/* ── Modal de solicitud de tutoria ── */
.m-estado{margin:10px 0 0;font-size:.8rem;font-weight:600;color:var(--gd)}
.m-estado-error{color:var(--coral)}
/* ── Panel de admin: cola de tutorias ── */
.adm-lista{display:flex;flex-direction:column;gap:12px}
.adm-item{background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:var(--sh);padding:14px 16px}
.adm-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.adm-al{display:block;font-weight:700;font-size:.9rem;color:var(--ink)}
.adm-meta{display:block;font-size:.72rem;color:var(--ink3);margin-top:1px}
.adm-estado{flex-shrink:0;border-radius:var(--rp);padding:3px 11px;font-family:var(--head);
font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em}
.adm-pendiente{background:rgba(232,148,10,.14);color:#8a5500}
.adm-confirmada{background:var(--gt);color:var(--gd)}
.adm-rechazada{background:rgba(216,90,48,.12);color:#CC4415}
.adm-msg{margin-top:9px;font-size:.83rem;color:var(--ink2);line-height:1.5;
background:var(--page);border-radius:9px;padding:10px 12px}
.adm-sinmsg{color:var(--ink3);font-style:italic}
.adm-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px}
.adm-acc input{border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;
font-size:.8rem;color:var(--ink);background:var(--surf)}
.adm-fecha{min-width:200px}
.adm-dur{width:74px}
.adm-nota{flex:1;min-width:160px}
.adm-ok,.adm-no{border:0;border-radius:var(--rp);padding:8px 15px;cursor:pointer;
font-family:var(--head);font-weight:800;font-size:.76rem;transition:.14s}
.adm-ok{background:var(--g);color:#fff}
.adm-ok:hover:not(:disabled){background:var(--gd)}
.adm-no{background:var(--page);color:var(--ink2);border:1.5px solid var(--line)}
.adm-no:hover:not(:disabled){border-color:var(--coral);color:var(--coral)}
.adm-ok:disabled,.adm-no:disabled{opacity:.6;cursor:default}
.adm-res{flex-basis:100%;font-size:.76rem;color:var(--ink2);font-weight:600}
.adm-res-error{color:var(--coral)}
.adm-conf{margin-top:10px;font-size:.78rem;color:var(--gd);font-weight:600}
/* ── Panel del tutor ── */
.tut-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tut-barra label{font-family:var(--head);font-weight:800;font-size:.7rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.tut-barra select{flex:1;min-width:220px;border:1.5px solid var(--line);border-radius:9px;
padding:9px 11px;font-size:.84rem;color:var(--ink);background:var(--surf)}
.tut-ref{border:1.5px solid var(--line);background:var(--surf);border-radius:9px;
padding:9px 15px;font-family:var(--head);font-weight:700;font-size:.78rem;
color:var(--ink2);cursor:pointer;transition:.14s}
.tut-ref:hover{border-color:var(--gs);background:var(--gt);color:var(--gd)}
.tut-grid{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:16px;align-items:start}
@media (max-width:860px){.tut-grid{grid-template-columns:1fr}}
.tut-proy{text-align:center}
.tut-qr{width:100%;max-width:220px;height:auto;image-rendering:pixelated;
border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;margin:0 auto 12px}
.tut-codigo{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.tut-codigo span{font-family:var(--head);font-weight:800;font-size:.64rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.tut-codigo strong{font-family:var(--head);font-weight:900;font-size:1.5rem;
letter-spacing:.16em;color:var(--gd)}
.tut-pie{font-size:.74rem;color:var(--ink3);line-height:1.5;margin:0 0 12px}
.tut-aviso{font-size:.74rem;color:var(--coral);font-weight:600;margin:0 0 12px}
.tut-cuenta{font-family:var(--head);font-weight:900;font-size:.74rem;color:var(--g);
background:var(--gt);border-radius:var(--rp);padding:2px 10px;margin-left:8px}
.tut-filas{display:flex;flex-direction:column}
.tut-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 0;border-bottom:1px solid var(--line)}
.tut-fila:last-child{border-bottom:0}
.tut-fila.hecho{opacity:.75}
.tut-al{display:flex;flex-direction:column;min-width:0}
.tut-nom{font-size:.86rem;font-weight:600;color:var(--ink)}
.tut-id{font-size:.7rem;color:var(--ink3);margin-top:1px}
.tut-est{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.tut-badge{background:var(--gt);color:var(--gd);border-radius:var(--rp);padding:3px 11px;
font-family:var(--head);font-weight:800;font-size:.7rem}
.tut-origen{font-size:.66rem;color:var(--ink3)}
/* El marcado por el tutor se distingue a simple vista del automarcado. */
.tut-origen-t{color:#8a5500;font-weight:700}
.tut-marcar{flex-shrink:0;border:0;border-radius:var(--rp);background:var(--g);color:#fff;
padding:8px 15px;font-family:var(--head);font-weight:800;font-size:.76rem;cursor:pointer;
transition:background .14s}
.tut-marcar:hover:not(:disabled){background:var(--gd)}
.tut-marcar:disabled{opacity:.6;cursor:default}
/* Proyeccion a pantalla completa */
.tut-full{position:fixed;inset:0;z-index:9999;background:rgba(10,20,14,.97);
display:flex;align-items:center;justify-content:center;padding:24px}
.tut-full-in{text-align:center;color:#fff;max-width:min(90vw,560px)}
.tut-full-in h2{font-family:var(--head);font-weight:900;font-size:1.5rem;margin:0 0 22px;color:#fff}
.tut-full-in img{width:min(64vw,380px);height:auto;image-rendering:pixelated;
background:#fff;padding:16px;border-radius:16px}
.tut-full-cod{font-family:var(--head);font-weight:900;font-size:clamp(2rem,7vw,3.4rem);
letter-spacing:.2em;margin:22px 0 10px;color:#fff}
.tut-full-in p{font-size:.95rem;color:rgba(255,255,255,.75);margin:0}
.tut-full-x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;
font-size:2.2rem;line-height:1;cursor:pointer;opacity:.7}
.tut-full-x:hover{opacity:1}
/* ════════════════════════════════════
PANEL DEL TUTOR — pestanas y repositorio de recursos
Reglas base primero; la media query va al final del fichero, antes de
[hidden], para no repetir el problema de orden de fuente que ya se arreglo
cuatro veces en este proyecto.
════════════════════════════════════ */
.tut-tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin:0 0 18px}
.tut-tab{appearance:none;border:0;background:none;cursor:pointer;padding:10px 16px;
margin-bottom:-1.5px;border-bottom:2.5px solid transparent;color:var(--ink3);
font-family:var(--head);font-weight:800;font-size:.82rem;transition:.14s}
.tut-tab:hover{color:var(--ink2)}
.tut-tab-act{color:var(--gd);border-bottom-color:var(--g)}
.rec-mod{border:1.5px solid var(--line);border-radius:12px;background:var(--surf);
padding:16px 18px;margin-bottom:14px}
.rec-mod-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rec-cod{font-family:var(--head);font-weight:900;font-size:.72rem;letter-spacing:.06em;
color:var(--gd);background:var(--gt);border-radius:var(--rp);padding:3px 10px}
.rec-mod-t{font-size:.86rem;font-weight:600;color:var(--ink2);min-width:0}
.rec-mod-n{margin-left:auto;font-size:.7rem;color:var(--ink3)}
.rec-ses{margin-top:12px}
.rec-ses:first-of-type{margin-top:0}
.rec-ses-t{font-family:var(--head);font-weight:800;font-size:.66rem;text-transform:uppercase;
letter-spacing:.06em;color:var(--ink3);margin:0 0 6px}
.rec-lista{display:flex;flex-direction:column}
.rec-it{display:flex;align-items:center;gap:12px;padding:10px 0;
border-bottom:1px solid var(--line)}
.rec-it:last-child{border-bottom:0}
/* Icono generico por extension: si algun dia aparece un formato nuevo no hay
que anadir nada, se pinta su extension en la pastilla neutra. */
.rec-ico{flex-shrink:0;width:38px;height:38px;border-radius:9px;display:flex;
align-items:center;justify-content:center;font-family:var(--head);font-weight:900;
font-size:.58rem;letter-spacing:.02em;background:#eceff1;color:#546e7a;
text-transform:uppercase}
.rec-ico-pdf{background:#fdecea;color:#c0392b}
.rec-ico-pptx,.rec-ico-ppt{background:#fdf0e6;color:#c1521d}
.rec-ico-docx,.rec-ico-doc{background:#e8f0fb;color:#1e5aa8}
.rec-ico-xlsx,.rec-ico-xls{background:#e8f5ec;color:#1e7a45}
.rec-ico-enlace{background:var(--gt);color:var(--gd);font-size:1rem;letter-spacing:0}
.rec-cuerpo{display:flex;flex-direction:column;min-width:0;flex:1}
.rec-tit{font-size:.86rem;font-weight:600;color:var(--ink);word-break:break-word}
.rec-nota{font-size:.72rem;color:var(--ink3);margin-top:2px}
.rec-meta{font-size:.68rem;color:var(--ink3);margin-top:2px}
.rec-acc{flex-shrink:0;border:1.5px solid var(--line);border-radius:var(--rp);
background:var(--surf);color:var(--ink2);text-decoration:none;padding:7px 14px;
font-family:var(--head);font-weight:800;font-size:.74rem;transition:.14s;
white-space:nowrap}
.rec-acc:hover{border-color:var(--gs);background:var(--gt);color:var(--gd)}
.rec-vacio{font-size:.82rem;color:var(--ink3);line-height:1.6}
.rec-avisos{border:1.5px solid #f0d9a8;background:#fdf7ea;border-radius:10px;
padding:11px 14px;margin-bottom:14px}
.rec-avisos strong{display:block;font-family:var(--head);font-weight:800;
font-size:.72rem;color:#8a5500;margin-bottom:5px}
.rec-avisos li{font-size:.72rem;color:#8a5500;line-height:1.55}
/* ════════════════════════════════════
UNIT MODAL — full-screen popup
════════════════════════════════════ */
.unit-modal{
position:fixed;inset:0;z-index:300;
background:var(--page);
display:none;flex-direction:column;
}
.unit-modal.open{
display:flex;
animation:umSlideIn .22s cubic-bezier(.22,.68,0,1.2);
}
@keyframes umSlideIn{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}
}
/* ── Unit navbar ── */
.um-nav{
height:var(--hn);background:var(--surf);border-bottom:1px solid var(--line);
display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;
position:relative;z-index:10;
}
.um-back{
display:flex;align-items:center;gap:5px;background:none;border:none;
color:var(--ink2);font-size:.82rem;font-weight:600;
padding:6px 10px;border-radius:8px;transition:.14s;white-space:nowrap;
}
.um-back:hover{background:var(--gt);color:var(--g)}
.um-back svg{width:15px;height:15px}
.um-ndiv{width:1px;height:22px;background:var(--line);flex-shrink:0}
.um-crumb{font-size:.78rem;color:var(--ink3);display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.um-crumb svg{width:12px;height:12px;opacity:.4;flex-shrink:0}
.um-crumb strong{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-prog-wrap{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;min-width:0}
.um-prog-bar{flex:1;max-width:180px;height:5px;background:var(--gs);border-radius:999px;overflow:hidden}
.um-prog-fill{height:100%;background:var(--g);border-radius:999px;transition:width .35s ease}
.um-prog-pct{font-size:.72rem;font-weight:700;color:var(--g);font-family:var(--head);white-space:nowrap}
.um-type-pill{background:var(--gt);color:var(--gd);border-radius:5px;
padding:3px 9px;font-size:.65rem;font-weight:800;font-family:var(--head);white-space:nowrap;flex-shrink:0}
.um-close{
width:32px;height:32px;border-radius:var(--rp);border:none;
background:none;color:var(--ink3);
display:flex;align-items:center;justify-content:center;
transition:.14s;flex-shrink:0;margin-left:4px;
}
.um-close:hover{background:var(--gs);color:var(--ink)}
.um-close svg{width:16px;height:16px}
/* ── Unit body ── */
.um-body{display:flex;flex:1;overflow:hidden}
/* ── Unit sidebar ── */
.um-sidebar{
width:var(--sw);flex-shrink:0;background:var(--surf);
border-right:1px solid var(--line);
overflow-y:auto;padding:14px 0 20px;
}
.um-unit-lbl{
padding:4px 16px 10px;
font-family:var(--head);font-weight:800;font-size:.82rem;color:var(--ink);line-height:1.3;
}
.um-sl{
padding:6px 16px 4px;font-size:.62rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);font-family:var(--head);
}
.um-si{
display:flex;align-items:flex-start;gap:8px;
padding:8px 12px;margin:1px 8px;border-radius:8px;
cursor:pointer;transition:.13s;
font-size:.8rem;color:var(--ink2);font-weight:500;
border:none;background:none;width:calc(100% - 16px);text-align:left;
}
.um-si:hover{background:var(--gt);color:var(--g)}
.um-si.active{background:var(--gt);color:var(--g);font-weight:700}
.um-si-dot{
width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
flex-shrink:0;display:flex;align-items:center;justify-content:center;
margin-top:1px;transition:.15s;
}
.um-si.active .um-si-dot{background:var(--g);border-color:var(--g)}
.um-si.done .um-si-dot{background:var(--g);border-color:var(--g)}
.um-si-n{font-family:var(--head);font-weight:900;font-size:.62rem;color:var(--ink3)}
.um-si.active .um-si-n,.um-si.done .um-si-n{color:#fff}
.um-si-check{display:none;width:10px;height:10px}
.um-si.done .um-si-check{display:block}
.um-si.done .um-si-n{display:none}
.um-si-text{flex:1;line-height:1.35;font-size:.8rem}
.um-si-dur{font-size:.68rem;color:var(--ink3);margin-left:auto;padding-top:2px;white-space:nowrap}
/* ── Unit main scrollable area ── */
.um-main{flex:1;overflow-y:auto;padding:26px 30px 90px;min-width:0}
.um-screen{display:none}
.um-screen.active{display:block;animation:umFade .2s ease}
@keyframes umFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Screen typography */
.um-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink3);font-family:var(--head);margin-bottom:8px}
.um-screen-hd{font-family:var(--head);font-weight:900;font-size:1.25rem;color:var(--ink);
line-height:1.2;margin-bottom:8px;text-wrap:balance}
.um-intro{font-size:.95rem;color:var(--ink2);line-height:1.75;margin-bottom:22px}
.um-sec-title{font-family:var(--head);font-weight:800;font-size:.92rem;color:var(--ink);margin:22px 0 8px}
.um-body-text{font-size:.9rem;line-height:1.8;color:var(--ink);margin-bottom:14px}
/* Video block */
.um-video{
background:var(--surf);border:1px solid var(--line);
border-radius:var(--rl);overflow:hidden;margin-bottom:20px;
box-shadow:var(--sh);
}
.um-video-hd{
padding:10px 16px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:8px;
}
.um-yt-pill{
background:#c0392b;color:#fff;border-radius:4px;
padding:2px 8px;font-size:.6rem;font-weight:800;font-family:var(--head);
display:flex;align-items:center;gap:3px;white-space:nowrap;
}
.um-yt-pill svg{width:10px;height:10px}
.um-video-title{font-weight:700;font-size:.875rem;color:var(--ink);flex:1}
.um-video-dur{font-size:.72rem;color:var(--ink3);white-space:nowrap}
.um-video-frame{position:relative;padding-bottom:56.25%;background:#0a0a0a}
.um-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.um-video-cap{padding:8px 16px 12px;font-size:.78rem;color:var(--ink3);font-style:italic}
/* Callout variants */
.um-callout{
border-radius:10px;padding:12px 15px;margin:14px 0;
display:flex;align-items:flex-start;gap:10px;border-left:3px solid;
}
.um-callout.info{background:var(--gt);border-color:var(--g)}
.um-callout.amber{background:rgba(232,148,10,.08);border-color:var(--amber)}
.um-callout.coral{background:rgba(216,90,48,.07);border-color:var(--coral)}
.um-callout svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.um-callout.info svg{color:var(--g)}
.um-callout.amber svg{color:var(--amber)}
.um-callout.coral svg{color:var(--coral)}
.um-callout-body{font-size:.875rem;line-height:1.65;color:var(--ink)}
.um-callout-body strong{font-weight:700}
/* Reflection card */
.um-reflect{
background:var(--surf);border:1px solid var(--line);
border-radius:var(--rl);padding:22px;box-shadow:var(--sh);margin-top:10px;
}
.um-reflect-hd{
font-family:var(--head);font-weight:900;font-size:1rem;
color:var(--coral);margin-bottom:6px;
display:flex;align-items:center;gap:7px;
}
.um-reflect-hd svg{width:18px;height:18px}
.um-reflect-sub{font-size:.83rem;color:var(--ink2);margin-bottom:14px;line-height:1.6}
.um-reflect textarea{
width:100%;border:1.5px solid var(--line);border-radius:9px;
padding:11px 13px;font-family:var(--body);font-size:.875rem;
color:var(--ink);background:var(--page);
resize:none;outline:none;transition:.15s;min-height:110px;
}
.um-reflect textarea:focus{border-color:var(--g);background:var(--surf)}
/* ── Unit footer nav ── */
.um-footer{
height:60px;flex-shrink:0;background:var(--surf);
border-top:1px solid var(--line);
display:flex;align-items:center;padding:0 20px;gap:12px;
}
.um-prev{
display:flex;align-items:center;gap:5px;
background:none;border:1.5px solid var(--line);
color:var(--ink2);font-size:.83rem;font-weight:600;
padding:8px 16px;border-radius:var(--rp);transition:.14s;
}
.um-prev:hover:not(:disabled){border-color:var(--g);color:var(--g)}
.um-prev:disabled{opacity:.32;cursor:not-allowed}
.um-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:5px}
.um-dot{width:7px;height:7px;border-radius:50%;background:var(--gs);
transition:.2s;cursor:pointer;border:none;padding:0;}
.um-dot.active{background:var(--g);width:18px;border-radius:999px}
.um-next{
display:flex;align-items:center;gap:5px;
border:none;background:var(--g);color:#fff;
font-size:.83rem;font-weight:700;
padding:9px 20px;border-radius:var(--rp);transition:.14s;
}
.um-next:hover{background:var(--gd)}
.um-next.final{background:var(--coral)}
.um-next.final:hover{background:var(--coral-d)}
/* Make activity rows openable */
.ar.openable{cursor:pointer;transition:background .14s}
.ar.openable:hover{background:var(--gt)}
/* ═══ Panel derecho contextual (vista de actividad) ═══ */
#view-actividad .rpc h4{margin-bottom:8px}
.eell-pm-sub{font-size:.78rem;color:var(--ink2);margin:6px 0 2px;line-height:1.35}
.eell-pm-pos{font-size:.72rem;color:var(--ink3);font-family:var(--head);font-weight:700}
.eell-pm-list{margin:12px 0 4px;display:flex;flex-direction:column;gap:2px}
.eell-pm-item{display:flex;align-items:flex-start;gap:7px;padding:6px 7px;border-radius:7px;
font-size:.76rem;line-height:1.3;color:var(--ink2);cursor:pointer;transition:background .12s}
.eell-pm-item:hover{background:var(--gt)}
.eell-pm-item.actual{background:var(--gt);color:var(--gd);font-weight:700;cursor:default}
.eell-pm-item.actual:hover{background:var(--gt)}
.eell-pm-n{color:var(--ink3);flex-shrink:0}
.eell-pm-t{flex:1;min-width:0}
.eell-pm-nav{display:flex;gap:7px;margin-top:12px}
.eell-pm-nav button{flex:1;padding:8px 6px;font-size:.74rem;border-radius:var(--rp);
font-family:var(--head);font-weight:700;cursor:pointer;transition:.15s}
.eell-pm-nav button:disabled{opacity:.4;cursor:default}
.eell-mini-pct{font-family:var(--head);font-weight:900;font-size:1.6rem;color:var(--gd);line-height:1}
.eell-kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:.78rem;
color:var(--ink2);border-bottom:1px dashed var(--line)}
.eell-kv:last-child{border-bottom:0}
.eell-kv strong{color:var(--ink);font-weight:700;text-align:right}
.eell-ix{display:block;padding:5px 7px;border-radius:6px;font-size:.76rem;line-height:1.3;
color:var(--ink2);text-decoration:none;border-left:2px solid transparent;transition:.12s}
.eell-ix:hover{background:var(--gt);color:var(--gd)}
.eell-ix.on{background:var(--gt);color:var(--gd);font-weight:700;border-left-color:var(--g)}
.eell-lectura{line-height:1.65}
.eell-lectura h2,.eell-lectura h3{scroll-margin-top:90px;margin:22px 0 10px}
.eell-lectura p{margin-bottom:12px}
.eell-lectura ul,.eell-lectura ol{margin:0 0 12px 20px}
.eell-muted{color:var(--ink3);font-size:.82rem}
.eell-msg{color:var(--coral);font-size:.85rem;font-weight:600}
/* 2) El banner de actividad tiene fondo oscuro: el boton necesita contraste */
#view-actividad .ch .um-back{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.3)}
#view-actividad .ch .um-back:hover{color:#fff;border-color:rgba(255,255,255,.6)}
#view-actividad .ch .um-back svg{stroke:currentColor}
.eell-pm-d{font-size:.68rem;color:var(--ink3);font-family:var(--head);font-weight:700;flex-shrink:0}
/* 2) separacion cuando la duracion precede a la pastilla */
.ar-dur + .tp{margin-left:2px}
/* ═══ MODO LECTURA ═══ */
.lec-lateral{width:236px;flex-shrink:0;border-right:1px solid var(--line);
padding:20px 12px 40px;position:sticky;top:calc(var(--hn) + 16px);
align-self:flex-start;max-height:calc(100vh - var(--hn) - 32px);overflow-y:auto;
scrollbar-width:thin;background:var(--surf)}
.lec-idx-t{font-family:var(--head);font-weight:800;font-size:.8rem;color:var(--gd);
line-height:1.3;margin-bottom:14px;padding:0 6px}
.lec-bl{margin-bottom:14px}
.lec-bl-t{font-family:var(--head);font-weight:800;font-size:.66rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink3);padding:0 6px 6px}
.lec-it{display:flex;align-items:flex-start;gap:7px;width:100%;text-align:left;
background:none;border:0;border-radius:7px;padding:6px 7px;cursor:pointer;
transition:background .12s;font-family:var(--body)}
.lec-it:hover{background:var(--gt)}
.lec-it.on{background:var(--gt)}
.lec-it-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.lec-it-t{font-size:.76rem;line-height:1.3;color:var(--ink2);font-weight:600}
.lec-it.on .lec-it-t{color:var(--gd);font-weight:700}
.lec-it-s{font-size:.67rem;color:var(--ink3);line-height:1.25}
.lec-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.lec-crumb{flex:1;min-width:180px;font-size:.74rem;color:var(--ink3);
display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lec-crumb strong{color:var(--ink);font-weight:700}
.lec-crumb span{opacity:.5}
.lec-ctrl{display:flex;align-items:center;gap:6px}
.lec-nav{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--rp);
padding:5px 11px;font-family:var(--head);font-weight:700;font-size:.78rem;
color:var(--ink2);cursor:pointer;transition:.15s}
.lec-nav:hover:not(:disabled){border-color:var(--g);color:var(--gd)}
.lec-nav:disabled{opacity:.35;cursor:default}
.lec-pos{font-size:.72rem;color:var(--ink3);font-family:var(--head);font-weight:700;
min-width:48px;text-align:center}
.lec-zoom{display:flex;gap:4px;margin-left:6px;padding-left:10px;border-left:1px solid var(--line)}
.lec-cuerpo h4{font-family:var(--head);font-weight:800;font-size:1em;color:var(--ink);
margin:24px 0 8px;padding-top:2px}
.lec-cuerpo p{margin:0 0 13px}
.lec-cuerpo ul,.lec-cuerpo ol{margin:0 0 14px 22px}
.lec-cuerpo li{margin-bottom:5px}
.lec-cuerpo blockquote{border-left:3px solid var(--line);margin:0 0 14px;padding:2px 0 2px 16px;
color:var(--ink2)}
.lec-pie{display:flex;justify-content:space-between;gap:12px;margin-top:30px;
padding-top:18px;border-top:1px solid var(--line)}
.lec-pie button{max-width:46%;padding:9px 14px;font-size:.76rem;border-radius:var(--rp);
font-family:var(--head);font-weight:700;cursor:pointer;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.lec-ring-lb{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:0}
.lec-ring-pct{font-family:var(--head);font-weight:900;font-size:1.15rem;color:var(--gd);line-height:1}
.lec-ring-sub{font-size:.62rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.lec-idx-mini{max-height:280px;overflow-y:auto;scrollbar-width:thin;margin:-4px -4px 0}
.lec-idx-mini .lec-it-s{display:none}
.lec-idx-mini .lec-bl-t{font-size:.6rem}
@media (max-width:1100px){
.lec-lateral{display:none}
}
.lec-ring{position:relative;width:96px;margin:4px auto 12px}
/* ═══ MODO LECTURA — ajustes de estilo ═══
Todo con tokens existentes y prefijado .lec-/.modo-lectura para no afectar
al resto del campus. --gt cambia en tema oscuro, asi que el fondo acompana. */
/* 1) area de scroll con fondo ligeramente distinto de --page */
.modo-lectura .content{
background:var(--page);
background:color-mix(in srgb, var(--gt) 55%, var(--page));
}
.lec-scroll{display:flex;justify-content:center;padding:4px 0 8px}
/* 1) tarjeta de papel */
.lec-papel{
background:var(--surf);
border:1px solid var(--line);
border-radius:10px;
box-shadow:var(--shm);
padding:56px 64px 44px;
max-width:760px;
width:100%;
line-height:1.75;
}
/* 2) pastilla del documento + kicker */
.lec-doc{margin-bottom:14px}
.lec-doc-pill{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;
letter-spacing:.04em;padding:4px 10px;font-size:.62rem;border-radius:var(--rp)}
.lec-doc-pill svg{width:11px;height:11px}
.lec-kicker{font-family:var(--head);font-weight:700;font-size:.63rem;
text-transform:uppercase;letter-spacing:.11em;color:var(--ink3);margin-bottom:10px}
/* 6) Lora solo para el titulo de la seccion; el resto sigue en Inter */
.lec-h2{
font-family:'Lora',Georgia,serif;
font-weight:700;
font-size:1.72rem;
color:var(--gd);
margin:0 0 6px;
line-height:1.22;
letter-spacing:-.01em;
}
.lec-sub{font-size:.82rem;color:var(--ink3);font-style:italic;margin:0 0 26px;
padding-bottom:18px;border-bottom:1px solid var(--line)}
/* resumen inicial y 7) cajas destacadas del cuerpo */
.lec-resumen,.lec-destacado{background:var(--gt);border-left:3px solid var(--g);
border-radius:0 9px 9px 0;padding:15px 20px;color:var(--gd)}
.lec-resumen{margin:0 0 26px}
.lec-destacado{margin:20px 0}
.lec-resumen p,.lec-destacado p{margin:0 0 8px;font-size:.93em;line-height:1.62}
.lec-resumen p:last-child,.lec-destacado p:last-child{margin-bottom:0}
/* 7) aviso: fondo cálido, borde coral, icono de advertencia */
.lec-aviso{position:relative;background:color-mix(in srgb, var(--coral) 8%, var(--surf));
border-left:3px solid var(--coral);border-radius:0 9px 9px 0;
padding:15px 20px 15px 46px;margin:20px 0;color:var(--ink)}
.lec-aviso::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;
background-color:var(--coral);
-webkit-mask:var(--lec-warn) center/contain no-repeat;
mask:var(--lec-warn) center/contain no-repeat}
.lec-aviso p{margin:0 0 8px;font-size:.93em;line-height:1.62}
.lec-aviso p:last-child{margin-bottom:0}
:root{--lec-warn:url("data:image/svg+xml;utf8,")}
/* 4) estadisticas en dos cajas, reutilizando .mp-stat */
.lec-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px}
.lec-stats .mp-stat{border-radius:9px;padding:10px 11px;display:block;text-align:left}
.lec-stats .mv{font-size:1.3rem}
.lec-stats .ml{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
color:var(--ink3);margin-top:3px;line-height:1.25}
.lec-de{font-size:.62rem;font-weight:700;color:var(--ink3);margin-left:3px;
letter-spacing:0;text-transform:none}
/* 5) circulos del indice */
.lec-it-ck{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);
background:var(--page);color:var(--ink3);flex-shrink:0;margin-top:1px;
display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.6rem;line-height:1;
transition:background .15s,border-color .15s,color .15s}
.lec-it-ck svg{width:10px;height:10px;display:block}
.lec-it.on .lec-it-ck{background:var(--g);border-color:var(--g);color:#fff}
.lec-it.leida .lec-it-ck{background:var(--g);border-color:var(--g);color:#fff}
@media (max-width:1100px){
.lec-papel{padding:30px 24px 26px}
.lec-h2{font-size:1.42rem}
.lec-scroll{padding:0}
}
/* ═══ MODO LECTURA — alineacion de las tres columnas e indice colapsable ═══
Todo bajo .modo-lectura o prefijado .lec-, con tokens existentes. */
/* 1) --lec-cab la mide lectura.js (padding de .content + alto de .lec-top +
su margen inferior + padding de .lec-scroll). Este es el valor de reserva
si el JS no llega a medir: 22 + 34 + 16 + 4 menos los 16 del desfase sticky. */
.modo-lectura{--lec-cab:60px}
/* franja de aire con fondo de marca; es un elemento real y flex-shrink:0
dentro de la columna, asi que no desaparece cuando la columna scrollea */
.lec-aire{height:var(--lec-cab);background:var(--gt);flex-shrink:0;
box-sizing:border-box;border-bottom:1px solid var(--gs);
display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 7px}
/* columna izquierda: el scroll pasa del contenedor al cuerpo del indice,
para que la franja de aire y el control queden siempre arriba */
.modo-lectura .lec-lateral{padding:0;overflow:hidden;
display:flex;flex-direction:column;transition:width .18s ease}
.lec-idx-cab{padding:14px 12px 0;flex-shrink:0}
.lec-idx-cuerpo{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;
padding:0 12px 24px}
/* columna derecha: misma estructura. No se toca su contenido. */
.modo-lectura .rp{padding:0;overflow:hidden;display:flex;flex-direction:column}
.lec-panel-cuerpo{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;
padding:0 16px 40px}
/* 2) control de colapso del indice */
.lec-idx-tog{width:26px;height:26px;flex-shrink:0;padding:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:var(--surf);border:1px solid var(--gs);border-radius:7px;
color:var(--gd);transition:background .15s,border-color .15s,color .15s}
.lec-idx-tog:hover{background:var(--g);border-color:var(--g);color:#fff}
.lec-idx-tog svg{width:13px;height:13px;display:block;transition:transform .18s ease}
/* 2) colapsado: franja estrecha con solo el control; el papel gana el ancho */
.modo-lectura.lec-idx-off .lec-lateral{width:46px;
min-height:calc(100vh - var(--hn) - 32px)}
.modo-lectura.lec-idx-off .lec-aire{justify-content:center;padding:0 0 8px}
.modo-lectura.lec-idx-off .lec-idx-cab,
.modo-lectura.lec-idx-off .lec-idx-cuerpo{display:none}
.modo-lectura.lec-idx-off .lec-idx-tog svg{transform:rotate(180deg)}
.modo-lectura.lec-idx-off .lec-papel{max-width:860px}
/* pantallas estrechas: la columna izquierda ya se oculta (regla previa
.lec-lateral{display:none}); la franja del panel derecho se queda porque
sigue alineada con la columna central */
@media (max-width:1100px){
/* .modo-lectura .lec-lateral{display:flex} (0,2,0) pisaba el
.lec-lateral{display:none} (0,1,0) de la regla previa: hay que repetirlo
aqui con la misma especificidad y despues en el orden del fichero */
.modo-lectura .lec-lateral{display:none}
.modo-lectura.lec-idx-off .lec-papel{max-width:760px}
}
/* ═══ FORO INLINE ═══
Mismo criterio visual que el resto de vistas inline. Todo prefijado
.foro- y con los tokens existentes: sin colores nuevos. */
.foro-intro{background:var(--gt);border-left:3px solid var(--g);border-radius:0 9px 9px 0;
padding:14px 18px;margin-bottom:20px;color:var(--gd);font-size:.9rem;line-height:1.6}
.foro-intro p{margin:0 0 8px}
.foro-intro p:last-child{margin-bottom:0}
.foro-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.foro-cab h3{font-family:var(--head);font-weight:800;font-size:1rem;color:var(--ink);margin:0}
.foro-cab-hilo{border-bottom:0;padding-bottom:0;margin-bottom:6px}
.foro-volver{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;
font-size:.76rem;border-radius:var(--rp);font-family:var(--head);font-weight:700;cursor:pointer}
.foro-volver svg{width:13px;height:13px}
.foro-lista{display:flex;flex-direction:column;gap:6px}
.foro-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
padding:11px 13px;cursor:pointer;transition:border-color .14s,background .14s;
font-family:var(--body)}
.foro-item:hover{border-color:var(--g);background:var(--gt)}
.foro-ava{width:34px;height:34px;flex-shrink:0;border-radius:50%;
background:var(--gs);color:var(--gd);display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.72rem;letter-spacing:.02em}
.foro-item-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.foro-item-t{font-size:.87rem;font-weight:700;color:var(--ink);line-height:1.35}
.foro-item-m{font-size:.72rem;color:var(--ink3)}
.foro-tag{display:inline-block;background:var(--gt);color:var(--gd);border-radius:4px;
padding:1px 6px;font-size:.62rem;font-family:var(--head);font-weight:800;
text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;margin-left:4px}
.foro-tag-off{background:var(--page);color:var(--ink3)}
.foro-cnt{flex-shrink:0;min-width:30px;height:24px;padding:0 8px;border-radius:var(--rp);
background:var(--page);color:var(--ink2);display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.74rem}
.foro-item:hover .foro-cnt{background:var(--surf)}
.foro-hilo-t{font-family:var(--head);font-weight:800;font-size:1.18rem;color:var(--gd);
margin:0 0 16px;line-height:1.3}
.foro-hilo{display:flex;flex-direction:column;gap:12px}
.foro-post{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px}
.foro-post-cab{display:flex;align-items:center;gap:10px;margin-bottom:9px;
padding-bottom:9px;border-bottom:1px solid var(--line)}
.foro-post-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.foro-post-a{font-family:var(--head);font-weight:700;font-size:.82rem;color:var(--ink)}
.foro-post-f{font-size:.7rem;color:var(--ink3)}
.foro-post-c{font-size:.9rem;line-height:1.65;color:var(--ink2)}
.foro-post-c p{margin:0 0 9px}
.foro-post-c p:last-child{margin-bottom:0}
.foro-post-c ul,.foro-post-c ol{margin:0 0 10px 20px}
.foro-post-c img{max-width:100%;height:auto;border-radius:6px}
/* respuestas anidadas: sangria y un filo verde que marca la jerarquia */
.foro-n1,.foro-n2,.foro-n3{border-left:3px solid var(--gs)}
.foro-n1{margin-left:22px}
.foro-n2{margin-left:44px}
.foro-n3{margin-left:66px}
.foro-vacio{text-align:center;padding:38px 20px;color:var(--ink2)}
.foro-vacio svg{width:38px;height:38px;color:var(--gs);margin-bottom:12px}
.foro-vacio p{margin:0 0 5px;font-size:.88rem}
@media (max-width:640px){
.foro-n1,.foro-n2,.foro-n3{margin-left:12px}
}
/* ═══ TAREA y CUESTIONARIO (vistas de solo lectura) ═══
Prefijadas .aq- y con los tokens existentes. */
.aq-estado{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.aq-badge{display:inline-block;padding:4px 11px;border-radius:var(--rp);
font-family:var(--head);font-weight:800;font-size:.66rem;
text-transform:uppercase;letter-spacing:.04em}
.aq-ok{background:var(--gt);color:var(--gd)}
.aq-warn{background:color-mix(in srgb, var(--coral) 12%, var(--surf));color:var(--coral)}
.aq-off{background:var(--page);color:var(--ink3)}
span.aq-ok,span.aq-warn{background:none;padding:0;font-size:inherit;letter-spacing:0;
text-transform:none;font-weight:800}
.aq-bloque{margin-bottom:20px}
.aq-bloque h4{font-family:var(--head);font-weight:800;font-size:.8rem;color:var(--ink);
text-transform:uppercase;letter-spacing:.05em;margin:0 0 9px;
padding-bottom:7px;border-bottom:1px solid var(--line)}
.aq-fb{background:var(--gt);border-radius:var(--r);padding:14px 16px}
.aq-fb h4{border-bottom-color:var(--gs);color:var(--gd)}
.aq-fila{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:6px 0;font-size:.84rem;color:var(--ink2)}
.aq-fila + .aq-fila{border-top:1px solid var(--line)}
.aq-fb .aq-fila + .aq-fila{border-top-color:var(--gs)}
.aq-fila strong{color:var(--ink);font-weight:700;text-align:right}
.aq-nota{font-family:var(--head);font-weight:900;font-size:1.05rem;color:var(--gd)}
.aq-texto{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
font-size:.88rem;line-height:1.65;color:var(--ink2)}
.aq-fb .aq-texto{border-top-color:var(--gs)}
.aq-texto p{margin:0 0 9px}
.aq-texto p:last-child{margin-bottom:0}
.aq-tabla-wrap{overflow-x:auto}
.aq-tabla{width:100%;border-collapse:collapse;font-size:.82rem}
.aq-tabla th{font-family:var(--head);font-weight:800;font-size:.66rem;color:var(--ink3);
text-transform:uppercase;letter-spacing:.04em;text-align:left;
padding:0 10px 7px 0;white-space:nowrap}
.aq-tabla td{padding:9px 10px 9px 0;border-top:1px solid var(--line);color:var(--ink2)}
.aq-tabla tbody tr:hover{background:var(--gt)}
.aq-td-n{text-align:right;padding-right:0!important;font-family:var(--head);font-weight:700}
.aq-si{color:var(--gd);font-weight:700;font-size:.86rem;margin:0}
.aq-no{color:var(--coral);font-weight:700;font-size:.86rem;margin:0 0 8px}
.aq-motivos{margin:0 0 0 18px;font-size:.84rem;color:var(--ink2);line-height:1.6}
.aq-motivos li{margin-bottom:4px}
.aq-nota-pie{margin:16px 0 0;font-size:.78rem;font-style:italic}
/* enlace externo: la direccion completa puede ser larga */
.url-host{font-family:var(--head);font-weight:800;color:var(--gd)}
.url-full{font-size:.74rem;color:var(--ink3);word-break:break-all;font-weight:400}
/* ═══ FORO: participación ═══ */
.foro-cab-d{display:flex;align-items:center;gap:12px}
.foro-nuevo{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
font-size:.78rem;border-radius:var(--rp);font-family:var(--head);font-weight:700;cursor:pointer}
.foro-nuevo svg{width:13px;height:13px}
.foro-form{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
padding:16px 18px;margin:16px 0 4px;display:flex;flex-direction:column;gap:7px}
.foro-form-tema{margin-bottom:18px;border-color:var(--gs);background:var(--gt)}
.foro-lb{font-family:var(--head);font-weight:800;font-size:.68rem;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em}
.foro-in,.foro-ta{width:100%;font-family:var(--body);font-size:.88rem;color:var(--ink);
background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:9px 11px;
line-height:1.55;transition:border-color .15s}
.foro-in:focus,.foro-ta:focus{outline:none;border-color:var(--g)}
.foro-ta{resize:vertical;min-height:88px}
.foro-in:disabled,.foro-ta:disabled{opacity:.6}
.foro-form-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:3px}
.foro-form-btns{display:flex;gap:8px;flex-shrink:0}
.foro-form-pie button{padding:8px 15px;font-size:.78rem;border-radius:var(--rp);
font-family:var(--head);font-weight:700;cursor:pointer}
.foro-aviso{font-size:.78rem;color:var(--ink3);min-height:1em}
.foro-aviso-err{color:var(--coral);font-weight:700}
.foro-cerrado{background:var(--page);border-radius:var(--r);padding:14px 16px;margin-top:16px;
font-size:.84rem;color:var(--ink2)}
/* ── "Mas de JPC España" en el footer (antes estaba en el sidebar, sobre
fondo oscuro; aqui va sobre fondo claro) ── */
.cf-more{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:12px 0;margin:2px 0 10px;border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.cf-more-hd{font-family:var(--head);font-weight:800;font-size:.6rem;
text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);flex-shrink:0}
.cf-more-items{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cf-mitem{display:inline-flex;align-items:center;gap:7px;
padding:5px 11px;border-radius:var(--rp);border:1px solid var(--line);
background:var(--surf);font-family:var(--head);font-weight:700;font-size:.72rem;
color:var(--ink2);transition:border-color .14s,color .14s,background .14s}
.cf-mitem:hover{border-color:var(--g);color:var(--gd);background:var(--gt)}
.cf-mdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cf-mitem svg{width:10px;height:10px;opacity:.5;flex-shrink:0}
.cf-mitem:hover svg{opacity:.9}
@media (max-width:640px){
.cf-more{flex-direction:column;align-items:flex-start;gap:8px}
}
/* ═══ VISTA COMUNIDAD ═══
Agregador de foros. Mismos valores de tarjeta que .mat-card y .prog-strip
(var(--surf), var(--r), var(--sh), 1px solid var(--line)) y la misma rejilla
auto-fill que .mat-grid, con una anchura minima mayor porque cada tarjeta
lleva dentro una lista de debates. */
.com-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
gap:14px;align-items:start}
.com-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:15px 16px;display:flex;flex-direction:column;gap:11px}
.com-card-hd{display:flex;align-items:flex-start;gap:11px}
.com-icon{width:34px;height:34px;flex-shrink:0;border-radius:9px;
background:var(--gt);color:var(--gd);display:flex;align-items:center;justify-content:center}
.com-icon svg{width:17px;height:17px}
.com-card-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.com-card-t{font-family:var(--head);font-weight:800;font-size:.88rem;color:var(--ink);
line-height:1.3}
.com-card-m{font-size:.72rem;color:var(--ink3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.com-tipo{display:inline-block;background:var(--page);color:var(--ink2);border-radius:4px;
padding:1px 7px;font-family:var(--head);font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.04em}
.com-lista{display:flex;flex-direction:column;gap:5px;
padding-top:10px;border-top:1px solid var(--line)}
.com-d{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
background:none;border:1px solid transparent;border-radius:9px;padding:7px 8px;
cursor:pointer;transition:background .14s,border-color .14s;font-family:var(--body)}
.com-d:hover{background:var(--gt);border-color:var(--gs)}
.com-d .foro-ava{width:28px;height:28px;font-size:.64rem}
.com-d-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.com-d-t{font-size:.8rem;font-weight:700;color:var(--ink);line-height:1.3}
.com-d-m{font-size:.68rem;color:var(--ink3)}
.com-vacio{margin:0;padding-top:10px;border-top:1px solid var(--line);font-size:.8rem}
.com-card-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.com-card-pie button{padding:7px 13px;font-size:.75rem;border-radius:var(--rp);
font-family:var(--head);font-weight:700;cursor:pointer}
.com-solo-lectura{font-size:.68rem;color:var(--ink3);font-family:var(--head);
font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.com-empty{text-align:center;padding:40px 20px;color:var(--ink2);font-size:.88rem}
.com-empty svg{width:40px;height:40px;margin:0 auto 10px;display:block;opacity:.4}
@media (max-width:640px){
.com-grid{grid-template-columns:1fr}
}
/* ═══ MI PERFIL — datos reales, edición y foto ═══
Reutiliza los tokens y las clases de tarjeta ya existentes; lo nuevo va
prefijado .pf- (perfil) y .pm- (prácticas y memoria). */
.pf-av-wrap{position:relative;flex-shrink:0}
.pf-av-btn{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;
border-radius:50%;background:var(--surf);border:1.5px solid var(--line);
color:var(--ink2);display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;box-shadow:var(--sh);transition:.15s}
.pf-av-btn:hover{border-color:var(--g);color:var(--g)}
.pf-av-btn svg{width:13px;height:13px}
.ph-av-foto{padding:0;overflow:hidden}
.ph-av-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pf-av-aviso{font-size:.72rem;color:var(--ink3);margin-top:5px;min-height:1em}
.pf-fijo{font-size:.68rem;color:var(--ink3);font-family:var(--head);font-weight:700;
text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;cursor:help}
.pf-row-edit{align-items:center}
.pf-form{display:flex;gap:6px;flex:1;min-width:0;align-items:center;flex-wrap:wrap}
.pf-in{flex:1;min-width:120px;font-family:var(--body);font-size:.84rem;color:var(--ink);
background:var(--surf);border:1px solid var(--line);border-radius:7px;padding:6px 9px;
transition:border-color .15s}
.pf-in:focus{outline:none;border-color:var(--g)}
.pf-ok,.pf-cancel{padding:6px 12px;border-radius:var(--rp);font-family:var(--head);
font-weight:700;font-size:.74rem;cursor:pointer;border:1px solid transparent}
.pf-ok{background:var(--g);color:#fff}
.pf-ok:hover{background:var(--gd)}
.pf-cancel{background:none;border-color:var(--line);color:var(--ink2)}
.pf-cancel:hover{border-color:var(--ink3)}
.pf-aviso{font-size:.76rem;margin-top:8px;min-height:1em}
.pf-aviso-ok{color:var(--gd);font-weight:700}
.pf-aviso-err{color:var(--coral);font-weight:700}
/* cuadro Prácticas y Memoria */
.pm-card{display:flex;flex-direction:column;gap:14px}
/* Secciones internas de "Practicas y Memoria": separador solo entre ellas. */
.pm-sec + .pm-sec{margin-top:2px;padding-top:15px;border-top:1px solid var(--line)}
.pm-sec-t{font-family:var(--head);font-weight:900;font-size:.82rem;color:var(--ink);
margin:0 0 11px}
.pm-b{border-top:1px solid var(--line);padding-top:12px}
.pm-b:first-of-type{border-top:0;padding-top:0}
.pm-b h5{font-family:var(--head);font-weight:800;font-size:.78rem;color:var(--ink);
text-transform:uppercase;letter-spacing:.05em;margin:0 0 9px}
.pm-filas .aq-fila{padding:5px 0;font-size:.82rem}
.pm-alerta{display:flex;gap:9px;align-items:flex-start;margin-top:11px;
background:color-mix(in srgb, var(--coral) 9%, var(--surf));
border-left:3px solid var(--coral);border-radius:0 9px 9px 0;padding:11px 13px;
font-size:.82rem;line-height:1.55;color:var(--ink)}
.pm-alerta svg{width:16px;height:16px;color:var(--coral);flex-shrink:0;margin-top:2px}
.pm-fb{margin-top:11px}
.pm-fb-t{font-family:var(--head);font-weight:800;font-size:.68rem;color:var(--ink3);
text-transform:uppercase;letter-spacing:.05em}
.pm-eval{margin-top:11px;background:var(--page);border-radius:9px;padding:11px 13px}
.pm-eval-t{font-family:var(--head);font-weight:800;font-size:.68rem;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px}
.pm-eval p{margin:0;font-size:.78rem}
/* Mi perfil en dos columnas explicitas: asi cada tarjeta cae donde toca y no
depende del reparto automatico del grid (Memoria debajo de Mi certificacion,
Practicas en la columna izquierda). */
.pf-col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* resumen de 3 subcampos en la tarjeta de Prácticas */
.pm-resumen{display:flex;flex-direction:column;gap:1px;margin-bottom:14px;
background:var(--page);border-radius:9px;padding:10px 12px}
.pm-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0}
.pm-r + .pm-r{border-top:1px solid var(--line)}
.pm-r-et{font-family:var(--head);font-weight:800;font-size:.66rem;color:var(--ink3);
text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.pm-r-v{font-size:.82rem;color:var(--ink);font-weight:600;text-align:right;
word-break:break-word}
.pm-r-vacio{color:var(--ink3);font-weight:400}
/* El atributo hidden debe ganar al display:flex de .foro-form. Sin esto, el
formulario de nuevo tema se veia siempre (una clase, 0-1-0, empata con el
[hidden] de la hoja del navegador y gana la ultima declarada). */
.foro-form[hidden]{display:none}
/* ═══ Constructora de Objetivos ═══
Transcripcion literal del CSS de bloque_constructora_objetivos_2.html, el
fichero de referencia. No se ha reinterpretado nada: mismos colores (#0c7a6a,
#0a5f54, #b9820f, #8f6608), mismas medidas, misma mascara conica que rellena
el logo, misma animacion de brillo al completarse. Lo unico que cambia es de
donde sale el dato (API real en vez de localStorage) y que los dos PNG del
logo se sirven como fichero en vez de ir incrustados en base64. */
#jpc-objw-root{font-family:'Montserrat','Segoe UI',sans-serif}
.jpc-ow{position:relative;background:#fff;border:1px solid #c9e1db;border-radius:16px;
padding:16px 16px 14px;overflow:hidden;box-shadow:0 10px 24px -16px rgba(12,60,45,.3);
font-family:'Inter','Segoe UI',sans-serif;color:#16261d}
.jpc-ow::before{content:'';position:absolute;top:0;left:0;right:0;height:50px;
background:radial-gradient(120% 100% at 15% 0%, rgba(12,122,106,.10), transparent 70%);
pointer-events:none}
.jpc-ow-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;z-index:1}
.jpc-ow-kicker{display:flex;align-items:center;gap:8px}
.jpc-ow-mark{width:30px;height:30px;border-radius:9px;flex-shrink:0;
background:linear-gradient(150deg,#0c7a6a,#0a5f54);display:flex;align-items:center;justify-content:center;
box-shadow:0 5px 12px -6px rgba(12,122,106,.55);font-size:.95rem}
.jpc-ow-titles{display:flex;flex-direction:column;gap:0}
.jpc-ow-eyebrow{font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#6c8a79}
.jpc-ow-name{font-weight:800;font-size:.86rem;color:#16261d;line-height:1.2}
.jpc-ow-badge{position:relative;width:52px;height:52px;flex-shrink:0;
filter:drop-shadow(0 3px 7px rgba(20,60,45,.16));transition:transform .4s, filter .4s}
.jpc-ow-badge-ghost,.jpc-ow-badge-fill{position:absolute;inset:0;background-size:contain;
background-repeat:no-repeat;background-position:center}
.jpc-ow-badge-ghost{opacity:.15}
.jpc-ow-badge-fill{-webkit-mask-image:conic-gradient(from 0deg, #000 var(--pct,0%), transparent var(--pct,0%));
mask-image:conic-gradient(from 0deg, #000 var(--pct,0%), transparent var(--pct,0%));
transition:-webkit-mask-image .5s ease, mask-image .5s ease}
.jpc-ow.complete .jpc-ow-badge{transform:scale(1.14);animation:jpcBadgeGlow 2.4s ease-in-out infinite}
@keyframes jpcBadgeGlow{0%,100%{filter:drop-shadow(0 5px 12px rgba(185,130,15,.4))}
50%{filter:drop-shadow(0 8px 18px rgba(185,130,15,.6))}}
@media (prefers-reduced-motion: reduce){.jpc-ow.complete .jpc-ow-badge{animation:none;
filter:drop-shadow(0 5px 12px rgba(185,130,15,.5))}}
.jpc-ow-prow{position:relative;z-index:1;margin-top:13px}
.jpc-ow-phead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.jpc-ow-plabel{font-size:.72rem;color:#6c8a79}
.jpc-ow-pcount{font-weight:900;font-size:.86rem;color:#16261d}
.jpc-ow-track{height:8px;border-radius:999px;background:#eef4f3;overflow:hidden;border:1px solid #dcebe7}
.jpc-ow-fill{height:100%;border-radius:999px;width:0%;background:linear-gradient(90deg,#0c7a6a,#0a5f54);
transition:width .5s ease}
.jpc-ow.complete .jpc-ow-fill{background:linear-gradient(90deg,#b9820f,#8f6608)}
.jpc-ow-msg{position:relative;z-index:1;margin-top:11px;font-size:.78rem;color:#3d5f4a;line-height:1.5}
.jpc-ow-cta{position:relative;z-index:1;margin-top:12px;width:100%;display:flex;align-items:center;
justify-content:center;gap:6px;padding:9px 14px;border-radius:999px;border:none;cursor:pointer;
font-weight:700;font-size:.78rem;background:#0c7a6a;color:#fff;text-decoration:none;transition:.18s}
.jpc-ow-cta:hover{background:#0a5f54}
.jpc-ow.complete .jpc-ow-cta{background:#8f6608}
.jpc-ow.complete .jpc-ow-cta:hover{background:#b9820f}
@media (prefers-color-scheme: dark){
.jpc-ow{background:#141f1b;border-color:#22352e;color:#eaf3ee}
.jpc-ow-name{color:#eaf3ee}.jpc-ow-eyebrow,.jpc-ow-plabel{color:#7fa093}
.jpc-ow-track{background:#182420;border-color:#1c2a25}.jpc-ow-msg{color:#b9d0c5}
}
/* El hueco del panel derecho no debe imponer su propia tarjeta: el widget ya
trae la suya. */
#rp-slot-libre.rp-slot-objetivos{background:none;border:0;box-shadow:none;padding:0}
/* ─────────────────────────────────────────────────────────────────────────
El atributo hidden gana SIEMPRE.
Por que hace falta esto: la regla del navegador es `[hidden]{display:none}`,
con especificidad (0,1,0). Cualquier regla de clase que declare display
—`.ni{display:flex}`, por ejemplo— empata con ella y gana por ir declarada
despues. Resultado: un elemento con hidden se seguia viendo. Paso con el
formulario del foro y volvio a pasar con los items de menu "Panel del tutor"
y "Panel de admin", que se veian con cuenta de alumno.
Se usa !important a proposito: si algo marca un elemento como hidden, la
intencion es que no se renderice, y ninguna regla de presentacion deberia
poder contradecir eso. Es la misma solucion que aplican los resets modernos.
Ojo: esto es cosmetica. La proteccion real vive en el backend, que devuelve
esTutor:false y puedeGestionar:false sin ningun dato.
───────────────────────────────────────────────────────────────────────── */
/* ═══ TAREA: formulario de entrega nativo ═══════════════════════════════════
La entrega ocurre dentro del campus. Las condiciones que se pintan (tipos de
archivo, cuantos, tamaño) las manda el servidor leidas de cada actividad:
este CSS no da por hecho ninguna.
───────────────────────────────────────────────────────────────────────── */
.at-bloque{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
padding:16px 18px 18px}
.at-cond{margin:0 0 14px;font-size:.78rem;color:var(--ink3);line-height:1.5}
.at-form{display:flex;flex-direction:column;gap:9px}
.at-lb{font-family:var(--head);font-weight:800;font-size:.68rem;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.at-txt{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
font-family:var(--body);font-size:.88rem;line-height:1.6;color:var(--ink);
background:var(--page);resize:vertical;min-height:120px}
.at-txt:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--gt);background:var(--surf)}
.at-ayuda{margin:0;font-size:.75rem;color:var(--ink3)}
.at-ayuda-mal{color:var(--coral);font-weight:700}
.at-drop{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.at-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.at-file-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
border:1.5px dashed var(--gs);background:var(--gt);color:var(--gd);
border-radius:var(--rp);padding:9px 18px;
font-family:var(--head);font-weight:700;font-size:.8rem}
.at-file-btn:hover{border-color:var(--g);background:color-mix(in srgb,var(--g) 10%,var(--surf))}
.at-file:focus-visible + .at-file-btn{outline:2px solid var(--g);outline-offset:2px}
.at-lista{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.at-vacio{font-size:.8rem;color:var(--ink3);font-style:italic}
.at-item{display:flex;align-items:center;gap:10px;background:var(--page);
border-radius:10px;padding:8px 12px;font-size:.82rem}
.at-item-n{flex:1;color:var(--ink);font-weight:600;word-break:break-all}
.at-item-t{color:var(--ink3);font-size:.74rem;white-space:nowrap}
.at-quitar{border:0;background:none;cursor:pointer;color:var(--coral);
font-family:var(--head);font-weight:700;font-size:.72rem;padding:2px 4px}
.at-quitar:hover{text-decoration:underline}
.at-pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.at-enviar{width:auto;align-self:flex-start;padding:11px 26px;
font-family:var(--head);font-weight:800;font-size:.82rem;
border:0;border-radius:var(--rp);cursor:pointer}
.at-aviso{font-size:.79rem;color:var(--ink2)}
.at-aviso-error{color:var(--coral);font-weight:700}
/* ═══ CUESTIONARIO: el intento, dentro del campus ═══════════════════════════
Una pregunta cada vez, con navegador numerado. Nada de esto pinta HTML de
Moodle: el servidor entrega enunciado y opciones ya extraidos.
───────────────────────────────────────────────────────────────────────── */
.qz-cab{margin-bottom:14px}
.qz-cab-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin-bottom:8px;font-size:.8rem;color:var(--ink3)}
.qz-cab-t strong{font-family:var(--head);font-weight:800;font-size:.92rem;color:var(--ink)}
.qz-prog{height:6px;border-radius:var(--rp);background:var(--page);overflow:hidden}
.qz-prog-b{height:100%;border-radius:var(--rp);background:var(--g);transition:width .25s ease}
.qz-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;
padding-bottom:16px;border-bottom:1px solid var(--line)}
.qz-n{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line);
background:var(--surf);color:var(--ink3);cursor:pointer;
font-family:var(--head);font-weight:700;font-size:.76rem;padding:0}
.qz-n:hover{border-color:var(--g);color:var(--gd)}
.qz-n-ok{background:var(--gt);border-color:var(--gs);color:var(--gd)}
.qz-n-act{border-color:var(--g);border-width:2px;color:var(--gd);
box-shadow:0 0 0 3px var(--gt)}
.qz-enun{font-size:1rem;line-height:1.65;color:var(--ink);margin-bottom:18px;font-weight:500}
.qz-enun p{margin:0 0 10px}
.qz-enun p:last-child{margin-bottom:0}
.qz-ops{display:flex;flex-direction:column;gap:9px}
.qz-op{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
border:1.5px solid var(--line);border-radius:var(--r);background:var(--surf);
padding:13px 15px;cursor:pointer;font-family:var(--body);font-size:.9rem;
line-height:1.55;color:var(--ink2)}
.qz-op:hover{border-color:var(--gs);background:var(--gt)}
.qz-op-sel{border-color:var(--g);border-width:2px;background:var(--gt);color:var(--ink);
padding:12px 14px}
.qz-let{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--page);
color:var(--ink3);display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.72rem;text-transform:lowercase}
.qz-op-sel .qz-let{background:var(--g);color:#fff}
.qz-txt{flex:1;min-width:0}
.qz-txt p{margin:0}
.qz-pista{margin:10px 0 0;font-size:.77rem;color:var(--ink3);font-style:italic}
.qz-nosop{margin:12px 0 0;padding:12px 14px;border-radius:var(--r);
background:color-mix(in srgb,var(--coral) 9%,var(--surf));color:var(--coral-d);
font-size:.84rem;line-height:1.55;font-weight:600}
.qz-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.qz-pie-d{display:flex;align-items:center;gap:10px;margin-left:auto}
.qz-entregar{border:0;border-radius:var(--rp);padding:10px 26px;cursor:pointer;
font-family:var(--head);font-weight:800;font-size:.82rem}
.qz-sec{border:1.5px solid var(--line);background:var(--surf);color:var(--ink2);
border-radius:var(--rp);padding:9px 18px;cursor:pointer;white-space:nowrap;
font-family:var(--head);font-weight:700;font-size:.79rem}
.qz-sec:hover:not(:disabled){border-color:var(--g);color:var(--gd)}
.qz-sec:disabled{opacity:.45;cursor:default}
.qz-estado{flex:1;font-size:.75rem;color:var(--ink3);text-align:center;min-width:110px}
.qz-estado-mal{color:var(--coral);font-weight:700}
.qz-link{border:0;background:none;padding:0;cursor:pointer;color:var(--gd);
font-family:var(--head);font-weight:700;font-size:.76rem}
.qz-link:hover{text-decoration:underline}
.qz-confirm{margin-top:22px;padding:16px 18px;border-radius:var(--r);
background:color-mix(in srgb,var(--amber) 10%,var(--surf));
border:1px solid color-mix(in srgb,var(--amber) 30%,var(--surf))}
.qz-confirm-t{margin:0 0 14px;font-size:.86rem;line-height:1.6;color:var(--ink)}
.qz-confirm-b{display:flex;gap:10px;flex-wrap:wrap}
/* ── corrección ── */
.qz-rev-res{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
background:var(--gt);border-radius:var(--r);padding:18px 20px;margin-bottom:22px}
.qz-rev-nota{font-family:var(--head);font-weight:900;font-size:2.4rem;color:var(--gd);
line-height:1}
.qz-rev-nota .lec-de{font-size:1.1rem;color:var(--ink3);font-weight:700}
.qz-rev-det{display:flex;flex-direction:column;gap:3px;font-size:.84rem;color:var(--ink2)}
.qz-rev-det strong{color:var(--ink)}
.qz-rev-q{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);
padding:16px 18px;margin-bottom:14px}
.qz-r-ok{border-left-color:var(--g)}
.qz-r-mal{border-left-color:var(--coral)}
.qz-r-med{border-left-color:var(--amber)}
.qz-rev-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.qz-rev-n{width:26px;height:26px;border-radius:50%;background:var(--page);color:var(--ink2);
display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.74rem}
.qz-rev-et{font-family:var(--head);font-weight:800;font-size:.72rem;
text-transform:uppercase;letter-spacing:.04em;color:var(--ink3)}
.qz-r-ok .qz-rev-et{color:var(--gd)}
.qz-r-mal .qz-rev-et{color:var(--coral)}
.qz-rev-p{margin-left:auto;font-family:var(--head);font-weight:800;font-size:.8rem;color:var(--ink2)}
.qz-rev-q .qz-enun{font-size:.92rem;margin-bottom:14px}
.qz-op-rev{cursor:default;background:var(--surf)}
.qz-op-rev:hover{border-color:var(--line);background:var(--surf)}
.qz-op-elegida{border-color:var(--ink3)}
.qz-op-ok{border-color:var(--g);background:var(--gt)}
.qz-op-ok .qz-let{background:var(--g);color:#fff}
.qz-op-mal{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 7%,var(--surf))}
.qz-op-mal .qz-let{background:var(--coral);color:#fff}
.qz-tu{flex-shrink:0;font-family:var(--head);font-weight:800;font-size:.64rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
background:var(--page);border-radius:var(--rp);padding:3px 9px;align-self:center}
.qz-rev-sol{margin:12px 0 0;font-size:.84rem;color:var(--gd);font-weight:700;line-height:1.5}
.qz-rev-fb{margin:8px 0 0;font-size:.82rem;color:var(--ink2);line-height:1.55}
@media (max-width:640px){
.qz-rev-nota{font-size:1.9rem}
.qz-pie{gap:8px}
.qz-estado{order:3;flex-basis:100%;text-align:left}
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE + CAPA DE APP INSTALADA
Sigue el mockup aprobado ("Campus EELL Responsive"):
escritorio > 1024px el de siempre, sin cambios de estructura
tablet 641–1024px sidebar tras el icono ☰; el panel derecho se apila
debajo del contenido, con los widgets en pareja
movil vertical ≤640px barra inferior de 4 accesos + "Mas"
movil horizontal la barra inferior pasa a carril de iconos A LA
DERECHA y el centro deja solo el contenido del curso
Nada de esto toca el escritorio: todas las reglas viven dentro de una
@media, salvo las de los elementos nuevos, que nacen ocultos.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Elementos nuevos: por defecto NO existen (escritorio intacto) ── */
/* Apagado por defecto de TODO lo que solo existe en tablet/movil. Tiene que
estar aqui, antes de las @media que lo encienden: estas reglas y las de la
@media tienen la misma especificidad (0,1,0), asi que decide el ORDEN del
fichero. Poner el display:none mas abajo apagaba el elemento en todas las
pantallas — pasó con .chm y .nb-marca en esta misma ronda. */
.nb-menu{display:none}
.sb-velo{display:none}
.chm{display:none}
.nb-marca{display:none}
.act-volver{display:none}
/* La barra inferior y la hoja "Mas" nacen ocultas; lo que sigue es su ASPECTO,
que es el mismo en vertical y en horizontal. La COLOCACION (abajo a lo ancho,
o carril a la derecha) la deciden las dos @media de mas abajo.
Estaba todo dentro de @media (max-width:640px), y eso fallaba: un movil
girado mide 844 de ancho, no entraba en ese bloque, y se quedaba sin
position:fixed ni fondo — el carril salia en flujo y a la izquierda. */
.mbar{
display:none;position:fixed;z-index:150;
background:var(--surf);
box-shadow:0 -2px 14px rgba(20,30,25,.07);
}
.mb-b{
border:0;background:none;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;padding:7px 2px 6px;color:var(--ink3);position:relative;
font-family:var(--head);font-weight:700;font-size:.6rem;
}
.mb-b svg{width:20px;height:20px;flex-shrink:0}
.mb-b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mb-b.on{color:var(--gd)}
.mb-b.on svg{stroke-width:2.4}
/* "Panel" sin destino (alumno): se atenua para que se vea que todavia no lleva
a ningun sitio, en vez de parecer un boton normal que no responde. */
.mb-b-inerte{opacity:.4}
.mb-b-inerte:hover{opacity:.4}
.mb-globo{
position:absolute;top:4px;left:50%;margin-left:6px;
background:var(--g);color:#fff;border-radius:var(--rp);
min-width:15px;height:15px;padding:0 4px;
display:flex;align-items:center;justify-content:center;
font-size:.56rem;font-weight:800;line-height:1;
}
/* ═══ TABLET: 641–1024px ═══════════════════════════════════════════════ */
@media (max-width:1024px){
.nb-menu{
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;flex-shrink:0;padding:0;
border:0;border-radius:10px;background:none;color:var(--ink2);cursor:pointer;
}
.nb-menu:hover{background:var(--gt);color:var(--g)}
.nb-menu svg{width:20px;height:20px}
/* El sidebar deja de ocupar columna y pasa a cajon deslizante. */
.sidebar{
position:fixed;top:0;left:0;bottom:0;z-index:200;
height:100%;width:min(84vw, 300px);
transform:translateX(-100%);
transition:transform .22s ease;
border-right:1px solid var(--line);
box-shadow:var(--shl);
padding-top:calc(env(safe-area-inset-top, 0px) + 14px);
}
.sidebar.sb-abierto{transform:translateX(0)}
.sb-velo{
display:block;position:fixed;inset:0;z-index:190;
background:rgba(10,25,18,.44);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
/* Una sola columna: el panel derecho baja debajo del contenido.
minmax(0,1fr) y no "1fr": "1fr" es minmax(AUTO,1fr), y ese auto impide que
la pista baje del min-content de lo que lleva dentro. Con un texto en
white-space:nowrap ahi dentro (.ses-name, en Mis presenciales), la pista se
iba a 413px en una pantalla de 390 y aparecian 23px de scroll lateral.
Medido: ocultar .rp devolvia el scrollWidth a 390 exacto.
Se arregla en la rejilla y no en cada texto, para que no vuelva a salir con
cualquier otro contenido largo que se añada mañana. */
.cr{grid-template-columns:minmax(0,1fr)}
.cr .content,
.cr .campus-view,
.cr > .campus-footer{grid-column:1}
.cr .rp{
grid-column:1;grid-row:auto;
width:auto;border-left:0;border-top:1px solid var(--line);
position:static;max-height:none;overflow:visible;
padding:18px 22px 30px;
/* Los widgets en pareja donde el ancho lo permite. auto-fit deja una sola
columna en cuanto no caben dos de 300px, sin otro breakpoint. */
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:14px;align-items:start;
}
/* El modo lectura pierde su tercera columna (el indice ya se oculta en
max-width:1100px) y el papel pasa a ocupar el ancho. */
.cr:has(#lec-lateral){grid-template-columns:minmax(0,1fr)}
.cr:has(#lec-lateral) .content,
.cr:has(#lec-lateral) .rp,
.cr:has(#lec-lateral) > .campus-footer{grid-column:1}
/* grid-row:auto es imprescindible, no cosmetico: la regla de escritorio
.cr:has(#lec-lateral) .rp fija "grid-row:1 / span 2", y como :has() lleva
un ID gana en especificidad a .cr .rp de esta misma @media. Sin esto el
panel de lectura ("Tu lectura" + indice) se quedaba en la FILA 1, por
encima de la cabecera compacta y del contenido, y empujaba el texto ~1000px
hacia abajo en movil vertical. Medido antes del arreglo: papel en top=1038.
Solo pasaba en modo lectura, porque solo ahi existe #lec-lateral. */
.cr:has(#lec-lateral) .rp{grid-row:auto}
.nb-search{width:auto;flex:1;min-width:0;max-width:320px}
.navbar{padding:0 14px;gap:10px}
.nb-logo-img{height:34px}
}
/* ═══ MOVIL: ≤640px ════════════════════════════════════════════════════ */
@media (max-width:640px){
.navbar{height:auto;padding:8px 12px;gap:8px}
.nb-logo-img{height:30px}
/* El buscador y el selector de idioma no caben; el idioma sigue disponible
desde "Mas" > Mi perfil, y el buscador vuelve en cuanto hay ancho. */
.nb-search{display:none}
.lang-toggle{display:none}
.content{padding:14px 14px 0}
.cr .rp{padding:14px 14px 24px;grid-template-columns:1fr}
/* Sitio para la barra inferior: sin esto la ultima tarjeta queda debajo. */
.shell{padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px))}
/* ── BARRA INFERIOR: abajo, a lo ancho ── */
.mbar{display:flex;left:0;right:0;bottom:0;
border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom, 0px)}
.mb-b{flex:1;min-width:0}
/* (4) Fuera el panel derecho de la vista de inicio (Mi progreso, Mis
presenciales, Zoom y Constructora) y, en las vistas de ACTIVIDAD, las tres
tarjetas que son resumen del curso o duplican algo que ya esta a un toque:
"Tu progreso", la de Zoom y "Este foro".
Lo que SI se queda en las actividades: "Este intento" del SCORM (intocable
por encargo), y por el mismo criterio las otras fichas de la actividad
abierta ("Tu cuestionario", "Tu tarea") y "En este modulo", que es la
navegacion Anterior/Siguiente y no un widget de resumen. */
#view-curso .rp{display:none}
#eell-act-panel [data-rpc="progreso"],
#eell-act-panel [data-rpc="zoom"],
#eell-act-panel [data-rpc="foro"]{display:none}
/* (3) La cabecera grande en degradado (~150px) se cambia por la compacta de
una fila (~56px). El diseño es el del mockup aprobado, bloque 05.
Ahora .chm es hija de .cr, no de .content, asi que sirve a TODAS las
vistas: la de inicio, las de actividad y las demas. Por eso se esconde
tambien la cabecera grande de las actividades (eellCabecera pinta otro .ch)
y los titulos de texto de las otras vistas (.cv-hd/.cv-sub), que decian lo
mismo que ahora dice la tarjeta. */
.ch{display:none}
.cv-hd,.cv-sub{display:none}
.chm{display:flex}
/* (1) "Tu progreso en el curso" sobra en la vista de inicio: la cabecera
compacta ya da el porcentaje dos dedos mas arriba, y este bloque ocupaba
~170px con las tres cifras apiladas. En las vistas de ACTIVIDAD se queda,
que ahi el dato es otro (el cierre de la actividad). */
#view-curso .prog-strip{display:none}
/* (5) Barra superior: el logotipo completo ocupa dos lineas de texto en
390px. Se cambia por la hoja de la marca y "EELL". */
.nb-logo-img{display:none}
.nb-marca{display:flex}
/* (1) Fuera el ☰ en vertical. Ya no hace falta: todo lo que vivia detras del
cajon esta ahora a un toque — las cuatro secciones y "Panel" en la barra de
abajo, Zoom/Progreso/Calendario/Comunidad en los mini-accesos, y la ficha
del alumno con su cierre de sesion en el avatar.
En tablet se queda, que ahi no hay barra inferior. */
.nb-menu{display:none}
/* (5) Y en movil la fila se parte: la etiqueta reserva 90px fijos que en
324px de ancho no sobran. */
.pf-row{flex-wrap:wrap;row-gap:2px}
.pf-label{min-width:0}
/* (6) El calendario, al ancho del dispositivo. Tenia dos problemas:
el padding de .campus-view seguia en 22px (el contenido del curso ya
estaba en 14) y .cal-aside estaba clavado en 280px, asi que las tarjetas
de "Hoy" y "Proximas fechas" se quedaban 66px cortas. */
.campus-view{padding:14px 14px 0}
/* El "Volver al curso" de la cabecera grande queda oculto con ella; el que se
ve en movil es .act-volver, que va fuera de la tarjeta. */
.act-volver{display:inline-flex}
.cal-wrap{gap:12px}
.cal-main{min-width:0;width:100%}
.cal-aside{width:auto;flex:1 1 100%;min-width:0}
/* La cabecera de unidad es una fila de cuatro cosas: codigo, titulo,
contador y chevron. El contador va en nowrap, asi que a 390px se quedaba
~180px y el titulo se partia en cuatro lineas. Aqui el contador baja a su
propia linea: el titulo recupera el ancho completo.
El orden se fuerza porque en el DOM el contador va ANTES del chevron. */
.unit-hdr{flex-wrap:wrap;row-gap:2px;position:relative;padding-right:32px}
.unit-hdr h4{min-width:0;flex:1 1 auto}
/* El chevron sale del flujo. Dentro de el, al envolver, se quedaba solo en
una linea y alineado a la izquierda: quedaba como un icono suelto en medio
de la tarjeta. Anclado arriba a la derecha se lee como lo que es, y el
giro al abrir sigue funcionando porque solo usa rotate(). */
.unit-chevron{position:absolute;right:13px;top:13px}
.unit-meta{order:3;flex-basis:100%;white-space:normal}
}
/* ═══ MOVIL HORIZONTAL ════════════════════════════════════════════════
El disparador es el ALTO, no el ancho: un movil girado tiene poco alto y
bastante ancho. Con max-height se cubren todos los tamaños de telefono sin
afectar a una tablet en horizontal, que si tiene alto de sobra. */
@media (orientation:landscape) and (max-height:520px){
/* La barra pasa a ser un carril vertical A LA DERECHA. Se repite aqui todo lo
que depende de la colocacion, porque este bloque puede entrar sin que haya
entrado el de max-width:640px (un movil girado es ancho). */
.mbar{
display:flex;flex-direction:column;justify-content:center;
top:0;bottom:0;right:0;left:auto;width:58px;
border-top:0;border-left:1px solid var(--line);
padding:0 env(safe-area-inset-right, 0px) 0 0;
box-shadow:-2px 0 14px rgba(20,30,25,.07);
}
.mb-b{flex:0 0 auto;padding:11px 0;font-size:0;gap:0}
/* Carril de SOLO iconos: la etiqueta se retira de la vista pero sigue
existiendo para los lectores de pantalla (no es display:none). */
.mb-b span{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
.mb-b svg{width:21px;height:21px}
.mb-globo{top:6px;left:auto;right:11px;margin-left:0}
/* Los mini-accesos se quedan en la CABECERA tambien en horizontal, no en el
carril. Se intento lo segundo y no sale, por dos medidas concretas:
1) no caben. Los 4 accesos de navegacion ocupan 156px y el grupo de 6
(4 mini-accesos + campana + avatar) otros 233px: 389px en un carril de
390px de alto, con solape medido de 5px. Y eso en un telefono de los
altos; en uno de 320px de alto el solape seria de 70px.
2) el carril se come los clics. .nb-right vive dentro de .navbar, que
tiene z-index:100 y position:sticky, es decir crea contexto de
apilamiento: por mucho z-index que se le ponga al grupo, se pinta
DENTRO de la capa 100 y el carril (150) queda por encima. Comprobado
con elementFromPoint: en el centro del boton de Calendario el clic lo
recibia nav.mbar, no el boton.
En la cabecera hay 844px de ancho de sobra y todo queda accesible, asi que
se dejan ahi, solo un poco mas pequeños. Ver la nota del informe. */
.hwb{width:30px;height:30px;border-radius:9px}
.hwb svg{width:17px;height:17px}
.hw{gap:4px}
.nb-right{gap:6px}
/* La cabecera compacta tambien aqui. Un movil girado tiene 390px de alto: la
tarjeta grande se comia 148 de ellos, el 38% de la pantalla. Mismo cambio
que en vertical y con el mismo contexto por vista. */
.ch{display:none}
.cv-hd,.cv-sub{display:none}
.chm{display:flex}
.act-volver{display:inline-flex}
#view-curso .prog-strip{display:none}
/* Y la marca reducida: el logotipo completo lleva height:52px EN LINEA, que
gana a cualquier regla de hoja de estilos, asi que en un movil girado de
390px de alto la cabecera se iba a 64px. Se apaga con display, que si
manda sobre el estilo en linea de height. */
.nb-logo-img{display:none}
.nb-marca{display:flex}
/* Sitio para el carril a la derecha, no abajo. */
.shell{padding-bottom:0;padding-right:calc(58px + env(safe-area-inset-right, 0px))}
/* En el centro, SOLO el contenido del curso. Los widgets de Zoom y
Constructora se quitan de la columna: ya se llega a ellos por el carril y
por "Mas", y en una pantalla tan baja robaban todo el alto util. */
.cr .rp{display:none}
/* El menu ☰ y el cajon tambien hacen falta aqui: el bloque de tablet
(max-width:1024px) no entra a 844px de ancho... si entra, pero un movil de
900px girado no, asi que se repite lo imprescindible. */
.nb-menu{display:flex;align-items:center;justify-content:center;
width:34px;height:34px;flex-shrink:0;padding:0;
border:0;border-radius:10px;background:none;color:var(--ink2);cursor:pointer}
.nb-menu svg{width:19px;height:19px}
.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:200;height:100%;
width:min(70vw,280px);transform:translateX(-100%);transition:transform .22s ease;
box-shadow:var(--shl)}
.sidebar.sb-abierto{transform:translateX(0)}
.sb-velo{display:block;position:fixed;inset:0;z-index:190;
background:rgba(10,25,18,.44)}
.navbar{height:auto;padding:6px 12px}
.nb-logo-img{height:26px}
.nb-search{display:none}
.lang-toggle{display:none}
.content{padding:12px 14px 0}
}
/* ═══ TABLAS DENTRO DEL PAPEL DEL LECTOR ══════════════════════════════
El HTML de los protocolos de abusos trae tablas de gestion del riesgo con 4
columnas y celdas de mas de 120 caracteres. El lector no tenia NINGUNA regla
para
, y en movil eso se notaba: medido en 390px, la tabla de riesgos
generales pedia 427px sobre un papel de 362 y arrastraba la pagina entera 68px
a lo ancho (las otras dos, 24 y 31px).
Con esto la tabla se desplaza DENTRO de su propia caja y la pagina no se
mueve. Va acotado a movil a proposito: en escritorio la tabla ya cabia (538
de 668) y se lee bien, asi que ahi no se toca nada. */
@media (max-width:640px){
.lec-papel table{display:block;max-width:100%;overflow-x:auto;
-webkit-overflow-scrolling:touch}
.lec-papel th,.lec-papel td{vertical-align:top}
}
/* ═══ §19 (a) MODO LECTURA A UNA COLUMNA ══════════════════════════════
El indice lateral ya desaparecia por debajo de 1100px, pero el papel seguia
con el padding y el ancho de escritorio. Aqui se le da el ancho completo y se
ajusta la tipografia para que la linea no quede demasiado corta ni el margen
se coma la pantalla. */
@media (max-width:640px){
.modo-lectura .lec-papel{padding:20px 16px 20px;max-width:100%}
.modo-lectura .lec-scroll{padding:0}
.lec-h2{font-size:1.2rem}
.lec-stats{grid-template-columns:1fr 1fr}
.lec-ring{width:78px}
}
/* ═══ §19 (b) LAS TABLAS DE TAREA Y CUESTIONARIO NO SE DESBORDAN ══════
.aq-tabla-wrap ya tenia overflow-x:auto, pero la tabla con 6 columnas
(incluida la de "Revisar") forzaba un ancho minimo mayor que la pantalla y el
desbordamiento se lo comia la PAGINA, no el contenedor. Dos medidas:
1) el contenedor recibe el ancho maximo real y el scroll propio;
2) por debajo de 520px la tabla pasa a fichas: cada fila se convierte en un
bloque con sus etiquetas, que es legible sin scroll horizontal.
Las etiquetas salen de data-lb, que pone el JS al pintar la fila. */
.aq-tabla-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.aq-tabla{min-width:0}
@media (max-width:520px){
.aq-tabla-wrap{overflow-x:visible}
.aq-tabla{width:100%;display:block}
.aq-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%)}
.aq-tabla tbody,.aq-tabla tr,.aq-tabla td{display:block;width:auto}
.aq-tabla tr{border:1px solid var(--line);border-radius:var(--r);
padding:10px 12px;margin-bottom:9px;background:var(--surf)}
.aq-tabla tbody tr:hover{background:var(--surf)}
.aq-tabla td{border:0;padding:4px 0;display:flex;align-items:baseline;gap:10px}
.aq-tabla td::before{
content:attr(data-lb);flex:0 0 auto;min-width:82px;
font-family:var(--head);font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);
}
.aq-tabla td.aq-td-n{text-align:left;padding-right:0!important}
/* La celda del boton "Revisar" no necesita etiqueta. */
.aq-tabla td[data-lb=""]::before,
.aq-tabla td:not([data-lb])::before{content:none;min-width:0}
.aq-fila{flex-direction:column;align-items:flex-start;gap:2px}
.aq-fila strong{text-align:left}
}
/* Volver al curso en movil. Nace apagado: en escritorio el que vale es el que
va dentro de la cabecera grande. */
/* Sin display aqui: lo apaga la regla de arriba y lo enciende la @media. */
.act-volver{align-items:center;gap:6px;margin-bottom:10px;
border:0;background:none;padding:4px 0;cursor:pointer;
font-family:var(--head);font-weight:700;font-size:.78rem;color:var(--gd)}
.act-volver svg{width:14px;height:14px;flex-shrink:0}
.act-volver:hover{text-decoration:underline}
/* ═══ MINI-ACCESOS DE LA CABECERA Y SUS PANELES ═════════════════════════
Van en la cabecera de siempre, sobre su fondo blanco: no hay segunda barra.
Relleno en tinte claro y simbolo en color fuerte, como en el mockup final.
───────────────────────────────────────────────────────────────────────── */
.nb-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hw{display:flex;align-items:center;gap:5px}
.hwb{position:relative;flex:0 0 auto;border:0;cursor:pointer;padding:0;
width:34px;height:34px;border-radius:11px;
display:flex;align-items:center;justify-content:center;transition:.14s}
.hwb svg{width:19px;height:19px;display:block}
.hwb:hover{filter:brightness(.96)}
.hwb.on{box-shadow:0 0 0 2px var(--surf), 0 0 0 3.5px currentColor}
/* Los cuatro tintes. El color del simbolo es el "color" de la regla, asi que
los trazos con stroke="currentColor" lo heredan y el foco lo reutiliza. */
.hw-pro{background:#fcf1dc;color:#c9860a}
.hw-cal{background:#fbe7e0;color:var(--coral)}
.hw-zoom{background:#e4effc;color:#1f6fd0}
.hw-com{background:var(--gt);color:var(--gd)}
.hwb-dot{position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;
background:var(--coral);border:2px solid var(--surf)}
/* El avatar pasa a ser boton: antes era un div sin ninguna accion. */
.nb-av{border:0;padding:0;cursor:pointer;overflow:hidden;position:relative}
.nb-av.on{box-shadow:0 0 0 2px var(--surf), 0 0 0 3.5px var(--g)}
.nb-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* ── el panel desplegable ── */
.hp{position:absolute;top:calc(100% + 7px);right:14px;z-index:180;
width:min(340px, calc(100vw - 24px));
background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:var(--shl);padding:14px;
max-height:min(70vh, 520px);overflow-y:auto;
animation:hp-baja .16s ease}
@keyframes hp-baja{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.hp-t{font-family:var(--head);font-weight:800;font-size:.66rem;
text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin:0 0 10px}
.hp-sec{margin-bottom:14px}
.hp-sec:last-child{margin-bottom:0}
.hp-sec + .hp-sec{padding-top:13px;border-top:1px solid var(--line)}
.hp-h{font-family:var(--head);font-weight:800;font-size:.78rem;color:var(--ink);
margin:0 0 7px;display:flex;align-items:baseline;gap:7px}
.hp-h em{margin-left:auto;font-style:normal;font-weight:700;font-size:.68rem;color:var(--ink3)}
.hp-cifra{font-family:var(--head);font-weight:900;font-size:1.5rem;line-height:1;color:var(--gd)}
.hp-cifra small{font-size:.72rem;font-weight:700;color:var(--ink3)}
.hp-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:5px 0;font-size:.79rem;color:var(--ink2)}
.hp-fila + .hp-fila{border-top:1px solid var(--line)}
.hp-fila b{color:var(--ink);font-weight:700;text-align:right}
.hp-txt{margin:0;font-size:.78rem;line-height:1.5;color:var(--ink2)}
.hp-vacio{margin:0;font-size:.78rem;color:var(--ink3);font-style:italic}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
border:0;border-radius:var(--rp);cursor:pointer;background:var(--gd);color:#fff;
padding:9px 16px;font-family:var(--head);font-weight:800;font-size:.76rem;
text-decoration:none;margin-top:9px}
.hp-btn:hover{background:var(--g)}
.hp-btn2{background:var(--surf);color:var(--ink2);border:1.5px solid var(--line)}
.hp-btn2:hover{background:var(--page);color:var(--ink);border-color:var(--g)}
.hp-link{display:inline-block;margin-top:9px;font-family:var(--head);font-weight:700;
font-size:.74rem;color:var(--gd);cursor:pointer;background:none;border:0;padding:0}
.hp-link:hover{text-decoration:underline}
.hp-tarjeta{background:var(--gt);border-radius:var(--r);padding:11px 12px;margin-bottom:9px}
.hp-tarjeta.coral{background:color-mix(in srgb, var(--coral) 9%, var(--surf))}
.hp-tarjeta.azul{background:#eff5fd}
.hp-tarjeta .k{font-family:var(--head);font-weight:800;font-size:.6rem;
text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin-bottom:3px}
.hp-tarjeta .n{font-family:var(--head);font-weight:800;font-size:.84rem;color:var(--ink);line-height:1.3}
.hp-tarjeta .d{font-size:.73rem;color:var(--ink2);margin-top:2px}
.hp-id{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.hp-id-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;
background:linear-gradient(135deg,var(--g),var(--gd));
display:flex;align-items:center;justify-content:center;
color:#fff;font-family:var(--head);font-weight:800;font-size:.92rem}
.hp-id-av img{width:100%;height:100%;object-fit:cover;display:block}
.hp-id-n{font-family:var(--head);font-weight:800;font-size:.88rem;color:var(--ink)}
.hp-id-r{font-size:.73rem;color:var(--ink3)}
.hp-acc{display:flex;flex-direction:column;gap:4px}
.hp-acc button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
border:0;background:none;cursor:pointer;padding:9px 8px;border-radius:9px;
font-family:var(--body);font-size:.83rem;font-weight:500;color:var(--ink)}
.hp-acc button svg{width:17px;height:17px;opacity:.6;flex-shrink:0}
.hp-acc button:hover{background:var(--gt)}
/* ═══ CABECERA DE CURSO COMPACTA (movil vertical) ═══════════════════════
Una sola fila de ~56px, segun el mockup aprobado (bloque 05): distintivo con
el codigo, nombre en una linea con puntos suspensivos, porcentaje grande a la
derecha y una barra de 3px pegada abajo como unico rastro de color.
Nace en display:none y solo la enciende la @media de movil.
───────────────────────────────────────────────────────────────────────── */
/* Ojo: aqui NO va el display. Lo apaga la regla de arriba y lo enciende la
@media de movil; declararlo tambien aqui lo volveria a apagar por orden. */
.chm{position:relative;overflow:hidden;
align-items:center;gap:11px;
background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:8px 12px 12px;margin-bottom:14px}
.chm-chip{width:36px;height:36px;border-radius:9px;flex:0 0 auto;
background:linear-gradient(135deg,var(--coral),var(--gd));
display:flex;align-items:center;justify-content:center;
font-family:var(--head);font-weight:800;font-size:.58rem;color:#fff;
letter-spacing:.02em}
.chm-mid{flex:1;min-width:0}
.chm-t{font-family:var(--head);font-weight:700;font-size:.86rem;color:var(--ink);
line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm-s{font-size:.68rem;font-weight:600;color:var(--ink3);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chm-pct{flex:0 0 auto;font-family:var(--head);font-weight:900;
font-size:1.12rem;line-height:1;color:var(--gd)}
.chm-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gs)}
.chm-bar i{display:block;height:100%;width:0;background:var(--gd);
transition:width .45s ease}
/* ═══ MARCA REDUCIDA DE LA BARRA SUPERIOR (movil vertical) ═══ */
.nb-marca{align-items:center;gap:7px;flex-shrink:0}
.nb-marca img{width:26px;height:26px;display:block;flex-shrink:0}
.nb-marca b{font-family:var(--head);font-weight:900;font-size:.98rem;
color:var(--gd);letter-spacing:-.01em;line-height:1}
/* ═══ AVISO DE INSTALACION ══════════════════════════════════════════════
Tarjeta flotante con el lenguaje visual del campus (superficie, radio,
sombra y verde de marca). Se pinta desde public/js/pwa.js y sale tanto en el
login como al entrar. En movil se coloca por encima de la barra inferior para
no taparla, y respeta el area segura de la parte de abajo.
───────────────────────────────────────────────────────────────────────── */
#pwa-aviso{position:fixed;left:0;right:0;bottom:0;z-index:300;
pointer-events:none;display:flex;justify-content:center;
padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px))}
.pwa-av{
pointer-events:auto;position:relative;
width:100%;max-width:420px;
display:flex;align-items:flex-start;gap:13px;
background:var(--surf);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:var(--shl);padding:15px 16px 14px;
transform:translateY(14px);opacity:0;transition:transform .24s ease,opacity .24s ease;
}
.pwa-av-on{transform:none;opacity:1}
.pwa-av-icon{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:block}
.pwa-av-txt{flex:1;min-width:0}
.pwa-av-t{margin:1px 0 4px;font-family:var(--head);font-weight:800;
font-size:.9rem;color:var(--ink);letter-spacing:-.01em}
.pwa-av-d{margin:0;font-size:.79rem;line-height:1.5;color:var(--ink2)}
.pwa-av-d strong{color:var(--ink);font-weight:700}
.pwa-av-share{width:13px;height:13px;vertical-align:-2px;color:var(--gd)}
.pwa-av-btns{flex-basis:100%;display:flex;align-items:center;gap:8px;
margin-top:12px;padding-left:59px}
.pwa-av-ok{border:0;border-radius:var(--rp);cursor:pointer;
background:var(--gd);color:#fff;padding:9px 20px;
font-family:var(--head);font-weight:800;font-size:.79rem}
.pwa-av-ok:hover:not(:disabled){background:var(--g)}
.pwa-av-ok:disabled{opacity:.6;cursor:default}
.pwa-av-no{border:0;background:none;cursor:pointer;color:var(--ink3);
font-family:var(--head);font-weight:700;font-size:.77rem;padding:9px 6px}
.pwa-av-no:hover{color:var(--ink2)}
.pwa-av-x{position:absolute;top:6px;right:8px;width:26px;height:26px;
border:0;background:none;cursor:pointer;color:var(--ink3);
font-size:1.15rem;line-height:1;border-radius:50%}
.pwa-av-x:hover{background:var(--page);color:var(--ink)}
.pwa-av{flex-wrap:wrap}
/* Sobre la barra inferior, no debajo. */
@media (max-width:640px){
#pwa-aviso{padding-bottom:calc(58px + 12px + env(safe-area-inset-bottom, 0px))}
.pwa-av-btns{padding-left:0}
}
@media (orientation:landscape) and (max-height:520px){
#pwa-aviso{padding-right:calc(58px + 14px + env(safe-area-inset-right, 0px));
padding-bottom:12px}
.pwa-av{max-width:400px}
}
/* En escritorio se ancla abajo a la derecha, como cualquier aviso del sistema. */
@media (min-width:1025px){
#pwa-aviso{justify-content:flex-end;padding:0 22px 22px}
}
/* Movil: la ficha de recurso pasa a dos lineas para que el titulo respire y el
boton no empuje nada fuera del ancho. */
@media (max-width:640px){
.tut-tab{padding:10px 12px;font-size:.78rem}
.rec-mod{padding:14px}
.rec-it{flex-wrap:wrap;gap:10px}
.rec-cuerpo{flex:1 1 100%;order:2;min-width:0}
.rec-ico{order:1}
.rec-acc{order:1;margin-left:auto}
}
/* ════════════════════════════════════
SIDEBAR PLEGABLE — solo escritorio (>1024px)
A 1024px o menos el sidebar ya es un cajon deslizante, asi que aqui no entra
nada de esto. El contenido central no necesita ninguna regla: .cr es flex:1
y se queda con el ancho que libera el sidebar.
════════════════════════════════════ */
@media (min-width:1025px){
.sb-toggle{
display:flex;align-items:center;gap:9px;
width:calc(100% - 16px);margin:2px 8px 2px;padding:7px 14px;
border:0;background:none;border-radius:9px;cursor:pointer;
color:var(--ink3);font-family:var(--head);font-weight:700;font-size:.66rem;
text-transform:uppercase;letter-spacing:.07em;transition:.14s}
.sb-toggle:hover{background:var(--gt);color:var(--g)}
.sb-toggle svg{width:15px;height:15px;flex-shrink:0;transition:transform .18s ease}
html.sb-plegado .sidebar{width:var(--sw-min)}
html.sb-plegado .sb-toggle{justify-content:center;padding:7px 0;gap:0}
html.sb-plegado .sb-toggle svg{transform:rotate(180deg)}
html.sb-plegado .sb-toggle-tx{display:none}
/* Los rotulos de grupo se quedan como un filete: separan sin ocupar. */
html.sb-plegado .sidebar .sl{font-size:0;padding:10px 14px 6px}
html.sb-plegado .sidebar .sl::after{content:"";display:block;height:1px;
background:var(--line)}
/* Las entradas: solo el icono, centrado. El texto se oculta; el nombre sigue
disponible como title/aria-label (lo pone campus.js). */
html.sb-plegado .ni{position:relative;justify-content:center;gap:0;
padding:9px 0;margin:2px 8px;width:calc(100% - 16px)}
html.sb-plegado .ni > span:not(.nbadge){display:none}
html.sb-plegado .ni svg{width:19px;height:19px}
/* El aviso no desaparece: se convierte en un punto sobre el icono. */
html.sb-plegado .ni .nbadge{position:absolute;top:5px;right:12px;margin:0;
min-width:7px;height:7px;padding:0;font-size:0;line-height:0;border-radius:50%}
/* La tarjeta de "Proxima sesion en directo" no cabe en un carril de iconos.
Se oculta plegado; al desplegar vuelve tal cual. */
html.sb-plegado .sb-zoom{display:none}
html.sb-plegado .sb-jpc{justify-content:center;padding:8px 0;margin:0 8px 6px}
html.sb-plegado .sb-jpc-label{display:none}
html.sb-plegado .sb-user{justify-content:center;padding:10px 0;margin:0 8px;gap:0}
html.sb-plegado .sb-user > div:not(.su-av){display:none}
}
/* ── Memorias de Practicas (Panel de admin) ── */
.mem-vacio{font-size:.85rem;color:var(--ink3);line-height:1.6}
.mem-item{border:1.5px solid var(--line);border-radius:12px;background:var(--surf);
padding:16px 18px;margin-bottom:12px}
.mem-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.mem-al{font-family:var(--head);font-weight:800;font-size:.95rem;color:var(--ink)}
.mem-curso{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:var(--gd);
background:var(--gt);border-radius:var(--rp);padding:2px 9px}
.mem-meta{font-size:.74rem;color:var(--ink3);margin:0 0 12px;line-height:1.6}
.mem-fich{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--ink2);
border:1px solid var(--line);border-radius:8px;padding:4px 10px;margin:0 6px 8px 0}
.mem-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
border-top:1px solid var(--line);padding-top:12px}
.mem-campo{display:flex;flex-direction:column;gap:4px}
.mem-campo label{font-family:var(--head);font-weight:800;font-size:.64rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.mem-campo input{border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;
font-family:var(--body);font-size:.85rem;color:var(--ink);background:var(--page)}
.mem-campo input:focus{border-color:var(--g);background:var(--surf);outline:none}
.mem-nota input{width:110px}
.mem-pdf input{max-width:260px;font-size:.78rem}
.mem-enviar{border:0;border-radius:var(--rp);background:var(--g);color:#fff;
padding:9px 18px;font-family:var(--head);font-weight:800;font-size:.8rem;cursor:pointer;
transition:background .14s}
.mem-enviar:hover:not(:disabled){background:var(--gd)}
.mem-enviar:disabled{opacity:.6;cursor:default}
.mem-estado{width:100%;font-size:.8rem;font-weight:600;color:var(--gd);margin:8px 0 0}
.mem-estado-error{color:var(--coral)}
.mem-hecha{opacity:.72}
.mem-aviso{border-left:3px solid var(--coral);background:#fdeee8;border-radius:0 10px 10px 0;
padding:12px 16px;margin-bottom:14px;font-size:.8rem;color:var(--coral-d,#a33)}
/* ── Horas online reales (Panel de admin) ── */
.hor-barra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hor-campo{display:flex;flex-direction:column;gap:4px}
.hor-campo label{font-family:var(--head);font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.hor-campo select,.hor-campo input{border:1.5px solid var(--line);border-radius:9px;
padding:8px 11px;font-family:var(--body);font-size:.84rem;color:var(--ink);background:var(--page)}
.hor-campo select:focus,.hor-campo input:focus{border-color:var(--g);background:var(--surf);outline:none}
.hor-csv{border:1.5px solid var(--line);border-radius:var(--rp);background:var(--surf);
color:var(--ink2);text-decoration:none;padding:9px 16px;font-family:var(--head);
font-weight:800;font-size:.78rem;transition:.14s;white-space:nowrap}
.hor-csv:hover{border-color:var(--gs);background:var(--gt);color:var(--gd)}
/* Referencia de diseño: informativa. Nada de rojo ni de iconos de alerta. */
.hor-ref{border:1.5px solid var(--line);background:var(--surf);border-radius:12px;
padding:14px 18px;margin-bottom:16px;font-size:.82rem;color:var(--ink2);line-height:1.6}
.hor-ref strong{color:var(--ink)}
.hor-ref-h{font-family:var(--head);font-weight:900;font-size:1.05rem;color:var(--gd)}
.hor-nota{font-size:.74rem;color:var(--ink3);line-height:1.6;margin:12px 0 0}
.hor-tabla-caja{overflow-x:auto;border:1.5px solid var(--line);border-radius:12px;
background:var(--surf)}
.hor-tabla{width:100%;border-collapse:collapse;font-size:.84rem;min-width:640px}
.hor-tabla th,.hor-tabla td{padding:9px 13px;border-bottom:1px solid var(--line);text-align:left}
.hor-tabla thead th{font-family:var(--head);font-weight:800;font-size:.64rem;
text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);white-space:nowrap}
.hor-tabla tbody tr:last-child td{border-bottom:0}
.hor-tabla td.n,.hor-tabla th.n{text-align:right;font-variant-numeric:tabular-nums;
white-space:nowrap}
.hor-tot{font-family:var(--head);font-weight:900;color:var(--gd)}
.hor-al{font-weight:600;color:var(--ink)}
.hor-us{font-size:.72rem;color:var(--ink3)}
.hor-ver{border:0;background:none;color:var(--g);font-family:var(--head);font-weight:700;
font-size:.72rem;cursor:pointer;padding:0;text-decoration:underline}
.hor-ver:hover{color:var(--gd)}
.hor-det{background:var(--gt);border-radius:10px;padding:12px 14px;margin:8px 0 0;
font-size:.74rem;color:var(--ink2);line-height:1.65}
.hor-det table{width:100%;border-collapse:collapse;font-size:.7rem;
font-variant-numeric:tabular-nums}
.hor-det th,.hor-det td{padding:3px 8px;text-align:left;border-bottom:1px solid rgba(0,0,0,.06)}
.hor-det th{font-weight:800;color:var(--ink3);text-transform:uppercase;font-size:.6rem}
.hor-det-caja{max-height:280px;overflow:auto;margin-top:8px;background:var(--surf);
border-radius:8px}
.hor-vacio{font-size:.85rem;color:var(--ink3);line-height:1.6}
/* ── Ficha de actitudes transversales (Panel del tutor) ──
Prefijo fat-: las clases act- ya estan cogidas por la vista de actividad. */
.fat-aviso{border-left:3px solid var(--g);background:var(--gt);border-radius:0 10px 10px 0;
padding:12px 16px;margin-bottom:16px;font-size:.8rem;color:var(--gd);line-height:1.6}
.fat-barra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fat-campo{display:flex;flex-direction:column;gap:4px}
.fat-campo label{font-family:var(--head);font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.fat-campo select,.fat-campo input{border:1.5px solid var(--line);border-radius:9px;
padding:8px 11px;font-family:var(--body);font-size:.84rem;color:var(--ink);background:var(--page)}
.fat-campo select:focus,.fat-campo input:focus{border-color:var(--g);background:var(--surf);outline:none}
.fat-campo select{min-width:210px}
.fat-esc{font-size:.74rem;color:var(--ink3);line-height:1.7;margin:0 0 12px}
.fat-esc b{color:var(--ink2)}
.fat-tabla{width:100%;border-collapse:collapse;font-size:.85rem;
border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.fat-tabla th,.fat-tabla td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left}
.fat-tabla thead th{font-family:var(--head);font-weight:800;font-size:.62rem;
text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);background:var(--gt)}
.fat-tabla thead th.n{text-align:center;width:52px}
.fat-tabla tbody tr:last-child td{border-bottom:0}
.fat-nom{font-weight:600;color:var(--ink)}
.fat-det{display:block;font-size:.73rem;color:var(--ink3);line-height:1.45;margin-top:2px}
.fat-op{text-align:center}
.fat-op input{width:18px;height:18px;accent-color:var(--g);cursor:pointer}
.fat-tabla tbody tr.fat-sin{background:#fdf7ea}
.fat-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.fat-guardar{border:0;border-radius:var(--rp);background:var(--g);color:#fff;
padding:10px 20px;font-family:var(--head);font-weight:800;font-size:.82rem;cursor:pointer;
transition:background .14s}
.fat-guardar:hover:not(:disabled){background:var(--gd)}
.fat-guardar:disabled{opacity:.6;cursor:default}
.fat-limpiar{border:1.5px solid var(--line);border-radius:var(--rp);background:none;
color:var(--ink2);padding:9px 16px;font-family:var(--head);font-weight:700;font-size:.78rem;
cursor:pointer}
.fat-limpiar:hover{border-color:var(--ink2);color:var(--ink)}
.fat-estado{font-size:.82rem;font-weight:600;color:var(--gd);margin:0}
.fat-estado-error{color:var(--coral)}
.fat-hist{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.fat-hist-h{font-family:var(--head);font-weight:900;font-size:.95rem;color:var(--ink);
margin:0 0 10px}
.fat-ficha{border:1.5px solid var(--line);border-radius:11px;background:var(--surf);
padding:12px 15px;margin-bottom:10px}
.fat-ficha-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fat-mod{font-family:var(--head);font-weight:900;font-size:.72rem;letter-spacing:.05em;
color:var(--gd);background:var(--gt);border-radius:var(--rp);padding:2px 9px}
.fat-fecha{font-weight:600;font-size:.84rem;color:var(--ink)}
.fat-quien{font-size:.72rem;color:var(--ink3);margin-left:auto}
.fat-punt{display:flex;flex-wrap:wrap;gap:6px}
.fat-p{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
border-radius:8px;padding:3px 8px;font-size:.72rem;color:var(--ink2)}
.fat-p b{font-family:var(--head);font-weight:900;color:var(--gd);font-variant-numeric:tabular-nums}
.fat-total{font-family:var(--head);font-weight:900;font-size:.74rem;color:var(--ink2);
margin-left:auto}
.fat-vacio{font-size:.84rem;color:var(--ink3);line-height:1.6}
@media (max-width:640px){
.fat-tabla{font-size:.8rem}
.fat-tabla th,.fat-tabla td{padding:7px 8px}
.fat-det{display:none}
.fat-campo select{min-width:0;width:100%}
.fat-campo{flex:1 1 100%}
}
/* ════════════════════════════════════
MODO LECTURA EN MOVIL VERTICAL
El panel de progreso e indice pasa a ir DEBAJO del contenido (ver la nota de
grid-row en la @media de 1024px). Para que siga estando a un toque, la barra
de navegacion de la lectura gana un boton que salta a el.
════════════════════════════════════ */
@media (max-width:640px){
.lec-ir-idx{
display:inline-flex;align-items:center;gap:5px;
border:1.5px solid var(--line);border-radius:var(--rp);background:var(--surf);
color:var(--ink2);padding:6px 12px;cursor:pointer;
font-family:var(--head);font-weight:700;font-size:.72rem;white-space:nowrap}
.lec-ir-idx:hover{border-color:var(--gs);background:var(--gt);color:var(--gd)}
/* El panel, al final, mas compacto: el anillo no necesita 96px de ancho. */
.cr:has(#lec-lateral) .rp{margin-top:4px}
.lec-idx-mini{max-height:none}
}
/* Aviso del PDF bloqueado en las lecturas integras (normativa y protocolo). */
.lec-pdf{font-size:.72rem;line-height:1.55;color:var(--ink3);margin:10px 0 0;
padding:9px 11px;border-radius:9px;background:var(--gt);border-left:2.5px solid var(--gs,#8fc7a5)}
.lec-pdf-ok{color:var(--gd);border-left-color:var(--g);font-weight:600}
/* ═══ RECURSO HTML INTERACTIVO (§25) ══════════════════════════════════════
Marco propio para los Recursos cuyo fichero principal es HTML, con barra de
pantalla completa. Se declara antes de la ultima regla [hidden] para no
repetir el problema de orden de fuente ya arreglado en este fichero. */
.rec-html{position:relative;background:#F6F4EF;border:1px solid var(--line);
border-radius:10px;overflow:hidden}
.rec-html-barra{display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:8px 12px;background:var(--surf);border-bottom:1px solid var(--line)}
.rec-html-nota{font-size:.76rem;color:var(--ink3);letter-spacing:.01em}
.rec-html-fs{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;
font-family:var(--head);font-size:.8rem;font-weight:700;color:var(--ink);transition:.14s}
.rec-html-fs:hover{border-color:var(--g);color:var(--g)}
.rec-html-fs:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.rec-html-fs svg{width:15px;height:15px;flex:0 0 auto}
.rec-html iframe{display:block;width:100%;height:78vh;min-height:520px;
border:0;background:#F6F4EF}
/* Pantalla completa nativa (Fullscreen API sobre el contenedor). */
.rec-html:fullscreen{border:0;border-radius:0}
.rec-html:fullscreen iframe{height:calc(100vh - 42px);min-height:0}
/* Respaldo: maximizado dentro del campus si la Fullscreen API no esta. */
.rec-html.rec-html-max{position:fixed;inset:0;z-index:9000;border:0;border-radius:0}
.rec-html.rec-html-max iframe{height:calc(100vh - 42px);min-height:0}
body.eell-sin-cromo{overflow:hidden}
/* En movil el envoltorio ya muestra su propio aviso de "requiere ordenador":
la barra sobra porque no hay nada que ampliar. */
@media (max-width:767px){
.rec-html-barra{display:none}
.rec-html iframe{height:62vh;min-height:380px}
}
/* ═══ RECURSOS DEL TUTOR — vista agrupada por sesión ══════════════════════
Módulo -> sesión -> tipo. Se declara antes de la última regla [hidden] para
no repetir el problema de orden de fuente ya arreglado en este fichero. */
.rec2-mod{border:1.5px solid var(--line);border-radius:14px;background:var(--surf);
padding:20px 22px 6px;margin-bottom:18px}
.rec2-mod-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.rec2-cod{font-family:var(--head);font-weight:900;font-size:.72rem;letter-spacing:.06em;
background:var(--gt);color:var(--gd);border-radius:6px;padding:3px 9px}
.rec2-mod-t{font-size:.86rem;font-weight:600;color:var(--ink2);min-width:0}
.rec2-mod-n{margin-left:auto;font-size:.7rem;color:var(--ink3)}
.rec2-ses{padding:18px 0;border-top:1px solid var(--line)}
.rec2-ses:first-of-type{border-top:0;padding-top:10px}
.rec2-ses-t{font-family:var(--head);font-weight:800;font-size:.68rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.rec2-tipo{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;
font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);
margin:14px 0 9px}
.rec2-tipo:first-of-type{margin-top:0}
.rec2-n{font-family:var(--head);font-weight:800;font-size:.62rem;line-height:1;
background:var(--page);color:var(--ink2);border-radius:999px;padding:3px 7px}
/* Botones: primario = acción principal (Abrir), secundario = descarga. */
.rec2-btn{font-family:var(--head);font-weight:700;font-size:.78rem;padding:9px 17px;
border-radius:999px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
text-align:center;text-decoration:none;display:inline-block;transition:.14s}
.rec2-btn-pri{background:var(--g);color:#fff}
.rec2-btn-pri:hover{filter:brightness(1.07)}
.rec2-btn-sec{background:var(--surf);color:var(--ink2);border-color:var(--line)}
.rec2-btn-sec:hover{border-color:var(--g);color:var(--g)}
.rec2-btn:focus-visible{outline:2px solid var(--g);outline-offset:2px}
/* Presentación: tarjeta con portada, porque es una vista web, no un fichero. */
.rec2-pres{display:flex;gap:18px;align-items:center;background:var(--page);
border:1px solid var(--line);border-radius:14px;padding:13px}
.rec2-pres-cover{flex:0 0 210px;aspect-ratio:16/7;border-radius:10px;overflow:hidden;
background:var(--gd);box-shadow:0 6px 16px -6px rgba(33,29,22,.28)}
.rec2-pres-cover img{width:100%;height:100%;object-fit:cover;display:block}
.rec2-pres-body{flex:1;min-width:0}
.rec2-pres-t{margin:0 0 5px;font-size:.92rem;font-weight:700;color:var(--ink)}
.rec2-pres-d{margin:0 0 7px;font-size:.76rem;line-height:1.5;color:var(--ink2)}
.rec2-pres-meta{font-size:.7rem;color:var(--ink3)}
.rec2-pres-side{flex:0 0 auto}
/* Descargables y enlaces: tarjeta simple con distintivo de tipo. */
.rec2-lista{display:flex;flex-direction:column;gap:9px}
.rec2-arch{display:flex;gap:14px;align-items:center;background:var(--page);
border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.rec2-badge{flex:0 0 auto;width:42px;height:42px;border-radius:10px;display:flex;
align-items:center;justify-content:center}
.rec2-badge svg{width:21px;height:21px}
.rec2-arch-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rec2-arch-t{font-size:.85rem;font-weight:600;color:var(--ink);word-break:break-word}
.rec2-arch-d{font-size:.72rem;line-height:1.5;color:var(--ink3)}
.rec2-arch-m{font-size:.68rem;color:var(--ink3);margin-top:2px}
/* Vídeos: rejilla de tarjetas pequeñas. */
.rec2-vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.rec2-vid{background:var(--page);border:1px solid var(--line);border-radius:11px;
overflow:hidden;text-decoration:none;display:block;transition:.14s}
.rec2-vid:hover{border-color:var(--g);transform:translateY(-1px)}
.rec2-vid-thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;
justify-content:center;background:linear-gradient(135deg,var(--gt),var(--page))}
.rec2-vid-play{width:31px;height:31px;border-radius:999px;background:rgba(255,255,255,.94);
display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(0,0,0,.18);
color:var(--ink)}
.rec2-vid-play svg{width:15px;height:15px;margin-left:2px}
.rec2-vid-name{display:block;padding:8px 10px 10px;font-size:.72rem;font-weight:600;
color:var(--ink2);line-height:1.35}
.rec2-mas{margin-top:11px;font-family:var(--head);font-weight:700;font-size:.74rem;
background:none;border:1.5px dashed var(--line);border-radius:999px;padding:8px 16px;
color:var(--ink2);cursor:pointer;transition:.14s}
.rec2-mas:hover{border-color:var(--g);color:var(--g)}
.rec2-mas:focus-visible{outline:2px solid var(--g);outline-offset:2px}
/* En pantalla estrecha la portada pasa arriba y ocupa todo el ancho. */
@media (max-width:640px){
.rec2-mod{padding:16px 15px 4px}
.rec2-pres{flex-direction:column;align-items:stretch;gap:12px}
.rec2-pres-cover{flex:none;width:100%}
.rec2-pres-side .rec2-btn{display:block}
.rec2-arch{flex-wrap:wrap}
.rec2-vidgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
/* Va al final del bloque, después de las media queries, para que no la pise
ninguna regla de ancho: es el interruptor del patrón "ver más". */
.rec2-oculto{display:none}
[hidden]{display:none !important}
/* ── Presentar sesion ────────────────────────────────────────────────────
Lista de presentaciones proyectables y, una vez abierta la sala, la misma
tarjeta de proyeccion que usa Asistencia (.tut-proy, .tut-qr, .tut-codigo). */
.pres-lista{display:flex;flex-direction:column;gap:10px}
.pres-fila{display:flex;align-items:center;gap:14px;background:var(--surf);
border:1px solid var(--line);border-radius:var(--rl);padding:12px 14px}
.pres-mini{flex:none;width:78px;height:44px;border-radius:8px;overflow:hidden;
background:var(--page);border:1px solid var(--line)}
.pres-mini img{width:100%;height:100%;object-fit:cover;display:block}
.pres-datos{flex:1;display:flex;flex-direction:column;min-width:0}
.pres-t{font-size:.86rem;font-weight:600;color:var(--ink);
overflow:hidden;text-overflow:ellipsis}
.pres-m{font-size:.7rem;color:var(--ink3);margin-top:2px}
.pres-ir{flex:none}
/* El QR se dibuja aqui como SVG (lo genera lib/qr.js), no como PNG de Moodle:
por eso lleva su propia caja en vez de heredar la de la etiqueta . */
.pres-qr{display:block;padding:10px}
.pres-qr svg{display:block;width:100%;height:auto}
.pres-siguen{font-size:.78rem;color:var(--ink3);margin:0 0 14px}
.pres-siguen span{font-family:var(--head);font-weight:900;font-size:1rem;color:var(--g)}
.pres-botones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
@media (max-width:600px){
.pres-fila{flex-wrap:wrap}
.pres-mini{width:56px;height:34px}
.pres-ir{width:100%}
}
/* ── Herramientas interactivas ────────────────────────────────────────────
Icono en blanco sobre color de familia, para que se reconozcan entre si a
simple vista y se separen del material de lectura. Colores confirmados por
Israel: coral (objetivos), ambar (interactivo), indigo (planing). */
.ar-thumb.hcascada, .ar-thumb.hdiana { background: #D85A30; color: #fff }
.ar-thumb.hciclo { background: #D9A441; color: #fff }
.ar-thumb.hplaning { background: #5C57A8; color: #fff }
/* Los iconos base van al 75% de opacidad; estos, en blanco sobre color, se
quedarian lavados. */
.ar-thumb.hcascada svg, .ar-thumb.hdiana svg,
.ar-thumb.hciclo svg, .ar-thumb.hplaning svg { opacity: 1 }
.tp-objetivos { background: rgba(216,90,48,.12); color: #8F3216 }
.tp-interactivo { background: rgba(217,164,65,.18); color: #7A5A0E }
.tp-planing { background: rgba(92,87,168,.13); color: #423D80 }
/* Selector de edicion en el banner del curso (solo con mas de un curso) */
.ch-sel{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--head);
font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.ch-sel select{font:600 .82rem/1.2 var(--head);text-transform:none;letter-spacing:0;color:#fff;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;
padding:6px 30px 6px 12px;max-width:min(420px,70vw);cursor:pointer;appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.ch-sel select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ch-sel option{color:#1a1a1a;background:#fff}