/* ══════════════════════════════════════════════════════════════════════
   CENTROFIC — Loading profesional de marca
   Plataforma de Certificaciones y Cursos
   Gradiente de marca: #258096 (teal) → #1a3c8f (azul)
   ══════════════════════════════════════════════════════════════════════ */

.cf-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 50% 0%, #2a8ea6 0%, #258096 38%, #1f5aa0 72%, #1a3c8f 100%);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    transition: opacity .4s ease, visibility .4s ease;
}
.cf-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Capa de partículas / grid de fondo ── */
.cf-loader__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
            mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
    animation: cfGridDrift 24s linear infinite;
    opacity: .6;
}
@keyframes cfGridDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 46px 46px, 46px 46px; }
}

/* Blobs de luz que respiran */
.cf-loader__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
    pointer-events: none;
}
.cf-loader__glow--1 { width: 340px; height: 340px; top: -80px; left: -60px;  background: #38c7c1; animation: cfFloat 9s ease-in-out infinite; }
.cf-loader__glow--2 { width: 300px; height: 300px; bottom: -90px; right: -70px; background: #2f6fd6; animation: cfFloat 11s ease-in-out infinite reverse; }
@keyframes cfFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, 24px) scale(1.12); }
}

/* ── Íconos de conocimiento (dispersos, flotando en su sitio) ──
   Se usa "> *" (no "i") porque FontAwesome en modo JS reemplaza cada
   <i> por un <svg>; con "i" el selector dejaría de aplicar y los íconos
   se amontonarían en la esquina superior izquierda. */
.cf-loader__icons { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cf-loader__icons > * {
    position: absolute;
    color: #fff;
    opacity: .12;                 /* estado de reposo = base, sin glitch por delays */
    transform: translateY(0);
    animation: cfIconFloat 6s ease-in-out infinite,
               cfIconTwinkle 4s ease-in-out infinite;
}
/* Posiciones fijas alrededor del núcleo (top/left) */
.cf-loader__icons > *:nth-child(1)  { top: 18%; left: 14%; font-size: 30px; animation-delay: 0s, .2s; }
.cf-loader__icons > *:nth-child(2)  { top: 30%; left: 82%; font-size: 24px; animation-delay: .8s, 1.1s; }
.cf-loader__icons > *:nth-child(3)  { top: 68%; left: 10%; font-size: 22px; animation-delay: 1.6s, .5s; }
.cf-loader__icons > *:nth-child(4)  { top: 74%; left: 86%; font-size: 32px; animation-delay: .4s, 1.8s; }
.cf-loader__icons > *:nth-child(5)  { top: 12%; left: 52%; font-size: 20px; animation-delay: 2.2s, .9s; }
.cf-loader__icons > *:nth-child(6)  { top: 82%; left: 46%; font-size: 26px; animation-delay: 1.2s, 2.4s; }
.cf-loader__icons > *:nth-child(7)  { top: 44%; left: 6%;  font-size: 18px; animation-delay: 3s, 1.4s; }
.cf-loader__icons > *:nth-child(8)  { top: 52%; left: 92%; font-size: 20px; animation-delay: 2.6s, .3s; }
@keyframes cfIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}
@keyframes cfIconTwinkle {
    0%, 100% { opacity: .08; }
    50%      { opacity: .22; }
}

/* ── Núcleo central ── */
.cf-loader__core {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

/* Emblema: logo con anillos orbitando */
.cf-loader__emblem {
    position: relative;
    width: 168px;
    height: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.cf-loader__ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}
.cf-loader__ring--outer {
    inset: 0;
    border-top-color: #ffffff;
    border-right-color: rgba(255,255,255,.35);
    animation: cfSpin 1.5s linear infinite;
}
.cf-loader__ring--mid {
    inset: 18px;
    border-bottom-color: #7ff0ea;
    border-left-color: rgba(127,240,234,.3);
    animation: cfSpin 2.1s linear infinite reverse;
}
.cf-loader__ring--dot { inset: 0; animation: cfSpin 1.5s linear infinite; }
.cf-loader__ring--dot::before {
    content: "";
    position: absolute;
    top: -5px; left: 50%;
    width: 10px; height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px 2px rgba(255,255,255,.9);
}

/* Disco del logo */
.cf-loader__badge {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 40px rgba(10,30,70,.45), inset 0 0 0 1px rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cfBadgePulse 2.6s ease-in-out infinite;
    overflow: hidden;
}
.cf-loader__badge img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    display: block;
}
.cf-loader__badge span {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #258096, #1a3c8f);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes cfBadgePulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 14px 40px rgba(10,30,70,.45), inset 0 0 0 1px rgba(255,255,255,.6); }
    50%      { transform: scale(1.05); box-shadow: 0 18px 52px rgba(10,30,70,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
}
@keyframes cfSpin { to { transform: rotate(360deg); } }

/* Marca */
.cf-loader__brand {
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: .16em;
    color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.cf-loader__brand b {
    font-weight: 800;
    color: #9defe8;
}
.cf-loader__tagline {
    font-size: clamp(.72rem, 2.4vw, .84rem);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin: 0 0 26px;
}

/* Barra de progreso */
.cf-loader__progress {
    width: min(320px, 74vw);
    height: 6px;
    border-radius: 100px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.cf-loader__bar {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    background: linear-gradient(90deg, #7ff0ea, #ffffff);
    box-shadow: 0 0 14px rgba(127,240,234,.8);
    transition: width .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}
.cf-loader__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: cfShine 1.4s ease-in-out infinite;
}
@keyframes cfShine {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* Estado + porcentaje */
.cf-loader__meta {
    width: min(320px, 74vw);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    color: rgba(255,255,255,.85);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.cf-loader__status { display: flex; align-items: center; gap: 8px; }
.cf-loader__status i {
    color: #9defe8;
    animation: cfBlink 1.2s ease-in-out infinite;
}
@keyframes cfBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cf-loader__percent { font-variant-numeric: tabular-nums; }

/* ── Accesibilidad: menos movimiento ── */
@media (prefers-reduced-motion: reduce) {
    .cf-loader__bg,
    .cf-loader__glow,
    .cf-loader__icons > *,
    .cf-loader__ring,
    .cf-loader__badge,
    .cf-loader__bar::after,
    .cf-loader__status i { animation: none !important; }
    .cf-loader__ring--outer { border-color: rgba(255,255,255,.5); }
}

@media (max-width: 480px) {
    .cf-loader__emblem { width: 140px; height: 140px; }
    .cf-loader__badge  { width: 92px; height: 92px; }
    .cf-loader__badge img { width: 62px; height: 62px; }
}