/* ==========================================================
   MAKETBUS
   Sistema de Avaliações da Comunidade
   ========================================================== */


/* ==========================================================
   RESUMO GERAL
   ========================================================== */

.avaliacao-resumo{

    display:grid;

    grid-template-columns:
        minmax(180px, 240px)
        minmax(0, 1fr);

    gap:30px;

    align-items:start;

}


.avaliacao-media-geral{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:210px;

    padding:25px;

    border-radius:12px;

    background:#f4f6f9;

    text-align:center;

}


.avaliacao-nota-grande{

    display:block;

    margin-bottom:5px;

    color:#1f2937;

    font-size:54px;

    font-weight:700;

    line-height:1;

}


.avaliacao-estrelas{

    display:inline-block;

    color:#f5a623;

    font-size:28px;

    line-height:1;

    letter-spacing:2px;

}


.avaliacao-total{

    display:block;

    margin-top:12px;

    color:#666;

    font-size:14px;

}


/* ==========================================================
   MÉDIAS POR CARACTERÍSTICA
   ========================================================== */

.avaliacao-medias-lista{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap:15px;

}


.avaliacao-media-item{

    padding:18px;

    border:1px solid #e3e7ec;

    border-radius:10px;

    background:#fff;

}


.avaliacao-media-cabecalho{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

    margin-bottom:10px;

}


.avaliacao-media-cabecalho strong{

    color:#333;

}


.avaliacao-media-cabecalho span{

    flex-shrink:0;

    color:#666;

    font-size:14px;

}


.avaliacao-estrelas-menor{

    margin-bottom:8px;

    font-size:20px;

}


.avaliacao-media-item small{

    color:#777;

}


/* ==========================================================
   SEM AVALIAÇÕES
   ========================================================== */

.avaliacao-sem-registros{

    padding:25px;

    border:1px dashed #c8ced6;

    border-radius:10px;

    background:#f8f9fb;

    color:#666;

    text-align:center;

}


.avaliacao-sem-registros p + p{

    margin-top:8px;

}


/* ==========================================================
   FORMULÁRIO DE AVALIAÇÃO
   ========================================================== */

.avaliacao-formulario{

    width:100%;

}


.avaliacao-campo{

    min-width:0;

    margin:0 0 22px 0;

    padding:20px;

    border:1px solid #dfe3e8;

    border-radius:10px;

    background:#fafbfc;

}


.avaliacao-campo legend{

    padding:0 8px;

    color:#333;

    font-size:17px;

    font-weight:700;

}


.avaliacao-campo .form-help{

    margin-bottom:12px;

}


/* ==========================================================
   ENTRADA DE ESTRELAS
   ========================================================== */

.avaliacao-estrelas-input{

    display:flex;

    align-items:stretch;

    gap:8px;

    flex-wrap:wrap;

}


.avaliacao-opcao-nota{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:62px;

    min-height:66px;

    padding:8px 12px;

    border:1px solid #cfd5dc;

    border-radius:8px;

    background:#fff;

    cursor:pointer;

    transition:
        border-color .2s,
        background .2s,
        transform .2s,
        box-shadow .2s;

}


.avaliacao-opcao-nota:hover{

    border-color:#f5a623;

    background:#fffaf0;

    transform:translateY(-2px);

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}


.avaliacao-opcao-nota input{

    position:absolute;

    width:1px;

    height:1px;

    margin:0;

    padding:0;

    opacity:0;

    pointer-events:none;

}


.avaliacao-opcao-estrela{

    color:#b5bbc3;

    font-size:26px;

    line-height:1;

    transition:color .2s;

}


.avaliacao-opcao-numero{

    margin-top:5px;

    color:#666;

    font-size:13px;

    font-weight:600;

}


.avaliacao-opcao-nota:has(input:checked){

    border-color:#f5a623;

    background:#fff7e6;

    box-shadow:
        0 0 0 2px rgba(245,166,35,.18);

}


.avaliacao-opcao-nota:has(input:checked)
.avaliacao-opcao-estrela{

    color:#f5a623;

}


.avaliacao-opcao-nota:has(input:checked)
.avaliacao-opcao-numero{

    color:#9a6200;

}


.avaliacao-opcao-nota:focus-within{

    outline:2px solid #1565c0;

    outline-offset:2px;

}


