/* ==========================================================================
   FORMATURA — template CSS da atividade Base de dados (mod_data)
   Estudar.Life / FAT, 19/10/2026.

   ONDE ENTRA: Base de dados > Modelos > Modelo CSS. O Moodle serve este texto
   em /mod/data/css.php?d=<id> e só o carrega nas páginas DESTA atividade
   (view.php e edit.php). Por isso o escopo é o id do <body> e nada vaza para
   o resto do AVA.

   CAIXA (AGENTS.md §2): tudo aqui é configuração da atividade. Nenhum SCSS do
   tema, nenhum renderer, nenhum override de template.

   O QUE O MOODLE EMITE E QUE ESTE CSS PRESSUPÕE (lido no código do 5.2):
     rádio   <fieldset><legend>…</legend><div class="inline-req">…</div>
             <input type="radio" value="Nome" class="mod-data-input me-1">
             <label for="…">Nome</label><br> …   (field/radiobutton)
     texto   <div title=""><label>…</label><input class="basefieldinput
             form-control d-inline mod-data-input"></div>   (lib.php)
     botões  <div class="mt-2"><input name="saveandview" class="btn
             btn-primary mx-1"> <a class="btn btn-secondary mx-1"></div>

   ARMADILHA PAGA: `.mt-2`, `.mx-1`, `.me-1` e `.d-inline` são utilitários do
   Bootstrap com !important. Onde este arquivo precisa vencê-los, usa
   !important também; especificidade sozinha não ganha.

   GRID DE 8: espaços e alturas de linha em múltiplos de 8. 4px só em vão
   apertado (título do bloco contra o número). Bordas de 1px descontadas do
   padding (23 + 1 = 24).

   CORES: identidade FAT (Azul FAT #0050A8, Ciano #00B0F0, Azul Profundo
   #0A2647). O ciano nunca é texto sobre branco (2,4:1); é brilho e trilho.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
body#page-mod-data-edit,
body#page-mod-data-view {
    --fmt-azul: #0050A8;            /* Azul FAT, 7,6:1 no branco */
    --fmt-azul-forte: #003D82;      /* hover e press */
    --fmt-ciano: #00B0F0;           /* acento, nunca texto */
    --fmt-tinta: #0A2647;           /* texto forte, 14,9:1 */
    --fmt-suave: #4C6478;           /* texto de apoio, 6,0:1 */
    --fmt-linha: #DBE6F0;           /* borda de cartão */
    --fmt-borda-campo: #7A8EA5;     /* borda de campo, 3,4:1 (limite de componente: 3:1) */
    --fmt-superficie: #F4F8FB;
    --fmt-gelo: #EAF6FC;
    --fmt-ouro: #F5C25B;            /* serpentina da arte; só sobre o azul */
    --fmt-erro: #B42318;            /* 6,4:1 */
    --fmt-erro-fundo: #FDEDEB;
    --fmt-ease: cubic-bezier(.23, 1, .32, 1);   /* saída forte: responde no primeiro quadro */
    --fmt-arte: url("img/heroi-capelos.webp");   /* arte do herói; a entrega embute uma vez só */
    background-color: var(--fmt-superficie);
}

body#page-mod-data-edit [hidden],
body#page-mod-data-view [hidden] {
    display: none !important;
}


/* --------------------------------------------------------------------------
   1. PÁGINA PRÓPRIA
   Como a Central do Aluno e o Hub de avaliações: sem o índice do curso (a
   gaveta da esquerda) e sem o botão que o abre. O Moodle continua emitindo os
   dois; aqui eles só não aparecem. O rastro do herói é o caminho de volta.
   -------------------------------------------------------------------------- */
body#page-mod-data-edit #theme_boost-drawers-courseindex,
body#page-mod-data-view #theme_boost-drawers-courseindex,
body#page-mod-data-edit .drawer-left-toggle,
body#page-mod-data-view .drawer-left-toggle {
    display: none !important;
}

/* QUEM GERENCIA. O CSS não enxerga papel, enxerga link: só quem gerencia a
   atividade recebe links para Campos, Modelos ou Importar entradas. Sem
   eles na página, quem está ali é aluno, e a barra de abas da atividade
   (que para o aluno tem uma aba só) sai. Para quem gerencia ela fica: é por
   ela que se chega a Campos, Modelos e Configurações. */
body#page-mod-data-edit:not(:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"])) .secondary-navigation,
body#page-mod-data-view:not(:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"])) .secondary-navigation {
    display: none !important;
}

/* Com a gaveta aberta o Boost empurra a página 285px para a direita. A gaveta
   sumiu, então o empurrão também sai. */
body#page-mod-data-edit #page.drawers.show-drawer-left,
body#page-mod-data-view #page.drawers.show-drawer-left {
    margin-left: 0;
}


/* --------------------------------------------------------------------------
   2. O HERÓI
   O mesmo cartão de gradiente do AVA (#page-header), vestido de formatura:
   os capelos e as serpentinas da arte oficial "Formatura 2025", espelhada
   para o #FORMATURAFAT ler certo, entram pela direita e somem no azul.
   O título é o nome da atividade, que o Moodle põe no <h1>.
   -------------------------------------------------------------------------- */
body#page-mod-data-edit #page-header,
body#page-mod-data-view #page-header {
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 24px;
    padding: 32px 40px;
    border-radius: 16px;
    color: #fff;
    background-color: #0B4592;
    background-image:
        var(--fmt-arte),
        radial-gradient(120% 140% at 85% 110%, rgba(0, 176, 240, .38) 0%, rgba(0, 176, 240, 0) 60%),
        linear-gradient(100deg, #0A2F66 0%, #0B4592 52%, #0D57B5 100%);
    background-repeat: no-repeat;
    background-position: right top, center, center;
    background-size: auto 100%, cover, cover;
}

