/* Lucidez - Pantalla de planes: precios confirmados en la Entrega 1
   (Estandar US$39/mes, Premium US$89/mes, 7 dias de prueba). El estilo de
   tarjeta viene de la referencia visual autorizada el 20 de agosto de
   2026, no asi las cifras. */

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

/* Entrada escalonada de las 2 tarjetas (ver @keyframes entrada-progresiva
   en base.css), mismo lenguaje de movimiento que la pantalla de Cuenta. */
.planes.entrada-progresiva > * {
  animation: entrada-progresiva var(--dur-reveal) var(--ease-out) both;
}

.planes.entrada-progresiva > *:nth-child(1) { animation-delay: 0ms; }
.planes.entrada-progresiva > *:nth-child(2) { animation-delay: 80ms; }
/* Cuando el plan activo es Cortesía o Cancelada, el aviso honesto de
   construirAvisoPlanoNoPago() se suma como primer hijo, corriendo las dos
   tarjetas un puesto: este tercer valor completa el escalonado para ese
   caso, sin afectar en nada al caso normal de solo 2 tarjetas. */
.planes.entrada-progresiva > *:nth-child(3) { animation-delay: 160ms; }

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

/* Gold, no Rose: en la tabla de valores de marca, Gold es "la excelencia"
   y ya es el acento fijo para todo lo que senala un nivel superior (ver
   plan-tarjeta__etiqueta y la insignia de Cuenta en Premium). */
.plan-tarjeta--destacado {
  border-color: var(--gold);
}

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

.plan-tarjeta__nombre {
  margin-bottom: var(--space-2);
}

.plan-tarjeta__precio {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.plan-tarjeta__precio-numero {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--color-texto);
}

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

.plan-tarjeta__prueba {
  font-size: var(--text-small);
  color: var(--color-texto-secundario);
  margin-bottom: var(--space-4);
}

.plan-tarjeta__lista {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-tarjeta__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-texto);
}

.plan-tarjeta__item iconify-icon {
  color: var(--rose);
  font-size: 16px;
  flex-shrink: 0;
}

/* Modal "diferencia de plan" (26 de agosto de 2026, pregunta de Antonio):
   mismo lenguaje visual que el resto de paneles flotantes de la app
   (reproductor-telon/reproductor-panel en reproductor.css) -- material
   translucido, origen en el centro por ser un modal sin gatillo fijo,
   entrada desde scale(0.95) + opacidad, nunca desde scale(0) (skill
   animate) -- pero con su propio prefijo BEM ("plan-cambio") para que
   este bloque quede independiente del reproductor, mismo criterio ya
   aplicado entre consola-usuarios y consola-contenido. */
.plan-cambio-telon {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 7, 12, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.plan-cambio-telon[data-abierto="true"] {
  opacity: 1;
  pointer-events: auto;
}

.plan-cambio-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 71;
  width: calc(100% - var(--space-6));
  max-width: 380px;
  max-height: calc(100dvh - var(--space-7));
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-superficie) 97%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--color-superficie-borde);
  box-shadow: var(--shadow-elevated);
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-panel) var(--ease-out);
}

.plan-cambio-panel[data-abierto="true"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.plan-cambio-panel__cerrar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-texto-secundario);
  transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.plan-cambio-panel__cerrar iconify-icon {
  font-size: 18px;
}

.plan-cambio-panel__cerrar:active {
  transform: scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
  .plan-cambio-panel__cerrar:hover {
    background: var(--color-fondo);
  }
}

.plan-cambio-panel__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.plan-cambio-panel__icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rose-tint);
  color: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: var(--space-1);
}

.plan-cambio-panel__titulo {
  font-size: var(--text-display-sm);
  max-width: 24ch;
}

.plan-cambio-panel__descripcion {
  color: var(--color-texto-secundario);
  max-width: 34ch;
  margin: 0;
}

/* Aviso honesto sobre lo que esta maqueta todavía no calcula de verdad
   (prorrateo por días del ciclo, pasarela real): mismo criterio visual
   que .consola-panel__seccion-nota (icono + texto, fondo suave), con su
   propio nombre de clase porque vive en un archivo distinto. Alineado
   arriba (no centrado, a diferencia del resto del cuerpo del modal)
   porque el texto es largo y necesita leerse como una nota aparte, no
   como parte del mensaje principal. */
.plan-cambio-panel__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-fondo);
  border: 1px solid var(--color-superficie-borde);
  text-align: left;
  font-size: var(--text-small);
  color: var(--color-texto-secundario);
}

.plan-cambio-panel__nota iconify-icon {
  flex-shrink: 0;
  font-size: 17px;
  color: var(--rose);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .plan-cambio-telon,
  .plan-cambio-panel {
    transition: opacity var(--dur-ui) linear;
  }

  .plan-cambio-panel,
  .plan-cambio-panel[data-abierto="true"] {
    transform: translate(-50%, -50%) scale(1);
  }
}