<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modificar DOM y Clases CSS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .panel { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; transition: all 0.3s ease; }
    .panel.oscuro { background: #0f172a; color: #f8fafc; border-color: #334155; }
    .panel.borde-destacado { border-width: 3px; border-color: #0284c7; box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.2); }
    .botonera { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
    button { padding: 8px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f1f5f9; cursor: pointer; font-weight: 600; }
    button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .estado-badge { display: inline-block; padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; background: #e2e8f0; color: #334155; margin-bottom: 10px; font-weight: bold; }
  </style>
</head>
<body>

  <div class="panel" id="caja-demo">
    <span class="estado-badge" id="badge-estado">Modo Claro Activo</span>
    <h3 id="titulo-panel" style="margin: 0 0 10px 0;">Tarjeta Interactiva</h3>
    <p id="parrafo-panel" style="margin: 0 0 15px 0;">Este texto y los estilos de esta tarjeta pueden ser manipulados en tiempo real mediante JavaScript.</p>

    <div class="botonera">
      <button onclick="alternarModoOscuro()">Conmutar Modo Oscuro</button>
      <button onclick="cambiarTexto()">Cambiar Mensaje</button>
      <button onclick="alternarDestacado()">Conmutar Borde</button>
    </div>
  </div>

  <script>
    let mensajeAlternado = false;

    function alternarModoOscuro() {
      const panel = document.getElementById('caja-demo');
      const badge = document.getElementById('badge-estado');
      
      // Conmutar clase con classList.toggle
      panel.classList.toggle('oscuro');

      if (panel.classList.contains('oscuro')) {
        badge.textContent = "Modo Oscuro Activo";
        badge.style.background = "#334155";
        badge.style.color = "#38bdf8";
      } else {
        badge.textContent = "Modo Claro Activo";
        badge.style.background = "#e2e8f0";
        badge.style.color = "#334155";
      }
    }

    function cambiarTexto() {
      const titulo = document.getElementById('titulo-panel');
      const parrafo = document.getElementById('parrafo-panel');
      mensajeAlternado = !mensajeAlternado;

      if (mensajeAlternado) {
        titulo.textContent = "¡Texto Actualizado con textContent!";
        parrafo.innerHTML = "Ahora el párrafo incluye un fragmento en <strong>negrita HTML</strong> insertado dinámicamente.";
      } else {
        titulo.textContent = "Tarjeta Interactiva";
        parrafo.textContent = "Este texto y los estilos de esta tarjeta pueden ser manipulados en tiempo real mediante JavaScript.";
      }
    }

    function alternarDestacado() {
      const panel = document.getElementById('caja-demo');
      panel.classList.toggle('borde-destacado');
    }
  </script>

</body>
</html>