/* ===========================================================
   JuntoCompra — Acceso (iniciar sesión / crear cuenta)
   =========================================================== */

/* Capa propia, por encima del panel lateral: el acceso puede pedirse
   estando el panel abierto. */
.auth-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(36,36,68,0);
  pointer-events:none;
  transition:background .3s;
}
.auth-overlay.is-open{
  background:rgba(36,36,68,.55);
  pointer-events:all;
}

.auth{
  position:fixed;inset:0;z-index:110;
  display:grid;place-items:center;
  padding:var(--s4);
  pointer-events:none;
}
.auth__card{
  position:relative;
  width:min(408px,100%);
  max-height:calc(100dvh - 2 * var(--s4));
  overflow-y:auto;
  padding:var(--s8) var(--s7) var(--s6);
  background:var(--bg);
  border-radius:var(--r-xl);
  box-shadow:0 24px 70px rgba(36,36,68,.28);
  pointer-events:auto;
  /* Mismo gesto que el panel lateral: sube y aparece */
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.auth.is-open .auth__card{opacity:1;transform:none}
.auth:focus,.auth:focus-visible{outline:none}

.auth__close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  color:var(--ink-40);
  transition:background var(--t-fast), color var(--t-fast);
}
.auth__close:hover{background:rgba(36,36,68,.06);color:var(--ink)}
.auth__close svg{width:17px;height:17px}

.auth__logo{width:104px;height:auto;margin-bottom:var(--s5)}
.auth__title{font-size:1.5rem;letter-spacing:var(--track-display);margin-bottom:6px}
.auth__sub{font-size:var(--fs-sm);color:var(--ink-60);line-height:1.5;margin-bottom:var(--s6)}

/* ── Google ─────────────────────────────────────────────── */
.auth__google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:.85em 1em;
  border:1.5px solid rgba(36,36,68,.14);
  border-radius:var(--r-sm);
  background:var(--white);
  font-size:var(--fs-body);font-weight:600;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.auth__google:hover{border-color:rgba(36,36,68,.28);box-shadow:0 2px 10px rgba(36,36,68,.08)}
.auth__google svg{width:18px;height:18px;flex:none}
.auth__google[disabled]{opacity:.55;cursor:not-allowed}

.auth__sep{
  display:flex;align-items:center;gap:var(--s3);
  margin:var(--s5) 0;
  font-size:var(--fs-xs);color:var(--ink-40);
  letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700;
}
.auth__sep::before,.auth__sep::after{
  content:'';flex:1;height:1px;background:rgba(36,36,68,.1);
}

/* ── Formulario ─────────────────────────────────────────── */
.field{margin-bottom:var(--s4);position:relative}
.field label{
  display:block;
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-40);
  margin-bottom:6px;
}
.field input{
  width:100%;
  padding:.8em .95em;
  border:1.5px solid rgba(36,36,68,.14);
  border-radius:var(--r-sm);
  background:var(--white);
  font-size:var(--fs-body);
  color:var(--ink);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder{color:var(--ink-40)}
.field input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,56,92,.14);
}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field--pass input{padding-right:2.9em}
.field__peek{
  position:absolute;right:6px;bottom:5px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:var(--r-xs);
  color:var(--ink-40);
}
.field__peek:hover{color:var(--ink)}
.field__peek svg{width:17px;height:17px}

.auth__forgot{
  display:block;margin:-6px 0 var(--s4) auto;
  font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-60);
}
.auth__forgot:hover{color:var(--red)}

/* Aviso de error o de éxito */
.auth__msg{
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);line-height:1.45;font-weight:600;
  margin-bottom:var(--s4);
}
.auth__msg--err{background:rgba(216,56,92,.09);color:#a32846;border:1px solid rgba(216,56,92,.22)}
.auth__msg--ok{background:rgba(36,36,68,.06);color:var(--ink);border:1px solid rgba(36,36,68,.12)}

.auth__submit{margin-top:2px}
.auth__submit[disabled]{opacity:.6;cursor:progress}

.auth__swap{
  margin-top:var(--s5);
  text-align:center;
  font-size:var(--fs-sm);color:var(--ink-60);
}
.auth__swap button{
  font:inherit;font-weight:700;color:var(--red);
  margin-left:4px;
}
.auth__swap button:hover{text-decoration:underline}

.auth__legal{
  margin-top:var(--s4);
  font-size:var(--fs-xs);line-height:1.5;color:var(--ink-40);
  text-align:center;
}
.auth__legal a{text-decoration:underline;text-underline-offset:2px}

/* ── Sesión iniciada ────────────────────────────────────── */
.auth__user{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);
  background:var(--surface);
  border-radius:var(--r-md);
  margin-bottom:var(--s5);
}
.auth__avatar{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:var(--ink);color:var(--white);
  font-size:1rem;font-weight:800;
}
.auth__user-name{display:block;font-size:var(--fs-body);font-weight:700;line-height:1.3}
.auth__user-mail{display:block;font-size:var(--fs-sm);color:var(--ink-60);word-break:break-all}

.logout-btn{
  width:100%;
  padding:.8em 1em;
  border:1.5px solid rgba(36,36,68,.14);
  border-radius:var(--r-sm);
  font-size:var(--fs-body);font-weight:600;
  transition:border-color var(--t-fast), color var(--t-fast);
}
.logout-btn:hover{border-color:var(--red);color:var(--red)}

/* ── Botón de cuenta en la cabecera ─────────────────────── */
.account-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.42em .42em .42em .9em;
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  color:var(--white);
  font-size:.875rem;font-weight:600;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  transition:background var(--t-fast);
}
.account-btn:hover{background:rgba(255,255,255,.4)}
.account-btn__ini{
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:var(--red);color:var(--white);
  font-size:.7rem;font-weight:800;
}

@media (max-width:560px){
  .auth__card{padding:var(--s7) var(--s5) var(--s5)}
  .auth__title{font-size:1.32rem}
  .account-btn__name{display:none}
  .account-btn{padding:.42em}
}