/* MYAUBUILD — RAGASSETS */

.rag-item-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
    image-rendering: auto;
    vertical-align: middle;
}

.rag-item-icon--small {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.rag-item-icon--medium {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.rag-resource {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rag-resource--strong {
    font-weight: 800;
}

.rag-resource-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rag-resource-stack {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.p-chip.rag-resource,
.p-day-card__metrics .rag-resource {
    padding-left: 8px;
}

.p-stat__label.rag-resource-label {
    display: flex;
}

.p-dialog-resource {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-dialog-resource__text {
    min-width: 0;
}

.p-sale-lock__resource {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 560px) {
    .rag-item-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }
}


/* =========================================================
   ETAPA 11C.7 — ÍCONES DE CLASSE NOS LANÇAMENTOS
   ========================================================= */

.p-run-item__main--class-icon {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.p-run-item__identity {
    min-width: 0;
}

.rag-job-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(124,109,242,.18);
    border-radius: 13px;
    background:
        radial-gradient(circle at 50% 25%, rgba(124,109,242,.14), transparent 66%),
        rgba(15,18,24,.76);
}

.rag-job-icon {
    display: block;
    width: 50px;
    height: 50px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

.rag-job-avatar__fallback {
    display: none;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #aaa2ff;
    font-size: 18px;
    font-weight: 900;
}

.rag-job-avatar > .rag-job-avatar__fallback:only-child {
    display: grid;
}

@media (max-width: 820px) {
    .rag-job-avatar {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .rag-job-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 520px) {
    .p-run-item__main--class-icon {
        gap: 11px;
    }

    .rag-job-avatar {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 11px;
    }

    .rag-job-icon {
        width: 40px;
        height: 40px;
    }
}


/* =========================================================
   ETAPA 11C.8 — FALLBACK DE SPRITE DE CLASSE
   ========================================================= */

.rag-job-avatar {
    isolation: isolate;
}

.rag-job-icon {
    object-position: center;
}

/*
 * Quando o ícone estático não existe e o ragassets retorna
 * o sprite da classe, ele continua contido no mesmo slot.
 */
.rag-job-avatar img[src*="/image?job="] {
    width: 56px;
    height: 56px;
    object-fit: contain;
    transform: scale(.92);
    transform-origin: center center;
}