body#page-mod-data-edit #page-header > .w-100,
body#page-mod-data-view #page-header > .w-100 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 144px;
}

body#page-mod-data-edit #page-header .breadcrumb,
body#page-mod-data-view #page-header .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 14px;
    line-height: 24px;
}

body#page-mod-data-edit #page-header .breadcrumb-item,
body#page-mod-data-view #page-header .breadcrumb-item,
body#page-mod-data-edit #page-header .breadcrumb-item a,
body#page-mod-data-view #page-header .breadcrumb-item a,
body#page-mod-data-edit #page-header .breadcrumb-item + .breadcrumb-item::before,
body#page-mod-data-view #page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .86);
}

body#page-mod-data-edit #page-header .breadcrumb-item a:hover,
body#page-mod-data-view #page-header .breadcrumb-item a:hover {
    color: #fff;
}

/* O ícone da Base de dados sai: quem faz o papel de imagem é a arte. */
body#page-mod-data-edit #page-header .page-header-image,
body#page-mod-data-view #page-header .page-header-image {
    display: none;
}

/* `.align-items-center` é utilitário com !important: só cai com peso igual. */
body#page-mod-data-edit #page-header .page-context-header,
body#page-mod-data-view #page-header .page-context-header {
    flex-direction: column;
    align-items: flex-start !important;
    margin: 16px 0 0 !important;
}

/* A sobrancelha: a hashtag da formatura, em ouro, como na fita da arte. */
body#page-mod-data-edit #page-header .page-context-header::before,
body#page-mod-data-view #page-header .page-context-header::before {
    content: "#FORMATURAFAT";
    display: block;
    margin-bottom: 8px;
    color: var(--fmt-ouro);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .08em;
}

body#page-mod-data-edit #page-header h1,
body#page-mod-data-view #page-header h1 {
    max-width: 22ch;
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
}

@media (max-width: 767.98px) {
    /* No celular o miolo perde os 15px de recuo; o herói perde junto, senão
       fica mais estreito que os cartões embaixo dele. */
    body#page-mod-data-edit #page-header,
    body#page-mod-data-view #page-header {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 16px;
        padding: 24px 16px;
        background-image:
            linear-gradient(90deg, rgba(10, 47, 102, .92) 0%, rgba(10, 47, 102, .55) 55%, rgba(10, 47, 102, .1) 100%),
            var(--fmt-arte),
            linear-gradient(100deg, #0A2F66 0%, #0B4592 52%, #0D57B5 100%);
        background-position: center, right -96px top, center;
        background-size: cover, auto 100%, cover;
    }

    body#page-mod-data-edit #page-header > .w-100,
    body#page-mod-data-view #page-header > .w-100 {
        min-height: 128px;
    }

    body#page-mod-data-edit #page-header h1,
    body#page-mod-data-view #page-header h1 {
        font-size: 24px;
        line-height: 32px;
    }
}


/* --------------------------------------------------------------------------
   3. O FORMULÁRIO: casca
   O Moodle põe um <h2> "Novo item" antes do template. O template tem o
   próprio título, então o do Moodle sai.
   -------------------------------------------------------------------------- */
body#page-mod-data-edit #region-main form .generalbox > h2:first-child {
    display: none;
}

body#page-mod-data-edit #region-main form .generalbox {
    padding-top: 0 !important;
}

.fmt {
    display: grid;
    gap: 24px;
    color: var(--fmt-tinta);
    font-size: 16px;
    line-height: 24px;
}

/* O tema pinta os títulos do miolo com
       body.pagelayout-incourse #region-main [role="main"] h2   (1,2,2)
   margem de 32px em cima, cor e tamanho próprios. Os títulos e textos daqui
   levam o id da página na frente, (2,1,0), e ganham sem !important. */
:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt p,
:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt h2,
:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt h3,
:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt h4 {
    margin: 0;
}


/* --------------------------------------------------------------------------
   4. A ABERTURA
   O que o aluno precisa saber antes da primeira pergunta: o que vai
   responder, até quando, quanto tempo leva e que já está identificado.
   -------------------------------------------------------------------------- */
.fmt-abre {
    padding: 23px;
    background: #fff;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-abre__titulo {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: var(--fmt-tinta);
    text-wrap: balance;
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-abre__texto {
    max-width: 60ch;
    margin-top: 8px !important;
    color: var(--fmt-suave);
}

.fmt-abre__fatos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.fmt-fato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 8px;
    border-radius: 999px;
    background: var(--fmt-gelo);
    color: var(--fmt-tinta);
    font-size: 14px;
    line-height: 24px;
}

.fmt-fato strong {
    font-weight: 700;
}

.fmt-fato::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.fmt-fato--prazo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230050A8' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E");
}

.fmt-fato--tempo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230050A8' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
}

/* Pessoa é crachá, nunca silhueta (regra da casa para ícone). */
.fmt-fato--quem::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230050A8' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2.75' y='2.75' width='10.5' height='11.5' rx='2'/%3E%3Cpath d='M6.5 2.75h3M5.5 7.5h5M5.5 10.5h3'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   5. OS BLOCOS NUMERADOS
   Número em círculo de 40px; quando o bloco está respondido, o número vira
   um visto (o JS põe .is-feito). Título de 32px de linha centrado no círculo
   pelos 4px de cima.
   -------------------------------------------------------------------------- */
.fmt-bloco {
    padding: 23px;
    background: #fff;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    scroll-margin-top: 96px;
    transition: border-color .2s var(--fmt-ease), box-shadow .2s var(--fmt-ease);
}

.fmt-bloco__topo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 24px;
}

.fmt-bloco__num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--fmt-gelo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0 0;
    color: var(--fmt-azul);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--fmt-ease), color .2s var(--fmt-ease), background-size .25s var(--fmt-ease);
}

