/* Cuenta: aspecto de los componentes de la librería zcataccountui (<account-menu>, <account-auth>, <account-panel>).
   El tema entra SOLO por las variables --acct-* de la librería, tomadas de las variables del sitio (site.css). */
account-menu, account-auth, account-panel {
  --acct-fg: var(--tinta);
  --acct-muted: var(--tinta-tenue);
  --acct-surface: rgba(255, 255, 255, .06);
  --acct-border: var(--linea-viva);
  --acct-accent: var(--acento);
  --acct-accent-fg: #1a1040;
  --acct-danger: #fda4af;
  --acct-ok: #6ee7b7;
  --acct-warn: #fcd34d;
  --acct-radius: 10px;
  --acct-font: var(--sans);
  --acct-font-size: .95rem;
  --acct-overlay: rgba(5, 3, 20, .7);
}
/* La ventana emergente del menú necesita un fondo opaco; en la página de la cuenta el panel va sobre el lienzo del sitio. */
account-menu { --acct-bg: var(--canvas-2); }
account-auth, account-panel { --acct-bg: transparent; }
#account-root { margin: 1.8rem 0 0; }
#account-root > account-auth, #account-root > account-panel {
  padding: 1.5rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--vidrio);
}
#account-root > .aviso { font-size: 1.05rem; color: var(--tinta); margin-bottom: 1rem; }
.nav a.cuenta { border: 1px solid var(--linea); border-radius: .4rem; padding: .2rem .65rem; color: var(--tinta); }
.nav a.cuenta[data-state="unavailable"] { color: var(--tinta-tenue); border-style: dashed; }
@media (max-width: 30rem) { #account-root > account-auth, #account-root > account-panel { padding: 1rem; } }