/* ==========================================================
   EXCLUSÃO DA PRÓPRIA AVALIAÇÃO
   ========================================================== */

.avaliacao-excluir-formulario{

    margin-top:15px;

}


/* ==========================================================
   LISTA DE AVALIAÇÕES PÚBLICAS
   ========================================================== */

.avaliacoes-publicas-lista{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.avaliacao-publica-item{

    padding:20px;

    border:1px solid #e2e6eb;

    border-radius:10px;

    background:#fff;

}


.avaliacao-publica-cabecalho{

    display:flex;

    align-items:center;

    gap:15px;

}


.avaliacao-publica-avatar{

    display:block;

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    background:#eef1f5;

}


.avaliacao-publica-avatar img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


.avaliacao-publica-identidade{

    min-width:0;

    flex:1;

}


.avaliacao-publica-identidade h3{

    margin:0 0 6px 0;

    font-size:17px;

}


.avaliacao-publica-nota{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


.avaliacao-publica-nota
.avaliacao-estrelas{

    font-size:19px;

}


.avaliacao-publica-identidade small{

    display:block;

    margin-top:6px;

    color:#777;

}


.avaliacao-publica-comentario{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #edf0f3;

}


.avaliacao-publica-comentario p{

    color:#444;

    line-height:1.6;

}


/* ==========================================================
   AVISO AO PROPRIETÁRIO
   ========================================================== */

#avaliacoes .alert-aviso{

    margin-bottom:20px;

}


/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media(max-width:850px){

    .avaliacao-resumo{

        grid-template-columns:1fr;

    }


    .avaliacao-media-geral{

        min-height:auto;

    }

}


@media(max-width:600px){

    .avaliacao-medias-lista{

        grid-template-columns:1fr;

    }


    .avaliacao-estrelas-input{

        display:grid;

        grid-template-columns:
            repeat(5, 1fr);

        gap:6px;

    }


    .avaliacao-opcao-nota{

        min-width:0;

        width:100%;

        min-height:62px;

        padding:8px 4px;

    }


    .avaliacao-opcao-estrela{

        font-size:22px;

    }


    .avaliacao-publica-cabecalho{

        align-items:flex-start;

    }


    .avaliacao-nota-grande{

        font-size:46px;

    }

}


@media(max-width:420px){

    .avaliacao-estrelas-input{

        grid-template-columns:
            repeat(5, minmax(46px, 1fr));

        overflow-x:auto;

    }


    .avaliacao-campo{

        padding:15px;

    }

}


/* ==========================================================
   AVALIAÇÕES COMPACTAS NO ÁLBUM PÚBLICO
   ========================================================== */

#avaliacoes{
    margin-top:18px;
}

#avaliacoes > h2{
    margin-bottom:10px;
}

#avaliacoes .avaliacao-resumo{
    grid-template-columns:170px minmax(0, 1fr);
    gap:12px;
}

#avaliacoes .avaliacao-media-geral{
    min-height:128px;
    padding:14px;
    border-radius:9px;
}

#avaliacoes .avaliacao-nota-grande{
    margin-bottom:3px;
    font-size:38px;
}

#avaliacoes .avaliacao-estrelas{
    font-size:20px;
}

#avaliacoes .avaliacao-total{
    margin-top:6px;
    font-size:11px;
}

#avaliacoes .avaliacao-medias-lista{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}

#avaliacoes .avaliacao-media-item{
    padding:10px;
    border-radius:8px;
}

#avaliacoes .avaliacao-media-cabecalho{
    gap:8px;
    margin-bottom:5px;
}

#avaliacoes .avaliacao-media-cabecalho strong,
#avaliacoes .avaliacao-media-cabecalho span{
    font-size:12px;
}

#avaliacoes .avaliacao-estrelas-menor{
    margin-bottom:3px;
    font-size:15px;
}

#avaliacoes .avaliacao-media-item small{
    font-size:10px;
}

.avaliacao-interacao{
    padding:0;
}

.avaliacao-criacao{
    overflow:hidden;
    border-radius:inherit;
}

