/* ═══ v20 — Página do aluno (js/v20-aluno-pagina.js) ═══ */
/* C3.2: usa praticamente toda a largura útil depois da sidebar (como no mockup);
   o teto só evita linhas absurdamente longas em monitores muito largos */
.ap-wrap { max-width: 1680px; }
.ap-back {
  background: none; border: none; color: var(--text-muted, #888); cursor: pointer;
  font-size: .9rem; padding: 4px 0; margin-bottom: 12px;
}
.ap-back:hover { color: var(--accent, #8B3FE8); }

/* ═══ Cabeçalho + barra de ações (C2, 2026-09-28) — tokens do tema, sem cor fixa de fundo ═══ */
.ap-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar ident meta";
  align-items: center; gap: 22px;
  background: var(--bg-card, #16161d); border: 1px solid var(--border, #222);
  border-radius: var(--radius-lg, 14px); padding: 22px 24px;
}
.ap-avatar { grid-area: avatar; }
.ap-ident { grid-area: ident; min-width: 0; }
.ap-meta { grid-area: meta; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ap-nome-linha { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 8px; }
.ap-nome {
  font-size: 1.9rem; font-weight: 800; line-height: 1.15; margin: 0; text-transform: none; letter-spacing: -.01em;
  min-width: 0; overflow-wrap: anywhere;
}
.ap-icone-btn {
  flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: none; cursor: pointer; background: var(--accent, #8B3FE8); color: #fff; padding: 0;
}
.ap-icone-btn svg { width: 16px; height: 16px; }
.ap-icone-btn:hover { filter: brightness(1.12); }
.ap-contato {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; margin-bottom: 12px;
  font-size: .9rem; color: var(--text-muted, #999); min-width: 0;
}
.ap-ct { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.ap-ct > span, .ap-ct > a { overflow-wrap: anywhere; min-width: 0; }
.ap-ct svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.ap-ct a { color: inherit; text-decoration: none; }
.ap-ct a:hover { color: var(--accent, #8B3FE8); }
.ap-ct-wa { display: inline-flex; color: var(--success, #22C55E) !important; }
.ap-ct-wa svg { width: 18px; height: 18px; opacity: 1; }
.ap-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-chip {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(139, 63, 232, .16); color: var(--accent, #8B3FE8); max-width: 100%; overflow-wrap: anywhere;
}
.ap-chip.neutro  { background: rgba(255, 255, 255, .08); color: var(--text-muted, #888); }
.ap-chip.ok      { background: rgba(34, 197, 94, .15);  color: var(--success, #22C55E); }
.ap-chip.alerta  { background: rgba(245, 158, 11, .15); color: var(--warning, #F59E0B); }
.ap-chip.vencido { background: rgba(239, 68, 68, .15);  color: var(--danger, #EF4444); border: 1px solid rgba(239, 68, 68, .35); }
.ap-chip.ok-forte { background: var(--success, #22C55E); color: #06240f; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.ap-chip.contorno { background: rgba(139, 63, 232, .10); border: 1px solid rgba(139, 63, 232, .55); }
.ap-status.neutro { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.ap-matricula {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  background: var(--accent, #8B3FE8); color: #fff; border: none; border-radius: 12px; padding: 10px 22px; min-width: 124px;
  box-shadow: 0 6px 20px rgba(139, 63, 232, .28);
}
.ap-matricula span { font-size: .64rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; opacity: .85; }
.ap-matricula strong { font-size: 1.75rem; line-height: 1.05; }
.ap-desde { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .78rem; min-width: 124px; }
.ap-desde span { color: var(--text-muted, #888); }
.ap-desde strong { font-size: .95rem; color: var(--text-primary, #f5f5f5); }

/* Barra de ações */
.ap-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; align-items: stretch; }
.ap-acoes .btn { text-decoration: none; }
.ap-acao { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; }
.ap-acao svg { width: 19px; height: 19px; flex-shrink: 0; }
.ap-acoes .btn-primary.ap-acao { min-width: 210px; }
.ap-mais { position: relative; margin-left: auto; }
.ap-mais-btn { height: 100%; min-height: 48px; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; }
.ap-mais-btn svg { width: 20px; height: 20px; }
.ap-mais-txt { display: none; }
.ap-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-card, #16161d); border: 1px solid var(--border, #2a2a33); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.ap-menu[hidden] { display: none !important; }
.ap-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; text-decoration: none;
  background: none; border: none; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  color: var(--text-primary, #f5f5f5); font-size: .9rem; font-weight: 600;
}
.ap-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted, #999); }
.ap-menu-item:hover, .ap-menu-item:focus-visible { background: rgba(139, 63, 232, .14); outline: none; }
.ap-menu-item.perigo, .ap-menu-item.perigo svg { color: var(--danger, #EF4444); }
.ap-so-celular { display: none; }

/* Tablet: duas colunas (foto | identidade); matrícula e cadastro numa linha abaixo */
@media (max-width: 1024px) {
  .ap-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar ident" "avatar meta"; row-gap: 14px; }
  .ap-meta { flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; }
  .ap-desde { min-width: 0; }
  .ap-acoes .btn-primary.ap-acao { min-width: 0; }
}
/* Celular: empilhado; 2 ações prioritárias na barra, o resto no menu */
@media (max-width: 640px) {
  .ap-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "ident" "meta"; justify-items: center; text-align: center; padding: 20px 16px; gap: 14px; }
  .ap-nome-linha { justify-content: center; }
  .ap-nome { font-size: 1.5rem; }
  .ap-contato { justify-content: center; flex-direction: column; gap: 6px; }
  .ap-badges { justify-content: center; }
  .ap-meta { justify-content: center; }
  .ap-desde { align-items: flex-start; text-align: left; }
  .ap-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ap-acao { padding: 0 10px; font-size: .8rem; gap: 7px; }
  .ap-acao-sec { display: none !important; }
  .ap-mais { grid-column: 1 / -1; margin-left: 0; }
  .ap-mais-btn { width: 100%; }
  .ap-mais-txt { display: inline; }
  .ap-menu { left: 0; right: 0; min-width: 0; }
  .ap-so-celular { display: flex; }
}

.ap-tabs {   /* C3.2: ícone + texto, aba ativa com fundo e linha roxa (mockup); rola por dentro no celular */
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border, #222); margin: 18px 0 18px; scrollbar-width: thin;
}
.ap-tab {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0; white-space: nowrap; cursor: pointer;
  padding: 12px 13px; font-weight: 600; font-size: .88rem; color: var(--text-muted, #9a9aa5); text-transform: none; letter-spacing: 0;
}
.ap-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-tab:hover { color: var(--text-primary, #f5f5f5); background: rgba(255, 255, 255, .03); }
.ap-tab.active { color: var(--text-primary, #f5f5f5); border-bottom-color: var(--accent, #8B3FE8); background: rgba(139, 63, 232, .14); }
.ap-tab.active svg { color: var(--accent, #8B3FE8); }
.ap-panel[hidden] { display: none !important; }

/* Aba Cadastro: o popup "Editar Aluno" vira conteúdo de página */
.ap-cad .modal-overlay {
  position: static; inset: auto; display: block; z-index: auto; padding: 0 !important;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
}
.ap-cad .modal {
  max-width: none !important; width: 100%; max-height: none; overflow: visible; animation: none;
  background: var(--bg-card, #16161d); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; padding: 20px; margin: 0; box-sizing: border-box;
}
.ap-cad .modal > div[hidden] { display: none !important; }
.ap-cad .modal > .modal-header { display: none; }   /* título: o nome já está no topo */
.ap-cad .modal-footer .btn-secondary { display: none; }  /* "Cancelar" não faz sentido na página */

/* C1 — permissões: o que a capacidade não alcança some; o que é só leitura
   não parece editável (sem borda de campo, sem seta de select, sem cursor). */
.ap-cad [data-ap-oculto], .ap-cad .modal-footer[hidden], .ap-cad .tab-btn[hidden] { display: none !important; }
.ap-cad [data-ap-travado], .ap-cad [data-ap-travado]:focus {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  cursor: default; opacity: 1; color: var(--text-primary, #f5f5f5); -webkit-text-fill-color: currentColor;
  padding-left: 0; padding-right: 0; appearance: none; -webkit-appearance: none; resize: none;
}
.ap-cad input[data-ap-travado]::-webkit-calendar-picker-indicator { display: none; }
.ap-cad input[type="checkbox"][data-ap-travado] { appearance: auto; -webkit-appearance: auto; opacity: .75; }
.ap-leitura label:has(> input[data-ap-travado]) { cursor: default !important; }
.ap-leitura-aviso {
  margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; font-size: .82rem;
  color: var(--text-muted, #888); background: rgba(255, 255, 255, .04); border: 1px dashed var(--border, #333);
}
#treino-fichas-list .ap-ficha-leitura { cursor: default; }

/* Cards (renovação) */
.ap-card {
  background: var(--bg-card, #16161d); border: 1px solid var(--border, #222);
  border-radius: var(--radius-lg, 14px); padding: 18px;
}
.ap-card-tit { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #888); margin: 0 0 12px; }
.ap-renov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.ap-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border, #222); font-size: .9rem; }
.ap-kv:last-child { border-bottom: none; }
.ap-kv > span:first-child { color: var(--text-muted, #888); }
.ap-resumo {
  background: rgba(139, 63, 232, .08); border: 1px solid rgba(139, 63, 232, .25); border-radius: 10px;
  padding: 10px 12px; font-size: .86rem; line-height: 1.5; margin: 4px 0 12px;
}
.ap-hist { display: flex; flex-direction: column; }
.ap-hist-row {
  display: grid; grid-template-columns: 100px 110px auto 1fr; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border, #222); font-size: .86rem;
}
.ap-hist-row:last-child { border-bottom: none; }

/* Foto do aluno (B2) — C2: anel roxo + câmera sobre a foto */
.ap-avatar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-foto-anel {
  position: relative; border-radius: 50%; padding: 4px;
  background: linear-gradient(135deg, var(--accent, #8B3FE8), rgba(139, 63, 232, .35));
  box-shadow: 0 0 0 1px rgba(139, 63, 232, .25), 0 8px 26px rgba(139, 63, 232, .22);
}
.ap-foto { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-card, #16161d); }
.ap-foto-ini { display: flex; align-items: center; justify-content: center; background: var(--accent, #8B3FE8);
  color: #fff; font-weight: 800; font-size: 2.2rem; }
.ap-foto-cam {
  position: absolute; right: 2px; bottom: 2px; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--bg-card, #16161d); color: var(--text-primary, #f5f5f5); border: 2px solid var(--accent, #8B3FE8);
}
.ap-foto-cam svg { width: 17px; height: 17px; }
.ap-foto-cam:hover { background: var(--accent, #8B3FE8); color: #fff; }
.ap-foto-btn[disabled] { opacity: .5; cursor: default; }
.ap-foto-msg { font-size: .72rem; color: var(--text-muted, #888); max-width: 150px; text-align: center; }
.ap-foto-msg:empty { display: none; }
.ap-foto-msg.erro { color: var(--danger, #EF4444); }
@media (max-width: 640px) { .ap-foto { width: 96px; height: 96px; } }
/* botões redondos/quadrados do cabeçalho: tamanho fixo (a regra global de
   toque do celular esticava a altura e deixava-os ovais) */
.ap-foto-cam, .ap-icone-btn { flex: none; box-sizing: border-box; aspect-ratio: 1 / 1; }
@media (max-width: 1024px) {
  .ap-foto-cam { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
  .ap-icone-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
}

/* Check-in manual (B3) */
.ap-ck { margin: 14px 0 0; }
.ap-ck[hidden] { display: none !important; }
.ap-ck-txt { font-size: .9rem; margin: 0 0 10px; }
.ap-ck-obs { width: 100%; margin-bottom: 10px; }
.ap-ck-avisos { border: 1px solid var(--warning, #F59E0B); background: rgba(245, 158, 11, .08); border-radius: 10px;
  padding: 10px 12px; font-size: .86rem; margin-bottom: 10px; }
.ap-ck-avisos ul { margin: 6px 0 6px 18px; padding: 0; }
.ap-ck-avisos p { margin: 0; color: var(--text-muted, #888); font-size: .8rem; }
.ap-ck-msg { font-size: .82rem; color: var(--text-muted, #888); min-height: 1em; margin-bottom: 8px; }
.ap-ck-msg.erro { color: var(--danger, #EF4444); }
.ap-ck-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Últimas atividades (B1) — funcional, no estilo atual da página */
.ap-tl { margin: 14px 0 0; }
.ap-tl-itens { list-style: none; margin: 0; padding: 0; }
.ap-tl-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border, #222); }
.ap-tl-item:last-child { border-bottom: none; }
.ap-tl-ico { width: 22px; text-align: center; flex-shrink: 0; }
.ap-tl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.ap-tl-txt span { color: var(--text-muted, #888); font-size: .8rem; overflow-wrap: anywhere; }
.ap-tl-quando { color: var(--text-muted, #888); font-size: .78rem; white-space: nowrap; }
.ap-tl-item.is-cobranca_vencida strong, .ap-tl-item.is-plano_vencido strong, .ap-tl-item.is-falta strong { color: var(--danger, #EF4444); }
.ap-tl-msg { margin: 4px 0; font-size: .88rem; }
.ap-tl-erro { color: var(--danger, #EF4444); }
.ap-tl-btn { margin-top: 10px; background: none; border: 1px solid var(--border, #333); color: var(--text-primary, #f5f5f5);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .82rem; }
.ap-tl-btn:hover { border-color: var(--accent, #8B3FE8); }
.ap-tl-btn[disabled] { opacity: .6; cursor: default; }

/* lista de alunos: nome/foto clicável */
#page-content tr:has(button[onclick^="AdminMembers.openModal("]) > td:first-child { cursor: pointer; }

@media (max-width: 760px) {
  .ap-renov-grid { grid-template-columns: 1fr; }
  .ap-hist-row { grid-template-columns: 1fr auto; }
  .ap-hist-row > :nth-child(4) { display: none; }
  .ap-tl-item { flex-wrap: wrap; }
  .ap-tl-quando { width: 100%; padding-left: 32px; }
  .ap-cad .modal { padding: 14px; }
}

/* ═══ Visão geral + Histórico (C3 · C3.1 · C3.2, 2026-09-29) ═══
   js/v21-aluno-visao.js / v21-aluno-historico.js. Composição do mockup: coluna principal
   (~65%) + coluna lateral (~35%). Só tokens do tema; roxo = informação importante e ação.
   Tudo responde à largura REAL do conteúdo (container query), não só à da janela. */
.ap-visao { container-type: inline-size; }
.ap-v-grade { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.ap-v-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* uma coluna quando não há espaço útil para a lateral; ordem do mockup no celular */
@container (max-width: 860px) {
  .ap-v-grade { display: flex; flex-direction: column; align-items: stretch; }   /* stretch: sem isso o card com container-type encolhia a ~0 */
  .ap-v-col { display: contents; }
  .ap-v-grade [data-card="perfil"] { order: 1; }
  .ap-v-grade [data-card="plano"] { order: 2; }
  .ap-v-grade [data-card="frequencia"] { order: 3; }
  .ap-v-grade [data-card="avaliacao"] { order: 5; }
  .ap-v-grade [data-card="info"] { order: 6; }
  .ap-v-grade [data-card="atividades"] { order: 7; }
}

/* ── card: borda fina, fundo escuro, pouco contraste com a página ── */
.ap-v-card {
  background: var(--bg-card, #16161d); border: 1px solid var(--border, #24242c); border-radius: 14px;
  padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; align-items: stretch;
}
.ap-v-card > * { max-width: 100%; }
#ap-v-freq, #ap-v-treino, #ap-v-aval, #ap-v-ativ-lista { min-width: 0; display: flex; flex-direction: column; }
.ap-v-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.ap-v-tit { margin: 0 0 14px; font-size: 1.2rem; font-weight: 700; color: var(--text-primary, #f5f5f5); text-transform: none; letter-spacing: 0; min-width: 0; overflow-wrap: anywhere; }
.ap-v-cab .ap-v-tit { margin: 0; }
.ap-v-tit-sub { font-size: .92rem; font-weight: 400; color: var(--text-muted, #9a9aa5); }
.ap-v-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
  background: rgba(139, 63, 232, .06); border: 1px solid rgba(139, 63, 232, .35); color: var(--accent, #8B3FE8);
  font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.ap-v-pill svg { width: 14px; height: 14px; }
.ap-v-pill:hover { background: rgba(139, 63, 232, .16); }

/* textos */
.ap-v-nome { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 0; overflow-wrap: anywhere; color: var(--text-primary, #f5f5f5); }
.ap-v-apagado { color: var(--text-muted, #888); }
.ap-v-sub { color: var(--text-muted, #888); font-size: .82rem; font-weight: 400; }
.ap-v-msg { color: var(--text-muted, #888); font-size: .88rem; margin: 2px 0 6px; }
.ap-v-erro { color: var(--danger, #EF4444); }

/* ── campos em caixinhas (Dados Pessoais / Informações adicionais) ── */
.ap-v-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.ap-v-campo {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14px; min-height: 58px; box-sizing: border-box;
  background: rgba(255, 255, 255, .02); border: 1px solid var(--border, #24242c); border-radius: 10px;
}
.ap-v-campo[hidden] { display: none !important; }
.ap-v-campo[data-largo] { grid-column: 1 / -1; }
.ap-v-campo-ico { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted, #b4b4c0); }
.ap-v-campo-ico svg { width: 20px; height: 20px; }
.ap-v-campo > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ap-v-campo small { font-size: .74rem; color: var(--text-muted, #8d8d98); }
.ap-v-campo .v { font-size: .93rem; font-weight: 600; color: var(--text-primary, #f5f5f5); overflow-wrap: anywhere; display: block; }
.ap-v-campo[data-corta] .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* nome/username/e-mail: 1 linha, valor inteiro no title */
.ap-v-campo a { color: inherit; text-decoration: none; }
.ap-v-campo a:hover { color: var(--accent, #8B3FE8); }
.ap-v-wa { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--success, #22C55E) !important; }
.ap-v-wa svg { width: 17px; height: 17px; }
.ap-v-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; white-space: pre-line; }

/* Dados Pessoais: campos + foto grande à direita */
.ap-v-dados { display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 12px; align-items: start; }
.ap-v-foto { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-v-foto-img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 12px; display: block; background: var(--bg-card, #16161d); border: 1px solid var(--border, #24242c); }
.ap-v-foto-ini { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--accent, #8B3FE8), rgba(139, 63, 232, .45)); }
.ap-v-foto-acoes { display: flex; flex-direction: column; gap: 6px; }
.ap-v-foto-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 8px 10px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border, #2a2a33); border-radius: 9px; color: var(--text-primary, #f5f5f5);
  font-size: .82rem; font-weight: 600;
}
.ap-v-foto-btn svg { width: 15px; height: 15px; }
.ap-v-foto-btn:hover { border-color: var(--accent, #8B3FE8); }
.ap-v-foto-btn.perigo { color: var(--danger, #EF4444); border-color: rgba(239, 68, 68, .35); }

/* Plano atual (lateral) */
.ap-v-plano-box {
  border-radius: 12px; padding: 14px 16px; border: 1px solid rgba(139, 63, 232, .35);
  background: linear-gradient(135deg, rgba(139, 63, 232, .18), rgba(139, 63, 232, .05));
}
.ap-v-plano-topo { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ap-v-plano-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139, 63, 232, .22); color: #d9c2ff; }
.ap-v-plano-ico svg { width: 20px; height: 20px; }
.ap-v-status { font-weight: 700; }
.ap-v-card .ap-chip.ok-forte, .ap-v-status { text-transform: none; letter-spacing: 0; }   /* "Ativo" como no mockup */
.ap-chip.ok-forte { background: var(--success, #22C55E); color: #06240f; font-weight: 800; }
.ap-v-plano-datas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-top: 14px; }
.ap-v-plano-datas > div { display: flex; flex-direction: column; }
.ap-v-plano-datas small { font-size: .74rem; color: var(--text-muted, #a4a4b0); }
.ap-v-plano-datas > div > span { font-size: 1rem; font-weight: 700; }
.ap-v-atraso { display: flex; align-items: center; gap: 8px; color: var(--danger, #EF4444); font-size: .82rem; font-weight: 600; margin: 10px 0 0; }
.ap-v-atraso svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-v-plano-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.ap-v-plano-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px; font-size: .88rem; text-transform: none; letter-spacing: 0; }
.ap-v-plano-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Frequência (lateral, compacta) */
.ap-v-freq-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ap-v-faixa-wrap { min-width: 0; }
/* 30 dias em círculos (C3.3): 3 linhas de 10, do mais antigo (1º) a hoje (último); aceso = dia com presença */
.ap-v-faixa { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px 4px; max-width: 260px; }
.ap-v-faixa i {
  aspect-ratio: 1 / 1; max-width: 22px; width: 100%; border-radius: 50%; box-sizing: border-box; justify-self: center;
  border: 1.5px solid rgba(255, 255, 255, .16); background: transparent; display: inline-flex; align-items: center; justify-content: center;
}
.ap-v-faixa i.on { background: var(--success, #22C55E); border-color: var(--success, #22C55E); color: #06240f; }
.ap-v-faixa i svg { width: 62%; height: 62%; }
.ap-v-faixa-leg { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-muted, #777); margin-top: 5px; }
.ap-v-kpi { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 76px; }
.ap-v-kpi > strong { font-size: 2.3rem; line-height: 1; font-weight: 800; color: var(--accent, #8B3FE8); letter-spacing: -.02em; }
.ap-v-kpi > div { display: flex; flex-direction: column; margin-top: 3px; }
.ap-v-kpi > div > span:first-child { font-size: .78rem; font-weight: 700; color: var(--text-primary, #f5f5f5); }
.ap-v-kpi > div > span:last-child { font-size: .7rem; color: var(--text-muted, #888); }
.ap-v-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ap-v-mini > div { display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, .03); border: 1px solid var(--border, #24242c); border-radius: 9px; padding: 8px 10px; }
.ap-v-mini small { font-size: .7rem; color: var(--text-muted, #888); }
.ap-v-mini span { font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
/* aba Frequência */
.ap-v-freq-aba { margin-bottom: 16px; }
.ap-v-freq-aba .ap-v-kpi > strong { font-size: 3rem; }
.ap-v-presencas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ap-v-presencas li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border, #24242c); border-radius: 10px; font-size: .84rem; }
.ap-v-presencas li span { color: var(--text-muted, #9a9aa5); }

/* Treino atual — bloco compacto no fim de Informações adicionais (C3.3; sem card próprio) */
.ap-v-treino-bloco { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #24242c); }
.ap-v-subtit { margin: 0 0 10px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted, #9a9aa5); }
.ap-v-treino { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ap-v-treino-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(139, 63, 232, .14); color: var(--accent, #8B3FE8); }
.ap-v-treino-ico svg { width: 19px; height: 19px; }
.ap-v-treino-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-v-treino-txt .ap-v-nome { font-size: .98rem; }
.ap-v-treino-meta { margin: 0; font-size: .82rem; color: var(--text-muted, #9a9aa5); overflow-wrap: anywhere; }
.ap-v-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ap-v-meta li { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text-primary, #e0e0e8); min-width: 0; }
.ap-v-meta li span { overflow-wrap: anywhere; min-width: 0; }
.ap-v-meta svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted, #888); }
.ap-chip.contorno { background: rgba(139, 63, 232, .10); border: 1px solid rgba(139, 63, 232, .55); color: var(--accent, #8B3FE8); }

/* Evolução física */
.ap-v-evol { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.ap-v-evol.com-grafico { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) minmax(170px, 1.7fr); }   /* tiles + gráfico numa faixa */
.ap-v-tile { padding: 12px 14px; border: 1px solid var(--border, #24242c); border-radius: 10px; background: rgba(255, 255, 255, .02); min-width: 0; }
.ap-v-tile small { font-size: .76rem; color: var(--text-muted, #9a9aa5); }
.ap-v-tile p { margin: 4px 0 0; display: flex; align-items: baseline; gap: 4px; }
.ap-v-tile p strong { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--text-primary, #f5f5f5); white-space: nowrap; }
.ap-v-tile p span { color: var(--text-muted, #9a9aa5); font-weight: 600; }
.ap-v-delta { display: block; margin-top: 4px; font-size: .74rem; color: var(--text-muted, #9a9aa5); }
.ap-v-grafico { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; border: 1px solid var(--border, #24242c); border-radius: 10px; color: var(--accent, #8B3FE8); min-width: 0; }
.ap-v-grafico svg { width: 100%; height: 64px; overflow: visible; }
.ap-v-grafico small { color: var(--text-muted, #888); font-size: .72rem; }
.ap-v-evol-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }

/* links / CTAs */
.ap-v-link {
  background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent, #8B3FE8); font-weight: 700; font-size: .85rem; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.ap-v-link:hover { text-decoration: underline; }
.ap-v-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; font-size: .78rem; }
.ap-v-cta svg { width: 15px; height: 15px; }

/* estados vazios — compactos */
.ap-v-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 6px 4px; }
.ap-v-vazio.linha { flex-direction: row; flex-wrap: wrap; text-align: left; align-items: center; gap: 10px 14px; padding: 2px 0; }
.ap-v-vazio-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139, 63, 232, .10); color: var(--accent, #8B3FE8); border: 1px dashed rgba(139, 63, 232, .45); }
.ap-v-vazio-ico svg { width: 19px; height: 19px; }
.ap-v-vazio-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-v-vazio.linha .ap-v-vazio-txt { flex: 1 1 160px; }   /* só no vazio em linha (em coluna o basis viraria altura) */
.ap-v-vazio strong { font-size: .93rem; color: var(--text-primary, #f5f5f5); }
.ap-v-vazio-txt > span { font-size: .8rem; color: var(--text-muted, #888); }
.ap-v-vazio-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

/* ── Timeline (Visão geral: compacta na lateral · aba Histórico) ── */
.ap-v-ativ, .ap-hist-card { container-type: inline-size; }
.ap-tl-linha { list-style: none; margin: 0; padding: 0; }
.ap-tl-linha .ap-tl-item {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: start;
  padding: 0 0 16px; border-bottom: none;
}
.ap-tl-linha .ap-tl-item::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--border, #2a2a33); }
.ap-tl-linha .ap-tl-item:last-child { padding-bottom: 4px; }
.ap-tl-linha .ap-tl-item:last-child::before { display: none; }
.ap-tl-linha .ap-tl-ico {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); color: var(--text-muted, #9a9aa5); border: 1px solid var(--border, #2a2a33); position: relative; z-index: 1;
}
.ap-tl-linha .ap-tl-ico svg { width: 17px; height: 17px; }
.ap-tl-ico.tom-ok     { background: rgba(34, 197, 94, .14);  color: var(--success, #22C55E); border-color: rgba(34, 197, 94, .4); }
.ap-tl-ico.tom-roxo   { background: rgba(139, 63, 232, .16); color: var(--accent, #8B3FE8);  border-color: rgba(139, 63, 232, .45); }
.ap-tl-ico.tom-perigo { background: rgba(239, 68, 68, .14);  color: var(--danger, #EF4444);  border-color: rgba(239, 68, 68, .4); }
.ap-tl-ico.tom-ouro   { background: rgba(245, 158, 11, .14); color: var(--warning, #F59E0B); border-color: rgba(245, 158, 11, .4); }
.ap-tl-linha .ap-tl-txt { padding-top: 6px; gap: 2px; }
.ap-tl-linha .ap-tl-txt strong { font-size: .9rem; color: var(--text-primary, #f5f5f5); overflow-wrap: anywhere; }
.ap-tl-linha .ap-tl-quando { padding-top: 8px; font-size: .76rem; color: var(--text-muted, #888); white-space: nowrap; }
@container (max-width: 520px) {   /* coluna lateral e celular: data embaixo do título, como no mockup */
  .ap-tl-linha .ap-tl-item { grid-template-columns: 36px minmax(0, 1fr); }
  .ap-tl-linha .ap-tl-ico { grid-row: span 2; }
  .ap-tl-linha .ap-tl-quando { grid-column: 2; padding: 2px 0 0; width: auto; white-space: normal; }
}
.ap-hist-card { margin: 0; padding: 20px 22px; border-radius: 14px; }
.ap-v-ativ .ap-v-link, .ap-hist-card .ap-tl-btn { margin-top: 6px; align-self: flex-start; white-space: normal; text-align: left; }

/* ── responsivo interno dos blocos ── */
@container (max-width: 1100px) { .ap-v-evol.com-grafico { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } .ap-v-evol .ap-v-grafico { grid-column: 1 / -1; } }
@container (max-width: 560px) {
  .ap-v-campos { grid-template-columns: minmax(0, 1fr); }
  .ap-v-dados { grid-template-columns: minmax(0, 1fr); }
  .ap-v-foto { display: none; }               /* no celular a foto já está no cabeçalho */
  .ap-v-evol, .ap-v-evol.com-grafico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-v-grafico { grid-column: 1 / -1; }
  .ap-v-treino { grid-template-columns: 36px minmax(0, 1fr); }
  .ap-v-treino-acao { grid-column: 1 / -1; }
}
.ap-carregando { animation: ap-pulso 1.2s ease-in-out infinite; }
@keyframes ap-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ap-carregando { animation: none; } }

/* ── C4 (2026-10-01): ficha em modo leitura (sem treinos.gerir) ── */
#treino-fichas-list .ap-ficha-leitura[data-ficha-id] { cursor: pointer; }
.ap-ficha-leitura:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-ficha-ro { margin-top: 14px; padding: 16px 18px; }
.ap-ficha-ro-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ap-ficha-ro-cab > div { min-width: 0; flex: 1 1 220px; }
.ap-ficha-ro-cab .btn { flex-shrink: 0; }
.ap-ficha-ro-cab h3, .ap-ficha-ro-dia h4 { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: normal; overflow-wrap: break-word; }
.ap-ficha-ro-cab p { margin: 2px 0 0; }
.ap-ficha-ro-dia { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.ap-ficha-ro-dia h4 { margin: 0 0 6px; font-size: .95rem; }
.ap-ficha-ro-dia ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ap-ficha-ro-dia li { overflow-wrap: anywhere; }
.ap-ficha-ro-cfg { font-size: .82rem; color: var(--text-secondary, var(--text-muted)); }
.ap-ficha-ro-obs { font-size: .8rem; color: var(--text-muted); font-style: italic; white-space: pre-wrap; }