/* Telas adicionadas em 10/2026: comprovantes, histórico de presenças, página inicial, plano na cobrança. */
.cx-page { display: grid; gap: 20px; }
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cx-head h1 { margin: 0; font-family: Montserrat, Inter, system-ui, sans-serif; font-size: 28px; line-height: 1.2; color: rgb(var(--color-on-surface)); }
.cx-head p { margin: 4px 0 0; color: rgb(var(--color-on-surface-variant)); font-size: 14px; }
.cx-card { background: rgb(var(--color-surface-container-lowest)); border: 1px solid rgb(var(--color-outline-variant)); border-radius: 12px; padding: 16px; }
.cx-card h2, .cx-card h3 { margin: 0 0 8px; font-family: Montserrat, Inter, system-ui, sans-serif; color: rgb(var(--color-on-surface)); }
.cx-card h2 { font-size: 18px; }
.cx-card h3 { font-size: 16px; }
.cx-muted { color: rgb(var(--color-on-surface-variant)); font-size: 14px; }
.cx-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.cx-field { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: rgb(var(--color-on-surface-variant)); }
.cx-field input, .cx-field select, .cx-field textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px; font: inherit; font-weight: 400; font-size: 15px;
  border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-lowest)); color: rgb(var(--color-on-surface));
}
.cx-field textarea { min-height: 88px; resize: vertical; }
.cx-field input:focus, .cx-field select:focus, .cx-field textarea:focus { outline: 2px solid rgb(var(--color-primary)); outline-offset: 1px; }
.cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cx-stat { background: rgb(var(--color-surface-container-lowest)); border: 1px solid rgb(var(--color-outline-variant)); border-radius: 12px; padding: 14px 16px; }
.cx-stat span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--color-on-surface-variant)); }
.cx-stat strong { display: block; margin-top: 4px; font-size: 26px; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface)); }
.cx-table-wrap { overflow-x: auto; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 12px; background: rgb(var(--color-surface-container-lowest)); }
.cx-table { width: 100%; border-collapse: collapse; font-size: 14px; color: rgb(var(--color-on-surface)); }
.cx-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--color-on-surface-variant)); background: rgb(var(--color-surface-container-low)); }
.cx-table th, .cx-table td { padding: 10px 12px; border-bottom: 1px solid rgb(var(--color-outline-variant)); vertical-align: middle; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table td.cx-num { font-variant-numeric: tabular-nums; text-align: right; }
.cx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cx-pill-ok { background: #dcf5e3; color: #11592b; }
.cx-pill-warn { background: #fff1c7; color: #6a4b00; }
.cx-pill-bad { background: #fde3e1; color: #8a1f17; }
.cx-pill-info { background: rgb(var(--color-surface-container-high)); color: rgb(var(--color-on-surface)); }
.dark .cx-pill-ok { background: #123d22; color: #b8f0c8; }
.dark .cx-pill-warn { background: #4a3b05; color: #ffe39a; }
.dark .cx-pill-bad { background: #5a1a15; color: #ffd0cc; }
.cx-list { display: grid; gap: 10px; }
.cx-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-lowest)); }
.cx-item-title { font-weight: 700; color: rgb(var(--color-on-surface)); }
.cx-item-meta { margin-top: 2px; font-size: 13px; color: rgb(var(--color-on-surface-variant)); }
.cx-item-reason { margin-top: 6px; font-size: 13px; color: #8a1f17; }
.dark .cx-item-reason { color: #ffb4ab; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.cx-btn-primary { background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary)); }
.cx-btn-ghost { background: transparent; color: rgb(var(--color-primary)); border-color: rgb(var(--color-outline-variant)); }
.cx-btn-danger { background: #b3261e; color: #fff; }
.cx-btn:disabled { opacity: .55; cursor: not-allowed; }
.cx-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.cx-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.cx-bar i { display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 0 0; background: rgb(var(--color-primary)); min-height: 2px; }
.cx-bar small { font-size: 11px; color: rgb(var(--color-on-surface-variant)); white-space: nowrap; }
.cx-bar b { font-size: 11px; color: rgb(var(--color-on-surface)); font-variant-numeric: tabular-nums; }
.cx-toggle { display: flex; align-items: center; gap: 10px; font-weight: 700; color: rgb(var(--color-on-surface)); }
.cx-toggle input { width: 18px; height: 18px; }
.cx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cx-empty { padding: 28px 16px; text-align: center; color: rgb(var(--color-on-surface-variant)); }
.cx-alert { padding: 10px 14px; border-radius: 10px; background: #fde3e1; color: #8a1f17; font-size: 14px; }
.cx-success { padding: 10px 14px; border-radius: 10px; background: #dcf5e3; color: #11592b; font-size: 14px; }
.cx-modal-bg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .45); }
.cx-modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 14px;
  background: rgb(var(--color-surface-container-lowest)); color: rgb(var(--color-on-surface)); border-radius: 16px; padding: 20px; box-shadow: 0 10px 40px rgb(0 0 0 / .25); }
.cx-modal h2 { margin: 0; font-size: 20px; }
.cx-plan-row { display: grid; grid-template-columns: 24px 1fr minmax(150px, 220px); gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgb(var(--color-outline-variant)); }
.cx-plan-row:last-child { border-bottom: 0; }
.cx-plan-row small { display: block; color: rgb(var(--color-on-surface-variant)); font-size: 12px; }
.cx-plan-row select { min-height: 38px; border-radius: 8px; border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-lowest)); color: rgb(var(--color-on-surface)); padding: 4px 8px; font: inherit; }
.cx-plan-list { max-height: 420px; overflow-y: auto; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 10px; }
@media (max-width: 640px) {
  .cx-item { grid-template-columns: 1fr; }
  .cx-actions { justify-content: flex-start; }
  .cx-plan-row { grid-template-columns: 24px 1fr; }
  .cx-plan-row select { grid-column: 2; }
  .cx-head h1 { font-size: 24px; }
}

/* Página inicial: Instagram */
.home-instagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.home-instagram-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: #10162b; }
.home-instagram-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.home-instagram-grid a:hover img { transform: scale(1.04); }
.home-instagram-grid span { position: absolute; inset: auto 0 0 0; padding: 22px 12px 10px; font-size: 13px; line-height: 1.35; color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / .75)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-instagram-embeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.home-instagram-embeds iframe { width: 100%; height: 560px; border: 0; border-radius: 14px; background: #fff; }
.home-instagram-cta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 720px) { .home-instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contato (quadro verde) com o perfil do Instagram ao lado */
.home-contact-linha { display: grid; grid-template-columns: minmax(0, 1fr) 334px; gap: 24px; align-items: center; }
.home-contact-linha-unica { grid-template-columns: 1fr; justify-items: center; }
.home-contact-linha-unica .home-contact { width: 100%; }
.home-instagram-perfil { width: 334px; height: 310px; }
.home-instagram-perfil iframe { display: block; width: 334px; height: 310px; border: 0; background: transparent; }
@media (max-width: 960px) {
  .home-contact-linha { grid-template-columns: 1fr; justify-items: center; }
  .home-contact-linha .home-contact { width: 100%; }
}

/* Terminal de presença: leitura facial em cima, busca por nome embaixo */
/* responsive-site.css escondia o painel lateral do terminal no celular (antes da câmera existir); a leitura facial deve aparecer sempre. */
.totem-page aside.totem-facial { display: flex !important; }
.totem-facial-corpo { display: grid; gap: 16px; }
.totem-camera { width: min(100%, 560px, 56vh); margin: 0 auto; }
.totem-facial-controles { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) {
  .totem-facial-corpo { grid-template-columns: auto minmax(240px, 1fr); align-items: center; gap: 24px; }
  .totem-camera { width: min(440px, 48vh); margin: 0; }
}

/* Cabeçalho do painel: busca, histórico e ajuda */
.hdr-fundo { position: fixed; inset: 0; z-index: 100; display: flex; background: rgb(7 28 46 / .45); }
.hdr-fundo-direita { justify-content: flex-end; }
.hdr-fundo-topo { justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.hdr-painel { display: grid; align-content: start; gap: 12px; overflow-y: auto; padding: 20px; color: rgb(var(--color-on-surface)); background: rgb(var(--color-surface-container-lowest)); box-shadow: 0 10px 40px rgb(0 0 0 / .25); }
.hdr-painel-direita { width: min(100%, 460px); height: 100%; }
.hdr-painel-topo { width: min(100%, 640px); max-height: 80vh; border-radius: 16px; }
.hdr-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hdr-topo h2 { margin: 0; font-family: Montserrat, Inter, system-ui, sans-serif; font-size: 20px; font-weight: 700; color: rgb(var(--color-on-surface)); }
.hdr-fechar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: rgb(var(--color-on-surface-variant)); }
.hdr-fechar:hover { background: rgb(var(--color-surface-container-high)); }
.hdr-busca-campo { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 52px; border: 2px solid rgb(var(--color-outline-variant)); border-radius: 12px; color: rgb(var(--color-on-surface-variant)); }
.hdr-busca-campo:focus-within { border-color: rgb(var(--color-primary)); }
.hdr-busca-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: rgb(var(--color-on-surface)); }
.hdr-resultados { display: grid; gap: 14px; }
.hdr-grupo { display: grid; gap: 4px; }
.hdr-grupo h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--color-on-surface-variant)); }
.hdr-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; text-align: left; color: rgb(var(--color-on-surface)); }
.hdr-item:hover, .hdr-item:focus-visible { background: rgb(var(--color-surface-container-high)); outline: none; }
.hdr-item > span { display: grid; min-width: 0; }
.hdr-item strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-item small { font-size: 13px; color: rgb(var(--color-on-surface-variant)); }
.hdr-vazio { padding: 16px 4px; color: rgb(var(--color-on-surface-variant)); }
.hdr-dica { margin: 4px 0 0; font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
.hdr-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hdr-linha p { margin: 0; }
.hdr-timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hdr-timeline li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgb(var(--color-outline-variant)); border-left: 4px solid rgb(var(--color-primary)); border-radius: 10px; }
.hdr-timeline li > div { display: grid; min-width: 0; gap: 2px; }
.hdr-timeline strong { font-size: 14px; }
.hdr-alvo { font-size: 14px; color: rgb(var(--color-on-surface)); overflow-wrap: anywhere; }
.hdr-timeline small { font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
.hdr-ver { min-height: 34px; padding: 0 12px; }
.hdr-topicos { display: grid; gap: 8px; }
.hdr-topico { border: 1px solid rgb(var(--color-outline-variant)); border-radius: 10px; padding: 10px 12px; }
.hdr-topico summary { cursor: pointer; font-weight: 700; }
.hdr-topico ol { margin: 8px 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: rgb(var(--color-on-surface-variant)); list-style: decimal; }
.hdr-suporte { display: grid; gap: 6px; justify-items: start; margin-top: 4px; padding: 12px; border-radius: 10px; background: rgb(var(--color-surface-container-low)); }
.hdr-suporte p { margin: 0; font-size: 14px; color: rgb(var(--color-on-surface-variant)); }

/* Campeonatos: imagem e envio */
.cmp-upload { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 96px; padding: 12px; border: 2px dashed rgb(var(--color-outline-variant)); border-radius: 12px; cursor: pointer; color: rgb(var(--color-on-surface-variant)); font-weight: 600; }
.cmp-upload:hover { border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary)); }
.cmp-imagem { display: grid; gap: 8px; }
.cmp-imagem img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; background: rgb(var(--color-surface-container-low)); }
.cmp-imagem .cx-actions { justify-content: flex-start; }