.avaliacao-criacao > summary{
    display:flex;
    align-items:center;
    gap:8px 14px;
    min-height:46px;
    padding:10px 14px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.avaliacao-criacao > summary::-webkit-details-marker{
    display:none;
}

.avaliacao-criacao > summary::before{
    content:'+';
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:#fff2d8;
    color:#9a6200;
    font-size:18px;
    font-weight:700;
}

.avaliacao-criacao[open] > summary::before{
    content:'−';
}

.avaliacao-criacao > summary strong{
    font-size:15px;
}

.avaliacao-criacao > summary span{
    color:#6f7a86;
    font-size:12px;
}

.avaliacao-criacao[open] > summary{
    border-bottom:1px solid #e3e8ed;
    background:#f8fafc;
}

.avaliacao-criacao > .card-conteudo{
    padding:12px 14px 14px;
}

.avaliacao-criacao .alert{
    margin:0 0 10px;
    padding:10px 12px;
}

.avaliacao-criacao .avaliacao-formulario{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
}

.avaliacao-criacao .avaliacao-campo{
    min-width:0;
    margin:0;
    padding:10px;
    border-radius:8px;
}

.avaliacao-criacao .avaliacao-campo legend{
    padding:0 4px;
    font-size:13px;
}

.avaliacao-criacao .avaliacao-campo .form-help{
    min-height:0;
    margin:0 0 7px;
    font-size:10px;
}

.avaliacao-criacao .avaliacao-estrelas-input{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:4px;
}

.avaliacao-criacao .avaliacao-opcao-nota{
    min-width:0;
    min-height:42px;
    padding:5px 3px;
    border-radius:6px;
}

.avaliacao-criacao .avaliacao-opcao-estrela{
    font-size:18px;
}

.avaliacao-criacao .avaliacao-opcao-numero{
    margin-top:2px;
    font-size:10px;
}

.avaliacao-criacao .form-group,
.avaliacao-criacao .form-acoes{
    grid-column:1 / -1;
    margin:0;
}

.avaliacao-criacao .form-group label{
    margin-bottom:5px;
    font-size:13px;
}

.avaliacao-criacao textarea{
    min-height:76px;
    padding:9px 10px;
}

.avaliacao-criacao .form-help{
    margin-top:3px;
    font-size:10px;
}

.avaliacao-criacao .form-acoes{
    padding-top:0;
}

.avaliacao-criacao .avaliacao-excluir-formulario{
    margin:8px 0 0;
}

@media(max-width:760px){
    #avaliacoes .avaliacao-resumo{
        grid-template-columns:1fr;
    }

    #avaliacoes .avaliacao-media-geral{
        min-height:auto;
    }
}

@media(max-width:560px){
    #avaliacoes .avaliacao-medias-lista,
    .avaliacao-criacao .avaliacao-formulario{
        grid-template-columns:1fr;
    }

    .avaliacao-criacao > summary{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .avaliacao-criacao > summary span{
        width:100%;
        padding-left:38px;
        margin-top:-8px;
    }
}

/* ==========================================================
   UX03-T01 — Tema escuro: Avaliações
   ========================================================== */

html[data-theme="dark"] .avaliacao-media-geral{
    background:var(--surface-2);
}

html[data-theme="dark"] .avaliacao-nota-grande{
    color:var(--text);
}

html[data-theme="dark"] .avaliacao-total{
    color:var(--text-muted);
}

html[data-theme="dark"] .avaliacao-media-item{
    background:var(--surface-2);
    border-color:var(--border);
}

html[data-theme="dark"] .avaliacao-media-cabecalho strong{
    color:var(--text);
}

html[data-theme="dark"] .avaliacao-media-cabecalho span,
html[data-theme="dark"] .avaliacao-media-item small{
    color:var(--text-muted);
}

html[data-theme="dark"] .avaliacao-sem-registros{
    background:var(--surface-2);
    border-color:var(--border-strong);
    color:var(--text-secondary);
}

html[data-theme="dark"] .avaliacao-publica-item{
    background:var(--surface);
    border-color:var(--border);
}

html[data-theme="dark"] .avaliacao-publica-avatar{
    background:var(--surface-2);
}

html[data-theme="dark"] .avaliacao-publica-identidade small{
    color:var(--text-muted);
}

html[data-theme="dark"] .avaliacao-publica-comentario{
    border-color:var(--border);
}

html[data-theme="dark"] .avaliacao-publica-comentario p{
    color:var(--text);
}