.fmt-bloco.is-feito .fmt-bloco__num {
    background-color: var(--fmt-azul);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    color: transparent;
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-bloco__titulo {
    margin-top: 4px !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: var(--fmt-tinta);
    text-wrap: balance;
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-bloco__ajuda {
    max-width: 64ch;
    margin-top: 4px !important;
    color: var(--fmt-suave);
}

/* O TRILHO: no desktop tudo o que vem depois do topo alinha com o título,
   não com o número. Os números ficam sozinhos na margem e a leitura desce
   numa coluna só. 40 do número + 16 de vão = 56. */
@media (min-width: 768px) {
    .fmt-bloco > :not(.fmt-bloco__topo) {
        margin-left: 56px;
    }
}

/* Duas perguntas no mesmo bloco: separadas por linha, 24 + 24. */
.fmt-sub + .fmt-sub {
    margin-top: 24px;
    padding-top: 23px;
    border-top: 1px solid var(--fmt-linha);
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-sub__titulo {
    display: block;
    margin: 0;
    color: var(--fmt-tinta);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

:is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-sub__ajuda {
    margin: 0 0 16px !important;
    color: var(--fmt-suave);
}

.fmt-opcional {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--fmt-superficie);
    border: 1px solid var(--fmt-linha);
    color: var(--fmt-suave);
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    vertical-align: 1px;
}


/* --------------------------------------------------------------------------
   6. RÁDIO DO MOODLE, VISUALMENTE ESCONDIDO
   O <input> continua lá, focável e na ordem do teclado: setas trocam a
   escolha, espaço marca. Quem desenha é o <label> que vem logo depois.
   -------------------------------------------------------------------------- */
.fmt-campo fieldset {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fmt-campo .inline-req,
.fmt-campo fieldset > br {
    display: none;
}

/* O Bootstrap põe `float: left; width: 100%` no <legend>. Flutuante, ele
   deixa de ser a legenda "de verdade" do fieldset e vira item da grade:
   ocupava a primeira casa e empurrava os cartões. Sai do fluxo, mas continua
   na árvore de acessibilidade (o JS ainda troca o nome do grupo pela
   pergunta). */
.fmt-campo fieldset > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    float: none;
    white-space: nowrap;
}

.fmt-campo input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.fmt-campo label {
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   7. OS CARTÕES DE PROFESSOR
   Quatro por linha; dois no celular. A foto ocupa o topo do cartão inteiro
   (quadrada, raio 12 dentro do raio 16 do cartão, 8 de respiro).

   FOTOS — UMA LINHA POR PROFESSOR, NO BLOCO 7a ABAIXO. Sem foto, o cartão
   mostra as iniciais (o JS as calcula do nome) sobre o gradiente da marca.
   -------------------------------------------------------------------------- */
.fmt-prof fieldset {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fmt-prof label {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    padding: 7px 7px 15px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
    color: var(--fmt-tinta);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    transition:
        transform .2s var(--fmt-ease),
        box-shadow .2s var(--fmt-ease),
        border-color .2s var(--fmt-ease),
        background-color .2s var(--fmt-ease);
}

/* A foto. As iniciais ficam no `content` e somem quando há foto. */
.fmt-prof label::before {
    content: attr(data-ini);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 12px;
    background-color: #0B4592;
    background-image: var(--foto, linear-gradient(160deg, #0D57B5 0%, #0A2F66 100%));
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--ini-cor, rgba(255, 255, 255, .92));
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: .04em;
    transition: filter .2s var(--fmt-ease), opacity .2s var(--fmt-ease);
}

/* O visto: aparece no canto da foto ao marcar. */
.fmt-prof label::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
        var(--fmt-azul);
    box-shadow: 0 2px 8px rgba(10, 38, 71, .24);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .15s var(--fmt-ease), transform .25s var(--fmt-ease);
}

.fmt-prof input:checked + label {
    border-color: var(--fmt-azul);
    background: var(--fmt-gelo);
    box-shadow: 0 0 0 1px var(--fmt-azul), 0 8px 24px rgba(0, 80, 168, .16);
}

.fmt-prof input:checked + label::after {
    opacity: 1;
    transform: scale(1);
}

/* Escolhido um, os outros recuam um passo: a foto perde cor, não some. */
.fmt-prof fieldset:has(input:checked) input:not(:checked) + label::before {
    filter: saturate(.35);
    opacity: .8;
}

.fmt-prof input:focus-visible + label {
    outline: 2px solid var(--fmt-azul);
    outline-offset: 2px;
}

/* Hover só com mouse: no toque ele gruda depois do toque. O que se mexe
   (subir, apertar) só sem pedido de movimento reduzido. */
@media (hover: hover) and (pointer: fine) {
    .fmt-prof label:hover {
        border-color: #B7CCE2;
        box-shadow: 0 8px 24px rgba(10, 38, 71, .1);
    }

    .fmt-prof fieldset:has(input:checked) input:not(:checked) + label:hover::before {
        filter: none;
        opacity: 1;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .fmt-prof label:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .fmt-prof label:active {
        transform: scale(.98);
        transition-duration: .1s;
    }
}


/* --------------------------------------------------------------------------
   7a. FOTOS DOS PROFESSORES DESTA TURMA
   Uma linha por professor. O nome entre aspas é EXATAMENTE a opção do campo
   `professor` (com acento), nos dois seletores: o primeiro pinta o cartão do
   formulário, o segundo a foto do resumo depois de responder. A imagem vai
   embutida (data:) pelo montar-entrega.mjs, para a atividade não depender de
   arquivo em outro lugar.

   Sem foto: deixe a linha comentada e o cartão mostra as iniciais.
   -------------------------------------------------------------------------- */
/* .fmt-prof input[value="Marino Alves"] + label,     .fmt-resumo__item--prof[data-prof="Marino Alves"]     { --foto: url("fotos/marino-alves.jpg");     --ini-cor: transparent; } */
/* .fmt-prof input[value="Nayara Brito"] + label,     .fmt-resumo__item--prof[data-prof="Nayara Brito"]     { --foto: url("fotos/nayara-brito.jpg");     --ini-cor: transparent; } */
/* .fmt-prof input[value="Fábio Ribeiro"] + label,    .fmt-resumo__item--prof[data-prof="Fábio Ribeiro"]    { --foto: url("fotos/fabio-ribeiro.jpg");    --ini-cor: transparent; } */
/* .fmt-prof input[value="Rafael Sousa"] + label,     .fmt-resumo__item--prof[data-prof="Rafael Sousa"]     { --foto: url("fotos/rafael-sousa.jpg");     --ini-cor: transparent; } */
/* .fmt-prof input[value="Adriana Pavarina"] + label, .fmt-resumo__item--prof[data-prof="Adriana Pavarina"] { --foto: url("fotos/adriana-pavarina.jpg"); --ini-cor: transparent; } */
/* .fmt-prof input[value="Eduardo Porto"] + label,    .fmt-resumo__item--prof[data-prof="Eduardo Porto"]    { --foto: url("fotos/eduardo-porto.jpg");    --ini-cor: transparent; } */
/* .fmt-prof input[value="Felipe Otávio"] + label,    .fmt-resumo__item--prof[data-prof="Felipe Otávio"]    { --foto: url("fotos/felipe-otavio.jpg");    --ini-cor: transparent; } */
/* .fmt-prof input[value="Ricardo Leal"] + label,     .fmt-resumo__item--prof[data-prof="Ricardo Leal"]     { --foto: url("fotos/ricardo-leal.jpg");     --ini-cor: transparent; } */


/* --------------------------------------------------------------------------
   8. SIM / NÃO
   Dois cartões lado a lado. A linha de baixo de cada um (o que o "sim"
   significa) vem do CSS, porque a opção do campo tem que continuar sendo só
   "Sim" e "Não": é o que sai na exportação.
   -------------------------------------------------------------------------- */
.fmt-simnao fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
    gap: 16px;
}

.fmt-simnao label {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--fmt-linha);
    border-radius: 12px;
    background: #fff;
    color: var(--fmt-tinta);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    cursor: pointer;
    transition: border-color .2s var(--fmt-ease), background-color .2s var(--fmt-ease), box-shadow .2s var(--fmt-ease), transform .1s var(--fmt-ease);
}

/* O círculo do rádio, desenhado. */
.fmt-simnao label::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid var(--fmt-borda-campo);
    border-radius: 50%;
    background: #fff;
    /* O miolo cresce por sombra interna: borda que engrossa recalcula layout. */
    transition: box-shadow .15s var(--fmt-ease), border-color .15s var(--fmt-ease);
}

.fmt-simnao label::after {
    grid-column: 2;
    grid-row: 2;
    color: var(--fmt-suave);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.fmt-simnao[data-fmt-campo="orador"] input[value="Sim"] + label::after { content: "Quero falar em nome da turma"; }
.fmt-simnao[data-fmt-campo="juramentista"] input[value="Sim"] + label::after { content: "Quero conduzir o juramento"; }
.fmt-simnao input[value="Não"] + label::after { content: "Desta vez, não"; }

.fmt-simnao input:checked + label {
    border-color: var(--fmt-azul);
    background: var(--fmt-gelo);
    box-shadow: inset 0 0 0 1px var(--fmt-azul);
}

.fmt-simnao input:checked + label::before {
    border-color: var(--fmt-azul);
    box-shadow: inset 0 0 0 5px var(--fmt-azul);
}

.fmt-simnao input:focus-visible + label {
    outline: 2px solid var(--fmt-azul);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .fmt-simnao label:hover {
        border-color: #B7CCE2;
    }

    .fmt-simnao input:not(:checked) + label:hover::before {
        border-color: var(--fmt-azul);
    }
}

/* .99 e não .97: a linha tem 600px, e 3% dela já é um salto. */
@media (prefers-reduced-motion: no-preference) {
    .fmt-simnao label:active {
        transform: scale(.99);
    }
}


/* O <label> que o Moodle põe antes do campo de texto só carrega o nome
   técnico ("whatsapp") e o ícone de obrigatório. Em linha, ele abria uma
   linha vazia de 24px entre a ajuda e a caixa. O rótulo de verdade é o do
   template (for="[[whatsapp#id]]"); este sai da tela e fica na árvore. */
.fmt-texto > div > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   9. CAMPOS DE TEXTO
   48px de altura (1 + 11 + 24 + 11 + 1). 16px de fonte: abaixo disso o
   Safari do iPhone dá zoom ao focar.
   -------------------------------------------------------------------------- */
.fmt-texto > div {
    display: block !important;
}

.fmt-texto input.mod-data-input,
.fmt-texto textarea {
    display: block !important;
    width: 100%;
    height: 48px;
    padding: 11px 15px;
    border: 1px solid var(--fmt-borda-campo);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    color: var(--fmt-tinta);
    font-size: 16px;
    line-height: 24px;
    transition: border-color .15s var(--fmt-ease), box-shadow .15s var(--fmt-ease);
}

.fmt-texto[data-fmt-tipo="whatsapp"] input.mod-data-input {
    max-width: 320px;
    font-variant-numeric: tabular-nums;
}

.fmt-texto textarea {
    height: auto;
    min-height: 120px;              /* 4 linhas de 24 + 12 + 12 */
    resize: vertical;
}

.fmt-texto input.mod-data-input::placeholder,
.fmt-texto textarea::placeholder {
    color: #6A7F94;
    opacity: 1;
}

.fmt-texto input.mod-data-input:focus,
.fmt-texto textarea:focus {
    border-color: var(--fmt-azul);
    outline: 0;
    box-shadow: 0 0 0 1px var(--fmt-azul), 0 0 0 5px rgba(0, 176, 240, .22);
}

.fmt-contador {
    margin-top: 8px !important;
    color: var(--fmt-suave);
    font-size: 14px;
    line-height: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fmt-contador.is-perto {
    color: #8A4B00;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   10. ERROS
   O nosso (o JS valida antes de enviar) e o do Moodle (quando o envio volta
   do servidor sem um campo obrigatório: .alert-danger dentro do campo).
   -------------------------------------------------------------------------- */
.fmt-erro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px !important;
    color: var(--fmt-erro);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.fmt-erro::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23B42318'/%3E%3Cpath d='M8 4.5v4' stroke='%23fff' stroke-width='1.75' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.fmt-bloco.tem-erro {
    border-color: var(--fmt-erro);
    box-shadow: 0 0 0 1px var(--fmt-erro);
}

.fmt-sub.tem-erro .fmt-texto input.mod-data-input,
.fmt-sub.tem-erro .fmt-simnao label,
.fmt-bloco.tem-erro .fmt-prof label {
    border-color: #E8A39B;
}

.fmt-sub.tem-erro .fmt-texto input.mod-data-input {
    border-color: var(--fmt-erro);
}

.fmt-campo .alert-danger {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--fmt-erro-fundo);
    color: var(--fmt-erro);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.fmt-campo .alert-danger .btn-close {
    display: none;
}


/* --------------------------------------------------------------------------
   11. A BARRA DE ENVIO
   Os botões do Moodle viram uma barra presa ao pé da tela enquanto o
   formulário rola: o progresso (o JS injeta) à esquerda, Cancelar e Enviar à
   direita. Sem JS, só os botões, alinhados à direita.
   -------------------------------------------------------------------------- */
body#page-mod-data-edit #region-main form .generalbox > .mt-2 {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 24px !important;
    padding: 15px 15px 15px 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(10, 38, 71, .14);
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 .btn {
    margin: 0 !important;
}

/* Com o limite de 1 resposta por aluno o Moodle não desenha este botão. Se a
   configuração escapar, ele também não aparece. */
body#page-mod-data-edit input[name="saveandadd"] {
    display: none !important;
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"] {
    order: 3;
    height: 48px;
    padding: 0 32px;
    border: 0;
    border-radius: 999px;
    background: var(--fmt-azul);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: background-color .15s var(--fmt-ease), transform .1s var(--fmt-ease);
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"]:hover {
    background: var(--fmt-azul-forte);
}

@media (prefers-reduced-motion: no-preference) {
    body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"]:active {
        transform: scale(.97);
    }
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"]:focus-visible {
    outline: 2px solid var(--fmt-azul);
    outline-offset: 2px;
    box-shadow: none;
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"]:disabled {
    opacity: .72;
    cursor: progress;
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 a.btn-secondary {
    order: 2;
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fmt-azul);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

body#page-mod-data-edit #region-main form .generalbox > .mt-2 a.btn-secondary:hover {
    background: var(--fmt-gelo);
    color: var(--fmt-azul-forte);
}

.fmt-progresso {
    order: 1;
    flex: 1 1 auto;
    display: grid;
    gap: 8px;
    min-width: 0;
    max-width: 320px;
    margin-right: auto;
}

.fmt-progresso__texto {
    color: var(--fmt-suave);
    font-size: 14px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.fmt-progresso__texto strong {
    color: var(--fmt-tinta);
    font-weight: 700;
}

.fmt-progresso__trilho {
    height: 8px;
    border-radius: 999px;
    background: var(--fmt-gelo);
    overflow: hidden;
}

.fmt-progresso__barra {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fmt-azul) 0%, var(--fmt-ciano) 100%);
    transition: width .25s var(--fmt-ease);   /* width e não scaleX: a escala achataria as pontas redondas */
}


/* --------------------------------------------------------------------------
   12. CELULAR
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fmt {
        gap: 16px;
    }

    .fmt-abre,
    .fmt-bloco {
        padding: 15px;
    }

    :is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-abre__titulo {
        font-size: 20px;
        line-height: 32px;
    }

    .fmt-bloco__topo {
        column-gap: 16px;
        row-gap: 8px;
        margin-bottom: 16px;
    }

    /* No celular a ajuda desce para a largura inteira: recuada sob o título
       ela ficava com 230px e cinco linhas. */
    .fmt-bloco__textos {
        display: contents;
    }

    :is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-bloco__ajuda {
        grid-column: 1 / -1;
        margin-top: 0 !important;
    }

    /* 4 em cima e 4 embaixo: com uma linha o título tem os 40 do número;
       com duas, 72. Só 4 em cima dava 68 e tirava o bloco do grid. */
    :is(#page-mod-data-edit, #page-mod-data-view) #region-main .fmt-bloco__titulo {
        margin-bottom: 4px !important;
        font-size: 18px;
        line-height: 32px;
    }

    .fmt-prof fieldset {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .fmt-prof label::after {
        top: 16px;
        right: 16px;
        width: 24px;
        height: 24px;
        background-size: 12px 12px, auto;
    }

    .fmt-simnao fieldset {
        gap: 8px;
    }

    .fmt-texto[data-fmt-tipo="whatsapp"] input.mod-data-input {
        max-width: none;
    }

    body#page-mod-data-edit #region-main form .generalbox > .mt-2 {
        bottom: 8px;
        flex-wrap: wrap;
        gap: 8px;
        padding: 15px;
    }

    .fmt-progresso {
        flex-basis: 100%;
        max-width: none;
        margin: 0 0 8px;
    }

    body#page-mod-data-edit #region-main form .generalbox > .mt-2 input[name="saveandview"] {
        flex: 1 1 auto;
    }
}


