/* =============================================================================
   Baelis — Avaliacao do curso (formulario com estrelas + prova social)
   Tema claro/escuro via variaveis de learning_base.css.
   ============================================================================= */

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Pagina do formulario --- */
.aval-section { max-width: 620px; margin: 0 auto; padding-top: 1.5rem; }

.aval-voltar {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .9rem; font-weight: 600;
    color: var(--muted, #64748b); text-decoration: none; margin-bottom: 1rem;
}
.aval-voltar:hover { color: var(--text, #0f172a); }

.aval-head h1 { margin: 0 0 .4rem; font-size: 1.8rem; font-weight: 800; color: var(--text, #0f172a); }
.aval-head p { margin: 0 0 1.5rem; color: var(--muted, #64748b); line-height: 1.6; }

.aval-status {
    padding: .8rem 1rem; border-radius: 12px; margin-bottom: 1.25rem;
    font-size: .92rem; line-height: 1.5; border: 1px solid transparent;
}
.aval-status-pendente { background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent); border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent); color: var(--text, #0f172a); }
.aval-status-aprovado { background: color-mix(in srgb, var(--green, #10b981) 12%, transparent); border-color: color-mix(in srgb, var(--green, #10b981) 35%, transparent); color: var(--text, #0f172a); }
.aval-status-rejeitado { background: color-mix(in srgb, var(--error, #ef4444) 10%, transparent); border-color: color-mix(in srgb, var(--error, #ef4444) 30%, transparent); color: var(--text, #0f172a); }

.aval-form { display: flex; flex-direction: column; }

.aval-estrelas-campo { border: none; padding: 0; margin: 0 0 1.25rem; }
.aval-estrelas-campo legend {
    font-weight: 700; color: var(--text, #0f172a); margin-bottom: .35rem; padding: 0;
}

/* Estrelas CSS-only: DOM em ordem reversa (5..1) + row-reverse -> exibe 1..5.
   Assim `label:hover ~ label` e `input:checked ~ label` acendem as menores. */
.aval-estrelas { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.aval-estrelas input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.aval-estrelas label { cursor: pointer; padding: 0 .1rem; line-height: 1; }
.aval-estrela { font-size: 2.3rem; color: color-mix(in srgb, var(--muted, #64748b) 45%, transparent); transition: color .12s; }
.aval-estrelas label:hover .aval-estrela,
.aval-estrelas label:hover ~ label .aval-estrela,
.aval-estrelas input:checked ~ label .aval-estrela { color: var(--warning, #f59e0b); }
.aval-estrelas input:focus-visible + label .aval-estrela { outline: 2px solid var(--blue, #2563eb); outline-offset: 3px; border-radius: 4px; }

.aval-nota-txt { min-height: 1.3rem; margin: .3rem 0 0; font-weight: 700; color: var(--warning, #f59e0b); }

.aval-label { font-weight: 700; color: var(--text, #0f172a); margin-bottom: .4rem; }
.aval-label span { font-weight: 500; color: var(--muted, #64748b); }
.aval-textarea {
    width: 100%; padding: .75rem .9rem; border-radius: 12px;
    border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
    color: var(--text, #0f172a); font: inherit; font-size: 1rem; line-height: 1.5;
    resize: vertical; margin-bottom: 1.25rem;
}
.aval-textarea:focus { outline: none; border-color: var(--blue, #2563eb); }
.aval-enviar { align-self: flex-start; }

/* --- Prova social na landing --- */
.eng-reviews-media {
    display: inline-flex; align-items: center; gap: .5rem;
    margin: 0 auto 1.5rem; font-weight: 700; color: var(--text, #fff);
}
.eng-reviews-media .eng-reviews-estrelas { color: var(--warning, #f59e0b); font-size: 1.15rem; letter-spacing: .05em; }
.eng-reviews-media small { font-weight: 500; color: var(--muted, rgba(255,255,255,.68)); }

.eng-reviews-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem; max-width: 900px; margin: 0 auto;
}
.eng-review-card {
    background: var(--card, #002244); border: 1px solid var(--border, #1e293b);
    border-radius: 16px; padding: 1.1rem 1.2rem; text-align: left;
}
.eng-review-estrelas { color: var(--warning, #f59e0b); font-size: 1rem; letter-spacing: .08em; margin-bottom: .5rem; }
.eng-review-texto { color: var(--text, #fff); line-height: 1.55; margin: 0 0 .7rem; }
.eng-review-autor { font-size: .88rem; font-weight: 700; color: var(--muted, rgba(255,255,255,.68)); }

@media (max-width: 600px) {
    .aval-head h1 { font-size: 1.5rem; }
    .aval-estrela { font-size: 2rem; }
}