/* La demo de la portada: una lección de Escala FP (Python · lección 1) que se abre aquí mismo, se explica sola con
   locución y subtítulos, ejecuta Python de verdad y termina mandando la nota a un libro de calificaciones de Moodle. */
.demo-abrir { width: 100%; display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.6rem; border-radius: 18px; cursor: pointer;
  background: radial-gradient(500px 160px at 0% 100%, rgba(15,184,164,.18), transparent 70%), var(--bg2); color: var(--text);
  border: 1px solid rgba(15,184,164,.35); font: inherit; text-align: left; transition: border-color .3s, transform .3s; }
.demo-abrir:hover { border-color: var(--teal); transform: translateY(-2px); }
.demo-abrir .play { flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #00110e; font-size: 1.2rem;
  box-shadow: 0 0 0 0 rgba(15,184,164,.5); animation: latido 2.2s ease-out infinite; }
.demo-abrir[aria-expanded="true"] .play { animation: none; }
@keyframes latido { 70% { box-shadow: 0 0 0 16px rgba(15,184,164,0); } 100% { box-shadow: 0 0 0 0 rgba(15,184,164,0); } }
.demo-abrir b { font-family: 'Syne', sans-serif; font-size: 1.2rem; display: block; }
.demo-abrir small { color: var(--muted); font-size: .9rem; }
.demo-abrir .flecha { margin-left: auto; color: var(--teal); transition: transform .3s; }
.demo-abrir[aria-expanded="true"] .flecha { transform: rotate(180deg); }

.demo-panel { margin-top: 1rem; border-radius: 20px; border: 1px solid var(--border); background: #050a14; overflow: hidden; position: relative;
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.7,.2,1); }
.demo-panel.abierta { grid-template-rows: 1fr; }
.demo-panel > .dl-dentro { min-height: 0; overflow: hidden; }

.dl-barra { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dl-migas { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-migas b { color: var(--teal); font-weight: 600; }
.dl-modos { display: flex; gap: .3rem; padding: .25rem; border-radius: 30px; border: 1px solid var(--border); margin-left: auto; }
.dl-modos span { font-size: .8rem; padding: .35rem .8rem; border-radius: 20px; color: var(--muted); display: inline-flex; gap: .4rem; align-items: center; }
.dl-modos span.on { background: var(--teal); color: #00110e; font-weight: 600; }
.dl-ctrl { display: flex; gap: .4rem; }
.dl-ctrl button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .9rem; }
.dl-ctrl button:hover { border-color: var(--teal); }
.dl-progreso { display: flex; gap: 4px; padding: .7rem 1.2rem 0; }
.dl-progreso i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background .4s; }
.dl-progreso i.hecho { background: rgba(15,184,164,.5); } .dl-progreso i.ahora { background: var(--teal); }

.dl-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem; }
.dl-cabecera { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; }
.dl-num { font: 900 3.4rem/1 'Archivo', sans-serif; font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px var(--teal); }
.dl-cabecera small { font-size: .72rem; letter-spacing: .16em; color: var(--teal); font-weight: 700; }
.dl-cabecera h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; margin: .1rem 0 .2rem; }
.dl-cabecera p { color: var(--muted); font-size: .92rem; }

