/* /ejemplos · página pública con la cabecera de la landing y una vista tipo Moodle 4.5 (Boost) dentro de un marco de navegador.
   Los íconos de actividad son dibujos propios equivalentes (no se usan recursos de moodle.org). */
.ej .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ej :focus-visible{outline:3px solid #0a2a44;outline-offset:2px;box-shadow:0 0 0 5px #fff;border-radius:4px}
.ej .nav :focus-visible,.ej-hero :focus-visible{outline-color:#ffa94a;box-shadow:none}
.ej .nav .menu a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* Cabecera de la página */
.ej-hero{background:linear-gradient(90deg,rgba(8,24,49,.95) 0%,rgba(10,32,64,.88) 45%,rgba(14,42,85,.55) 100%),url("/static/nrt/ejemplos-hero.jpg") right center/cover no-repeat,#0e2a55;color:#fff;padding:8.5rem 0 4rem}
.ej-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 .8rem;color:#fff}
.ej-hero .lead{max-width:62ch;color:#dbe6ef;font-size:1.08rem;line-height:1.6}
/* Selector de estilo: dentro del aviso destacado, sobre fondo claro */
.ej-estilo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #f3c79a}
.ej-estilo-t{font-weight:700;color:#0a2a44}
.ej-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1.5px solid #0a2a44;flex-wrap:wrap}
.ej-tabs [role=tab]{min-height:44px;padding:0 1.2rem;border:0;border-radius:999px;background:none;color:#0a2a44;font:600 .98rem var(--font);cursor:pointer}
.ej-tabs [role=tab]:hover{background:#e3f0f8}
.ej-tabs [role=tab][aria-selected=true]{background:#0a2a44;color:#fff}

.ej-cuerpo{padding:2rem 0 4rem}
.ej-nota{background:#fff4e8;border:1px solid #f3c79a;border-left:6px solid #f28c28;border-radius:12px;padding:1.1rem 1.3rem;color:#0a2a44;margin:0 0 1.6rem;line-height:1.55;box-shadow:0 4px 14px rgba(10,42,68,.08)}
.ej-nota p{margin:0;font-size:1.05rem}
.ej-vacio{padding:2rem;text-align:center;color:#44586b}
.ej-ficha{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin:0 0 1.2rem}
.ej-ficha h2{font-size:1.5rem;color:#0a2a44;margin:0 0 .3rem}
.ej-ficha p{color:#44586b}
.ej-descargas{display:flex;flex-wrap:wrap;gap:.5rem}
.ej-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;border:1px solid #b8c8d6;background:#fff;color:#0a2a44;font-weight:600;font-size:.95rem}
.ej-btn:hover{background:#f0f4f8;border-color:#7b8c9c}

/* Marco de navegador */
.ej-navegador{margin:0;border-radius:14px;overflow:hidden;border:1px solid #c9d6e2;box-shadow:0 30px 70px -30px rgba(10,42,68,.45);background:#fff}
.ej-cromo{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#e8eef3;border-bottom:1px solid #d3dde6}
.ej-puntos{display:flex;gap:6px}.ej-puntos i{width:11px;height:11px;border-radius:50%;background:#ee6a5f}.ej-puntos i:nth-child(2){background:#f5bd4f}.ej-puntos i:nth-child(3){background:#61c454}
.ej-url{flex:1;max-width:520px;background:#fff;border-radius:999px;padding:4px 14px;font-size:.82rem;color:#5b6d7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ej-navegador figcaption{padding:.8rem 1.1rem;font-size:.9rem;color:#44586b;background:#f5f8fb;border-top:1px solid #e4ebf3}
.ej-video{margin-top:2rem}
.ej-video h2{font-size:1.25rem;color:#0a2a44;margin:0 0 .8rem}
.ej-video video{width:100%;max-width:820px;border-radius:12px;background:#000;display:block}
.ej-cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;background:#0a2a44;color:#fff;border-radius:18px;padding:1.8rem 2rem}
.ej-cta h2{font-size:1.35rem;color:#fff;margin:0 0 .3rem}.ej-cta p{color:#c8d6e2}

/* ═══════════ Moodle 4.5 · Boost (maqueta) ═══════════ */
.mdl{--m-primario:#0f6cbf;--m-texto:#1d2125;--m-suave:#5b6068;--m-borde:#dee2e6;--m-fondo:#f8f9fa;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--m-texto);background:#fff;text-align:left}
.mdl svg,.mdl-visor svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mdl-top{display:flex;align-items:center;gap:1.5rem;height:56px;padding:0 1rem;border-bottom:1px solid var(--m-borde,#dee2e6);background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08);position:relative;z-index:2;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;color:#1d2125}
.mdl-sitio{font-weight:700;font-size:1.05rem}
.mdl-prim{display:flex;gap:1.2rem;height:100%}
.mdl-prim span{display:flex;align-items:center;height:100%;border-bottom:3px solid transparent;padding-top:3px}
.mdl-prim .on{border-bottom-color:#0f6cbf}
.mdl-top-der{margin-left:auto;display:flex;align-items:center;gap:.9rem;color:#5b6068}
.mdl-ic-top svg{width:20px;height:20px;display:block}
.mdl-av{width:34px;height:34px;border-radius:50%;background:#e9ecef;color:#1d2125;display:grid;place-items:center;font-size:.8rem;font-weight:600}
.mdl-cuerpo{display:flex;min-height:640px;position:relative}
.mdl-indice{flex:0 0 285px;border-right:1px solid var(--m-borde);background:var(--m-fondo);padding:.5rem .6rem 1.5rem;max-height:900px;overflow:auto}
.mdl-indice[hidden]{display:none}
.mdl-indice-cab{display:flex;justify-content:flex-end}
.mdl-icbtn{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:6px;background:none;color:#1d2125;cursor:pointer}
.mdl-icbtn:hover{background:#e9ecef}
.mdl-icbtn svg{width:20px;height:20px}
.mdl-indice-lista,.mdl-indice-lista ul{list-style:none;margin:0;padding:0}
.mdl-indice-lista>li{margin:0 0 .6rem}
.mdl-indice-lista a{display:flex;gap:.5rem;align-items:flex-start;color:#1d2125;text-decoration:none;padding:.3rem .5rem;border-radius:6px;font-size:.9rem;line-height:1.35}
.mdl-indice-lista a:hover{background:#e9ecef;text-decoration:underline}
.mdl-indice-lista .mdl-idx-sec{font-weight:700}
.mdl-indice-lista ul a{padding-left:.9rem}
.mdl-circ{flex:none;width:14px;height:14px;margin-top:2px;border:1.5px solid #6a737b;border-radius:50%}
.mdl-main{flex:1;min-width:0;padding:1rem 2rem 2.5rem;position:relative}
.mdl-abrir-indice{position:absolute;left:.5rem;top:.6rem}
.mdl-indice:not([hidden])~.mdl-main .mdl-abrir-indice{visibility:hidden}
.mdl-migas ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.875rem;color:#5b6068}
.mdl-migas li+li::before{content:"/";padding:0 .5rem;color:#6a737b}
.mdl .mdl-migas{margin:0 0 .6rem 2.8rem}
.mdl-cab{display:flex;align-items:center;gap:1rem;margin:.4rem 0 1rem}
.mdl-cab img{width:96px;height:55px;object-fit:cover;border-radius:6px;border:1px solid var(--m-borde);background:#fff}
.mdl-h1{font-size:1.75rem;font-weight:700;line-height:1.2;margin:0;color:#1d2125;letter-spacing:0}
.mdl-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--m-borde);margin:0 0 1.2rem}
.mdl-tabs>span{padding:.6rem 1rem;color:#5b6068;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:not-allowed}
.mdl-tabs .on{color:#1d2125;border-bottom-color:#0f6cbf;cursor:default}
.mdl-contraer{display:flex;justify-content:flex-end;margin:-.4rem 0 .4rem}
.mdl-link{background:none;border:0;color:#0f6cbf;font:inherit;cursor:pointer;padding:.4rem .2rem;min-height:32px}
.mdl-link:hover{text-decoration:underline}
.mdl-sec{border-bottom:1px solid var(--m-borde);padding:.9rem 0 1rem}
.mdl-sec-t{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:0}
.mdl-sec-t button{display:flex;align-items:center;gap:.6rem;background:none;border:0;padding:.2rem 0;font:inherit;color:#1d2125;cursor:pointer;text-align:left;min-height:40px}
.mdl-chev{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e9ecef;color:#1d2125;transition:transform .15s}
.mdl-chev svg{width:16px;height:16px}
.mdl-sec-t button[aria-expanded=false] .mdl-chev{transform:rotate(-90deg)}
.mdl-sec-c{padding-left:2.3rem}
.mdl-sec-c[hidden]{display:none}
.mdl-resumen{color:#1d2125;margin:.4rem 0 .8rem}
.mdl-resumen p{margin:0 0 .5rem}
.mdl-resumen ul{margin:.2rem 0 .6rem 1.2rem}
.mdl-acts{list-style:none;margin:0;padding:0}
.mdl-act{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;padding:.7rem .6rem;margin:0 -.6rem;border-radius:8px}
.mdl-act:hover{background:#f8f9fa}
.mdl-act-txt{flex:1 1 240px;min-width:0;display:flex;flex-direction:column}
.mdl-act-nom{background:none;border:0;padding:0;font:inherit;font-size:1rem;color:#0f6cbf;text-align:left;cursor:pointer;min-height:24px}
.mdl-act-nom:hover{text-decoration:underline}
.mdl-act-nom.sin{color:#1d2125;cursor:default}
.mdl-act-meta{font-size:.8rem;color:#5b6068}
.mdl-comp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.mdl-comp li{font-size:.8rem;line-height:1.3;padding:.25rem .6rem;border:1px solid #8f959e;border-radius:6px;color:#1d2125;background:#fff}
.mdl-ico{flex:none;width:40px;height:40px;border-radius:8px;display:grid;place-items:center}
.mdl-ico svg{width:24px;height:24px}
.mdl-ico text{font:700 5.2px/1 -apple-system,"Segoe UI",Arial,sans-serif;fill:currentColor;stroke:none}
.mdl-ico-scorm{background:#fbeee6;color:#a3470b}         /* contenido interactivo */
.mdl-ico-resource{background:#fdecec;color:#c62828}      /* archivo PDF */
.mdl-ico-page{background:#e5f5f8;color:#00788a}          /* contenido */
.mdl-ico-quiz{background:#fde8f3;color:#c0006e}          /* evaluación */
.mdl-ico-glossary{background:#fdf0e3;color:#b35300}      /* colaboración */

/* Visor de actividad (imita la página de la actividad en Moodle) */
.mdl-visor{margin:auto;padding:0;border:0;width:min(1180px,96vw);height:min(92vh,980px);max-width:none;max-height:none;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff;color:#1d2125;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px}
.mdl-visor[open]{display:flex;flex-direction:column}
.mdl-visor::backdrop{background:rgba(10,26,43,.6)}
.mv-cab{padding:.8rem 1.5rem .8rem;border-bottom:1px solid #dee2e6}
.mv-fila{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:.4rem 0 .5rem}
.mv-tit{flex:1;min-width:0}
.mv-tipo{font-size:.8rem;color:#5b6068;margin:0}
.mv-tit h2{font-size:1.4rem;margin:0;line-height:1.2;color:#1d2125;letter-spacing:0}
.mv-volver{display:inline-flex;align-items:center;gap:.3rem;min-height:40px;padding:0 1rem;border-radius:6px;border:1px solid #0f6cbf;background:#fff;color:#0f6cbf;font:600 .95rem inherit;cursor:pointer}
.mv-volver:hover{background:#0f6cbf;color:#fff}
.mv-volver svg{width:18px;height:18px}
.mv-cuerpo{flex:1;min-height:0;overflow:auto;background:#fff}
.mv-cuerpo iframe{display:block;width:100%;height:100%;min-height:420px;border:0;background:#fff}
.mv-pie{margin:0;padding:.6rem 1.5rem;border-top:1px solid #dee2e6;font-size:.9rem;display:flex;justify-content:flex-end}
/* «Descargar PDF»: botón primario NortEduc (naranjo en píldora). El texto va en azul marino como en UI2:
   blanco sobre #f5871f no llega a AA (2,5:1); marino sobre naranjo da 6,8:1. */
.mv-desc-barra{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin:.2rem 0 .1rem;padding:.55rem .8rem;background:#fff7ef;border:1px solid #f6d3b1;border-radius:10px}
.mv-archivo{display:inline-flex;align-items:center;gap:.45rem;min-width:0;font-weight:600;color:#1d2125;overflow-wrap:anywhere}
.mv-archivo svg{flex:none;width:20px;height:20px;fill:none;stroke:#b35300;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv-desc{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.3rem;border-radius:999px;background:#f5871f;border:1px solid #f5871f;color:#0a2a44;font:700 1rem/1.2 inherit;text-decoration:none;box-shadow:0 6px 16px rgba(245,135,31,.28);white-space:nowrap}
.mv-desc:hover{background:#f79a45;border-color:#f79a45;color:#0a2a44}
.mv-desc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mdl-visor .mv-desc:focus-visible{outline:3px solid #0a2a44;outline-offset:2px;box-shadow:0 0 0 6px #fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px){.mv-desc-barra{padding:.5rem .6rem}.mv-desc{width:100%}}
.mdl-visor :focus-visible{outline:3px solid #0f6cbf;outline-offset:2px;box-shadow:0 0 0 5px #fff}

/* Cuestionario (vista previa de revisión) */
.mq{padding:1.2rem 1.5rem 2rem;max-width:960px}
.mq-intro{margin:0 0 .8rem}
.mq-datos{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin:0 0 1rem;padding:.8rem 1rem;background:#f8f9fa;border-radius:8px}
.mq-datos dt{font-weight:600;font-size:.9rem}.mq-datos dd{margin:0}
.mq-btn{min-height:40px;padding:0 1.1rem;border-radius:6px;border:1px solid #6a737b;background:#e9ecef;color:#5b6068;font:600 .95rem inherit;cursor:not-allowed}
.mq-nota{font-size:.9rem;color:#5b6068;margin:.5rem 0 1.4rem}
.mq-q{display:flex;gap:1rem;margin:0 0 1.2rem;align-items:flex-start}
.mq-info{flex:0 0 150px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;padding:.6rem .7rem;font-size:.85rem}
.mq-info p{margin:.15rem 0}
.mq-num{font-size:.95rem;font-weight:400;margin:0 0 .2rem;letter-spacing:0}
.mq-tipo{color:#5b6068}
.mq-cont{flex:1;min-width:0}
.mq-form{background:#e7f3f5;border-radius:6px;padding:.9rem 1rem;color:#001a1e}
.mq-texto p{margin:0 0 .6rem}
.mq-pide{font-size:.9rem;margin:.4rem 0}
.mq-alts{list-style:none;margin:0;padding:0}
.mq-alts li{display:flex;gap:.5rem;align-items:flex-start;padding:.35rem .5rem;border-radius:4px}
.mq-alts li.ok{background:#d4edda;color:#0c3d17}
.mq-check{margin-left:auto;font-weight:700;color:#1a6b2b}
.mq-marca{flex:none}
.mq-tabla{border-collapse:collapse;width:100%;background:#fff}
.mq-tabla th,.mq-tabla td{border:1px solid #cfd8dc;padding:.4rem .6rem;text-align:left}
.mq-retro{margin-top:.6rem;background:#fcefdc;border-radius:6px;padding:.8rem 1rem;color:#3b2a0e}
.mq-retro p{margin:0 0 .4rem}

/* Responsive: el índice se oculta en pantallas angostas, como en Moodle */
@media (max-width:900px){
  .mdl-indice{position:absolute;inset:0 auto 0 0;z-index:3;width:min(285px,86%);box-shadow:4px 0 16px rgba(0,0,0,.18)}
  .mdl-main{padding:1rem 1rem 2rem}
  .mdl-prim span:not(.on){display:none}
  .mdl-sec-c{padding-left:0}
  .mdl-h1{font-size:1.35rem}
  .mv-cab{padding:.6rem 1rem}
}
@media (max-width:560px){
  .ej-hero{padding:7rem 0 2.2rem;background:linear-gradient(rgba(8,24,49,.9),rgba(8,24,49,.9)),url("/static/nrt/ejemplos-hero.jpg") 70% center/cover no-repeat,#0e2a55}
  .ej-tabs{display:flex;flex:1 1 100%}.ej-tabs [role=tab]{flex:1 1 0;padding:0 .6rem}
  .ej-url{font-size:.72rem}
  .mdl-top{gap:.8rem}.mdl-top-der .mdl-ic-top{display:none}
  .mdl-cab img{width:64px;height:37px}
  .mdl-tabs>span{padding:.5rem .6rem;font-size:.9rem}
  .mdl-visor{width:100vw;height:100vh;height:100dvh;border-radius:0}
  .mv-cab .mdl-migas{display:none}
  .mq{padding:1rem}
  .mq-q{flex-direction:column}.mq-info{flex:none;width:100%}
  .ej-cta{padding:1.4rem}
}
@media (prefers-reduced-motion:reduce){.mdl *,.ej *{transition:none!important;animation:none!important}}
.ej-hero .eyebrow{color:#bfe1fa;background:rgba(255,255,255,.12)}