<?php
session_start();
require 'config.php';
$error = "";
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $usuario = trim($_POST["usuario"] ?? "");
    $clave   = trim($_POST["clave"] ?? "");
    if ($usuario && $clave) {
        $stmt = $pdo->prepare("SELECT * FROM usuarios WHERE nombre_de_usuario = ? AND contrasena = ? AND active = 'Y' LIMIT 1");
        $stmt->execute([$usuario, $clave]);
        $user = $stmt->fetch();
        if ($user) {
            $_SESSION["usuario"]  = $user["nombre_de_usuario"];
            $_SESSION["rol"]      = $user["namerol"];
            $_SESSION["sucursal"] = $user["sucursales"];
            header("Location: dashboard.php");
            exit;
        } else {
            $error = "Usuario o contrasena incorrectos.";
        }
    } else {
        $error = "Complete todos los campos.";
    }
}
?><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>PROCEIN 2026 PRO</title>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700;800&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --azul:#1565C0;--azul2:#1E88E5;--acento:#29B6F6;
  --fondo1:#B3D9FF;--fondo2:#D6ECFF;--fondo3:#F0F8FF;
  --card:#FFFFFF;--texto:#0D2A4A;--muted:#5A7FA8;--borde:#90CAF9;
}
html,body{width:100%;min-height:100vh}
body{
  font-family:"Inter",sans-serif;
  background:linear-gradient(160deg,#A8D4FF 0%,#C8E6FF 35%,#E0F0FF 65%,#F2F9FF 100%);
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow-x:hidden;position:relative;
  padding:16px;
}

/* ===== ICONOS FLOTANTES GRANDES ===== */
.ficon{
  position:fixed;
  font-size:clamp(52px,8vw,90px);
  opacity:.55;
  animation:iconBob ease-in-out infinite;
  pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(21,101,192,.25));
  z-index:1;
}
@keyframes iconBob{
  0%,100%{transform:translateY(0) rotate(-4deg) scale(1)}
  50%{transform:translateY(-22px) rotate(4deg) scale(1.05)}
}
.ficon.spin{animation:iconSpin 12s linear infinite}
@keyframes iconSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Nubes */
.cloud{
  position:fixed;border-radius:60px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(4px);
  animation:cloudDrift linear infinite;z-index:0;
}
.cloud::before{content:"";position:absolute;background:inherit;border-radius:50%;width:60%;height:180%;top:-40%;left:15%}
.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%;width:40%;height:150%;top:-30%;left:50%}
@keyframes cloudDrift{0%{transform:translateX(-150%)}100%{transform:translateX(110vw)}}

/* ===== COMPUTADORA WRAPPER ===== */
.computer-wrap{
  position:relative;z-index:10;
  width:100%;max-width:660px;
  animation:compIn .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes compIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}

