/* ══════════════════════════════════════════════════════════════════════
   PAGE: /upgrade (Premium upgrade page)
   Prefijos: .upgrade-*, .plan-card-*, .faq-*

   Hero con gradiente + planes (2 columnas) + FAQ + disclosure legal.

   Extraído de pages.css en Round 7.2.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Desktop (from pages.css 1757-1989) ────────────────────────── */
.upgrade-layout {
  min-height: 100vh;
  background: var(--bg-primary);
}

.upgrade-hero {
  text-align: center;
  padding: var(--sp-3xl) var(--sp-xl);
  background: linear-gradient(135deg, var(--violet) 0%, #581BE5 60%, var(--magenta) 100%);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.upgrade-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 80%, rgba(240, 40, 216, 0.2), transparent 60%);
}

.upgrade-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.upgrade-hero h1 {
  font-size: 2.5rem;
  font-weight: var(--fw-extra);
  color: white;
  margin-bottom: var(--sp-md);
}

.upgrade-hero p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 500px;
  margin: 0 auto;
}

.upgrade-plans-wrapper {
  max-width: 900px;
  margin: calc(-1 * var(--sp-2xl)) auto var(--sp-2xl);
  padding: 0 var(--sp-xl);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upgrade-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  width: 100%;
}

@media (max-width: 768px) {
  .upgrade-plans {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  background: var(--bg-white);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-2xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.plan-card--featured {
  border-color: var(--violet);
  box-shadow: 0 20px 40px -8px rgba(108, 43, 255, 0.2);
}

.plan-card-header {
  margin-bottom: var(--sp-xl);
}

.plan-card-name {
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-xs);
}

.plan-card-price {
  font-size: 2.5rem;
  font-weight: var(--fw-extra);
  color: var(--violet);
  line-height: 1;
  margin-bottom: var(--sp-xs);
}

.plan-card-price small {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.plan-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.plan-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.plan-feature-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.plan-feature-list li .material-symbols-outlined {
  font-size: 18px;
  color: var(--green);
}

.plan-feature-list li.disabled {
  color: var(--text-secondary);
}

.plan-feature-list li.disabled .material-symbols-outlined {
  color: var(--text-secondary);
}

.plan-current-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  text-align: center;
}

.upgrade-faq {
  max-width: 700px;
  margin: 0 auto var(--sp-2xl);
  padding: 0 var(--sp-xl);
}

.upgrade-faq h2 {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-lg) 0;
}

.faq-item summary {
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--violet);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  margin-top: var(--sp-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.9rem;
}


/* Moved from admin.css - upgrade-related styles */
/* Upgrade honest CTA */
.upgrade-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--sp-sm);
  line-height: 1.5;
}

.upgrade-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  max-width: 700px;
  margin: var(--sp-xl) auto;
  padding: var(--sp-lg);
  background: var(--bg-secondary);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.upgrade-disclosure .material-symbols-outlined {
  color: var(--violet);
  flex-shrink: 0;
  margin-top: 2px;
}

.upgrade-disclosure p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.plan-current-badge--inactive {
  opacity: 0.5;
}

/* ─── 2. Dark mode (from pages.css 2513-2521) ──────────────────────── */

/* Upgrade */
[data-theme="dark"] .plan-card {
  background: var(--bg-white);
  border-color: var(--border);
}

[data-theme="dark"] .plan-current-badge {
  background: var(--bg-secondary);
}

/* ── Información legal en el punto de venta ─────────────────── */
/* Acompaña a .upgrade-legal-compact y al diálogo de condiciones de views/upgrade.html: la duración real,
   que no hay renovación automática, el derecho de retracto y el aviso a
   menores. Es letra que tiene que poder LEERSE —de eso depende que el aviso
   sirva de algo—, no letra pequeña de adorno.

   ESTA PANTALLA ES SIEMPRE OSCURA, tenga el usuario el tema que tenga:
   .skora-super-overlay pinta #0D0D1A con manchas de color animadas encima y no
   mira `data-theme` para nada. La primera versión de estas reglas daba los
   colores claros por defecto y los oscuros bajo `[data-theme="dark"]`, así que
   a cualquiera con el tema claro —la mayoría— le salía gris oscuro sobre casi
   negro: el aviso legal estaba ahí y no se veía. Aquí no hay variantes de
   tema; hay un solo juego de colores, el de fondo oscuro.

   El panel lleva su propio velo oscuro a propósito. El fondo de debajo es un
   degradado que SE MUEVE, así que sin un suelo predecible el contraste depende
   de por dónde pase la mancha naranja. Con el velo, el peor caso medido es
   5.0:1 para el cuerpo y 6.6:1 para las negritas. */

