/* inGym — estilos base. Mesmo vocabulário de classes (PT-BR) do inFinance. */
* { box-sizing: border-box; }
:root {
    --primaria: #e8590c;
    --primaria-escura: #b84507;
    --primaria-clara: #fff1e8;
    --grafite: #1f2933;
    --grafite-escuro: #111820;
    --texto: #1f2933;
    --texto-suave: #6b7785;
    --linha: #eceff3;
    --fundo: #f5f6f8;
    --sucesso: #12915a;
    --perigo: #c92a3a;
    --sombra: 0 18px 40px rgba(17, 24, 32, .08);
    --raio: 14px;
}
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--fundo); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primaria); }
h1 { margin: 0 0 20px; font-size: 26px; }
h2 { margin: 0 0 12px; font-size: 18px; }

/* Estrutura */
.estrutura-app { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.barra-lateral { position: sticky; top: 0; height: 100vh; padding: 18px 14px 14px; background: #fff; box-shadow: var(--sombra); overflow-y: auto; display: flex; flex-direction: column; }
.marca { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 800; font-size: 20px; }
.marca-simbolo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--primaria); color: #fff; font-size: 16px; }
.menu { display: grid; gap: 2px; margin-top: 10px; align-content: start; flex: 1; }
.menu a { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 9px; color: var(--texto-suave); font-size: 15px; }
.menu a.ativo, .menu a:hover { background: var(--primaria-clara); color: var(--primaria-escura); font-weight: 700; }
.menu-rotulo { margin: 18px 16px 6px; color: #a0aab5; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.conteudo { min-width: 0; }
.cabecalho { min-height: 200px; padding: calc(16px + env(safe-area-inset-top)) 32px 0; background: linear-gradient(135deg, var(--grafite), var(--grafite-escuro)); color: #fff; }
.barra-topo { display: flex; align-items: center; gap: 16px; }
.titulo-topo span { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 700; }
.titulo-topo strong { display: block; font-size: 20px; }
.acoes-topo { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.selo-perfil { padding: 4px 10px; border-radius: 999px; background: var(--primaria); color: #fff; font-size: 12px; font-weight: 800; }
.botao-link { border: 0; background: transparent; color: #fff; font-weight: 700; cursor: pointer; font-size: 14px; }
.pagina { width: min(1400px, calc(100% - 64px)); margin: -140px auto 48px; position: relative; }
.titulo-pagina { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; min-width: 0; }
.titulo-pagina h1 { margin: 0; color: #fff; min-width: 0; }
.botao-instalar { display: none !important; }
.botao-instalar.visivel { display: flex !important; }

/* Componentes */
.grade { display: grid; gap: 20px; }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.painel, .cartao-indicador, .tabela { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); }
.painel { padding: 22px 24px; }
.cartao-indicador { padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.indicador-rotulo { color: var(--texto-suave); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.indicador-valor { display: block; margin-top: 6px; font-size: 28px; font-weight: 800; }
.indicador-icone { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--primaria-clara); color: var(--primaria); font-size: 20px; font-weight: 800; }
.tabela { width: 100%; border-collapse: collapse; overflow: hidden; }
.tabela th, .tabela td { padding: 12px 14px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: middle; }
.tabela th { color: var(--texto-suave); font-size: 13px; }
.tabela tr:last-child td { border-bottom: 0; }
.rolagem-tabela { overflow-x: auto; }
.etiqueta { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--linha); }
.etiqueta.sucesso { background: #e3f7ec; color: var(--sucesso); }
.etiqueta.perigo { background: #fde8ea; color: var(--perigo); }
.vazio { padding: 28px; text-align: center; color: var(--texto-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: end; }
.filtros .campo { margin: 0; min-width: 160px; }

/* Formulários */
label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; font: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 4px rgba(232, 89, 12, .14); }
input[type=checkbox] { width: auto; }
.campo { margin-bottom: 14px; }
.erro { margin-top: 6px; color: var(--perigo); font-size: 13px; }
.botao, button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--primaria); color: #fff; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; }
.botao:hover, button:hover { background: var(--primaria-escura); color: #fff; }
.botao-secundario { background: var(--linha); color: var(--texto); }
.botao-secundario:hover { background: #dfe3e8; color: var(--texto); }
.botao-perigo { background: var(--perigo); }
.botao-pequeno { min-height: 32px; padding: 0 10px; font-size: 13px; }
.alerta { margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.alerta.sucesso { background: #e3f7ec; color: var(--sucesso); }
.alerta.perigo { background: #fde8ea; color: var(--perigo); }
details.acao-inline summary { cursor: pointer; list-style: none; }
details.acao-inline[open] .formulario-inline { margin-top: 10px; display: grid; gap: 8px; min-width: 240px; }

/* Autenticação */
.autenticacao-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, var(--grafite), var(--grafite-escuro)); }
/* Rodapé das telas sem login (login, cadastro): continua o fundo escuro em vez de uma faixa clara. */
.autenticacao-shell + .rodape-app { margin: 0; background: var(--grafite-escuro); color: rgba(255, 255, 255, .55); }
.autenticacao-card { width: min(420px, 100%); padding: 32px; background: #fff; border-radius: 18px; box-shadow: var(--sombra); }
.autenticacao-card .marca { justify-content: center; margin-bottom: 8px; }
.autenticacao-subtitulo { margin: 0 0 22px; color: var(--texto-suave); text-align: center; }
.autenticacao-card button { width: 100%; }
/* Cadastro público (RN-ACC-014). */
.autenticacao-card-largo { width: min(560px, 100%); }
.autenticacao-card .grade-2 { gap: 0 14px; }
.autenticacao-card details summary { cursor: pointer; color: var(--primaria-escura); font-weight: 700; }
.botao-bloco { display: flex; width: 100%; }
.espaco-topo.botao-bloco { margin-top: 12px; }
.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset.responsavel[hidden] { display: none; }
/* Cadastro com assinatura: passos, vitrine de planos, resumo da cobrança e cartão. */
.passos-cadastro { margin: 0 0 10px; color: var(--texto-suave); font-size: 13px; text-align: center; }
.passos-cadastro strong { color: var(--primaria-escura); }
.autenticacao-card-vitrine { width: min(920px, 100%); }
/* Abas personal × treinar sozinho: rádio + CSS (funcionam sem JavaScript). */
.abas-planos { position: relative; }
.abas-planos-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.abas-planos-rotulos { display: flex; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 20px; padding: 4px; border-radius: 999px; background: var(--fundo); }
.abas-planos-rotulos label { margin: 0; padding: 9px 18px; border-radius: 999px; color: var(--texto-suave); font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.abas-planos-painel { display: none; }
.abas-planos-radio:focus-visible ~ .abas-planos-rotulos { outline: 2px solid var(--primaria); outline-offset: 2px; }
#aba-personal:checked ~ .abas-planos-paineis .abas-planos-painel:nth-child(1),
#aba-autonomo:checked ~ .abas-planos-paineis .abas-planos-painel:nth-child(2) { display: block; }
/* Chave mensal × anual: mostra o preço e o botão da periodicidade escolhida. */
.periodo-planos { display: flex; justify-content: center; gap: 18px; margin: -6px 0 18px; }
.periodo-planos label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 2px; border-bottom: 2px solid transparent; color: var(--texto-suave); font-size: 14px; font-weight: 700; cursor: pointer; }
.periodo-desconto { padding: 1px 7px; border-radius: 999px; background: #e6f4ea; color: #1e7b3c; font-size: 12px; }
#periodo-mensal:checked ~ .periodo-planos label:nth-child(1),
#periodo-anual:checked ~ .periodo-planos label:nth-child(2) { border-bottom-color: var(--primaria); color: var(--grafite); }
.preco-anual { display: none; }
#periodo-anual:checked ~ .abas-planos-paineis .preco-mensal { display: none; }
#periodo-anual:checked ~ .abas-planos-paineis div.preco-anual { display: block; }
#periodo-anual:checked ~ .abas-planos-paineis a.preco-anual { display: flex; }
#aba-personal:checked ~ .abas-planos-rotulos label:nth-child(1),
#aba-autonomo:checked ~ .abas-planos-rotulos label:nth-child(2) { background: var(--primaria); color: #fff; box-shadow: 0 2px 8px rgba(232, 89, 12, .3); }
.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 260px)); justify-content: center; gap: 16px; }
.plano-cartao { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 340px; padding: 24px 20px; border: 1px solid var(--linha); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(31, 41, 51, .08); text-align: center; }
.plano-cartao h3 { margin: 0; font-size: 18px; }
.plano-preco { margin: 4px 0 0; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--grafite); }
.plano-preco small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.plano-equivale { margin: -4px 0 0; font-size: 13px; }
.plano-vantagens { flex: 1; align-self: stretch; margin: 8px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--linha); list-style: none; line-height: 1.5; text-align: left; }
.plano-vantagens li { position: relative; padding: 3px 0 3px 22px; }
.plano-vantagens li::before { content: "✓"; position: absolute; left: 0; color: var(--primaria); font-weight: 800; }
.plano-cartao .botao-bloco { justify-content: center; margin-top: auto; }
@media (max-width: 560px) { .planos-grade { grid-template-columns: minmax(0, 1fr); } .plano-cartao { min-height: 0; } }
.plano-resumo { margin: 0 0 16px; padding: 14px; border: 1px solid var(--linha); border-radius: 12px; background: #fafbfc; }
.plano-resumo-preco { float: right; font-weight: 800; }
.cartao-assinatura { min-height: 120px; }
.termo { max-height: 50vh; overflow-y: auto; padding: 16px; border: 1px solid var(--linha); border-radius: 10px; background: #fafbfc; line-height: 1.55; }

/* Mobile */
@media (max-width: 900px) {
    .estrutura-app { grid-template-columns: 1fr; }
    .cabecalho { padding: calc(12px + env(safe-area-inset-top)) 16px 0; min-height: 168px; }
    .pagina { width: calc(100% - 32px); margin-top: -104px; }
    .grade-3 { grid-template-columns: 1fr; }
    .ocultar-mobile { display: none; }
}

/* Ícones do menu */
.icone-menu { flex: none; }
.menu a .icone-menu { opacity: .75; }
.menu a.ativo .icone-menu { opacity: 1; }
.marca-topo { display: none; }

/*
 * Celular com cara de aplicativo: sem menu lateral; barra de abas fixa embaixo
 * com os itens principais e "Mais" abrindo uma gaveta (bottom sheet).
 */
.barra-abas, .gaveta, .gaveta-fundo { display: none; }
@media (max-width: 900px) {
    .barra-lateral { display: none; }
    .marca-topo { display: inline-flex; }
    .marca-topo .marca-simbolo { width: 34px; height: 34px; }
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

    .barra-abas {
        position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
        display: flex; justify-content: space-around; align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
        border-top: 1px solid var(--linha); box-shadow: 0 -6px 20px rgba(31, 41, 51, .08);
    }
    .aba {
        flex: 1 1 0; min-width: 0; min-height: 54px; padding: 4px 2px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; border-radius: 12px; background: transparent; color: var(--texto-suave);
        font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; -webkit-tap-highlight-color: transparent;
    }
    .aba span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .aba:hover { background: transparent; color: var(--primaria-escura); }
    .aba.ativa { color: var(--primaria); }
    .aba.ativa .icone-menu { background: var(--primaria-clara); border-radius: 999px; padding: 2px 12px; box-sizing: content-box; }
    .aba:active { transform: scale(.96); }

    .gaveta-fundo:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 32, .45); }
    .gaveta:not([hidden]) {
        display: grid; gap: 4px; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
        padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
        background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(31, 41, 51, .2);
        animation: gaveta-sobe .22s ease-out;
    }
    .gaveta-alca { width: 42px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: var(--linha); }
    .gaveta-usuario { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
    .gaveta-item {
        width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: flex-start; gap: 14px;
        padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); font-size: 16px; font-weight: 600;
    }
    .gaveta-item:hover, .gaveta-item.ativo { background: var(--primaria-clara); color: var(--primaria-escura); }
    .gaveta-sair { color: var(--perigo); }
    body.gaveta-aberta { overflow: hidden; }
}
@keyframes gaveta-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* DataTables (ADR 028) no visual do app */
div.dt-container { font-size: 14px; }
div.dt-container .dt-layout-row { margin: 0 0 12px; }
div.dt-container .dt-search input, div.dt-container .dt-length select {
    width: auto; min-height: 38px; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff;
}
div.dt-container .dt-search input { min-width: 220px; margin-left: 8px; }
div.dt-container .dt-paging .dt-paging-button {
    min-height: 34px; min-width: 34px; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--texto-suave) !important;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
    background: var(--primaria-clara) !important; color: var(--primaria-escura) !important;
}
table.dataTable.tabela { width: 100% !important; margin: 0 !important; }
table.dataTable.tabela > thead > tr > th { border-bottom: 1px solid var(--linha); }
table.dataTable.tabela > tbody > tr > td { border-top: 1px solid var(--linha); }
@media (max-width: 900px) {
    div.dt-container .dt-layout-row { display: grid; gap: 8px; }
    div.dt-container .dt-search { display: flex; }
    div.dt-container .dt-search input { flex: 1; min-width: 0; }
}

/* Medidor de força de senha (RN-ACC-010) */
.medidor-senha { margin-top: 8px; }
.medidor-senha-barra { height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.medidor-senha-barra span { display: block; height: 100%; width: 0; background: var(--perigo); transition: width .2s ease, background-color .2s ease; }
.medidor-senha[data-level="weak"] .medidor-senha-barra span { width: 33%; background: var(--perigo); }
.medidor-senha[data-level="medium"] .medidor-senha-barra span { width: 66%; background: #d98e04; }
.medidor-senha[data-level="strong"] .medidor-senha-barra span { width: 100%; background: var(--sucesso); }
.medidor-senha small { display: block; margin-top: 6px; color: var(--texto-suave); font-size: 13px; }

.alerta.aviso { background: #fff4db; color: #8a5a00; }
.dica { margin-top: 6px; color: var(--texto-suave); font-size: 13px; }
.cabecalho-acoes { display: flex; justify-content: flex-end; margin-bottom: 16px; }

/* ===== Treino, avaliação e alimentação ===== */
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.painel > h2, .secao-titulo { margin: 0 0 14px; font-size: 18px; }
.com-mapa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.com-mapa > .coluna-mapa { position: sticky; top: 16px; }
.espaco-topo { margin-top: 20px; }
.texto-suave { color: var(--texto-suave); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-linha form { margin: 0; }
/* Barra de situação/ações no topo da tela (ficha, avaliação, plano): a página sobe por cima da faixa escura do
   cabeçalho, então a barra solta ficava sobre o fundo escuro, com o texto cinza ilegível. Vira um cartão compacto. */
.pagina > p.acoes-linha { margin: 0 0 16px; padding: 10px 16px; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); }

/* Mapa muscular (RN-TRE-006) */
.mapa-muscular { margin: 0; }
.mapa-muscular svg { width: 100%; height: auto; display: block; }
/* Silhueta escura por baixo; os vãos entre as áreas claras formam o traço (ADR 017). */
.mapa-corpo { fill: #45466a; fill-rule: evenodd; }
.mapa-pele { fill: #ebebee; fill-rule: evenodd; }
.musculo { fill: #ebebee; fill-rule: evenodd; transition: fill .2s ease; }
.musculo.secundario { fill: #f8b48c; }
.musculo.primario { fill: var(--primaria); }
.mapa-rotulo { font-size: 34px; font-weight: 700; fill: var(--texto-suave); }
.mapa-legenda { display: flex; justify-content: center; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--texto-suave); }
.amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.amostra.primario { background: var(--primaria); }
.amostra.secundario { background: #f8b48c; }

/* Etiquetas de grupo muscular */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Painel do personal (RN-VIN-004): pendências por aluno e treinos recentes. */
.painel-personal { align-items: start; }
.lista-atencao, .lista-atividade { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-atencao li { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-atividade li { border-bottom: 1px solid var(--linha); }
.lista-atencao li:last-child, .lista-atividade li:last-child { border-bottom: 0; }
.lista-atividade a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; color: inherit; }
.lista-atividade a span { grid-column: 1; color: var(--texto-suave); font-size: 14px; }
.lista-atividade a small { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
.chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--linha); color: var(--texto); }
.chip.primario { background: var(--primaria-clara); color: var(--primaria-escura); }
.chip.secundario { background: #fff6ef; color: #a0521c; border: 1px dashed #f3c29f; }
[data-muscles-primary] { cursor: pointer; border-radius: 10px; transition: background-color .15s ease; }
[data-muscles-primary]:hover, .destaque-musculo { background: var(--primaria-clara); }

/* Divisões da ficha */
.divisao { padding: 14px; border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 12px; }
.divisao-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.divisao-cabecalho h3 { margin: 0; font-size: 16px; }
/* Treino do painel que abre só aquele dia (RN-TRE-009). */
a.divisao-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.divisao-link:hover, a.divisao-link:focus-visible { border-color: var(--primaria); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaria) 25%, transparent); }
.navegacao-dias { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.navegacao-dias a[aria-current="page"] { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.selo-divisao { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--grafite); color: #fff; font-weight: 800; margin-right: 8px; }
.lista-exercicios { list-style: none; margin: 0; padding: 0; }
/* Escolha dos alunos para usar um modelo de ficha (RN-TRE-005): a linha inteira marca o aluno. */
.lista-alunos-modelo { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.lista-alunos-modelo label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; }
.lista-alunos-modelo label:has(input:checked) { border-color: var(--primaria); background: var(--primaria-clara); }
.lista-alunos-modelo input { width: 20px; height: 20px; flex: none; accent-color: var(--primaria); }
.lista-alunos-modelo span { display: flex; flex-direction: column; min-width: 0; }
.lista-exercicios li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--linha); }
.lista-exercicios li:first-child { border-top: 0; }
.exercicio-nome { font-weight: 700; }
.exercicio-prescricao { white-space: nowrap; font-weight: 700; color: var(--primaria-escura); }

/* Barras de progresso e macros */
.barra-progresso { height: 10px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra-progresso > span { display: block; height: 100%; background: var(--primaria); border-radius: 999px; }
.barra-progresso.excedido > span { background: var(--perigo); }
.valor-grande { font-size: 26px; font-weight: 800; }
.macro-distribuicao { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--linha); }
.macro-distribuicao .carbo { background: #f2a33a; }
.macro-distribuicao .proteina { background: #12915a; }
.macro-distribuicao .gordura { background: #4c6ef5; }

/* Formulários em grade */
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; }
.campo.obrigatorio-protocolo label::after { content: " *"; color: var(--primaria); }
.campo.obrigatorio-protocolo input { border-color: var(--primaria); }
fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 14px; margin: 0 0 16px; }
legend { padding: 0 6px; font-weight: 800; }

/* Evolução */
.grafico-linha { width: 100%; height: auto; overflow: visible; }
.grafico-linha-traco { fill: none; stroke: var(--grafite); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha-ponto { fill: #fff; stroke: var(--grafite); stroke-width: 2; }
.tendencia-bom .grafico-linha-traco, .tendencia-bom .grafico-linha-ponto { stroke: var(--sucesso); }
.tendencia-atencao .grafico-linha-traco, .tendencia-atencao .grafico-linha-ponto { stroke: var(--perigo); }
.grafico-linha-valor { font-size: 11px; font-weight: 800; fill: var(--texto); }
.grafico-linha-rotulo { font-size: 10px; fill: var(--texto-suave); }
.variacao { font-weight: 800; }
.variacao.bom { color: var(--sucesso); }
.variacao.atencao { color: var(--perigo); }
.variacao.neutro { color: var(--texto-suave); }
.navegacao-data { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sugestoes { position: relative; }
.sugestoes-lista { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border-radius: 10px; box-shadow: var(--sombra); max-height: 260px; overflow-y: auto; }
.sugestoes-lista li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.sugestoes-lista li[aria-selected="true"], .sugestoes-lista li:hover { background: var(--primaria-clara); }
.sugestoes-lista small { display: block; color: var(--texto-suave); }
/* Seletor de exercícios pesquisável (RN-CAT-006, public/js/exercise-search.js) */
.combo-campo { padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2933' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; text-overflow: ellipsis; }
.combo-lista { max-height: 340px; }
.combo-lista .combo-grupo { padding: 8px 10px 4px; font-weight: 700; font-size: 13px; color: var(--texto); cursor: default; }
.combo-lista .combo-grupo:hover { background: none; }
.combo-lista [role="option"] { padding-left: 20px; }
.combo-lista .combo-contagem { padding: 4px 10px; font-size: 12px; color: var(--texto-suave); cursor: default; }
.combo-lista .combo-contagem:hover { background: none; }
.combo-original { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

@media (max-width: 900px) {
    .grade-2, .grade-4, .com-mapa { grid-template-columns: 1fr; }
    .com-mapa > .coluna-mapa { position: static; order: -1; max-width: 340px; margin: 0 auto; width: 100%; }
}

/* Cards coloridos do plano alimentar */
.cartao-macro { border-top: 5px solid var(--linha); }
.cartao-macro .valor-grande small { font-size: 14px; color: var(--texto-suave); }
.cartao-macro.kcal { border-top-color: var(--primaria); }
.cartao-macro.kcal .valor-grande { color: var(--primaria-escura); }
.cartao-macro.carbo { border-top-color: #f2a33a; }
.cartao-macro.carbo .valor-grande { color: #b86e09; }
.cartao-macro.proteina { border-top-color: #12915a; }
.cartao-macro.proteina .valor-grande { color: #0e7a4b; }
.cartao-macro.gordura { border-top-color: #4c6ef5; }
.cartao-macro.gordura .valor-grande { color: #364fc7; }
.amostra.carbo { background: #f2a33a; }
.amostra.proteina { background: #12915a; }
.amostra.gordura { background: #4c6ef5; }

/* Diálogo de confirmação (estilo bootbox, public/js/dialogs.js) */
.dialogo { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(17, 24, 32, .28); color: var(--texto); }
.dialogo::backdrop { background: rgba(17, 24, 32, .55); backdrop-filter: blur(2px); }
.dialogo[open] { animation: dialogo-entrada .18s ease-out; }
@keyframes dialogo-entrada { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.dialogo-conteudo { margin: 0; }
.dialogo-cabecalho { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.dialogo-cabecalho h2 { margin: 0; font-size: 18px; flex: 1; }
.dialogo-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primaria-clara); color: var(--primaria); font-weight: 800; }
.dialogo.perigo .dialogo-icone { background: #fde8ea; color: var(--perigo); }
.dialogo-fechar { min-height: 32px; padding: 0 8px; background: transparent; color: var(--texto-suave); font-size: 22px; }
.dialogo-fechar:hover { background: var(--linha); color: var(--texto); }
.dialogo-mensagem { margin: 0; padding: 14px 22px 20px 70px; color: var(--texto-suave); line-height: 1.5; }
.dialogo-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #f7f8fa; border-top: 1px solid var(--linha); }

/* Quantidade editável do item no cadastro do plano alimentar */
.quantidade-item { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.quantidade-item input { width: 84px; padding: 6px 8px; }
/* Observações da refeição (RN-NUT-011). */
.observacao-refeicao { display: grid; gap: 6px; margin-top: 10px; }
.observacao-refeicao label { font-size: 13px; font-weight: 600; }
.observacao-refeicao textarea { width: 100%; resize: vertical; }
.observacao-refeicao button { justify-self: start; }
.observacao-refeicao-texto { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--primaria); background: var(--primaria-clara); border-radius: 6px; font-size: 14px; white-space: pre-line; }

/* Anamnese de saúde (RN-AVA-006) */
.lista-saude { display: grid; gap: 0; margin-bottom: 8px; }
.pergunta-saude { border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: 12px 0; margin: 0; }
.pergunta-saude legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; }
.opcoes-sim-nao { clear: both; display: flex; gap: 18px; }
.opcoes-sim-nao label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.opcoes-sim-nao input { width: auto; margin: 0; accent-color: var(--primaria); }
.detalhe-saude { display: none; margin-top: 10px; }
.pergunta-saude:has(input[value="1"]:checked) .detalhe-saude { display: block; }
.pergunta-saude:has(input[value="1"]:checked) legend { color: var(--primaria-escura); }
.alertas-saude { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.alertas-saude li { padding: 10px 12px; border-radius: 10px; background: #fff4db; color: #8a5a00; display: grid; gap: 2px; }
.alertas-saude span { color: var(--texto); }
.dados-lista { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.dados-lista dt { color: var(--texto-suave); }
.dados-lista dd { margin: 0; font-weight: 600; }

/* Suplementos no plano alimentar (RN-NUT-008) */
.etiqueta-suplemento { margin-left: 6px; background: #e7f0ff; color: #2456a6; font-size: 11px; vertical-align: 1px; }
.catalogo-suplementos { margin-top: 8px; }
.catalogo-suplementos summary { cursor: pointer; color: var(--primaria-escura); font-weight: 600; font-size: 14px; }
.catalogo-suplementos ul { margin: 8px 0 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; display: grid; gap: 6px; }
.catalogo-suplementos li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--fundo); }
.catalogo-suplementos li small { display: block; }
.catalogo-suplementos li p, .lista-suplementos p { margin: 4px 0 0; font-size: 13px; color: var(--texto-suave); }
.lista-suplementos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lista-suplementos li { padding: 10px 12px; border-radius: 10px; background: #f3f7ff; }
.lista-suplementos small { display: block; }
.botao-seta { min-width: 34px; padding-left: 8px; padding-right: 8px; }
.botao-seta:disabled { opacity: .35; cursor: default; }

/* Relatórios (RN-REL-001) */
.grade-3-relatorios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.item-relatorio { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.item-relatorio:last-child { border-bottom: 0; }
.item-relatorio strong, .item-relatorio small { display: block; }
.item-relatorio small { margin-top: 2px; }
@media (max-width: 1100px) { .grade-3-relatorios { grid-template-columns: 1fr; } }

/* Rodapé: © ano, empresa e versão */
.rodape-app { padding: 8px 16px 24px; text-align: center; font-size: 12px; color: var(--texto-suave); }

/* Como fazer os exercícios (RN-CAT-007) */
.espaco-baixo { margin: 0 0 16px; }
.busca-guia { display: flex; gap: 10px; align-items: flex-end; }
.busca-guia .campo { flex: 1; margin: 0; }
.lista-guia li { align-items: center; padding: 0; }
.lista-guia li a { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; }
.lista-guia li a:hover .exercicio-nome { color: var(--primaria); }
.lista-guia li > span { padding-right: 8px; font-size: 22px; }
.fotos-exercicio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.fotos-exercicio figure { margin: 0; }
.fotos-exercicio img { width: 100%; height: auto; border-radius: 10px; background: var(--linha); }
.fotos-exercicio figcaption { margin-top: 4px; font-size: 13px; color: var(--texto-suave); }
.foto-creditada { margin: 16px 0 0; }
.foto-creditada img { display: block; max-width: 100%; max-height: 460px; width: auto; height: auto; border-radius: 10px; background: var(--linha); }
.foto-creditada figcaption { margin-top: 4px; font-size: 12px; color: var(--texto-suave); }
.foto-creditada figcaption a { color: inherit; text-decoration: underline; }
.passos-exercicio, .dicas-exercicio { margin: 0; padding-left: 22px; line-height: 1.55; }
.passos-exercicio li, .dicas-exercicio li { margin-bottom: 8px; }
/* No guia, o "como fazer" vem antes do mapa no celular. */
@media (max-width: 900px) { .guia-exercicio.com-mapa > .coluna-mapa { order: 0; max-width: none; } }
@media (max-width: 600px) {
    .busca-guia { flex-direction: column; align-items: stretch; }
    .fotos-exercicio { grid-template-columns: 1fr; }
}
/* Receitas (RN-NUT-013). */
.tabela-receita { width: 100%; border-collapse: collapse; }
.tabela-receita td { padding: 8px 6px; border-top: 1px solid var(--linha); }
.tabela-receita tr:first-child td { border-top: 0; }
.tabela-receita .num { text-align: right; white-space: nowrap; }
/* Notificações (RN-NOT-001 a 005), como no inCondo. */
.sino { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: inherit; }
.sino:hover { background: rgba(127,127,127,.15); }
.sino svg { width: 22px; height: 22px; }
.sino-contador { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--perigo, #c92a2a); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.sino-contador[hidden] { display: none; }
.lista-notificacoes { margin: 0; padding: 0; list-style: none; }
.lista-notificacoes li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.lista-notificacoes li:last-child { border-bottom: 0; }
.lista-notificacoes li.nova { background: var(--primaria-clara); margin: 0 -12px; padding: 14px 12px; border-radius: 10px; }
.lista-notificacoes a { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.lista-notificacoes small { color: var(--texto-suave); margin-top: 2px; }
/* Novidades (RN-NOT-007): avisos gerais do admin; o aviso aberto pela notificação fica destacado. */
.lista-notificacoes li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lista-notificacoes li:target { background: var(--primaria-clara); margin: 0 -12px; padding: 14px 12px; border-radius: 10px; }
.texto-aviso { white-space: pre-line; }
.form-recado input { width: 100%; }
.form-recado input[type=radio], .form-recado input[type=checkbox] { width: auto; }
.destino-aviso { display: grid; gap: 10px; margin: 0 0 6px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; }
.destino-aviso legend { padding: 0 6px; font-weight: 600; }
.destino-aviso .opcoes-sim-nao { flex-wrap: wrap; }
.escolha-pessoas { display: grid; gap: 6px; }
.lista-pessoas { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 8px; }
.lista-pessoas li { border-bottom: 1px solid var(--linha); }
.lista-pessoas li:last-child { border-bottom: 0; }
.lista-pessoas label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-weight: 500; }
.lista-pessoas input { margin: 0; accent-color: var(--primaria); }
.lista-pessoas small { color: var(--texto-suave); font-weight: 400; }
/* Convite para ativar o push (RN-NOT-006). */
.dialogo-icone svg { width: 20px; height: 20px; }
.aviso-notificacao { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 2px; max-width: 360px; padding: 14px 16px; border-radius: 12px; background: var(--grafite); color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: opacity .5s, transform .5s; }
.aviso-notificacao span { color: #c9d3de; font-size: 14px; }
.aviso-notificacao.saindo { opacity: 0; transform: translateY(10px); }
@media (max-width: 900px) { .aviso-notificacao { left: 12px; right: 12px; bottom: 84px; max-width: none; } }
.conversa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conversa li { max-width: 80%; padding: 10px 12px; border-radius: 12px; background: var(--linha); white-space: pre-line; }
.conversa li.minha { align-self: flex-end; background: var(--primaria-clara); }
.conversa small { display: block; margin-top: 4px; color: var(--texto-suave); font-size: 12px; }
.form-recado { display: grid; gap: 8px; margin-top: 14px; }
.form-recado textarea { width: 100%; resize: vertical; }
.form-recado button { justify-self: start; }
[hidden] { display: none !important; }
.link-guia { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--primaria); white-space: nowrap; }
.link-guia:hover { text-decoration: underline; }

/*
 * Celular sem rolagem lateral (ADR 043).
 * Tabelas com cabeçalho viram cartões: a 1ª coluna é o título e as demais
 * aparecem como "rótulo  valor" (rótulo vindo do <th>, pelo layout). Botões
 * ficam numa linha própria no pé do cartão.
 */
.divisao-cabecalho { flex-wrap: wrap; }
.titulo-topo { min-width: 0; }
.titulo-topo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa li, .lista-notificacoes li, .observacao-refeicao-texto, .texto-aviso { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    h1 { font-size: 22px; overflow-wrap: anywhere; }
    .painel { padding: 16px; }
    .vazio { padding: 20px 8px; }
    .divisao { padding: 12px; }

    table.tabela.tabela-cartoes, .tabela-cartoes > tbody, .tabela-cartoes > tbody > tr { display: block; width: 100%; }
    .tabela-cartoes > thead { display: none; }
    .tabela-cartoes > tbody > tr { padding: 12px 14px; border-bottom: 1px solid var(--linha); }
    .tabela-cartoes > tbody > tr:last-child { border-bottom: 0; }
    table.tabela.tabela-cartoes > tbody > tr > td {
        display: flow-root; width: 100%; padding: 4px 0; border: 0 !important; /* o DataTables põe borda na última linha */
        text-align: right; overflow-wrap: anywhere;
    }
    .tabela-cartoes > tbody > tr > td::before {
        content: attr(data-rotulo); float: left; max-width: 50%; margin-right: 12px;
        color: var(--texto-suave); font-size: 13px; font-weight: 700; text-align: left;
    }
    table.tabela.tabela-cartoes > tbody > tr > td:first-child { padding: 0 0 6px; text-align: left; font-size: 16px; font-weight: 700; }
    .tabela-cartoes > tbody > tr > td:first-child small { font-size: 13px; font-weight: 400; }
    table.tabela.tabela-cartoes > tbody > tr > td.ocultar-mobile { display: flow-root; }
    .tabela-cartoes > tbody > tr > td:first-child::before,
    .tabela-cartoes > tbody > tr > td[data-rotulo=""]::before,
    .tabela-cartoes > tbody > tr > td:has(.botao, button)::before { content: none; }
    /* Célula de ações (botões): pé do cartão, alinhada à esquerda. */
    table.tabela.tabela-cartoes > tbody > tr > td:has(.botao, button) {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; text-align: left;
    }
    .tabela-cartoes td:has(.botao, button) > .acoes-linha { width: 100%; }
    .tabela-cartoes td details[open] { flex-basis: 100%; }
    .tabela-cartoes td details.acao-inline[open] .formulario-inline { min-width: 0; }
    /* Linha "nenhum registro" do DataTables. */
    table.tabela.tabela-cartoes > tbody > tr > td.dt-empty { text-align: center; }
    .tabela-cartoes > tbody > tr > td.dt-empty::before { content: none; }

    /* Listas de exercícios e refeições: nome em cima, carga/kcal e botões embaixo quando não cabem. */
    .lista-exercicios li { flex-wrap: wrap; row-gap: 8px; }
    .lista-exercicios li > div:first-child { flex: 1 1 200px; min-width: 0; }
    .lista-exercicios li > .acoes-linha, .lista-exercicios li > .exercicio-prescricao { margin-left: auto; justify-content: flex-end; }
    .exercicio-prescricao { white-space: normal; text-align: right; }

    .acoes-topo { gap: 8px; }
    .dialogo-mensagem { padding-left: 22px; }
    .dialogo-rodape { flex-wrap: wrap; }
    .item-relatorio { flex-wrap: wrap; }
    .catalogo-suplementos li { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    /* Em uma coluna, "ocupar 2 colunas" criaria uma coluna extra fora da tela. */
    .form-grade > * { grid-column: auto !important; }
    .dados-lista { grid-template-columns: 1fr; gap: 2px; }
    .dados-lista dd { margin-bottom: 8px; }
    .filtros .campo { flex: 1 1 100%; min-width: 0; }
}
/* Troca direta de treinos (RN-TRE-010). */
.troca-treino { display: flex; gap: 6px; align-items: center; }
.troca-treino select { width: auto; max-width: 220px; min-height: 32px; padding: 4px 8px; font-size: 13px; }
@media (max-width: 640px) {
    .troca-treino { flex: 1 1 100%; }
    .troca-treino select { flex: 1; max-width: none; min-width: 0; }
}
/* Registro do treino feito (RN-TRE-011): uma linha por série, cabe no celular. */
.ultima-vez { margin: 0 0 10px; font-size: 13px; }
.series-registro { display: grid; gap: 8px; }
.serie-registro { display: grid; grid-template-columns: minmax(92px, auto) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.serie-feita { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.serie-feita input { width: 20px; height: 20px; margin: 0; accent-color: var(--primaria); }
.serie-campo { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.serie-campo input { min-width: 0; padding: 8px 10px; }
.serie-registro:has(.serie-feita input:not(:checked)) .serie-campo { opacity: .45; }
/* Treino do dia: registrar as séries de cada exercício ali mesmo (RN-TRE-019). */
.lista-exercicios li.com-registro { flex-wrap: wrap; }
.lista-exercicios li.com-registro > div:first-child { flex: 1 1 200px; min-width: 0; }
.registro-exercicio { flex: 1 1 100%; }
.registro-exercicio > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.registro-exercicio > summary::-webkit-details-marker { display: none; }
.registro-exercicio[open] > summary { margin-bottom: 10px; }
.registro-exercicio > form { padding: 12px; border-radius: 10px; background: var(--fundo); }
.registro-exercicio [data-registro-status] { flex: 1 1 160px; }
/* Montagem: editar um exercício já na ficha (RN-TRE-018). */
.editar-exercicio > summary { list-style: none; cursor: pointer; }
.editar-exercicio > summary::-webkit-details-marker { display: none; }
.lista-exercicios li:has(.editar-exercicio[open]) { flex-wrap: wrap; }
.lista-exercicios li > .acoes-linha:has(.editar-exercicio[open]) { flex: 1 1 100%; justify-content: flex-end; }
.editar-exercicio[open] { flex: 1 1 100%; order: 10; padding: 12px; border-radius: 10px; background: var(--fundo); }
/* Ajuda (RN-OPE-003). */
.ajuda-lista { grid-template-columns: 1fr; gap: 4px; }
.ajuda-lista dt { color: var(--texto); font-weight: 700; }
.ajuda-lista dd { margin-bottom: 10px; color: var(--texto-suave); font-weight: 400; line-height: 1.5; }
/* Catálogo do admin (RN-CAT-008): músculos de foco e auxiliares. */
.opcoes-musculos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.opcoes-musculos label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-weight: 500; }
.opcoes-musculos input { margin: 0; accent-color: var(--primaria); }
.botao-link-texto { display: inline; min-height: 0; margin-left: 6px; padding: 0; background: none; color: var(--primaria); font-size: 13px; font-weight: 700; text-decoration: underline; }
.botao-link-texto:hover { background: none; color: var(--primaria-escura); }
/* Meus treinos no estilo de app (RN-TRE-011 a 014). */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.resumo-treinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resumo-treinos .cartao-indicador { padding: 14px 16px; align-items: flex-end; }
.cartoes-treino { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cartao-treino { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; color: inherit; transition: border-color .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
.cartao-treino:hover, .cartao-treino:focus-visible { border-color: var(--primaria); background: var(--primaria-clara); color: inherit; }
.cartao-treino:active { transform: scale(.99); }
.cartao-treino .selo-divisao { flex: none; width: 40px; height: 40px; margin: 0; font-size: 18px; background: var(--primaria); }
.cartao-treino-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cartao-treino-texto small { color: var(--texto-suave); font-size: 13px; }
.cartao-treino-seta { flex: none; color: var(--texto-suave); font-size: 26px; line-height: 1; }
.seletor-com-botao { display: flex; gap: 8px; }
.graficos-aba-radio { position: absolute; opacity: 0; pointer-events: none; }
.graficos-abas-rotulos { display: none; }
.graficos-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.historico-treinos { list-style: none; margin: 0; padding: 0; }
.historico-treinos li + li { border-top: 1px solid var(--linha); }
.item-historico { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 2px; color: inherit; -webkit-tap-highlight-color: transparent; }
.item-historico:hover { color: inherit; background: #fafbfc; }
.item-historico-data { flex: none; width: 48px; padding: 6px 0; border-radius: 10px; background: var(--primaria-clara); color: var(--primaria-escura); text-align: center; line-height: 1.1; }
.item-historico-data strong { display: block; font-size: 18px; }
.item-historico-data small { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.item-historico-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-historico-texto small { color: var(--texto-suave); font-size: 13px; }
.item-historico-texto .etiqueta { align-self: flex-start; margin-top: 2px; }
.historico-mais > summary { list-style: none; width: 100%; margin-top: 10px; }
.historico-mais > summary::-webkit-details-marker { display: none; }
.historico-mais[open] > summary { display: none; }
@media (max-width: 640px) {
    .resumo-treinos .indicador-valor { font-size: 24px; }
    .resumo-treinos .cartao-indicador { flex-direction: column; align-items: flex-start; gap: 0; }
    .cartoes-treino { grid-template-columns: 1fr; }
    /* Um gráfico por vez, escolhido nas abas (sem rolar para o lado). */
    .graficos-abas-rotulos { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; border-radius: 999px; background: var(--fundo); }
    .graficos-abas-rotulos label { flex: 1; margin: 0; padding: 8px 4px; border-radius: 999px; color: var(--texto-suave); font-size: 14px; text-align: center; cursor: pointer; }
    .grafico-painel { display: none; }
    #grafico-0:checked ~ .graficos-paineis .grafico-painel:nth-child(1),
    #grafico-1:checked ~ .graficos-paineis .grafico-painel:nth-child(2),
    #grafico-2:checked ~ .graficos-paineis .grafico-painel:nth-child(3) { display: block; }
    #grafico-0:checked ~ .graficos-abas-rotulos label:nth-child(1),
    #grafico-1:checked ~ .graficos-abas-rotulos label:nth-child(2),
    #grafico-2:checked ~ .graficos-abas-rotulos label:nth-child(3) { background: #fff; color: var(--primaria-escura); font-weight: 700; box-shadow: 0 1px 4px rgba(17, 24, 32, .1); }
    .graficos-aba-radio:focus-visible ~ .graficos-abas-rotulos { outline: 2px solid var(--primaria); }
}
/*
 * Repaginada da navegação e dos painéis (ADR 047): cartão do usuário no menu lateral,
 * avatar e "voltar" no topo, faixa de sem internet, gaveta "Mais" em atalhos e
 * painéis com o que se usa todo dia em primeiro lugar.
 */
.avatar { flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--primaria-clara); color: var(--primaria-escura); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.avatar-topo { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.avatar-topo:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.barra-lateral-rodape { display: grid; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.barra-lateral-rodape form { margin: 0; }
.usuario-cartao { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 10px; color: inherit; }
.usuario-cartao:hover { background: var(--fundo); color: inherit; }
.usuario-cartao-texto { display: flex; flex-direction: column; min-width: 0; }
.usuario-cartao-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.usuario-cartao-texto small { color: var(--texto-suave); font-size: 12px; }
.botao-lateral { width: 100%; justify-content: flex-start; gap: 12px; min-height: 40px; padding: 0 16px; background: transparent; color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.botao-lateral:hover { background: var(--fundo); color: var(--texto); }
.botao-voltar { flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; }
.botao-voltar:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.faixa-offline { position: sticky; top: 0; z-index: 30; padding: 8px 16px; background: #fff4db; color: #8a5a00; font-size: 13px; font-weight: 700; text-align: center; }
.acoes-topo .sino { color: #fff; }
.acoes-topo .sino:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Indicadores com ícone à esquerda (painéis do aluno e do admin). */
.indicadores .cartao-indicador { justify-content: flex-start; align-items: center; gap: 14px; color: inherit; }
.indicadores a.cartao-indicador { transition: box-shadow .15s, transform .15s; }
.indicadores a.cartao-indicador:hover { color: inherit; box-shadow: 0 0 0 2px var(--primaria-clara), var(--sombra); }
.indicadores .indicador-valor { font-size: 18px; line-height: 1.25; }
.indicadores .cartao-indicador > div { min-width: 0; }
.indicador-icone .icone-menu { width: 22px; height: 22px; }
.indicador-icone.perigo { background: #fde8ea; color: var(--perigo); }

.divisao-proxima { border-color: var(--primaria); background: var(--primaria-clara); }

/* Atalhos do painel do admin. */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.atalho { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; border: 1px solid var(--linha); border-radius: 12px; color: inherit; font-weight: 700; font-size: 14px; }
.atalho:hover { border-color: var(--primaria); background: var(--primaria-clara); color: var(--primaria-escura); }
.atalho-icone { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primaria-clara); color: var(--primaria); }

/* Dica que só faz sentido com mouse. */
@media (hover: none) { .so-mouse { display: none; } }

@media (max-width: 900px) {
    /* No painel do aluno, os treinos vêm antes do mapa. */
    .com-mapa.mapa-depois > .coluna-mapa { order: 0; }
    /* Indicadores em 2 colunas: o painel cabe numa tela. */
    .grade-4.indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .indicadores .cartao-indicador { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
    .indicadores .indicador-icone { width: 36px; height: 36px; }
    .indicadores .indicador-rotulo { font-size: 11px; }
    .indicadores .indicador-valor { margin-top: 2px; font-size: 15px; overflow-wrap: anywhere; }

    /* Gaveta "Mais": atalhos em grade, agrupados, rolável se não couber. */
    .gaveta:not([hidden]) { display: block; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; }
    .gaveta-usuario { padding: 0 0 12px; margin-bottom: 6px; }
    .gaveta-usuario .usuario-cartao { flex: 1; padding: 6px 4px; }
    .gaveta-fechar { flex: none; width: 38px; min-height: 38px; padding: 0; border-radius: 50%; background: var(--fundo); color: var(--texto-suave); font-size: 22px; }
    .gaveta-fechar:hover { background: var(--linha); color: var(--texto); }
    .gaveta-secao { margin: 12px 4px 8px; color: #a0aab5; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .gaveta-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .gaveta-atalho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; border-radius: 14px; background: var(--fundo); color: var(--texto); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
    .gaveta-atalho:hover, .gaveta-atalho.ativo { background: var(--primaria-clara); color: var(--primaria-escura); }
    .gaveta-atalho:active { transform: scale(.97); }
    .gaveta-atalho-icone { color: var(--primaria); }
    .gaveta-rodape { display: grid; gap: 2px; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--linha); }
    .gaveta-rodape form { margin: 0; }
}
@media (max-width: 640px) {
    .acoes-topo .selo-perfil { display: none; }
    .titulo-topo strong { font-size: 18px; }
    .botao-voltar { width: 34px; height: 34px; }
}
.etiqueta.falta { background: #fde8ea; color: var(--perigo); }
.item-historico.falta .item-historico-data { background: #fde8ea; color: var(--perigo); }
/* Cartão do próximo treino, compacto: treino + Registrar; frequência e "pular" numa linha (RN-TRE-015 a 017). */
.cartao-proximo { padding: 14px 18px; border-left: 4px solid var(--primaria); }
.cartao-proximo-linha { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cartao-proximo-linha .selo-divisao { flex: none; width: 40px; height: 40px; margin: 0; font-size: 18px; background: var(--primaria); }
.cartao-proximo-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cartao-proximo-texto small { color: var(--texto-suave); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cartao-proximo-texto strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-proximo-linha .botao { flex: none; }
.cartao-proximo-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: 13px; }
.cartao-proximo-rodape strong { color: var(--texto); }
.cartao-proximo-rodape .separador { margin: 0 6px; color: var(--linha); }
.cartao-proximo-acoes { display: flex; gap: 14px; }
.cartao-proximo-acoes form { margin: 0; }
.cartao-proximo-acoes .botao-link-texto { margin: 0; color: var(--texto-suave); }
.cartao-proximo-acoes .botao-link-texto:hover { color: var(--perigo); }

.cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cabecalho-secao h2 { margin: 0; font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
.link-suave { flex: none; color: var(--primaria-escura); font-size: 14px; font-weight: 700; }
.cartao-treino.divisao-proxima { border-color: var(--primaria); background: var(--primaria-clara); }
.com-mapa .cartoes-treino { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Minhas fichas: ficha atual em destaque, rascunhos e histórico em linhas tocáveis. */
.rotulo-secao { margin: 0 0 8px 2px; color: var(--texto-suave); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.pagina > section:first-of-type .rotulo-secao { color: rgba(255, 255, 255, .75); }
.ficha-atual { display: flex; align-items: center; gap: 16px; color: inherit; border-left: 4px solid var(--primaria); transition: box-shadow .15s; }
a.ficha-atual:hover { color: inherit; box-shadow: 0 0 0 2px var(--primaria-clara), var(--sombra); }
.ficha-atual-icone { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--primaria-clara); color: var(--primaria); }
.ficha-atual-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ficha-atual-texto strong { font-size: 18px; overflow-wrap: anywhere; }
.ficha-atual-texto small { color: var(--texto-suave); }
.ficha-atual-treinos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lista-fichas { list-style: none; margin: 0; padding: 0; }
.lista-fichas li + li { border-top: 1px solid var(--linha); }
.item-ficha { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 2px; color: inherit; }
.item-ficha:hover { color: inherit; background: #fafbfc; }
.item-ficha-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-ficha-texto small { color: var(--texto-suave); font-size: 13px; }
.historico-vazio { margin: 0 2px; font-size: 14px; }
@media (max-width: 640px) {
    .ficha-atual { gap: 12px; }
    .ficha-atual-icone { width: 40px; height: 40px; }
    .item-ficha .link-suave { font-size: 13px; }
}
.lista-fichas.espaco-baixo { margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.sem-quebra { white-space: nowrap; }
/* Alimentação (ADR 047): resumo do dia num painel só e planos em linhas. */
.resumo-macros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px 28px; align-items: start; }
.resumo-macros .cartao-macro { border-top: 0; }
.resumo-kcal { display: grid; gap: 6px; padding-right: 24px; border-right: 1px solid var(--linha); }
.resumo-macros-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.resumo-macros-lista .valor-grande { font-size: 22px; }
.resumo-macros-lista .indicador-rotulo .amostra { margin-right: 6px; }
.resumo-macros-lista .macro-distribuicao { grid-column: 1 / -1; }
.ficha-atual .ficha-atual-texto strong .etiqueta { margin-left: 6px; vertical-align: 2px; }
.rascunho-plano { border-left: 4px solid #d98e04; }
.item-plano { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 2px; }
.item-plano > a { flex: 1 1 260px; color: inherit; }
.item-plano > a:hover strong { color: var(--primaria); }
@media (max-width: 760px) {
    .resumo-macros { grid-template-columns: 1fr; }
    .resumo-kcal { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--linha); }
    .resumo-macros-lista { gap: 10px; }
    .resumo-macros-lista .valor-grande { font-size: 19px; }
    .resumo-macros-lista .indicador-rotulo { font-size: 11px; }
    .resumo-macros-lista .indicador-rotulo .amostra { display: none; }
    .ficha-atual .botao { flex: none; }
}
@media (max-width: 640px) {
    .ficha-atual:has(.botao) { flex-wrap: wrap; }
    .ficha-atual:has(.botao) .botao { margin-left: 64px; }
}
/* Avaliações (ADR 047): última em destaque, evolução em abas e histórico em linhas. */
.ultima-avaliacao { border-left: 4px solid var(--primaria); }
.ultima-avaliacao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ultima-avaliacao-topo > div { display: flex; flex-direction: column; }
.ultima-avaliacao-topo strong { font-size: 18px; }
.ultima-avaliacao-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ultima-avaliacao-numeros > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--fundo); min-width: 0; }
.ultima-avaliacao-numeros .valor-grande { font-size: 22px; }
.ultima-avaliacao-numeros .valor-grande small { font-size: 13px; color: var(--texto-suave); }
.abas-metricas-radio { position: absolute; opacity: 0; pointer-events: none; }
.abas-metricas-rotulos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.abas-metricas-rotulos label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--fundo); color: var(--texto-suave); font-size: 14px; cursor: pointer; }
.abas-metricas-rotulos label .variacao { font-size: 12px; }
.abas-metricas-painel { display: none; }
.abas-metricas-radio:focus-visible ~ .abas-metricas-rotulos { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 12px; }
#metrica-0:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(1) { display: block; }
#metrica-0:checked ~ .abas-metricas-rotulos label:nth-child(1) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-1:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(2) { display: block; }
#metrica-1:checked ~ .abas-metricas-rotulos label:nth-child(2) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-2:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(3) { display: block; }
#metrica-2:checked ~ .abas-metricas-rotulos label:nth-child(3) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-3:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(4) { display: block; }
#metrica-3:checked ~ .abas-metricas-rotulos label:nth-child(4) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-4:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(5) { display: block; }
#metrica-4:checked ~ .abas-metricas-rotulos label:nth-child(5) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-5:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(6) { display: block; }
#metrica-5:checked ~ .abas-metricas-rotulos label:nth-child(6) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-6:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(7) { display: block; }
#metrica-6:checked ~ .abas-metricas-rotulos label:nth-child(7) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-7:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(8) { display: block; }
#metrica-7:checked ~ .abas-metricas-rotulos label:nth-child(8) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-8:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(9) { display: block; }
#metrica-8:checked ~ .abas-metricas-rotulos label:nth-child(9) { background: var(--grafite); color: #fff; font-weight: 700; }
#metrica-9:checked ~ .abas-metricas-paineis .abas-metricas-painel:nth-child(10) { display: block; }
#metrica-9:checked ~ .abas-metricas-rotulos label:nth-child(10) { background: var(--grafite); color: #fff; font-weight: 700; }
@media (max-width: 760px) {
    .ultima-avaliacao-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ultima-avaliacao-numeros .valor-grande { font-size: 19px; }
    .abas-metricas-rotulos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .abas-metricas-rotulos label { flex: none; }
}
/* Campo + botão: o botão não encolhe; no celular estreito cada um ocupa a linha toda. */
.seletor-com-botao > input { flex: 1 1 200px; min-width: 0; }
.seletor-com-botao > button { flex: none; }
@media (max-width: 480px) {
    form > .seletor-com-botao { flex-wrap: wrap; }
    form > .seletor-com-botao > input, form > .seletor-com-botao > button { flex: 1 1 100%; }
}
@media (max-width: 640px) {
    .ficha-atual:has(.botao) .ficha-atual-texto { flex: 1 1 calc(100% - 64px); }
    .resumo-macros-lista small { font-size: 12px; }
}
/* Notificações (ADR 047): por dia, item inteiro tocável, ponto nas novas e texto em até 3 linhas. */
.notificacoes-topo { margin: 0 2px 14px; }
.notificacoes-topo .texto-suave { color: rgba(255, 255, 255, .8); font-size: 14px; }
.notificacoes-topo .link-suave { color: #fff; }
.grupo-notificacoes + .grupo-notificacoes { margin-top: 18px; }
.lista-notificacoes-dia { margin: 0; padding: 0; list-style: none; }
.painel.grupo-notificacoes { padding: 14px 18px 2px; }
.pagina > section.grupo-notificacoes .rotulo-secao { margin: 0 0 2px; color: var(--texto-suave); }
.lista-notificacoes-dia li { position: relative; display: block; padding: 0; border-bottom: 1px solid var(--linha); }
.lista-notificacoes-dia li.nova { margin: 0; padding: 0; background: none; border-radius: 0; }
.lista-notificacoes-dia li:last-child { border-bottom: 0; }
.lista-notificacoes-dia .notificacao { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 2px; color: inherit; }
.lista-notificacoes-dia .notificacao:hover { color: inherit; }
.lista-notificacoes-dia a.notificacao:hover strong { color: var(--primaria); }
.lista-notificacoes-dia .indicador-icone { width: 40px; height: 40px; }
.lista-notificacoes-dia li.nova .indicador-icone { position: relative; }
.lista-notificacoes-dia li.nova .indicador-icone::after { content: ""; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--primaria); }
.notificacao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notificacao-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lista-notificacoes-dia li:not(.nova) .notificacao-titulo strong { font-weight: 600; }
.nova-etiqueta { background: var(--primaria-clara); color: var(--primaria-escura); font-size: 11px; }
.notificacao-corpo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--texto); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.notificacao-corpo.aberto { display: block; -webkit-line-clamp: unset; }
.lista-notificacoes-dia small { color: var(--texto-suave); font-size: 12px; }
.lista-notificacoes-dia .cartao-treino-seta { align-self: center; }
.notificacao-mais { position: relative; margin: -10px 0 12px 54px; font-size: 13px; }
.avisos-celular { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; }
.avisos-celular .indicador-icone { width: 40px; height: 40px; }
.avisos-celular-texto { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
/* Novidades: aviso aberto pela notificação marcado com borda; "Novo aviso" do admin recolhido. */
.lista-notificacoes-dia li:target { margin: 0 -18px; padding: 0 16px; border-left: 4px solid var(--primaria); background: #fffaf6; }
.novo-aviso > summary { list-style: none; cursor: pointer; }
.novo-aviso > summary::-webkit-details-marker { display: none; }
.novo-aviso[open] > summary { margin-bottom: 14px; }
.novo-aviso[open] > summary .botao { background: var(--linha); color: var(--texto); }
.novo-aviso:not([open]) { padding: 0; background: none; box-shadow: none; }
.painel.grupo-notificacoes > h2.rotulo-secao { margin: 0 0 2px; font-size: 12px; }
/* Novidades em cartões clicáveis e a página do aviso (RN-NOT-007). */
.cartoes-novidade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cartao-novidade { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); color: inherit; transition: box-shadow .15s, transform .15s; }
.cartao-novidade:hover { color: inherit; box-shadow: 0 0 0 2px var(--primaria-clara), var(--sombra); transform: translateY(-1px); }
.cartao-novidade:active { transform: scale(.99); }
.cartao-novidade-topo { display: flex; align-items: center; gap: 10px; }
.cartao-novidade-topo .indicador-icone { width: 36px; height: 36px; }
.cartao-novidade-topo small { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.cartao-novidade > strong { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.cartao-novidade-trecho { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--texto-suave); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cartao-novidade-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: auto; padding-top: 6px; }
.cartao-novidade-rodape small { color: var(--texto-suave); font-size: 12px; }
.aviso-detalhe { max-width: 760px; padding: 26px 28px; }
.aviso-detalhe-cabecalho { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.aviso-detalhe-cabecalho .indicador-icone { width: 48px; height: 48px; }
.aviso-detalhe-cabecalho > div { min-width: 0; }
.aviso-detalhe-cabecalho small { color: var(--primaria-escura); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.painel.aviso-detalhe .aviso-detalhe-cabecalho h2 { margin: 4px 0 6px; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; }
.aviso-detalhe-cabecalho time { color: var(--texto-suave); font-size: 14px; }
.aviso-detalhe-texto { padding-top: 18px; font-size: 16px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.aviso-detalhe-envio { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--fundo); color: var(--texto-suave); font-size: 14px; }
.aviso-detalhe ~ .painel { max-width: 760px; }
@media (max-width: 640px) {
    .cartoes-novidade { grid-template-columns: 1fr; }
    .aviso-detalhe { padding: 18px; }
    .painel.aviso-detalhe .aviso-detalhe-cabecalho h2 { font-size: 20px; }
    .aviso-detalhe-cabecalho .indicador-icone { width: 40px; height: 40px; }
}