/*
 * Botones de inicio de sesión social.
 *
 * Fichero aparte de `theme.css` a propósito: estos botones también se pintan en
 * `wp-login.php`, que no carga la hoja del tema. Por eso cada variable trae aquí
 * su propio valor de reserva — en la pantalla de acceso de WordPress no existe
 * ninguna de las del tema, y sin reserva los botones saldrían transparentes.
 */

.ac-oauth {
  --ac-oauth-surface: var(--ac-surface, #fff);
  --ac-oauth-text: var(--ac-text, #1d2327);
  --ac-oauth-muted: var(--ac-text-muted, #646970);
  --ac-oauth-border: var(--ac-border, #dcdcde);
  --ac-oauth-radius: var(--ac-radius-sm, 9px);

  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block: 0.9rem;
}

.ac-oauth__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ac-oauth-muted);
  text-align: center;
}

.ac-oauth__buttons {
  display: grid;
  gap: 0.5rem;
}

.ac-oauth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  /* `content-box` no: aquí sí se quiere que el borde entre en la medida. */
  box-sizing: border-box;
  min-block-size: 44px;               /* objetivo táctil accesible */
  padding: 0.55rem 1rem;

  border: 1px solid var(--ac-oauth-border);
  border-radius: var(--ac-oauth-radius);
  background: var(--ac-oauth-surface);
  color: var(--ac-oauth-text);

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ac-oauth__btn:hover,
.ac-oauth__btn:focus-visible {
  border-color: var(--ac-primary, #3b62f6);
  box-shadow: 0 1px 2px rgb(14 20 32 / 8%), 0 6px 18px rgb(14 20 32 / 8%);
  color: var(--ac-oauth-text);
  text-decoration: none;
}

.ac-oauth__btn:active {
  transform: translateY(1px);
}

.ac-oauth__btn:focus-visible {
  outline: 2px solid var(--ac-primary, #3b62f6);
  outline-offset: 2px;
}

.ac-oauth__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.ac-oauth__icon svg {
  display: block;
}

/*
 * Ya enlazado: se deja visible pero sin invitar a pulsarlo. No se oculta porque
 * ver qué cuentas están atadas es justo lo que se quiere saber desde el perfil.
 */
.ac-oauth__btn.is-linked {
  opacity: 0.6;
  pointer-events: none;
}

.ac-oauth__notice {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--ac-oauth-radius);
  border: 1px solid transparent;
  font-size: 0.85rem;
  line-height: 1.45;
}

.ac-oauth__notice--error {
  border-color: #f3c2c2;
  background: #fdf0f0;
  color: #8a1f1f;
}

.ac-oauth__notice--success {
  border-color: #b8e3c5;
  background: #eefaf1;
  color: #14622f;
}

/*
 * Aviso flotante.
 *
 * Existe porque One Tap puede fallar en cualquier página del sitio, y allí no
 * hay botones que pinten el mensaje. Sin él, el intento fallido devolvía a la
 * persona a la misma página sin ninguna explicación.
 */
.ac-oauth-toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 0.75rem;

  max-inline-size: 30rem;
  margin-inline: auto;
  box-shadow: 0 8px 30px rgb(14 20 32 / 18%);
}

.ac-oauth-toast span {
  flex: 1;
}

.ac-oauth-toast__close {
  flex: 0 0 auto;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.ac-oauth-toast__close:hover {
  opacity: 1;
}

/* Separador «o» con línea a los lados. */
.ac-oauth__separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem 0.25rem;
  color: var(--ac-text-muted, #646970);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ac-oauth__separator::before,
.ac-oauth__separator::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--ac-border, #dcdcde);
}

/*
 * Modo oscuro.
 *
 * El tema ya redefine sus variables en `prefers-color-scheme: dark`, así que en
 * el sitio esto no hace falta. Se escribe para `wp-login.php`, donde no hay
 * variables del tema y los avisos quedarían en blanco brillante.
 */
@media (prefers-color-scheme: dark) {
  .ac-oauth__notice--error {
    border-color: #5d2a2a;
    background: #2a1616;
    color: #f6bcbc;
  }

  .ac-oauth__notice--success {
    border-color: #24523a;
    background: #12281c;
    color: #a9e6bf;
  }
}

/* ── Pantalla de acceso de WordPress ────────────────────────────────────── */

.login .ac-oauth {
  --ac-oauth-surface: #fff;
  --ac-oauth-text: #1d2327;
  --ac-oauth-border: #8c8f94;
}

.login .ac-oauth__separator {
  color: #646970;
}