/* auth-client.css — estilos del modal de login/registro y del chip de
   cuenta montados por auth-client.js. Reutiliza las custom properties ya
   definidas en styles.css (--paper, --ink, --line, --r-md) para no
   introducir una paleta paralela; sólo agrega layout nuevo (prefijo au-)
   que no existía en el proyecto. [Rediseño] Sin amarillo/rojo en los
   estados de selección — mismo criterio que entrega.css. */

/* Bug real encontrado: varias clases del proyecto (.field, .au-form, y
   estilos inline con display:flex) le ganan al atributo [hidden] en la
   cascada — [hidden] sólo aplica display:none desde la hoja de estilos del
   navegador (prioridad más baja), así que cualquier regla de autor con
   display explícito lo pisa, aunque el elemento siga "hidden". Esta regla
   fuerza que [hidden] SIEMPRE gane, sin importar qué otra clase tenga el
   elemento — se carga en las tres páginas (hub + los dos wizards) porque
   auth-client.css está incluido en las tres. */
[hidden] { display: none !important; }

.au-modal {
  border: var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  width: min(380px, 92vw);
  box-shadow: var(--shadow);
}
.au-modal::backdrop {
  background: rgba(20, 18, 14, .45);
}
.au-modal-close-form { display: flex; justify-content: flex-end; margin: -8px -8px 4px 0; }
.au-modal-close { font-size: 1rem; padding: 4px 8px; }

.au-modal-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: var(--line); }
.au-tab {
  flex: 1; background: none; border: none; padding: 10px 4px; cursor: pointer;
  font-weight: 600; font-size: .9rem; color: var(--ink-60);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.au-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.au-modal-body { display: flex; flex-direction: column; gap: 14px; }
.au-divider { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-60); }
.au-divider::before, .au-divider::after { content: ''; flex: 1; height: 1px; background: var(--ink-15); }

.au-form { display: flex; flex-direction: column; gap: 12px; }
.au-error { font-size: .85rem; }

.au-cta-cuenta {
  margin-top: 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}

/* Chip de cuenta en el header */
.au-account { position: relative; }
.au-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--paper); border: var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  min-width: 160px; padding: 6px;
}
.au-account-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; font-size: .9rem; color: var(--ink);
  text-decoration: none; box-sizing: border-box;
}
.au-account-menu-item:hover { background: rgba(0, 0, 0, .05); }
.au-account-menu-item[disabled] {
  cursor: default; color: var(--ink-40);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.au-account-menu-item[disabled]:hover { background: none; }
.au-soon { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-40); }
.au-account-menu-sep { height: 1px; background: var(--ink-15); margin: 6px 4px; }

@media (max-width: 900px) {
  /* Mismo criterio mobile-first que el resto del rediseño (sección 5 del
     handoff de auth): el chip de cuenta no debe competir con el burger en
     una barra angosta. */
  .au-account-btn { padding: 8px 12px; font-size: .85rem; }
}

/* ---------- Spinner de "cargando" para botones ----------
   Reutilizado por auth-client.js (crear cuenta / iniciar sesión) y por
   btnPagar en cada app.js (checkout de Mercado Pago) — se carga acá porque
   auth-client.css está presente en las tres páginas. */
.btn.is-loading { opacity: .6; cursor: default; pointer-events: none; }
.btn-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; border-top-color: currentColor; opacity: .5; }
}