/* El botón CONTINUAR es `position: fixed` y mide 120px con su relleno, pero
   .skora-super-step solo reserva 100px al final: en escritorio el botón tapaba
   la última línea del aviso («Pago procesado por Bold…»). En móvil no se
   notaba porque allí el pie lleva un degradado que difumina lo que pasa por
   debajo; en escritorio es transparente y simplemente se come el texto.

   Se reserva solo en este paso y no en `.skora-super-step`, que es compartido:
   los demás pasos centran su contenido y subirles el relleno los desplazaría
   sin motivo. */
/* Actualización 2026-10-12: en este paso el pie (CONTINUAR) se esconde
   (upgrade.js añade .hidden en el paso 3), así que ya no hay nada que
   reservar abajo. Esos 156px eran los que empujaban los planes fuera de la
   pantalla en un portátil.

   Además, `justify-content: center` con overflow corta lo de ARRIBA cuando el
   contenido no cabe: el título y la etiqueta «Más popular» quedaban fuera e
   inalcanzables. Se arranca arriba y se centra con márgenes automáticos, que
   sí dejan llegar al principio si algún día no cabe. */
#skora-super-step-3 {
  justify-content: flex-start;
  padding-top: 64px;
  padding-bottom: 24px;
}

#skora-super-step-3 > :first-child { margin-top: auto; }
/* El último hijo es el <dialog> (sin caja mientras está cerrado): el margen va en la línea legal. */
#skora-super-step-3 > .upgrade-legal-compact { margin-bottom: auto; }

/* En móvil solo se muestran los precios: se ocultan los demás slides y el botón global de continuar */
@media (max-width: 768px) {
  #skora-super-step-1,
  #skora-super-step-2,
  #skora-super-footer {
    display: none !important;
  }
}

@media (min-width: 641px) {
  #skora-super-step-3 .skora-super-title {
    font-size: 2.25rem;
    margin-bottom: 22px;
  }
}

/* Portátiles bajitos (768px de alto, ~650 útiles): tarjetas más apretadas
   para que los tres planes, el código y la línea legal quepan sin scroll. */
@media (min-width: 641px) and (max-height: 820px) {
  #skora-super-step-3 { padding-top: 40px; padding-bottom: 6px; }
  #skora-super-step-3 .skora-super-title { font-size: 1.75rem; margin-bottom: 10px; padding-bottom: 4px; }
  #skora-super-step-3 .creative-plan-inner { padding: 0.9rem 1.25rem; gap: 0.4rem; }
  #skora-super-step-3 .creator-code { margin-top: 16px; }
  #skora-super-step-3 .creator-code-card { padding-top: 8px; padding-bottom: 8px; }
  #skora-super-step-3 .upgrade-legal-compact { margin-top: 8px; }
}


/* La línea resumida va bajo la tarjeta del código de creador. Mismo velo y
   mismos colores medidos que tenía el panel completo (cuerpo 5.0:1 en el peor
   caso del degradado), pero en una línea: lo esencial queda a la vista antes de
   pagar y el texto completo vive en el diálogo «Condiciones de compra». */
.upgrade-legal-compact {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* El violeta de marca (#6C2BFF) sobre casi negro no llega a 3:1. Aquí va el
   tono claro, el mismo que usa el resto de la app en superficies oscuras. */
.upgrade-legal-compact a,
.upgrade-legal-more,
.upgrade-legal-line a {
  color: #C4B5FD;
  font-weight: var(--fw-semi, 600);
  text-underline-offset: 3px;
}

.upgrade-legal-more {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: var(--fw-semi, 600);
  text-decoration: underline;
  cursor: pointer;
}

.upgrade-legal-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 22px 22px 18px;
  background: #15151F;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  overscroll-behavior: contain;
}

.upgrade-legal-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.upgrade-legal-dialog h3 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  color: #FFFFFF;
}

