/* ============================================================
   Prism Bloom dot loader — port CSS puro del loader
   "dotm-square-14" (Prism Bloom) de dotmatrix.zzzzshawn.cloud
   (github.com/zzzzshawn/matrix). Grid 5×5, ciclo 1.7s,
   frames [0,1,2,3,2,1] con opacidades 1 / 0.52 / 0.08.
   Uso: <span class="cc-dotm"><i class="cc-dotm-dot cc-dotm-d0"></i> ×25</span>
   Color: hereda currentColor. Tamaño via --cc-dotm-dot / --cc-dotm-gap.
   ============================================================ */

.cc-dotm {
    display: inline-grid;
    grid-template-columns: repeat(5, var(--cc-dotm-dot, 2.5px));
    gap: var(--cc-dotm-gap, 2px);
    line-height: 0;
    vertical-align: middle;
}

.cc-dotm-dot {
    width: var(--cc-dotm-dot, 2.5px);
    height: var(--cc-dotm-dot, 2.5px);
    border-radius: 50%;
    background: currentColor;
    opacity: 0.08;
    animation-duration: 1.7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cc-dotm-d0, .cc-dotm-d4, .cc-dotm-d20, .cc-dotm-d24 { animation-name: cc-dotm-a; }
.cc-dotm-d1, .cc-dotm-d3, .cc-dotm-d5, .cc-dotm-d9, .cc-dotm-d15, .cc-dotm-d19, .cc-dotm-d21, .cc-dotm-d23 { animation-name: cc-dotm-b; }
.cc-dotm-d2, .cc-dotm-d10, .cc-dotm-d14, .cc-dotm-d22 { animation-name: cc-dotm-c; }
.cc-dotm-d6, .cc-dotm-d8, .cc-dotm-d16, .cc-dotm-d18 { animation-name: cc-dotm-d; }
.cc-dotm-d7, .cc-dotm-d17 { animation-name: cc-dotm-e; }
.cc-dotm-d11, .cc-dotm-d13 { animation-name: cc-dotm-f; }
.cc-dotm-d12 { opacity: 0.52; animation: none; }

/* Compatibilidad global: cc-loader.js mantiene las clases Bootstrap para que
   el JS existente pueda seguir encontrando/toggleando el elemento, pero anula
   por completo su aro/crecimiento y sus tamaños inline. */
.spinner-border.cc-loader-upgraded,
.spinner-grow.cc-loader-upgraded {
    display: inline-grid;
    grid-template-columns: repeat(5, var(--cc-dotm-dot, 2.5px)) !important;
    gap: var(--cc-dotm-gap, 2px) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    animation: none !important;
    transform: none !important;
    line-height: 0 !important;
    vertical-align: middle;
}

.cc-loader-upgraded::before,
.cc-loader-upgraded::after {
    content: none !important;
    display: none !important;
}

@keyframes cc-dotm-a {
    0% { opacity: 1; } 16.667% { opacity: 0.08; } 33.333% { opacity: 0.08; }
    50% { opacity: 1; } 66.667% { opacity: 0.08; } 83.333% { opacity: 0.08; } 100% { opacity: 1; }
}

@keyframes cc-dotm-b {
    0% { opacity: 0.08; } 16.667% { opacity: 0.08; } 33.333% { opacity: 1; }
    50% { opacity: 0.08; } 66.667% { opacity: 1; } 83.333% { opacity: 0.08; } 100% { opacity: 0.08; }
}

@keyframes cc-dotm-c {
    0% { opacity: 0.08; } 16.667% { opacity: 1; } 33.333% { opacity: 0.08; }
    50% { opacity: 1; } 66.667% { opacity: 0.08; } 83.333% { opacity: 1; } 100% { opacity: 0.08; }
}

@keyframes cc-dotm-d {
    0% { opacity: 1; } 16.667% { opacity: 0.52; } 33.333% { opacity: 0.08; }
    50% { opacity: 0.52; } 66.667% { opacity: 0.08; } 83.333% { opacity: 0.52; } 100% { opacity: 1; }
}

@keyframes cc-dotm-e {
    0% { opacity: 0.08; } 16.667% { opacity: 1; } 33.333% { opacity: 0.52; }
    50% { opacity: 0.08; } 66.667% { opacity: 0.52; } 83.333% { opacity: 1; } 100% { opacity: 0.08; }
}

@keyframes cc-dotm-f {
    0% { opacity: 0.08; } 16.667% { opacity: 0.52; } 33.333% { opacity: 0.08; }
    50% { opacity: 0.08; } 66.667% { opacity: 0.08; } 83.333% { opacity: 0.52; } 100% { opacity: 0.08; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-dotm-dot {
        animation: none;
        opacity: 0.52;
    }
}