.dl-caja { border-radius: 16px; border: 1px solid var(--border); background: var(--bg2); padding: 1.2rem; position: relative; transition: box-shadow .4s, border-color .4s; }
.dl-caja h4 { font-family: 'Syne', sans-serif; font-size: 1.05rem; margin-bottom: .5rem; }
.dl-caja p { color: var(--muted); font-size: .92rem; margin-bottom: .7rem; }
.dl-caja code { font-family: 'JetBrains Mono', monospace; color: var(--teal-claro); font-size: .88em; }
.dl-etq { position: absolute; top: -.7rem; left: 1rem; background: var(--teal); color: #00110e; font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: .15rem .6rem; border-radius: 20px; }
.foco { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(15,184,164,.18), 0 0 40px rgba(15,184,164,.14); }

.dl-codigo { font-family: 'JetBrains Mono', monospace; font-size: .9rem; background: #02060d; border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; white-space: pre; overflow-x: auto; color: #e6edf7; line-height: 1.55; }
.dl-codigo .s { color: #8ef3e2; } .dl-codigo .f { color: #f0a500; } .dl-codigo .n { color: #c4b5fd; }
textarea.dl-codigo { width: 100%; resize: vertical; min-height: 4.6rem; outline: none; caret-color: var(--teal); }
textarea.dl-codigo:focus { border-color: var(--teal); }
.dl-botones { display: flex; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.dl-botones button { font: 600 .85rem 'Outfit', sans-serif; padding: .5rem 1rem; border-radius: 30px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: border-color .2s, transform .1s; }
.dl-botones button:hover { border-color: var(--teal); }
.dl-botones button.primario { background: var(--teal); color: #00110e; border-color: var(--teal); }
.dl-botones button:active, .dl-botones button.pulsado { transform: scale(.95); }
.dl-salida { font-family: 'JetBrains Mono', monospace; font-size: .85rem; background: #000; border-radius: 10px; padding: .6rem .9rem; min-height: 2.4rem; color: #cfe; white-space: pre-wrap; border: 1px solid rgba(255,255,255,.05); }
.dl-salida.vacia { color: var(--dim); }
.dl-salida.error { color: #fca5a5; }
.dl-checks { list-style: none; display: grid; gap: .35rem; margin-top: .7rem; font-size: .88rem; }
.dl-checks li { display: flex; gap: .5rem; color: var(--muted); }
.dl-checks li::before { content: '○'; color: var(--dim); }
.dl-checks li.ok { color: var(--text); } .dl-checks li.ok::before { content: '✓'; color: var(--teal); font-weight: 700; }
.dl-checks li.ko::before { content: '✗'; color: #f87171; font-weight: 700; }
.dl-nota { display: none; align-items: center; gap: .7rem; margin-top: .8rem; padding: .6rem .9rem; border-radius: 12px; background: rgba(15,184,164,.12); border: 1px solid rgba(15,184,164,.4); }
.dl-nota.ver { display: flex; }
.dl-nota b { font-family: 'Syne', sans-serif; font-size: 1.4rem; color: var(--teal); }

/* Moodle: el libro de calificaciones donde llega la nota */
.dl-moodle { grid-column: 1 / -1; border-radius: 16px; border: 1px solid var(--border); background: #f4f6fa; color: #1d2125; overflow: hidden;
  opacity: .25; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.dl-moodle.activo { opacity: 1; transform: none; }
.dl-moodle .mb { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #dee2e6; font-size: .85rem; }
.dl-moodle .mb b { color: #0f6cbf; font-weight: 700; } .dl-moodle .mb .lti { margin-left: auto; font-size: .72rem; padding: .15rem .5rem; border-radius: 6px; background: #e7f6f3; color: #0a7d6f; font-weight: 700; }
.dl-moodle table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dl-moodle th, .dl-moodle td { padding: .55rem 1rem; text-align: left; border-bottom: 1px solid #e3e6ea; }
.dl-moodle th { font-size: .74rem; color: #6a737b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dl-moodle td.nota { font-weight: 700; text-align: right; width: 7rem; font-variant-numeric: tabular-nums; }
.dl-moodle tr.nueva td { animation: fila 2.4s ease-out; }
@keyframes fila { 0%, 40% { background: #d5f5ef; } 100% { background: transparent; } }
.dl-volando { position: fixed; z-index: 200; pointer-events: none; font: 700 1.1rem 'Syne', sans-serif; color: #00110e; background: var(--teal);
  padding: .35rem .8rem; border-radius: 20px; box-shadow: 0 0 30px rgba(15,184,164,.7); }

.dl-sub { grid-column: 1 / -1; display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.2rem; border-top: 1px solid var(--border); background: rgba(15,184,164,.05); min-height: 3.6rem; }
.dl-sub .ico { color: var(--teal); flex: 0 0 auto; }
.dl-sub p { color: var(--text); font-size: .98rem; }
.dl-fin { display: none; gap: 1rem; padding: 0 1.2rem 1.2rem; flex-wrap: wrap; }
.dl-fin.ver { display: flex; }

@media (max-width: 900px) {
  .dl-cuerpo { grid-template-columns: 1fr; }
  .dl-modos { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-abrir .play { animation: none; } .demo-panel { transition: none; } .dl-moodle { transition: none; }
}