/* ═══════════════════════════════════════════════════════════
   PECADO — Loader global a pantalla completa
   Velo con la P "pintándose" de abajo a arriba sobre su marca
   de agua. Compartido por tienda y panel: solo usa variables
   comunes a ambos temas (--bg, --text, --accent-btn…).
   ═══════════════════════════════════════════════════════════ */

.page-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 21, 27, .88); /* fallback si no hay color-mix */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.page-loader.on { opacity: 1; pointer-events: auto; }
[data-theme="light"] .page-loader { background: rgba(250, 250, 250, .88); }
@supports (background: color-mix(in srgb, red, red)) {
    .page-loader { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}

.pl-stage { text-align: center; padding: 24px; }

.pl-p {
    display: block; margin: 0 auto 18px;
    width: clamp(84px, 22vmin, 120px); height: auto;
}
/* Cuernos, fuste y cola en rojo de marca; el arco toma la tinta
   del tema (clara en oscuro, oscura en claro, como los PNG del logo) */
.pl-p .pa { fill: var(--accent-btn); }
.pl-p .pb { fill: var(--text); }
.pl-ghost { opacity: .1; }
.pl-ink { animation: pl-pintar 2.1s ease-in-out infinite; }

/* La tinta entra por abajo y sale por arriba: barrido ascendente
   continuo que "pinta" la P sobre la marca de agua tenue. */
@keyframes pl-pintar {
    0%   { clip-path: inset(100% 0 0 0); }
    42%  { clip-path: inset(0 0 0 0); }
    56%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
}

.pl-text {
    font-family: var(--font-head); font-weight: 600; font-size: .98rem;
    color: var(--text-soft); letter-spacing: .02em;
    animation: pl-texto 2.1s ease-in-out infinite;
}
@keyframes pl-texto { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .pl-ink, .pl-text { animation: none; }
    .pl-ink { clip-path: none; }
}