/* ---------- Pantalla de acceso ---------- */
.auth-screen{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:24px 16px;
  background:var(--bg);
  overflow-y:auto;
}
/* margin:auto centra mientras cabe y, si no cabe, deja desplazarse hasta arriba
   (con justify-content:center la parte de arriba quedaba cortada). */
.auth-screen > .auth-card{margin-top:auto;}
.auth-screen > .auth-lang{margin-bottom:auto;}
body.is-authing .app{display:none;}
/* Mientras se comprueba la sesión (clase puesta en el <head>): nunca se ve la
   app, y la pantalla de acceso se muestra desde el primer fotograma. */
html.auth-gate .app{display:none !important;}
.auth-card{
  width:min(380px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
}
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:24px;}
.auth-card h1{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin:0 0 4px;}
.auth-sub{margin:0 0 20px;color:var(--ink-soft);font-size:13.5px;}
.auth-providers{display:flex;flex-direction:column;gap:8px;}
.auth-provider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:38px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.auth-provider:hover:not(:disabled){background:var(--surface-2);}
.auth-provider:disabled{opacity:.55;cursor:progress;}
.auth-provider svg{width:17px;height:17px;}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 14px;
  font-size:12px;
  color:var(--ink-faint);
}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-form input{width:100%;}
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;}
.auth-label-row label{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
.auth-label-row a,.auth-switch a{font-size:12.5px;color:var(--accent);text-decoration:none;font-weight:500;}
.auth-label-row a:hover,.auth-switch a:hover{text-decoration:underline;}
.auth-submit{width:100%;height:38px;margin-top:4px;}
.auth-msg{font-size:12.5px;line-height:1.45;color:var(--danger);margin:0 0 10px;}
.auth-msg.is-info{color:var(--st-done);}

/* Aviso «esta cuenta ya existe»: neutro, con la explicación y los dos pasos. */
.auth-notice{
  margin:0 0 14px;
  padding:12px 14px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-soft);
}
.auth-notice-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--ink);}
.auth-notice-head strong{font-size:13px;font-weight:600;letter-spacing:-0.01em;}
.auth-notice-ic{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:none;
  border-radius:50%;
  color:var(--accent);
  background:var(--accent-soft);
}
.auth-notice p{margin:0 0 10px;}
.auth-notice-mail{
  display:inline-block;
  max-width:100%;
  padding:0 6px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow-wrap:anywhere;
  vertical-align:baseline;
}
.auth-notice-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.auth-notice-steps li{display:flex;align-items:center;gap:8px;color:var(--ink);}
.auth-notice-n{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:none;
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:50%;
}
#authPanel.is-guest #authNotice{display:none;}
.auth-guest .auth-divider{margin:16px 0 12px;}
.auth-guest-note{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.auth-guest-back{width:100%;height:36px;margin-top:6px;}
/* Paso «invitado»: solo el nombre y sus botones, sin el resto del acceso. */
#authPanel.is-guest #authProviders,
#authPanel.is-guest #authDivider,
#authPanel.is-guest #authEmailForm,
#authPanel.is-guest #authSwitch,
#authPanel.is-guest #authGuestBtn,
#authPanel.is-guest .auth-guest .auth-divider{display:none;}
#authPanel.is-guest .auth-guest{margin-top:0;}
.auth-switch{margin:16px 0 0;text-align:center;font-size:12.5px;color:var(--ink-soft);}
.auth-foot{margin:0;font-size:12px;color:var(--ink-faint);text-align:center;max-width:380px;}
.auth-foot a{color:var(--ink-soft);text-underline-offset:2px;}
.auth-foot a:hover{color:var(--accent);}
.auth-foot.auth-legal{margin-top:-6px;}
.auth-loading{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:13.5px;padding:8px 0 4px;}
.auth-loading.is-error{color:var(--danger);align-items:flex-start;flex-direction:column;}


/* Cuenta en la barra lateral */
.account{display:flex;align-items:center;gap:9px;padding:8px;margin:0 -2px 6px;border-radius:var(--r-md);}
.account:hover{background:var(--hover);}
.avatar.is-xs{width:26px;height:26px;font-size:11px;overflow:hidden;}
.avatar.is-xs img{width:100%;height:100%;object-fit:cover;display:block;}
.account-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.account-name{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-mail{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account .icon-only{width:28px;height:28px;flex:none;}

/* Cuenta de correo pendiente de verificar. */
.auth-loading.is-verify{flex-direction:column;align-items:flex-start;gap:10px;color:var(--ink-soft);line-height:1.5;}
.auth-loading.is-verify strong{color:var(--ink);font-size:15px;font-weight:600;}
.auth-verify-msg{font-size:12.5px;color:var(--danger);}
.auth-verify-msg:empty{display:none;}
.auth-verify-msg.is-info{color:var(--st-done);}
.auth-noaccess-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}

/* Idioma en la pantalla de acceso */
.auth-lang{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12px;color:var(--ink-faint);}
.auth-lang button{padding:2px 4px;border:none;background:none;font:inherit;color:var(--ink-faint);cursor:pointer;border-radius:4px;}
.auth-lang button:hover{color:var(--ink);}
.auth-lang button.is-on{color:var(--ink);font-weight:600;}