/* --------------------------------------------------------------------------
   13. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body#page-mod-data-edit *,
    body#page-mod-data-edit *::before,
    body#page-mod-data-edit *::after,
    body#page-mod-data-view *,
    body#page-mod-data-view *::before,
    body#page-mod-data-view *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ==========================================================================
   PÁGINAS DE VISÃO (view.php)
   O view.php serve ao aluno três situações: antes de responder (o estado
   vazio do Moodle vira o convite), depois de responder (a entrada dele, em
   visualização única logo após salvar, em lista quando ele volta outro dia)
   e fora do prazo (o Moodle não imprime nada no miolo). Quem gerencia a
   atividade continua com as ferramentas do Moodle (ver "QUEM GERENCIA", §1).
   ========================================================================== */


/* --------------------------------------------------------------------------
   14. AS DATAS NO HERÓI
   No 5.2 o "Aberto:" e o "Fecha:" saem dentro do #page-header (no
   .header-extras-container). Sobre o azul, viram duas etiquetas claras.
   -------------------------------------------------------------------------- */
body#page-mod-data-view #page-header .header-extras-container {
    margin: 16px 0 0 !important;   /* .ms-auto é !important */
}

body#page-mod-data-view #page-header .header-extras-container:empty {
    margin: 0 !important;
}

