/* ============================================================
   SOULFULSYNC AUTH — GLOBAL SHARED STYLES (2026 FINAL EDITION)
   - Mensajes unificados
   - Password strength UI
   - Dark mode compatible
   - Sin colores fijos excepto fallback
============================================================ */

/* ------------------------------
   Mensajes del sistema
------------------------------ */
.sse-message {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  transition: color .25s ease;
}

.sse-error {
  color: var(--ss-error, #e74c3c) !important;
}

.sse-success {
  color: var(--ss-success, #2ecc71) !important;
}

.sse-loading {
  color: var(--ss-muted) !important;
}


/* ------------------------------
   Password checker
------------------------------ */
.sse-pass-check {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
}

.sse-pass-check li {
  font-size: 13px;
  line-height: 1.4;
  transition: color .25s ease;
  color: var(--ss-muted);
}

.sse-rule-ok {
  color: var(--ss-success, #2ecc71) !important;
}

.sse-rule-bad {
  color: var(--ss-error, #e74c3c) !important;
}


/* ------------------------------
   Password strength bar
------------------------------ */
.sse-pass-bar {
  width: 100%;
  background: var(--ss-border);
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.12);
}

.sse-pass-bar div {
  height: 100%;
  width: 0;
  background: var(--ss-brand);
  border-radius: 3px;
  transition: width .35s ease, background .35s ease;
}


/* ------------------------------
   Password match feedback
------------------------------ */
.sse-pass-match {
  border-color: var(--ss-success, #2ecc71) !important;
}

.sse-pass-nomatch {
  border-color: var(--ss-error, #e74c3c) !important;
}


/* ------------------------------
   Buttons (consistency)
------------------------------ */
button#sse-reset-submit,
button#sse-forgot-submit,
button#sse-register-submit,
button#sse-login-submit {
  transition: opacity .25s ease, transform .2s ease;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ------------------------------
   Dark Mode Special Tweaks
------------------------------ */
html[data-theme="dark"] .sse-pass-bar {
  background: var(--ss-border-strong);
}

html[data-theme="dark"] .sse-pass-check li {
  color: var(--ss-muted);
}

/* ============================================================
   FIX: MentorSync Avatar — Correct Light/Dark Visibility
   and remove circular crop (2026 Final)
============================================================ */

/* Base avatar style */
.auth-avatar {
  width: 95px !important;
  height: auto !important;
  border-radius: 0 !important; /* NO circular crop */
  display: none; /* ambos ocultos por default, luego activamos el correcto */
  margin: 0 auto 12px;
}

/* Light mode → mostrar solo el avatar claro */
html[data-theme="light"] .mentorsync-light {
  display: block !important;
}
html[data-theme="light"] .mentorsync-dark {
  display: none !important;
}

/* Dark mode → mostrar solo avatar oscuro */
html[data-theme="dark"] .mentorsync-dark {
  display: block !important;
}
html[data-theme="dark"] .mentorsync-light {
  display: none !important;
}

/* Extra polish */
.auth-head picture {
  display: flex;
  justify-content: center;
  align-items: center;
}