<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Temporizadores en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-reloj { max-width: 460px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 25px; text-align: center; }
    .display-tiempo { font-size: 3rem; font-family: monospace; font-weight: bold; color: #0284c7; background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 8px; padding: 15px; margin: 15px 0; letter-spacing: 2px; }
    .grupo-btn { display: flex; gap: 8px; justify-content: center; }
    button { padding: 9px 18px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .btn-play { background: #16a34a; color: white; }
    .btn-pause { background: #ea580c; color: white; }
    .btn-reset { background: #64748b; color: white; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .alerta-mensaje { margin-top: 15px; font-size: 0.85rem; color: #475569; min-height: 20px; }
  </style>
</head>
<body>

  <div class="card-reloj">
    <h3 style="margin: 0; color: #0f172a;">Cronómetro Asíncrono</h3>

    <div class="display-tiempo" id="reloj">00:00.0</div>

    <div class="grupo-btn">
      <button class="btn-play" id="btn-iniciar" onclick="iniciar()">Iniciar</button>
      <button class="btn-pause" id="btn-pausar" onclick="pausar()" disabled>Pausar</button>
      <button class="btn-reset" onclick="reiniciar()">Reiniciar</button>
    </div>

    <div class="alerta-mensaje" id="mensaje-estado">Presiona "Iniciar" para activar setInterval.</div>
  </div>

  <script>
    let intervaloId = null;
    let decimas = 0;

    function formatearTiempo(totalDecimas) {
      const segTotales = Math.floor(totalDecimas / 10);
      const dec = totalDecimas % 10;
      const min = Math.floor(segTotales / 60);
      const seg = segTotales % 60;

      const strMin = String(min).padStart(2, '0');
      const strSeg = String(seg).padStart(2, '0');
      return `${strMin}:${strSeg}.${dec}`;
    }

    function iniciar() {
      if (intervaloId !== null) return;

      intervaloId = setInterval(function() {
        decimas++;
        document.getElementById('reloj').textContent = formatearTiempo(decimas);
      }, 100);

      document.getElementById('btn-iniciar').disabled = true;
      document.getElementById('btn-pausar').disabled = false;
      document.getElementById('mensaje-estado').textContent = "Cronómetro en marcha (actualización cada 100ms)...";
    }

    function pausar() {
      if (intervaloId === null) return;

      clearInterval(intervaloId);
      intervaloId = null;

      document.getElementById('btn-iniciar').disabled = false;
      document.getElementById('btn-pausar').disabled = true;
      document.getElementById('mensaje-estado').textContent = "Pausado con clearInterval.";
    }

    function reiniciar() {
      pausar();
      decimas = 0;
      document.getElementById('reloj').textContent = "00:00.0";
      document.getElementById('mensaje-estado').textContent = "Cronómetro reiniciado a cero.";
    }
  </script>

</body>
</html>