/* Winlab (Windows): lo propio de la página. Lo común de los paneles (pasos, perfil, vídeo) está en
   playrobotica/clase.css. La pantalla de Windows es un iframe (pantalla.html) con el simulador escalado y centrado. */
:root { --pista: #fff4cc; --pista-borde: #ffbf00; }
main { position: relative; background: #0b1220; }
/* Arriba del todo y en 16:9: lo que sobra de alto queda abajo, donde se pone el vídeo pequeño */
#pantalla { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 100%; border: 0; display: block; background: #000; }
#pantalla[hidden], #ordenador[hidden] { display: none; }
.paso .texto { font-size: 1.12rem; font-weight: 700; line-height: 1.4; }
.paso.actual { border-width: 3px; }
.leer {
  margin-top: 10px; border: 2px solid var(--borde); background: #fff; color: var(--texto); border-radius: 12px;
  padding: 6px 12px; font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; min-height: 44px;
}
.leer:hover { border-color: var(--acento); color: var(--acento); }
.pista-caja {
  margin-top: 10px; padding: 10px 12px 10px 46px; border-radius: 14px; background: var(--pista);
  border: 3px solid var(--pista-borde); position: relative; font-weight: 800; font-size: 1.08rem;
}
.pista-caja::before { content: "💡"; position: absolute; left: 12px; top: 8px; font-size: 1.4rem; }
.pista-caja p { margin: 0; }
.pista-caja.salta, .bravo.salta { animation: salta .5s ease-out; }
@keyframes salta { 0% { transform: scale(.85); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.bravo {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 50; pointer-events: none;
  background: var(--hecho); color: #fff; font-size: 2rem; font-weight: 900; border-radius: 999px; padding: 10px 34px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.bravo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pista-caja.salta, .bravo.salta { animation: none; } }

/* Capítulo 1: el ordenador dibujado */
#ordenador { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(#e9f1ff, #cfdcf3); padding: 20px; }
body.video-pequeno #ordenador { padding-right: min(480px, 40%); }
#ordenador svg { width: 100%; max-width: 1100px; max-height: calc(100% - 70px); }
#ordenador .parte { cursor: pointer; outline: none; }
#ordenador .parte:hover > *:first-child, #ordenador .parte:focus-visible > *:first-child { filter: drop-shadow(0 0 10px #ffbf00); }
#ordenador .parte.tocada { animation: tocada .45s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes tocada { 50% { transform: scale(1.04); } }
#ordenador .encender { cursor: pointer; outline: none; }
#ordenador .encender:hover circle, #ordenador .encender:focus-visible circle { stroke: #ffbf00; }
#ordenador .cristal { fill: #0b0f14; }
#ordenador .escritorio-dibujado, #ordenador .despertando { display: none; }
#ordenador[data-estado="encendido"] .escritorio-dibujado { display: inline; }
#ordenador[data-estado="despertando"] .despertando { display: inline; fill: #fff; transform-origin: 410px 230px; animation: gira 1.2s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
#ordenador .luz { fill: #2a2f36; }
#ordenador[data-estado="despertando"] .luz, #ordenador[data-estado="encendido"] .luz { fill: #3bdc6a; }
.estado-ordenador { margin: 8px 0 0; font-size: 1.3rem; font-weight: 800; color: var(--texto); }

@media (max-width: 1300px) { #panel { width: 300px; } }