<?php
session_start();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ASPIRANTES INFOP</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<style>
:root{
    --azul-oscuro:#001F5C;
    --azul-principal:#0033A0;
    --azul-secundario:#0057D9;
    --azul-hover:#0A66FF;
    --dorado:#F4C542;
    --dorado-suave:#f7d878;
    --blanco:#FFFFFF;
    --texto:#374151;
    --texto-light:#6B7280;
    --borde:#E5E7EB;
    --glass:rgba(255,255,255,.92);
}

/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position:relative;
    overflow-x:hidden;

    background:linear-gradient(135deg,var(--azul-oscuro) 0%,var(--azul-principal) 55%,var(--azul-secundario) 100%);
}

/* =========================
   TEXTURA Y PROFUNDIDAD (estáticas)
========================= */

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;

    background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:26px 26px;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;

    background:
    radial-gradient(circle at 12% 15%,rgba(255,255,255,.10),transparent 32%),
    radial-gradient(circle at 88% 82%,rgba(244,197,66,.14),transparent 36%),
    radial-gradient(circle at 90% 10%,rgba(10,102,255,.25),transparent 30%);
}

/* =========================
   WRAPPER GENERAL
========================= */

.pagina{
    position:relative;
    z-index:2;
    width:100%;
    max-width:560px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
   BARRA DE LOGOS INSTITUCIONALES
========================= */

.barra-logos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:rgba(255,255,255,.95);
    padding:10px 22px;
    border-radius:16px;
    margin-bottom:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    animation:fadeIn .5s ease;
}

.barra-logos img{
    height:42px;
    width:auto;
    object-fit:contain;
    display:block;
}

.barra-logos .divisor{
    width:1px;
    height:32px;
    background:var(--borde);
    flex-shrink:0;
}

/* =========================
   LOGIN CARD
========================= */

.login-container{
    position:relative;
    width:100%;

    background:var(--glass);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.4);
    border-top:5px solid var(--dorado);
    border-radius:28px;
    padding:clamp(25px,5vw,50px);

    box-shadow:
    0 25px 80px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.5);

    animation:fadeIn .6s ease .1s backwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   TITULOS
========================= */

h2{
    text-align:center;
    margin-top:0;
    margin-bottom:6px;

    color:var(--azul-principal);
    font-size:clamp(1.5rem,3vw,2rem);
    font-weight:800;
}

.subtitle{
    text-align:center;
    color:var(--texto-light);
    margin-bottom:28px;
    font-size:.95rem;
}

/* =========================
   INPUTS CON ICONO
========================= */

.form-group{
    position:relative;
    margin-bottom:18px;
}

.form-group .icono-input{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--azul-secundario);
    font-size:18px;
    pointer-events:none;
}

.form-control{
    width:100%;
    height:56px;

    border:1.5px solid var(--borde);
    background:#F9FAFB;
    border-radius:16px;

    padding:0 16px 0 48px;
    font-size:15px;

    transition:.25s;
}

.form-control:focus{
    outline:none;
    background:#fff;
    border-color:var(--azul-secundario);
    box-shadow:0 0 0 4px rgba(0,87,217,.15);
}

.toggle-password{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);

    cursor:pointer;
    color:var(--azul-secundario);
    font-size:13px;
    font-weight:700;
    user-select:none;
    display:flex;
    align-items:center;
    gap:5px;
}

.toggle-password:hover{
    color:var(--azul-principal);
}

/* =========================
   BOTON
========================= */

button{
    width:100%;
    height:58px;

    border:none;
    border-radius:16px;

    background:linear-gradient(135deg,var(--azul-secundario),var(--azul-principal));
    color:white;

    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;

    cursor:pointer;
    transition:.3s;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(0,51,160,.35);
}

button:active{
    transform:scale(.98);
}

/* =========================
   TARJETAS DE AYUDA
========================= */

.help-section{
    margin-top:30px;
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.help-card{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.5);
    border-radius:18px;
    padding:20px;
    transition:.3s;
}

.help-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.help-content h4{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--azul-principal);
    margin-bottom:8px;
    font-size:1rem;
}

.help-content p{
    color:var(--texto-light);
    font-size:14px;
    margin-bottom:15px;
}

.btn-help{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    text-align:center;
    padding:12px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:.25s;
}

.btn-primary{
    background:linear-gradient(135deg,var(--azul-secundario),var(--azul-principal));
    color:#fff;
}

.btn-primary:hover{
    box-shadow:0 10px 22px rgba(0,51,160,.3);
    transform:translateY(-2px);
}

.btn-warning{
    background:linear-gradient(135deg,var(--dorado-suave),var(--dorado));
    color:var(--azul-oscuro);
}

