/* PelisAnime Studio · Modal / panel «Cuenta» (v1.8.6)
   El panel NO tapa la cabecera: empieza justo debajo de ella (--pam-top) y, en móvil, termina sobre el menú inferior (--pam-bottom).
   Ambas medidas y el z-index las calcula pas-account-modal.js según la cabecera real. */
html.pam-lock,
html.pam-lock body { overflow: hidden !important; }

/* Con el panel abierto la cabecera toma EXACTAMENTE el color de fondo de la cuenta (sin transparencias):
   cabecera + panel se ven como un solo bloque. --pam-hdr-bg lo fija pas-account-modal.js. */
html.pam-lock #hdr.hdr,
html.pam-lock .pas-hdr { background: var(--pam-hdr-bg, #0a0a0c) !important; background-image: none !important; }
html.pam-lock #hdr.hdr .hdr-in,
html.pam-lock #hdr.hdr.scrolled .hdr-in {
  background: var(--pam-hdr-bg, #0a0a0c) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.pam-lock .pas-hdr { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }

.pam {
  --pam-bg: #0a0a0c;
  --pam-tx: #ededf0;
  --pam-line: color-mix(in srgb, var(--pam-tx) 12%, transparent);
  position: fixed;
  top: var(--pam-top, 0px);
  right: 0;
  bottom: var(--pam-bottom, 0px);
  left: 0;
  z-index: 40; /* el JS lo ajusta a «z-index de la cabecera − 1»: queda DEBAJO de la cabecera */
  overflow: hidden;
  display: block;
  visibility: hidden;
  pointer-events: none;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pam.is-open { visibility: visible; pointer-events: auto; }

.pam__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 10, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .16s ease;
}
.pam.is-open .pam__scrim { opacity: 1; }

.pam__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--pam-bg);
  color: var(--pam-tx);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .14s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.pam.is-open .pam__dialog { opacity: 1; transform: none; }

.pam__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--pam-line);
  background: var(--pam-bg);
}
.pam__grab { display: none; }
.pam__title { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--pam-tx); }
.pam__x {
  appearance: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pam-tx);
  cursor: pointer;
  opacity: .8;
  transition: background .18s ease, opacity .18s ease;
}
.pam__x:hover { background: color-mix(in srgb, var(--pam-tx) 10%, transparent); opacity: 1; }
.pam__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pam__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pam__body { position: relative; flex: 1 1 auto; min-height: 0; }
.pam__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--pam-bg);
  color-scheme: normal;
  opacity: 0;
  transition: opacity .25s ease;
}
.pam.is-ready .pam__frame { opacity: 1; }
.pam.is-open.is-ready .pam__frame { transition-duration: .01ms; } /* ya precargada: se ve al instante */

.pam__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: color-mix(in srgb, var(--pam-tx) 65%, transparent);
  transition: opacity .25s ease, visibility .25s;
}
.pam.is-ready .pam__loader { opacity: 0; visibility: hidden; }
.pam__loader i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--pam-tx) 18%, transparent);
  border-top-color: var(--pam-tx);
  animation: pam-spin .8s linear infinite;
}
@keyframes pam-spin { to { transform: rotate(360deg); } }

/* ---- Móvil: hoja a pantalla completa que sube desde abajo ---- */
@media (max-width: 600px) {
  .pam { place-items: end stretch; }
  .pam__dialog {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  .pam.is-open .pam__dialog { transform: none; }
  .pam__scrim { display: none; }
  .pam__bar {
    position: relative;
    height: 48px;
    padding: 0 6px 0 16px;
  }
  .pam__grab {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--pam-tx) 28%, transparent);
  }
  .pam__title { padding-top: 6px; }
  .pam__x { width: 42px; height: 42px; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pam__scrim, .pam__dialog, .pam__frame, .pam__loader { transition-duration: .01ms !important; }
  .pam__loader i { animation-duration: 2s; }
}

/* ---- v1.8.11: sin barra superior ni botón «X»; la cuenta ocupa todo el panel. Cierra Esc, «atrás» o volver a pulsar «Cuenta». ---- */
.pam .pam__bar { display: none; }