<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Validación Nativa HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-val { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; }
    .campo { margin-bottom: 14px; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: #1e293b; }
    input {
      width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px;
    }
    /* Estilos visuales con pseudoclases de validación */
    input:invalid:focus { border-color: #ef4444; background: #fff5f5; }
    input:valid:focus { border-color: #10b981; }
    .btn-submit {
      background: #0284c7; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer;
    }
    .btn-submit:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-val">
    <h3 style="margin-top: 0; color: #0f172a;">Validación Estricta HTML5</h3>

    <form action="#" method="POST" onsubmit="event.preventDefault(); alert('¡Formulario validado con éxito!');">
      <div class="campo">
        <label for="codigo-seguridad">Código PIN de 4 Dígitos (Pattern RegEx):</label>
        <input type="text" id="codigo-seguridad" name="pin" 
               pattern="[0-9]{4}" 
               maxlength="4" 
               placeholder="Ej: 1234" 
               title="El PIN debe contener exactamente 4 dígitos numéricos" 
               required>
      </div>

      <div class="campo">
        <label for="edad-usuario">Edad (Mínimo 18 años):</label>
        <input type="number" id="edad-usuario" name="edad" min="18" max="100" placeholder="18" required>
      </div>

      <div class="campo">
        <label for="campo-bloqueado">ID de Transacción (Readonly):</label>
        <input type="text" id="campo-bloqueado" name="txn_id" value="TXN-2026-KLP-884" readonly style="background: #f1f5f9;">
      </div>

      <button type="submit" class="btn-submit">Validar y Enviar</button>
    </form>
  </div>

</body>
</html>