/* Painel interno, poucos operadores confiáveis — CSS simples e autocontido, sem dependência
   externa nenhuma (nenhum CDN), de propósito: este app roda isolado, não precisa de build de
   frontend nem de framework visual. */

:root {
    /* Identidade do app (app/src/theme/tokens.ts): preto carbono, texto creme, botões e links cremes.
       O azul #29B6F6 é a cor de marca do Gymu (destaques e foco), nunca o fundo de um botão. */
    --fundo: #121212;
    --superficie: #1e1e1e;
    --superficie-elevada: #2a2a2a;
    --borda: #333333;
    --texto: #f5efe7;
    --texto-fraco: #afafaf;
    --texto-mudo: #767676;
    --acento: #f5efe7;
    --sobre-acento: #0b0b0b;
    --marca: #29b6f6;
    --perigo: #ff5c4d;
    --sucesso: #30a46c;
    --alerta: #ffb454;
    --raio: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
}

a { color: var(--acento); }

.topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 12px 24px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}

.topo-marca { font-weight: 700; }
.topo-marca span { color: var(--marca); font-weight: 400; }

.topo-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1; }
.topo-nav a { white-space: nowrap; }
.topo-nav a { text-decoration: none; color: var(--texto); }
.topo-nav a:hover { color: var(--acento); }

.topo-conta { display: flex; align-items: center; gap: 12px; color: var(--texto-fraco); }
.topo-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; text-decoration: none; color: var(--texto); border: 1px solid var(--borda); border-radius: 50%; }
.topo-ajuda:hover { color: var(--acento); border-color: var(--acento); }
.topo-unidade { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--texto-fraco); }
.topo-unidade label { margin: 0; font-size: 0.85rem; }
.topo-unidade select { width: auto; margin: 0; padding: 4px 8px; }

/* Ocupa a largura toda da janela; formulários limitam a própria largura no cartão. */
.conteudo { padding: 24px; }

.alerta { padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; }
.alerta-ok { background: rgba(48, 164, 108, 0.15); border: 1px solid var(--sucesso); }
.alerta-aviso { background: rgba(255, 180, 84, 0.12); border: 1px solid var(--alerta); }
.alerta-erro { background: rgba(255, 92, 77, 0.14); border: 1px solid var(--perigo); }

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 20px;
    margin-bottom: 20px;
}

label { display: block; margin: 12px 0 4px; color: var(--texto-fraco); font-size: 13px; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="datetime-local"], textarea, select {
    width: 100%;
    padding: 8px 10px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto);
    font-size: 14px;
}

button, .botao {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--raio);
    border: 1px solid var(--acento);
    background: transparent;
    color: var(--acento);
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    /* Link (.botao em <a>) e <button> com a mesma altura e a mesma fonte: sem isto o <button> usa a fonte e o espaçamento de linha do
       sistema e o <a> os do texto da página, e dois botões lado a lado ficam com alturas diferentes e desalinhados. */
    font-family: inherit;
    line-height: 1.25;
    box-sizing: border-box;
    vertical-align: middle;
}

button:hover, .botao:hover { background: rgba(245, 239, 231, 0.10); }

.botao-perigo { border-color: var(--perigo); color: var(--perigo); }
.botao-perigo:hover { background: rgba(255, 92, 77, 0.12); }
.botao:disabled, .botao[disabled] { opacity: 0.4; cursor: not-allowed; }
.botao[aria-busy="true"] { cursor: progress; }

.botao-primario { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }

.link-botao {
    background: none;
    border: none;
    color: var(--texto-fraco);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); font-size: 14px; }
th { color: var(--texto-fraco); font-weight: 600; vertical-align: bottom; }
td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.quebra { word-break: break-word; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--borda); }
.tag-premium { background: rgba(48, 164, 108, 0.25); color: var(--sucesso); }
.tag-gratuito { background: rgba(153, 153, 153, 0.25); color: var(--texto-fraco); }
.tag-bloqueado { background: rgba(255, 92, 77, 0.24); color: var(--perigo); }
/* Convite que vai vencer parado (a pessoa não confirmou o e-mail): faixa lateral para o gestor achar na lista. */
.linha-parada td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }

