/* Skeleton base */
.skel {
    position: relative;
    overflow: hidden;
    background: #eee;
    border-radius: 8px;
}

.skel-line { height: 12px; margin: 8px 0; }
.skel-32   { height: 32px; }
.skel-48   { height: 48px; }
.skel-avatar { width: 48px; height: 48px; border-radius: 50%; }

/* Efeito shimmer */
.skel::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: skel-shimmer 1.2s infinite;
}

@keyframes skel-shimmer {
    100% { transform: translateX(100%); }
}

/* Indicador HTMX: escondido por padrão */
.indicator { display: none; }

/* Quando o HTMX está requisitando, o elemento com hx-indicator ganha .htmx-request */
.htmx-request.indicator { display: block; }

/* Se quiser esconder o conteúdo antigo enquanto carrega */
.is-loading .component-slot {
    visibility: hidden;
}