<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Condicionales en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-cond { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 8px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .alerta-resultado { padding: 12px; border-radius: 6px; margin-top: 15px; font-weight: 500; }
  </style>
</head>
<body>

  <div class="card-cond">
    <h3 style="margin-top: 0; color: #0f172a;">Evaluación de Desempeño</h3>

    <label for="puntaje">Ingresa la Calificación (0 - 100):</label>
    <input type="number" id="puntaje" min="0" max="100" value="78">

    <button onclick="evaluarPuntaje()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Evaluar Condicional
    </button>

    <div id="resultado-evaluacion"></div>

    <script>
      function evaluarPuntaje() {
        const nota = Number(document.getElementById('puntaje').value);
        let mensaje = "";
        let colorFondo = "";

        if (nota >= 90) {
          mensaje = "🏆 Nivel Avanzado: Aprobación con Honores.";
          colorFondo = "#dcfce7";
        } else if (nota >= 70) {
          mensaje = "✅ Nivel Intermedio: Aprobado satisfactoriamente.";
          colorFondo = "#e0f2fe";
        } else {
          mensaje = "⚠️ Nivel Básico: Necesita tutoría con Sócrates AI.";
          colorFondo = "#fee2e2";
        }

        // Operador ternario para decidir si emite certificado
        const tieneCertificado = (nota >= 70) ? "Certificado disponible" : "Sin certificado";

        document.getElementById('resultado-evaluacion').innerHTML = `
          <div class="alerta-resultado" style="background: ${colorFondo};">
            ${mensaje}<br>
            <small>Estado: <strong>${tieneCertificado}</strong></small>
          </div>
        `;
      }

      evaluarPuntaje();
    </script>
  </div>

</body>
</html>