@charset "UTF-8";
:root {
  --color1: #830fba;
  --color2: #d0ac3b;
  --input-bg: #1a142e;
  --input-border: rgba(255, 255, 255, 0.1);
  --card-bg: #130d26;
  --color-success: #00ff88;
  --color-warning: #f5a623;
  --color-error: #FF4D4D;
  --bg-dark: #090514;
  /* Estados de .btn (hover/focus/pressed), calculados a partir del color
     base de cada variante (mismo desplazamiento de luminosidad/saturación
     que el hover/focus/pressed de Figma para el botón morado, aplicado al
     verde y al neutro sobre su propio color) */
  --color1-hover: #9e2ed6;
  --color1-active: #9308e0;
  --color1-focus: #3c0854;
  --color-green-hover: #3dc53d;
  --color-green-active: #17ce17;
  --color-green-focus: #0e4b0e;
  --color-neutral-hover: #37314c;
  --color-neutral-active: #241a48;
  --color-neutral-focus: #745fb9;
  /* .btn.disabled: compartido por todas las variantes (mismo criterio que Figma) */
  --disabled-bg: #dbdbdb;
  --disabled-text: rgba(166, 166, 166, 0.35);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: url("../img/bg.webp") repeat-y top center #000;
  background-size: 100%;
  position: relative;
  overflow-x: hidden;
  color: #D1D1D1;
  font-family: "Trebuchet MS", Verdana, Helvetica, Arial;
}

main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

a:link,
a:visited {
  color: #fff;
  text-decoration: none;
}

a:active,
a:hover {
  color: #C53EE3;
  text-decoration: none;
}

p {
  line-height: normal;
}

h1,
h2,
h3,
h4 {
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-size: 3rem;
}

h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
  text-align: center;
}

@media (min-width: 700px) {
  body {
    background: url("../img/bg-xl.webp") repeat-y top center;
    background-size: cover;
  }
}
.btn,
.btn:link,
.btn:visited {
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: 1rem 1.5rem;
  color: #fff;
  text-align: center;
  cursor: pointer;
  border: solid 2px var(--color2);
  border-radius: 1rem;
  background: var(--color1);
  transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

/* --- Estados de .btn (hover / focus / pressed), Figma node 128-9344/46/48 ---
   :not(.disabled):not(:disabled) evita que un botón deshabilitado reaccione
   al ratón/teclado, sin depender del orden de las reglas en la hoja de estilos */
.btn:not(.disabled):not(:disabled):hover {
  border-color: var(--color2);
  background: var(--color1-hover);
  box-shadow: 0 0 6.6px 2px rgba(131, 15, 186, 0.6);
}

.btn:not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color1-focus);
  border-width: 2.5px;
  background: var(--color1);
  box-shadow: 0 0 12px 0 rgba(131, 15, 186, 0.35);
  outline: none;
}

.btn:not(.disabled):not(:disabled):active {
  border-color: var(--color2);
  background: var(--color1-active);
  box-shadow: none;
}

/* Botón verde (dashboard.html: "Renovar suscripción") */
.btn.green,
.btn.green:link,
.btn.green:visited {
  background: #1caa1c;
}

.btn.green:not(.disabled):not(:disabled):hover {
  background: var(--color-green-hover);
  box-shadow: 0 0 6.6px 2px rgba(28, 170, 28, 0.6);
}

.btn.green:not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color-green-focus);
  background: #1caa1c;
  box-shadow: 0 0 12px 0 rgba(28, 170, 28, 0.35);
}

.btn.green:not(.disabled):not(:disabled):active {
  background: var(--color-green-active);
  box-shadow: none;
}

/* Botones de login con redes (Google, Telegram) */
.btn.neutral,
.btn.neutral:link,
.btn.neutral:visited {
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.75rem;
  font-size: 13px;
  text-transform: capitalize !important;
  border: solid 1px var(--input-border);
  border-radius: 0.75rem;
  background: var(--input-bg);
  font-weight: 100;
}

.btn.neutral::before {
  content: none;
}

.btn.neutral img {
  width: 20px;
  height: 20px;
}

/* Icono de "Email" (login.html): no es cuadrado como los logos de redes,
   así que pisa el tamaño 20x20 de arriba para no deformarse */
.btn.neutral img.iconEmail {
  width: 19px;
  height: auto;
}

/* .btn.neutral no tiene un color de marca saturado (fondo casi negro, borde
   translúcido), así que su foco no puede oscurecerse como el morado/verde:
   se aclara en su lugar, para seguir siendo visible sobre el fondo oscuro
   del sitio, manteniendo el mismo tono (hue) que su propio color base */
.btn.neutral:not(.disabled):not(:disabled):hover {
  border-color: var(--input-border);
  background: var(--color-neutral-hover);
  box-shadow: none;
}

.btn.neutral:not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color-neutral-focus);
  border-width: 1.5px;
  background: var(--input-bg);
  box-shadow: 0 0 12px 0 rgba(116, 95, 185, 0.35);
}

.btn.neutral:not(.disabled):not(:disabled):active {
  border-color: var(--input-border);
  background: var(--color-neutral-active);
  box-shadow: none;
}

/* Botón "Log-out" (profile.html): misma base .btn.neutral, pero de ancho
   completo, separado del resto del menú y con sus hijos (icono + texto) en rojo */
.btn.logOut {
  flex: none;
  width: 100%;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 6rem;
  padding: 1rem;
  background: var(--card-bg);
  color: var(--color-error);
}

.btn.logOut img {
  width: 18px;
  height: 18px;
}

.btn.logOut span {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Botón compacto del header (LOG IN), Figma node 200:2557 */
.btn.btnSm,
.btn.btnSm:link,
.btn.btnSm:visited {
  padding: 0.375rem 0.5rem;
  font-size: 12px;
  border-width: 1px;
  border-radius: 0.5rem;
}

/* Contextos donde el .btn ocupa todo el ancho de su contenedor */
.servItem .zonaBtn .btn,
.loginActions .btn,
.accordion .btn,
.dashCard .btn,
.profileEditForm .btn,
.timelineCard .btn,
.paymentActions .btn,
.paymentModal .btn,
.paymentResolutionCard .btn {
  width: 100%;
  /*   font-weight: bold;
    text-transform: uppercase; */
}

.dashCard .btn {
  margin-top: 0.25rem;
}

/* Efecto visual para que resalte al estar fijo (cta.ctaFixed en index.html) */
.cta.ctaFixed .btn {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Estado deshabilitado: igual para las tres variantes (Figma node 128-9350).
   Se activa con la clase "disabled" (funciona también en <a>, que no admite
   el atributo disabled nativo) o con :disabled en <button>/<input> reales.
   Va al final del archivo a propósito: misma especificidad (0,2,0) que
   .btn.green/.btn.neutral/.btn.logOut/.cta.ctaFixed .btn, así que tiene que
   ir después de todos ellos en la hoja de estilos para ganar siempre. */
.btn.disabled,
.btn.disabled:link,
.btn.disabled:visited,
.btn:disabled {
  border: none;
  background: var(--disabled-bg);
  color: var(--disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.hoverFX {
  transition: transform 0.3s ease;
  transform: scale(1);
}

.hoverFX:focus,
.hoverFX:hover,
.hoverFX:active {
  transform: scale(1.05);
}

/* ===================================================================
   Campos de formulario (login, crear cuenta, recuperar contraseña,
   editar perfil, cambiar contraseña...).

   Estructura HTML esperada:
     <div class="field">
       <label for="...">Etiqueta</label>
       <div class="box">
         <input id="..." ...>
         <!-- opcional, solo en contraseñas: botón para mostrar/ocultar
              (ver assets/js/password-toggle.js) -->
         <button type="button" class="toggle" data-password-toggle>
           <img src="assets/img/icons/icon-eye.svg" alt="">
         </button>
       </div>
       <p class="message">...</p>
     </div>

   Estados que puede pintar el equipo de desarrollo añadiendo una clase
   a .field (ver comentario sobre cada .field en el HTML):
     - "is-error": borde rojo en .box y muestra el mensaje (el texto del
       mensaje lo escribe quien detecte el error)
     - "is-valid": borde verde en .box
   El estado de foco es automático (:focus-within), no requiere clase.
   =================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.field label {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color2);
}

.field .box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg);
  border: solid 1px var(--input-border);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.field input:disabled {
  cursor: not-allowed;
  opacity: 0.24;
}

.field:has(input:disabled) label {
  color: #806E33;
}

/* Autocompletado del navegador: por defecto Chrome/Edge pintan el campo
   autorrellenado con fondo claro y texto oscuro (su propio estilo, no el
   nuestro). El truco -webkit-box-shadow inset "engaña" al navegador para
   que rellene el fondo con el color del input en vez del suyo, y
   -webkit-text-fill-color fuerza el color del texto. La transición larga
   evita que Chrome revierta el color pasado un rato. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox (y navegadores que sigan el estándar) usan :autofill en vez del prefijo -webkit- */
.field input:autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: #fff;
}

/* Botón del "ojo" para mostrar/ocultar la contraseña (ver assets/js/password-toggle.js) */
.field .toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 12px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.field .toggle img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Por defecto (contraseña OCULTA) el ojo se ve tachado con una línea
   diagonal dibujada por CSS (no hay un icono "ojo tachado" exportado de
   Figma, así que se dibuja así en vez de inventar un SVG nuevo). Cuando se
   pulsa el botón y la contraseña pasa a estar VISIBLE (clase "isVisible",
   la pone assets/js/password-toggle.js), esa línea desaparece. */
.field .toggle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 1px;
  background: #9a9a9a;
  transform: rotate(-45deg);
}

.field .toggle.isVisible::after {
  content: none;
}

/* Mensaje bajo el input. Oculto por defecto: solo se muestra cuando
   .field tiene la clase "is-error". El equipo de desarrollo le pone el
   texto a la vez que añade esa clase. */
.field .message {
  display: none;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--color-error);
}

/* --- Estado FOCUS: automático, sin necesidad de ninguna clase --- */
.field:focus-within .box {
  border-color: var(--color1);
  box-shadow: 0 0 0 3px rgba(131, 15, 186, 0.25);
}

/* --- Estado ERROR --- */
.field.is-error .box {
  border-color: var(--color-error);
}

.field.is-error .message {
  display: block;
}

/* --- Estado VALIDADO --- */
.field.is-valid .box {
  border-color: var(--color-success);
}

/* ===================================================================
   Buscador (timeline.html): pastilla redondeada con icono + input.
   Diseño distinto a .field .box (sin borde visible, radio completo).

   Estructura HTML esperada:
     <label class="searchField">
       <img class="searchFieldIcon" src="assets/img/icons/icon-search.svg" alt="">
       <input class="searchFieldInput" type="search" placeholder="...">
       <button class="searchFieldClear" data-search-clear>×</button>
     </label>
   =================================================================== */
.searchField {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 99px;
  background: var(--card-bg);
  cursor: text;
  transition: box-shadow 0.2s ease;
}

.searchFieldIcon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.searchFieldInput {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-family: inherit;
  /* Quita la apariencia nativa de type="search" (en Chrome/Safari deja hueco
     de más a la derecha reservado para su propio aspa) para que solo se vea
     el botón .searchFieldClear de aquí abajo */
  -webkit-appearance: none;
  appearance: none;
}

.searchFieldInput::placeholder {
  color: #9a9a9a;
}

/* Aspa nativa del propio navegador: se oculta porque se sustituye por
   .searchFieldClear (ver más abajo), que sí se ve igual en todos los
   navegadores (Firefox no pinta ninguna por defecto) y si se puede
   estilizar a mano */
.searchFieldInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.searchField:focus-within {
  box-shadow: 0 0 0 2px var(--color1);
}

/* Botón de borrar propio: oculto por defecto, solo aparece cuando el
   input tiene texto escrito. Se controla con :has() + :placeholder-shown,
   sin JS — el input muestra su placeholder solo cuando está vacío, así
   que ":not(:placeholder-shown)" es "tiene contenido". El clic (vaciar el
   valor y devolver el foco) lo lleva assets/js/search-clear.js */
.searchFieldClear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #9a9a9a;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.searchField:has(.searchFieldInput:not(:placeholder-shown)) .searchFieldClear {
  display: inline-flex;
}

