body.spinner-active {
    overflow: hidden;
}

.page-loading-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Usaremos el color de fondo del body de la página principal para coherencia */
    /* background-color: rgba(240, 240, 240, 0.9); */
    background-color: #ffffff; /* Coincide con el body de la página principal */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
    text-align: center;
}

/* Contenedor específico para el spinner dentro del overlay */
.page-loading-spinner-overlay .spinner-container-inner {
    /* El width y height se definen inline en el HTML: style="width: 120px; height: 72px;" */
    position: relative;
    margin-bottom: 20px; /* Espacio entre el spinner y el texto de carga */
}

.page-loading-spinner-overlay .loading-text {
    font-size: 1.2em;
    color: var(--gwm-black); /* Usa tu variable --gwm-black */
    font-weight: bold;
    font-family: Arial, sans-serif; /* Coherencia con el body */
}

/* ----- Variables de color (ya las tenías, pero es bueno tenerlas aquí también para el contexto) ----- */
:root {
    --gwm-black: #000000;
    --gwm-grey: #cccccc; /* Usado para el fondo del óvalo */
}

/* ----- Estilos del Spinner GWM (aplicados dentro del overlay) ----- */
.page-loading-spinner-overlay .gwm-svg-text-spinner {
    width: 100%;
    height: 100%;
}

/* Estilos del Óvalo */
.page-loading-spinner-overlay .gwm-svg-text-spinner .svg-oval-bg,
.page-loading-spinner-overlay .gwm-svg-text-spinner .svg-oval-animated {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.page-loading-spinner-overlay .gwm-svg-text-spinner .svg-oval-bg {
    stroke: var(--gwm-grey);
    opacity: 0.4;
}

.page-loading-spinner-overlay .gwm-svg-text-spinner .svg-oval-animated {
    stroke: var(--gwm-black);
    stroke-dasharray: 295; /* Mantener estimación o valor calculado */
    stroke-dashoffset: 295;
    animation: drawOvalPath 2s ease-in-out infinite;
}

@keyframes drawOvalPath {
    0% {
        stroke-dashoffset: 295;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -295;
    }
}

/* Estilos del Texto GWM (letras fijas) */
.page-loading-spinner-overlay .gwm-svg-text-spinner .gwm-text {
    font-family: 'Arial', sans-serif; /* Coherencia con el body */
    font-size: 28px;
    font-weight: bold;
    fill: var(--gwm-black); /* Color de las letras */
    /* text-anchor y dominant-baseline se establecen en el HTML */
    /* x e y se establecen en el HTML para posicionar el bloque de texto */
}

/* Asegurar que los tspan (G, W, M) sean visibles y no animados */
.page-loading-spinner-overlay .gwm-svg-text-spinner .gwm-text tspan {
    fill-opacity: 1; /* Siempre visible */
    /* Se eliminan las propiedades de animación: animation-name, animation-duration, etc. */
}