/* Flujo de Mi cuenta: perfil, verificacion en dos pasos (activar con QR,
   desactivar) y los codigos de recuperacion que muestra secret-reveal.js. Solo
   lo que es propio de estas pantallas: los componentes salen de components.css
   y las medidas, de tokens.css. */

/* Perfil y verificacion en dos pasos: las dos tarjetas van apiladas con 16 px. */
.account__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Codigo QR + clave manual: fila de dos columnas alineadas al centro. */
.account__qr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

/* Caja del QR: 196x196 fijo, no hay token de tamano de imagen en el kit.
   qrcode.js dibuja siempre cuadrado a su propia resolucion; estirarlo al 100%
   del contenedor lo escala sin deformar. */
.account__qr-box {
  width: 196px;
  height: 196px;
  overflow: hidden;
  background: var(--color-palette-paper);
  border-radius: var(--radius-md);
}

.account__qr-box canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.account__manual-key {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Rotulo de la clave manual: el mismo estilo que el rotulo de un campo. */
.account__manual-key-label {
  color: var(--color-text-secondary);
  font: var(--typography-label-sm);
}

.account__manual-key-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* La clave manual en tipografia de codigo, con cifras tabulares para que los
   digitos del secreto (base32: letras y numeros) queden alineados. */
.account__manual-key-value {
  font: var(--typography-code-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

/* Regenerar y Desactivar, en una fila bajo el estado de la verificacion activa. */
.account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Campo (otp-field o codigo de recuperacion) + enlace para alternar, dentro
   del modal de desactivar: mismo aire que el cuerpo del modal (12 px). */
.account__disable-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Grilla de codigos de recuperacion, dentro del modal de secret-reveal.js. */
.secret-reveal__codes {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-page);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.secret-reveal__codes-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Los codigos de recuperacion en tipografia de codigo, con cifras tabulares
   para que las dos columnas queden alineadas. */
.secret-reveal__code {
  font: var(--typography-code-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}