:root {
    --mac-loader-ink: #f5f8ff;
    --mac-loader-muted: #b6c8e5;
    --mac-loader-accent: #68d9ff;
    --mac-loader-backdrop: rgba(2, 10, 26, .62);
    --mac-loader-surface: linear-gradient(145deg, rgba(8, 27, 58, .96), rgba(3, 15, 35, .94));
    --mac-loader-border: rgba(124, 178, 255, .24);
    --mac-loader-image: none;
    --mac-loader-indicator-size: 22px;
    --mac-loader-page-size: 48px;
    --mac-loader-report-size: 24px;
    --mac-loader-border-width: 2px;
    --mac-loader-page-border-width: 3px;
    --mac-loader-report-border-width: 3px;
    --mac-loader-radius: 50%;
    --mac-loader-animation: mac-loader-spin 750ms linear infinite;
}

/* El fantasma conserva su escala del 200%, únicamente con Halloween activo. */
html[data-ambientacion-loader="halloween"] {
    --mac-loader-image: url('../img/mac-loader.gif?v=b4d64d681799');
    --mac-loader-indicator-size: 44px;
    --mac-loader-page-size: 96px;
    --mac-loader-report-size: 48px;
    --mac-loader-border-width: 0px;
    --mac-loader-page-border-width: 0px;
    --mac-loader-report-border-width: 0px;
    --mac-loader-radius: 0;
    --mac-loader-animation: none;
}

/* Alebrije entregado para Día de Muertos; mismos indicadores y API de carga. */
html[data-ambientacion-loader="dia-muertos"] {
    --mac-loader-image: url('../img/ambientaciones/dia-muertos/loader-alebrije.gif?v=1');
    --mac-loader-indicator-size: 64px;
    --mac-loader-page-size: 176px;
    --mac-loader-report-size: 72px;
    --mac-loader-border-width: 0px;
    --mac-loader-page-border-width: 0px;
    --mac-loader-report-border-width: 0px;
    --mac-loader-radius: 0;
    --mac-loader-animation: none;
    --mac-loader-accent: #ffb128;
}

.mac-loader-overlay {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: var(--mac-loader-ink);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    opacity: 0;
    transition: opacity 150ms ease;
    pointer-events: none;
}

.mac-loader-overlay.is-visible { opacity: 1; }
.mac-loader-overlay--page {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    flex-direction: column;
    background: var(--mac-loader-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}

.mac-loader-overlay--page .mac-loader-spinner {
    width: var(--mac-loader-page-size);
    height: var(--mac-loader-page-size);
    border-width: var(--mac-loader-page-border-width);
}

.mac-loader-message { color: var(--mac-loader-ink); font-weight: 500; text-align: center; }
.mac-loader-overlay--inline {
    position: absolute;
    inset: 0;
    z-index: 20;
    min-height: max(42px, var(--mac-loader-indicator-size));
    border-radius: inherit;
    background: rgba(2, 10, 26, .48);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    pointer-events: auto;
}

.mac-loader-overlay--inline .mac-loader-spinner,
.mac-loader-spinner,
.pe-loader {
    display: inline-block;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--mac-loader-indicator-size);
    height: var(--mac-loader-indicator-size);
    border: var(--mac-loader-border-width) solid rgba(104, 217, 255, .22);
    border-top-color: var(--mac-loader-accent);
    border-right-color: #168cff;
    border-radius: var(--mac-loader-radius);
    background: var(--mac-loader-image) center / contain no-repeat;
    animation: var(--mac-loader-animation);
}

.mac-loader-inline {
    display: inline-block;
    box-sizing: border-box;
    width: var(--mac-loader-indicator-size);
    height: var(--mac-loader-indicator-size);
    border: var(--mac-loader-border-width) solid rgba(104, 217, 255, .22);
    border-top-color: var(--mac-loader-accent);
    border-right-color: #168cff;
    border-radius: var(--mac-loader-radius);
    background: var(--mac-loader-image) center / contain no-repeat;
    vertical-align: middle;
    animation: var(--mac-loader-animation);
}

.mac-loader-inline[hidden] { display: none !important; }
.mac-loader-positioned { position: relative !important; }
/* Mantiene el skeleton contextual, pero utiliza la misma paleta de carga. */
.rpt-ui__skeleton-shine { background-image: linear-gradient(100deg, transparent, rgba(104, 217, 255, .22), transparent); }

@keyframes mac-loader-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    :root { --mac-loader-animation: none; }
    html[data-ambientacion-loader="halloween"] { --mac-loader-image: url('../img/mac-loader-static.png?v=b4d64d681799'); }
    html[data-ambientacion-loader="dia-muertos"] { --mac-loader-image: url('../img/ambientaciones/dia-muertos/loader-alebrije-estatico.png?v=1'); }
    .mac-loader-overlay { transition: none; }
    .mac-loader-spinner, .mac-loader-inline, .pe-loader { animation: none; }
}

@media print {
    .mac-loader-overlay, .mac-loader-inline { display: none !important; }
}