.btn-warning:hover{
    box-shadow:0 10px 22px rgba(244,197,66,.35);
    transform:translateY(-2px);
}

/* =========================
   FOOTER
========================= */

.footer{
    margin-top:25px;
    text-align:center;
    color:rgba(255,255,255,.85);
    font-size:12px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    body{
        padding:15px;
    }

    .login-container{
        border-radius:24px;
    }

    .help-section{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){

    .login-container{
        padding:25px 18px;
    }

    .form-control,
    button{
        height:54px;
    }

    h2{
        font-size:1.4rem;
    }

    .barra-logos img{
        height:32px;
    }

    .barra-logos{
        padding:8px 14px;
        gap:12px;
    }
}

</style>
</head>

<body>

<div class="pagina">

  <!-- ===================== LOGOS INSTITUCIONALES ===================== -->
  <div class="barra-logos">
    <img src="https://sigefop.infop.hn/orientacion_inscripcion/assets/img/logo-infop_n.png" alt="Gobierno de la República de Honduras">
    <div class="divisor"></div>
    <img src="https://sigefop.infop.hn/images/logo5.png" alt="Logo INFOP">
  </div>

  <div class="login-container">

    <h2>Aspirantes INFOP</h2>
    <p class="subtitle">Ingresa con tu número de identidad y contraseña</p>

    <form action="pages/php/validar2.php" method="post" onsubmit="return Enviar();" autocomplete="off">

      <div class="form-group">
        <i class="bi bi-person-vcard icono-input"></i>
        <input
          type="tel"
          name="la_identidad"
          class="form-control"
          placeholder="Número de Identidad"
          maxlength="13"
          required
          onkeypress="return valida(event);">
      </div>

      <div class="form-group">
        <i class="bi bi-lock-fill icono-input"></i>
        <input
          type="password"
          id="clave"
          name="la_clave"
          class="form-control"
          placeholder="Contraseña"
          required
          style="padding-right:90px;">
        <span class="toggle-password" onclick="togglePassword()">
          <i class="bi bi-eye-fill" id="iconoOjo"></i>
          <span id="textoOjo">Mostrar</span>
        </span>
      </div>

      <button type="submit">
        <i class="bi bi-box-arrow-in-right"></i>
        Ingresar
      </button>

    </form>

    <div class="help-section">

      <div class="help-card">
        <div class="help-content">
          <h4><i class="bi bi-person-plus-fill"></i> ¿Es tu primera vez aquí?</h4>
          <p>Crea tu cuenta para iniciar tu proceso como aspirante.</p>
          <a href="registro.php" class="btn-help btn-primary">
            <i class="bi bi-person-plus"></i> Crear mi cuenta
          </a>
        </div>
      </div>

      <div class="help-card">
        <div class="help-content">
          <h4><i class="bi bi-shield-lock-fill"></i> ¿Tienes problemas para ingresar?</h4>
          <p>Recupera o actualiza tu contraseña de forma segura.</p>
          <a href="cambiar_contrasena.php" class="btn-help btn-warning">
            <i class="bi bi-key-fill"></i> Recuperar contraseña
          </a>
        </div>
      </div>

    </div>

  </div>

  <div class="footer">
    © <script>document.write(new Date().getFullYear())</script> INFOP Honduras. Todos los derechos reservados.
  </div>

</div>

<script src="assets/js/core/bootstrap.bundle.min.js"></script>
<script src="assets/js/sweetalert2.all.min.js"></script>

<script>
function togglePassword() {
  const input = document.getElementById("clave");
  const icono = document.getElementById("iconoOjo");
  const texto = document.getElementById("textoOjo");

  if (input.type === "password") {
    input.type = "text";
    texto.textContent = "Ocultar";
    icono.classList.remove("bi-eye-fill");
    icono.classList.add("bi-eye-slash-fill");
  } else {
    input.type = "password";
    texto.textContent = "Mostrar";
    icono.classList.remove("bi-eye-slash-fill");
    icono.classList.add("bi-eye-fill");
  }
}

function valida(e) {
  const tecla = e.key;
  if (tecla === "Backspace") return true;
  return /^[0-9]$/.test(tecla);
}

<?php if (isset($_SESSION['alert'])): ?>
document.addEventListener('DOMContentLoaded', function() {
  Swal.fire({
    icon: '<?php echo $_SESSION['alert']['type']; ?>',
    title: '<?php echo $_SESSION['alert']['title']; ?>',
    html: '<?php echo $_SESSION['alert']['text']; ?>',
    confirmButtonText: '<?php echo $_SESSION['alert']['confirm']; ?>',
    confirmButtonColor: '#0033a0'
  });
});
<?php unset($_SESSION['alert']); endif; ?>
</script>

</body>
</html>