<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Selección de Elementos en el DOM</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-dom { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .botones-accion { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
    .botones-accion button { padding: 8px 12px; background: #f1f5f9; border: 1px solid #94a3b8; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
    .botones-accion button:hover { background: #0284c7; color: white; border-color: #0284c7; }
    .area-demo { border: 2px dashed #cbd5e1; border-radius: 6px; padding: 15px; margin-bottom: 15px; }
    .item-demo { padding: 8px 12px; margin: 6px 0; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; transition: all 0.3s; }
    .resaltado-rojo { background: #fee2e2 !important; border-color: #ef4444 !important; font-weight: bold; color: #991b1b; }
    .resaltado-verde { background: #dcfce7 !important; border-color: #22c55e !important; font-weight: bold; color: #166534; }
    .consola-salida { background: #0f172a; color: #38bdf8; padding: 10px 14px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; }
  </style>
</head>
<body>

  <div class="card-dom">
    <h3 style="margin-top: 0; color: #0f172a;">Práctica: Selectores del DOM</h3>

    <div class="botones-accion">
      <button onclick="seleccionarPorId()">getElementById('caja-alfa')</button>
      <button onclick="seleccionarPrimerItem()">querySelector('.item-demo')</button>
      <button onclick="seleccionarTodos()">querySelectorAll('.urgente')</button>
      <button onclick="limpiarSeleccion()">Restablecer</button>
    </div>

    <div class="area-demo" id="contenedor-items">
      <div id="caja-alfa" class="item-demo">Caja Alfa (#caja-alfa)</div>
      <div class="item-demo urgente">Elemento Urgente 1 (.urgente)</div>
      <div class="item-demo">Elemento Regular</div>
      <div class="item-demo urgente">Elemento Urgente 2 (.urgente)</div>
    </div>

    <div class="consola-salida" id="log-salida">Haz clic en un selector para inspeccionar el DOM...</div>

    <script>
      function limpiarSeleccion() {
        document.querySelectorAll('.item-demo').forEach(el => {
          el.className = 'item-demo' + (el.innerText.includes('Urgente') ? ' urgente' : '');
        });
        document.getElementById('log-salida').textContent = "Selección restablecida.";
      }

      function seleccionarPorId() {
        limpiarSeleccion();
        const el = document.getElementById('caja-alfa');
        if (el) {
          el.classList.add('resaltado-verde');
          document.getElementById('log-salida').textContent = `Seleccionado 1 elemento por ID: <${el.tagName.toLowerCase()} id="${el.id}">`;
        }
      }

      function seleccionarPrimerItem() {
        limpiarSeleccion();
        const primer = document.querySelector('.item-demo');
        if (primer) {
          primer.classList.add('resaltado-rojo');
          document.getElementById('log-salida').textContent = `querySelector retornó el primer nodo coincidente: "${primer.textContent}"`;
        }
      }

      function seleccionarTodos() {
        limpiarSeleccion();
        const urgentes = document.querySelectorAll('.urgente');
        urgentes.forEach(nodo => nodo.classList.add('resaltado-verde'));
        document.getElementById('log-salida').textContent = `querySelectorAll retornó una NodeList con ${urgentes.length} elementos.`;
      }
    </script>
  </div>

</body>
</html>