/**
 * Spinner + mensajes random ("La IA está pensando...", etc.) para
 * cualquier espera de IA (chat/paleta/estructura/generar) — pedido
 * explícito del usuario, tanto para el Diseñador IA público
 * (cliente/disenador-ia.php) como para la versión admin
 * (admin/lab-disenador-ia.php). Un solo componente compartido
 * (assets/js/ia-spinner.js) para no duplicar la lógica de rotación entre
 * las dos páginas.
 *
 * Usa SOLO variables que existen en los dos temas (admin.css y
 * cliente-tema.css, aunque con valores distintos): --color-primary,
 * --color-border, --color-muted, --color-text, --radius — nunca
 * --color-success/--color-danger (solo admin.css) ni --color-exito/
 * --color-error (solo cliente-tema.css), para que este archivo funcione
 * igual en las dos páginas sin tener que duplicarlo.
 */

/* La visibilidad (mostrar/ocultar) la sigue controlando el atributo
   `hidden` del elemento contenedor, como ya hacía cada `<p>`/`<div>` de
   "cargando" antes de este componente -- esta clase solo define el
   layout interno (spinner + texto) una vez que el elemento es visible. */
.ia-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* iniciar() agrega esta clase al elemento contenedor -- como define
   display, un `hidden` posterior (ej. al terminar la espera) no lo
   ocultaría sin esto (Gotcha #2 en CLAUDE.md). detener() también saca la
   clase por las dudas, pero este override es la protección real. */
.ia-loading[hidden] { display: none; }
.ia-loading-inline {
    margin-top: 10px;
}

.ia-spinner-ring {
    width: 20px;
    height: 20px;
    flex: none;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ia-spin 0.8s linear infinite;
}

@keyframes ia-spin {
    to { transform: rotate(360deg); }
}

.ia-loading-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ia-loading-contexto {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
}

.ia-loading-mensaje {
    font-size: 12px;
    font-style: italic;
    color: var(--color-muted);
    animation: ia-loading-fade 0.4s ease;
}

@keyframes ia-loading-fade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}