/*
|--------------------------------------------------------------------------
| Página
|--------------------------------------------------------------------------
*/

.pagina-resultados {
    padding-top: 24px;
    padding-bottom: 40px;
}

.cartao-resultados {
    width: min(1180px, 100%);
}

.cabecalho-resultados {
    margin-bottom: 28px;
}

/*
|--------------------------------------------------------------------------
| Navegação
|--------------------------------------------------------------------------
*/

.resultado-navegacao {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}

.resultado-navegacao .voltar {
    margin: 0;
}

.link-todos-resultados {
    color: var(--texto-suave);

    font-size: 0.85rem;
    font-weight: 700;

    text-decoration: none;
}

.link-todos-resultados:hover {
    color: var(--primaria);
}

/*
|--------------------------------------------------------------------------
| Perfil do frigorífico
|--------------------------------------------------------------------------
*/

.perfil-frigorifico {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--borda);
    border-radius: 16px;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.05);
}

.perfil-principal {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 17px;
}

.perfil-logo {
    display: grid;

    width: 76px;
    min-width: 76px;
    height: 76px;

    place-items: center;

    overflow: hidden;

    color: #ffffff;
    background: var(--primaria);

    border-radius: 14px;

    font-size: 1.6rem;
    font-weight: 800;
}

.perfil-logo img {
    width: 100%;
    height: 100%;

    padding: 6px;

    background: #ffffff;

    object-fit: contain;
}

.perfil-informacoes {
    min-width: 0;
}

.perfil-nome-linha {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.perfil-nome-linha h2 {
    margin: 0;

    font-size: 1.45rem;
}

.perfil-informacoes > p {
    max-width: 700px;

    margin: 7px 0 0;

    color: var(--texto-suave);

    line-height: 1.5;
}

.badge-localidade {
    display: inline-flex;

    padding: 5px 9px;

    color: var(--primaria);
    background: #fef2f2;

    border: 1px solid #fecaca;
    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 700;
}

.botao-avaliar-novamente {
    display: inline-grid;

    min-height: 43px;

    padding: 10px 16px;

    place-items: center;

    color: #ffffff;
    background: var(--primaria);

    border-radius: 10px;

    white-space: nowrap;

    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

.botao-avaliar-novamente:hover {
    background: var(--primaria-escura);
}

/*
|--------------------------------------------------------------------------
| Indicadores
|--------------------------------------------------------------------------
*/

.painel-indicadores {
    display: grid;

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

    gap: 14px;

    margin-bottom: 22px;
}

.indicador-principal,
.indicador-secundario {
    display: flex;

    min-height: 160px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--borda);
    border-radius: 15px;

    text-align: center;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.04);
}

.indicador-principal {
    border-top:
        3px solid
        var(--estrela);
}