.campo-erro { color: var(--perigo); font-size: 13px; margin-top: 2px; }
.ajuda { color: var(--texto-fraco); font-size: 13px; }

/* Escolha Gestor / Professor no topo das telas de login. */
.escolha-de-perfil { display: flex; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; margin-bottom: 20px; }
.escolha-de-perfil a { flex: 1; text-align: center; padding: 9px 12px; color: var(--texto-fraco); text-decoration: none; font-size: 14px; }
.escolha-de-perfil a:hover { color: var(--texto); }
.escolha-de-perfil a.ativo { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.linha-acoes { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.tabela-scroll { overflow-x: auto; }

/* Contadores no topo de uma listagem. */
.numeros { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; }
.numero { flex: 1 1 120px; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); }
.numero strong { display: block; font-size: 22px; }
.numero span { color: var(--texto-fraco); font-size: 13px; }

/* Filtros em linha: cada campo com largura mínima, quebrando para a linha de baixo. */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros > div { flex: 1 1 180px; }
.filtros > div.filtro-largo { flex: 2 1 260px; }
.filtros label { margin-top: 0; }

.ordenar-mobile { display: none; gap: 8px; align-items: center; margin-bottom: 8px; }
.ordenar-mobile select { width: auto; flex: 1; min-width: 0; }

@media (max-width: 760px) {
    .conteudo { padding: 12px; }
    .cartao { padding: 14px; }
    .topo { padding: 10px 12px; }
    .topo-nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .topo-conta { margin-left: auto; }

    /* Tabelas viram cartões: o rótulo de cada célula vem do cabeçalho (data-label, preenchido por site.js). */
    table.responsiva thead { display: none; }
    table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
    table.responsiva tr { border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px; margin-bottom: 12px; }
    table.responsiva td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--borda); padding: 8px 0; max-width: none !important; text-align: right; white-space: normal; }
    table.responsiva td:last-child { border-bottom: none; }
    table.responsiva td::before { content: attr(data-label); color: var(--texto-fraco); font-weight: 600; text-align: left; flex-shrink: 0; }
    table.responsiva td[data-label=""]::before { content: none; }
    table.responsiva td[data-label=""] { justify-content: flex-end; }
    table.responsiva td .rotacao-controles { justify-content: flex-end; }
    .ordenar-mobile { display: flex; }
}

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

