<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Demostración de Atributos</title>
  <style>
    body { font-family: sans-serif; padding: 20px; line-height: 1.6; background: #f8fafc; }
    .caja-alerta {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-left: 4px solid #3b82f6;
      border-radius: 6px;
      padding: 16px;
      max-width: 500px;
    }
    .badge-destacado {
      background: #2563eb;
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    .btn-prueba {
      padding: 8px 14px;
      border-radius: 6px;
      border: 1px solid #94a3b8;
      background: #ffffff;
      cursor: pointer;
    }
    .btn-prueba:hover { background: #f1f5f9; }
  </style>
</head>
<body>

  <div id="panel-principal" class="caja-alerta" title="Este es un tooltip nativo generado por el atributo title">
    <span class="badge-destacado">Tip de Atributos</span>
    <h3 style="margin-top: 10px; color: #1e3a8a;">Pasa el mouse por esta tarjeta</h3>
    
    <p>
      El atributo <code>title</code> crea un tooltip al dejar el cursor quieto unos segundos.<br>
      La línea debajo de este texto es un elemento vacío <code>&lt;hr&gt;</code>:
    </p>

    <hr style="border: 0; border-top: 1px solid #cbd5e1; margin: 15px 0;">

    <button class="btn-prueba" onclick="alert('Elemento con id: ' + this.parentElement.id)">
      Ver ID de la tarjeta
    </button>
    <button class="btn-prueba" disabled style="opacity: 0.6; cursor: not-allowed;" title="Este botón tiene el atributo booleano disabled">
      Botón Deshabilitado
    </button>
  </div>

</body>
</html>