/* ==========================================================================
   Pantalla de carga ARC (secured/loader.xhtml)
   Se muestra con showElement('loading') y se oculta con hideElement('loading')
   ========================================================================== */
.arc-loader {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    overflow: hidden;
    background: #ffffff;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    -webkit-animation: arc-loader-aparecer .25s ease-out;
    animation: arc-loader-aparecer .25s ease-out;
}

.arc-loader--entrada {
    display: block;
}

/* Resplandor cálido que respira detrás del contenido */
.arc-loader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vmax;
    height: 120vmax;
    margin: -60vmax 0 0 -60vmax;
    background: radial-gradient(circle, rgba(242, 163, 37, .26) 0%, rgba(247, 183, 51, .13) 30%, rgba(255, 255, 255, 0) 55%);
    -webkit-animation: arc-loader-respirar 3.2s ease-in-out infinite;
    animation: arc-loader-respirar 3.2s ease-in-out infinite;
}

.arc-loader__content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    max-width: calc(100% - 32px);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* ---- Emblema con los anillos ---- */
.arc-loader__emblem {
    position: relative;
    width: 108px;
    height: 108px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6e2 0%, #fdeccb 70%, #fbe3b4 100%);
    box-shadow: 0 0 0 10px rgba(253, 236, 203, .45);
    -webkit-animation: arc-loader-latir 2.4s ease-in-out infinite;
    animation: arc-loader-latir 2.4s ease-in-out infinite;
}

.arc-loader__rings {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 100px;
    height: 100px;
    overflow: visible;
}

.arc-loader__ring {
    fill: none;
    stroke-linecap: round;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
}

/* circunferencias: 238.8 (r38), 169.6 (r27), 100.5 (r16) */
.arc-loader__ring--outer {
    stroke: url(#arcLoaderGrad);
    stroke-width: 6;
    stroke-dasharray: 150 89;
    -webkit-animation: arc-loader-girar 2.6s linear infinite, arc-loader-trazo-outer 2.6s ease-in-out infinite;
    animation: arc-loader-girar 2.6s linear infinite, arc-loader-trazo-outer 2.6s ease-in-out infinite;
}

.arc-loader__ring--middle {
    stroke: #f8c04a;
    stroke-width: 4.5;
    stroke-dasharray: 95 75;
    -webkit-animation: arc-loader-girar-inv 1.9s linear infinite, arc-loader-trazo-middle 1.9s ease-in-out infinite;
    animation: arc-loader-girar-inv 1.9s linear infinite, arc-loader-trazo-middle 1.9s ease-in-out infinite;
}

.arc-loader__ring--inner {
    stroke: #d9780a;
    stroke-width: 4;
    stroke-dasharray: 62 39;
    -webkit-animation: arc-loader-girar 1.3s linear infinite;
    animation: arc-loader-girar 1.3s linear infinite;
}

.arc-loader__dot {
    fill: #d9780a;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-animation: arc-loader-punto 1.3s ease-in-out infinite;
    animation: arc-loader-punto 1.3s ease-in-out infinite;
}

/* ---- Palabra ARC con las letras saltando ---- */
.arc-loader__word {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .38em;
    line-height: 1;
    color: #1f2937;
    padding-left: .38em;
}

.arc-loader__word span {
    display: inline-block;
    -webkit-animation: arc-loader-saltar 1.6s ease-in-out infinite;
    animation: arc-loader-saltar 1.6s ease-in-out infinite;
}

.arc-loader__word span:nth-child(2) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.arc-loader__word .arc-loader__c {
    color: #f2a325;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.arc-loader__text {
    margin: 0 0 16px;
    min-height: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    -webkit-animation: arc-loader-texto 1.8s ease-in-out infinite;
    animation: arc-loader-texto 1.8s ease-in-out infinite;
}

/* ---- Barra indeterminada ---- */
.arc-loader__bar {
    position: relative;
    width: 150px;
    height: 4px;
    margin: 0 auto 30px;
    border-radius: 4px;
    background: #fdeeb8;
    overflow: hidden;
}

.arc-loader__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 32%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #f7b733, #E9920C);
    -webkit-animation: arc-loader-barra 1.6s ease-in-out infinite;
    animation: arc-loader-barra 1.6s ease-in-out infinite;
}

