/* Laboratorio visual: base común de las animaciones interactivas.
   Diseñadas para 1600×900 (embebidas en la presentación) y usables en celular. */
html, body { height: 100%; }
body.lab { display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; }
.lab-cab {
  display: flex; align-items: center; gap: 24px; padding: 22px 40px 14px;
  border-bottom: 1px solid var(--borde);
}
.lab-cab .ante { font: 700 15px var(--fuente-titulo); letter-spacing: 2px; color: var(--acento); text-transform: uppercase; }
.lab-cab h1 { font-size: 34px; margin: 2px 0 0; }
.lab-cab .ctrl { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lab-cab .ctrl .boton { font-size: 17px; padding: 9px 16px; }
.lab-cab .ctrl .cuenta { color: var(--texto-2); font: 600 17px var(--fuente-mono); min-width: 70px; text-align: right; }
.lab-pie { padding: 8px 40px 12px; color: var(--texto-3); font-size: 14px; }
.lab-pie kbd { background: var(--fondo-3); border: 1px solid var(--borde); border-radius: 5px; padding: 1px 6px; }

@media (max-width: 900px) {
  body.lab { overflow: auto; }
  .lab-cab { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  .lab-cab h1 { font-size: 24px; }
  .lab-cab .ctrl { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .lab-pie { padding: 8px 16px; }
}