/* Lucidez - Pantalla Cuenta: perfil, recordatorios, cerrar sesion, y el
   selector de demostracion (herramienta de prueba de esta maqueta, no
   parte del producto real). */

.cuenta {
  max-width: var(--content-max-angosto);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Entrada escalonada de las 4 piezas de la pantalla (ver @keyframes
   entrada-progresiva en base.css): perfil, recordatorios, cerrar sesion,
   selector de demo, cada una un poco despues que la anterior. */
.cuenta.entrada-progresiva > * {
  animation: entrada-progresiva var(--dur-reveal) var(--ease-out) both;
}

.cuenta.entrada-progresiva > *:nth-child(1) { animation-delay: 0ms; }
.cuenta.entrada-progresiva > *:nth-child(2) { animation-delay: 60ms; }
.cuenta.entrada-progresiva > *:nth-child(3) { animation-delay: 120ms; }
.cuenta.entrada-progresiva > *:nth-child(4) { animation-delay: 180ms; }

.cuenta__tarjeta {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-superficie);
  border: 1px solid var(--color-superficie-borde);
}

.cuenta__insignia {
  margin-bottom: var(--space-3);
}

/* Fila de identidad: el monograma reemplaza una foto de perfil real, que
   todavia no existe en esta maqueta. Reutiliza a proposito el mismo
   degradado Rose-a-Gold que ya es la "portada" de un ebook sin imagen de
   verdad (ver reproductor.css): un unico lenguaje visual para "superficie
   sin archivo real todavia" en toda la app, en vez de improvisar uno
   distinto por pantalla. */
.cuenta__perfil-fila {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cuenta__monograma {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--rose) 0%, var(--gold) 100%);
  color: var(--canvas);
  font-family: var(--font-display);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cuenta__perfil-datos {
  min-width: 0;
}

.cuenta__nombre {
  margin: 0;
}

.cuenta__correo {
  color: var(--color-texto-secundario);
  font-size: var(--text-small);
}

.cuenta__estado {
  margin-top: var(--space-3);
  color: var(--color-texto-secundario);
  font-size: var(--text-small);
}

.cuenta__accion {
  margin-top: var(--space-4);
  width: 100%;
}

/* Acciones de plan pago: "Gestionar suscripción" arriba, "Cancelar
   suscripción" como link de texto debajo (pedido de Antonio, bloque
   "Usuarios y suscripciones"). Cancelar como boton lleno competiria en
   peso visual con la accion principal, un link de texto deja clara la
   jerarquia sin esconder la opcion. */
.cuenta__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.cuenta__acciones .cuenta__accion {
  margin-top: var(--space-1);
}

.cuenta__cancelar-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-texto-secundario);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .cuenta__cancelar-link:hover {
    color: var(--danger);
  }
}

/* Confirmar la cancelacion en el sitio, sin modal ni confirm() nativo:
   mismo criterio ya usado en la Consola administrativa para confirmar un
   borrado (ver .consola-contenido__fila-acciones--confirmando). */
.cuenta__confirmar-cancelacion {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-superficie-borde);
}

.cuenta__confirmar-texto {
  font-size: var(--text-small);
  color: var(--color-texto-secundario);
  margin: 0 0 var(--space-3);
}

.cuenta__confirmar-fila {
  display: flex;
  gap: var(--space-3);
}

/* Ancho automatico por contenido, nunca heredado de un boton circular de
   icono: leccion ya aprendida en la Consola (ver nota extensa sobre el bug
   de "Cancelar" invadiendo a "Sí" en consola.css), asi que estos dos
   botones nacen con flex:1 desde el primer momento en vez de encontrar el
   mismo problema mas tarde. */
.cuenta__confirmar-boton {
  flex: 1;
}

.cuenta__confirmar-boton--peligro {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-tint);
}

.cuenta__tarjeta-titulo {
  margin-bottom: var(--space-2);
}

.cuenta__tarjeta-texto {
  color: var(--color-texto-secundario);
  font-size: var(--text-small);
}

/* Boton de recordatorios: mismo patron de icono + aria-pressed que ya usa
   el aviso de disponibilidad de Sala (estado-vacio.css), para que
   "activar/desactivar un aviso" se sienta igual en toda la app. */
.cuenta__accion[aria-pressed="true"] {
  border-color: var(--rose);
  color: var(--rose);
}

@media (hover: hover) and (pointer: fine) {
  .cuenta__accion[aria-pressed="true"]:hover {
    background: var(--rose-tint);
  }
}

/* Caja del selector de demostracion: borde punteado a proposito, para que
   se lea de inmediato como herramienta de prueba de esta maqueta y no
   como una funcion mas del producto real (ver skill frontend-design:
   estructura que dice la verdad sobre el contenido). */
.cuenta__demo {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-superficie-borde);
}

.cuenta__demo-etiqueta {
  display: block;
  margin-bottom: var(--space-3);
}

/* .selector-demo / .selector-demo__opcion se movieron a base.css cuando el
   Portal de coaches necesitó el mismo patrón de botones tipo "pill" (ver
   comentario ahí): siguen usándose acá tal cual, sin cambio visual. */