<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Muestrario de Inputs HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .grid-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      max-width: 620px;
      background: white;
      padding: 24px;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
    }
    .full-width { grid-column: span 2; }
    label { font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 5px; color: #334155; }
    input[type="text"], input[type="email"], input[type="number"], input[type="date"] {
      width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
    }
    input[type="color"] {
      width: 100%; height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; padding: 2px;
    }
    input[type="range"] { width: 100%; cursor: pointer; }
    .opcion-radio { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-top: 5px; }
  </style>
</head>
<body>

  <form class="grid-form" onsubmit="event.preventDefault(); alert('¡Datos recibidos con éxito!');">
    <div class="full-width">
      <h3 style="margin-top: 0; color: #0f172a;">Configuración de Perfil</h3>
    </div>

    <div>
      <label for="campo-email">Correo Electrónico:</label>
      <input type="email" id="campo-email" name="email" placeholder="[email protected]" required>
    </div>

    <div>
      <label for="campo-fecha">Fecha de Nacimiento:</label>
      <input type="date" id="campo-fecha" name="fecha_nacimiento">
    </div>

    <div>
      <label for="campo-color">Color de Tema Favorito:</label>
      <input type="color" id="campo-color" name="color_tema" value="#0284c7">
    </div>

    <div>
      <label for="campo-rango">Nivel de Experiencia (1 - 100):</label>
      <input type="range" id="campo-rango" name="nivel_experiencia" min="1" max="100" value="75">
    </div>

    <div class="full-width">
      <label>Modalidad Preferida (Radio):</label>
      <div style="display: flex; gap: 20px;">
        <label class="opcion-radio">
          <input type="radio" name="modalidad" value="online" checked> Online en Vivo
        </label>
        <label class="opcion-radio">
          <input type="radio" name="modalidad" value="presencial"> Presencial
        </label>
      </div>
    </div>

    <div class="full-width" style="margin-top: 10px;">
      <button type="submit" style="background: #0284c7; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; width: 100%; cursor: pointer;">
        Guardar Configuración
      </button>
    </div>
  </form>

</body>
</html>