body#page-mod-data-view #page-header .activity-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Bloco, não flex: num flex o espaço entre "Fecha:" e a data some. */
body#page-mod-data-view #page-header .date-item {
    display: block;
    min-width: 0;
    margin: 0;
    white-space: normal;   /* o Boost põe nowrap: no celular a data vazava do herói */
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px;
    background: rgba(10, 38, 71, .36);
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    line-height: 24px;
}

body#page-mod-data-view #page-header .date-item-label {
    margin-right: 0;   /* o Boost põe .25rem, e o template já tem o espaço */
    color: #fff;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   15. O CONVITE (antes de responder)
   O Moodle mostra a descrição da atividade e, embaixo, "Nenhum item
   ainda" com o botão "Adicionar Item". Para o aluno isso é o convite: a
   descrição e o botão viram um cartão só, a figura e o "Nenhum item ainda"
   saem e o JS troca o texto do botão para "Responder agora".
   -------------------------------------------------------------------------- */
/* O Boost centra o cabeçalho com `margin: 0 auto !important` e não dá a ele
   os 15px de respiro que o miolo tem; sem isso o cartão sai mais largo que o
   herói. */
body#page-mod-data-view .activity-header {
    margin: 0 15px 24px !important;
}

/* A caixa cinza de 5px de raio que o Boost põe em volta da descrição sai: o
   cartão é a própria descrição. */
