/* =========================================
   APTIDÕES DE TRABALHO - PALPÉDIA
   SAVE GAME
   VERSÃO COMPACTA
========================================= */


/* =========================================
   BLOCO PRINCIPAL
========================================= */

.pal-aptidoes {
    width: 100%;
    margin: 24px 0;
}


/* =========================================
   CABEÇALHO
========================================= */

.pal-aptidoes-cabecalho {
    margin-bottom: 13px;
}

.pal-aptidoes-cabecalho h2 {
    margin: 0 0 6px;
}

.pal-aptidoes-cabecalho p {
    margin: 0;

    color: #9262fa;

    font-size: 14px;
    line-height: 1.45;
}


/* =========================================
   GRID
========================================= */

.pal-aptidoes-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 10px;
    row-gap: 7px;
}


/* =========================================
   ITEM
========================================= */

.pal-aptidao-item {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* =========================================
   CARD
   ESTADO PADRÃO = APTIDÃO INATIVA
========================================= */

.pal-aptidao-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 42px;

    margin: 0;
    padding: 6px 10px;

    box-sizing: border-box;

    background: rgba(146, 98, 250, 0.015);

    border: 1px solid rgba(146, 98, 250, 0.16);
    border-radius: 8px;

    color: #777777;

    font-family: inherit;
    font-size: 13px;
    text-align: left;

    cursor: pointer;

    opacity: 1;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* =========================================
   APTIDÃO INATIVA
   ÍCONE
========================================= */

.pal-aptidao-card:not(.possui) .pal-aptidao-icone {
    opacity: 0.45;

    filter: grayscale(1);
}


/* =========================================
   APTIDÃO INATIVA
   TEXTO
========================================= */

.pal-aptidao-card:not(.possui) .pal-aptidao-nome {
    color: #777777;

    opacity: 1;

    font-weight: 500;
}


/* =========================================
   APTIDÃO QUE O PAL POSSUI
========================================= */

.pal-aptidao-card.possui {
    opacity: 1;

    background: rgba(146, 98, 250, 0.055);

    border-color: rgba(146, 98, 250, 0.18);

    color: inherit;
}


/* =========================================
   HOVER
========================================= */

.pal-aptidao-card:hover {
    opacity: 1;

    background: rgba(146, 98, 250, 0.08);

    border-color: rgba(146, 98, 250, 0.38);
}


/* =========================================
   SELECIONADO
========================================= */

.pal-aptidao-card.selecionada {
    opacity: 1;

    background: rgba(146, 98, 250, 0.12);

    border-color: rgba(146, 98, 250, 0.60);

    color: inherit;
}


/* =========================================
   CONTEÚDO ESQUERDO
========================================= */

.pal-aptidao-principal {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}


/* =========================================
   ÍCONE
========================================= */

.pal-aptidao-icone {
    display: block;

    width: 22px;
    height: 22px;

    min-width: 22px;
    max-width: 22px;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* =========================================
   NOME
========================================= */

.pal-aptidao-nome {
    min-width: 0;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================
   NÍVEL
========================================= */

.pal-aptidao-nivel {
    flex: 0 0 auto;

    margin-left: 8px;

    color: #9262fa;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================
   DESCRIÇÃO EXPANSÍVEL
========================================= */

.pal-aptidao-descricao {
    margin-top: 4px;
    padding: 8px 10px;

    background: rgba(146, 98, 250, 0.06);

    border: 1px solid rgba(146, 98, 250, 0.20);
    border-radius: 7px;

    font-size: 12px;
    line-height: 1.45;
}


/* =========================================
   DESCRIÇÃO FECHADA
========================================= */

.pal-aptidao-descricao[hidden] {
    display: none !important;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .pal-aptidoes {
        margin: 20px 0;
    }


    /* =====================================
       CABEÇALHO
    ===================================== */

    .pal-aptidoes-cabecalho {
        margin-bottom: 11px;
    }

    .pal-aptidoes-cabecalho p {
        font-size: 13px;
    }


    /* =====================================
       GRID
    ===================================== */

    .pal-aptidoes-grid {
        grid-template-columns: 1fr;

        row-gap: 6px;
    }


    /* =====================================
       CARD
    ===================================== */

    .pal-aptidao-card {
        min-height: 40px;

        padding: 6px 9px;

        border-radius: 7px;
    }


    /* =====================================
       CONTEÚDO
    ===================================== */

    .pal-aptidao-principal {
        gap: 8px;
    }


    /* =====================================
       ÍCONE
    ===================================== */

    .pal-aptidao-icone {
        width: 21px;
        height: 21px;

        min-width: 21px;
        max-width: 21px;
    }


    /* =====================================
       NOME
    ===================================== */

    .pal-aptidao-nome {
        font-size: 12px;
    }


    /* =====================================
       NÍVEL
    ===================================== */

    .pal-aptidao-nivel {
        font-size: 11px;
    }


    /* =====================================
       DESCRIÇÃO
    ===================================== */

    .pal-aptidao-descricao {
        margin-top: 4px;
        padding: 8px 9px;

        font-size: 11px;
        line-height: 1.45;
    }

}