*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--azul:#2563eb;--azul-dark:#1d4ed8;--azul-light:#eff6ff;--texto:#1e293b;--muted:#64748b;--borde:#e2e8f0;--fondo:#f8fafc;--blanco:#ffffff;--rojo:#dc2626;--verde:#16a34a;--sombra:0 1px 3px rgba(0,0,0,.1);--sombra-md:0 4px 6px rgba(0,0,0,.07)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--texto);background:var(--fondo)}
.navbar{background:var(--blanco);border-bottom:1px solid var(--borde);padding:0 2rem;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--sombra)}
.brand{font-size:1.2rem;color:var(--texto);text-decoration:none}.brand strong{color:var(--azul)}
.nav-actions{display:flex;align-items:center;gap:.75rem}.nav-usuario{font-size:.9rem;color:var(--muted)}
.btn-primary{background:var(--azul);color:white;border:none;padding:.5rem 1.25rem;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:background .15s}.btn-primary:hover{background:var(--azul-dark)}
.btn-outline{background:transparent;color:var(--azul);border:1px solid var(--azul);padding:.5rem 1.25rem;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500}.btn-outline:hover{background:var(--azul-light)}
.btn-full{width:100%;padding:.75rem;font-size:1rem;margin-top:.5rem}.btn-sm{padding:.35rem .85rem;font-size:.82rem}
.hero{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);color:white;padding:3rem 2rem;text-align:center}
.hero h1{font-size:2rem;font-weight:700;margin-bottom:.5rem}.hero p{font-size:1.05rem;opacity:.85;margin-bottom:2rem}
.form-busqueda{background:white;border-radius:12px;padding:1.25rem 1.5rem;max-width:900px;margin:0 auto;box-shadow:var(--sombra-md)}
.form-row{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.form-group{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:120px}.form-group-sm{flex:0 0 90px}
.form-group label{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.form-group input{border:1px solid var(--borde);border-radius:6px;padding:.55rem .75rem;font-size:.95rem;color:var(--texto);transition:border-color .15s}
.form-group input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.btn-buscar{background:var(--azul);color:white;border:none;padding:.65rem 2rem;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;white-space:nowrap}.btn-buscar:hover{background:var(--azul-dark)}
.container{max-width:900px;margin:2.5rem auto;padding:0 1.5rem}.container h2{font-size:1.3rem;margin-bottom:.35rem}
.text-muted{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.resultados-header{margin-bottom:1.25rem}.resultados-header p{color:var(--muted);font-size:.9rem}
.lista-resultados{display:flex;flex-direction:column;gap:.85rem}
.card-vuelo{background:var(--blanco);border:1px solid var(--borde);border-radius:10px;padding:1.1rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:var(--sombra)}
.card-vuelo:hover{box-shadow:var(--sombra-md)}.vuelo-info{flex:1}
.vuelo-ruta{font-size:1.1rem;font-weight:600;margin-bottom:.3rem}.vuelo-detalle{font-size:.85rem;color:var(--muted)}
.vuelo-precio{text-align:right}.precio{font-size:1.6rem;font-weight:700;color:var(--azul)}.moneda{font-size:.8rem;color:var(--muted)}
.vuelo-acciones{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.badge-activo{background:#dcfce7;color:var(--verde);font-size:.75rem;padding:.2rem .6rem;border-radius:20px;font-weight:600}
.loading{text-align:center;padding:3rem;color:var(--muted)}
.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--borde);border-top-color:var(--azul);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199}
.modal-box{background:white;border-radius:12px;padding:2rem;width:100%;max-width:420px;position:relative;z-index:201;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.modal-tabs{display:flex;margin-bottom:1.5rem;border-bottom:2px solid var(--borde)}
.tab{flex:1;background:none;border:none;padding:.65rem;font-size:.95rem;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}.tab.active{color:var(--azul);border-bottom-color:var(--azul)}
.modal-form{display:flex;flex-direction:column;gap:1rem}.form-error{color:var(--rojo);font-size:.85rem;min-height:1.2rem}
.footer{text-align:center;padding:2
cat > /var/www/viajes/public/js/app.js << 'ENDOFFILE'
const API='';
let token=localStorage.getItem('token');
let usuario=JSON.parse(localStorage.getItem('usuario')||'null');

document.addEventListener('DOMContentLoaded',()=>{
  actualizarNavbar();
  const hoy=new Date();
  document.getElementById('fecha-ida').value=`${hoy.getFullYear()}-${String(hoy.getMonth()+2).padStart(2,'0')}`;
  document.getElementById('form-busqueda').addEventListener('submit',buscar);
});

function actualizarNavbar(){
  const btnAuth=document.getElementById('btn-abrir-auth');
  const btnMisViajes=document.getElementById('btn-mis-viajes');
  const navUsuario=document.getElementById('nav-usuario');
  if(usuario){
    navUsuario.textContent=usuario.nombre;
    btnAuth.textContent='Salir';
    btnAuth.onclick=salir;
    btnMisViajes.style.display='inline-block';
    btnMisViajes.onclick=verMisViajes;
  }else{
    navUsuario.textContent='';
    btnAuth.textContent='Ingresar';
    btnAuth.onclick=abrirModal;
    btnMisViajes.style.display='none';
  }
}

async function buscar(e){
  e.preventDefault();
  const origen=document.getElementById('origen').value.toUpperCase().trim();
  const destino=document.getElementById('destino').value.toUpperCase().trim();
  const fechaIda=document.getElementById('fecha-ida').value;
  const fechaVuelta=document.getElementById('fecha-vuelta').value;
  const pasajeros=document.getElementById('pasajeros').value;
  const sec=document.getElementById('seccion-resultados');
  const lista=document.getElementById('lista-resultados');
  const header=document.getElementById('resultados-header');
  document.getElementById('seccion-mis-viajes').style.display='none';
  sec.style.display='block';
  lista.innerHTML='<div class="loading"><div class="spinner"></div><br>Buscando vuelos...</div>';
  header.innerHTML='';
  let url=`${API}/api/buscar?origen=${origen}&destino=${destino}&fecha_ida=${fechaIda}&pasajeros=${pasajeros}`;
  if(fechaVuelta)url+=`&fecha_vuelta=${fechaVuelta}`;
  try{
    const res=await fetch(url);
    const vuelos=await res.json();
    header.innerHTML=`<h2>Vuelos ${origen} &rarr; ${destino}</h2><p>${vuelos.length} resultado${vuelos.length!==1?'s':''} encontrado${vuelos.length!==1?'s':''}</p>`;
    if(vuelos.length===0){lista.innerHTML='<p class="text-muted" style="text-align:center;padding:2rem">No encontramos vuelos. Proba con otras fechas.</p>';return;}
    lista.innerHTML=vuelos.map(v=>`
      <div class="card-vuelo">
        <div class="vuelo-info">
          <div class="vuelo-ruta">${origen} &rarr; ${destino}</div>
          <div class="vuelo-detalle">${v.aerolinea&&v.aerolinea!=='0'?`<strong>${v.aerolinea}</strong> &middot; `:''}${v.salida?`Salida: ${formatearFecha(v.salida)}`:''}${v.llegada?` &middot; Llegada: ${formatearFecha(v.llegada)}`:''}</div>
        </div>
        <div class="vuelo-precio"><div class="precio">USD ${v.precio}</div><div class="moneda">por persona</div></div>
        <div class="vuelo-acciones">
          <a href="${v.enlace}" target="_blank" class="btn-primary btn-sm">Ver oferta</a>
          ${usuario?`<button class="btn-outline btn-sm" onclick="guardarViaje('${origen}','${destino}','${fechaIda}','${fechaVuelta||''}',${pasajeros},${v.precio})">Guardar y monitorear</button>`:`<button class="btn-outline btn-sm" onclick="abrirModal()">Guardar y monitorear</button>`}
        </div>
      </div>`).join('');
  }catch{lista.innerHTML='<p class="text-muted" style="text-align:center;padding:2rem">Error al buscar. Intenta de nuevo.</p>';}
}

function formatearFecha(iso){
  if(!iso)return'';
  return new Date(iso).toLocaleDateString('es-AR',{day:'2-digit',month:'short',year:'numeric'});
}

async function verMisViajes(){
  document.getElementById('seccion-resultados').style.display='none';
  const sec=document.getElementById('seccion-mis-viajes');
  const lista=document.getElementById('lista-mis-viajes');
  sec.style.display='block';
  lista.innerHTML='<div class="loading"><div class="spinner"></div><br>Cargando...</div>';
  const res=await fetch(`${API}/api/viajes`,{headers:{Authorization:`Bearer ${token}`}});
  const viajes=await res.json();
  if(viajes.length===0){lista.innerHTML='<div class="alerta-info">No tenes viajes guardados. Busca un vuelo y hace click en "Guardar y monitorear".</div>';return;}
  lista.innerHTML=viajes.map(v=>`
    <div class="card-vuelo">
      <div class="vuelo-info">
        <div class="vuelo-ruta">${v.origen} &rarr; ${v.destino} <span class="badge-activo">Monitoreando</span></div>
        <div class="vuelo-detalle">Ida: ${v.fecha_ida?.slice(0,7)} ${v.fecha_vuelta?`&middot; Vuelta: ${v.fecha_vuelta?.slice(0,7)}`:''} &middot; ${v.pasajeros} pasajero${v.pasajeros>1?'s':''}</div>
        ${v.precio_referencia?`<div class="vuelo-detalle" style="margin-top:.3rem">Precio de referencia: <strong>USD ${v.precio_referencia}</strong></div>`:''}
      </div>
      <div class="vuelo-acciones">
        <button class="btn-outline btn-sm" style="color:#dc2626;border-color:#dc2626" onclick="eliminarViaje(${v.id})">Eliminar</button>
      </div>
    </div>`).join('');
}

async function guardarViaje(origen,destino,fechaIda,fechaVuelta,pasajeros,precio){
  const body={origen,destino,fecha_ida:fechaIda+'-01',pasajeros:parseInt(pasajeros),precio_referencia:precio};
  if(fechaVuelta)body.fecha_vuelta=fechaVuelta+'-01';
  const res=await fetch(`${API}/api/viajes`,{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer ${token}`},body:JSON.stringify(body)});
  const data=await res.json();
  if(res.ok)mostrarToast('Viaje guardado. Te avisaremos si baja el precio.');
  else mostrarToast(data.error||'No se pudo guardar',true);
}

async function eliminarViaje(id){
  if(!confirm('Eliminar este viaje del monitoreo?'))return;
  await fetch(`${API}/api/viajes/${id}`,{method:'DELETE',headers:{Authorization:`Bearer ${token}`}});
  verMisViajes();
}

function abrirModal(){document.getElementById('modal-auth').style.display='flex';document.getElementById('modal-overlay').style.display='block';}
function cerrarModal(){document.getElementById('modal-auth').style.display='none';document.getElementById('modal-overlay').style.display='none';}
function cambiarTab(tab,e){
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  document.getElementById('form-login').style.display=tab==='login'?'flex':'none';
  document.getElementById('form-registro').style.display=tab==='registro'?'flex':'none';
  e.target.classList.add('active');
}

async function login(e){
  e.preventDefault();
  document.getElementById('login-error').textContent='';
  const res=await fetch(`${API}/api/usuarios/login`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:document.getElementById('login-email').value,password:document.getElementById('login-pass').value})});
  const data=await res.json();
  if(res.ok){guardarSesion(data);cerrarModal();actualizarNavbar();}
  else document.getElementById('login-error').textContent=data.error||'Error al ingresar';
}

async function registrar(e){
  e.preventDefault();
  document.getElementById('reg-error').textContent='';
  const res=await fetch(`${API}/api/usuarios/registro`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({nombre:document.getElementById('reg-nombre').value,email:document.getElementById('reg-email').value,password:document.getElementById('reg-pass').value})});
  const data=await res.json();
  if(res.ok){guardarSesion(data);cerrarModal();actualizarNavbar();mostrarToast('Bienvenido/a!');}
  else document.getElementById('reg-error').textContent=data.error||'Error al registrarse';
}

function guardarSesion(data){token=data.token;usuario=data.usuario;localStorage.setItem('token',token);localStorage.setItem('usuario',JSON.stringify(usuario));}
function salir(){token=null;usuario=null;localStorage.removeItem('token');localStorage.removeItem('usuario');actualizarNavbar();document.getElementById('seccion-mis-viajes').style.display='none';}
function mostrarToast(msg,error=false){
  const t=document.createElement('div');
  t.textContent=msg;
  t.style.cssText=`position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:${error?'#dc2626':'#16a34a'};color:white;padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.2)`;
  document.body.appendChild(t);
  setTimeout(()=>t.remove(),3500);
}

/* AUTOCOMPLETE */
.autocomplete-wrap{position:relative}
.ac-lista{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--borde);border-radius:6px;box-shadow:var(--sombra-md);z-index:50;max-height:220px;overflow-y:auto;display:none}
.ac-lista.visible{display:block}
.ac-item{padding:.6rem .85rem;cursor:pointer;font-size:.88rem;border-bottom:1px solid var(--borde)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--azul-light)}
.ac-codigo{font-weight:700;color:var(--azul);margin-right:.4rem}
.ac-seleccionado{background:var(--azul-light);border-color:var(--azul)}

/* MODAL centrado */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.modal-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;border-radius:12px;padding:2rem;width:92%;max-width:420px;z-index:201;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-close{position:absolute;top:.85rem;right:1rem;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);line-height:1}
.modal-tabs{display:flex;margin-bottom:1.5rem;border-bottom:2px solid var(--borde)}
.tab{flex:1;background:none;border:none;padding:.65rem;font-size:.95rem;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab.active{color:var(--azul);border-bottom-color:var(--azul)}
form .form-group{margin-bottom:.85rem}