body#page-mod-data-view .activity-header .activity-details {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

body#page-mod-data-view .activity-header .activity-description {
    margin: 0;
    padding: 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
}

body#page-mod-data-view #intro .box {
    margin: 0;
    padding: 0 !important;   /* .py-3 */
    border: 0;
    background: none;
}

body#page-mod-data-view #intro .no-overflow {
    color: var(--fmt-tinta);
    font-size: 16px;
    line-height: 24px;
}

body#page-mod-data-view #intro .no-overflow > * {
    margin: 0;
}

body#page-mod-data-view #intro .no-overflow > * + * {
    margin-top: 16px;
}

/* A primeira frase é a chamada; a última, o lembrete de que dá para mudar. */
body#page-mod-data-view #intro .no-overflow > p:first-child {
    max-width: 48ch;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    text-wrap: balance;
}

body#page-mod-data-view #intro .no-overflow > p:last-child:not(:first-child) {
    color: var(--fmt-suave);
}

/* Os três passos com o mesmo número em círculo dos blocos do formulário. */
body#page-mod-data-view #intro ol {
    display: grid;
    gap: 8px;
    padding: 0;
    list-style: none;
    counter-reset: fmt-passo;
}

body#page-mod-data-view #intro ol > li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 32px;
    counter-increment: fmt-passo;
}

body#page-mod-data-view #intro ol > li::before {
    content: counter(fmt-passo, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fmt-gelo);
    color: var(--fmt-azul);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
}

body#page-mod-data-view [data-region="empty-message"] {
    margin: 0 !important;            /* .mt-4 */
    padding: 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
    text-align: left !important;     /* .text-center */
}

body#page-mod-data-view [data-region="empty-message"] > img,
body#page-mod-data-view [data-region="empty-message"] > h5 {
    display: none;
}

body#page-mod-data-view [data-region="empty-message"] #action_bar {
    margin: 0 !important;            /* .mt-5 */
}

/* Com descrição, os dois viram um cartão: a descrição perde a borda de
   baixo, o botão perde a de cima, e uma linha separa os dois. */
body#page-mod-data-view:has(#intro):has([data-region="empty-message"]) .activity-header {
    margin-bottom: 0 !important;
}

body#page-mod-data-view:has([data-region="empty-message"]) #intro {
    padding-bottom: 24px;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
}

body#page-mod-data-view:has(#intro) [data-region="empty-message"] {
    padding-top: 0;
    border-top: 0;
    border-radius: 0 0 16px 16px;
}

body#page-mod-data-view:has(#intro) [data-region="empty-message"] #action_bar {
    padding-top: 23px;
    border-top: 1px solid var(--fmt-linha);
}

body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin: 0;
    padding: 0 24px 0 32px;
    border: 0;
    border-radius: 999px;
    background: var(--fmt-azul);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    transition: background-color .15s var(--fmt-ease), transform .1s var(--fmt-ease);
}

body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"]::after {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    transition: transform .2s var(--fmt-ease);
}

body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"]:hover {
    background: var(--fmt-azul-forte);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"]:hover::after {
        transform: translateX(2px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"]:active {
        transform: scale(.97);
    }
}

