:root{
  --azul:#1f6feb; --azul-osc:#1858c4; --verde:#1f9d57; --rojo:#d1342f;
  --gris:#6b7280; --gris-claro:#f3f4f6; --borde:#e5e7eb; --texto:#1f2937;
  --sombra:0 2px 8px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--texto); background:var(--gris-claro); font-size:16px;
  -webkit-tap-highlight-color:transparent;
}
.oculto{display:none !important}

/* ---- Login ---- */
#vista-login{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--azul),var(--azul-osc)); padding:24px;
}
.login-box{background:#fff;border-radius:16px;padding:28px 22px;width:100%;max-width:380px;box-shadow:var(--sombra)}
.logo{font-size:26px;color:var(--azul);text-align:center}
.sub{text-align:center;color:var(--gris);margin:4px 0 20px;font-size:14px}
form label{display:block;font-size:13px;color:var(--gris);margin-bottom:14px}
input,select,textarea{
  width:100%;padding:12px;border:1px solid var(--borde);border-radius:10px;
  font-size:16px;margin-top:5px;background:#fff;color:var(--texto)
}
textarea{min-height:80px;resize:vertical}
.btn-primario{
  width:100%;background:var(--azul);color:#fff;border:none;padding:13px;
  border-radius:10px;font-size:16px;font-weight:600;margin-top:6px;cursor:pointer
}
.btn-primario:active{background:var(--azul-osc)}
.error{color:var(--rojo);font-size:13px;margin-top:10px;text-align:center}

/* ---- Layout app ---- */
.topbar{
  position:sticky;top:0;z-index:10;background:#fff;display:flex;justify-content:space-between;
  align-items:center;padding:14px 16px;border-bottom:1px solid var(--borde)
}
#saludo{font-weight:600}
.link{background:none;border:none;color:var(--azul);font-size:15px;cursor:pointer}
#contenido{padding:14px;padding-bottom:84px;max-width:560px;margin:0 auto}

.tabbar{
  position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--borde);
  display:flex;justify-content:space-around;z-index:10
}
.tab{
  flex:1;background:none;border:none;padding:8px 4px 10px;font-size:20px;color:var(--gris);
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer
}
.tab span{font-size:11px}
.tab.activa{color:var(--azul)}

/* ---- Componentes ---- */
.barra-busqueda{display:flex;gap:8px;margin-bottom:12px}
.barra-busqueda input{margin-top:0}
.titulo-vista{font-size:20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.btn-mini{background:var(--azul);color:#fff;border:none;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer}

.tarjeta{
  background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:var(--sombra);cursor:pointer
}
.tarjeta h3{font-size:16px;margin-bottom:4px}
.tarjeta .meta{font-size:13px;color:var(--gris);line-height:1.5}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--gris-claro);color:var(--gris)}
.chip.estado{font-weight:600}
.chip.nuevo{background:#e0edff;color:var(--azul)}
.chip.contactado{background:#fff3cd;color:#8a6d00}
.chip.calificado{background:#e7f5ff;color:#0b7285}
.chip.negociacion{background:#fde2c4;color:#b35900}
.chip.ganado{background:#d3f9d8;color:var(--verde)}
.chip.perdido{background:#ffe3e3;color:var(--rojo)}

.acciones-rapidas{display:flex;gap:8px;margin-top:10px}
.acciones-rapidas button{
  flex:1;border:1px solid var(--borde);background:#fff;border-radius:8px;padding:8px;
  font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px
}
.vacio{text-align:center;color:var(--gris);padding:40px 16px}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;z-index:50}
.modal-card{background:#fff;width:100%;max-height:92dvh;overflow-y:auto;border-radius:18px 18px 0 0;padding:18px}
@media(min-width:560px){.modal{align-items:center;justify-content:center}.modal-card{border-radius:18px;max-width:480px}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h2{font-size:18px}
.modal .gps{font-size:12px;color:var(--gris);margin-top:6px}
.preview-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.preview-fotos img{width:64px;height:64px;object-fit:cover;border-radius:8px}

/* ---- Toast ---- */
.toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#111;color:#fff;
  padding:11px 18px;border-radius:24px;font-size:14px;z-index:100;box-shadow:var(--sombra);max-width:90%
}
.toast.error{background:var(--rojo)}
.toast.ok{background:var(--verde)}

.spinner{text-align:center;padding:30px;color:var(--gris)}