<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ARKHON Cloud</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{--bg:#FFF9F4;--surface:#fff;--line:#EAECF4;--line-2:#D8DCE8;--text:#111827;--text-2:#374151;--text-3:#6B7280;--orange:#FF7A00;--orange-d:#EA6A0A;--orange-lt:rgba(255,122,0,.11);--green:#10B981;--green-lt:rgba(16,185,129,.10);--blue:#38BDF8;--mint:#9DEBD5;--red:#EF4444;--shadow:0 22px 60px rgba(17,24,39,.12);--shadow-soft:0 10px 28px rgba(17,24,39,.08);--r:12px}
    *{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;font-family:"Plus Jakarta Sans",sans-serif;color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}
    body{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 12% 20%,rgba(255,122,0,.08),transparent 22%),radial-gradient(circle at 88% 12%,rgba(16,185,129,.10),transparent 24%),linear-gradient(180deg,#FFFDFC 0%,#FFF7F0 50%,#F5F6F8 100%);position:relative}
    @keyframes floatCloud{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes softRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes glowPulse{0%,100%{box-shadow:0 8px 22px rgba(255,122,0,.22)}50%{box-shadow:0 12px 34px rgba(255,122,0,.34)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    .cloud{position:fixed;pointer-events:none;opacity:.72;filter:drop-shadow(0 16px 22px rgba(255,122,0,.07));animation:floatCloud 7s ease-in-out infinite}
    .cloud svg{display:block;width:100%;height:100%;overflow:visible}.cloud path{fill:none;stroke-linecap:round;stroke-linejoin:round}.cloud .c1{stroke:rgba(255,122,0,.23);stroke-width:8}.cloud .c2{stroke:rgba(56,189,248,.22);stroke-width:7}.cloud .c3{stroke:rgba(16,185,129,.16);stroke-width:7}
    .cloud-a{width:170px;height:116px;left:7%;top:12%;animation-delay:-1s}.cloud-b{width:210px;height:142px;right:7%;top:12%;animation-delay:-3s}.cloud-c{width:240px;height:160px;left:4%;bottom:6%;animation-delay:-2s}.cloud-d{width:135px;height:90px;right:5%;bottom:9%;animation-delay:-4s}.cloud-e{width:130px;height:88px;left:49%;top:10%;opacity:.45;animation-delay:-5s}
    .page{min-height:100vh;width:min(1180px,100%);margin:0 auto;padding:64px 34px 36px;display:grid;grid-template-columns:minmax(0,1.06fr) 420px;align-items:center;gap:72px;position:relative;z-index:1;animation:fadeIn .35s ease both}.page.register-mode{width:min(1260px,100%);grid-template-columns:minmax(360px,.74fr) minmax(620px,.9fr);gap:46px}
    .brand{display:flex;align-items:center;gap:14px;margin-bottom:28px;animation:softRise .48s ease both}.mark{width:42px;height:42px;border-radius:11px;background:#ff6b12;display:grid;place-items:center;box-shadow:0 8px 22px rgba(255,122,0,.24);animation:glowPulse 3.6s ease-in-out infinite;overflow:hidden}.mark svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2}.mark img{width:100%;height:100%;display:block;object-fit:cover}.brand-name{font-size:30px;font-weight:800;letter-spacing:-1.1px}.brand-name span{color:var(--orange);margin-left:8px}.brand-sub{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text-2);margin-top:7px}
    .hero h1{font-size:26px;letter-spacing:-.7px;line-height:1.2;margin:54px 0 28px;max-width:620px;animation:softRise .54s .06s ease both}.features{display:grid;gap:26px;max-width:650px}.feature{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:flex-start;animation:softRise .48s ease both}.feature:nth-child(1){animation-delay:.12s}.feature:nth-child(2){animation-delay:.2s}.feature:nth-child(3){animation-delay:.28s}.feature-icon{width:40px;height:40px;border-radius:50%;background:var(--orange);display:grid;place-items:center;box-shadow:0 8px 18px rgba(255,122,0,.22)}.feature-icon svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2}.feature-title{font-size:17px;font-weight:800;letter-spacing:-.2px}.feature-copy{font-size:14px;line-height:1.55;color:var(--text-2);font-weight:550;margin-top:4px}
    .login-card{background:#fff;border:1px solid rgba(234,236,244,.95);border-radius:13px;box-shadow:var(--shadow);padding:34px 28px 24px;animation:softRise .52s .12s ease both}.page.register-mode .login-card{padding:30px 28px 22px}.login-card h2{text-align:center;font-size:27px;letter-spacing:-.6px;margin-bottom:28px}.form{display:grid;gap:16px}.form.hidden{display:none}.register-form{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:14px}.field{display:grid;gap:8px;min-width:0}.full{grid-column:1/-1}.label{font-size:12px;font-weight:750;color:var(--text-2)}.input-wrap{height:42px;border:1px solid var(--line-2);border-radius:5px;background:#FBFCFE;display:grid;grid-template-columns:minmax(0,1fr) 42px;overflow:hidden;transition:.15s;min-width:0}.input-wrap:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-lt);background:#fff}.input{border:0;outline:0;background:transparent;padding:0 12px;font-weight:650;color:var(--text);min-width:0;width:100%}.input-icon{border-left:1px solid var(--line);display:grid;place-items:center;color:var(--text-2)}.input-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
    .btn{height:48px;border-radius:5px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:9px;transition:.16s;position:relative}.btn:hover{border-color:rgba(255,122,0,.34);color:var(--orange)}.btn.primary{margin-top:18px;border:0;background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(255,122,0,.24)}.btn.primary:hover{background:var(--orange-d);color:#fff;transform:translateY(-1px)}.btn.google{height:42px;font-size:14px}.btn.google svg{width:16px;height:16px}.btn.loading{color:transparent;pointer-events:none}.btn.loading:after{content:"";width:18px;height:18px;border:2px solid rgba(255,255,255,.58);border-top-color:#fff;border-radius:50%;position:absolute;animation:spin .8s linear infinite}
    .login-links{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:12px;font-weight:650}.login-links a{color:var(--text);text-decoration:none}.login-links a:hover{color:var(--orange)}.verify-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}.choice{height:38px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--text-2);font-size:11px;font-weight:750}.choice input{accent-color:var(--orange)}.terms{font-size:11px;line-height:1.5;color:var(--text-3);font-weight:650}.terms input{accent-color:var(--orange);margin-right:6px}.status{min-height:18px;margin-top:18px;text-align:center;color:var(--text-3);font-size:11px;font-weight:750}.status.error{color:var(--red)}.status.ok{color:var(--green)}.foot{text-align:center;color:var(--text-3);font-size:11px;margin-top:26px;font-weight:650}
    .mini-monitor{position:relative;width:min(310px,100%);margin:30px 0 0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);padding:11px;display:grid;gap:8px;animation:softRise .55s .36s ease both}.mini-top{display:flex;align-items:center;justify-content:space-between}.mini-title{font-size:11px;font-weight:800}.mini-pill{font-size:9px;font-weight:800;color:var(--green);background:var(--green-lt);padding:4px 8px;border-radius:20px}.mini-chart{height:76px}.mini-line{stroke:var(--orange);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:360;animation:draw 1.4s .5s ease forwards}.mini-area{fill:url(#miniArea)}
    .toast{position:fixed;right:22px;bottom:22px;z-index:20;display:none;align-items:flex-start;gap:12px;width:min(390px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:14px;box-shadow:0 20px 52px rgba(17,24,39,.18);padding:14px 15px;animation:toastIn .22s ease both}.toast.show{display:flex}.toast.ok{border-left-color:var(--green)}.toast.error{border-left-color:var(--red)}.toast-icon{width:30px;height:30px;border-radius:10px;background:var(--orange-lt);color:var(--orange);display:grid;place-items:center;font-weight:900;flex-shrink:0}.toast.ok .toast-icon{background:var(--green-lt);color:var(--green)}.toast.error .toast-icon{background:rgba(239,68,68,.10);color:var(--red)}.toast-title{font-size:13px;font-weight:900}.toast-copy{font-size:12px;line-height:1.45;color:var(--text-3);font-weight:650;margin-top:2px}
    @media(max-width:980px){.page,.page.register-mode{grid-template-columns:1fr;gap:32px;padding-top:34px}.login-card{max-width:480px;width:100%;margin:0 auto}.page.register-mode .login-card{max-width:680px}.mini-monitor{display:none}.hero h1{margin-top:28px}.brand-name{font-size:25px}}@media(max-width:720px){.page.register-mode .login-card{max-width:480px}.register-form,.verify-row{grid-template-columns:1fr}.login-links{display:grid;grid-template-columns:1fr;text-align:center}.full{grid-column:auto}}@media(max-width:560px){.page{padding:18px 12px 28px}.cloud-b,.cloud-c,.cloud-d,.cloud-e{display:none}.brand-name{font-size:22px}.hero h1{font-size:22px}.feature{grid-template-columns:38px 1fr}.feature-icon{width:34px;height:34px}.login-card,.page.register-mode .login-card{padding:24px 16px 20px}.login-card h2{font-size:24px}.brand{margin-bottom:16px}}
  </style>
</head>
<body>
  <div class="cloud cloud-a"><svg viewBox="0 0 180 120"><path class="c3" d="M26 80c-9-31 12-58 45-60"/><path class="c2" d="M18 70c6-35 38-54 73-45"/><path class="c1" d="M42 78h78c19 0 30-14 25-31-5-17-26-24-41-12C93 7 51 18 55 51 36 48 23 58 24 72"/></svg></div>
  <div class="cloud cloud-b"><svg viewBox="0 0 220 150"><path class="c3" d="M28 92c-11-41 20-78 68-80"/><path class="c2" d="M40 112c37 22 105 15 139-23"/><path class="c1" d="M42 98h114c28 0 44-21 36-46-8-25-38-35-60-18C116 1 56 16 62 62 35 58 17 74 19 94"/></svg></div>
  <div class="cloud cloud-c"><svg viewBox="0 0 250 165"><path class="c3" d="M30 126c-16-56 29-102 91-101"/><path class="c2" d="M49 146c45 19 121 17 164-18"/><path class="c1" d="M46 116h130c33 0 51-24 42-53-10-29-45-41-70-20C129 4 60 22 68 75 36 70 14 89 17 112"/></svg></div>
  <div class="cloud cloud-d"><svg viewBox="0 0 145 96"><path class="c3" d="M24 65c-8-28 13-50 43-51"/><path class="c2" d="M29 79c27 11 70 9 94-13"/><path class="c1" d="M29 67h71c17 0 27-12 22-28-5-15-24-20-37-10C76 9 39 18 43 47 26 44 15 53 16 65"/></svg></div>
  <div class="cloud cloud-e"><svg viewBox="0 0 145 96"><path class="c3" d="M24 65c-8-28 13-50 43-51"/><path class="c2" d="M29 79c27 11 70 9 94-13"/><path class="c1" d="M29 67h71c17 0 27-12 22-28-5-15-24-20-37-10C76 9 39 18 43 47 26 44 15 53 16 65"/></svg></div>

  <main class="page" id="page">
    <section class="hero">
      <div class="brand">
        <div class="mark"><img src="/arkhon-mark.svg" alt="ARKHON"></div>
        <div><div class="brand-name">ARKHON <span>CLOUD</span></div><div class="brand-sub">Arkhon Cloud</div></div>
      </div>
      <h1>Accede y controla tus sucursales desde un solo lugar.</h1>
      <div class="features">
        <div class="feature"><div class="feature-icon"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="14" height="12" rx="2"/><path d="M7 20h6M10 16v4M18 8h3v8h-3M20 18v2"/></svg></div><div><div class="feature-title">Control total de tu operacion</div><div class="feature-copy">Consulta ventas, sucursales, usuarios, productos y reportes con la misma esencia de ARKHON Monitor.</div></div></div>
        <div class="feature"><div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 19V5"/><path d="M4 19h16"/><path d="M7 15l4-4 3 3 5-7"/><path d="M16 7h3v3"/></svg></div><div><div class="feature-title">Datos en tiempo real</div><div class="feature-copy">Supervisa cada sucursal al instante y decide con informacion clara, visual y lista para operar.</div></div></div>
        <div class="feature"><div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/><path d="M18 15v6M15 18h6"/></svg></div><div><div class="feature-title">Reportes y configuracion flexible</div><div class="feature-copy">Imprime PDF, exporta Excel y revisa cortes, productos, inventario y alertas por sucursal.</div></div></div>
      </div>
      <div class="mini-monitor">
        <div class="mini-top"><div class="mini-title">Ventas sincronizadas</div><div class="mini-pill">En linea</div></div>
        <svg class="mini-chart" viewBox="0 0 300 78"><defs><linearGradient id="miniArea" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FF7A00" stop-opacity=".22"/><stop offset="1" stop-color="#FF7A00" stop-opacity="0"/></linearGradient></defs><path class="mini-area" d="M6 58 C42 34 65 64 94 45 S148 16 180 28 226 56 294 24 L294 72 L6 72 Z"/><path class="mini-line" d="M6 58 C42 34 65 64 94 45 S148 16 180 28 226 56 294 24"/></svg>
      </div>
    </section>

    <section class="login-card">
      <h2 id="formTitle">Inicia sesion</h2>
      <div class="form" id="loginForm">
        <label class="field"><span class="label">Correo electronico</span><span class="input-wrap"><input class="input" id="email" type="email" autocomplete="email" placeholder="tu correo"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 7 8 6 8-6"/></svg></span></span></label>
        <label class="field"><span class="label">Contrasena</span><span class="input-wrap"><input class="input" id="password" type="password" autocomplete="current-password" placeholder="Contrasena"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></span></span></label>
        <button class="btn primary" onclick="login()">Iniciar sesion</button>
        <button class="btn google" id="googleFallback" onclick="googleReady()">Continuar con Google</button>
        <div id="googleButton" class="full"></div>
      </div>
      <div class="form hidden" id="setupPasswordForm">
        <label class="field"><span class="label">Crear contrasena</span><span class="input-wrap"><input class="input" id="setupPassword" type="password" autocomplete="new-password" placeholder="Minimo 8 caracteres"><span class="input-icon"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span></span></label>
        <label class="field"><span class="label">Confirmar contrasena</span><span class="input-wrap"><input class="input" id="setupConfirm" type="password" autocomplete="new-password" placeholder="Confirmar"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></span></label>
        <button class="btn primary" id="setupPasswordBtn" onclick="setGooglePassword()">Guardar contrasena</button>
        <button class="btn google" onclick="continuePortal()">Continuar a Arkhon Cloud</button>
      </div>
      <div class="form register-form hidden" id="registerForm">
        <label class="field"><span class="label">Nombre de contacto</span><span class="input-wrap"><input class="input" id="regName" autocomplete="name" placeholder="Nombre y apellido"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span></span></label>
        <label class="field"><span class="label">Restaurante o grupo</span><span class="input-wrap"><input class="input" id="regCompany" autocomplete="organization" placeholder="Mi restaurante"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/></svg></span></span></label>
        <label class="field"><span class="label">Correo electronico</span><span class="input-wrap"><input class="input" id="regEmail" type="email" autocomplete="email" placeholder="tu correo"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="m4 7 8 6 8-6"/></svg></span></span></label>
        <label class="field"><span class="label">Telefono</span><span class="input-wrap"><input class="input" id="regPhone" inputmode="tel" autocomplete="tel" placeholder="+52 999 999 9999"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.4 2.1L8 9.7a16 16 0 006.3 6.3l1.3-1.3a2 2 0 012.1-.4c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z"/></svg></span></span></label>
        <label class="field"><span class="label">Contrasena</span><span class="input-wrap"><input class="input" id="regPassword" type="password" autocomplete="new-password" placeholder="Minimo 8 caracteres"><span class="input-icon"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></span></span></label>
        <label class="field"><span class="label">Confirmar contrasena</span><span class="input-wrap"><input class="input" id="regConfirm" type="password" autocomplete="new-password" placeholder="Confirma tu contrasena"><span class="input-icon"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></span></label>
        <div class="verify-row full"><label class="choice"><input type="radio" name="verify" value="email" checked> Verificar por correo</label><label class="choice"><input type="radio" name="verify" value="sms"> Verificar por SMS</label></div>
        <label class="terms full"><input id="regTerms" type="checkbox"> Acepto terminos, privacidad y confirmo que soy responsable de la cuenta.</label>
        <button class="btn primary full" id="registerBtn" onclick="registerOwner()">Registrarse</button>
      </div>
      <div class="login-links"><a href="#" onclick="forgotPassword();return false;" id="forgotLink">Olvidaste tu contrasena?</a><a href="#" onclick="toggleRegister();return false;" id="modeLink">Crear cuenta</a></div>
      <div class="status" id="status">Tu sesion abrira automaticamente el portal correspondiente.</div>
      <div class="foot">2026, ARKHON Monitor</div>
    </section>
  </main>
  <div class="toast" id="toast" role="status" aria-live="polite">
    <div class="toast-icon" id="toastIcon">i</div>
    <div><div class="toast-title" id="toastTitle">ARKHON Cloud</div><div class="toast-copy" id="toastCopy"></div></div>
  </div>

  <script>
    const params = new URLSearchParams(location.search);
    const next = params.get('next') || '';
    const safeNext = next.startsWith('/app') || next.startsWith('/admin') ? next : '/app';
    let registerMode = false;
    let busy = false;
    let pendingPortal = '/app';
    const statusEl = () => document.getElementById('status');
    const registerBtn = () => document.getElementById('registerBtn');
    function showToast(title, copy, type){
      toast.className = 'toast show ' + (type || '');
      toastIcon.textContent = type === 'ok' ? '✓' : type === 'error' ? '!' : 'i';
      toastTitle.textContent = title;
      toastCopy.textContent = copy;
      clearTimeout(showToast.timer);
      showToast.timer = setTimeout(()=>toast.classList.remove('show'), 5200);
    }
    function setBusy(button, isBusy){
      busy = !!isBusy;
      if (!button) return;
      button.classList.toggle('loading', busy);
      button.disabled = busy;
    }
    async function login(){
      setStatus('Validando acceso...');
      try{
        const response=await fetch('/api/auth/login',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({email:email.value,password:password.value})});
        const data=await response.json();
        if(!response.ok||!data.ok) throw new Error(data.error||'No se pudo iniciar sesion');
        localStorage.setItem('arkhon_access_token',data.access_token||'');
        localStorage.setItem('arkhon_refresh_token',data.refresh_token||'');
        localStorage.setItem('arkhon_access',JSON.stringify(data.access||{}));
        const target=safeNext.startsWith('/admin')&&data.access?.is_super_admin?'/admin':'/app';
        setStatus('Sesion iniciada. Redirigiendo...', false, true);
        location.href=target;
      }catch(err){
        setStatus(/credenciales/i.test(err.message)?'Credenciales invalidas.':err.message, true);
      }
    }
    async function registerOwner(){
      if (busy) return;
      setBusy(registerBtn(), true);
      setStatus('Creando cuenta...');
      const name = regName.value.trim();
      const company = regCompany.value.trim();
      const emailValue = regEmail.value.trim();
      const pass = regPassword.value;
      if (!name || !company || !emailValue || !regPhone.value.trim()) { setBusy(registerBtn(), false); return setStatus('Completa los datos de contacto.', true); }
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) { setBusy(registerBtn(), false); return setStatus('Escribe un correo valido para enviar la verificacion.', true); }
      if (pass.length < 8) { setBusy(registerBtn(), false); return setStatus('La contrasena debe tener al menos 8 caracteres.', true); }
      if (pass !== regConfirm.value) { setBusy(registerBtn(), false); return setStatus('Las contrasenas no coinciden.', true); }
      if (!regTerms.checked) { setBusy(registerBtn(), false); return setStatus('Acepta terminos y privacidad para continuar.', true); }
      try{
        const response=await fetch('/api/auth/register',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({email:emailValue,password:pass,name,tenant_name:company,company_name:company})});
        const data=await response.json();
        if(!response.ok||!data.ok) throw new Error(data.error||'No se pudo crear la cuenta');
        if (data.access_token) {
          localStorage.setItem('arkhon_access_token',data.access_token||'');
          localStorage.setItem('arkhon_refresh_token',data.refresh_token||'');
          localStorage.setItem('arkhon_access',JSON.stringify(data.access||{}));
          setStatus('Cuenta creada. Preparando tu portal...', false, true);
          showToast('Cuenta creada', 'Tu portal ARKHON Cloud se esta preparando.', 'ok');
          location.href=safeNext;
          return;
        }
        const delivery = data.email_verification?.delivery_status;
        if (delivery === 'sent') {
          setStatus('Cuenta creada. Revisa tu correo para verificarla e iniciar sesion.', false, true);
          showToast('Correo de verificacion enviado', `Enviamos el enlace de activacion a ${emailValue}.`, 'ok');
          toggleRegister(false);
          email.value = emailValue;
        } else {
          setStatus('Cuenta creada, pero el correo no pudo enviarse. Contacta a ARKHON Admin.', true);
          showToast('Cuenta creada sin correo', 'SMTP no confirmo el envio. Revisa configuracion de correo en el servidor.', 'error');
        }
      }catch(err){
        setStatus(/registrado/i.test(err.message)?'Este correo ya tiene una cuenta. Inicia sesion.':err.message, true);
      }finally{
        setBusy(registerBtn(), false);
      }
    }
    function toggleRegister(force){
      registerMode = typeof force === 'boolean' ? force : !registerMode;
      loginForm.classList.toggle('hidden', registerMode);
      registerForm.classList.toggle('hidden', !registerMode);
      page.classList.toggle('register-mode', registerMode);
      formTitle.textContent = registerMode ? 'Crear cuenta' : 'Inicia sesion';
      modeLink.onclick = function(){ toggleRegister(); return false; };
      modeLink.textContent = registerMode ? 'Ya tienes una cuenta? Iniciar sesion' : 'Crear cuenta';
      forgotLink.style.visibility = registerMode ? 'hidden' : 'visible';
      setupPasswordForm.classList.add('hidden');
      setStatus(registerMode ? 'Registra la cuenta principal para iniciar configuracion.' : 'Tu sesion abrira automaticamente Arkhon Cloud.');
    }
    function setStatus(text,isError,isOk){const el=statusEl(); if(!el) return; el.className='status '+(isError?'error':isOk?'ok':''); el.textContent=text}
    let googleClientId = '';
    let googleSdkPromise = null;
    async function googleConfig(){
      const response = await fetch('/api/auth/google/config');
      const data = await response.json();
      if(!response.ok||!data.ok||!data.google?.configured||!data.google?.client_id) throw new Error('Google OAuth no esta configurado en este servidor.');
      googleClientId = data.google.client_id;
      return googleClientId;
    }
    function loadGoogleSdk(){
      if(window.google?.accounts?.id) return Promise.resolve();
      if(googleSdkPromise) return googleSdkPromise;
      googleSdkPromise = new Promise((resolve,reject)=>{
        const s=document.createElement('script');
        s.src='https://accounts.google.com/gsi/client';
        s.async=true;
        s.defer=true;
        s.onload=resolve;
        s.onerror=()=>reject(new Error('No se pudo cargar Google Identity Services.'));
        document.head.appendChild(s);
      });
      return googleSdkPromise;
    }
    async function handleGoogleCredential(response){
      try{
        if(!response?.credential) throw new Error('Google no devolvio credencial.');
        setStatus('Validando cuenta Google...');
        const r=await fetch('/api/auth/google',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({id_token:response.credential})});
        const data=await r.json();
        if(!r.ok||!data.ok) throw new Error(data.error||'No se pudo iniciar sesion con Google');
        localStorage.setItem('arkhon_access_token',data.access_token||'');
        localStorage.setItem('arkhon_refresh_token',data.refresh_token||'');
        localStorage.setItem('arkhon_access',JSON.stringify(data.access||{}));
        pendingPortal=safeNext.startsWith('/admin')&&data.access?.is_super_admin?'/admin':'/app';
        if(data.google_created_account||data.google_created_scope) showToast('Registro Google completado','Tu cuenta y sucursal principal quedaron listas en Arkhon Cloud.','ok');
        if(data.needs_password) return showPasswordSetup();
        setStatus('Sesion Google iniciada. Redirigiendo...', false, true);
        location.href=pendingPortal;
      }catch(err){setStatus(err.message,true)}
    }
    async function googleReady(){
      try{
        setStatus('Abriendo Google...');
        await googleConfig();
        location.href = '/api/auth/google/start?next=' + encodeURIComponent(safeNext);
      }catch(err){setStatus(err.message,true)}
    }
    async function finishGoogleRedirect(code,state){
      try{
        setStatus('Validando cuenta Google...');
        history.replaceState(null,'','/');
        const response=await fetch('/api/auth/google/code',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({code,state})});
        const data=await response.json();
        if(!response.ok||!data.ok) throw new Error(data.error||'No se pudo iniciar sesion con Google');
        localStorage.setItem('arkhon_access_token',data.access_token||'');
        localStorage.setItem('arkhon_refresh_token',data.refresh_token||'');
        localStorage.setItem('arkhon_access',JSON.stringify(data.access||{}));
        pendingPortal=safeNext.startsWith('/admin')&&data.access?.is_super_admin?'/admin':'/app';
        if(data.google_created_account||data.google_created_scope) showToast('Registro Google completado','Tu cuenta y sucursal principal quedaron listas en Arkhon Cloud.','ok');
        if(data.needs_password) return showPasswordSetup();
        setStatus('Sesion Google iniciada. Redirigiendo...', false, true);
        location.href=pendingPortal;
      }catch(err){setStatus(err.message,true)}
    }
    function showPasswordSetup(){
      loginForm.classList.add('hidden');
      registerForm.classList.add('hidden');
      setupPasswordForm.classList.remove('hidden');
      page.classList.remove('register-mode');
      formTitle.textContent='Arkhon Cloud';
      forgotLink.style.visibility='hidden';
      modeLink.textContent='Continuar sin contrasena';
      modeLink.onclick=function(){continuePortal();return false;};
      setStatus('Tu cuenta Google quedo vinculada. Crea una contrasena para entrar tambien con correo.', false, true);
      showToast('Cuenta Google vinculada','Ya puedes continuar o crear una contrasena para acceso dual.','ok');
    }
    async function setGooglePassword(){
      const pass=setupPassword.value;
      if(pass.length<8)return setStatus('La contrasena debe tener al menos 8 caracteres.',true);
      if(pass!==setupConfirm.value)return setStatus('Las contrasenas no coinciden.',true);
      try{
        setBusy(setupPasswordBtn,true);
        const token=localStorage.getItem('arkhon_access_token')||'';
        const response=await fetch('/api/auth/set-password',{method:'POST',headers:{'content-type':'application/json',authorization:`Bearer ${token}`},body:JSON.stringify({password:pass})});
        const data=await response.json();
        if(!response.ok||!data.ok)throw new Error(data.error||'No se pudo guardar la contrasena');
        setStatus('Contrasena guardada. Abriendo Arkhon Cloud...',false,true);
        showToast('Contrasena creada','Tu cuenta ahora entra con Google o correo y contrasena.','ok');
        setTimeout(()=>location.href=pendingPortal,650);
      }catch(err){setStatus(err.message,true)}
      finally{setBusy(setupPasswordBtn,false)}
    }
    function continuePortal(){location.href=pendingPortal||'/app'}
    async function verifyEmail(token){
      try{
        setStatus('Verificando correo...');
        const response=await fetch('/api/auth/verify-email',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({token})});
        const data=await response.json();
        if(!response.ok||!data.ok) throw new Error(data.error||'No se pudo verificar el correo');
        localStorage.setItem('arkhon_access_token',data.access_token||'');
        localStorage.setItem('arkhon_refresh_token',data.refresh_token||'');
        localStorage.setItem('arkhon_access',JSON.stringify(data.access||{}));
        setStatus('Correo verificado. Abriendo portal...', false, true);
        showToast('Correo verificado', 'Tu cuenta ARKHON Cloud quedo activa.', 'ok');
        history.replaceState(null,'','/');
        location.href=data.access?.is_super_admin?'/admin':'/app';
      }catch(err){setStatus(err.message,true)}
    }
    async function forgotPassword(){
      const mail = (email?.value || regEmail?.value || '').trim();
      if(!mail) return setStatus('Escribe tu correo para enviar recuperacion.', true);
      try{
        setStatus('Enviando recuperacion...');
        const response=await fetch('/api/auth/forgot-password',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({email:mail})});
        const data=await response.json();
        if(!response.ok||!data.ok) throw new Error(data.error||'No se pudo enviar recuperacion');
        setStatus(data.message||'Si el correo existe, recibiras instrucciones.', false, true);
        showToast('Solicitud enviada', 'Si el correo existe, recibiras instrucciones.', 'ok');
      }catch(err){setStatus(err.message,true)}
    }
    function initAuthPage(){
      if (params.get('verify')) return verifyEmail(params.get('verify'));
      if (params.get('code')) return finishGoogleRedirect(params.get('code'), params.get('state') || '');
      if (params.get('provider') === 'google') return googleReady();
      setStatus('Tu sesion abrira automaticamente Arkhon Cloud.');
    }
    initAuthPage();
  </script>
</body>
</html>