body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"]:focus-visible {
    outline: 2px solid var(--fmt-azul);
    outline-offset: 2px;
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   16. DEPOIS DE RESPONDER: confirmação e lista
   Para o aluno, o seletor "Visão única / Ver lista" e o formulário de
   busca não têm uso (ele só vê a própria resposta) e saem. A descrição da
   atividade também: o convite já foi aceito.
   -------------------------------------------------------------------------- */
body#page-mod-data-view:not(:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"])) .tertiary-navigation,
body#page-mod-data-view:not(:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"])) .tertiary-navigation + hr,
body#page-mod-data-view:not(:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"])) .datapreferences {
    display: none !important;
}

/* Para quem gerencia a barra fica. O .row do Bootstrap tem margem de -12px
   e a página no celular só tem 8 de respiro: a barra passava 4px da tela e
   a página rolava para o lado. Sem calha, as colunas encostam na borda dos
   cartões, como antes, e nada sai. */
body#page-mod-data-view .tertiary-navigation > .row {
    --bs-gutter-x: 0;
}

/* Quem gerencia vê a lista de todos: o "Você já respondeu" não é com ele. */
body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt-lista__topo {
    display: none;
}

body#page-mod-data-view:has(.fmt-pronto, .fmt-lista, .fmt-fechada) .activity-header {
    display: none;
}

body#page-mod-data-view #data-singleview-content,
body#page-mod-data-view #data-listview-content {
    padding: 0 !important;   /* .py-3 */
}

/* A confirmação: o selo, o título e o botão de mudar, centrados. */
.fmt-pronto__topo {
    display: grid;
    justify-items: center;
    padding: 39px 23px 31px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background:
        radial-gradient(80% 100% at 50% 0%, var(--fmt-gelo) 0%, rgba(234, 246, 252, 0) 72%),
        #fff;
    text-align: center;
}

.fmt-pronto__selo {
    width: 64px;
    height: 64px;
    margin: 8px 0 24px;       /* o anel de 8 conta como respiro */
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 32px 32px no-repeat,
        var(--fmt-azul);
    box-shadow: 0 0 0 8px rgba(0, 80, 168, .12);
    animation: fmt-selo .5s var(--fmt-ease) both;
}

@keyframes fmt-selo {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

#page-mod-data-view #region-main .fmt-pronto__titulo,
#page-mod-data-view #region-main .fmt-lista__titulo {
    color: var(--fmt-tinta);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-wrap: balance;
}

#page-mod-data-view #region-main .fmt-pronto__texto {
    max-width: 48ch;
    margin-top: 8px !important;
    color: var(--fmt-suave);
    text-wrap: pretty;
}

.fmt-pronto__acoes {
    margin-top: 24px;
}

/* Sem ##edit## (resposta aprovada por engano, ou prazo no fim) não sobra
   moldura vazia. */
.fmt-pronto__acoes:empty,
.fmt-resumo__editar:empty {
    display: none;
}

/* ##edit## é um lápis de 16px. Vira o botão "Mudar minhas respostas"; o JS
   dá ao link o mesmo nome para o leitor de tela. */
.fmt [data-fmt-editar] a.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin: 0;
    padding: 0 23px;
    border: 1px solid var(--fmt-azul);
    border-radius: 999px;
    background: #fff;
    color: var(--fmt-azul);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s var(--fmt-ease), color .15s var(--fmt-ease), transform .1s var(--fmt-ease);
}

.fmt [data-fmt-editar] a.action-icon::after {
    content: "Mudar minhas respostas";
}

/* Quem gerencia edita a resposta de outra pessoa: "minhas" seria mentira. */
body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt [data-fmt-editar] a.action-icon::after {
    content: "Editar resposta";
}

/* ##delete## (só na lista) serve a quem gerencia: limpar resposta de teste.
   O Moodle também o imprime para o dono do item não aprovado; para o aluno
   fica escondido, que apagar o próprio voto não é ação desta tela. O link
   leva à confirmação do Moodle ("Tem certeza que quer excluir este item?"). */
.fmt-resumo__editar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fmt [data-fmt-editar] .delete {
    display: none;
}

body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt [data-fmt-editar] .delete {
    display: block;
}

body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt [data-fmt-editar] .delete a.action-icon {
    border-color: var(--fmt-erro);
    color: var(--fmt-erro);
}

body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt [data-fmt-editar] .delete a.action-icon::after {
    content: "Excluir";
}

body#page-mod-data-view:has(a[href*="/mod/data/field.php"], a[href*="/mod/data/templates.php"], a[href*="/mod/data/import.php"]) .fmt [data-fmt-editar] .delete a.action-icon:hover {
    background: var(--fmt-erro-fundo);
    color: var(--fmt-erro);
}

.fmt [data-fmt-editar] a.action-icon .icon {
    width: 16px;
    height: 16px;
    margin: 0;
    color: inherit;
    font-size: 16px;
    line-height: 16px;
}

.fmt [data-fmt-editar] a.action-icon:hover {
    background: var(--fmt-gelo);
    color: var(--fmt-azul-forte);
}

@media (prefers-reduced-motion: no-preference) {
    .fmt [data-fmt-editar] a.action-icon:active {
        transform: scale(.97);
    }
}

.fmt [data-fmt-editar] a.action-icon:focus-visible {
    outline: 2px solid var(--fmt-azul);
    outline-offset: 2px;
    box-shadow: none;
}

/* O resumo: um recibo das respostas. */
.fmt-resumo {
    padding: 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
}

#page-mod-data-view #region-main .fmt-resumo__titulo {
    color: var(--fmt-tinta);
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
}

.fmt-resumo__titulo a {
    color: inherit;
    text-decoration: none;
}

.fmt-resumo__titulo a:hover {
    text-decoration: underline;
}

.fmt-resumo__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fmt-resumo__lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    margin: 16px 0 0;
}

.fmt-resumo__item {
    min-width: 0;
    padding: 15px 0 16px;
    border-top: 1px solid var(--fmt-linha);
}