/* Editor da identidade visual (paleta, seletor, campo de texto e pré-visualização). Ver wwwroot/js/editor-tema.js. */
.editor-tema__colunas { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.editor-tema__campos { flex: 1 1 320px; min-width: 0; }
.seletor-cor { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px 12px; margin: 0 0 12px; }
.seletor-cor legend { padding: 0 6px; font-weight: 600; }
.seletor-cor__linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seletor-cor__nativo { width: 44px; height: 36px; padding: 0; border: 1px solid var(--borda); border-radius: 6px; background: none; cursor: pointer; }
.seletor-cor__hex { width: 110px; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.seletor-cor__invalido { border-color: var(--perigo) !important; }
.seletor-cor__padrao { background: none; border: 1px solid var(--borda); color: var(--texto); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.seletor-cor__paleta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.seletor-cor__amostra { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--borda); cursor: pointer; padding: 0; }
.seletor-cor__amostra.selecionada { border-color: var(--texto); box-shadow: 0 0 0 2px var(--acento); }
.editor-tema__avisos { margin: 8px 0 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: rgba(255, 180, 84, 0.14); color: var(--alerta); font-size: 13px; }
.editor-tema__previa-caixa { flex: 0 1 260px; }
.editor-tema__previa { width: 240px; max-width: 100%; border-radius: 18px; border: 1px solid var(--borda); overflow: hidden; background: var(--p-fundo, #121212); color: var(--p-texto, #fff); font-size: 13px; }
.editor-tema__previa .p-topo { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.editor-tema__previa .p-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: var(--p-superficie); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--p-secundario); overflow: hidden; }
.editor-tema__previa .p-logo img { width: 100%; height: 100%; object-fit: contain; }
.editor-tema__previa .p-titulo { font-weight: 700; font-size: 15px; color: var(--p-texto); }
.editor-tema__previa .p-corpo { padding: 6px 14px 12px; }
.editor-tema__previa .p-cartao { background: var(--p-superficie); border: 1px solid var(--p-borda); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.editor-tema__previa .p-legenda { color: var(--p-secundario); font-size: 12px; }
.editor-tema__previa .p-numero { color: var(--p-primaria); font-weight: 700; font-size: 20px; }
.editor-tema__previa .p-barra { height: 6px; border-radius: 3px; background: var(--p-elevada); margin-top: 6px; overflow: hidden; }
.editor-tema__previa .p-barra i { display: block; height: 100%; width: 62%; background: var(--p-primaria); }
.editor-tema__previa .p-selo { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: var(--p-suave); border: 1px solid var(--p-primaria); color: var(--p-texto); font-size: 11px; }
.editor-tema__previa .p-botao { display: block; text-align: center; font-weight: 700; padding: 10px; border-radius: 10px; background: var(--p-primaria); color: var(--p-sobre-primaria); margin-top: 8px; }
.editor-tema__previa .p-abas { display: flex; justify-content: space-around; padding: 8px 0 10px; border-top: 1px solid var(--p-borda); background: var(--p-superficie); font-size: 11px; color: var(--p-secundario); }
.editor-tema__previa .p-abas b { color: var(--p-primaria); }

/* Listas recolhíveis da tela de pessoas (Gymu.Parceiros): seção, busca e paginação. */
details.secao > summary { cursor: pointer; font-size: 20px; font-weight: 700; list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.secao > summary::-webkit-details-marker { display: none; }
details.secao > summary::before { content: "▸"; color: var(--acento); }
details.secao[open] > summary::before { content: "▾"; }
details.secao .contagem { font-size: 14px; font-weight: 400; color: var(--texto-fraco); }
.busca { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.busca input[type="search"] { flex: 1 1 240px; min-width: 0; }
.paginacao { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
input[type="search"] { width: 100%; background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; font: inherit; }

/* Ações de uma pessoa numa linha só (reconfirmar, motivo e desvincular lado a lado). */
td.acoes { white-space: nowrap; }
.acoes-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acoes-inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.acoes-inline input[type="text"] { width: 240px; max-width: 100%; }

/* Ajustes de layout (cabeçalho de página, voltar, datas, logo atual). */
.linha-acoes { align-items: center; }
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 4px; }
.cabecalho-pagina h1 { margin: 0; }
.cabecalho-pagina .botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.voltar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 0; color: var(--texto-fraco); text-decoration: none; font-size: 14px; }
.voltar:hover { color: var(--acento); }

/* Datas: mesmo visual dos outros campos, lado a lado, com o ícone do calendário legível no tema escuro. */
input[type="date"] {
    width: 100%;
    padding: 8px 10px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto);
    font-size: 14px;
    font-family: inherit;
    color-scheme: dark;
}
.campos-em-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); gap: 0 20px; }

/* Miniatura do logo que está salvo (e do arquivo escolhido, antes de salvar). */
.logo-atual { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; flex-wrap: wrap; }
.logo-atual img { width: 72px; height: 72px; object-fit: contain; padding: 4px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.logo-atual figcaption, .logo-atual .legenda { color: var(--texto-fraco); font-size: 13px; }
.logo-atual[hidden] { display: none; }

/* Ação de uma linha de tabela: campo e botão lado a lado. */
.acoes-inline .botao, .acoes-inline button { white-space: nowrap; }

/* "Opções" de uma linha: quando as ações não cabem na mesma linha, ficam num menu ao lado. */
details.opcoes { position: relative; display: inline-block; }
details.opcoes > summary { list-style: none; display: inline-block; padding: 8px 16px; border-radius: var(--raio); border: 1px solid var(--acento); color: var(--acento); cursor: pointer; font-size: 14px; line-height: 1.25; box-sizing: border-box; vertical-align: middle; white-space: nowrap; user-select: none; }
details.opcoes > summary::-webkit-details-marker { display: none; }
details.opcoes > summary::after { content: " ▾"; }
details.opcoes[open] > summary { background: rgba(245, 239, 231, 0.10); }
.opcoes-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(380px, 90vw); padding: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); text-align: left; white-space: normal; }
.opcoes-menu form { margin: 0 0 14px; }
.opcoes-menu form:last-child { margin-bottom: 0; }
.opcoes-menu h3 { margin: 0 0 6px; font-size: 14px; }
.opcoes-menu input[type="text"] { margin-bottom: 8px; }
/* Ordem de rotação (página do aluno): a posição, as setas e o botão ficam num só grupo, alinhados à mesma linha em todas as rotinas. */
.rotacao-controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rotacao-controles form { margin: 0; display: flex; }
.rotacao-controles .posicao-na-rotacao { min-width: 34px; text-align: center; }
.rotacao-controles .botao-icone { flex-shrink: 0; }

td.acoes-celula { white-space: nowrap; }
td.acoes-celula .acoes-linha { flex-wrap: nowrap; }

/* O perfil da sessão ao lado da marca ("Gymu Parceiros - Professor"). */
.topo-marca .topo-perfil { color: var(--texto); font-weight: 600; }
.perfil-da-tela { margin: 0 0 4px; color: var(--marca); font-weight: 600; font-size: 14px; }

/* ── Editor de rotina do professor ─────────────────────────────────────────────────────── */
.editor-intro { margin: 0 0 16px; max-width: 80ch; }
/* A biblioteca cresce com a tela: 380px em janela média, até 640px em tela grande, para os nomes caberem. */
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 640px); gap: 20px; align-items: start; }
.editor-biblioteca { position: sticky; top: 12px; }
.editor-cartao { margin-bottom: 16px; padding: 16px 18px; }
.editor-cartao h2, .biblioteca-cartao h2 { margin: 0 0 12px; font-size: 17px; }
.cabecalho-de-secao { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.grade-de-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.campo-do-editor { display: block; margin: 0; }
.campo-do-editor > span { display: block; margin-bottom: 4px; }
.campo-do-editor.largo { grid-column: span 2; }
.campo-do-editor.tudo { grid-column: 1 / -1; }
textarea { font-family: inherit; resize: vertical; }
input[type="date"], input[type="search"] {
    width: 100%; padding: 8px 10px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; color: var(--texto); font-size: 14px; color-scheme: dark;
}

/* Dias da semana como botões de alternar */
.dias-da-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.dia-chip { margin: 0; position: relative; cursor: pointer; }
.dia-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.dia-chip span { display: inline-block; padding: 6px 11px; border: 1px solid var(--borda); border-radius: 999px; color: var(--texto-fraco); font-size: 13px; user-select: none; }
.dia-chip input:checked + span { background: rgba(245, 239, 231, 0.16); border-color: var(--acento); color: var(--texto); }
.dia-chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

.botao-pequeno { padding: 5px 12px; font-size: 13px; }
.botao-icone { padding: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.botao-icone.desativado { opacity: 0.3; pointer-events: none; }
.vazio-do-editor { color: var(--texto-fraco); padding: 18px 0 6px; margin: 0; text-align: center; }

/* Exercício: um cartão recolhido por padrão, igual ao app */
.exercicio-do-editor { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 8px; background: var(--fundo); }
.exercicio-do-editor.aberto { border-color: #4a4a4a; }
.exercicio-cabecalho { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.exercicio-cabecalho:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; border-radius: 8px; }
.exercicio-seta { width: 14px; color: var(--texto-fraco); flex: none; }
.exercicio-titulo { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.exercicio-titulo strong { overflow-wrap: anywhere; font-size: 15px; }
.exercicio-titulo .ajuda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exercicio-acoes { display: flex; gap: 4px; flex: none; }
.exercicio-corpo { padding: 4px 12px 12px; border-top: 1px solid var(--borda); }
.exercicio-corpo .grade-de-campos { margin: 10px 0; }

/* Séries em tabela compacta */
.series { overflow-x: auto; padding-bottom: 2px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.serie-linha { display: grid; gap: 8px; align-items: center; }
.serie-linha input, .serie-linha select { padding: 6px 8px; }
.serie-titulos span { font-size: 12px; }
.serie-numero { color: var(--texto-fraco); text-align: center; font-size: 13px; }

/* GIF de demonstração */
.gif-caixa { display: inline-block; flex: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; }
.gif-caixa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-caixa.gif-pequeno { width: 46px; height: 46px; }
.gif-caixa.gif-grande { width: min(320px, 100%); height: 320px; border-radius: 8px; }
.gif-caixa.gif-grande img { object-fit: contain; }
.gif-caixa.clicavel { cursor: zoom-in; }
.gif-caixa.sem-gif { opacity: 0.5; }
.gif-caixa.gif-grande.sem-gif { display: none; }

/* Biblioteca de exercícios */
.biblioteca-cartao { margin-bottom: 0; padding: 16px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.biblioteca-filtros { display: flex; flex-direction: column; gap: 8px; }
.biblioteca-contador { margin: 8px 0 4px; }
.biblioteca-lista { overflow-y: auto; flex: 1; min-height: 120px; border-top: 1px solid var(--borda); }
.biblioteca-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--borda); }
.biblioteca-nome { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
/* O nome inteiro aparece: quebra em quantas linhas precisar, em vez de cortar com reticências. */
.biblioteca-nome strong { font-size: 14px; overflow-wrap: anywhere; }
.biblioteca-nome .ajuda { overflow-wrap: anywhere; }
.biblioteca-botoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.biblioteca-rodape { padding-top: 8px; text-align: center; }
.biblioteca-rodape p { margin: 4px 0; }

/* A biblioteca na página "Exercícios" do menu: a largura toda, filtros em linha e os exercícios em grade. */
.biblioteca-em-pagina { max-height: none; }
.biblioteca-em-pagina .biblioteca-filtros { flex-direction: row; flex-wrap: wrap; }
.biblioteca-em-pagina .biblioteca-filtros input { flex: 2 1 280px; min-width: 0; }
.biblioteca-em-pagina .biblioteca-filtros select { flex: 1 1 200px; min-width: 0; }
.biblioteca-em-pagina .biblioteca-lista { overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 20px; }
.biblioteca-em-pagina .gif-pequeno { width: 64px; height: 64px; }

dialog.detalhe-do-exercicio { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 0; width: min(380px, calc(100vw - 24px)); }
dialog.detalhe-do-exercicio::backdrop { background: rgba(0, 0, 0, 0.7); }
.detalhe-corpo { padding: 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.detalhe-corpo h2 { margin: 8px 0 0; font-size: 18px; }
.detalhe-corpo p { margin: 0; }
.detalhe-corpo .linha-acoes { justify-content: center; }

/* Salvar sempre à mão, sem precisar rolar até o fim da rotina */
.barra-de-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 12px; padding: 12px 0; background: linear-gradient(to top, var(--fundo) 70%, transparent); }

@media (max-width: 1100px) {
    .editor-grade { grid-template-columns: minmax(0, 1fr); }
    .editor-biblioteca { position: static; order: 2; }
    .biblioteca-cartao { max-height: none; }
    .biblioteca-lista { max-height: 420px; }
}

@media (max-width: 600px) {
    .campo-do-editor.largo { grid-column: 1 / -1; }
    .exercicio-acoes .botao-icone { width: 28px; height: 28px; }
}

/* Foco: o azul de marca do Gymu. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(41, 182, 246, 0.25); }
button:focus-visible, .botao:focus-visible, a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* A marca: a logo do app no cabeçalho, no favicon e no alto das telas de entrada. */

.topo-logo { width: 28px; height: 28px; border-radius: 7px; vertical-align: middle; margin-right: 8px; }
.marca-da-entrada { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 36px 0 -28px; text-align: center; }
.marca-da-entrada img { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 4px; }
.marca-da-entrada strong { font-size: 28px; font-weight: 700; line-height: 1.1; }
.marca-da-entrada span { color: var(--texto-fraco); font-size: 14px; }
/* Aviso nas telas de entrada: na largura do cartão, abaixo da marca (a margem negativa dela puxaria o aviso para cima do logo). */
.marca-da-entrada ~ .alerta { max-width: 380px; margin: 44px auto 0; }
.marca-da-entrada ~ .alerta ~ .alerta { margin-top: 12px; }
.marca-da-entrada ~ .alerta ~ .cartao { margin-top: 20px !important; }