/* =============================================================================
   Atividades interativas das aulas (quiz, associação, tabela, texto)
   Usa as custom properties do site (--primary, --font-family, --radius-*),
   com valores de reserva para funcionar também na prévia do admin.
   Tudo fica dentro de .atividade para não afetar o resto da aula.
   ========================================================================== */

.atividade {
    --atv-primaria: var(--primary, #2F91D7);
    --atv-texto: var(--color-text, #202020);
    --atv-borda: #c9ced6;
    --atv-fundo: #fff;
    --atv-fundo-suave: #f6f8fa;
    --atv-verde: #1e7e45;
    --atv-verde-borda: #3aa564;
    --atv-verde-fundo: #e7f6ec;
    --atv-vermelho: #b42318;
    --atv-vermelho-borda: #d9534f;
    --atv-vermelho-fundo: #fdecec;
    --atv-raio: var(--radius-md, 8px);

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 30px 0;
    padding: 24px;
    border: 1px solid var(--atv-borda);
    border-radius: var(--atv-raio);
    background: var(--atv-fundo);
    color: var(--atv-texto);
    font-family: var(--font-family, inherit);
    font-size: 17px;
    line-height: 1.5;
}

.atividade *,
.atividade *::before,
.atividade *::after {
    box-sizing: border-box;
}

.atividade-titulo {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.atividade-enunciado {
    margin: 0 0 16px;
    font-size: 18px;
}

.atividade-imagem {
    margin: 0 0 20px;
    text-align: center;
}

.atividade-imagem img {
    display: inline-block;
    max-width: 100%;
    max-height: 360px;
    height: auto;
    border-radius: var(--atv-raio);
}

.atividade-instrucao {
    margin: 0 0 16px;
    color: #555;
    font-size: 15px;
}

.atividade-form {
    margin: 0;
}

/* Só para leitores de tela */
.atividade-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.atividade-icone {
    display: inline-flex;
    flex: none;
    align-items: center;
    vertical-align: -3px;
    margin-right: 6px;
}

/* --------------------------------------------------------------- botões */

.atividade-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.atividade-multipla-escolha .atividade-acoes:has(.atividade-reiniciar[hidden]) {
    margin-top: 0;
}

.atividade-botao {
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid var(--atv-primaria);
    border-radius: var(--radius-pill, 9999px);
    background: var(--atv-primaria);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.atividade-botao:hover {
    filter: brightness(0.92);
}

.atividade-botao-secundario {
    background: #fff;
    color: var(--atv-primaria);
}

.atividade-botao[hidden] {
    display: none;
}

.atividade-botao:disabled,
.atividade.is-enviando .atividade-botao {
    opacity: 0.6;
    cursor: wait;
}

.atividade button:focus-visible,
.atividade input:focus-visible,
.atividade .atividade-tabela-scroll:focus-visible {
    outline: 3px solid var(--atv-primaria);
    outline-offset: 2px;
}

/* ------------------------------------------------- tipo I: múltipla escolha */

.atividade-alternativas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.atividade-alternativa-botao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 10px 16px;
    border: 2px solid var(--atv-borda);
    border-radius: var(--atv-raio);
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.atividade-alternativa-botao:hover:not([aria-disabled]) {
    border-color: var(--atv-primaria);
    background: var(--atv-fundo-suave);
}

.atividade-alternativa-botao[aria-disabled] {
    cursor: default;
}

.atividade-letra {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: var(--atv-primaria);
    font-size: 15px;
    font-weight: 700;
}

.atividade-alternativa-texto {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* faixa com o ícone de certo/errado, só depois da correção */
.atividade-marcador {
    display: none;
}

.atividade-alternativa.is-correto .atividade-marcador,
.atividade-alternativa.is-incorreto .atividade-marcador,
.atividade-alternativa.is-gabarito .atividade-marcador {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #fff;
}

.atividade-alternativa.is-correto .atividade-alternativa-botao,
.atividade-alternativa.is-gabarito .atividade-alternativa-botao {
    border-color: var(--atv-verde-borda);
    background: var(--atv-verde-fundo);
}

.atividade-alternativa.is-correto .atividade-marcador,
.atividade-alternativa.is-gabarito .atividade-marcador {
    background: var(--atv-verde-borda);
}

.atividade-alternativa.is-correto .atividade-letra,
.atividade-alternativa.is-gabarito .atividade-letra {
    color: var(--atv-verde);
}

.atividade-alternativa.is-incorreto .atividade-alternativa-botao {
    border-color: var(--atv-vermelho-borda);
    background: var(--atv-vermelho-fundo);
}

.atividade-alternativa.is-incorreto .atividade-marcador {
    background: var(--atv-vermelho-borda);
}

.atividade-alternativa.is-incorreto .atividade-letra {
    color: var(--atv-vermelho);
}

.atividade-alternativa .atividade-feedback {
    margin: 6px 0 0 28px;
}

/* ---------------------------------------------------------- feedback */

.atividade-feedback {
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 15px;
}

.atividade-feedback[hidden] {
    display: none;
}

.atividade-feedback p {
    margin: 0;
}

.atividade-feedback .atividade-justificativa {
    margin-top: 4px;
}

.atividade-feedback.is-correto {
    border-color: var(--atv-verde-borda);
    background: var(--atv-verde-fundo);
    color: var(--atv-verde);
}

.atividade-feedback.is-incorreto,
.atividade-feedback.is-vazio {
    border-color: var(--atv-vermelho-borda);
    background: var(--atv-vermelho-fundo);
    color: var(--atv-vermelho);
}

.atividade-feedback .atividade-justificativa {
    color: var(--atv-texto);
}

/* ------------------------------------------------------- campos digitáveis */

.atividade-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 2px solid var(--atv-borda);
    border-radius: 6px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
}

.atividade-input:focus {
    border-color: var(--atv-primaria);
}

.atividade-campo.is-correto .atividade-input {
    border-color: var(--atv-verde-borda);
    background: var(--atv-verde-fundo);
}

.atividade-campo.is-incorreto .atividade-input,
.atividade-campo.is-vazio .atividade-input,
.atividade-campo.is-invalido .atividade-input {
    border-color: var(--atv-vermelho-borda);
    background: var(--atv-vermelho-fundo);
}

.atividade-input[readonly] {
    cursor: default;
}

/* -------------------------------------------------------------- tabelas */

/* tabelas largas rolam dentro do componente, sem alargar a página */
.atividade-tabela-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.atividade-tabela {
    width: 100%;
    min-width: 420px;
    margin: 0;
    border-collapse: collapse;
    font-size: 16px;
}

.atividade-tabela th,
.atividade-tabela td {
    padding: 10px 12px;
    border: 1px solid var(--atv-borda);
    text-align: left;
    vertical-align: top;
}

.atividade-tabela thead th {
    background: var(--atv-fundo-suave);
    font-weight: 700;
}

.atividade-tabela-completar td {
    min-width: 160px;
}

.atividade-numero {
    font-weight: 700;
}

.atividade-associacao-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-weight: normal;
}

.atividade-parenteses {
    font-weight: 700;
}

.atividade-input-numero {
    flex: none;
    width: 3.2em;
    text-align: center;
}

.atividade-associacao-texto {
    margin-left: 8px;
}

/* ------------------------------------------------------- completar texto */

.atividade-texto {
    font-size: 18px;
    line-height: 2.4;
}

.atividade-lacuna {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4;
}

.atividade-lacuna .atividade-input {
    display: inline-block;
    width: 9em;
    max-width: 100%;
    min-height: 40px;
    padding: 4px 8px;
}

.atividade-feedback-inline {
    display: inline-block;
    margin: 0 0 0 4px;
    padding: 2px 8px;
    font-size: 14px;
    vertical-align: middle;
}

.atividade-feedback-inline .atividade-feedback-status {
    display: inline;
}

/* --------------------------------------------- erros de preenchimento */

.atividade-erros {
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid var(--atv-vermelho-borda);
    border-radius: 6px;
    background: var(--atv-vermelho-fundo);
    color: var(--atv-vermelho);
    font-size: 15px;
}

.atividade-erros[hidden] {
    display: none;
}

.atividade-erros p,
.atividade-erros ul {
    margin: 0;
}

.atividade-erros ul {
    padding-left: 20px;
}

/* ------------------------------------------------------------ resultado */

.atividade-resultado:empty {
    display: none;
}

.atividade-resultado {
    margin-top: 16px;
    padding: 12px 16px;
    border-left: 5px solid;
    border-radius: 6px;
    background: var(--atv-fundo-suave);
    font-size: 16px;
}

.atividade-resultado.is-correto {
    border-color: var(--atv-verde-borda);
}

.atividade-resultado.is-incorreto {
    border-color: var(--atv-vermelho-borda);
}

.atividade-resultado p,
.atividade-resultado ul {
    margin: 0;
}

.atividade-resultado ul {
    padding-left: 20px;
}

/* listas com o mesmo tamanho do texto, mesmo onde o tema define outro tamanho para li */
.atividade-resultado li,
.atividade-erros li {
    margin: 2px 0;
    font-size: inherit;
    list-style: disc;
}

.atividade-resultado ul,
.atividade-erros ul {
    font-size: 15px;
}

.atividade-resumo {
    font-size: 17px;
}

.atividade-resultado.is-correto .atividade-resumo {
    color: var(--atv-verde);
}

.atividade-resultado.is-incorreto .atividade-resumo {
    color: var(--atv-vermelho);
}

.atividade-faltando,
.atividade-justificativas,
.atividade-justificativa-geral {
    margin-top: 10px;
}

/* ------------------------------------------------------------- celular */

@media (max-width: 600px) {
    .atividade {
        padding: 16px;
        font-size: 16px;
    }

    .atividade-titulo {
        font-size: 19px;
    }

    .atividade-enunciado,
    .atividade-texto {
        font-size: 17px;
    }

    .atividade-alternativa-botao {
        padding: 10px 12px;
        gap: 10px;
    }

    .atividade-alternativa .atividade-feedback {
        margin-left: 0;
    }

    .atividade-botao {
        flex: 1 1 auto;
    }

    .atividade-tabela {
        min-width: 360px;
        font-size: 15px;
    }

    .atividade-tabela th,
    .atividade-tabela td {
        padding: 8px;
    }

    .atividade-tabela-completar td {
        min-width: 130px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atividade-alternativa-botao {
        transition: none;
    }
}

/* ------------------------------------------------------------------------
   Proteção contra o CSS do tema (input[type=text], button:focus, p...):
   mesmas regras acima, com especificidade maior, só dentro de .atividade
   ------------------------------------------------------------------------ */

.atividade input.atividade-input {
    display: block;
    float: none;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    line-height: 1.3;
    box-shadow: none;
}

.atividade .atividade-lacuna input.atividade-input {
    display: inline-block;
    min-height: 40px;
    padding: 4px 8px;
}

.atividade input.atividade-input-numero {
    display: inline-block;
    width: 3.2em;
    padding: 8px 4px;
}

.atividade p,
.atividade li {
    line-height: 1.45;
}

.atividade .atividade-texto {
    line-height: 2.4;
}

.atividade .atividade-botao-secundario,
.atividade .atividade-botao-secundario:hover,
.atividade .atividade-botao-secundario:focus,
.atividade .atividade-botao-secundario:active {
    background: #fff;
    color: var(--atv-primaria);
}

@media (max-width: 600px) {
    /* tabelas de poucas colunas cabem na tela; as largas rolam dentro do componente */
    .atividade .atividade-tabela {
        min-width: 0;
    }

    .atividade .atividade-tabela-completar td {
        min-width: 120px;
    }
}