/* Ficha: troca de equipe */
.teq-lista { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.teq-opcao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 10px; cursor: pointer; }
.teq-opcao.is-sel { border-color: rgb(var(--color-primary)); background: rgb(var(--color-primary) / .08); }
.teq-opcao input { width: 18px; height: 18px; }
.teq-opcao span { display: grid; }
.teq-opcao small { font-size: 13px; color: rgb(var(--color-on-surface-variant)); }

/* Dashboard: aniversariantes */
#aniversariantes-mes { scroll-margin-top: 80px; }
.aniv-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.aniv-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 10px; text-align: left; color: rgb(var(--color-on-surface)); }
.aniv-item:hover { background: rgb(var(--color-surface-container-high)); }
.aniv-item.is-hoje { border-color: #2e7d4f; }
.aniv-dia { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgb(var(--color-surface-container-high)); color: rgb(var(--color-on-surface)); }
.aniv-texto { display: grid; min-width: 0; flex: 1; }
.aniv-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aniv-texto small { font-size: 13px; color: rgb(var(--color-on-surface-variant)); }

/* Área do aluno: avisos */
.aviso-aluno-lista { display: grid; gap: 10px; }
.aviso-aluno { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; border: 1px solid; }
.aviso-aluno strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.aviso-aluno p { margin: 2px 0 0; font-size: 14px; }
.aviso-mensagem { background: #e6f0fb; border-color: #9cc0ea; color: #0d3a66; }
.aviso-cobranca { background: #fff6e0; border-color: #f0cf7a; color: #5c4100; }
.aviso-vencida { background: #fde8e6; border-color: #f0a8a1; color: #7a1c14; }
.aviso-analise { background: #e9f6ee; border-color: #9fd4b2; color: #14532d; grid-template-columns: auto 1fr; }
.aviso-novo { padding: 2px 8px; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.aviso-acao { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: #123246; color: #fff; white-space: nowrap; }
.dark .aviso-mensagem { background: #12304f; border-color: #2d5a8a; color: #d6e8fb; }
.dark .aviso-cobranca { background: #3d3108; border-color: #7a6215; color: #ffe8a8; }
.dark .aviso-vencida { background: #4a1813; border-color: #8a3127; color: #ffd6d1; }
.dark .aviso-analise { background: #123d22; border-color: #2a7a48; color: #c8f2d6; }
.dark .aviso-acao { background: #f4f7f8; color: #123246; }
.chat-launcher { display: inline-flex; align-items: center; gap: 8px; }
.chat-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 800; }
.chat-launcher-novo { animation: chat-pulso 1.6s ease-in-out 3; }
@keyframes chat-pulso { 50% { box-shadow: 0 0 0 8px rgb(229 72 77 / .25); } }
@media (prefers-reduced-motion: reduce) { .chat-launcher-novo { animation: none; } }
@media (max-width: 640px) {
  .aviso-aluno { grid-template-columns: auto 1fr; }
  .aviso-acao { grid-column: 1 / -1; justify-self: start; }
}

/* Atrasos: detalhe na área do aluno e quadro do dashboard */
.atraso-detalhe { margin-top: 4px; font-size: 13px; color: #8a1f17; }
.dark .atraso-detalhe { color: #ffb4ab; }
.atraso-linha { cursor: pointer; }
.atraso-linha:hover td { background: rgb(var(--color-surface-container-high)); }
.atraso-sub { display: block; font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
#alunos-em-atraso { scroll-margin-top: 80px; }

/* Cobrança automática sempre ativa: configuração e tabela editável */
.auto-pagina { display: grid; gap: 14px; }
.auto-pagina > h2 { margin: 0; }
.auto-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.auto-config .cx-actions { justify-content: flex-start; }
.auto-input { min-height: 38px; max-width: 220px; border-radius: 8px; border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-lowest)); color: rgb(var(--color-on-surface)); padding: 4px 8px; font: inherit; font-size: 14px; }
.auto-dia { width: 64px; text-align: center; }
.auto-sub { display: block; font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
.auto-salvar { min-height: 34px; padding: 0 12px; }
.auto-erro { display: block; margin-top: 4px; font-size: 12px; color: #b3261e; }
.auto-tabela td { white-space: nowrap; }
.auto-tabela td:first-child { white-space: normal; min-width: 160px; }

/* Cobrança automática: situação por aluno */
.auto-status { display: grid; gap: 12px; margin-top: 20px; }
.auto-status-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.auto-status-head h3 { margin: 0; }
.auto-status-head p { margin: 2px 0 0; }
.auto-status .cx-field { min-width: 200px; }

/* Menu superior da página inicial: Horários, Contato, Área do aluno e acesso do admin, sempre visíveis (sem menu sanduíche) */
.home-nav.home-nav-simples { display: flex; position: static; flex-direction: row; align-items: center; gap: 22px; padding: 0; background: none; box-shadow: none; white-space: nowrap; }
.home-nav-simples a { padding: 0; }
.home-nav-simples .home-aluno-botao { padding: 10px 18px; }
.home-admin-icone { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid #b5c6c0; color: #123246; }
.home-admin-icone:hover { color: #a54c0b; border-color: #a54c0b; }
@media (max-width: 767px) {
  .home-nav.home-nav-simples { gap: 14px; font-size: 14px; }
  .home-brand small { display: none; }
}
@media (max-width: 560px) {
  .home-nav-simples .home-nav-link { display: none; }
  .home-nav.home-nav-simples { gap: 8px; }
  .home-nav-simples .home-aluno-botao { padding: 10px 14px; font-size: 14px; }
  .home-brand span { display: none; }
}

/* Página inicial: galeria e campeonatos */
.home-galeria { display: grid; gap: 14px; margin-top: 28px; }
.home-galeria-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.home-galeria-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-galeria-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-galeria-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-galeria-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-galeria figure { margin: 0; display: grid; gap: 8px; }
.home-galeria a { display: block; overflow: hidden; border-radius: 16px; background: #dce5e1; aspect-ratio: 4 / 5; }
.home-galeria-1 a, .home-galeria-2 a { aspect-ratio: 4 / 3; }
.home-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.home-galeria a:hover img { transform: scale(1.04); }
.home-galeria figcaption { font-size: 14px; color: #48616f; }
.home-campeonatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.home-campeonato { overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid #dce5e1; border-radius: 18px; }
.home-campeonato img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef3f1; }
.home-campeonato-texto { display: grid; gap: 6px; padding: 20px 22px 24px; }
.home-campeonato-texto h3 { margin: 0; font-size: 20px; line-height: 1.25; color: #123246; }
.home-campeonato-texto p { margin: 0; font-size: 15px; }
.home-campeonato-meta { font-weight: 700; color: #243f4b; }
.home-campeonato-texto small { color: #5b7380; }
.home-campeonato-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e8eeee; color: #48616f; }
.home-campeonato-tag.is-futuro { background: #fff1e0; color: #a34b10; }
@media (max-width: 860px) {
  .home-galeria-3, .home-galeria-4, .home-galeria-5 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .home-galeria figure { scroll-snap-align: start; }
}
@media (max-width: 560px) { .home-galeria-2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; } }

/* Configuração da página inicial: fotos */
.pi-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pi-foto { margin: 0; display: grid; gap: 8px; padding: 8px; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 12px; }
.pi-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.pi-foto-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.pi-foto-acoes .cx-btn { min-height: 34px; padding: 0 10px; }

.familia-cobranca { margin: 0 0 16px; padding: 16px; border: 1px solid #b8c2d8; border-radius: 12px; background: #fff; display: grid; gap: 12px; }
.familia-cobranca h2 { font-weight: 800; color: #123246; margin: 0; }
.familia-cobranca form { display: grid; gap: 8px; }
.familia-cobranca button[type="submit"] { min-height: 44px; border-radius: 10px; border: 0; background: #002a6b; color: #fff; font-weight: 700; cursor: pointer; }
.familia-cobranca button[disabled] { opacity: .6; cursor: default; }
.familia-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.familia-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e8f2; }
.familia-itens li.familia-total { border-bottom: 0; border-top: 2px solid #123246; font-weight: 800; }
.familia-vazio { padding: 16px; border: 1px dashed #b8c2d8; border-radius: 12px; color: #4a5a6a; }

/* Conta de família: abas dos alunos dentro do cabeçalho azul (mobile primeiro: quebram em linhas, sem rolagem lateral). */
.familia-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.familia-abas button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.familia-abas button.familia-ativo { background: #fff; border-color: #fff; color: #002a6b; }
.familia-abas button:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
@media (min-width: 768px) { .familia-abas button { font-size: 15px; } }
.familia-abas-linha { width: 100%; order: 1; }
/* Cartão da família cabe na tela do celular: nada passa da borda. */
.familia-cobranca { max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; }
.familia-cobranca > * { max-width: 100%; }
.familia-itens li { flex-wrap: wrap; }
.familia-itens strong { white-space: nowrap; }
.familia-cobranca { grid-template-columns: minmax(0, 1fr); }

/* Cobrança automática: usa a largura toda e a tabela cabe sem barra de rolagem. */
.automation-settings.auto-pagina { max-width: none; }
.auto-pagina .cx-table-wrap { overflow-x: visible; }
.auto-pagina .auto-tabela { table-layout: auto; }
.auto-pagina .auto-tabela td { white-space: normal; }
.auto-pagina .auto-tabela .auto-input { width: 100%; max-width: 220px; }
.auto-pagina .auto-tabela .auto-dia { width: 64px; }
.auto-pagina .cx-filters { grid-template-columns: minmax(200px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr) auto; }
.auto-atualizar { min-height: 42px; align-self: end; }
.auto-contagem { margin: -4px 0 0; font-size: 13px; }
.auto-selo { margin-top: 6px; white-space: normal; }
.auto-inativo td { opacity: .7; }
.auto-chave { min-height: 34px; min-width: 84px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-high)); color: rgb(var(--color-on-surface)); font-weight: 700; font-size: 13px; cursor: pointer; }
.auto-chave-on { background: #dcf5e3; border-color: #9bd8ad; color: #11592b; }
.dark .auto-chave-on { background: #123d22; border-color: #2d6b41; color: #b8f0c8; }
.auto-chave:disabled { opacity: .6; cursor: default; }
.auto-acoes:empty { padding: 0; }
@media (max-width: 1100px) {
  .auto-pagina .cx-filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  /* Cada aluno vira um cartão: nada passa da largura da tela. */
  .auto-pagina .cx-table-wrap { border: 0; background: transparent; }
  .auto-pagina .auto-tabela thead { display: none; }
  .auto-pagina .auto-tabela, .auto-pagina .auto-tabela tbody { display: block; }
  .auto-pagina .auto-tabela tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; padding: 14px; margin-bottom: 10px; border: 1px solid rgb(var(--color-outline-variant)); border-radius: 12px; background: rgb(var(--color-surface-container-lowest)); }
  .auto-pagina .auto-tabela td { display: block; padding: 0; border: 0; text-align: left; }
  .auto-pagina .auto-tabela td:first-child { grid-column: 1 / -1; }
  .auto-pagina .auto-tabela td[data-rotulo]:not(:first-child)::before { content: attr(data-rotulo); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant)); }
  .auto-pagina .auto-tabela td.cx-num { text-align: left; }
  .auto-pagina .auto-tabela .auto-input { max-width: none; }
  .auto-pagina .auto-tabela .cx-empty { grid-column: 1 / -1; }
}
/* Turma: dias de aula marcados por botões. */
.eq-dias { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.eq-dias legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: rgb(var(--color-on-surface)); }
.eq-dias small { font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
.eq-dias-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-dia { min-width: 48px; min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid rgb(var(--color-outline-variant)); background: rgb(var(--color-surface-container-lowest)); color: rgb(var(--color-on-surface)); font-weight: 700; cursor: pointer; }
.eq-dia-on { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); color: #fff; }

/* Página inicial no celular: turmas em cartões compactos, sem espaços grandes. */
@media (max-width: 767px) {
  #horarios.home-section, .home-section { padding: 32px 0; }
  .home-schedules { gap: 10px; margin-top: 18px; }
  .home-schedules article { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 14px 16px; border-radius: 14px; }
  .home-schedules article .home-eyebrow { grid-column: 1 / -1; margin: 0; font-size: 11px; letter-spacing: .08em; }
  .home-schedules article h3 { margin: 0; font-size: 19px; line-height: 1.2; }
  .home-schedules article p:not(.home-eyebrow) { grid-column: 1 / -1; margin: 0; font-size: 14px; }
  .home-schedules article small { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; text-align: right; color: #5b6b73; }
}
/* Gestão de Atletas: contador. */
.atl-contador { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 14px; color: rgb(var(--color-on-surface-variant)); }
.atl-contador strong { color: rgb(var(--color-on-surface)); font-size: 16px; }