/* Login y onboarding. Reusa las variables de color de style.css. */

/* ── Pantalla de login ─────────────────────────────────────────────────── */
body.pantalla-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  padding: 24px;
}

.auth-caja {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .logo-title { font-size: 22px; font-weight: 600; color: var(--text); }
.auth-logo .logo-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.auth-tab.activo { background: var(--elevated); color: var(--text); }

/* El atributo hidden de HTML empata en especificidad con .campo y perdia por
   orden en la cascada, asi que los campos de registro se veian en la pestania
   de login. Es lo que hizo que la primera usuaria completara el codigo de
   invitacion y despues tocara "Ingresar", que lo ignora. */
[hidden] { display: none !important; }

.campo { display: block; margin-bottom: 14px; }
.campo > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--sage); }
.campo textarea { resize: vertical; min-height: 64px; }

.btn-primario {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 6px;
  background: var(--sage);
  color: #14210f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}
.btn-primario:disabled { opacity: .6; cursor: default; }

.auth-error,
.paso-error {
  background: var(--rose-dim);
  border: 1px solid var(--rose);
  color: var(--rose);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 13px;
  margin: 10px 0 0;
}

.auth-ayuda {
  display: block;
  margin-top: 6px;
  opacity: .85;
}

.auth-nota {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-top: 20px;
  text-align: center;
}

/* ── Overlay de onboarding ─────────────────────────────────────────────── */
#onboarding {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
#onboarding[hidden] { display: none; }

.paso {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
}
.paso[hidden] { display: none; }

.paso h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.paso .paso-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.paso-privacidad {
  background: var(--sage-dim);
  border-left: 2px solid var(--sage);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ── Barra de progreso del sync ────────────────────────────────────────── */
.barra {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin: 18px 0 12px;
}
.barra-relleno {
  height: 100%;
  width: 2%;
  background: var(--sage);
  border-radius: 3px;
  transition: width .6s ease;
}
.sync-msg { font-size: 13px; color: var(--text); margin: 0; }
.sync-aviso {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  margin-top: 14px;
}
.btn-reintentar {
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  background: var(--elevated);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

/* ── Sesión y costo en la barra lateral ─────────────────────────────────── */
#sesion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
#sesion[hidden] { display: none; }

.sesion-usuario {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--border-hi);
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.btn-logout:hover { color: var(--text); border-color: var(--rose); }
.btn-logout:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

#costo-uso {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
#costo-uso[hidden] { display: none; }

.costo-label { flex: 1; }
.costo-valor {
  font-weight: 600;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}
.costo-detalle {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--text-dim);
}