.searchFieldClear:hover,
.searchFieldClear:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

@keyframes ctaSlideUp {
  from {
    transform: translateY(150px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes bounce2 {
  0%, 100% {
    transform: translateY(-25px);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes bounceFX {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    /* Crece un 20% a mitad del giro */
    transform: rotate(180deg) scale(1.2);
  }
}
@keyframes jump {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    /* Sube 20px y completa media vuelta */
    transform: rotate(180deg) translateY(-25px);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes moveFX {
  0%, 100% {
    top: -30px;
    left: -30px;
    transform: translate(-50%, -50%);
  }
  25% {
    top: -30px;
    left: 97%;
    transform: translate(-50%, -50%);
  }
  50% {
    top: 75%;
    left: 97%;
    transform: translate(-50%, -50%);
  }
  75% {
    top: 75%;
    left: -30px;
    transform: translate(-50%, -50%);
  }
}
/* ===================================================================
   Cabecera fija + barra con auto-ocultado al hacer scroll.

   Compartido por dashboard.html (.appHeader + .tabsFilter) y
   timeline.html (.appHeader + .timelineSearchBar) — cualquier página
   nueva con el mismo patrón puede reutilizarlo igual. La lógica de
   mostrar/ocultar la lleva assets/js/scroll-autohide-bar.js.

   Estructura HTML esperada:
     <header class="appHeader">
       <div class="appLogo"><img ...></div>
       <div class="appAvatar">B</div>
       <!-- o, para un usuario sin sesión iniciada (dashboard-login-signin.html): -->
       <div class="appAuth">
         <a class="appAuthLogin" href="login.html">LOG IN</a>
         <a class="appAuthSignup" href="login-create-account.html">SIGN IN</a>
       </div>
     </header>

     <nav class="tabsFilter autoHideBar">...</nav>
     <!-- o -->
     <div class="timelineSearchBar autoHideBar">...</div>

     <main>...</main>

   .appHeader y .autoHideBar están SIEMPRE en position:fixed (nunca
   entran ni salen del flujo del documento, así que no hay saltos de
   layout); la página que los usa debe reservarles el hueco con
   padding-top: calc(var(--app-header-height) + var(--app-bar-height) + ...)
   en su contenedor de contenido (ver .dashWrap / .timeline).
   =================================================================== */
.appHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--bg-dark);
  border-bottom: solid 1px var(--input-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 768px) {
  .appHeader.dashVideo {
    max-width: 990px;
  }
}

.appHeader .appLogo img {
  width: 120px;
  height: auto;
}

.appAvatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--color1);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

/* ── Ajuste reskin: avatar del usuario con imagen dentro de .appAvatar ── */
.appAvatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Ajuste reskin: perfil ──
   - imagen de avatar dentro de .profileAvatar (ver perfil)
   - avatar de la página de edición clicable (subida de fichero)
   - utilidad .visually-hidden para el input file (no existe en styles.css) */
.profileAvatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.profileAvatarEdit {
  cursor: pointer;
}

.profileEditAvatar {
  display: flex;
  justify-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Ajuste reskin: botón Log-out del perfil ──
   En la maqueta es un <button>, aquí es un <a> (logout GET sin JS). El selector
   .btn.neutral:link (3 clases) pisa el flex:none de .btn.logOut (2 clases) y
   estira el botón a lo alto de .profileWrap (flex column, min-height 100vh).
   Se sube la especificidad para restaurar el flex:none del diseño. */
a.btn.neutral.logOut,
a.btn.neutral.logOut:link,
a.btn.neutral.logOut:visited {
  flex: none;
}

/* ── Ajuste reskin: pantallas de pago ──
   - spinner de carga del iframe (venía de app.css; styles.css no lo tenía)
   - texto de "sin métodos de pago disponibles" */
.payment-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color2);
  animation: pagoSpinner 0.8s linear infinite;
}

@keyframes pagoSpinner {
  to { transform: rotate(360deg); }
}

.paymentMethodsEmpty {
  text-align: center;
  padding: 1rem;
  color: rgb(154, 154, 154);
}

/* ── Ajuste reskin: posicionamiento de los modales iframe y success ──
   Su markup usa utilidades Tailwind del diseño viejo (fixed inset-0 flex
   items-center justify-center) que styles.css no incluye: sin esto, al
   poner display:flex por JS el modal se pinta en la esquina. */
#iframe-modal,
#success-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#iframe-modal { background: rgba(0, 0, 0, 0.8); }
#success-modal { background: rgba(15, 23, 42, 0.72); }

#iframe-close {
  color: #fff;
  cursor: pointer;
  border: none;
  background: none;
}

/* Tarjeta del modal de éxito (las clases success-* venían de app.css) */
.success-card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 2rem 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  color: #fff;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
}

#success-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  border: none;
}

#success-close:hover { background: rgba(255, 255, 255, 0.2); }

.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #1caa1c;
}

.success-title {
  font-family: "Racing Sans One", "Trebuchet MS", Verdana, Helvetica, Arial;
  font-size: 1.5rem;
  color: #fff;
}

.success-copy {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #d1d1d1;
}

.success-copy a {
  color: #8ab4ff;
  text-decoration: underline;
}

.success-action {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  border: 2px solid var(--color2);
  background: var(--color1);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.success-action:hover { background: var(--color1-hover); }

/* ── Ajuste reskin: filtro del timeline ──
   .timelineGroup/.timelineCard usan display:flex, que pisa el display:none
   del atributo [hidden] de la UA. Necesario para el filtrado del buscador. */
.timelineGroup[hidden],
.timelineCard[hidden] {
  display: none;
}

/* Cabecera para un usuario SIN sesión iniciada (dashboard-login-signin.html):
   sustituye a .appAvatar por un enlace "Iniciar sesión" + un botón
   "Registrarse" (Figma: "LOG IN" / "SIGN IN") */
.appAuth {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.appAuthLogin {
  font-size: 0.75rem;
  font-weight: bold;
}

.appAuthSignup,
.appAuthSignup:link,
.appAuthSignup:visited {
  padding: 0.375rem 0.5rem;
  border: solid 1px var(--color2);
  border-radius: 0.5rem;
  background: var(--color1);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, box-shadow 0.2s ease;
}

/* Mismos estados que .btn (hover/focus-visible/pressed/disabled, ver
   _buttons.scss) y con los mismos colores derivados de var(--color1):
   .appAuthSignup parte exactamente de esa misma base (var(--color1) de
   fondo, var(--color2) de borde), así que no hace falta calcular nada nuevo */
.appAuthSignup:not(.disabled):not(:disabled):hover {
  color: #fff;
  border-color: var(--color2);
  background: var(--color1-hover);
  box-shadow: 0 0 6.6px 2px rgba(131, 15, 186, 0.6);
}

.appAuthSignup:not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color1-focus);
  border-width: 1.5px;
  background: var(--color1);
  box-shadow: 0 0 12px 0 rgba(131, 15, 186, 0.35);
  outline: none;
}

.appAuthSignup:not(.disabled):not(:disabled):active {
  color: #fff;
  border-color: var(--color2);
  background: var(--color1-active);
  box-shadow: none;
}

