/* loader.css — EL "cargando" de edoo. Un solo anillo coral sobre crema, en
   tres tamaños y cuatro modos, más los esqueletos como forma de las listas.
   Lo cargan todas las plantillas (profesor, alumno, jugador, lección,
   resultados, landing), así que cada variable trae su valor de respaldo.

   .ld            bloque centrado (paneles, cuerpos de modal)
   .ld--sm        fila en línea (listas, desplegables, insignias)
   .ld--overlay   velo sobre un contenedor que se refresca sin vaciarse
   .ld--page      velo a pantalla completa con el logo (login, abrir Studio,
                  arrancar el jugador, enviar respuestas)
   .btn.is-loading           botón ocupado: etiqueta invisible + anillo centrado
   .btn.is-loading-text      botón ocupado con texto: anillo pequeño + "Enviando…"
   .skeleton*                placeholders con brillo (lista, rejilla, tabla,
                             chips, cifras)                                    */

.ld {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ink3, #5b5249);
    font-family: 'Fredoka', 'Hanken Grotesk', system-ui, sans-serif;
    box-sizing: border-box;
    min-width: 0;
}
.ld__ring {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 3px solid var(--line, #EADDC9);
    border-top-color: var(--coral, #FF5A3C);
    animation: ldSpin 0.8s linear infinite;
    box-sizing: border-box;
}
.ld__text { font-size: 13.5px; font-weight: 500; line-height: 1.4; }
/* anillo diminuto en línea, para insignias ("Generando…") */
.ld__ring--xs { display: inline-block; width: 12px; height: 12px; border-width: 2px; vertical-align: -2px; margin-right: 4px; }
/* anillo suelto en bloque (dentro de indicadores con su propio texto) */
.ld__ring--block { display: block; margin: 0 auto 12px; }
/* estado de error de una lista (showListError) */
.empty-state.list-error .btn { margin-top: 12px; }
.ld__sub { font-size: 12px; opacity: 0.75; line-height: 1.4; }

/* fila en línea */
.ld--sm {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 9px;
    padding: 12px 14px;
}
.ld--sm .ld__ring { width: 18px; height: 18px; border-width: 2px; }
.ld--sm .ld__text { font-size: 13px; }
.ld--sm.ld--center { justify-content: center; text-align: center; }
.ld--tight { padding: 4px 0; }

/* velo sobre un contenedor (el helper le pone position:relative si le falta) */
.ld--overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255, 253, 248, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: inherit;
    padding: 16px;
}

/* velo a pantalla completa */
.ld--page {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(251, 244, 233, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 24px;
    gap: 14px;
}
.ld--page .ld__ring { width: 52px; height: 52px; border-width: 3.5px; }
.ld--page .ld__text { font-size: 15px; font-weight: 600; color: var(--ink, #241f1b); }
.ld--page .ld__sub { font-size: 13px; }
.ld__logo {
    font-family: 'Fredoka', system-ui, sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink, #241f1b);
    line-height: 1;
    margin-bottom: 4px;
}
.ld__logo b { color: var(--coral, #FF5A3C); font-weight: 700; }

/* dentro de un modal: el velo se queda dentro de la tarjeta */
.ld--page.ld--in-modal { position: absolute; border-radius: inherit; z-index: 20; }

/* ---- botones ---- */
.btn.is-loading,
.is-loading.studio-btn,
.is-loading.nav-btn,
.is-loading.ws-btn,
.is-loading.sp-btn {
    position: relative;
    pointer-events: none;
    color: transparent !important;
    text-shadow: none !important;
}
.is-loading > * { visibility: hidden; }
.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(36, 31, 27, 0.18);
    border-top-color: var(--coral, #FF5A3C);
    animation: ldSpin 0.7s linear infinite;
    box-sizing: border-box;
    visibility: visible;
}
.btn.primary.is-loading::after,
.btn.danger.is-loading::after,
.btn-primary.is-loading::after,
.studio-btn.primary.is-loading::after,
.nav-btn.primary.is-loading::after,
.ws-btn.is-loading::after,
.sp-btn--primary.is-loading::after,
.is-loading.on-dark::after {
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
}
/* botón ocupado con texto ("Enviando…"): anillo pequeño en línea */
.is-loading-text { pointer-events: none; opacity: 0.85; }
.is-loading-text .ld__ring {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: currentColor;
    vertical-align: -2px;
    margin-right: 7px;
    animation: ldSpin 0.7s linear infinite;
    box-sizing: border-box;
}
.btn.ghost.is-loading-text .ld__ring,
.btn.secondary.is-loading-text .ld__ring,
.btn.link.is-loading-text .ld__ring { border-color: rgba(36, 31, 27, 0.18); border-top-color: currentColor; }

/* ---- esqueletos (forma de la lista mientras llega) ---- */
.skeleton {
    background: linear-gradient(90deg, #F3EADA 25%, var(--line, #EADDC9) 50%, #F3EADA 75%);
    background-size: 200% 100%;
    animation: ldShimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
.skeleton-card { height: 80px; margin-bottom: 12px; border-radius: 12px; }
.skeleton-row { height: 16px; margin-bottom: 8px; }
.skeleton-row.short { width: 60%; }
.skeleton-row.xs { height: 12px; width: 40%; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.skeleton-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--cream, #FFFDF8);
    border-radius: 12px;
    border: 1.5px solid var(--line, #EADDC9);
    margin-bottom: 12px;
}
.skeleton-group-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skeleton-chip { height: 32px; width: 112px; border-radius: 999px; }
.skeleton-chip:nth-child(2) { width: 88px; }
.skeleton-chip:nth-child(3) { width: 132px; }
.skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.skeleton-stat { height: 76px; border-radius: 14px; }
.skeleton-inline { display: inline-block; height: 1em; width: 3ch; vertical-align: middle; border-radius: 6px; }

@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ld__ring, .is-loading::after, .is-loading-text .ld__ring {
        animation: none;
        border-right-color: var(--coral, #FF5A3C);
        border-bottom-color: var(--coral, #FF5A3C);
    }
    .skeleton { animation: none; background: #F3EADA; }
}