.indicador-etiqueta {
    color: var(--texto-suave);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.indicador-nota {
    display: block;

    margin: 7px 0 1px;

    color: var(--primaria);

    font-size: 2.5rem;
    line-height: 1;
}

.indicador-secundario > strong {
    display: block;

    margin: 9px 0 5px;

    color: var(--primaria);

    font-size: 1.45rem;
}

.indicador-secundario small,
.indicador-principal small {
    margin-top: 6px;

    color: var(--texto-suave);

    font-size: 0.75rem;
}

.indicador-icone {
    display: grid;

    width: 34px;
    height: 34px;

    margin-bottom: 8px;

    place-items: center;

    color: var(--primaria);
    background: #fef2f2;

    border-radius: 50%;

    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| Estrelas
|--------------------------------------------------------------------------
*/

.estrelas-estaticas {
    margin-top: 7px;
}

.estrelas-estaticas span {
    color: var(--estrela-vazia);

    font-size: 1.15rem;
}

.estrelas-estaticas span.ativa {
    color: var(--estrela);
}

/*
|--------------------------------------------------------------------------
| Blocos
|--------------------------------------------------------------------------
*/

.bloco-resultados,
.bloco-depoimentos,
.lista-geral-resultados {
    margin-top: 22px;
    padding: 22px;

    background: #ffffff;

    border: 1px solid var(--borda);
    border-radius: 16px;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.04);
}

.mini-etiqueta {
    display: inline-block;

    margin-bottom: 6px;

    color: var(--primaria);

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.titulo-secao h2 {
    margin: 0 0 5px;

    font-size: 1.2rem;
}

.titulo-secao p {
    margin: 0;

    color: var(--texto-suave);

    font-size: 0.84rem;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Critérios
|--------------------------------------------------------------------------
*/

.grade-criterios {
    display: grid;

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

    gap: 12px;

    margin-top: 18px;
}

.criterio-card {
    position: relative;

    overflow: hidden;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid var(--borda);
    border-radius: 12px;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.criterio-card:hover {
    transform: translateY(-1px);

    border-color: rgba(180, 35, 45, 0.28);

    box-shadow:
        0 8px 20px
        rgba(15, 23, 42, 0.05);
}

.criterio-topo {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 14px;
}

.criterio-topo > div {
    min-width: 0;
}

.criterio-topo small {
    display: block;

    margin-bottom: 4px;

    color: var(--texto-suave);

    font-size: 0.65rem;
}

.criterio-topo strong {
    display: block;

    line-height: 1.35;

    font-size: 0.82rem;
}

.criterio-nota {
    flex: 0 0 auto;

    color: var(--primaria);

    font-size: 0.8rem;
    font-weight: 800;
}

.barra-criterio {
    width: 100%;
    height: 5px;

    margin-top: 12px;

    overflow: hidden;

    background: #e2e8f0;

    border-radius: 999px;
}

.barra-criterio span {
    display: block;

    height: 100%;

    background: var(--primaria);

    border-radius: inherit;
}

.criterio-respostas {
    display: block;

    margin-top: 7px;

    color: var(--texto-suave);

    font-size: 0.65rem;
}

/*
|--------------------------------------------------------------------------
| Gráfico
|--------------------------------------------------------------------------
*/

.grafico-resultados {
    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| Avaliações individuais
|--------------------------------------------------------------------------
*/

.lista-avaliacoes-publicas {
    display: grid;

    gap: 13px;

    margin-top: 18px;
}

.avaliacao-publica-card {
    padding: 18px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--borda);
    border-radius: 14px;
}

.avaliacao-publica-topo {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}

.avaliador-identificacao {
    display: flex;

    align-items: center;

    gap: 10px;
}

.avaliador-icone {
    display: grid;

    width: 36px;
    min-width: 36px;
    height: 36px;

    place-items: center;

    color: #047857;
    background: #ecfdf5;

    border: 1px solid #a7f3d0;
    border-radius: 50%;

    font-weight: 800;
}

.avaliador-titulo {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 7px;
}

.avaliador-titulo strong {
    font-size: 0.82rem;
}

.avaliador-titulo span {
    padding: 3px 7px;

    color: #047857;
    background: #ecfdf5;

    border-radius: 999px;

    font-size: 0.6rem;
    font-weight: 700;
}

.avaliador-identificacao small {
    display: block;

    margin-top: 3px;

    color: var(--texto-suave);

    font-size: 0.68rem;
}

.avaliacao-estrelas-pequenas {
    white-space: nowrap;
}

.avaliacao-estrelas-pequenas span {
    color: var(--estrela-vazia);

    font-size: 0.95rem;
}

.avaliacao-estrelas-pequenas span.ativa {
    color: var(--estrela);
}

/*
|--------------------------------------------------------------------------
| Contexto
|--------------------------------------------------------------------------
*/

.avaliacao-contexto {
    margin-top: 13px;
    padding: 10px 12px;

    color: var(--texto-suave);
    background: #f8fafc;

    border: 1px solid var(--borda);
    border-radius: 9px;

    font-size: 0.73rem;
}

.avaliacao-contexto strong {
    color: var(--texto);
}

/*
|--------------------------------------------------------------------------
| Notas individuais
|--------------------------------------------------------------------------
*/

.avaliacao-notas {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 10px;
}

.avaliacao-notas span {
    padding: 5px 8px;

    color: var(--texto-suave);
    background: #f8fafc;

    border-radius: 7px;

    font-size: 0.68rem;
}

.avaliacao-notas strong {
    color: var(--primaria);
}

/*
|--------------------------------------------------------------------------
| Depoimento
|--------------------------------------------------------------------------
*/

.avaliacao-depoimento {
    margin-top: 14px;

    line-height: 1.6;

    font-size: 0.83rem;
}


/*
|--------------------------------------------------------------------------
| Rodapé CTA
|--------------------------------------------------------------------------
*/

.resultado-rodape-acao {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 22px;
    padding: 18px;

    color: #ffffff;
    background: var(--primaria-escura);

    border-radius: 14px;
}

.resultado-rodape-acao strong,
.resultado-rodape-acao span {
    display: block;
}

.resultado-rodape-acao span {
    margin-top: 3px;

    opacity: 0.82;

    font-size: 0.75rem;
}

.resultado-rodape-acao a {
    display: inline-grid;

    min-height: 42px;

    padding: 10px 17px;

    place-items: center;

    color: var(--primaria-escura);
    background: #ffffff;

    border-radius: 10px;

    white-space: nowrap;

    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| Lista geral
|--------------------------------------------------------------------------
*/

.cards-resultados-gerais {
    display: grid;

    gap: 12px;

    margin-top: 18px;
}

.card-resultado-geral {
    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    padding: 15px;

    color: var(--texto);
    background: #ffffff;

    border: 1px solid var(--borda);
    border-radius: 13px;

    text-decoration: none;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.card-resultado-geral:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--primaria);

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, 0.07);
}

.card-resultado-logo {
    display: grid;

    width: 64px;
    height: 64px;

    place-items: center;

    overflow: hidden;

    color: #ffffff;
    background: var(--primaria);

    border-radius: 11px;

    font-size: 1.4rem;
    font-weight: 800;
}

.card-resultado-logo img {
    width: 100%;
    height: 100%;

    padding: 5px;

    background: #ffffff;

    object-fit: contain;
}

.card-resultado-info {
    min-width: 0;
}

.card-resultado-info > strong {
    display: block;

    margin-bottom: 3px;

    font-size: 0.95rem;
}

.card-resultado-info small {
    color: var(--texto-suave);

    font-size: 0.7rem;
}

.card-resultado-info p {
    margin: 6px 0 0;

    color: var(--texto-suave);

    font-size: 0.72rem;
    line-height: 1.4;
}

.card-resultado-nota {
    display: flex;

    align-items: baseline;

    gap: 4px;
}

.card-resultado-nota .estrela-card {
    color: var(--estrela);
}

.card-resultado-nota strong {
    color: var(--primaria);

    font-size: 1.35rem;
}

.card-resultado-nota small {
    color: var(--texto-suave);
}

.card-resultado-nota em {
    margin-left: 7px;

    color: var(--texto-suave);

    font-size: 0.68rem;
    font-style: normal;
}

/*
|--------------------------------------------------------------------------
| Estado vazio
|--------------------------------------------------------------------------
*/

.estado-vazio {
    margin-top: 18px;
    padding: 28px 18px;

    color: var(--texto-suave);
    background: #f8fafc;

    border: 1px dashed var(--borda);
    border-radius: 12px;

    text-align: center;
}

.estado-vazio strong {
    display: block;

    margin-bottom: 4px;

    color: var(--texto);
}

.estado-vazio p {
    margin: 0;

    font-size: 0.8rem;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {
    .painel-indicadores {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/*
|--------------------------------------------------------------------------
| Tablet / celular
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    .perfil-frigorifico {
        align-items: stretch;

        flex-direction: column;
    }

    .botao-avaliar-novamente {
        width: 100%;
    }


    .grade-criterios {
        grid-template-columns: 1fr;
    }


    .resultado-rodape-acao {
        align-items: stretch;

        flex-direction: column;
    }

    .resultado-rodape-acao a {
        width: 100%;
    }

    .card-resultado-geral {
        grid-template-columns:
            55px
            minmax(0, 1fr);

        gap: 12px;
    }

    .card-resultado-logo {
        width: 55px;
        height: 55px;
    }

    .card-resultado-nota {
        grid-column: 1 / -1;

        padding-top: 10px;

        border-top: 1px solid var(--borda);
    }
}

/*
|--------------------------------------------------------------------------
| Celular
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {
    .pagina-resultados {
        padding:
            12px 7px
            25px;
    }

    .cartao-resultados {
        padding:
            20px 10px;
    }

    .resultado-navegacao {
        align-items: flex-start;

        flex-direction: column;
    }

    .perfil-principal {
        align-items: flex-start;
    }

    .perfil-logo {
        width: 58px;
        min-width: 58px;
        height: 58px;
    }

    .perfil-nome-linha h2 {
        font-size: 1.15rem;
    }

    .painel-indicadores {
        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }

    .indicador-principal,
    .indicador-secundario {
        min-height: 135px;

        padding: 13px 8px;
    }

    .indicador-nota {
        font-size: 2rem;
    }

    .indicador-secundario > strong {
        font-size: 1.2rem;
    }

        .bloco-resultados,
    .bloco-depoimentos,
    .lista-geral-resultados {
        padding: 15px 11px;

        border-radius: 13px;
    }


    .avaliacao-publica-card {
        padding: 14px 11px;
    }

    .avaliacao-publica-topo {
        flex-direction: column;
    }

    .avaliacao-estrelas-pequenas {
        padding-left: 46px;
    }

    .grafico-resultados {
        height: 300px;
    }
}

/*
|--------------------------------------------------------------------------
| Celular pequeno
|--------------------------------------------------------------------------
*/

@media (max-width: 400px) {
    .painel-indicadores {
        grid-template-columns: 1fr;
    }
}