/* ---- Insignias activos / by ARC ---- */
.arc-loader__badges {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 14px;
}

.arc-loader__badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 30px;
    margin: 0 4px;
    padding: 0 14px;
    border: 1px solid #f3e2c0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}

.arc-loader__badge img {
    display: block;
    height: 20px;
    width: auto;
}

.arc-loader__badge--dark {
    border-color: #1f2329;
    background: #1f2329;
    color: #ffffff;
}

.arc-loader__badge--dark em {
    margin-right: 7px;
    font-size: 11px;
    font-style: italic;
    color: #d1d5db;
}

.arc-loader__badge--dark strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.arc-loader__mini {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    -webkit-animation: arc-loader-girar 1s linear infinite;
    animation: arc-loader-girar 1s linear infinite;
}

.arc-loader__mini circle {
    fill: none;
    stroke: #f2a325;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 30 14;
}

.arc-loader__suite {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
}

.arc-loader__suite strong {
    font-weight: 700;
    color: #1f2937;
}

/* ---- Animaciones ---- */
@-webkit-keyframes arc-loader-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes arc-loader-aparecer { from { opacity: 0; } to { opacity: 1; } }

@-webkit-keyframes arc-loader-respirar {
    0%, 100% { -webkit-transform: scale(.92); opacity: .75; }
    50% { -webkit-transform: scale(1.06); opacity: 1; }
}
@keyframes arc-loader-respirar {
    0%, 100% { transform: scale(.92); opacity: .75; }
    50% { transform: scale(1.06); opacity: 1; }
}

@-webkit-keyframes arc-loader-latir {
    0%, 100% { box-shadow: 0 0 0 8px rgba(253, 236, 203, .35); }
    50% { box-shadow: 0 0 0 16px rgba(253, 236, 203, .55); }
}
@keyframes arc-loader-latir {
    0%, 100% { box-shadow: 0 0 0 8px rgba(253, 236, 203, .35); }
    50% { box-shadow: 0 0 0 16px rgba(253, 236, 203, .55); }
}

@-webkit-keyframes arc-loader-girar { to { -webkit-transform: rotate(360deg); } }
@keyframes arc-loader-girar { to { transform: rotate(360deg); } }

@-webkit-keyframes arc-loader-girar-inv { to { -webkit-transform: rotate(-360deg); } }
@keyframes arc-loader-girar-inv { to { transform: rotate(-360deg); } }

@-webkit-keyframes arc-loader-trazo-outer {
    0%, 100% { stroke-dasharray: 150 89; }
    50% { stroke-dasharray: 70 169; }
}
@keyframes arc-loader-trazo-outer {
    0%, 100% { stroke-dasharray: 150 89; }
    50% { stroke-dasharray: 70 169; }
}

@-webkit-keyframes arc-loader-trazo-middle {
    0%, 100% { stroke-dasharray: 95 75; }
    50% { stroke-dasharray: 135 35; }
}
@keyframes arc-loader-trazo-middle {
    0%, 100% { stroke-dasharray: 95 75; }
    50% { stroke-dasharray: 135 35; }
}

@-webkit-keyframes arc-loader-punto {
    0%, 100% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.35); }
}
@keyframes arc-loader-punto {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}

@-webkit-keyframes arc-loader-saltar {
    0%, 60%, 100% { -webkit-transform: translateY(0) rotate(0); }
    25% { -webkit-transform: translateY(-7px) rotate(-6deg); }
    40% { -webkit-transform: translateY(2px) rotate(3deg); }
}
@keyframes arc-loader-saltar {
    0%, 60%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-7px) rotate(-6deg); }
    40% { transform: translateY(2px) rotate(3deg); }
}

@-webkit-keyframes arc-loader-texto {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}
@keyframes arc-loader-texto {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@-webkit-keyframes arc-loader-barra {
    0% { left: -32%; }
    100% { left: 100%; }
}
@keyframes arc-loader-barra {
    0% { left: -32%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .arc-loader::before,
    .arc-loader__emblem,
    .arc-loader__ring,
    .arc-loader__dot,
    .arc-loader__word span,
    .arc-loader__text,
    .arc-loader__mini {
        -webkit-animation: none;
        animation: none;
    }
    .arc-loader__bar-fill {
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
    }
}