.upgrade-legal-line {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

.upgrade-legal-line strong { color: #FFFFFF; }

.upgrade-legal-fine {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}

.upgrade-legal-close {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  background: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: var(--fw-bold, 700);
  color: #0D0D1A;
  cursor: pointer;
  transition: transform 160ms var(--ease-out-strong, ease-out);
}

.upgrade-legal-close:active { transform: scale(0.97); }

/* ── Código de creador (sql/168) ─────────────────────────────────────────
   Debajo de los planes y siempre abierto: como enlace sobre el título casi no
   se veía. Misma regla que lo legal: esta pantalla es SIEMPRE oscura. El verde
   del aplicado es el de los precios con descuento, para leerse como una cosa. */
.creator-code {
  width: 100%;
  max-width: 760px;
  margin: 28px auto 0;
}

.creator-code [hidden] { display: none; }

.creator-code-card {
  padding: 18px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
}

/* En computador va en una sola fila (icono + texto | campo + botón) para que
   ocupe lo mínimo de alto. En celular se apila. */
@media (min-width: 641px) {
  .creator-code-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 18px;
    padding: 12px 12px 12px 16px;
  }
  .creator-code-card .creator-code-head { flex: 1 1 260px; margin-bottom: 0; }
  .creator-code-card .creator-code-form { flex: 0 1 280px; }
  .creator-code-card .creator-code-msg { flex-basis: 100%; }
}

.creator-code-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  text-align: left;
}

.creator-code-head .material-symbols-outlined {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 230, 118, 0.14);
  color: #00E676;
  font-size: 22px;
}

.creator-code-title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--fw-bold, 700);
  color: #FFFFFF;
}

.creator-code-sub {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.78);
}

.creator-code-form {
  display: flex;
  gap: 8px;
}

.creator-code-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem; /* 16px: menos y iOS hace zoom al enfocar */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: border-color 160ms var(--ease-out-strong, ease-out);
}

.creator-code-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.55);
}

.creator-code-input:focus-visible {
  outline: none;
  border-color: #C4B5FD;
}

.creator-code-apply {
  min-height: 48px;
  padding: 0 20px;
  background: #FFFFFF;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: var(--fw-bold, 700);
  color: #0D0D1A;
  cursor: pointer;
  transition: transform 160ms var(--ease-out-strong, ease-out);
}

.creator-code-apply:active { transform: scale(0.97); }
.creator-code-apply:disabled { opacity: 0.6; cursor: progress; }

.creator-code-msg {
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #FCA5A5;
}

.creator-code-msg:empty { display: none; }

.creator-code-applied {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8px;
  padding: 12px 14px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.32);
  border-radius: 16px;
  text-align: center;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
}

.creator-code-applied .material-symbols-outlined {
  font-size: 18px;
  color: #00E676;
}

.creator-code-applied strong { color: #FFFFFF; }

.creator-code-link {
  min-height: 36px;
  padding: 4px 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: var(--fw-semi, 600);
  color: #C4B5FD;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Promo de noviembre (sql/195) ─────────────────────────────────────────
   Aviso encima del acudiente, del mismo ancho. Borde verde: el verde ya es el
   color de "precio rebajado" en las tarjetas (#00E676), así se lee como la
   misma oferta sin meter un acento nuevo en la página. */
.upgrade-promo {
  display: grid;
  gap: 4px;
  width: calc(100% - 24px);
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 16px 18px;
  background: rgba(0, 230, 118, 0.08);
  border: 1.5px solid rgba(0, 230, 118, 0.55);
  border-radius: 16px;
  text-align: left;
}
.upgrade-promo[hidden] { display: none; }
.upgrade-promo-when {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00E676;
}
.upgrade-promo-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #FFFFFF; }
.upgrade-promo-sub { margin: 0; font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }

/* ── "¿Te lo paga tu acudiente?" (js/components/parent-share.js) ──────────
   Va encima de los planes y del mismo ancho que la cuadrícula. Blanco sobre el
   degradado oscuro: es la única superficie clara del paso 3, para que se lea
   primero sin competir en color con los botones de los planes. */
.upgrade-parent {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 24px);
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 14px 16px;
  background: #FFFFFF;
  color: #17151F;
  border: 0;
  border-radius: 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.upgrade-parent:active { transform: scale(0.98); }
@media (hover: hover) {
  .upgrade-parent:hover { box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.7); }
  .upgrade-parent:hover .upgrade-parent-go { transform: translateX(3px); }
}
.upgrade-parent:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 3px; }

.upgrade-parent-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0E7C42;
  color: #FFFFFF;
  font-size: 24px;
}
.upgrade-parent-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.upgrade-parent-text strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.upgrade-parent-text span { font-size: 0.875rem; line-height: 1.4; color: #4F4B5C; }  /* 7.9:1 */
.upgrade-parent-go {
  flex-shrink: 0;
  color: #5520D9;
  font-size: 22px;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}