.fmt-resumo__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.fmt-resumo__item--prof,
.fmt-resumo__item--recado {
    grid-column: 1 / -1;
}

.fmt-resumo__item dt {
    margin: 0;
    color: var(--fmt-suave);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.fmt-resumo__item dd {
    margin: 0;
    color: var(--fmt-tinta);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    overflow-wrap: anywhere;
}

/* O professor escolhido, com a foto (ou as iniciais) do cartão do
   formulário. O JS põe o nome em data-prof e as iniciais em data-ini; sem
   JS fica só o texto. */
.fmt-resumo__item--prof[data-ini] {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 16px;
    align-content: center;
}

.fmt-resumo__item--prof[data-ini]::before {
    content: attr(data-ini);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: #0B4592;
    background-image: var(--foto, linear-gradient(160deg, #0D57B5 0%, #0A2F66 100%));
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--ini-cor, rgba(255, 255, 255, .92));
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: .04em;
}

.fmt-resumo__item--prof[data-ini] dt {
    align-self: end;
}

.fmt-resumo__item--prof[data-ini] dd {
    align-self: start;
    font-size: 20px;
    line-height: 32px;
}

/* Sim e Não com o mesmo círculo dos cartões do formulário. */
.fmt-resumo dd[data-valor] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fmt-resumo dd[data-valor]::before {
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
        var(--fmt-azul);
}

.fmt-resumo dd[data-valor="nao"]::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234C6478' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E") center / 14px 14px no-repeat,
        var(--fmt-superficie);
    box-shadow: inset 0 0 0 1px var(--fmt-linha);
}

/* O recado, como um bilhete. Sem recado, uma linha discreta. O Moodle pode
   devolver o campo vazio de dois jeitos: nada, ou um .text_to_html vazio. */
.fmt-resumo dd[data-fmt-recado] {
    margin-top: 8px;
    padding: 16px;
    border-radius: 12px;
    background: var(--fmt-superficie);
    font-weight: 400;
}

.fmt-resumo dd[data-fmt-recado]:is(:empty, :has(> .text_to_html:empty)) {
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--fmt-suave);
}

.fmt-resumo dd[data-fmt-recado]:empty::before,
.fmt-resumo dd[data-fmt-recado] > .text_to_html:empty::before {
    content: "Você não deixou recado.";
}

#page-mod-data-view #region-main .fmt-resumo__quando {
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid var(--fmt-linha);
    color: var(--fmt-suave);
    font-size: 14px;
    line-height: 24px;
}

/* A lista: o aluno voltou outro dia. Um aviso curto em cima, com o mesmo
   visto dos blocos respondidos, e o recibo embaixo. */
.fmt-lista__topo {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding: 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
}

.fmt-lista__topo::before {
    content: "";
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
        var(--fmt-azul);
}

#page-mod-data-view #region-main .fmt-lista__titulo {
    margin-top: 4px !important;
    font-size: 20px;
}

#page-mod-data-view #region-main .fmt-lista__texto {
    margin-top: 4px !important;
    color: var(--fmt-suave);
}


/* --------------------------------------------------------------------------
   17. FORA DO PRAZO
   Fechada (ou ainda não aberta) a atividade, o Moodle não imprime nada no
   miolo para o aluno: só as datas no herói. O JS põe ali um cartão dizendo
   o que aconteceu. Sem JS, ficam a descrição e as datas.
   -------------------------------------------------------------------------- */
.fmt-fechada {
    gap: 0;
    justify-items: center;
    padding: 39px 23px;
    border: 1px solid var(--fmt-linha);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.fmt-fechada__selo {
    width: 64px;
    height: 64px;
    margin: 8px 0 24px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230050A8' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
        var(--fmt-gelo);
    box-shadow: 0 0 0 8px rgba(0, 80, 168, .06);
}

#page-mod-data-view #region-main .fmt-fechada__titulo {
    margin: 0;
    color: var(--fmt-tinta);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

#page-mod-data-view #region-main .fmt-fechada__texto {
    max-width: 48ch;
    margin: 8px 0 0;
    color: var(--fmt-suave);
    text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   18. PÁGINAS DE VISÃO NO CELULAR
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body#page-mod-data-view .activity-header {
        margin: 0 0 16px !important;
    }

    body#page-mod-data-view .activity-header .activity-description,
    body#page-mod-data-view [data-region="empty-message"],
    .fmt-resumo,
    .fmt-lista__topo {
        padding: 15px;
    }

    body#page-mod-data-view:has([data-region="empty-message"]) #intro {
        padding-bottom: 16px;
    }

    body#page-mod-data-view:has(#intro) [data-region="empty-message"] {
        padding-top: 0;
    }

    body#page-mod-data-view:has(#intro) [data-region="empty-message"] #action_bar {
        padding-top: 15px;
    }

    body#page-mod-data-view #intro .no-overflow > p:first-child {
        font-size: 18px;
    }

    body#page-mod-data-view [data-region="empty-message"] .singlebutton [type="submit"],
    .fmt [data-fmt-editar] a.action-icon {
        width: 100%;
        justify-content: center;
    }

    .fmt-pronto__topo,
    .fmt-fechada {
        padding: 31px 15px 23px;
    }

    .fmt-pronto__acoes,
    .fmt-resumo__editar {
        width: 100%;
    }

    .fmt-resumo__editar {
        flex-direction: column;
    }

    .fmt-resumo__lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .fmt-resumo__item--prof[data-ini] {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .fmt-resumo__item--prof[data-ini]::before {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }

    #page-mod-data-view #region-main .fmt-pronto__titulo,
    #page-mod-data-view #region-main .fmt-fechada__titulo {
        font-size: 20px;
    }

    #page-mod-data-view #region-main .fmt-lista__titulo {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fmt-pronto__selo {
        animation: none;
    }
}