.appAuthSignup.disabled,
.appAuthSignup:disabled {
  border: none;
  background: var(--disabled-bg);
  color: var(--disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Barra fija justo debajo de .appHeader. El elemento que la usa añade
   además su propia clase con el estilo específico (fondo, padding,
   contenido...): .tabsFilter, .timelineSearchBar... */
.autoHideBar {
  position: fixed;
  top: var(--app-header-height, 80px);
  left: 0;
  right: 0;
  z-index: 90;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* La añade/quita assets/js/scroll-autohide-bar.js según la dirección
   del scroll: al bajar se esconde detrás del header, al subir reaparece */
.autoHideBar.autoHideBarHidden {
  transform: translateY(-100%);
}

/* ===================================================================
   Borde con degradado diagonal: se añade (sin quitar la que ya tienen)
   junto a la clase de cualquier "card" del proyecto que use
   border: solid 1px var(--color2) — esa queda de respaldo si el
   navegador no soporta mask (ver más abajo).

   No se usa border-image (que es lo más directo para un borde en
   degradado) porque border-image IGNORA border-radius: con las esquinas
   redondeadas que usan todas estas cards, el borde saldría en escuadra
   en las puntas en vez de seguir la curva. En su lugar, un
   pseudo-elemento del mismo tamaño relleno con el degradado, recortado
   con mask a un anillo de 1px (mask-composite:exclude), que sí respeta
   border-radius:inherit. */
.borderGradient {
  position: relative;
}

.borderGradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at bottom left, #fff 0%, var(--color2) 60%);
  /*  background: linear-gradient(45deg, #fff, var(--color2));
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  /*    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);  */
  background: url(../img/bg.webp) repeat-y top center #000;
  background-size: 100% auto;
  /*  @media (min-width: 700px) { */
  /*   
      background: url(../img/bg-xl.webp) repeat-y top center;
      background-size: cover;
  } 
      */
}
@media (min-width: 700px) {
  .siteHeader {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.siteHeaderIN {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 990px;
  padding: 0.5rem 1rem;
}

.siteHeaderLogo {
  display: flex;
  align-items: center;
}

.siteHeaderLogo img {
  height: 56px;
  width: auto;
}

.siteHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.indexMain {
  padding-top: 5rem;
}

.indexMain p {
  line-height: 1.5rem;
}

p {
  line-height: normal;
}

.txtCenter {
  text-align: center;
}

.cont {
  display: grid;
  position: relative;
}

.contIN {
  position: relative;
  width: 100%;
  max-width: 900px;
  display: grid;
  margin: 0 auto;
  padding: 1rem;
}

.break {
  width: 100%;
  height: 2rem;
  display: flex;
  border: none;
}

.breakXL {
  width: 100%;
  height: 6rem;
  display: flex;
  border: none;
}

.menu {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 2rem 0;
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: linear-gradient(rgba(131, 15, 186, 0), #830fba, rgba(131, 15, 186, 0));
}

.menu ul {
  display: flex;
  gap: 1rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.intro {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
}

.intro .text {
  display: grid;
  gap: 1rem;
  margin-top: -10rem;
}

.intro .text h1 {
  margin-top: 0;
  text-align: center;
  font-size: 2rem;
  order: 2;
}

.contBunnyVideo {
  position: relative;
  display: grid;
  order: 1;
}

.bunnyVideo {
  display: relative;
  width: 100%;
  padding-top: 56.25%;
}

#playsound {
  position: absolute;
  top: 2rem;
  width: 100%;
  height: 70px;
  display: grid;
  justify-content: center;
  align-items: end;
  margin: auto;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.6);
}

.iconSound {
  width: 100%;
  display: grid;
  grid-gap: 0.5rem;
  justify-content: center;
  align-items: start;
  padding: 0.5rem;
  color: var(--color1);
  text-align: center;
}

.iconSound img {
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
  display: flex;
  margin: 0 auto;
  border-radius: 50%;
  border: solid 1px var(--color1);
}

.iconSound video {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -1rem 0 0 0;
  border-radius: 50%;
  border: solid 1px rgb(255, 255, 255);
  transform: scale(0.5);
}

.intro .img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
}

.intro .img img {
  display: flex;
  max-width: 300px;
  height: auto;
}

.cta {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  font-size: 1.5rem;
}

.stickyBottom {
  position: fixed;
  bottom: 0rem;
  width: 100%;
  max-width: 800px;
  display: flex;
  gap: 1rem;
  margin: 0 auto 0 -1rem;
  padding: 1rem;
  font-size: 0.8rem;
  border-radius: 1rem;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.listado {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.item .zonaBrand {
  display: grid;
  grid-gap: 0.5rem;
  justify-content: center;
  text-align: center;
  justify-items: center;
}

.item .zonaBrand img {
  max-width: 80%;
}

.item .zonaBrand small {
  color: rgb(154, 154, 154);
}

.item .zonaText {
  text-align: center;
}

.item .zonaText h4 {
  color: var(--color2);
  font-size: 1.4rem;
}

.item .zonaBtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  border: solid 2px var(--color2);
  border-radius: 0.5rem;
  background: #1caa1c;
}

.item:hover,
.item:active {
  color: #fff;
  transform: scale(1.05);
}

.item2 {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  /* border: solid 1px var(--color2); */
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.itemBox {
  position: relative;
  display: grid;
  gap: 1rem;
}

.itemBox .zonaBrand {
  display: grid;
  grid-gap: 0.5rem;
  justify-content: center;
  text-align: center;
  justify-items: center;
}

.itemBox .zonaBrand img {
  max-width: 80%;
}

.itemBox .zonaBrand small {
  color: rgb(154, 154, 154);
}

.itemBox .zonaText {
  text-align: center;
}

.itemBox .zonaText h4 {
  color: var(--color2);
  font-size: 1.4rem;
}

.itemBox .zonaBtn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  border: solid 2px var(--color2);
  border-radius: 0.5rem;
  background: #1caa1c;
}

/* ── Ajuste reskin: truncado de textos largos en las cards del listado ──
   (los canales de la API pueden traer nombres/descripciones muy largos;
   el título se corta a 1 línea y la descripción a 2, con puntos suspensivos,
   para mantener la altura de card de la maqueta) */
.itemBox .zonaText {
  min-width: 0;
}

.itemBox .zonaText h4 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.itemBox .zonaText .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.legal {
  min-height: 22px;
  padding-left: 25px;
  font-size: 0.7rem;
  background: url(../img/icon-18.svg) no-repeat left 3px;
  background-size: 18px 18px;
}

.fxTopLeft {
  position: absolute;
  top: -1rem;
  left: -1.5rem;
  width: 50px;
  height: 50px;
  top: -1.9rem;
  left: -2.5rem;
}

.fxTopRight {
  position: absolute;
  top: -1rem;
  right: -1.5rem;
  width: 50px;
  height: 50px;
  top: -1.9rem;
  right: -2.5rem;
}

.fxBottomRight {
  position: absolute;
  bottom: -1rem;
  right: -1.5rem;
  width: 50px;
  height: 50px;
}

.fxTopLeft img,
.fxTopRight img,
.fxBottomRight img {
  width: 100%;
  filter: brightness(100%);
}

.servicios {
  display: grid;
  grid-gap: 1rem;
  align-items: start;
}

.servItem {
  position: relative;
  display: grid;
}

.servItem h3 {
  margin-bottom: 0.5rem;
  color: var(--color2);
  font-size: 1.5rem;
}

.servItem .zonaImg {
  border-radius: 1rem;
  /* border: solid 1px var(--color2); */
  overflow: hidden;
}

.servItem .zonaImg img {
  width: 100%;
  z-index: -1;
}

.servItem .zonaTxt {
  flex: 1;
  display: grid;
  align-content: start;
  margin: -8rem 4px 0 4px;
  padding: 1rem 1rem 3rem 1rem;
  /* border: solid 1px var(--color2); */
  border-radius: 0.5rem;
  background: #000;
  z-index: 2;
}

.servItem .zonaBtn {
  margin: -2rem 10px 0 10px;
  z-index: 3;
}

.premios {
  display: grid;
  grid-gap: 1rem;
  align-items: start;
}

a.premio:hover,
a.premio:active {
  color: #fff;
}

.premioItem {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  display: grid;
}

.premioItem h3 {
  margin-bottom: 0.5rem;
  color: var(--color2);
  font-size: 1.5rem;
}

.premioItem .zonaImg {
  border-radius: 1rem;
  /* border: solid 1px var(--color2); */
  overflow: hidden;
}

.premioItem .zonaImg img {
  width: 100%;
  z-index: -1;
}

.premioItem .zonaTxt {
  flex: 1;
  display: grid;
  align-content: start;
  margin: -8rem 10px 0 10px;
  padding: 1rem 1rem 4rem 1rem;
  /* border: solid 1px var(--color2); */
  border-radius: 0.5rem;
  background: #000;
  z-index: 2;
}

.premioItem .zonaBtn {
  margin: -2rem 10px 0 10px;
  z-index: 3;
}

.premioItem .zonaPremios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: -3rem auto 0 auto;
  z-index: 3;
}

.premioItem .zonaPremios .premio {
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  /* border: solid 1px var(--color2); */
  border-radius: 0.5rem;
  background: var(--color1);
}

.premioItem .zonaPremios .premio img {
  width: 40px;
  margin: 0 auto;
}

.premioItem .zonaPremios .premio strong {
  display: block;
  color: var(--color2);
}

.opiniones {
  display: grid;
  gap: 2rem;
}

.opiniones .prev .img {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;
  margin-bottom: 2rem;
}

.opiniones .prev .img img {
  display: block;
  width: min(100%, 320px);
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}

.opinion {
  position: relative;
  display: grid;
  margin-bottom: 2rem;
  padding: 1.5rem;
  text-wrap: pretty;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

.opinion small {
  margin-top: 1rem;
  color: rgb(154, 154, 154);
}

/* Las comillas decorativas van como elementos reales (.opinionQuote), no
   como ::before/::after: .opinion lleva la clase "borderGradient" (ver
   más arriba), que YA usa ::before para su borde en degradado — poner
   aquí también un ::before chocaría con el suyo (un mismo elemento solo
   puede tener un ::before) y el mask-composite:exclude de .borderGradient
   se comía casi toda la imagen, dejando solo un hilo de 1px visible */
.opinionQuote {
  position: absolute;
  width: 40px;
  height: 40px;
  /* border: solid 1px var(--color2); */
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #000;
  background-size: 50%;
}

.opinionQuote.top {
  top: -1rem;
  left: -1rem;
  background-image: url("../img/blockquote1.webp");
}

.opinionQuote.bottom {
  bottom: -1rem;
  right: -1rem;
  background-image: url("../img/blockquote2.webp");
}

.zonaRSSicon {
  max-width: 200px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 auto 2rem auto;
}

.zonaRSSicon a {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color1);
  transition: all 0.3s ease;
}

.zonaRSSicon a:hover,
.zonaRSSicon a:active {
  transform: scale(1.5);
}

.zonaRSSicon a::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 46px;
  height: 46px;
  padding: 4px;
  border: dashed 1px var(--color2);
  border-radius: 50%;
  z-index: 1;
}

.zonaRSSicon img {
  width: 22px;
  aspect-ratio: 1;
}

.faq {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq strong {
  display: block;
}

.faq li {
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

footer {
  display: grid;
  gap: 1rem;
  justify-content: center;
  margin: 2rem;
  text-align: center;
  margin-bottom: 8rem;
  margin-bottom: 5rem;
}

footer .legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

footer .legal img {
  height: 32px;
  margin: 0.5rem;
}

/* Estilos cuando el botón se vuelve fijo */
.cta.ctaFixed {
  position: fixed;
  bottom: 20px;
  left: 5%;
  right: 5%;
  width: 90%;
  max-width: 450px;
  margin: 0 auto;
  z-index: 9999;
  /* Animación de subida */
  animation: ctaSlideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@media (min-width: 700px) {
  .intro {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0rem;
    align-content: center;
  }
  .intro .text {
    margin-top: 0;
  }
  .intro .text h1 {
    text-align: left;
    padding-top: 3rem;
    font-size: 3rem;
    order: 1;
  }
  .intro .text .contVideo {
    order: 0;
  }
  .contBunnyVideo {
    margin-top: 0rem;
    order: 2;
  }
  .bunnyVideo {
    position: relative;
    height: 90%;
    padding-top: 56.25%;
    overflow: hidden;
  }
  .intro .img {
    width: 100%;
    justify-content: right;
  }
  .intro .img img {
    display: flex;
    max-width: none;
    width: calc(100% + 4rem);
    margin-left: -10rem;
    z-index: -1;
  }
  .itemBox {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 0rem;
  }
  .servicios {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  .servItem {
    width: 32%;
  }
  .servItem .zonaTxt {
    text-wrap: pretty;
    margin: -5rem 4px 0 4px;
  }
  .servItem .zonaBtn {
    margin: -2rem 10px 0 10px;
  }
  .servItemV2 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    direction: rtl;
    width: 100%;
  }
  .servItemV2 .zonaTxt {
    align-items: center;
    justify-content: center;
    direction: ltr;
    text-wrap: pretty;
    margin: 0rem -1rem 0 4px;
    padding: 2rem 2rem 2rem 1rem;
    z-index: -1;
  }
  .servItemV2 .zonaBtn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: -3rem 10px 0 10px;
  }
  .opiniones .prev {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
  }
  .opiniones .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
  .zonaRSSicon {
    max-width: 100%;
  }
}
.animBounceFX {
  animation: bounceFX 1.5s ease-in-out infinite;
}

.animJumpFX {
  animation: jump 0.6s ease-in-out infinite;
}

.animBounce {
  animation: bounce 3s infinite;
}

.animBounce2 {
  animation: bounce2 2s infinite;
}

/* ===================================================================
   Login page
   =================================================================== */
body.loginPage {
  background: var(--bg-dark);
}

/* login-access-the-content.html: mismo .loginTitle que el resto de
   páginas de login, aquí un pelín más pequeño (22px, no 24px) porque el
   texto es más largo y así respeta el diseño de Figma */
body.loginAccessPage .loginTitle {
  font-size: 1.375rem;
}

main:has(.loginWrap) {
  padding: 0;
}

.loginWrap {
  width: 100%;
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
}

.loginLogo {
  display: flex;
  justify-content: center;
}

.loginLogo img {
  width: 220px;
  height: auto;
}

.loginHeading {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.loginHeading .loginTitle {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

.loginHeading p {
  margin: 0;
  color: #9a9a9a;
  font-size: 0.875rem;
  line-height: 1.4;
}

.loginInvalid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg, #1a142e);
  border: solid 1px var(--input-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  border-color: var(--color1, #830fba);
  border-color: var(--color2, #d0ac3b);
}

.loginFields {
  width: 100%;
  display: grid;
  gap: 1.25rem;
}

.loginActions {
  width: 100%;
  display: grid;
  gap: 1rem;
}

.loginDivider {
  margin: 0;
  color: #9a9a9a;
  font-size: 0.75rem;
  text-align: center;
}

.loginNetworks {
  display: flex;
  gap: 1rem;
  flex-direction: column;
  width: 100%;
}

/* Variante en fila (login-access-the-content.html): los botones van uno
   junto a otro en vez de apilados, cada uno ocupando la mitad gracias al
   flex:1 que ya trae .btn.neutral (ver _buttons.scss) */
.loginNetworksRow {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.loginNetworksInit {
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.loginNetworksInit > .loginNetworks {
  display: flex;
  width: 100%;
  gap: 1rem;
  flex-direction: column;
}

.loginLink,
.loginFooter {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
}

.loginLink span,
.loginFooter span {
  color: #9a9a9a;
}

.loginLink a,
.loginFooter a {
  margin-left: 0.5rem;
  color: var(--color2);
  font-weight: bold;
  text-decoration: underline;
}

.loginFooter {
  margin-top: auto;
}

/* ===================================================================
   Acordeón (create-account.html)
   El open/close real (max-height) lo controla assets/js/accordion.js;
   aquí solo se define la apariencia y la transición.
   =================================================================== */
.accordion {
  width: 100%;
  display: grid;
  gap: 1.5rem;
}

/* Botón que abre/cierra el acordeón: línea — texto — línea */
.accordionTrigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.accordionLine {
  flex: 1;
  height: 1px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
}

.accordionLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  /*   color: #fff; */
  white-space: nowrap;
}

.accordionChevron {
  width: 10px;
  transition: transform 0.3s ease;
}

/* El icono gira al abrir (lo marca accordion.js con data-open="true" en .accordion) */
.accordion[data-open=true] .accordionChevron {
  transform: rotate(180deg);
}

/* Contenido colapsable: arranca en max-height:0 y accordion.js anima hasta su
   altura real (scrollHeight) al abrir, y de vuelta a 0 al cerrar */
.accordionBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.accordionBody > div {
  display: grid;
  gap: 1.5rem;
  padding-top: 0.125rem;
}

.accordionFields {
  display: grid;
  gap: 1rem;
}

/* ===================================================================
   Dashboard (dashboard.html)
   =================================================================== */
body.dashboardPage {
  background: var(--bg-dark);
}

main:has(.dashWrap) {
  padding: 0;
}

.dashWrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* padding-top: deja hueco para .appHeader y .tabsFilter, que están
     siempre en position:fixed y por tanto no ocupan espacio en el flujo
     normal (ver ambos en _app-shell.scss). Las variables las calcula
     assets/js/scroll-autohide-bar.js con las alturas reales; los
     valores de reserva son solo para el primer pintado antes de que
     corra el JS */
  padding: calc(var(--app-header-height, 80px) + var(--app-bar-height, 65px) + 1rem) 1rem 3rem 1rem;
  display: grid;
  gap: 2rem;
}

/* Tabs de filtrado: el fijado (position:fixed, centrado, auto-ocultado al
   hacer scroll) lo aporta la clase compartida .autoHideBar (ver
   _app-shell.scss y assets/js/scroll-autohide-bar.js) — aquí solo va el
   estilo propio de las tabs. En pantallas estrechas las pestañas no
   encogen (flex-shrink:0) y el contenedor scrollea en horizontal en vez
   de partir línea o desbordar la página. El filtrado real lo hace
   assets/js/dashboard-filters.js */
.tabsFilter {
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: var(--bg-dark);
  border-bottom: solid 1px var(--input-border);
}

.tabsFilter .tab {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #9a9a9a;
  white-space: nowrap;
  border: solid 1px var(--input-border);
  border-radius: 20px;
  background: var(--input-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tabsFilter .tab.active {
  color: #fff;
  font-weight: bold;
  border-color: var(--color2);
  background: var(--color1);
}

/* Estados de la pestaña ACTIVA: mismo color base que .btn (var(--color1) de
   fondo, var(--color2) de borde — ver _buttons.scss), así que reutiliza sus
   mismas variables de estado sin necesidad de calcular nada nuevo */
.tabsFilter .tab.active:not(.disabled):not(:disabled):hover {
  border-color: var(--color2);
  background: var(--color1-hover);
  box-shadow: 0 0 6.6px 2px rgba(131, 15, 186, 0.6);
}

.tabsFilter .tab.active:not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color1-focus);
  border-width: 1.5px;
  background: var(--color1);
  box-shadow: 0 0 12px 0 rgba(131, 15, 186, 0.35);
  outline: none;
}

.tabsFilter .tab.active:not(.disabled):not(:disabled):active {
  border-color: var(--color2);
  background: var(--color1-active);
  box-shadow: none;
}

/* Estados de las pestañas INACTIVAS: mismo color base que .btn.neutral
   (var(--input-bg) de fondo, var(--input-border) de borde) */
.tabsFilter .tab:not(.active):not(.disabled):not(:disabled):hover {
  border-color: var(--input-border);
  background: var(--color-neutral-hover);
}

.tabsFilter .tab:not(.active):not(.disabled):not(:disabled):focus-visible {
  border-color: var(--color-neutral-focus);
  border-width: 1.5px;
  background: var(--input-bg);
  box-shadow: 0 0 12px 0 rgba(116, 95, 185, 0.35);
  outline: none;
}

.tabsFilter .tab:not(.active):not(.disabled):not(:disabled):active {
  border-color: var(--input-border);
  background: var(--color-neutral-active);
}

/* Deshabilitada: mismo tratamiento compartido que .btn.disabled */
.tabsFilter .tab.disabled,
.tabsFilter .tab:disabled {
  border: none;
  background: var(--disabled-bg);
  color: var(--disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.dashContent {
  display: grid;
  gap: 2rem;
}

.dashSection {
  display: grid;
  gap: 1.125rem;
}

/* Oculta las secciones que el filtro de arriba no ha seleccionado
   (ver assets/js/dashboard-filters.js) */
.dashSection[hidden] {
  display: none;
}

.dashSectionTitle {
  margin: 0;
  padding-bottom: 0.5rem;
  font-size: 1.25rem;
  text-align: left;
  text-transform: uppercase;
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
  color: #fff;
}

.dashCard {
  display: grid;
  border-radius: 1rem;
  background: var(--input-bg);
  overflow: hidden;
}

/* border completo (no solo border-color): la tarjeta "muted" sin
   .borderGradient (dashCardInactive) necesita su propio ancho/estilo de
   borde, ya no lo hereda de .dashCard base */
.dashCard.dashCardMuted {
  border: solid 1px var(--input-border);
}

.dashCard.dashCardInactive {
  opacity: 0.6;
}

.dashCard .dashCardImg {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.dashCard .dashCardBody {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
}

.dashCard .dashCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dashCard .dashCardBadge {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: bold;
  border-radius: 4px;
  white-space: nowrap;
}

.dashCardBadge.badgeActive {
  color: #0f8;
  background: rgba(28, 170, 28, 0.12);
}

.dashCardBadge.badgePurple {
  color: #fff;
  background: var(--color1);
}

.dashCardBadge.badgeGreen {
  color: #fff;
  background: #1caa1c;
}

.dashCardBadge.badgeExpired {
  color: var(--color-error);
  background: rgba(229, 72, 72, 0.12);
}

.dashCard .dashCardDate {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color2);
  white-space: nowrap;
}

.dashCard .dashCardDate.dateExpired {
  color: var(--color-error);
}

.dashCard .dashCardPrice {
  font-family: "Racing Sans One", sans-serif;
  font-size: 1.125rem;
  color: var(--color2);
  white-space: nowrap;
}

.dashCard h3 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.dashCard p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #9a9a9a;
}

/* ===================================================================
   Perfil (profile.html, profile-edit.html, profile-change-password.html)
   =================================================================== */
body.profilePage {
  background: var(--bg-dark);
}

main:has(.profileWrap) {
  padding: 0;
}

.profileWrap {
  width: 100%;
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
}

.profileHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: solid 1px var(--input-border);
}

.profileHeader h1 {
  margin: 0;
  color: var(--color2);
  font-size: 1.25rem;
}

/* Botón "volver" (profile-edit.html) */
.profileBack {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.profileBack img {
  width: 16px;
  height: 16px;
}

.profileCard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: solid 1px var(--input-border);
  border-radius: 1rem;
  background: var(--card-bg);
}

.profileAvatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px var(--color2);
  border-radius: 50%;
  background: var(--color1);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

.profileInfo {
  display: flex;
  flex-direction: column;
  /*  gap: 0.25rem; */
}

.profileName {
  margin: 0;
  color: #fff;
  font-size: 1.125rem;
  font-weight: bold;
}

.profilePhone,
.profileEmail {
  margin: 0;
  color: #9a9a9a;
  font-size: 0.75rem;
}

.profileMenu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profileMenuItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: solid 1px var(--input-border);
  border-radius: 0.75rem;
  background: var(--card-bg);
  color: #fff;
}

.profileMenuLeft {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profileMenuIcon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.profileMenuLabel {
  font-size: 0.875rem;
  font-weight: 500;
}

.profileMenuArrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

/* Formulario (profile-edit.html) */
.profileEditForm {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.profileEditFields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Agrupa un .field con el elemento que depende de él (p. ej. el medidor
   de seguridad bajo "Nueva contraseña"), con menos separación entre
   ambos que la que hay entre campos distintos */
.profileEditFieldGroup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* Requisitos de la nueva contraseña (profile-change-password.html) */
.passwordRequirements {
  width: 100%;
  padding: 0.75rem;
  border: solid 1px var(--input-border);
  border-radius: 0.5rem;
  background: var(--card-bg);
  color: #9a9a9a;
  font-size: 0.75rem;
  line-height: 1.4;
}

.passwordRequirements p {
  margin: 0 0 0.25rem 0;
}

.passwordRequirements ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.passwordRequirements li::before {
  content: "• ";
}

/* Medidor de seguridad de la contraseña: el estado se controla con una
   clase (.weak / .medium / .strong) en el contenedor .passwordStrength,
   que cambia a la vez el texto, el color y cuántas barras se rellenan. */
.passwordStrength {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.passwordStrengthLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
}

.passwordStrengthLabel span {
  color: #9a9a9a;
}

.passwordStrengthValue {
  text-transform: uppercase;
}

.passwordStrengthBars {
  display: flex;
  gap: 4px;
  height: 6px;
}

.passwordStrengthBars .bar {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: var(--input-border);
}

.passwordStrength.weak .passwordStrengthValue {
  color: var(--color-error);
}

.passwordStrength.weak .passwordStrengthValue::after {
  content: "Débil";
}

.passwordStrength.weak .passwordStrengthBars .bar:nth-child(1) {
  background: var(--color-error);
}

.passwordStrength.medium .passwordStrengthValue {
  color: var(--color-warning);
}

.passwordStrength.medium .passwordStrengthValue::after {
  content: "Medio";
}

.passwordStrength.medium .passwordStrengthBars .bar:nth-child(1),
.passwordStrength.medium .passwordStrengthBars .bar:nth-child(2) {
  background: var(--color-warning);
}

.passwordStrength.strong .passwordStrengthValue {
  color: var(--color-success);
}

.passwordStrength.strong .passwordStrengthValue::after {
  content: "Fuerte";
}

.passwordStrength.strong .passwordStrengthBars .bar {
  background: var(--color-success);
}

/* ===================================================================
   Timeline (timeline.html)

   Mismo patrón que dashboard.html: .appHeader y .timelineSearchBar
   siempre fijos (ver _app-shell.scss), la página scrollea de forma
   nativa y .timeline reserva en su padding-top el hueco de ambos.
   =================================================================== */
body.timelinePage {
  background: var(--bg-dark);
}

main:has(.timeline) {
  padding: 0;
}

/* Scrollbar fina y discreta para toda la página (es la que scrollea,
   ya no .timeline): gris translúcido en reposo, dorada al pasar el
   ratón. Firefox (scrollbar-width/-color) + Chrome/Edge/Safari (::-webkit-*) */
html:has(body.timelinePage) {
  scrollbar-width: thin;
  scrollbar-color: var(--input-border) transparent;
}

html:has(body.timelinePage)::-webkit-scrollbar {
  width: 6px;
}

html:has(body.timelinePage)::-webkit-scrollbar-track {
  background: transparent;
}

html:has(body.timelinePage)::-webkit-scrollbar-thumb {
  background-color: var(--input-border);
  border-radius: 999px;
}

html:has(body.timelinePage):hover::-webkit-scrollbar-thumb {
  background-color: var(--color2);
}

/* Buscador: el fijado (position:fixed, centrado, auto-ocultado al hacer
   scroll) lo aporta la clase compartida .autoHideBar (ver _app-shell.scss
   y assets/js/scroll-autohide-bar.js) — aquí solo va el estilo propio */
.timelineSearchBar {
  padding: 1rem;
  background: var(--bg-dark);
  border-bottom: solid 1px var(--input-border);
}

.timeline {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* padding-top: deja hueco para .appHeader y .timelineSearchBar, que
     están siempre en position:fixed y por tanto no ocupan espacio en el
     flujo normal (ver ambos en _app-shell.scss). Las variables las
     calcula assets/js/scroll-autohide-bar.js con las alturas reales; los
     valores de reserva son solo para el primer pintado antes de que
     corra el JS */
  padding: calc(var(--app-header-height, 80px) + var(--app-bar-height, 65px) + 1rem) 1rem 3rem 1rem;
  display: grid;
  gap: 2rem;
}

.timelineGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.timelineDate {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: #828790;
  color: #000;
  font-size: 0.625rem;
  font-weight: bold;
  text-transform: uppercase;
}

.timelineCards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.timelineCard {
  display: flex;
  flex-direction: column;
  border: solid 1px var(--color2);
  border-radius: 1rem;
  background: var(--card-bg);
  overflow: hidden;
}

.timelineCardMedia {
  display: block;
  width: 100%;
  /*   height: 180px; */
  object-fit: cover;
  background: #000;
}

.timelineCardBody {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
}

.timelineCardHead {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.timelineCardText {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #9a9a9a;
  font-size: 0.6875rem;
  line-height: 1.4;
}

.timelineCardText a {
  color: #fff;
  text-decoration: underline;
}

.timelineCardTime {
  flex-shrink: 0;
  color: #9a9a9a;
  font-size: 0.75rem;
}

.timelineCardLegal {
  margin: 0;
  padding-top: 0.5rem;
  color: #9a9a9a;
  font-size: 0.625rem;
  line-height: 1.4;
  text-align: center;
}

/* ===================================================================
   Métodos de pago (payment-methods.html)
   =================================================================== */
body.paymentPage {
  background: var(--bg-dark);
}

/* En esta página los títulos (h1-h4, "Racing Sans One" por defecto en
   settings/_reset.scss) y el precio (.dashCardPrice, reutilizada de
   _dashboard.scss) van en Inter en vez de Racing Sans One */
body.paymentPage h1,
body.paymentPage h2,
body.paymentPage h3,
body.paymentPage h4 {
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
  font-weight: 600;
}

body.paymentPage p {
  line-height: normal;
}

main:has(.paymentWrap) {
  padding: 0;
}

.paymentWrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* padding-top: deja hueco para .appHeader, que es fixed y por tanto no
     ocupa espacio en el flujo normal (ver _app-shell.scss). Aquí no hace
     falta la variable --app-header-height que calcula
     assets/js/scroll-autohide-bar.js por JS: esta página no lleva ninguna
     .autoHideBar debajo del header, así que ese script ni se carga, y el
     valor de reserva (80px) ya es exacto porque el propio logo (48px +
     1rem de padding arriba y abajo) es quien fija la altura del header
     en todas las páginas que lo usan */
  padding: calc(80px + 1.5rem) 1rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tarjeta de la suscripción: reutiliza .dashCard/.dashCardBody/.dashCardMeta/
   .dashCardBadge.badgeActive/.dashCardPrice (ver _dashboard.scss), que ya
   son visualmente idénticas salvo el fondo (var(--card-bg) aquí en vez de
   var(--input-bg)) */
.paymentCard {
  background: var(--card-bg);
}

/* Envoltorio de la tarjeta de suscripción: solo existe para que .boxTimer
   (ver más abajo) pueda asomar por encima del borde de la tarjeta sin que
   se recorte — .dashCard tiene overflow:hidden (lo necesita para redondear
   .dashCardImg en dashboard.html), así que el chip no puede ir DENTRO de
   la tarjeta y tiene que colgar de un contenedor propio sin ese recorte */
.paymentCardWrap {
  position: relative;
  width: 100%;
}

/* Chip con cuenta atrás, en la esquina superior derecha de la tarjeta,
   asomando por encima de su borde (top negativo) */
.boxTimer {
  position: absolute;
  top: -11px;
  right: 17px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--color1);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.boxTimer img {
  width: 8px;
  height: 10px;
}

.paymentPrice {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.paymentPriceOld {
  margin: 0;
  color: var(--color-error);
  font-size: 0.625rem;
  text-decoration: line-through;
}

.paymentCardExtra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
}

.paymentCardSub {
  margin: 0;
  font-size: 0.75rem;
  color: #fff;
}

.paymentCardSub strong {
  color: var(--color1);
  font-weight: normal;
}

.paymentCardCoupon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.625rem;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.paymentCardCoupon img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* "¿Tienes un cupón de descuento?": misma tarjeta (borde/fondo) que el
   resto, con un desplegable que usa el mismo mecanismo que .accordion
   (max-height animado por assets/js/accordion.js), solo que con su
   propio disparador visual (tarjeta con texto + chevron, no la línea de
   .accordionTrigger que usa login-create-account.html) */
.paymentCoupon {
  width: 100%;
  border-radius: 1rem;
  background: var(--card-bg);
  overflow: hidden;
}

.paymentCouponTrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem;
  border: none;
  background: none;
  color: #fff;
  font-size: 0.875rem;
  font-weight: bold;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.paymentCouponChevron {
  flex-shrink: 0;
  width: 6px;
  transition: transform 0.3s ease;
}

/* Gira hacia abajo al abrirse (lo marca accordion.js con data-open="true") */
.paymentCoupon[data-open=true] .paymentCouponChevron {
  transform: rotate(-90deg);
}

/* .accordionBody > .paymentCouponBody (no ".paymentCouponBody" a secas):
   _login.scss ya trae ".accordionBody > div { display: grid }" para el
   acordeón de login-create-account.html, con más especificidad que una
   sola clase — hay que igualarla para que gane el display:flex de aquí */
.accordionBody > .paymentCouponBody {
  display: flex;
  gap: 0.75rem;
  padding: 0 0.875rem 0.875rem 0.875rem;
}

.paymentCouponBody .field {
  flex: 1;
}

.paymentCouponBody .btn {
  flex: none;
  padding: 0.8rem 1.25rem;
  align-self: flex-end;
}

/* Tarjeta "Métodos de pago" */
.paymentMethodsCard {
  width: 100%;
  padding: 0.875rem;
  border-radius: 1rem;
  background: var(--card-bg);
}

.paymentMethodsTitle {
  margin: 0 0 1rem 0;
  text-align: left;
  font-family: "Inter";
  font-size: 0.875rem;
  color: #fff;
}

/* ===================================================================
   Grid de métodos de pago (Tarjeta/PIX/Crypto arriba, y las redes
   cripto dentro del desplegable) + estado hover/seleccionado.

   Copiado tal cual de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/periodo-gratuidad_Step2.html
   (grid responsive, filter:grayscale(100%) de base en las imágenes, y el
   overlay ::after con mix-blend-mode:color al pasar el ratón o estar
   seleccionado), con dos cambios respecto al original:
     - Su azul de marca (#3A29F5) es aquí var(--color2) (dorado).
     - Ahí la selección la hacía un <input type="radio"> + :checked; aquí
       no hay ningún input — el estado lo pone/quita la clase "active"
       vía JS (ver assets/js/payment-method-select.js), sobre un <button>.
   =================================================================== */
.paymentMethods,
.paymentCryptoNetworkBody .paymentMethods {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (min-width: 375px) {
  .paymentMethods,
  .paymentCryptoNetworkBody .paymentMethods {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}
@media (min-width: 550px) {
  .paymentMethods,
  .paymentCryptoNetworkBody .paymentMethods {
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
  }
}
.paymentMethods li {
  box-sizing: border-box;
  display: grid;
  cursor: pointer;
}

.paymentMethod {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.paymentMethod:hover .optionPay,
.paymentMethod:hover p {
  color: var(--color2);
  border-color: var(--color2);
}

.paymentMethod:hover .optionPay::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: var(--color2);
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: darken;
  opacity: 1;
}

.paymentMethod:hover .optionPay img {
  opacity: 1;
}

.paymentMethod .optionPay {
  border: 1px solid #828790;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 80/50;
  position: relative;
  width: 100%;
  color: #828790;
  background: var(--input-bg);
  overflow: hidden;
}

.paymentMethod .optionPay img {
  filter: grayscale(100%);
  width: 100%;
  max-width: 80%;
  height: 100%;
  max-height: 70%;
  opacity: 0.7;
  object-fit: contain;
  object-position: center;
  position: relative;
}

/* Para imágenes "genéricas" (no un logo de marca con su propio espacio en
   blanco alrededor): ocupan todo .optionPay en vez de quedar centradas al
   80%/70% con hueco. Es el caso de los pago-*.png que usa esta página
   (los mismos del sitio de referencia, que ya los marca así) */
.paymentMethod .optionPay img.coverFull {
  max-width: 100% !important;
  max-height: unset !important;
  object-fit: cover !important;
}

.paymentMethod p {
  margin: 0;
  text-align: center;
  font-size: 0.625rem;
  color: #9a9a9a;
  letter-spacing: 0.2px;
}

/* Seleccionado: mismo efecto visual que :hover, pero fijo. Lo pone/quita
   assets/js/payment-method-select.js */
.paymentMethod.active .optionPay {
  border-color: var(--color2);
}

.paymentMethod.active .optionPay::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color2);
  mix-blend-mode: darken;
  opacity: 1;
}

.paymentMethod.active .optionPay img {
  opacity: 1;
}

.paymentMethod.active p {
  color: var(--color2);
}

/* Desplegable de redes cripto (Ethereum / BSC / Red TRON), al pulsar
   "Crypto" en la grid de arriba. Mismo mecanismo que .paymentCoupon
   (accordion.js + max-height animado, ver .accordionBody en _login.scss);
   ".accordionBody > .paymentCryptoNetworkBody" (no la clase a secas)
   porque _login.scss ya trae ".accordionBody > div { display:grid }" con
   más especificidad que una sola clase */
.accordionBody > .paymentCryptoNetworkBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.875rem;
}

.paymentCryptoGroup {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.paymentCryptoGroupTitle {
  margin: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
}

.paymentActions {
  margin-top: 0.5rem;
}

/* ===================================================================
   Modal "Resumen de compra": aparece al pulsar "Comprar ahora" con
   Tarjeta seleccionada (ver assets/js/payment-modal.js).

   El mecanismo y el posicionado responsive están copiados de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/periodo-gratuidad_Step2.html
   (su ".dialogDef"/"#dialogTarj"): <dialog> nativo (showModal()/close()),
   en móvil pegado abajo (bottom:10px, margin:0 10px, border-radius:12px)
   deslizando desde fuera de la pantalla, y centrado en pantalla a partir
   de 600px. El contenido y el estilo del interior son los del diseño de
   Figma.
   =================================================================== */
.paymentModal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.paymentModal {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0 10px;
  max-width: 600px;
  max-height: 89vh;
  padding: 14px 18px 31px 18px;
  border: 1px solid var(--color2);
  border-radius: 12px;
  background: var(--bg-dark);
  overflow-y: auto;
  transform: translateY(150%);
  transition: transform 0.25s ease, opacity 0.25s ease, overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete;
  width: calc(100% - 20px);
}

.paymentModal[open] {
  transform: translateY(0);
}

@starting-style {
  .paymentModal[open] {
    transform: translateY(150%);
  }
}
/* Escritorio: centrado en pantalla en vez de pegado abajo, con un simple
   fundido en vez del deslizamiento (igual que el sitio de referencia) */
@media (min-width: 600px) {
  .paymentModal {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    max-width: 430px;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .paymentModal[open] {
    transform: translate(-50%, -50%);
  }
  @starting-style {
    .paymentModal[open] {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
  }
}
.paymentModalInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
  width: 100%;
}

.paymentModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.paymentModalHead h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: bold;
  color: #d1d1d1;
  text-align: left;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
}

.paymentModalHead h2 img {
  width: 23px;
  height: auto;
}

.paymentModalClose {
  flex-shrink: 0;
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.paymentModalClose img {
  width: 26px;
  height: 26px;
}

.paymentModalSummary {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
}

.paymentModalRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.paymentModalRow p {
  margin: 0;
  font-size: 0.75rem;
  color: #d1d1d1;
}

.paymentModalRow p.paymentModalServiceName {
  font-size: 0.875rem;
  font-weight: bold;
}

.paymentModalRow p.paymentModalService {
  color: var(--color1);
}

.paymentModalTotal p {
  font-weight: bold;
}

.paymentModalTotal p.paymentModalTotalValue {
  font-size: 0.875rem;
}

.paymentModalRow p.paymentModalMethodValue {
  font-weight: 600;
}

.paymentModalDivider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--input-border);
}

.paymentModalEmail {
  width: 100%;
  padding: 0.875rem;
  border-radius: 1rem;
  background: var(--card-bg);
}

.paymentModalEmail p {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.15px;
}
.paymentModalEmail p span {
  font-weight: 100;
  color: #9a9a9a;
}

.paymentModalEmailBox {
  padding: 14px 16px;
  border: solid 1px var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: #fff;
  font-size: 0.875rem;
}

/* Campos del modal PIX para usuario registrado (payment-methods-registered.html):
   CPF/nombre/apellido ya conocidos, en campos disabled — mismo aspecto que
   .field/.box (ver _forms.scss), pero SIN el opacity:0.24 ni el dorado
   apagado que esa hoja aplica por defecto a los inputs disabled: aquí, a
   diferencia de un campo realmente inactivo, tienen que leerse igual de
   claros que uno activo (así lo pide el diseño de Figma) */
.paymentModalRegisteredFields {
  display: flex;
  flex-direction: column;
  gap: 19px;
  width: 100%;
}

.paymentModalRegisteredFields .field input:disabled {
  opacity: 1;
}

.paymentModalRegisteredFields .field:has(input:disabled) label {
  color: var(--color2);
}

.paymentModalRegisteredRow {
  display: flex;
  gap: 19px;
  width: 100%;
}

.paymentModalRegisteredRow .field {
  flex: 1;
  min-width: 0;
}

.paymentModalLegal {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 100;
  line-height: 1.4;
  color: #d1d1d1;
}

.paymentModalLegal a {
  color: var(--color1);
}

/* ===================================================================
   Pagar con Crypto (buy-crypto.html)

   La tarjeta de la suscripción reutiliza .dashCard/.paymentCard/
   .borderGradient y .paymentPrice/.paymentPriceOld (ver
   _payment-methods.scss) tal cual: aquí el precio nuevo va en cripto
   (0.0034 ETH) en vez de en €/$, así que tiene que volver a Racing Sans
   One (estilo por defecto de .dashCardPrice) — .paymentCard .dashCardPrice
   en _payment-methods.scss lo fuerza a Inter para el precio en € de
   payment-methods.html, y esa regla no está limitada a body.paymentPage.
   =================================================================== */
body.buyCryptoPage {
  background: var(--bg-dark);
}

body.buyCryptoPage .dashCardPrice {
  font-family: "Racing Sans One", sans-serif;
}

main:has(.buyCryptoWrap) {
  padding: 0;
}

.buyCryptoWrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(80px + 1.5rem) 1rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Aviso "Recuerda que la operación terminará..." */
.buyCryptoReminder {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--color1);
  box-shadow: 0 1px 4px 0 rgba(209, 209, 209, 0.25);
}

.buyCryptoReminder p {
  margin: 0;
  font-size: 0.75rem;
  line-height: normal;
  color: #fff;
}

/* Tarjetas "Realizar el pago" / "Importe en SEPOLIA ETH": mismo fondo y
   borde dorado que .paymentCard, con su propio padding/gap interno */
.buyCryptoCard {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buyCryptoCardTitle {
  margin: 0;
  text-align: left;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
  font-size: 0.875rem;
  font-weight: bold;
  letter-spacing: 0.28px;
  color: #fff;
}

.buyCryptoInfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.buyCryptoInfo p,
.buyCryptoAmountLabel {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.24px;
  color: #fff;
}

.buyCryptoHighlight {
  color: var(--color1);
}

/* Fila de la etiqueta + feedback "COPIADO" (ver .textCopy más abajo) */
.buyCryptoCopyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.textCopy {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.46px;
  color: var(--color2);
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 3px;
  right: 6px;
  line-height: 0.8;
}

.textCopy.visible {
  opacity: 1;
}

/* ===================================================================
   .labelCopy: campo de solo lectura (dirección / importe) + icono para
   copiar al portapapeles. Funcionalidad clonada de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/2.1-crypto-transaccion.html
   (misma estructura .labelCopy > input + .imgCopy, ver assets/js/buy-crypto.js),
   con el mismo aspecto que .field .box (ver _forms.scss).

   .imgCopy no lleva <img>: el icono se pinta como máscara CSS sobre
   background-color (misma técnica que .borderGradient en _index.scss),
   así puede pasar de gris a dorado (clase "is-copied") sin depender de
   un segundo asset.
   =================================================================== */
.labelCopy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: solid 1px var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
}

.labelCopy.code input[value] {
  overflow-wrap: anywhere; /* Rompe la cadena en cualquier carácter si no cabe */
  word-break: break-word;
}

.labelCopy input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: text;
}

.labelCopy .imgCopy {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 12px;
  padding: 0;
  border: none;
  background-color: #828790;
  -webkit-mask: url("../img/icons/icon-copy.svg") center/contain no-repeat;
  mask: url("../img/icons/icon-copy.svg") center/contain no-repeat;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: visible;
}

.labelCopy .imgCopy:hover {
  background-color: var(--color2);
}

.labelCopy .imgCopy.is-copied {
  background-color: var(--color2);
  transform: scale(1.15);
}

/* Botón "Generar código QR": abre #dialogQR (ver assets/js/buy-crypto.js) */
.btnQR {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  color: #828790;
  font-size: 0.75rem;
  letter-spacing: 0.24px;
  cursor: pointer;
}

.btnQR img {
  width: 12px;
  height: 12px;
}

.buyCryptoDisclaimer {
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: #828790;
}

/* ===================================================================
   Modal "Escanea tu código QR" (#dialogQR): reutiliza el mismo <dialog>
   (.paymentModal/.paymentModalInner/.paymentModalHead, ver
   _payment-methods.scss) que el resumen de compra, con su propio
   contenido (imagen QR + dirección en scroll horizontal).
   =================================================================== */
.buyCryptoQRBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.buyCryptoQRImage {
  width: 180px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.buyCryptoQRImage img {
  display: block;
  width: 100%;
  height: auto;
}

.buyCryptoQRAddress {
  width: 100%;
  margin: 0;
  padding: 0.625rem;
  overflow-x: auto;
  white-space: nowrap;
  border: solid 1px var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: #9a9a9a;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-align: center;
  /* Scroll invisible: sigue siendo desplazable (overflow-x: auto de
     arriba), solo se oculta la barra en sí */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.buyCryptoQRAddress::-webkit-scrollbar {
  display: none;
}

/* ===================================================================
   Resultado del pago (purchase-completed.html / payment-declined.html)
   =================================================================== */
body.paymentResolutionPage {
  background: var(--bg-dark);
}

main:has(.paymentResolutionWrap) {
  padding: 0;
}

.paymentResolutionWrap {
  width: 100%;
  max-width: 600px;
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  padding: calc(80px + 1.5rem) 1.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.paymentResolutionTop {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
}

.paymentResolutionStatus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

/* Círculo con brillo alrededor del icono de éxito (check verde). El
   color/estado (verde) es el mismo que .dashCardBadge.badgeActive (ver
   _dashboard.scss), aquí sin variable propia porque solo se usa aquí y allí */
.paymentResolutionIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: solid 3px #0f8;
  border-radius: 50%;
  background: rgba(28, 170, 28, 0.12);
  box-shadow: 0 0 15px 0 #0f8;
}

.paymentResolutionIcon img {
  width: 32px;
  height: 32px;
}

/* Variante de error (payment-declined.html): mismo círculo con brillo,
   en rojo (mismo rojo que var(--color-error)/.dashCardBadge.badgeExpired,
   ver _dashboard.scss) y con el icono más pequeño (28px, no 32px) */
.paymentResolutionIcon.iconError {
  border-color: var(--color-error);
  background: rgba(229, 72, 72, 0.12);
  box-shadow: 0 0 15px 0 var(--color-error);
}

.paymentResolutionIcon.iconError img {
  width: 28px;
  height: 28px;
}

/* Título solo (sin subtítulo debajo, a diferencia de .paymentResolutionMessage
   h1+p): payment-declined.html no tiene el párrafo corto, va directo al
   bloque de texto largo (.paymentResolutionBody) */
.paymentResolutionTitle {
  margin: 0;
  font-family: "Racing Sans One", sans-serif;
  font-size: 1.625rem;
  text-align: center;
  color: var(--color-error);
}

/* Texto explicativo + lista de alternativas (payment-declined.html) */
.paymentResolutionBody {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: #fff;
  /*   text-align: center; */
}

.paymentResolutionBody p {
  margin: 0 0 1rem 0;
}

.paymentResolutionBody ul {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.paymentResolutionBody li:last-child,
.paymentResolutionBody p:last-child {
  margin-bottom: 0;
}

.paymentResolutionMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.paymentResolutionMessage h1 {
  margin: 0;
  font-family: "Racing Sans One", sans-serif;
  font-size: 1.625rem;
  color: #0f8;
}

.paymentResolutionMessage p {
  margin: 0;
  font-size: 0.875rem;
  color: #9a9a9a;
}

/* Tarjeta "Resumen del pedido": la imagen de cabecera se solapa 12px con
   el panel de contenido (margin-bottom negativo), que va por encima con
   sus propias esquinas redondeadas — igual que en el diseño de Figma */
.paymentResolutionCard {
  width: 100%;
  border-radius: 1rem;
  background: var(--card-bg);
  overflow: hidden;
}

.paymentResolutionBanner {
  display: block;
  width: 100%;
  height: 178px;
  margin-bottom: -12px;
  object-fit: cover;
}

.paymentResolutionCardBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: solid 1px var(--input-border);
  border-radius: 1rem;
  background: var(--card-bg);
}

.paymentResolutionCardLabel {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--color2);
}

.paymentResolutionCardRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.paymentResolutionCardRow p {
  margin: 0;
  font-size: 0.875rem;
}

.paymentResolutionProduct {
  font-weight: 600;
  color: #fff;
}

.paymentResolutionAmount {
  font-weight: bold;
  color: #0f8;
}

.paymentResolutionCardRow--meta p {
  font-size: 0.75rem;
}

.paymentResolutionCardRow--meta p:first-child {
  color: #9a9a9a;
}

.paymentResolutionCardRow--meta p:last-child {
  color: #fff;
}

.paymentResolutionDivider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--input-border);
}

/* "Volver al Catálogo": enlace de texto, sin fondo/borde de .btn.
   :link/:visited (no solo la clase) para ganarle en especificidad al
   a:link/a:visited de settings/_reset.scss */
.paymentResolutionBack,
.paymentResolutionBack:link,
.paymentResolutionBack:visited {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  color: var(--color2);
  font-size: 0.875rem;
  font-weight: bold;
}

.paymentResolutionBack:hover,
.paymentResolutionBack:active {
  color: var(--color2);
  text-decoration: underline;
}

/* ===================================================================
   Vídeo de la lección (dashboard-video.html).

   Réplica funcional (vídeo embebido, acordeón de módulos, desplegable
   de recursos, "Marcar como completada") de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/vv-1.html,
   con el diseño visual del Figma del proyecto. El acordeón de cada
   módulo reutiliza el mismo mecanismo [data-accordion] que el resto del
   sitio (ver assets/js/accordion.js), en vez del JS a medida del
   original.
   =================================================================== */
body.videoPage {
  background: var(--bg-dark);
}

/* max-width:none pisa el max-width:800px de <main> en settings/_reset.scss,
   que si no recortaría el layout de dos columnas de .videoWrap en desktop
   (990px) al ancho de <main> */
main:has(.videoWrap) {
  max-width: none;
  padding: 0;
}

.videoWrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(80px + 1rem) 1rem 3rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1012px) {
  .videoWrap {
    padding: calc(80px + 1rem) 0 3rem 0;
  }
}

.videoMain {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Cabecera de la lección: título + duración, y "Ofrecido por" debajo */
.videoLessonHead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.videoLessonTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.videoLessonTitle {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.videoLessonTitle img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.videoLessonTitle p {
  margin: 0;
  font-family: "Racing Sans One", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.24px;
  color: var(--color2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.videoLessonTime {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.15px;
  color: #fff;
  white-space: nowrap;
}

.videoLessonTime img {
  width: 14px;
  height: 14px;
}

.videoLessonAuthor {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  letter-spacing: 0.15px;
  color: #9a9a9a;
}

.videoLessonAuthor img {
  width: 18px;
  height: 18px;
}

.videoLessonAuthor strong {
  font-weight: 400;
  color: #fff;
}

/* Reproductor: mismo mecanismo de iframe que .bunnyVideo (ver
   _index.scss), aquí con relación de aspecto fija en vez del truco de
   padding-top, y esquinas redondeadas */
.videoPlayer {
  position: relative;
  width: 100%;
  aspect-ratio: 192/108;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.videoPlayer img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #000;
}
.videoPlayer iframe,
.videoPlayer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.videoPlayer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tarjeta "Description": mismo fondo/borde dorado que el resto de
   tarjetas del sitio (.dashCard/.paymentCard con .borderGradient) */
.videoDescription {
  width: 100%;
  padding: 14px;
  /*  border: solid 1px var(--color2); */
  border-radius: 1rem;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.videoDescriptionTitle {
  margin: 0;
  text-align: left;
  font-family: "Inter", "Trebuchet MS", Verdana, Helvetica, Arial;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.21px;
  color: #fff;
}

.videoDescriptionText {
  margin: 0;
  font-size: 0.7375rem;
  line-height: 1.4;
  letter-spacing: 0.177px;
  color: #fff;
}

.videoDescriptionActions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.videoResourceBtn,
.videoMarkComplete {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.625rem;
  letter-spacing: 0.15px;
  color: #fff;
  cursor: pointer;
}

.videoResourceBtn {
  padding: 4px;
  background: var(--color1);
}

.videoResourceArrow {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* La abre/cierra assets/js/dashboard-video.js añadiendo/quitando "is-open"
   en .videoResourceDownload (ver más abajo) */
.videoResourceDownload.is-open .videoResourceArrow {
  transform: rotate(180deg);
}

.videoMarkComplete {
  padding: 4px 8px 4px 4px;
  background: none;
  border: solid 1px var(--color1);
}

.videoMarkComplete img {
  width: 18px;
  height: 18px;
}

/* Marcada como completa: la pone/quita assets/js/dashboard-video.js */
.videoMarkComplete.is-complete {
  /*  background: var(--color1); */
  background: rgba(131, 15, 186, 0.5);
}

/* ===================================================================
   Popover "Recursos de la lección": misma estructura/composición que
   ".compoDownload"/".dropResources" de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/vv-1.html
   (panel flotante bajo el botón, oculto con display:none hasta que
   assets/js/dashboard-video.js le añade "is-open" a .videoResourceDownload
   — también cierra con el aspa, con Escape o al hacer clic fuera, igual
   que el original), aquí con los colores oscuros del proyecto en vez del
   panel blanco/azul del original.
   =================================================================== */
.videoResourceDownload {
  position: relative;
}

.videoResourceDrop {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  max-width: calc(100vw - 2rem);
  border: solid 1px var(--input-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 10;
}

.videoResourceDownload.is-open .videoResourceDrop {
  display: flex;
}

.videoResourceDropHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-bottom: solid 1px var(--input-border);
}

.videoResourceDropHead p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.videoResourceDropClose {
  flex-shrink: 0;
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.videoResourceDropClose img {
  width: 18px;
  height: 18px;
}

.videoResourceList {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}

.videoResourceList li {
  border-bottom: solid 1px var(--input-border);
}

.videoResourceList li:last-child {
  border-bottom: none;
}

.videoResourceList a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.5rem;
  color: inherit;
  transition: background-color 0.15s ease;
}

.videoResourceList a:hover {
  background: var(--input-bg);
}

.videoResourceList a img {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.videoResourceFileInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.videoResourceFileName {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.videoResourceFileSize {
  margin: 0;
  font-size: 0.625rem;
  color: #9a9a9a;
}

.videoResourceDropFoot {
  padding: 0.875rem 1rem;
  border-top: solid 1px var(--input-border);
}

.videoResourceDownloadAll,
.videoResourceDownloadAll:link,
.videoResourceDownloadAll:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.625rem;
  border-radius: 5px;
  background: var(--color1);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 500;
  cursor: pointer;
}

.videoResourceDownloadAll img {
  width: 14px;
  height: 14px;
}

/* Tarjeta "Nombre del curso": progreso + acordeón de módulos */
.videoCourseCard {
  width: 100%;
  padding: 14px;
  border-radius: 1rem;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
}

/* Lista de módulos con scroll propio: mismas propiedades que
   ".contentList.contScrollV" de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/vv-1.html,
   con los colores del proyecto en vez del azul/gris del original */
.videoModuleList {
  display: flex;
  flex-direction: column;
  flex: 1;
  /*  max-height: 400px; */
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color1) var(--input-bg);
}

.videoModuleList::-webkit-scrollbar {
  width: 5px;
}

.videoModuleList::-webkit-scrollbar-track {
  background: var(--input-bg);
  border-radius: 4px;
}

.videoModuleList::-webkit-scrollbar-track:hover,
.videoModuleList::-webkit-scrollbar-track:active {
  background: var(--bg-dark);
}

.videoModuleList::-webkit-scrollbar-thumb {
  background: var(--color1);
  border-radius: 4px;
}

.videoModuleList::-webkit-scrollbar-thumb:hover {
  background: var(--color2);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.videoModuleList::-webkit-scrollbar-thumb:active {
  background: var(--color1-active, var(--color1));
}

.videoCourseHead {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 1rem;
}

.videoCourseTitle {
  margin: 0;
  font-family: "Racing Sans One", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.24px;
  color: var(--color2);
}

.videoProgressBar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #d5d5d5;
  overflow: hidden;
}

.videoProgressBarFill {
  height: 100%;
  border-radius: 999px;
  background: var(--color1);
}

.videoProgressLabel {
  margin: 0;
  text-align: right;
  font-size: 0.625rem;
  letter-spacing: 0.15px;
  color: #fff;
}

.videoModule {
  border-top: solid 1px rgba(255, 255, 255, 0.1);
}

.videoModule:first-of-type {
  border-top: none;
}

.videoModuleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.videoModuleTitle {
  margin: 0;
  font-size: 0.925rem;
  font-weight: 600;
  letter-spacing: 0.222px;
  color: #fff;
}

.videoModuleChevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.videoModule[data-open=true] .videoModuleChevron {
  transform: rotate(90deg);
}

.accordionBody > .videoModuleLessons {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-bottom: 0.75rem;
}

.videoLessonRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.videoLessonRow:hover {
  background: rgba(255, 255, 255, 0.06);
}

.videoLessonRow.is-current {
  background: rgba(0, 0, 0, 0.1);
}

.videoLessonRowName {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.videoLessonRowName img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.videoLessonRowName p {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.192px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.videoLessonRow.is-current .videoLessonRowName p {
  color: var(--color1);
}

.videoLessonRowTime {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.15px;
  color: #fff;
}

.videoLessonRowTime img {
  width: 10px;
  height: 10px;
}

/* ===================================================================
   Responsive calcado de
   https://sandbox.premiumpay.pro/premiumpay-user/comprador/vv-1.html
   (".frameCourse"/".secctionView"/".secctionList"): a partir de 768px
   pasa de una columna apilada a dos en fila invertida — la tarjeta del
   curso (".secctionList" allá, ".videoCourseCard" aquí) queda a la
   izquierda con un ancho fijo tipo barra lateral, y el vídeo +
   descripción (".secctionView"/".videoMain") ocupa el resto a la
   derecha. Aquí con flujo normal de documento (scroll de toda la
   página) en vez del panel de altura fija con scroll propio del
   original, para seguir el mismo patrón de scroll que el resto del
   sitio; la barra lateral se queda "pegada" (sticky) al hacer scroll
   como aproximación a ese comportamiento.

   Va al final del archivo a propósito: mismas selectores/especificidad
   (0,1,0) que .videoWrap/.videoMain/.videoCourseCard más arriba, así
   que tiene que ir después de todos ellos en la hoja de estilos para
   ganar siempre en la cascada.
   =================================================================== */
@media (min-width: 768px) {
  .videoWrap {
    max-width: 990px;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .videoMain {
    flex: 1;
  }
  .videoCourseCard {
    flex: none;
    width: 360px;
    position: sticky;
    top: calc(80px + 1rem);
    max-height: calc(100vh - 105px);
  }
}

/* ── Ajuste reskin: logo de las pantallas de auth enlazado a la landing raíz ──
   El <img> va envuelto en un <a href="/"> para que al pulsarlo vuelva a la
   home. .loginLogo ya es flex centrado, así que el enlace hereda el centrado;
   solo se quita la subrayada por defecto del enlace. */
.loginLogo a {
  display: inline-block;
  text-decoration: none;
}

.loginLogo a img {
  display: block;
}

/* ── Ajuste reskin: estado vacío del popover de recursos (test-curso) ── */
.videoResourceEmpty {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
/*# sourceMappingURL=styles.css.map */