/* ===== MONITOR ===== */
.monitor{
  background:linear-gradient(160deg,#1A2B4A,#0D1B30);
  border-radius:18px 18px 8px 8px;
  padding:10px 10px 10px;
  box-shadow:
    0 0 0 2px #90CAF9,
    0 0 0 4px rgba(41,182,246,.15),
    0 30px 80px rgba(21,101,192,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation:monitorGlow 4s ease-in-out infinite;
}
@keyframes monitorGlow{
  0%,100%{box-shadow:0 0 0 2px #90CAF9,0 0 0 4px rgba(41,182,246,.15),0 30px 80px rgba(21,101,192,.35),inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 0 0 2px #29B6F6,0 0 0 6px rgba(41,182,246,.2),0 30px 90px rgba(41,182,246,.5),inset 0 1px 0 rgba(255,255,255,.12)}
}

.bezel-top{display:flex;align-items:center;justify-content:center;padding:5px 0 7px;gap:8px}
.cam-dot{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#00E5FF,#1565C0);box-shadow:0 0 8px rgba(0,229,255,.8);animation:camPulse 2s ease-in-out infinite}
@keyframes camPulse{0%,100%{box-shadow:0 0 4px rgba(0,229,255,.5)}50%{box-shadow:0 0 14px rgba(0,229,255,1)}}
.bezel-label{font-size:8px;color:rgba(255,255,255,.25);letter-spacing:2px;font-family:"Exo 2",sans-serif}

/* Pantalla */
.screen{
  background:linear-gradient(160deg,#EBF5FF,#D6ECFF);
  border-radius:10px;overflow:hidden;position:relative;
  min-height:400px;display:flex;align-items:center;justify-content:center;
}
.screen::after{
  content:"";position:absolute;top:0;left:-40%;width:80%;height:100%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  animation:screenShine 7s ease-in-out infinite;pointer-events:none;z-index:30;
}
@keyframes screenShine{0%,100%{left:-40%}50%{left:80%}}
.screen-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(41,182,246,.1),transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(21,101,192,.08),transparent 50%),linear-gradient(160deg,#EBF5FF,#D0E8FF)}
.screen-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(41,182,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(41,182,246,.05) 1px,transparent 1px);background-size:26px 26px}

/* Contenido login */
.screen-content{position:relative;z-index:10;width:100%;padding:clamp(16px,4vw,32px) clamp(18px,5vw,44px)}

.logo-wrap{text-align:center;margin-bottom:4px;animation:logoIn .6s ease .3s both}
.logo-wrap img{height:clamp(34px,6vw,48px);width:auto;filter:drop-shadow(0 2px 8px rgba(21,101,192,.25))}
@keyframes logoIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

.sys-name{text-align:center;font-family:"Exo 2",sans-serif;font-size:clamp(14px,3.5vw,21px);font-weight:800;color:var(--azul);letter-spacing:.5px;margin:8px 0 2px;animation:fadeUp .5s ease .4s both}
.sys-name em{color:var(--acento);font-style:normal}
.sys-sub{text-align:center;font-size:clamp(7px,1.8vw,9px);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(12px,3vw,20px);animation:fadeUp .5s ease .45s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.divider{height:1px;margin-bottom:clamp(12px,3vw,18px);background:linear-gradient(90deg,transparent,var(--borde),var(--acento),var(--borde),transparent)}

.field-group{margin-bottom:clamp(10px,2.5vw,14px);animation:fadeUp .5s ease both}
.field-group:nth-child(1){animation-delay:.55s}
.field-group:nth-child(2){animation-delay:.62s}

label{display:block;font-family:"Exo 2",sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input{
  width:100%;background:#F0F8FF;border:1.5px solid var(--borde);border-radius:8px;
  padding:clamp(9px,2vw,11px) 13px;color:var(--texto);
  font-size:clamp(13px,2.5vw,14px);font-family:"Inter",sans-serif;
  outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;
}
input:focus{border-color:var(--azul2);background:#fff;box-shadow:0 0 0 3px rgba(30,136,229,.12)}
input::placeholder{color:#A8C8E8}

.user-info{display:flex;gap:7px;margin-top:6px;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.user-info.visible{max-height:56px;opacity:1}
.badge{flex:1;background:linear-gradient(135deg,#E3F2FD,#EBF5FF);border:1px solid var(--borde);border-radius:7px;padding:6px 9px}
.badge span{display:block;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.badge strong{color:var(--azul);font-size:clamp(10px,2.5vw,12px);font-weight:700}

.error-msg{background:#FFF0F0;border:1px solid #FFCDD2;border-radius:7px;padding:8px 12px;color:#C62828;font-size:12px;text-align:center;margin-bottom:12px}

.btn{
  width:100%;margin-top:4px;
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul2) 50%,var(--acento) 100%);
  background-size:200%;border:none;border-radius:8px;
  padding:clamp(10px,2.5vw,13px);color:#fff;font-family:"Exo 2",sans-serif;
  font-size:clamp(12px,2.5vw,14px);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;overflow:hidden;position:relative;
  transition:background-position .4s,transform .15s,box-shadow .2s;
  animation:fadeUp .5s ease .7s both;
  box-shadow:0 4px 16px rgba(21,101,192,.3);-webkit-tap-highlight-color:transparent;
}
.btn:hover{background-position:100%;transform:translateY(-2px);box-shadow:0 6px 22px rgba(41,182,246,.4)}
.btn:active{transform:none}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:btnShine 2.5s ease 1.5s infinite}
@keyframes btnShine{0%{left:-80%}60%,100%{left:130%}}

.footer{text-align:center;margin-top:clamp(10px,2.5vw,16px);font-size:10px;color:var(--muted);letter-spacing:1px}

/* Taskbar */
.taskbar{position:absolute;bottom:0;left:0;right:0;height:26px;background:rgba(21,101,192,.07);border-top:1px solid rgba(41,182,246,.15);display:flex;align-items:center;padding:0 10px;gap:7px;z-index:15}
.task-dot{width:7px;height:7px;border-radius:50%;animation:taskPulse 2s ease-in-out infinite}
.task-dot:nth-child(1){background:#1E88E5;animation-delay:0s}
.task-dot:nth-child(2){background:#29B6F6;animation-delay:.3s}
.task-dot:nth-child(3){background:#00E5FF;animation-delay:.6s}
@keyframes taskPulse{0%,100%{opacity:.35}50%{opacity:1}}
.task-time{margin-left:auto;font-size:9px;color:var(--muted);font-family:"Exo 2",sans-serif;font-weight:600;letter-spacing:1px}

/* Stand */
.stand{width:100%;display:flex;flex-direction:column;align-items:center}
.neck{width:clamp(55px,10%,80px);height:clamp(14px,2.2vw,22px);background:linear-gradient(180deg,#1A2B4A,#243550);clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%)}
.base{width:clamp(150px,32%,220px);height:clamp(8px,1.5vw,14px);background:linear-gradient(180deg,#243550,#1A2B4A);border-radius:0 0 50px 50px;box-shadow:0 6px 20px rgba(21,101,192,.2)}

/* ===== TECLADO ===== */
.keyboard-wrap{
  margin-top:10px;
  width:100%;max-width:660px;
  animation:kbIn .6s cubic-bezier(.16,1,.3,1) .5s both;
}
@keyframes kbIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

.keyboard{
  background:linear-gradient(180deg,#1E3050,#152235);
  border-radius:12px;
  padding:10px 12px 12px;
  box-shadow:0 8px 30px rgba(21,101,192,.3),0 0 0 1.5px rgba(41,182,246,.2),inset 0 1px 0 rgba(255,255,255,.06);
}
.kb-row{display:flex;gap:5px;margin-bottom:5px;justify-content:center}

.key{
  min-width:32px;height:32px;
  background:linear-gradient(180deg,#263C5A,#1A2B40);
  border-radius:5px;border:none;
  color:#90CAF9;font-family:"Exo 2",sans-serif;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:default;
  box-shadow:0 3px 0 #0D1520,0 0 0 1px rgba(41,182,246,.12);
  transition:all .08s ease;
  position:relative;overflow:hidden;
  flex:1;max-width:36px;
  letter-spacing:.5px;
}
.key.wide{max-width:none;flex:1.6}
.key.wider{max-width:none;flex:2.2}
.key.space{max-width:none;flex:6}

.key.active{
  background:linear-gradient(180deg,var(--acento),var(--azul2));
  color:#fff;
  box-shadow:0 0 0 1px #29B6F6,0 0 12px rgba(41,182,246,.7),0 1px 0 #0D1520;
  transform:translateY(2px);
}
.key::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
  border-radius:inherit;
}

.kb-label{text-align:center;font-size:9px;color:rgba(144,202,249,.4);letter-spacing:2px;font-family:"Exo 2",sans-serif;font-weight:600;margin-bottom:6px}
</style>
</head>
<body>

<!-- Nubes -->
<div class="cloud" style="width:220px;height:44px;top:6%;animation-duration:50s;animation-delay:0s"></div>
<div class="cloud" style="width:160px;height:32px;top:14%;animation-duration:65s;animation-delay:12s"></div>
<div class="cloud" style="width:280px;height:50px;top:3%;animation-duration:58s;animation-delay:28s"></div>

<!-- ICONOS GRANDES FLOTANTES -->
<div class="ficon" style="top:12%;left:2%;animation-duration:6s;animation-delay:0s">💻</div>
<div class="ficon" style="top:55%;left:1%;animation-duration:8s;animation-delay:1.5s">🖱️</div>
<div class="ficon" style="top:30%;right:2%;animation-duration:7s;animation-delay:.5s">🖥️</div>
<div class="ficon" style="bottom:18%;right:2%;animation-duration:9s;animation-delay:2s">⌨️</div>
<div class="ficon spin" style="top:75%;left:3%;animation-duration:14s;font-size:clamp(40px,6vw,70px)">💿</div>
<div class="ficon" style="top:5%;right:4%;animation-duration:5s;animation-delay:3s;font-size:clamp(38px,5.5vw,68px)">🔌</div>

<!-- Monitor All-in-One -->
<div class="computer-wrap">
  <div class="monitor">
    <div class="bezel-top">
      <div class="cam-dot"></div>
      <span class="bezel-label">PROCEIN CAM &nbsp;●&nbsp; HD</span>
    </div>
    <div class="screen">
      <div class="screen-bg"></div>
      <div class="screen-grid"></div>
      <div class="screen-content">
        <div class="logo-wrap">
          <img src="data:image/jpeg;base64,[encoded data, 19656 characters]" alt="VANTECC">
        </div>
        <div class="sys-name">PROCEIN <em>2026</em> PRO</div>
        <p class="sys-sub">Vanguardia en Tecnologia Computacional</p>
        <div class="divider"></div>
        <?php if($error): ?>
        <div class="error-msg"><?= htmlspecialchars($error) ?></div>
        <?php endif; ?>
        <form method="POST" id="loginForm" autocomplete="off">
          <div class="field-group">
            <label>Usuario</label>
            <input type="text" name="usuario" id="usuarioInput"
                   placeholder="Nombre de usuario"
                   value="<?= htmlspecialchars($_POST["usuario"] ?? "") ?>">
            <div class="user-info" id="userInfo">
              <div class="badge"><span>Sucursal</span><strong id="infoSucursal">—</strong></div>
              <div class="badge"><span>Rol</span><strong id="infoRol">—</strong></div>
            </div>
          </div>
          <div class="field-group">
            <label>Contrasena</label>
            <input type="password" name="clave" id="claveInput" placeholder="••••••••">
          </div>
          <button type="submit" class="btn" id="btnLogin">Ingresar al Sistema</button>
        </form>
        <div class="footer">VANTECC &copy; 2026 &nbsp;&middot;&nbsp; CompuJuarez</div>
      </div>
      <div class="taskbar">
        <div class="task-dot"></div><div class="task-dot"></div><div class="task-dot"></div>
        <span class="task-time" id="clock">--:--</span>
      </div>
    </div>
  </div>
  <div class="stand"><div class="neck"></div><div class="base"></div></div>
</div>

<!-- TECLADO -->
<div class="keyboard-wrap">
  <div class="keyboard">
    <div class="kb-label">PROCEIN KEYBOARD</div>
    <div class="kb-row" id="row1">
      <div class="key" data-key="q">Q</div><div class="key" data-key="w">W</div>
      <div class="key" data-key="e">E</div><div class="key" data-key="r">R</div>
      <div class="key" data-key="t">T</div><div class="key" data-key="y">Y</div>
      <div class="key" data-key="u">U</div><div class="key" data-key="i">I</div>
      <div class="key" data-key="o">O</div><div class="key" data-key="p">P</div>
    </div>
    <div class="kb-row" id="row2">
      <div class="key" data-key="a">A</div><div class="key" data-key="s">S</div>
      <div class="key" data-key="d">D</div><div class="key" data-key="f">F</div>
      <div class="key" data-key="g">G</div><div class="key" data-key="h">H</div>
      <div class="key" data-key="j">J</div><div class="key" data-key="k">K</div>
      <div class="key" data-key="l">L</div>
    </div>
    <div class="kb-row" id="row3">
      <div class="key wider" data-key="shift">SHIFT</div>
      <div class="key" data-key="z">Z</div><div class="key" data-key="x">X</div>
      <div class="key" data-key="c">C</div><div class="key" data-key="v">V</div>
      <div class="key" data-key="b">B</div><div class="key" data-key="n">N</div>
      <div class="key" data-key="m">M</div>
      <div class="key wider" data-key="backspace">&#9003;</div>
    </div>
    <div class="kb-row">
      <div class="key wide" data-key="0">123</div>
      <div class="key space" data-key=" ">ESPACIO</div>
      <div class="key wide" data-key="enter">ENTER</div>
    </div>
  </div>
</div>

<script>
// Reloj
function updateClock(){
  const n=new Date();
  document.getElementById("clock").textContent=
    String(n.getHours()).padStart(2,"0")+":"+String(n.getMinutes()).padStart(2,"0");
}
updateClock();setInterval(updateClock,10000);

// Iluminar tecla
function flashKey(k){
  const key = document.querySelector('.key[data-key="'+k.toLowerCase()+'"]');
  if(!key) return;
  key.classList.add("active");
  setTimeout(()=>key.classList.remove("active"),220);
}

// Escuchar teclado fisico
document.addEventListener("keydown",e=>{
  const k=e.key.toLowerCase();
  if(k==="backspace") flashKey("backspace");
  else if(k===" ") flashKey(" ");
  else if(k==="enter") flashKey("enter");
  else if(k==="shift") flashKey("shift");
  else flashKey(k);
});

// AJAX info usuario
let timer;
const input=document.getElementById("usuarioInput");
const infoBox=document.getElementById("userInfo");
input.addEventListener("input",()=>{
  clearTimeout(timer);
  const val=input.value.trim();
  if(!val){infoBox.classList.remove("visible");return;}
  timer=setTimeout(()=>{
    fetch("get_user_info.php?nombre_de_usuario="+encodeURIComponent(val))
      .then(r=>r.json())
      .then(d=>{
        if(d.found){
          document.getElementById("infoSucursal").textContent=d.sucursal||"—";
          document.getElementById("infoRol").textContent=d.rol||"—";
          infoBox.classList.add("visible");
        }else infoBox.classList.remove("visible");
      }).catch(()=>{});
  },450);
});

// Submit
document.getElementById("loginForm").addEventListener("submit",()=>{
  const b=document.getElementById("btnLogin");
  b.textContent="Verificando...";b.style.opacity=".75";b.style.pointerEvents="none";
});
</script>
<?php include __DIR__."/theme.php"; ?>
</body>
</html>