/* Capa visual del Diplomado LAF sobre Moodle (Boost 4.x). Solo actúa con body.laf-aula, que pone laf.js en los cursos configurados.
   Marca: trabajo\clientes\LAF\DESIGN.md. Sin filetes ni barras de borde: los bloques se separan con espacio y cambio de fondo. */
:root {
  --laf-oscuro: #005C30; --laf-profundo: #00381D; --laf-verde: #00A859; --laf-tinta: #0A110D;
  --laf-papel: #F2F5F3; --laf-blanco: #FFFFFF; --laf-texto2: #3B4A41; --laf-oro: #C49018;
  --laf-titulo: "Barlow Condensed", "Arial Narrow", sans-serif; --laf-cifra: "Bebas Neue", "Barlow Condensed", sans-serif;
  --laf-cuerpo: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Cromo de Moodle dentro del curso ---------- */
body.laf-aula { background: var(--laf-papel); font-family: var(--laf-cuerpo); color: var(--laf-tinta); }
body.laf-aula .navbar.fixed-top { background: var(--laf-tinta) !important; border: 0 !important; box-shadow: none; }
body.laf-aula .navbar.fixed-top .nav-link, body.laf-aula .navbar.fixed-top .navbar-brand,
body.laf-aula .navbar.fixed-top .usermenu a, body.laf-aula .navbar.fixed-top .login a,
body.laf-aula .navbar.fixed-top .btn, body.laf-aula .navbar.fixed-top .popover-region-toggle,
body.laf-aula .navbar.fixed-top .usertext, body.laf-aula .navbar.fixed-top .logininfo { color: #fff !important; }
body.laf-aula .navbar .primary-navigation .nav-link.active { border-bottom-color: var(--laf-verde) !important; }
/* el índice lateral y el cajón de bloques confunden a quien no conoce Moodle: la navegación la dan la portada, la barra «Inicio del diplomado» y los pasos */
body.laf-aula #theme_boost-drawers-courseindex, body.laf-aula .drawer-toggles, body.laf-aula #theme_boost-drawers-blocks { display: none !important; }
body.laf-aula #page.drawers.show-drawer-left, body.laf-aula #page.drawers.show-drawer-right { margin-left: 0 !important; margin-right: 0 !important; }
body.laf-aula #page { background: var(--laf-papel); }
body.laf-aula h1, body.laf-aula h2, body.laf-aula h3 { font-family: var(--laf-cuerpo); }

/* barra propia: siempre dice dónde estás y cómo volver */
.laf-barra { position: sticky; top: 60px; z-index: 900; background: var(--laf-oscuro); color: #fff; }
.laf-barra-in { max-width: 1240px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 22px; min-height: 52px; }
.laf-barra a { color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px; }
.laf-barra a:hover { color: #B9F2D2 !important; }
.laf-barra a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.laf-barra img { width: 30px; height: 30px; }
.laf-barra .laf-donde { margin-left: auto; color: #CDE9D9; font-size: 15px; text-align: right; }
.laf-barra .laf-donde b { color: #fff; }

/* ---------- Portada (sección 0) ---------- */
body.laf-aula.laf-portada #page-header, body.laf-aula.laf-portada .secondary-navigation,
body.laf-aula.laf-portada .course-section-header, body.laf-aula.laf-portada .section-item > .course-section-header { display: none !important; }
body.laf-aula.laf-portada #topofscroll, body.laf-aula.laf-portada .main-inner { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent; border: 0; box-shadow: none; }
body.laf-aula.laf-portada #page { padding-left: 0 !important; padding-right: 0 !important; }
body.laf-aula.laf-portada #region-main, body.laf-aula.laf-portada #region-main-box { padding: 0 !important; margin: 0 !important; background: transparent; border: 0; }
body.laf-aula.laf-portada #region-main > div, body.laf-aula.laf-portada .section-item, body.laf-aula.laf-portada #page-content { padding: 0 !important; }
body.laf-aula.laf-portada .course-content .modtype_forum { display: none !important; }
body.laf-aula.laf-portada #section-0 .content > * { margin-top: 0 !important; }
body.laf-aula.laf-portada #section-0 .content > .my-3 { display: none !important; }
body.laf-aula.laf-portada #section-0 .section-item { border: 0 !important; }
body.laf-aula.laf-portada .course-content > ul, body.laf-aula.laf-portada .course-content li.section { padding: 0 !important; margin: 0 !important; border: 0 !important; }
body.laf-aula.laf-portada li.activity:has(.laf-inicio) { padding: 0 !important; margin: 0 !important; }
body.laf-aula.laf-portada li.activity:has(.laf-inicio) .activity-item { padding: 0 !important; border: 0 !important; background: none !important; }
body.laf-aula.laf-portada li.activity:has(.laf-inicio) .activity-altcontent, body.laf-aula.laf-portada li.activity:has(.laf-inicio) .no-overflow { padding: 0 !important; margin: 0 !important; overflow: visible !important; }
body.laf-aula.laf-portada li.activity:has(.laf-inicio) .activity-grid { display: block !important; }
body.laf-aula.laf-portada .course-content .section .activity:not(:has(.laf-inicio)) { max-width: 1192px; margin: 0 auto !important; }
/* los demás módulos no se listan en la portada: los muestra la lista propia */
body.laf-aula.laf-portada .course-content li.section:not(#section-0), body.laf-aula.laf-portada .course-content .section-summary,
body.laf-aula.laf-portada .course-content ul.section-summary, body.laf-aula.laf-portada .single-section .section-navigation { display: none !important; }
body.laf-aula.laf-portada #page-footer, body.laf-aula.laf-portada .footer-popover { display: none; }

.laf-inicio { font-family: var(--laf-cuerpo); color: var(--laf-tinta); font-size: 19px; line-height: 1.55; }
.laf-inicio *, .laf-inicio *::before, .laf-inicio *::after { box-sizing: border-box; }
.laf-inicio p { margin: 0 0 14px; }
.laf-inicio a { text-decoration: none; }
.laf-inicio .li-h2 { font-family: var(--laf-titulo); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 46px; line-height: .95; letter-spacing: -.005em; margin: 0 0 14px; color: var(--laf-oscuro); }
.laf-inicio .li-intro { font-size: 20px; color: var(--laf-texto2); max-width: 680px; }
.laf-inicio .li-bloque { max-width: 1240px; margin: 0 auto; padding: 72px 24px; }

/* héroe: foto real con viraje verde, trama de semitono en la esquina y tablilla de la marca en el borde */
.li-hero { position: relative; min-height: 620px; display: flex; align-items: flex-end; background: var(--laf-profundo); overflow: hidden; color: #fff; }
.li-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .55; }
.li-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,56,29,.96) 0%, rgba(0,56,29,.82) 42%, rgba(0,92,48,.25) 100%); z-index: 1; }
.li-hero-trama { position: absolute; right: -40px; top: -40px; width: 460px; height: 460px; z-index: 1;
  background-image: radial-gradient(circle, rgba(0,168,89,.85) 2.6px, transparent 3px); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 68%); mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 68%); }
.li-hero-texto { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 60px 24px 92px; }
.li-escuela { display: flex; align-items: center; gap: 14px; margin: 0 0 30px !important; }
.li-escuela img { width: 54px; height: 54px; }
.li-escuela span { display: flex; flex-direction: column; font-size: 15px; line-height: 1.3; color: #CDE9D9; }
.li-escuela b { font-family: var(--laf-titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 20px; color: #fff; letter-spacing: .01em; }
.li-titulo { font-family: var(--laf-titulo) !important; font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 6.6vw, 96px); line-height: .9; letter-spacing: -.01em; max-width: 960px; margin: 0 0 18px; color: #fff; }
.li-sub { font-family: var(--laf-titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--laf-verde); margin: 0 0 18px !important; }
.li-bajada { font-size: 21px; max-width: 620px; color: #E4F2EA; }
.li-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.li-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 30px; font-family: var(--laf-titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: .01em; border-radius: 4px; transition: background .15s, transform .15s; }
.li-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.li-btn-grande { background: var(--laf-verde); color: #fff !important; }
.li-btn-grande:hover { background: #00C066; transform: translateY(-1px); }
.li-btn-claro { background: rgba(255,255,255,.08); color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.li-btn-claro:hover { background: rgba(255,255,255,.18); }
.li-estado { margin-top: 18px !important; font-size: 17px; color: #CDE9D9; }
.li-estado b { color: #fff; }
.li-tablilla { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 2;
  background: repeating-linear-gradient(90deg, #fff 0 18px, var(--laf-verde) 18px 36px), var(--laf-verde);
  background-size: 100% 9px; background-repeat: no-repeat; background-position: 0 0, 0 9px; }
.li-tablilla::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: repeating-linear-gradient(90deg, var(--laf-verde) 0 18px, #fff 18px 36px); }

.li-promesa { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.li-claim { font-family: var(--laf-titulo); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 58px; line-height: .92; color: var(--laf-oscuro); margin: 0 !important; }
.li-promesa-texto p { font-size: 20px; }

/* cómo usar el aula: pasos reales, círculos sin línea que los una */
.li-como { background: var(--laf-blanco); max-width: none !important; }
.li-como > * { max-width: 1192px; margin-left: auto; margin-right: auto; }
.li-pasos { list-style: none; padding: 0; margin: 36px auto 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.li-pasos li { display: flex; gap: 22px; align-items: flex-start; }
.li-num { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--laf-oscuro); color: #fff; display: grid; place-items: center; font-family: var(--laf-cifra); font-size: 40px; line-height: 1; padding-top: 3px; }
.li-pasos h3 { font-size: 22px; font-weight: 700; margin: 6px 0 6px; color: var(--laf-tinta); }
.li-pasos p { font-size: 18px; color: var(--laf-texto2); margin: 0 !important; }

/* el ciclo: cinco momentos sobre la trayectoria de un balón */
.li-ciclo { position: relative; }
.li-ciclo-pasos { list-style: none; padding: 0; margin: 40px 0 0 !important; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; z-index: 1; }
.li-ciclo-pasos li { display: flex; flex-direction: column; gap: 8px; }
.li-ciclo-pasos b { font-family: var(--laf-titulo); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 34px; line-height: 1; color: var(--laf-oscuro); }
.li-ciclo-pasos span { font-size: 17px; line-height: 1.45; color: var(--laf-texto2); }
.li-ciclo-cancha { width: 100%; height: auto; margin-top: 18px; display: block; }
.li-ciclo-cancha path { fill: none; stroke: var(--laf-verde); stroke-width: 4; stroke-dasharray: 2 14; stroke-linecap: round; }
.li-ciclo-cancha circle { fill: var(--laf-oscuro); }
.li-ciclo-cancha circle:last-of-type { fill: var(--laf-verde); }

/* los ocho módulos: lista tipo fixture, no tarjetas iguales */
.li-modulos { background: var(--laf-tinta); color: #fff; max-width: none !important; }
.li-modulos > * { max-width: 1192px; margin-left: auto; margin-right: auto; }
.li-modulos .li-h2 { color: #fff; }
.li-modulos .li-intro { color: #B7C9BE; }
.li-lista { list-style: none; padding: 0; margin: 36px auto 0 !important; display: flex; flex-direction: column; gap: 6px; }
.li-lista li { display: grid; grid-template-columns: 150px 74px minmax(0, 1fr) 110px 170px; align-items: center; gap: 22px; background: #142019; padding: 14px 22px 14px 14px; border-radius: 4px; }
.li-lista li img { width: 150px; height: 92px; object-fit: cover; border-radius: 2px; filter: saturate(.85); }
.li-lista .li-n { font-family: var(--laf-cifra); font-size: 64px; line-height: 1; color: var(--laf-verde); text-align: center; padding-top: 6px; }
.li-lista h3 { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0 0 4px; color: #fff; }
.li-lista p { font-size: 16px; line-height: 1.45; color: #B7C9BE; margin: 0 !important; }
.li-horas { font-size: 16px; color: #CDE9D9; white-space: nowrap; }
.li-ir { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-width: 150px; min-height: 50px; padding: 0 18px; border-radius: 4px; font-family: var(--laf-titulo); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 21px; }
a.li-ir { background: var(--laf-verde); color: #fff !important; }
a.li-ir:hover { background: #00C066; }
a.li-ir:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.li-lista li.li-pronto { background: transparent; }
.li-lista li.li-pronto img { filter: grayscale(1) brightness(.55); }
.li-lista li.li-pronto .li-n { color: #3E5747; }
.li-lista li.li-pronto h3 { color: #A9BBB0; }
.li-lista li.li-pronto p, .li-lista li.li-pronto .li-horas { color: #6F8578; }
.li-lista span.li-ir { color: #8AA294; box-shadow: inset 0 0 0 2px #2E4236; }
.li-lista li.li-hecho .li-ir { background: transparent; color: var(--laf-verde) !important; box-shadow: inset 0 0 0 2px var(--laf-verde); }
.li-lista li.li-actual { background: #1B3A27; }

/* evaluación: barra proporcional y leyenda directa */
.li-eval { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 56px; align-items: start; }
.li-eval-txt { grid-row: span 2; }
.li-cert { font-size: 17px; color: var(--laf-texto2); }
.li-eval-barra { display: flex; height: 54px; border-radius: 4px; overflow: hidden; gap: 3px; margin-top: 10px; }
.li-eval-lista { list-style: none; padding: 0; margin: 6px 0 0 !important; }
.li-eval-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; font-size: 18px; }
.li-eval-lista i { width: 18px; height: 18px; border-radius: 3px; }
.li-eval-lista b { font-family: var(--laf-cifra); font-weight: 400; font-size: 30px; line-height: 1; color: var(--laf-oscuro); }
.li-eval .e1 { background: #7FD3A6; } .li-eval .e2 { background: #3DBB79; } .li-eval .e3 { background: #00A859; }
.li-eval .e4 { background: #00804A; } .li-eval .e5 { background: #005C30; } .li-eval .e6 { background: #0A110D; }

/* sello y medallas */
.li-sellos { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; background: var(--laf-blanco); max-width: none !important; padding-left: max(24px, calc((100% - 1192px) / 2)) !important; padding-right: max(24px, calc((100% - 1192px) / 2)) !important; }
.li-sello-col { display: flex; gap: 30px; align-items: flex-start; }
.li-sello { flex: 0 0 190px; width: 190px; height: 190px; transform: rotate(-8deg); }
.li-sello .s-fondo { fill: var(--laf-oscuro); }
.li-sello .s-centro { fill: none; stroke: #fff; stroke-width: 3; }
.li-sello .s-arco { fill: #fff; font: 800 italic 17px var(--laf-titulo); letter-spacing: .08em; }
.li-sello .s-letra { fill: #fff; font: 900 italic 46px var(--laf-titulo); }
.li-sello .s-chica { fill: var(--laf-verde); font: 800 italic 16px var(--laf-titulo); letter-spacing: .12em; }
.li-insignias ul { list-style: none; padding: 0; margin: 18px 0 0 !important; display: flex; flex-direction: column; gap: 16px; }
.li-insignias li { display: flex; gap: 16px; align-items: center; font-size: 19px; }
.li-medalla { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--laf-oro); color: #fff; display: grid; place-items: center; font-family: var(--laf-cifra); font-size: 30px; padding-top: 3px; box-shadow: inset 0 0 0 4px #E2B64A; }

.li-alcance { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.li-alcance img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

@media (max-width: 900px) {
  .laf-inicio .li-bloque { padding: 52px 18px; }
  .li-hero { min-height: 560px; }
  .li-promesa, .li-eval, .li-sellos, .li-alcance { grid-template-columns: 1fr; gap: 28px; }
  .li-pasos { grid-template-columns: 1fr; }
  .li-ciclo-pasos { grid-template-columns: 1fr; gap: 16px; }
  .li-ciclo-cancha { display: none; }
  .li-lista li { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px; padding: 16px; }
  .li-lista li img { display: none; }
  .li-lista .li-n { font-size: 46px; grid-row: span 3; }
  .li-ir { justify-self: start; }
  .li-sello-col { flex-direction: column; }
  .laf-barra .laf-donde { display: none; }
  .li-claim { font-size: 44px; }
  .laf-inicio .li-h2 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { .li-btn { transition: none; } }