/* ============================================================================
   TEMA STUDIO ADSON RAMON - GESTOR (design system, 25/09/2026)

   Um arquivo so, uma camada so. Substitui as 15 camadas que foram se
   empilhando (visual 2026-09, Stitch 1 e 2, Requinte, letras maiores, letras
   mais fortes...), que brigavam entre si a base de !important.

   Estrutura copiada do painel Fidelidade (referencia do usuario): titulo
   grande com subtitulo, cartao branco com fio fino e canto de 12px, tabela
   com cabecalho cinza em caixa alta, campo branco com borda e rotulo acima,
   botao de 38px. Marca do estudio: preto + vermelho. Fonte: Inter.

   Regras da casa
   - CSS so aqui (e no login-adson.css). Nada de <style> nem HTML desenhado no
     Pascal: o Delphi poe classe (LayoutConfig.Cls) ou manda dado.
   - Os controles do Gestor sao posicionados por Left/Top no DFM: padding ou
     margin em painel desloca a tela inteira. Respiro vem do DFM (normalizador
     de geometria) ou de dentro do proprio controle.
   - Altura de campo e botao vem do DFM (38px). O CSS nao inventa altura: se
     inventasse, o Ext posicionaria errado o que vem embaixo.
   - Tamanho minimo de texto: 13px (11-12px so em selo e cabecalho em caixa
     alta). O critico (scratchpad\prints\critico.js) mede isso em toda tela.

   Servido por ServerModule.CustomFiles (adson-tema.css?v=N): mudou, sobe o N.
   ========================================================================== */

/* fontes: carregadas pelo CustomMeta do ServerModule.dfm (em paralelo com o Ext) */

/* ---------------------------------------------------------------- tokens */
:root {
  --ds-font: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-marca: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;

  --ds-bg: #F4F5F7;             /* fundo de trabalho */
  --ds-surface: #FFFFFF;        /* cartao, campo */
  --ds-surface-low: #F7F8FA;    /* cabecalho de tabela, faixa */
  --ds-hover: #F9FAFB;
  --ds-sel: #FDF2F2;            /* linha selecionada */

  --ds-text: #111827;           /* titulo, valor */
  --ds-text-2: #374151;         /* texto corrido, rotulo */
  --ds-muted: #5F6673;          /* apoio (4.6:1 sobre o fundo) */
  --ds-faint: #9CA3AF;          /* placeholder, desabilitado */

  --ds-border: #E5E7EB;         /* fio de cartao */
  --ds-border-soft: #EFF1F4;    /* separador de linha */
  --ds-field: #D0D5DD;          /* borda de campo */
  --ds-field-hover: #B4BBC7;

  --ds-primary: #C8161D;        /* vermelho do estudio: so acao */
  --ds-primary-hover: #A91219;
  --ds-primary-soft: rgba(200, 22, 29, .14);
  --ds-ink: #111318;            /* preto do estudio: ativo, botao escuro */
  --ds-ink-2: #262A33;

  --ds-success: #15803D; --ds-success-bg: #DCFCE7;
  --ds-warn: #B45309;    --ds-warn-bg: #FEF3C7;
  --ds-danger: #B91C1C;  --ds-danger-bg: #FEE2E2;
  --ds-info: #1D4ED8;    --ds-info-bg: #DBEAFE;

  --ds-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --ds-shadow-2: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
  --ds-shadow-3: 0 24px 60px rgba(16, 24, 40, .24), 0 4px 14px rgba(16, 24, 40, .10);
  --ds-ring: 0 0 0 3px rgba(200, 22, 29, .16);
  --ds-radius: 12px;
  --ds-radius-sm: 10px;

  --ds-menu: #0B0C0F;           /* menu lateral */
}

/* ---------------------------------------------------------------- base */
.x-body, body {
  font-family: var(--ds-font) !important;
  font-size: 14px;
  color: var(--ds-text-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(200, 22, 29, .16); color: var(--ds-text); }

/* movimento: rapido e discreto */
.x-btn, .x-tab, .x-treelist-row, .x-boundlist-item, .x-menu-item,
.x-form-text-wrap-default, .x-form-trigger-wrap-default, .x-form-checkbox, .x-form-cb,
.x-datepicker-date, .ar-kpi, .ar-aba, .ar-tr-acoes span {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease,
              border-color .15s ease, transform .12s ease, opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* barras de rolagem: visiveis no claro, finas */
.ar-corpo ::-webkit-scrollbar, .ar-card ::-webkit-scrollbar, .ar-cartao ::-webkit-scrollbar,
.x-form-textarea::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.ar-corpo ::-webkit-scrollbar-track, .ar-card ::-webkit-scrollbar-track,
.ar-cartao ::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track { background: transparent; }
.ar-corpo ::-webkit-scrollbar-thumb, .ar-card ::-webkit-scrollbar-thumb, .ar-cartao ::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb, .x-form-textarea::-webkit-scrollbar-thumb {
  background: #B8BFCA; border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.ar-corpo ::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover { background: #9AA2AE; background-clip: content-box; }
textarea, .x-form-textarea { scrollbar-width: thin; scrollbar-color: #B8BFCA transparent; scrollbar-gutter: stable; }

/* painel que nao cabe ROLA, nunca corta (conteudo fora de alcance e o pior defeito) */
.x-uni-tabsheet, .x-uni-tabsheet > .x-panel-body,
.ar-card > .x-panel-body, .ar-cartao > .x-panel-body,
.ar-corpo .x-panel-body-default { overflow-y: auto !important; }

/* ---------------------------------------------------------------- menu lateral */
.ar-sidebar, .ar-sidebar .x-panel, .ar-sidebar .x-panel-body, .ar-sidebar .x-panel-bodyWrap,
.ar-sidebar .x-panel-white, .ar-sidebar .x-body-wrap-el, .ar-sidebar .x-body-el,
.ar-sidebar .x-treelist, .ar-sidebar .x-treelist-nav, .ar-sidebar .x-treelist-container,
.ar-sidebar .x-treelist-item, .ar-sidebar .x-treelist-row, .ar-sidebar .x-tree-panel,
.ar-sidebar .x-grid-body, .ar-sidebar .x-grid-item-container,
.ar-menu, .ar-menu .x-treelist {
  background: var(--ds-menu) !important; border-color: transparent !important;
}
.ar-sidebar { border-right: 1px solid #16181D !important; }
.ar-menu { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; overflow: hidden !important; }
.ar-sidebar .x-treelist, .ar-menu > .x-container { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable; }
.ar-sidebar ::-webkit-scrollbar, .ar-menu ::-webkit-scrollbar { width: 9px; height: 9px; }
.ar-sidebar ::-webkit-scrollbar-track, .ar-menu ::-webkit-scrollbar-track { background: transparent; }
.ar-sidebar ::-webkit-scrollbar-thumb, .ar-menu ::-webkit-scrollbar-thumb {
  background: #3E424B; border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
.ar-sidebar .x-treelist, .ar-menu { scrollbar-width: thin; scrollbar-color: #3E424B transparent; }

.ar-sidebar .x-treelist-row { padding: 0 10px; margin: 1px 8px; border-radius: 10px; }
.ar-sidebar .x-treelist-item-text, .ar-sidebar .x-tree-node-text {
  font-family: var(--ds-font) !important; font-size: 14.5px !important; font-weight: 500 !important;
  color: #C5CAD3 !important; line-height: 38px !important; margin-left: 12px; padding-left: 26px !important;
  letter-spacing: 0 !important; overflow: visible !important; text-overflow: clip !important;
}
.ar-sidebar .x-treelist-item-icon {
  left: 12px !important; width: 20px !important; font-size: 15px !important; line-height: 38px !important; text-align: center;
}
.ar-sidebar .x-treelist-item-icon:before, .ar-sidebar .x-treelist-item-expander:before,
.ar-sidebar .x-tree-expander { color: #7C8596 !important; line-height: 38px !important; }
.ar-sidebar .x-treelist-item-expander { line-height: 38px !important; }
.ar-sidebar .x-treelist-item-over > .x-treelist-row { background: rgba(255, 255, 255, .06) !important; }
.ar-sidebar .x-treelist-item-over > .x-treelist-row .x-treelist-item-text { color: #FFFFFF !important; }
.ar-sidebar .x-treelist-item-over > .x-treelist-row .x-treelist-item-icon:before,
.ar-sidebar .x-treelist-item-expanded > .x-treelist-row .x-treelist-item-icon:before { color: #FFFFFF !important; }
.ar-sidebar .x-treelist-item-expanded > .x-treelist-row .x-treelist-item-text { color: #FFFFFF !important; font-weight: 600 !important; }
/* ativo: vermelho da marca em tom de fundo + faixa na esquerda (vermelho
   solido competia com o botao de acao da tela) */
.ar-sidebar .x-treelist-item-selected > .x-treelist-row, .ar-sidebar .x-grid-item-selected {
  background: rgba(200, 22, 29, .20) !important; box-shadow: inset 3px 0 0 0 #E0312B;
}
.ar-sidebar .x-treelist-item-selected .x-treelist-item-text { color: #FFFFFF !important; font-weight: 600 !important; }
.ar-sidebar .x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon:before { color: #FFFFFF !important; }

/* marca no alto do menu: a unica Bebas do sistema, junto com o login */
.ar-sidebar .ar-titulo, .ar-sidebar .ar-titulo .x-innerhtml {
  font-family: var(--ds-marca) !important; font-size: 22px !important; font-weight: 400 !important;
  letter-spacing: .04em !important; color: #FFFFFF !important; text-transform: uppercase;
}
.ar-sidebar .ar-titulo .x-innerhtml::before { display: none !important; }
/* a altura de linha do titulo de tela (32px) fazia a marca invadir o "CORRIDAS" */
.ar-sidebar .ar-titulo, .ar-sidebar .ar-titulo .x-innerhtml { line-height: 22px !important; }
.ar-sidebar .x-component:not(.ar-titulo) .x-innerhtml,
.ar-sidebar label.x-component:not(.ar-titulo) {
  color: #8C93A1 !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; font-family: var(--ds-font) !important; line-height: 16px !important;
}

/* credito da softhouse, no rodape do menu */
.ar-credito, .ar-credito .x-panel, .ar-credito .x-panel-body, .ar-credito .x-panel-bodyWrap,
.ar-credito .x-panel-white, .ar-credito .x-body-wrap-el, .ar-credito .x-body-el { background: transparent !important; border: 0 !important; }
.ar-credito-txt {
  font-family: var(--ds-font); font-size: 12px; line-height: 16px; color: #8C93A1;
  border-top: 1px solid #1C1E24; padding-top: 8px;
}
.ar-credito-txt a { color: #C5CAD3; font-weight: 600; text-decoration: none; }
.ar-credito-txt a:hover { color: #FF5A52; }
/* o rodape do menu (pnlUsuario, 44 px) cobria os ultimos 28 px da arvore e o "Sair" ficava escondido
   no fim da rolagem (23/10/2026): folga embaixo para o ultimo item subir acima do rodape */
.ar-sidebar .ar-menu .x-treelist-root-container { padding-bottom: 40px !important; }

/* ---------------------------------------------------------------- area de trabalho */
.ar-corpo, .ar-corpo .x-panel-body, .ar-corpo .x-panel-bodyWrap,
.ar-corpo .x-body-wrap-el, .ar-corpo .x-body-el { background: var(--ds-bg) !important; }
.ar-corpo .x-panel-default, .ar-corpo .x-panel-body-default { border-color: transparent !important; }
/* o corpo do frame precisa ter altura para o 100% do conteudo HTML resolver */
.ar-corpo .x-panel-body, .ar-corpo .x-panel-bodyWrap { height: 100%; }
/* tela embutida no pnlFundo: sem moldura de janela */
.ar-corpo .x-window, .ar-corpo .x-window-default {
  box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
.ar-corpo .x-window > .x-window-body, .ar-corpo .x-window-default-body {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
.ar-transp, .ar-transp > .x-panel-bodyWrap, .ar-transp > .x-panel-bodyWrap > .x-panel-body,
.ar-transp .x-autocontainer-outerCt { background: transparent !important; border: 0 !important; }
.ar-barra { background: var(--ds-ink) !important; }
.ar-barra > .x-panel-bodyWrap, .ar-barra > .x-panel-bodyWrap > .x-panel-body { background: transparent !important; }
.ar-barra .x-innerhtml { color: #FFFFFF !important; }
.ar-area-kpi > .x-panel-bodyWrap, .ar-area-kpi > .x-panel-bodyWrap > .x-panel-body { background: transparent !important; }

/* ---------------------------------------------------------------- textos de tela */
/* titulo da tela (lblTitulo de cada form): grande, preto, sem enfeite */
.ar-titulo, .ar-titulo .x-innerhtml {
  font-family: var(--ds-font) !important; font-size: 26px !important; font-weight: 800 !important;
  letter-spacing: -.02em !important; text-transform: none !important; color: var(--ds-text) !important;
  line-height: 32px !important;
}
.ar-titulo .x-innerhtml { padding-left: 0 !important; }
.ar-titulo .x-innerhtml::before { display: none !important; }
/* subtitulo e texto de apoio */
.ar-sub, .ar-sub .x-innerhtml, .ar-apoio, .ar-apoio .x-innerhtml {
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 20px !important; color: var(--ds-muted) !important; letter-spacing: 0 !important;
}
/* titulo de secao dentro da tela: caixa alta pequena com ponto da marca */
.ar-secao, .ar-secao .x-innerhtml {
  position: relative; padding-left: 16px;
  font-family: var(--ds-font) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--ds-muted) !important;
  line-height: 16px !important;
}
.ar-secao::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary);
}
.ar-secao .x-innerhtml { padding-left: 0 !important; }
.ar-secao .x-innerhtml::before { display: none; }
/* numero grande no canto do cabecalho (retirada de kit, check-in) */
.ar-placar, .ar-placar .x-innerhtml {
  font-family: var(--ds-font) !important; font-weight: 700 !important; font-size: 15px !important;
  color: var(--ds-text) !important; letter-spacing: 0;
}
/* o TUniLabel poe o texto direto no <label> (sem .x-innerhtml): a fonte vai no proprio
   componente, senao fica a Tahoma do Font.Name (atleta em Check-in e resultados) */
.ar-destaque, .ar-destaque .x-innerhtml { font-family: var(--ds-font) !important; color: var(--ds-text) !important; }
.ar-destaque .x-innerhtml { font-weight: 600 !important; }
/* rotulo solto sem classe: nunca pequeno nem fino */
.x-component .x-innerhtml { font-family: var(--ds-font) !important; }
/* HTML montado no Pascal com fonte em linha (aviso do QR do WhatsApp em Configuracoes);
   nunca no medidor de texto do Ext (.x-textmetrics copia a fonte de quem ele mede) */
[style*="font-family:Segoe UI"]:not(.x-textmetrics) { font-family: var(--ds-font) !important; }

/* ---------------------------------------------------------------- cartoes */
.ar-card, .ar-cartao {
  background: var(--ds-surface) !important; border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important; box-shadow: var(--ds-shadow) !important;
}
.ar-card > .x-panel-bodyWrap, .ar-card > .x-panel-bodyWrap > .x-panel-body, .ar-card > .x-body-el,
.ar-cartao > .x-panel-bodyWrap, .ar-cartao > .x-panel-bodyWrap > .x-panel-body, .ar-cartao > .x-body-el {
  background: transparent !important; border-radius: var(--ds-radius);
}
/* painel e frame DENTRO do cartao: o fundo cinza da area de trabalho (regra
   .ar-corpo) virava uma faixa cinza no meio do cartao branco (o historico de
   provas do aluno). Dentro do cartao, tudo transparente. */
.ar-card .x-panel-body, .ar-card .x-panel-bodyWrap, .ar-card .x-autocontainer-outerCt,
.ar-cartao .x-panel-body, .ar-cartao .x-panel-bodyWrap, .ar-cartao .x-autocontainer-outerCt {
  background: transparent !important;
}
/* ficha em cartao que termina numa tabela (secoes + historico de provas do aluno):
   a tabela encostava no fim da rolagem. Os filhos sao absolutos, entao padding no
   conteiner nao conta para a rolagem, e padding na tabela o Ext desconta da altura
   (encolhia a tabela). Um ::after de 16px pendurado embaixo da tabela estica a
   rolagem sem mexer no layout do Ext. */
.ar-card .x-autocontainer-innerCt:has(> .ar-secao) > .x-abs-layout-item:last-child:has(.ar-tb),
.ar-cartao .x-autocontainer-innerCt:has(> .ar-secao) > .x-abs-layout-item:last-child:has(.ar-tb) { overflow: visible !important; }
.ar-card .x-autocontainer-innerCt:has(> .ar-secao) > .x-abs-layout-item:last-child:has(.ar-tb)::after,
.ar-cartao .x-autocontainer-innerCt:has(> .ar-secao) > .x-abs-layout-item:last-child:has(.ar-tb)::after {
  content: ""; position: absolute; left: 0; bottom: -16px; width: 1px; height: 16px; pointer-events: none;
}
/* cor fixa que veio de DFM antigo (#F4F6EE) no controle de abas: sai, fica o fundo da tela */
.ar-corpo [style*="rgb(244, 246, 238)"] { background-color: transparent !important; }

/* ---------------------------------------------------------------- rotulos de campo */
.ar-rotulo, .ar-rotulo .x-innerhtml, .ar-rotulo .x-form-item-label-text,
.x-form-item-label, .x-form-item-label-text {
  font-family: var(--ds-font) !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ds-text-2) !important;
  line-height: 16px !important;
}

/* ---------------------------------------------------------------- campos */
.x-form-text-wrap-default, .x-form-trigger-wrap-default {
  background: var(--ds-surface) !important; border: 1px solid var(--ds-field) !important;
  border-radius: var(--ds-radius-sm) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  vertical-align: top !important;
}
.x-form-text-wrap-default:hover, .x-form-trigger-wrap-default:hover { border-color: var(--ds-field-hover) !important; }
.x-form-trigger-wrap-default { margin-top: 0 !important; }
.x-form-trigger-wrap-default .x-form-text-default { border: 0 !important; }
/* so leitura: o cinza vai na caixa de fora (a de dentro e transparente, ver "uma caixa so");
   antes do foco, para o campo travado que recebe foco ainda mostrar o anel */
.x-form-readonly .x-form-trigger-wrap-default { background: #F3F4F6 !important; border-color: var(--ds-border) !important; box-shadow: none !important; }
.x-form-item-body-default { vertical-align: top !important; }
.x-form-text-wrap-default input, .x-form-trigger-wrap-default input, .x-form-text-default {
  background: transparent !important; color: var(--ds-text) !important;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 500 !important;
  padding-left: 12px !important; padding-right: 10px !important;
}
.x-form-text-wrap-default input::placeholder, textarea.x-form-text-default::placeholder,
.x-form-empty-field, .x-form-empty-field-default { color: #8A919E !important; font-weight: 400 !important; }
/* memo */
textarea.x-form-text-default, .x-form-textarea {
  background: transparent !important; border: 0 !important;
  border-radius: var(--ds-radius-sm) !important; color: var(--ds-text) !important;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.5 !important; padding: 9px 12px !important; box-sizing: border-box;
}
/* foco: borda vermelha + anel suave */
.x-field-focus .x-form-text-wrap-default, .x-field-focus .x-form-trigger-wrap-default,
.x-form-text-wrap-default:focus-within, .x-form-trigger-wrap-default:focus-within,
.x-form-textarea:focus-visible {
  border-color: var(--ds-primary) !important; box-shadow: var(--ds-ring) !important; outline: none !important;
}
/* invalido e travado */
.x-form-invalid-field .x-form-text-wrap-default, .x-form-invalid-field .x-form-trigger-wrap-default,
.x-form-invalid .x-form-text-wrap-default, .x-form-invalid .x-form-trigger-wrap-default,
.x-form-trigger-wrap-invalid { border-color: var(--ds-danger) !important; }
.x-item-disabled .x-form-text-wrap-default, .x-item-disabled .x-form-trigger-wrap-default,
.x-form-readonly .x-form-text-wrap-default, .x-item-disabled textarea { background: #F3F4F6 !important; border-color: var(--ds-border) !important; box-shadow: none !important; }
.x-item-disabled .x-form-text-wrap-default input, .x-item-disabled .x-form-trigger-wrap-default input,
.x-item-disabled textarea { color: #8A919E !important; }
.x-field.x-item-disabled, .x-form-item.x-item-disabled { opacity: 1 !important; }
/* uma caixa so: no Ext 6 todo campo (texto, combo, data, hora, memo) e
   trigger-wrap > text-wrap > input. Borda, canto, fundo e anel de foco sao do
   trigger-wrap; o text-wrap de dentro desenhava uma segunda caixa ("caixa dentro
   da caixa") e o gatilho trazia o fio de baixo do classic (lado direito aberto).
   Fica depois do foco/travado: mesma especificidade, ganha a ultima. */
.x-form-trigger-wrap .x-form-text-wrap {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important;
}
.x-form-trigger-wrap .x-form-trigger { border: 0 !important; }
.x-form-trigger-wrap .x-form-textarea:focus-visible { box-shadow: none !important; }

/* gatilhos desenhados (saem os PNG chanfrados do tema classic) */
.x-form-trigger-default { border-left: 0 !important; background-color: transparent !important; }
.x-form-arrow-trigger, .x-form-arrow-trigger-default {
  background-image: none !important; background-color: transparent !important; border-left: 0 !important;
  width: 30px !important; position: relative;
}
.x-form-arrow-trigger::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5px 0 0 -5px;
  border-right: 2px solid #6B7280; border-bottom: 2px solid #6B7280; transform: rotate(45deg); border-radius: 1px;
}
.x-form-date-trigger, .x-form-date-trigger-default { background-image: none !important; width: 32px !important; position: relative; }
.x-form-date-trigger::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 11px; margin: -6px 0 0 -8px;
  border: 1.6px solid #6B7280; border-top-width: 4px; border-radius: 2px;
}
.x-form-time-trigger, .x-form-time-trigger-default { background-image: none !important; background-color: transparent !important; width: 30px !important; position: relative; }
.x-form-time-trigger::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -6.5px 0 0 -7.5px;
  border: 1.6px solid #6B7280; border-radius: 50%;
}
.x-form-time-trigger::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.6px; height: 4px; margin: -4px 0 0 -1.8px;
  background: #6B7280; border-radius: 1px; box-shadow: 1.6px 2.6px 0 -0.4px #6B7280; z-index: 1;
}
.x-form-clear-trigger { background-image: none !important; width: 24px !important; position: relative; }
.x-form-clear-trigger::after {
  content: "\00d7"; position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px;
  text-align: center; font-size: 17px; line-height: 20px; color: #9CA3AF;
}
.x-form-clear-trigger:hover::after { color: var(--ds-primary); }
.x-form-spinner-trigger, .x-form-spinner-up, .x-form-spinner-down,
.x-form-spinner-up-default, .x-form-spinner-down-default {
  background-image: none !important; background-color: transparent !important; border: 0 !important; position: relative;
}
.x-form-spinner-up::after, .x-form-spinner-down::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -2px 0 0 -4px;
  border-right: 2px solid #6B7280; border-bottom: 2px solid #6B7280; border-radius: 1px;
}
.x-form-spinner-up::after   { transform: rotate(-135deg); margin-top: 0; }
.x-form-spinner-down::after { transform: rotate(45deg); margin-top: -5px; }
.x-form-trigger-wrap:hover .x-form-arrow-trigger::after,
.x-form-trigger-wrap:hover .x-form-spinner-up::after, .x-form-trigger-wrap:hover .x-form-spinner-down::after { border-color: var(--ds-text); }
.x-form-trigger-wrap:hover .x-form-date-trigger::after, .x-form-trigger-wrap:hover .x-form-time-trigger::after { border-color: var(--ds-text); }
.x-form-trigger-wrap:hover .x-form-time-trigger::before { background: var(--ds-text); box-shadow: 1.6px 2.6px 0 -0.4px var(--ds-text); }

/* campo do leitor de codigo de barras (retirada de kit) */
.ar-campo-bipe .x-form-text { font-family: var(--ds-font) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; }

/* checkbox e radio desenhados (o span do tema classic e inline: sem
   inline-block a largura some e sobra um traco de 2px) */
.x-form-checkbox, .x-form-cb {
  background-image: none !important; background-color: #FFFFFF !important;
  width: 18px !important; height: 18px !important; box-sizing: border-box;
  border: 1.5px solid #9CA3AF !important; border-radius: 5px; position: relative;
  display: inline-block !important; vertical-align: top;
}
.x-form-cb-input { width: 100% !important; height: 100% !important; }
.x-form-cb-label-after { vertical-align: top; }
.x-form-cb-wrap-inner:hover .x-form-checkbox { border-color: var(--ds-text-2) !important; }
.x-form-cb-checked .x-form-checkbox, .x-form-cb-checked .x-form-cb { background-color: var(--ds-ink) !important; border-color: var(--ds-ink) !important; }
.x-form-cb-checked .x-form-checkbox::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px;
  border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(45deg);
}
.x-form-radio, .x-form-cb-checked .x-form-radio { border-radius: 50% !important; }
.x-form-cb-checked .x-form-radio::after { left: 4px; top: 4px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: #FFFFFF; transform: none; }
.x-form-cb-label {
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--ds-text) !important; padding-left: 8px !important; line-height: 18px !important;
}
.x-item-disabled .x-form-checkbox, .x-item-disabled .x-form-cb { opacity: .45; }
.x-form-file-btn.x-btn { border-radius: var(--ds-radius-sm) !important; }

/* ---------------------------------------------------------------- botoes */
/* base: todo botao do Ext */
.x-btn.x-btn-default-small, .x-btn.x-btn-default-medium, .x-btn.x-btn-default-large {
  background: var(--ds-surface) !important; border: 1px solid var(--ds-field) !important;
  border-radius: var(--ds-radius-sm) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
.x-btn .x-btn-wrap, .x-btn .x-btn-button { background: transparent !important; }
.x-btn .x-btn-inner {
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ds-text) !important;
  line-height: 1.25 !important; height: auto !important; overflow: visible !important; text-overflow: clip !important;
}
.x-btn.x-btn-over.x-btn-default-small, .x-btn.x-btn-over.x-btn-default-medium, .x-btn.x-btn-over.x-btn-default-large {
  background: var(--ds-hover) !important; border-color: var(--ds-field-hover) !important;
}
.x-btn.x-btn-pressed:not(.x-item-disabled) { transform: translateY(1px); }
.x-btn:focus-visible { outline: none !important; box-shadow: var(--ds-ring) !important; }
.x-btn-focus .x-btn-wrap:after, .x-btn-wrap:after { border: 0 !important; }
.x-keyboard-mode .x-btn-focus .x-btn-wrap { outline: none !important; }

/* primario: vermelho do estudio, so para a acao principal da tela */
.x-btn.ar-btn-primario {
  background: var(--ds-primary) !important; border-color: var(--ds-primary) !important;
  box-shadow: 0 1px 2px rgba(200, 22, 29, .30), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
.x-btn.ar-btn-primario.x-btn-over { background: var(--ds-primary-hover) !important; border-color: var(--ds-primary-hover) !important; }
.x-btn.ar-btn-primario .x-btn-inner, .x-btn.ar-btn-primario * { color: #FFFFFF !important; }
/* escuro: acao secundaria forte (preto do estudio) */
.x-btn.ar-btn-escuro, .x-btn.ar-btn-preto {
  background: var(--ds-ink) !important; border-color: var(--ds-ink) !important;
  box-shadow: 0 1px 2px rgba(17, 19, 24, .25) !important;
}
.x-btn.ar-btn-escuro.x-btn-over, .x-btn.ar-btn-preto.x-btn-over,
.x-btn.ar-btn-escuro:hover, .x-btn.ar-btn-preto:hover { background: var(--ds-ink-2) !important; border-color: var(--ds-ink-2) !important; }
.x-btn.ar-btn-escuro .x-btn-inner, .x-btn.ar-btn-preto .x-btn-inner,
.x-btn.ar-btn-escuro *, .x-btn.ar-btn-preto * { color: #FFFFFF !important; }
/* contorno: o padrao ja e contorno; a classe so garante */
.x-btn.ar-btn-contorno { background: var(--ds-surface) !important; border-color: var(--ds-field) !important; }
/* perigo: excluir, cancelar inscricao */
.x-btn.ar-btn-perigo .x-btn-inner { color: var(--ds-danger) !important; }
.x-btn.ar-btn-perigo.x-btn-over { background: var(--ds-danger-bg) !important; border-color: #F3B4B4 !important; }
/* desabilitado: apagado, legivel */
.x-btn.x-item-disabled { opacity: 1 !important; box-shadow: none !important; }
.x-btn.x-item-disabled.x-btn-default-small, .x-btn.x-item-disabled.ar-btn-primario,
.x-btn.x-item-disabled.ar-btn-escuro, .x-btn.x-item-disabled.ar-btn-preto {
  background: #F3F4F6 !important; border-color: var(--ds-border) !important;
}
.x-btn.x-item-disabled .x-btn-inner, .x-btn.x-item-disabled * { color: #A0A6B1 !important; }
/* botao grande (retirada de kit) */
.x-btn.ar-btn-grande .x-btn-inner { font-size: 15px !important; }

/* icone do botao: classe ar-ic-* no DFM, glifo SVG em mascara na cor do texto */
.x-btn[class*="ar-ic-"] .x-btn-inner { display: inline-flex !important; align-items: center; gap: 8px; }
.x-btn[class*="ar-ic-"] .x-btn-inner::before {
  content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain;
}
.ar-ic-mais   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ar-ic-salvar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ar-ic-excluir { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); }
.ar-ic-voltar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ar-ic-buscar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E"); }
.ar-ic-atualizar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 10-2.3 5.7M20 5v6h-6'/%3E%3C/svg%3E"); }
.ar-ic-enviar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14M21 3l-7 18-4-7-7-4 18-7z'/%3E%3C/svg%3E"); }
.ar-ic-imprimir { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 01-2-2v-4a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E"); }
.ar-ic-baixar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.ar-ic-subir { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9M7 14l5-5 5 5M5 4h14'/%3E%3C/svg%3E"); }
.ar-ic-foto { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E"); }
.ar-ic-video { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z'/%3E%3C/svg%3E"); }
.ar-ic-zap { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 01-11.8 7L4 20l1.1-4A8 8 0 1120 12z'/%3E%3C/svg%3E"); }
.ar-ic-dinheiro { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.ar-ic-fechar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ar-ic-olho { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ar-ic-check { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.ar-ic-filtro { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4-2v-4.5z'/%3E%3C/svg%3E"); }
.ar-ic-editar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19 9.2 14.8 5 4 15.8V20zM13.5 6.3l4.2 4.2'/%3E%3C/svg%3E"); }
.ar-ic-mapa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0114 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }

/* chips de escolha (modalidade, tamanho) */
.x-btn.ar-chip { background: #FFFFFF !important; border: 1px solid var(--ds-field) !important; border-radius: 10px !important; }
.x-btn.ar-chip .x-btn-inner { color: var(--ds-text) !important; font-weight: 600 !important; }
.x-btn.ar-chip-sel { background: var(--ds-ink) !important; border: 1px solid var(--ds-ink) !important; border-radius: 10px !important; }
.x-btn.ar-chip-sel .x-btn-inner { color: #FFFFFF !important; font-weight: 600 !important; }
.x-btn.ar-chip-acao { background: #FFFFFF !important; border: 1.5px solid var(--ds-primary) !important; border-radius: 10px !important; }
.x-btn.ar-chip-acao .x-btn-inner { color: var(--ds-primary) !important; font-weight: 700 !important; }

/* ---------------------------------------------------------------- barra do topo */
.ar-topo {
  background: #FFFFFF !important; border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.ar-topo > .x-panel-bodyWrap, .ar-topo > .x-panel-bodyWrap > .x-panel-body { background: transparent !important; }
/* na barra do topo fica a trilha (Cadastros > Eventos); o titulo grande e da
   propria tela, logo abaixo - as duas coisas nao se repetem mais */
.ar-topo .ar-titulo, .ar-topo .ar-titulo .x-innerhtml {
  font-family: var(--ds-font) !important; font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--ds-text-2) !important;
  line-height: 28px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-topo .ar-titulo .x-innerhtml { padding-left: 0 !important; }
.ar-topo .ar-titulo .x-innerhtml::before { display: none !important; }

/* chip da conta: foto do estudio + nome + perfil */
.ar-btn-usuario.x-btn {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 999px !important;
  box-shadow: var(--ds-shadow) !important; padding: 0 16px 0 5px !important;
}
.ar-btn-usuario.x-btn .x-btn-wrap, .ar-btn-usuario.x-btn .x-btn-button { background: transparent !important; }
.ar-btn-usuario.x-btn:hover, .ar-btn-usuario.x-btn.x-btn-over { background: var(--ds-hover) !important; }
.ar-btn-usuario .x-btn-inner {
  display: flex !important; align-items: center; gap: 10px; text-align: left; max-width: none !important;
  font-family: var(--ds-font) !important; font-size: 14px !important; line-height: 1.15 !important;
  color: var(--ds-text) !important; overflow: hidden !important;
}
.ar-us-foto {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background-image: url('academia.jpg'), url('app-icon-192.png');
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  background-color: #D9DFE8; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--ds-border);
}
.ar-us-txt { display: flex; flex-direction: column; min-width: 0; }
.ar-us-txt b { font-weight: 700; font-size: 14px; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-us-txt small { font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-top: 2px; }

/* icone do WhatsApp: glifo em mascara, a cor diz o estado */
.ar-btn-zap-ico.x-btn {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 999px !important;
  box-shadow: var(--ds-shadow) !important; min-width: 40px !important; padding: 0 !important;
}
.ar-btn-zap-ico.x-btn .x-btn-wrap, .ar-btn-zap-ico.x-btn .x-btn-button { background: transparent !important; }
.ar-btn-zap-ico.x-btn:hover { background: var(--ds-hover) !important; }
.ar-btn-zap-ico .x-btn-inner { display: none !important; }
.ar-btn-zap-ico .x-btn-button { position: relative; display: flex !important; align-items: center; justify-content: center; }
.ar-btn-zap-ico .x-btn-button::before { display: none !important; }
.ar-btn-zap-ico .x-btn-button::after {
  content: ''; width: 21px; height: 21px; display: block; background-color: #A1A1AA;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.ar-btn-zap-ico.ok   .x-btn-button::after { background-color: #25D366; }
.ar-btn-zap-ico.erro .x-btn-button::after { background-color: #E0312B; }
.ar-btn-zap-ico.off  .x-btn-button::after { background-color: #A1A1AA; }

/* sanduiche (tela estreita): o glifo vem do CSS, o TUniButton escaparia o &#9776; */
.ar-btn-hamburguer.x-btn { border-radius: 10px !important; min-width: 44px !important; }
.ar-btn-hamburguer .x-btn-inner { display: none !important; }
.ar-btn-hamburguer .x-btn-button { display: flex !important; align-items: center !important; justify-content: center !important; }
.ar-btn-hamburguer .x-btn-button::after { content: '\2630'; font-size: 19px; line-height: 1; color: var(--ds-text); }

/* ---------------------------------------------------------------- abas */
.x-tab-bar, .x-tab-bar-default { background: transparent !important; border: 0 !important; }
/* A barra tem de medir o que o uniGUI conta no servidor (45px): com 4px a
   mais o conteudo da aba transbordava, aparecia uma rolagem e ela comia 10px
   da direita da tabela. Aba de 36px no alto, 9px de respiro embaixo. */
.x-tab-bar-default { padding: 0 !important; height: 45px !important; box-sizing: border-box !important; }
.x-tab-bar-strip, .x-tab-bar-strip-default { background: transparent !important; border: 0 !important; display: none !important; }
.x-tab-default {
  height: 36px !important; padding: 0 3px !important; margin-right: 4px !important;
  background: var(--ds-surface) !important; border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
.x-tab-default .x-tab-wrap, .x-tab-default .x-tab-button { height: 34px !important; }
.x-tab-default .x-tab-inner-default {
  height: 34px !important; line-height: 34px !important; padding: 0 7px !important;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 600 !important;
  color: #4B5361 !important; letter-spacing: 0 !important; text-transform: none !important;
}
.x-tab-default.x-tab-over:not(.x-tab-active) { background: var(--ds-hover) !important; border-color: var(--ds-field-hover) !important; }
.x-tab-default.x-tab-over:not(.x-tab-active) .x-tab-inner-default { color: var(--ds-text) !important; }
.x-tab-default.x-tab-active { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; box-shadow: 0 1px 3px rgba(17, 19, 24, .25) !important; }
.x-tab-default.x-tab-active .x-tab-inner-default { color: #FFFFFF !important; }
.x-tab-default.x-tab-disabled { opacity: .45; }
.x-keyboard-mode .x-tab-focus .x-tab-button::before { display: none !important; }
.x-tab:focus-visible { outline: none !important; box-shadow: var(--ds-ring) !important; }
/* sem fio entre a barra e o conteudo; aba ativa ja diz onde esta */
.x-tabpanel-child, .x-uni-tabsheet, .x-uni-tabsheet > .x-panel-body,
.x-panel-body.x-tabpanel-body, .x-tabpanel-body-default { border: 0 !important; }

/* ---------------------------------------------------------------- flutuantes */
/* mascara de carregando: cartao branco com anel girando */
.x-mask { background: rgba(17, 24, 39, .22) !important; opacity: 1 !important; }
.x-mask-msg { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.x-mask-msg-inner {
  background: #FFFFFF !important; border: 0 !important; border-radius: 14px !important;
  padding: 16px 22px 16px 20px !important; box-shadow: var(--ds-shadow-3);
}
.x-mask-msg-text {
  background-image: none !important; padding: 0 0 0 34px !important; position: relative;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 22px !important; color: var(--ds-text) !important;
}
.x-mask-msg-text::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -12px;
  border: 2.5px solid #E5E7EB; border-top-color: var(--ds-primary); border-radius: 50%;
  animation: dsGira .8s linear infinite;
}
@keyframes dsGira { to { transform: rotate(360deg); } }

/* lista de combo */
.x-boundlist {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 12px !important;
  box-shadow: var(--ds-shadow-2) !important; padding: 6px !important; overflow: hidden;
}
.x-boundlist-list-ct { border-radius: 8px; }
.x-boundlist-item {
  padding: 8px 12px !important; border: 0 !important; border-radius: 8px; margin: 1px 0; cursor: pointer;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important;
  color: var(--ds-text) !important;
}
.x-boundlist-item-over { background: var(--ds-surface-low) !important; color: var(--ds-text) !important; }
.x-boundlist-selected { background: var(--ds-ink) !important; color: #FFFFFF !important; }
.x-boundlist-selected.x-boundlist-item-over { background: var(--ds-ink-2) !important; }

/* calendario: dia de 32px; 7 x 36 + folga (a largura do tema, 179px, cortava o sabado) */
.x-datepicker, .x-datepicker.x-layer {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 14px !important;
  box-shadow: var(--ds-shadow-2) !important; padding: 10px 10px 8px !important;
  font-family: var(--ds-font) !important; width: 276px !important;
}
.x-datepicker-header { background: transparent !important; border: 0 !important; padding: 2px 2px 8px !important; display: flex !important; align-items: center; }
.x-datepicker-prev, .x-datepicker-next {
  background-image: none !important; width: 30px !important; height: 30px !important;
  border-radius: 8px; position: relative; cursor: pointer; flex: 0 0 30px;
}
.x-datepicker-prev::after, .x-datepicker-next::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -2px;
  border-left: 2px solid #6B7280; border-bottom: 2px solid #6B7280; transform: rotate(45deg);
}
.x-datepicker-next::after { transform: rotate(-135deg); margin-left: -6px; }
.x-datepicker-prev:hover, .x-datepicker-next:hover { background: var(--ds-surface-low); }
.x-datepicker-month { flex: 1; text-align: center; }
.x-datepicker-month .x-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.x-datepicker-month .x-btn .x-btn-inner { font-size: 14px !important; font-weight: 700 !important; color: var(--ds-text) !important; text-transform: capitalize !important; }
.x-datepicker-month .x-btn-wrap::after, .x-datepicker-month .x-btn-arrow-right::after { display: none !important; }
.x-datepicker-month .x-btn-arrow-right { padding-right: 0 !important; }
.x-datepicker-inner { border-spacing: 2px !important; width: 100% !important; table-layout: fixed; }
.x-datepicker-inner td, .x-datepicker-inner th { padding: 0 !important; border: 0 !important; background: transparent !important; width: 34px !important; }
.x-datepicker-column-header { background: transparent !important; border: 0 !important; }
.x-datepicker-column-header-inner {
  font-size: 12px !important; font-weight: 700 !important; color: var(--ds-muted) !important;
  line-height: 24px !important; text-align: center; letter-spacing: .04em;
}
.x-datepicker-date {
  width: 32px !important; height: 32px !important; line-height: 32px !important; padding: 0 !important; margin: 0 auto;
  border: 0 !important; border-radius: 8px !important; text-align: center;
  font-size: 13px !important; font-weight: 500 !important; color: var(--ds-text) !important;
  background: transparent !important; text-decoration: none !important;
}
.x-datepicker-cell:hover .x-datepicker-date { background: var(--ds-surface-low) !important; }
.x-datepicker-prevday .x-datepicker-date, .x-datepicker-nextday .x-datepicker-date { color: #B4BBC7 !important; }
.x-datepicker-today .x-datepicker-date { box-shadow: inset 0 0 0 1.5px var(--ds-primary); }
.x-datepicker-selected .x-datepicker-date { background: var(--ds-ink) !important; color: #FFFFFF !important; font-weight: 700 !important; }
.x-datepicker-disabled .x-datepicker-date { color: #D0D5DD !important; }
.x-datepicker-footer { background: transparent !important; border: 0 !important; padding: 8px 0 0 !important; text-align: center; }
.x-monthpicker { background: #FFFFFF !important; border: 0 !important; border-radius: 12px; width: 100% !important; }
.x-monthpicker-months, .x-monthpicker-years { border: 0 !important; }
.x-monthpicker-item-inner {
  border: 0 !important; border-radius: 8px !important; font-family: var(--ds-font) !important;
  font-size: 13px !important; font-weight: 500; color: var(--ds-text) !important; text-transform: capitalize;
}
.x-monthpicker-item-inner:hover { background: var(--ds-surface-low) !important; }
.x-monthpicker-selected { background: var(--ds-ink) !important; color: #FFFFFF !important; border: 0 !important; }
.x-monthpicker-yearnav-prev, .x-monthpicker-yearnav-next { background-image: none !important; position: relative; }
.x-monthpicker-yearnav-prev::after, .x-monthpicker-yearnav-next::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -2px;
  border-left: 2px solid #6B7280; border-bottom: 2px solid #6B7280; transform: rotate(45deg);
}
.x-monthpicker-yearnav-next::after { transform: rotate(-135deg); margin-left: -5px; }
.x-monthpicker-buttons { background: transparent !important; border: 0 !important; padding-top: 6px !important; }

/* menu flutuante (menu da conta) */
.x-menu.x-layer {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 12px !important;
  box-shadow: var(--ds-shadow-2) !important; padding: 6px !important;
}
.x-menu-body, .x-menu-bodyWrap { background: transparent !important; }
.x-menu-icon-separator, .x-menu-item-icon { display: none !important; }
.x-menu-item { border-radius: 8px; }
.x-menu-item-link { padding: 9px 14px !important; border: 0 !important; }
.x-menu-item-text {
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 500 !important;
  line-height: 20px !important; color: var(--ds-text) !important; padding-left: 0 !important; margin-left: 0 !important;
}
.x-menu-item-active, .x-menu-item-focus { background: var(--ds-surface-low) !important; border: 0 !important; }
.x-menu-item-active .x-menu-item-text, .x-menu-item-focus .x-menu-item-text { color: var(--ds-text) !important; }

/* janela flutuante (upload, minha senha, inscricao manual) */
.x-window.x-layer:not(.ar-login-janela) {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 16px !important;
  box-shadow: var(--ds-shadow-3) !important; overflow: hidden;
}
.x-window.x-layer:not(.ar-login-janela) .x-window-header {
  background: #FFFFFF !important; border: 0 !important; border-bottom: 1px solid var(--ds-border-soft) !important;
  padding: 12px 16px !important;
}
/* entrelinha 22px: a do classic (15px) com fonte de 16px cortava o titulo embaixo */
.x-window.x-layer:not(.ar-login-janela) .x-window-header .x-title-text {
  font-family: var(--ds-font) !important; font-size: 16px !important; font-weight: 700 !important;
  color: var(--ds-text) !important; letter-spacing: 0; text-transform: none; line-height: 22px !important;
}
.x-window.x-layer:not(.ar-login-janela) .x-window-body { background: #FFFFFF !important; border: 0 !important; }
.x-window.x-layer .x-tool-img { background-image: none !important; position: relative; }
.x-window.x-layer .x-tool-close .x-tool-img { background: var(--ds-surface-low); border-radius: 8px; width: 26px; height: 26px; }
.x-window.x-layer .x-tool-close::before, .x-window.x-layer .x-tool-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px;
  background: #6B7280; border-radius: 1px; transform: rotate(45deg);
}
.x-window.x-layer .x-tool-close::after { transform: rotate(-45deg); }
.x-window.x-layer .x-tool-over .x-tool-img { background: var(--ds-border) !important; }
.x-window.x-layer .x-tool-minimize, .x-window.x-layer .x-tool-maximize, .x-window.x-layer .x-tool-restore,
.x-window.x-layer .x-tool-collapse-top, .x-window.x-layer .x-tool-expand-bottom { display: none !important; }

/* janela de envio de arquivo (TUniFileUpload: fotos da TV, capa do evento, imagem do
   aviso, arquivo do chip). O uniGUI monta a janela com 300 x (104 + BandHeight) e poe
   os controles em posicao fixa, contando com a barra de titulo de 28px do classic; a
   nossa tem 48 (padding 12px 16px) e os botoes saiam cortados embaixo. Aqui a janela
   cresce e os controles sao reposicionados: nome do arquivo + ESCOLHER na primeira
   linha, CANCELAR e ENVIAR embaixo, tudo com 38px e 16px de respiro.
   Corpo = 16 + 38 + 14 + 38 + 16 = 122; janela = corpo + 57 (barra e bordas do Ext).
   So o TUniFileUpload poe <input type=file> numa janela no Gestor. */
.x-window.x-layer:has(.x-form-file-btn) { height: 179px !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-window-body,
.x-window.x-layer:has(.x-form-file-btn) .x-window-body > .x-panel,
.x-window.x-layer:has(.x-form-file-btn) .x-window-body .x-abs-layout-ct { height: 122px !important; }
/* nome do arquivo escolhido (memo so leitura do uniGUI) */
.x-window.x-layer:has(.x-form-file-btn) .x-abs-layout-ct .x-field:has(textarea) {
  left: 16px !important; top: 16px !important; width: calc(100% - 152px) !important; height: 38px !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-item-body,
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-trigger-wrap { height: 38px !important; box-sizing: border-box; }
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-text-wrap { height: 36px !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) textarea {
  height: 36px !important; padding: 7px 12px !important; line-height: 22px !important;
  overflow: hidden !important; white-space: pre !important; resize: none !important;
}
/* botao que abre o seletor do sistema: o texto "Browse..." do Ext vira ESCOLHER */
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) {
  left: auto !important; right: 16px !important; top: 16px !important; width: 112px !important; height: 38px !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) .x-form-item-body,
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) .x-form-trigger-wrap {
  width: 112px !important; height: 38px !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-form-trigger-cmp,
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn { width: 112px !important; height: 38px !important; box-sizing: border-box; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-form-file-input { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-btn-wrap,
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-btn-button { height: 100% !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-btn-inner { font-size: 0 !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-btn-inner::after { content: "Escolher"; font-size: 14px; }
/* CANCELAR e ENVIAR (nessa ordem no DOM), alinhados a direita; ENVIAR e o primario */
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item {
  left: auto !important; top: 68px !important; width: 112px !important; height: 38px !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(1) { right: 136px !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2) { right: 16px !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2):not(.x-item-disabled) {
  background: var(--ds-primary) !important; border-color: var(--ds-primary) !important;
  box-shadow: 0 1px 2px rgba(200, 22, 29, .30), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2).x-btn-over:not(.x-item-disabled) {
  background: var(--ds-primary-hover) !important; border-color: var(--ds-primary-hover) !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2):not(.x-item-disabled) .x-btn-inner { color: #FFFFFF !important; }

/* dica (tooltip do Ext) */
.x-tip, .x-tip-default {
  background: var(--ds-ink) !important; border: 0 !important; border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .25) !important; padding: 6px 10px !important;
}
.x-tip .x-tip-body, .x-tip-body-default, .x-tip .x-tip-body * {
  color: #FFFFFF !important; font-family: var(--ds-font) !important; font-size: 13px !important; background: transparent !important;
}
.x-tip-anchor { display: none !important; }

/* caixa de mensagem (jquery-confirm do FS) */
.jconfirm.jconfirm-modern .jconfirm-bg { background: rgba(17, 24, 39, .45) !important; opacity: 1 !important; }
.jconfirm.jconfirm-modern .jconfirm-box {
  border-radius: 16px !important; border-top: 0 !important; padding: 26px 26px 20px !important;
  box-shadow: var(--ds-shadow-3) !important; font-family: var(--ds-font) !important;
}
.jconfirm.jconfirm-modern .jconfirm-box[class*="jconfirm-type-"] { border-top: 0 !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-title-c {
  display: flex !important; flex-direction: column; align-items: center; padding: 0 0 2px !important; margin: 0 0 4px !important;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin: 0 0 12px !important;
  font-size: 24px !important; line-height: 1 !important; background: var(--ds-surface-low); color: var(--ds-muted) !important;
}
.jconfirm.jconfirm-modern .jconfirm-type-red    .jconfirm-icon-c { background: var(--ds-danger-bg); color: var(--ds-danger) !important; }
.jconfirm.jconfirm-modern .jconfirm-type-green  .jconfirm-icon-c { background: var(--ds-success-bg); color: var(--ds-success) !important; }
.jconfirm.jconfirm-modern .jconfirm-type-blue   .jconfirm-icon-c { background: var(--ds-info-bg); color: var(--ds-info) !important; }
.jconfirm.jconfirm-modern .jconfirm-type-orange .jconfirm-icon-c { background: var(--ds-warn-bg); color: var(--ds-warn) !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-title {
  display: block !important; font-size: 19px !important; font-weight: 700 !important; line-height: 26px !important; color: var(--ds-text) !important;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-content-pane { margin: 0 0 10px !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-content {
  font-size: 15px !important; line-height: 22px !important; color: var(--ds-text-2) !important; padding: 0 8px 4px !important; margin: 0 !important;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons { padding: 6px 0 0 !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn {
  border-radius: 10px !important; padding: 10px 22px !important; margin: 0 4px !important; border: 1px solid var(--ds-field) !important;
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0; text-transform: none; box-shadow: none !important;
  background: #FFFFFF !important; color: var(--ds-text) !important;
}
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn:hover { background: var(--ds-hover) !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn:focus { outline: none !important; box-shadow: var(--ds-ring) !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-red,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-danger { background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #FFFFFF !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-green,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-success { background: var(--ds-success) !important; border-color: var(--ds-success) !important; color: #FFFFFF !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-blue,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-dark,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn:only-child { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; color: #FFFFFF !important; }
.jconfirm .jconfirm-closeIcon { color: var(--ds-muted) !important; }

/* aviso rapido (iziToast do FS) */
.iziToast { border-radius: 12px !important; box-shadow: var(--ds-shadow-2) !important; font-family: var(--ds-font) !important; }
.iziToast > .iziToast-body .iziToast-title { font-weight: 700 !important; font-size: 14px !important; }
.iziToast > .iziToast-body .iziToast-message { font-size: 14px !important; }

/* foco pontilhado do tema classic: sai (o Ext liga o "modo teclado" no login
   e nunca desliga); quem navega por Tab ve o anel do :focus-visible */
.x-keyboard-mode .x-column-header.x-column-header-focus .x-column-header-inner::after,
.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner::before { border: 0 !important; outline: none !important; display: none !important; }
.x-keyboard-mode .x-view-item-focused, .x-keyboard-mode .x-grid-cell-inner-action-col :focus,
.x-keyboard-mode .x-grid-checkcolumn-cell-inner :focus, .x-keyboard-mode .x-fieldset-header-tool-default.x-focus { outline: none !important; }
.x-grid-item-focused .x-grid-cell-inner::before { display: none !important; }

/* ---------------------------------------------------------------- grade do Ext
   (sobra so em lugar escondido: toda grade visivel vira tabela - uTabelaDS) */
.ar-grid, .ar-grid .x-panel-body, .ar-grid .x-grid-body { border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius); }
.ar-grid .x-column-header { background: var(--ds-surface-low) !important; border-right: 0 !important; }
.ar-grid .x-column-header-text { font-size: 12px !important; font-weight: 600 !important; color: var(--ds-muted) !important; text-transform: uppercase; }
.ar-grid .x-grid-cell { font-size: 14px !important; color: var(--ds-text-2); border-bottom: 1px solid var(--ds-border-soft) !important; border-right: 0 !important; }
.ar-grid .x-grid-item-selected .x-grid-cell { background: var(--ds-sel) !important; }

/* ---------------------------------------------------------------- selos */
.ar-selo, .ar-sel {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font: 700 12px/1.5 var(--ds-font); white-space: nowrap; letter-spacing: 0; text-transform: none; border: 0;
}
.ar-sel i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ar-selo-ok, .ar-sel-ok, .ar-pill-ok { background: var(--ds-success-bg); color: var(--ds-success); }
.ar-selo-espera, .ar-sel-espera, .ar-pill-wait { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ar-selo-erro, .ar-sel-erro, .ar-pill-erro { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ar-sel-azul { background: var(--ds-info-bg); color: var(--ds-info); }
.ar-selo-neutro, .ar-sel-neutro, .ar-pill-off { background: #F1F2F5; color: #4B5361; }
.ar-pill { display: inline-block; font: 700 12px var(--ds-font); border-radius: 999px; padding: 3px 10px; }

/* ---------------------------------------------------------------- tabela (uTabelaDS) */
.ar-tb-host, .ar-tb-host > .x-panel-bodyWrap, .ar-tb-host .x-panel-body, .ar-tb-host .x-autocontainer-outerCt {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.ar-tb {
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  font-family: var(--ds-font); color: var(--ds-text-2); container-type: size;
}
.ar-tb-barra { flex: none; display: flex; align-items: center; gap: 12px; min-height: 40px; margin: 0 0 12px; }
.ar-tb-titulo { font: 700 15px var(--ds-font); color: var(--ds-text); margin-right: 4px; white-space: nowrap; }
/* Lotes e precos (05/11): de qual lote sao os precos, para nao gravar no lote errado. A linha do lote
   escolhido (ar-tb-marca) e a etiqueta tem a mesma cor, que liga uma a outra */
.ar-tb-selo {
  min-width: 0; padding: 5px 14px; border-radius: 999px; background: var(--ds-ink); color: #FFFFFF;
  font: 700 14px/1.35 var(--ds-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-tb.ar-tb-marca tr.ar-tl.sel td { background: #E9EBEF; }
.ar-tb.ar-tb-marca tr.ar-tl.sel td:first-child { box-shadow: inset 5px 0 0 var(--ds-ink); }
/* quando nao cabe, a aba rola: em % a largura desconta a barra de rolagem; nos px do servidor a tabela
   passava por baixo dela, cortava a direita e ainda criava rolagem de lado. So a aba de dentro (a edicao do
   evento tambem e aba e tambem contem a tabela) e so no PC: no celular a largura e do fluxo, e apertar o
   cabecalho fazia dele uma faixa, a tela deixava de ser coluna e o preco saia cortado */
@media (min-width: 760px) {
  .x-uni-tabsheet:has(.ar-tb-marca):not(:has(.x-uni-tabsheet)) > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel,
  .x-uni-tabsheet:has(.ar-tb-marca):not(:has(.x-uni-tabsheet)) > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel > .x-panel-bodyWrap > .x-panel-body { width: 100% !important; }
}
.ar-tb-busca { position: relative; flex: 0 1 380px; display: flex; align-items: center; margin: 0; }
.ar-tb-busca svg {
  position: absolute; left: 12px; width: 17px; height: 17px; fill: none;
  stroke: var(--ds-muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none;
}
.ar-tb-busca input {
  width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px 0 38px;
  border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface);
  font: 500 14px var(--ds-font); color: var(--ds-text); outline: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-tb-busca input:hover { border-color: var(--ds-field-hover); }
.ar-tb-busca input::placeholder { color: #8A919E; font-weight: 400; }
.ar-tb-busca input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-tb-total { margin-left: auto; font: 600 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-tb-aviso { font: 600 13px var(--ds-font); color: var(--ds-danger); background: var(--ds-danger-bg); border-radius: 8px; padding: 7px 10px; }
.ar-tb-cartao {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); overflow: hidden;
}
.ar-tb-rolo { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ar-tb table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ar-tb table[hidden] { display: none; }
.ar-tb thead th {
  position: sticky; top: 0; z-index: 1; background: var(--ds-surface-low); color: var(--ds-muted);
  font: 600 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; text-align: left;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); white-space: nowrap; cursor: pointer; user-select: none;
}
.ar-tb thead th:hover { color: var(--ds-text-2); }
.ar-tb .ar-tb-ord { width: 10px; height: 10px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0; transition: opacity .15s ease; }
.ar-tb thead th:hover .ar-tb-ord { opacity: .45; }
.ar-tb thead th.ord-asc, .ar-tb thead th.ord-desc { color: var(--ds-text); }
.ar-tb thead th.ord-asc .ar-tb-ord, .ar-tb thead th.ord-desc .ar-tb-ord { opacity: 1; }
.ar-tb thead th.c-acoes { cursor: default; }
.ar-tb tbody td {
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border-soft); white-space: nowrap;
  vertical-align: middle; color: var(--ds-text-2); background: var(--ds-surface); transition: background-color .12s ease;
}
.ar-tb tbody tr:last-child td { border-bottom: 0; }
.ar-tb tr.ar-tl { cursor: pointer; }
.ar-tb tr.ar-tl:hover td { background: var(--ds-hover); }
.ar-tb tr.ar-tl.sel td { background: var(--ds-sel); }
.ar-tb tr.ar-tl.sel td:first-child { box-shadow: inset 3px 0 0 var(--ds-primary); }
.ar-tb td.c-nome { font-weight: 600; color: var(--ds-text); white-space: normal; line-height: 1.35; min-width: 150px; }
.ar-tb td.c-txt { white-space: normal; line-height: 1.35; min-width: 90px; }
.ar-tb .c-num, .ar-tb .c-din { text-align: right; font-variant-numeric: tabular-nums; }
.ar-tb td.c-din { font-weight: 600; color: var(--ds-text); }
.ar-tb td.c-memo div {
  max-width: 380px; min-width: 160px; white-space: normal; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-tb .c-acoes { width: 1%; text-align: right; padding-left: 4px; padding-right: 10px; }
.ar-tb-abrir {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ds-muted);
  cursor: pointer; display: inline-grid; place-items: center; transition: background-color .12s ease, color .12s ease;
}
.ar-tb-abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.ar-tb-abrir:hover { background: var(--ds-surface-low); color: var(--ds-primary); }
.ar-tb-pessoa { display: inline-flex; align-items: center; gap: 10px; }
.ar-av {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font: 700 12px var(--ds-font); color: #FFFFFF; letter-spacing: .02em;
}
.ar-av-0 { background: #C8161D; } .ar-av-1 { background: #111318; } .ar-av-2 { background: #2F5DA8; }
.ar-av-3 { background: #0F766E; } .ar-av-4 { background: #9A5B13; } .ar-av-5 { background: #6D3FB5; }
.ar-tb tr.ar-tb-grupo td {
  background: var(--ds-surface-low); padding: 10px 16px; border-bottom: 1px solid var(--ds-border);
  font: 700 13px var(--ds-font); color: var(--ds-text); cursor: default;
}
.ar-tb tr.ar-tb-grupo em {
  font: 600 12px var(--ds-font); font-style: normal; margin-left: 8px; color: var(--ds-muted);
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 999px; padding: 1px 8px;
}
.ar-tb-rodape {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--ds-border); min-height: 52px; box-sizing: border-box;
  font: 500 13px var(--ds-font); color: var(--ds-muted);
}
.ar-tb-rodape[hidden] { display: none; }
.ar-tb-rodape b { color: var(--ds-text-2); font-weight: 600; }
.ar-tb-pags { display: flex; align-items: center; gap: 6px; }
.ar-tb-pag {
  min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--ds-border); border-radius: 8px;
  background: var(--ds-surface); font: 600 13px var(--ds-font); color: var(--ds-text-2); cursor: pointer;
  display: inline-grid; place-items: center; transition: border-color .12s ease, background-color .12s ease;
}
.ar-tb-pag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-tb-pag:hover:not(:disabled):not(.on) { border-color: var(--ds-field-hover); }
.ar-tb-pag.on { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; cursor: default; }
.ar-tb-pag:disabled { opacity: .4; cursor: default; }
.ar-tb-ret { color: var(--ds-muted); padding: 0 2px; }
.ar-tb-vazio { padding: 48px 28px; text-align: center; max-width: 560px; margin: auto; }
.ar-tb-vazio[hidden] { display: none; }
.ar-tb-vazio svg { width: 56px; height: 56px; fill: none; stroke: #B8BFCA; stroke-width: 2; display: block; margin: 0 auto 14px; }
.ar-tb-vazio b { display: block; font: 700 17px var(--ds-font); color: var(--ds-text); margin-bottom: 8px; }
.ar-tb-vazio p { margin: 0; font: 400 14.5px/1.6 var(--ds-font); color: var(--ds-muted); }
@container (max-height: 300px) {
  .ar-tb-vazio { padding: 14px 20px; }
  .ar-tb-vazio svg { display: none; }
  .ar-tb-vazio b { font-size: 15px; margin-bottom: 4px; }
  .ar-tb-vazio p { font-size: 13.5px; line-height: 1.5; }
}
.ar-tb tr.ar-tb-nada td { padding: 28px 16px; text-align: center; color: var(--ds-muted); white-space: normal; cursor: default; }
.ar-tb-limpar { border: 0; background: none; padding: 0 0 0 6px; color: var(--ds-primary); font: 600 14px var(--ds-font); cursor: pointer; text-decoration: underline; }
.ar-tb td.c-ed { padding: 7px 10px; }
.ar-tb .ar-tb-inp[type=text], .ar-tb .ar-tb-inp[type=date] {
  width: 100%; min-width: 76px; height: 36px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid var(--ds-field); border-radius: 8px; background: var(--ds-surface);
  font: 500 14px var(--ds-font); color: var(--ds-text); outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.ar-tb .ar-tb-inp[type=text]:hover, .ar-tb .ar-tb-inp[type=date]:hover { border-color: var(--ds-field-hover); }
.ar-tb .c-num .ar-tb-inp, .ar-tb .c-din .ar-tb-inp { text-align: right; }
.ar-tb .ar-tb-inp:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-tb-chk { position: relative; display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.ar-tb-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ar-tb-chk i {
  width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid #9CA3AF; border-radius: 6px;
  background: var(--ds-surface); display: grid; place-items: center; transition: background-color .12s ease, border-color .12s ease;
}
.ar-tb-chk input:checked + i { background: var(--ds-ink); border-color: var(--ds-ink); }
.ar-tb-chk input:checked + i::after { content: ''; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ar-tb-chk input:focus-visible + i { box-shadow: var(--ds-ring); }
.ar-tb tr.ar-tl-nova td { background: #FFFBEB; }

/* ---------------------------------------------------------------- listas em cartoes (uCartoes / eventos) */
.ar-cards-area {
  height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  padding: 2px 6px 16px 2px; font-family: var(--ds-font); scrollbar-gutter: stable;
}
.ar-cards-area::-webkit-scrollbar { width: 8px; }
.ar-cards-area::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ar-cards.compacto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ar-cards[hidden], .ar-cardev[hidden], .ar-cards-grupo[hidden] { display: none !important; }
.ar-cardev {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
  padding: 16px 18px 14px; cursor: pointer; position: relative; user-select: none;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.ar-cardev:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 30px -12px rgba(16, 24, 40, .22); }
.ar-cardev:active { transform: translateY(0); }
.ar-cardev.sel { border-color: var(--ds-primary); box-shadow: 0 0 0 2px rgba(200, 22, 29, .16), var(--ds-shadow); }
.ar-cardev-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ar-cardev-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ar-cardev-data { font: 700 15px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-cardev-nome { font: 700 18px/1.25 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-cardev-nome small { font: 600 13px var(--ds-font); color: var(--ds-muted); }
.ar-cardev-meta { font: 500 14px var(--ds-font); color: var(--ds-muted); margin-top: 4px; }
.ar-cardev-num { font: 500 14px var(--ds-font); color: var(--ds-muted); margin-top: 4px; }
.ar-cardev-num b { color: var(--ds-text); font-weight: 700; }
.ar-cardev-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ds-border-soft); }
.ar-cardev-btn {
  font: 600 13px var(--ds-font); color: #FFFFFF; background: var(--ds-ink); border-radius: 8px; padding: 7px 14px; flex: none;
  transition: background-color .15s ease;
}
.ar-cardev:hover .ar-cardev-btn { background: var(--ds-primary); }
.ar-cardev-linhas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 10px 0 0; align-items: baseline; }
.ar-cardev-linhas dt { font: 700 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted); white-space: nowrap; padding-top: 2px; }
.ar-cardev-linhas dd { margin: 0; font: 500 14px/1.35 var(--ds-font); color: var(--ds-text); min-width: 0; white-space: normal; overflow-wrap: anywhere; }
/* e-mail, link e nome comprido quebram dentro do cartao em vez de vazar pela borda */
.ar-cardev, .ar-cardev-nome, .ar-cardev-meta { min-width: 0; overflow-wrap: anywhere; }
/* linha larga (TCartoes.LinhaLarga: e-mail, descricao): rotulo em cima e valor na
   largura toda; na coluna estreita o e-mail quebrava no meio ("studioadsonram|on") */
.ar-cardev-linhas dt.larga, .ar-cardev-linhas dd.larga { grid-column: 1 / -1; }
.ar-cardev-linhas dt.larga { padding-top: 4px; }
.ar-cards.compacto .ar-cardev { padding: 16px; }
.ar-cards.compacto .ar-cardev-topo { margin-bottom: 6px; }
.ar-cards.compacto .ar-cardev-nome { font-size: 16px; }
.ar-cards.compacto .ar-cardev-num { margin-top: 3px; }
.ar-cards.compacto .ar-cardev-btn { padding: 5px 12px; }
.ar-cards-vazio, .ar-cards-nada {
  grid-column: 1 / -1; background: var(--ds-surface); border: 1px dashed #D0D5DD; border-radius: var(--ds-radius);
  padding: 28px; text-align: center; color: var(--ds-muted); font: 500 15px/1.55 var(--ds-font);
}
.ar-cards-nada[hidden] { display: none; }
.ar-lista .ar-cards-area { margin: 0 24px; }
.ar-cards-busca { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.ar-cards-busca input {
  flex: 1; min-width: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--ds-field); border-radius: 10px;
  background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 12px center / 17px 17px;
  padding: 0 12px 0 38px; font: 500 14px var(--ds-font); color: var(--ds-text); outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-cards-busca input::placeholder { color: #8A919E; font-weight: 400; }
.ar-cards-busca input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-cards-total { flex: none; font: 600 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-cards-novo {
  flex: none; font: 600 14px var(--ds-font); color: #FFFFFF; background: var(--ds-primary); border-radius: 10px;
  padding: 10px 16px; cursor: pointer; user-select: none; box-shadow: 0 1px 2px rgba(200, 22, 29, .3);
  transition: background-color .15s ease, transform .12s ease;
}
.ar-cards-novo:hover { background: var(--ds-primary-hover); }
.ar-cards-novo:active { transform: translateY(1px); }
.ar-cards-grupo { display: flex; align-items: center; gap: 12px; margin: 20px 0 10px; }
.ar-cards-grupo:first-of-type, .ar-cards-busca + .ar-cards-grupo { margin-top: 2px; }
.ar-cards-grupo span { font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-cards-grupo i { flex: 1; height: 1px; background: var(--ds-border); }
.ar-cards-grupo em { font: 600 12px var(--ds-font); font-style: normal; color: var(--ds-muted); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 999px; padding: 1px 9px; }
.ar-cards-grupo + .ar-cards { margin-bottom: 4px; }

/* ---------------------------------------------------------------- avisos: marcadores */
.ar-marcadores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; font-family: var(--ds-font); }
.ar-marc-t { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-marcador {
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ds-surface);
  border: 1px solid var(--ds-field); font: 600 13px var(--ds-font); color: var(--ds-text); cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.ar-marcador:hover { background: var(--ds-ink); color: #FFFFFF; border-color: var(--ds-ink); }
.ar-marcador:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- painel inicial */
.ar-dash {
  font-family: var(--ds-font); color: var(--ds-text-2); background: var(--ds-bg);
  height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 0; box-sizing: border-box;
  scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-dash::-webkit-scrollbar { width: 8px; }
.ar-dash::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-abas { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.ar-aba {
  font: 600 14px var(--ds-font); cursor: pointer; user-select: none;
  color: #4B5361; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 10px; padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.ar-aba:hover { border-color: var(--ds-field-hover); color: var(--ds-text); }
.ar-aba.sel { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-aba-mais {
  margin-left: auto; width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; line-height: 1; background: var(--ds-primary); border-color: var(--ds-primary); color: #FFFFFF;
}
.ar-aba-mais:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); color: #FFFFFF; }
.ar-dash-kpis, .ar-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ar-dash-kpis > *, .ar-dash-linha > * { min-width: 0; overflow-wrap: anywhere; }
.ar-kpi {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); padding: 16px 18px 14px; position: relative;
}
.ar-kpi::after { display: none; }
.ar-kpi-ok { box-shadow: inset 0 3px 0 var(--ds-success), var(--ds-shadow); }
.ar-kpi-wait { box-shadow: inset 0 3px 0 #D97706, var(--ds-shadow); }
.ar-kpi-t { font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-kpi-v { font: 800 30px/1.1 var(--ds-font); color: var(--ds-text); margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-kpi-ok .ar-kpi-v { color: var(--ds-success); }
.ar-kpi-wait .ar-kpi-v { color: var(--ds-warn); }
.ar-kpi-s { font: 500 13px var(--ds-font); color: var(--ds-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ds-border-soft); }
.ar-dash-linha { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 14px; }
.ar-bloco {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); padding: 16px 18px; min-width: 0; overflow-x: auto;
}
.ar-bloco-tit, .ar-dash .ar-bloco-tit {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  position: relative; padding-left: 16px;
  font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text);
}
.ar-bloco-tit::before, .ar-dash .ar-bloco-tit::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary);
}
.ar-bloco-tit span { font: 500 13px var(--ds-font); letter-spacing: 0; text-transform: none; color: var(--ds-muted); }
/* grafico sem viewBox: barras em % da largura e texto em px de verdade (com
   preserveAspectRatio=none o numero esticava em 1920 e espremia em 1366) */
.ar-graf { width: 100%; height: 150px; display: block; overflow: visible; }
.ar-graf-b { fill: var(--ds-ink); }
.ar-graf-b.max { fill: var(--ds-primary); }
.ar-graf-base { stroke: var(--ds-border); stroke-width: 1; }
.ar-graf-v { font: 700 13px var(--ds-font); fill: var(--ds-text-2); font-variant-numeric: tabular-nums; }
.ar-graf-eixo { display: flex; justify-content: space-between; font: 500 13px var(--ds-font); color: var(--ds-muted); margin-top: 6px; }
/* respiros do painel que antes iam em style= no Pascal */
.ar-dash .ar-bloco-tit.ar-dash-sec { margin: 18px 0 8px; }
.ar-dash-sep { margin-top: 14px; }
.ar-tab th.num, .ar-tab td.num { text-align: right; }
.ar-cam { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; }
.ar-cam div { background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft); border-radius: 8px; padding: 8px 0; text-align: center; }
.ar-cam .t { font: 600 12px var(--ds-font); color: var(--ds-muted); display: block; }
.ar-cam .v { font: 800 20px var(--ds-font); color: var(--ds-text); }
.ar-tab { width: 100%; border-collapse: collapse; font: 400 14px var(--ds-font); }
.ar-tab th { font: 600 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted);
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
.ar-tab td { padding: 9px 10px; border-bottom: 1px solid var(--ds-border-soft); color: var(--ds-text-2); }
.ar-vazio { color: var(--ds-muted); font: 400 14px/1.55 var(--ds-font); padding: 12px 0; }
.ar-tr-bloco { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); padding: 8px 18px 16px; }
.ar-tr-linha { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ds-border-soft); }
.ar-tr-linha:last-of-type { border-bottom: 0; }
.ar-tr-linha b { flex: 0 0 56px; font: 700 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-tr-linha .nm { flex: 1; min-width: 0; font: 500 14px var(--ds-font); color: var(--ds-text); }
.ar-tr-linha .nm i { font-style: normal; font: 400 13px var(--ds-font); color: var(--ds-muted); }
.ar-tr-linha span.ok   { font: 700 13px var(--ds-font); color: var(--ds-success); }
.ar-tr-linha span.wait { font: 700 13px var(--ds-font); color: var(--ds-warn); }
.ar-tr-linha span.sem  { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-tr-vazio { padding: 16px 0; font: 400 14px/1.55 var(--ds-font); color: var(--ds-muted); }
.ar-tr-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ar-tr-acoes span {
  font: 600 13px var(--ds-font); color: var(--ds-text); cursor: pointer;
  background: var(--ds-surface); border: 1px solid var(--ds-field); border-radius: 10px; padding: 8px 14px;
}
.ar-tr-acoes span:hover { background: var(--ds-ink); color: #FFFFFF; border-color: var(--ds-ink); }

/* ---------------------------------------------------------------- login (lado branco) */
.ar-login-janela, .ar-login-janela.x-window {
  border: 0 !important; padding: 0 !important; background: #0B0B0C !important; box-shadow: none !important; border-radius: 0 !important;
}
.ar-login-janela > .x-window-body, .ar-login-janela .x-window-body { border: 0 !important; background: transparent !important; }
.ar-login-hero { background: #0B0B0C !important; position: relative; overflow: hidden; }
.ar-login-hero .x-panel, .ar-login-hero .x-panel-bodyWrap, .ar-login-hero .x-panel-body,
.ar-login-hero .x-panel-white, .ar-login-hero .x-body-wrap-el, .ar-login-hero .x-body-el { background: transparent !important; border: 0 !important; }
.ar-login-hero .x-panel-body, .ar-login-hero .x-panel-bodyWrap { overflow: visible !important; }
.ar-hero {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 4vw, 64px); box-sizing: border-box; overflow: hidden; color: #FFFFFF; font-family: var(--ds-font);
}
.ar-hero-marca { display: flex; align-items: center; gap: 16px; }
.ar-hero-marca img { width: clamp(56px, 5vw, 86px); height: auto; border-radius: 10px; }
.ar-hero-marca-nome { font-family: var(--ds-marca); font-size: clamp(26px, 2.4vw, 38px); line-height: 1; letter-spacing: .04em; }
.ar-hero-marca-sub { font: 600 13px var(--ds-font); letter-spacing: .18em; color: #9CA3AF; text-transform: uppercase; margin-top: 4px; }
.ar-hero-titulo { font-family: var(--ds-marca); font-size: clamp(44px, 6vw, 104px); line-height: .92; letter-spacing: .02em; text-wrap: balance; }
.ar-hero-titulo em { color: #E0312B; font-style: normal; }
/* 22px: em tela larga a segunda linha do titulo (Bebas, entrelinha .92) descia sobre o texto */
.ar-hero-sub { font-size: clamp(15px, 1.15vw, 19px); color: #C5CAD3; max-width: 34ch; line-height: 1.5; margin-top: 22px; }
.ar-hero-rodape, .ar-hero-credito { font: 500 13px var(--ds-font); color: #9CA3AF; letter-spacing: .02em; }
.ar-hero-credito a { color: #D1D5DB; }
.ar-hero-halter { display: block; width: clamp(120px, 13vw, 210px); margin-top: 26px; animation: arLevanta 4.6s ease-in-out infinite; }
@keyframes arLevanta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.ar-hero-marca-dagua {
  /* menor e mais baixa: com 58% e -12% a caixa da caveira subia ate o titulo em 1366 */
  position: absolute; z-index: 1; right: -6%; bottom: -20%; width: min(50%, 580px); opacity: .06;
  filter: grayscale(1) contrast(1.2); pointer-events: none; animation: arRespira 9s ease-in-out infinite;
}
@keyframes arRespira { 0%, 100% { opacity: .05; transform: scale(1); } 50% { opacity: .09; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .ar-hero-halter, .ar-hero-marca-dagua { animation: none; } }
.ar-login-form, .ar-login-form > .x-panel-bodyWrap, .ar-login-form > .x-panel-bodyWrap > .x-panel-body,
.ar-login-form > .x-body-el { background: #FFFFFF !important; }
.ar-login-form img { border-radius: 22px; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
/* 24px quebrava "ACESSO DO ORGANIZADOR" em duas linhas na coluna de 290px e
   invadia o texto de baixo */
.ar-login-form .ar-titulo, .ar-login-form .ar-titulo .x-innerhtml { font-size: 20px !important; line-height: 28px !important; }
.ar-login-form .ar-sub, .ar-login-form .ar-sub .x-innerhtml { font-size: 14px !important; line-height: 20px !important; color: var(--ds-muted) !important; }
.ar-login-versao, .ar-login-versao .x-innerhtml { font: 500 13px/18px var(--ds-font) !important; color: #6B7280 !important; }
.x-btn.ar-btn-preto .x-btn-button, .x-btn.ar-btn-preto .x-btn-wrap { height: 100% !important; }
.ar-login-form .x-btn.ar-btn-preto { border-radius: 12px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important; }
.ar-login-form .x-btn.ar-btn-preto .x-btn-inner { font-size: 16px !important; font-weight: 700 !important; }

/* ---------------------------------------------------------------- retirada de kit */
.ar-kit-area { font-family: var(--ds-font); color: var(--ds-text); }
.ar-kit-vazio { text-align: center; padding: 34px 16px; color: var(--ds-muted); }
.ar-kit-icone { font-size: 40px; line-height: 44px; font-family: var(--ds-font) !important; }
.ar-kit-chamada { font: 700 18px var(--ds-font); color: var(--ds-text); margin-top: 6px; }
.ar-kit-dica { font: 400 14px/1.5 var(--ds-font); margin-top: 4px; }
.ar-kit-ficha { display: flex; gap: 18px; padding: 16px 18px; align-items: flex-start; }
.ar-kit-peito {
  min-width: 132px; text-align: center; border-radius: 14px; padding: 10px 8px 12px; background: var(--ds-ink); color: #FFFFFF;
  font-family: var(--ds-marca); font-size: 52px; line-height: 50px;
}
.ar-kit-peito span { display: block; font: 700 11px var(--ds-font); letter-spacing: .14em; opacity: .75; line-height: 14px; }
.ar-kit-ficha.alerta .ar-kit-peito { background: #D97706; }
.ar-kit-ficha.bloqueado .ar-kit-peito { background: #B3221D; }
.ar-kit-dados { flex: 1; min-width: 0; }
.ar-kit-dados .nome { font: 700 22px/28px var(--ds-font); color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-kit-dados .linha { font: 400 14px var(--ds-font); margin-top: 4px; color: var(--ds-text-2); }
.ar-kit-dados .linha span { font: 700 11px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin: 0 6px 0 0; }
.ar-kit-dados .linha span:not(:first-child) { margin-left: 16px; }
.ar-kit-dados .chips { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ar-kit-dados .chips b { font: 700 12px var(--ds-font); border-radius: 999px; padding: 4px 11px; background: var(--ds-surface-low); border: 1px solid var(--ds-border); color: var(--ds-text); }
.ar-kit-dados .chips .camisa { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-kit-aviso { margin-top: 12px; font: 600 14px var(--ds-font); border-radius: 10px; padding: 9px 12px; background: var(--ds-warn-bg); color: #92400E; }
.ar-kit-ficha.bloqueado .ar-kit-aviso { background: var(--ds-danger-bg); color: #991B1B; }

/* ---------------------------------------------------------------- financeiro */
.ar-kpis-fin .ar-kpi { padding: 14px 16px; }
.ar-kpis-fin .ar-kpi .rot { display: block; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-kpis-fin .ar-kpi .val { display: block; margin-top: 4px; font: 800 24px/1.2 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-kpis-fin .verde .val { color: var(--ds-success); }
.ar-kpis-fin .amarelo .val { color: var(--ds-warn); }
.ar-kpis-fin .cinza .val { color: var(--ds-muted); }
.ar-fin-formas { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 10px; font: 500 14px var(--ds-font); color: var(--ds-text); }
.ar-fin-formas b { font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-right: 6px; }

/* ---------------------------------------------------------------- relatorios */
.ar-rel-area { overflow: auto !important; }
.ar-rel-vazio { font: 400 15px/1.6 var(--ds-font); color: var(--ds-muted); text-align: center; padding: 64px 24px; max-width: 560px; margin: 0 auto; }
.ar-rel-vazio b { display: block; font: 700 17px var(--ds-font); color: var(--ds-text); margin-bottom: 8px; }
.ar-rel-previa { font-family: var(--ds-font); color: var(--ds-text); padding: 16px 18px; scrollbar-gutter: stable; }
.ar-rel-previa table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ar-rel-previa th {
  font: 600 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted);
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ds-border); position: sticky; top: 0; background: var(--ds-surface-low);
}
.ar-rel-previa td { padding: 8px 10px; border-bottom: 1px solid var(--ds-border-soft); font-variant-numeric: tabular-nums; }
.ar-rel-previa td.num { text-align: right; }
.ar-rel-total { margin-top: 10px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-etiquetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ar-etiqueta { border: 1px dashed #B4BBC7; border-radius: 10px; padding: 10px 12px; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.ar-etiqueta .num { font-family: var(--ds-marca); font-size: 46px; line-height: 44px; color: var(--ds-text); }
.ar-etiqueta .nome { font: 700 14px var(--ds-font); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-etiqueta .pe { font: 500 12px var(--ds-font); color: var(--ds-muted); margin-top: 2px; }

/* ---------------------------------------------------------------- evolucao do aluno */
.ar-evo-area { overflow: auto !important; }
.ar-evo { font-family: var(--ds-font); color: var(--ds-text); padding: 16px 18px; }
.ar-evo-vazio { color: var(--ds-muted); font: 400 15px/1.6 var(--ds-font); padding: 48px 16px; text-align: center; max-width: 560px; margin: 0 auto; }
.ar-evo-vazio b { display: block; font: 700 17px var(--ds-font); color: var(--ds-text); margin-bottom: 8px; }
.ar-evo-topo { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.ar-evo-foto { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: 0 0 92px; background: var(--ds-ink); }
.ar-evo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-evo-sem { display: flex; align-items: center; justify-content: center; }
.ar-evo-sem span { color: #FFFFFF; font: 700 36px var(--ds-font); }
.ar-evo-id .nome, .ar-evo-nome { font: 800 24px/1.2 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-evo-id .linha, .ar-evo-dados { font: 400 14px var(--ds-font); margin-top: 4px; color: var(--ds-text-2); }
.ar-evo-id .linha span { font: 700 11px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-right: 4px; }
.ar-evo-id .linha span:not(:first-child) { margin-left: 14px; }
.ar-evo-id b.aluno, .ar-evo-id b.externo { font: 700 12px var(--ds-font); border-radius: 999px; padding: 3px 10px; }
.ar-evo-id b.aluno { background: var(--ds-primary); color: #FFFFFF; }
.ar-evo-id b.externo { background: var(--ds-surface-low); color: var(--ds-muted); }
.ar-evo-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ar-evo-num { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px; padding: 12px 14px; }
.ar-evo-num .rot { display: block; font: 700 12px var(--ds-font); letter-spacing: .06em; color: var(--ds-muted); text-transform: uppercase; }
.ar-evo-num b { display: block; font: 800 24px/1.25 var(--ds-font); color: var(--ds-text); }
.ar-evo-num .apoio { display: block; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-evo-bloco { margin-top: 18px; }
.ar-evo-bloco .tit { font: 700 12px var(--ds-font); letter-spacing: .07em; color: var(--ds-muted); margin-bottom: 10px; text-transform: uppercase; }
.ar-evo-graf { width: 100%; height: 150px; display: block; }
.ar-evo-eixo { display: flex; font: 500 12px var(--ds-font); color: var(--ds-muted); margin-top: 4px; }
.ar-evo-eixo span { text-align: center; display: inline-block; }
.ar-evo-itens { border-top: 1px solid var(--ds-border); }
.ar-evo-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ds-border-soft); align-items: flex-start; }
.ar-evo-item-dt { text-align: center; min-width: 52px; }
.ar-evo-item-dt b { display: block; font: 800 20px/1.1 var(--ds-font); color: var(--ds-text); }
.ar-evo-item-dt span { display: block; font: 500 12px var(--ds-font); color: var(--ds-muted); }
.ar-evo-item-foto { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; flex: 0 0 96px; background: var(--ds-surface-low); }
.ar-evo-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-evo-item-txt { flex: 1; min-width: 0; }
.ar-evo-item-txt .tit { font: 700 15px var(--ds-font); color: var(--ds-text); margin: 0 0 2px; }
.ar-evo-item-txt .num { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ar-evo-item-txt .num b { font: 800 18px var(--ds-font); color: var(--ds-text); }
.ar-evo-item-txt .num span { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-evo-item-txt .num .extra { color: var(--ds-primary); font-weight: 600; }
.ar-evo-item-txt .txt { font: 400 14px/1.5 var(--ds-font); color: var(--ds-text-2); margin-top: 4px; }
.ar-evo-item.treino .ar-evo-item-dt b { color: #2563EB; }
.ar-evo-item.prova .ar-evo-item-dt b { color: var(--ds-primary); }
.ar-evo-ficha { padding: 4px 2px 10px; }

/* ---------------------------------------------------------------- privacidade (LGPD) */
.ar-lgpd-motivo { margin-top: 12px; padding: 10px 12px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-muted); border-radius: 8px; font: italic 400 14px var(--ds-font); color: var(--ds-text-2); }
.ar-lgpd-quadro { margin-top: 14px; padding: 12px 14px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 10px; font: 400 14px/1.5 var(--ds-font); color: var(--ds-text-2); }
.ar-lgpd-quadro b { color: var(--ds-text); display: block; margin-top: 6px; }
.ar-lgpd-quadro b:first-child { margin-top: 0; }
.ar-lgpd-quadro ul { margin: 4px 0 0; padding-left: 20px; }
.ar-lgpd-quadro li { margin: 2px 0; }
.ar-lgpd-atencao { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font: 500 14px var(--ds-font); background: var(--ds-danger-bg); border: 1px solid #F3C4C1; color: #8F1C17; }
.ar-lgpd-feito { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font: 500 14px var(--ds-font); background: var(--ds-success-bg); border: 1px solid #BFE3C9; color: #1D6B32; }

/* ---------------------------------------------------------------- ajuda */
.ar-ajuda-indice ul { list-style: none; margin: 0; padding: 0; }
.ar-ajuda-indice li { margin: 0 0 2px; }
.ar-ajuda-indice a {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ds-text); font: 500 14px var(--ds-font); border: 1px solid transparent;
}
.ar-ajuda-indice a:hover { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-primary); }
.ar-ajuda-texto { max-width: 760px; font: 400 15px/1.7 var(--ds-font); color: var(--ds-text-2); padding: 4px 6px 24px; }
.ar-ajuda-texto h2 { font: 800 24px/1.2 var(--ds-font); letter-spacing: -.01em; color: var(--ds-text); margin: 0 0 12px; }
.ar-ajuda-texto p { margin: 0 0 12px; }
.ar-ajuda-texto b { color: var(--ds-text); }
.ar-ajuda-texto ul, .ar-ajuda-texto ol { margin: 0 0 12px; padding-left: 22px; }
.ar-ajuda-texto li { margin: 4px 0; }
.ar-ajuda-texto p.dica { background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-primary); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.ar-ajuda-tab { border-collapse: collapse; width: 100%; margin: 0 0 14px; font: 400 14px var(--ds-font); }
.ar-ajuda-tab th, .ar-ajuda-tab td { border: 1px solid var(--ds-border); padding: 8px 10px; text-align: left; vertical-align: top; background: var(--ds-surface); }
.ar-ajuda-tab thead th { background: var(--ds-ink); color: #FFFFFF; }

/* ---------------------------------------------------------------- avaliacoes */
.ar-aval-resumo { display: flex; gap: 26px; align-items: center; padding-top: 10px; font-family: var(--ds-font); }
.ar-aval-resumo span { font: 500 14px var(--ds-font); color: var(--ds-text-2); }
.ar-aval-resumo b { font: 800 20px var(--ds-font); color: var(--ds-text); margin-right: 4px; }
.ar-aval-resumo.vazio { color: var(--ds-muted); font: 400 14px var(--ds-font); }
.ar-aval-ficha { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; padding: 18px 20px; font-family: var(--ds-font); }
.ar-aval-ficha.vazio { color: var(--ds-muted); font: 400 14px/1.6 var(--ds-font); }
.ar-aval-ficha .cab b { display: block; font: 700 17px var(--ds-font); color: var(--ds-text); }
.ar-aval-ficha .cab span { display: block; font: 500 13px var(--ds-font); color: var(--ds-muted); margin-top: 3px; }
.ar-aval-ficha .notas { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 14px; }
.ar-aval-ficha .notas > div { display: flex; flex-direction: column; gap: 3px; }
.ar-aval-ficha .notas span { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-aval-est i { font-style: normal; font-size: 18px; color: #D8DCE3; }
.ar-aval-est i.on { color: #F0A500; }
.ar-aval-ficha .obs q {
  display: block; font: 400 15px/1.55 var(--ds-font); color: var(--ds-text); background: var(--ds-surface-low);
  border-left: 3px solid var(--ds-primary); border-radius: 0 10px 10px 0; padding: 12px 16px; quotes: none;
}
.ar-aval-ficha .obs .sem { font: 400 13.5px var(--ds-font); color: var(--ds-muted); }

/* ---------------------------------------------------------------- previa do slide da TV (uCadPainelTV)
   A caixa escura reproduz a coluna de slides da TV (proporcao 0,71); dentro
   dela as medidas sao em cqw - a mesma conta da TV (vw), so que sobre a
   largura da previa - e as cores sao as da TV. O tamanho da caixa e posto
   pelo adson-tema.js conforme a altura livre do frame. A classe inteira/cobrir
   da caixa segue o encaixe do slide (ver tv.css). */
.ar-tvp-host, .ar-tvp-host > .x-panel-bodyWrap, .ar-tvp-host .x-panel-body, .ar-tvp-host .x-autocontainer-outerCt {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
/* a previa se dimensiona pela altura do frame: nunca rola (1px de fonte a mais criava barra) */
.ar-tvp-host .x-panel-body { overflow: hidden !important; }
.ar-tvp { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; font-family: var(--ds-font); color: var(--ds-text-2); }
.ar-tvp-cab { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 16px; }
.ar-tvp-cab b {
  position: relative; padding-left: 16px; white-space: nowrap;
  font: 700 12px/16px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-muted);
}
.ar-tvp-cab b::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary); }
.ar-tvp-cab span { font: 500 13px var(--ds-font); color: var(--ds-muted); text-align: right; }
.ar-tvp-tela {
  flex: none; position: relative; box-sizing: border-box; width: 100%; aspect-ratio: .71; overflow: hidden; container-type: inline-size;
  background: #17171b; border: 1px solid #26262c; border-radius: 12px; box-shadow: var(--ds-shadow-2);
  user-select: none; -webkit-user-select: none;
}
.ar-tvp-tela.mexe { cursor: grab; touch-action: none; }
.ar-tvp-tela.arrastando { cursor: grabbing; }
.ar-tvp-tela:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 22, 29, .35), var(--ds-shadow-2); }
.ar-tvp-midia {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.ar-tvp-tela.pronta .ar-tvp-midia { opacity: 1; }
/* os dois encaixes da TV (tv.css): "inteira" = contain sobre a propria foto
   desfocada (video: fundo escuro); "cobrir" = cover + foco + zoom. O desfoque
   e o da TV (1,25vw sobre a coluna de 33vw) na largura da previa. */
.ar-tvp-tela.inteira .ar-tvp-midia { object-fit: contain; }
.ar-tvp-fundo {
  position: absolute; inset: 0; display: none; pointer-events: none;
  background: #000 center / cover no-repeat; filter: blur(3.8cqw) brightness(.55); transform: scale(1.15);
  opacity: 0; transition: opacity .35s ease;
}
.ar-tvp-tela.inteira .ar-tvp-fundo { display: block; }
.ar-tvp-tela.pronta .ar-tvp-fundo { opacity: 1; }
/* foto sem etiqueta, titulo nem texto: nada por cima, como na TV */
.ar-tvp-tela.sem-texto .ar-tvp-texto { display: none; }
.ar-tvp-texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 4.4cqw 5.45cqw 4.7cqw; color: #f5f5f4;
  background: linear-gradient(to top, #0d0d0fee 12%, #0d0d0fcc 55%, transparent);
}
.ar-tvp-et {
  display: inline-block; margin-bottom: .9cqw; text-transform: uppercase;
  font: 800 2.24cqw 'Barlow', var(--ds-font); letter-spacing: .22em; color: #e0312b;
}
.ar-tvp-ti {
  margin: 0 0 1.2cqw; color: #f5f5f4; text-wrap: balance; overflow-wrap: anywhere;
  font-family: var(--ds-marca); font-weight: 400; font-size: 9.07cqw; line-height: .98; letter-spacing: .01em;
}
.ar-tvp-tx { margin: 0; max-width: 30ch; overflow-wrap: anywhere; font: 400 3.48cqw/1.45 'Barlow', var(--ds-font); color: #d6d6da; }
.ar-tvp-et[hidden], .ar-tvp-tx[hidden] { display: none; }
/* recado so de texto: o texto sobe e ocupa a caixa, como na TV */
.ar-tvp-tela.sem-midia .ar-tvp-texto {
  top: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  background: none; padding: 4.4cqw 5.45cqw;
}
.ar-tvp-tela.sem-midia .ar-tvp-ti { font-size: 10.9cqw; }
.ar-tvp-tela.sem-midia .ar-tvp-tx { font-size: 3.94cqw; max-width: 26ch; }
.ar-tvp-nada { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 500 14px/1.5 var(--ds-font); color: #9a9aa2; }
.ar-tvp-carrega {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(13, 13, 15, .78); color: #f5f5f4; font: 600 13px var(--ds-font);
}
.ar-tvp-carrega i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: #e0312b; animation: dsGira .8s linear infinite; }
.ar-tvp-carrega[hidden], .ar-tvp-falha[hidden], .ar-tvp-recado[hidden] { display: none; }
.ar-tvp-falha {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; padding: 10px 12px; border-radius: 10px;
  background: var(--ds-danger-bg); color: var(--ds-danger); font: 600 13px/1.45 var(--ds-font);
}
.ar-tvp-recado {
  position: absolute; left: 50%; top: 12px; z-index: 4; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 7px 12px; border-radius: 999px; background: rgba(17, 19, 24, .9); color: #FFFFFF;
  font: 600 13px/1.35 var(--ds-font); text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.ar-tvp-aviso { flex: none; padding: 9px 12px; border-radius: 10px; background: var(--ds-warn-bg); color: #92400E; font: 500 13px/1.45 var(--ds-font); }
/* Mostrar inteira | Preencher e enquadrar: selecionado em tinta (o "ativo" do tema) */
.ar-tvp-modo {
  flex: none; display: flex; gap: 3px; padding: 3px;
  border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface-low);
}
/* largura pelo texto + sobra dividida: "Preencher e enquadrar" cabe numa linha em 300px */
.ar-tvp-modo button {
  flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent;
  font: 600 12.5px/1.2 var(--ds-font); color: var(--ds-text-2); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ar-tvp-modo button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--ds-surface); color: var(--ds-text); }
.ar-tvp-modo button[aria-pressed="true"] { background: var(--ds-ink); color: #FFFFFF; cursor: default; }
.ar-tvp-modo button:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-tvp-modo button:disabled { opacity: .45; cursor: default; }
.ar-tvp-ctl { flex: none; display: flex; align-items: center; gap: 10px; min-height: 34px; }
.ar-tvp-ctl label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 600 13px var(--ds-font); color: var(--ds-text-2); }
.ar-tvp-zoom { flex: 1; min-width: 60px; margin: 0; accent-color: var(--ds-primary); cursor: pointer; }
.ar-tvp-zoom-v { flex: none; min-width: 40px; text-align: right; font: 600 13px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-tvp-centro {
  flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--ds-field); border-radius: 8px; background: var(--ds-surface);
  font: 600 13px var(--ds-font); color: var(--ds-text); cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.ar-tvp-centro:hover:not(:disabled) { background: var(--ds-hover); border-color: var(--ds-field-hover); }
.ar-tvp-centro:disabled, .ar-tvp-zoom:disabled { opacity: .45; cursor: default; }
.ar-tvp-nota { flex: none; font: 400 13px/1.45 var(--ds-font); color: var(--ds-muted); }

/* ---------------------------------------------------------------- TVs ligadas (cabecalho do Painel de TV) */
.ar-tv-status, .ar-tv-status .x-innerhtml {
  font: 600 13px/20px var(--ds-font) !important; color: var(--ds-muted) !important; text-align: right; white-space: nowrap;
}
.ar-tv-status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  background: #B8BFCA;
}
.ar-tv-status.on, .ar-tv-status.on .x-innerhtml { color: var(--ds-text) !important; }
.ar-tv-status.on::before { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* ---------------------------------------------------------------- telas estreitas */
@media (max-width: 1100px) {
  .ar-titulo, .ar-titulo .x-innerhtml { font-size: 22px !important; }
  .ar-dash-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
  .ar-dash-linha { grid-template-columns: 1fr !important; }
  .ar-btn-usuario { max-width: 160px !important; }
  .ar-btn-usuario .x-btn-inner { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
}
@media (max-width: 700px) {
  .ar-dash-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
  .ar-btn-usuario { max-width: 120px !important; }
}

/* inscricoes ao vivo */
/* "Atualizado as hh:nn:ss" no cabecalho de Inscricoes e Financeiro, que se
   atualizam sozinhos. Ponto verde = acompanhando; .off (cinza) = pausado. */
.ar-aovivo, .ar-aovivo .x-innerhtml {
  font: 600 13px/20px var(--ds-font) !important; color: var(--ds-muted) !important;
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ar-aovivo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); animation: arAoVivo 2.4s ease-in-out infinite;
}
.ar-aovivo.off::before { background: #B8BFCA; box-shadow: none; animation: none; }
.ar-aovivo:hover, .ar-aovivo:hover .x-innerhtml { color: var(--ds-text) !important; }
@keyframes arAoVivo { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, .05); } }
@media (prefers-reduced-motion: reduce) { .ar-aovivo::before { animation: none; } }

/* ================================================================ rodada 3 */
/* relatorios, retirada de kit e configuracoes (QR do WhatsApp) */

/* relatorios: a previa nunca passa do cartao sem barra de rolagem, o nome
   nao vira uma coluna de uma palavra por linha e a segunda linha da celula
   (CPF e nascimento embaixo do nome, celular embaixo do e-mail) sai menor */
.ar-rel-area > .x-panel-bodyWrap > .x-panel-body { overflow-x: auto !important; }
.ar-rel-previa td.nome { min-width: 170px; }
.ar-rel-previa td.num { white-space: nowrap; }
.ar-rel-previa td br { display: none; }
.ar-rel-previa td small { display: block; margin-top: 2px; font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); }
.ar-rel-previa td small span { white-space: nowrap; }
/* etiquetas na previa: o numero nao invade o nome e o rodape da etiqueta respeita o minimo de 13px */
.ar-etiqueta .num { line-height: 56px; }
.ar-etiqueta .pe { font-size: 13px; }

/* retirada de kit: tela de balcao, tem de caber inteira em 1366x768 - as duas
   listas ficam mais densas e a de candidatos perde a barra, que so trazia
   "N atletas" (o rodape ja conta) */
.ar-kit-card .ar-tb-barra { display: none; }
.ar-kit-card .ar-tb thead th, .ar-kit-log .ar-tb thead th { padding: 9px 12px; }
.ar-kit-card .ar-tb tbody td, .ar-kit-log .ar-tb tbody td { padding: 8px 12px; }
.ar-kit-card .ar-av, .ar-kit-log .ar-av { width: 24px; height: 24px; }
.ar-kit-card .ar-tb-pessoa, .ar-kit-log .ar-tb-pessoa { gap: 8px; }
.ar-kit-card .ar-tb-rodape, .ar-kit-log .ar-tb-rodape { min-height: 44px; padding: 5px 12px; }
.ar-kit-log .ar-tb-vazio { max-width: 760px; }
@container (max-height: 300px) {
  .ar-kit-card .ar-tb-vazio, .ar-kit-log .ar-tb-vazio { padding: 16px 24px; }
}

/* configuracoes > WhatsApp: area do QR Code (antes era style= no Pascal) */
.ar-qr-vazio {
  width: 100%; height: 100%; box-sizing: border-box; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 14px/1.5 var(--ds-font); color: var(--ds-muted);
}
.ar-qr-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* relatorios: titulo de coluna numerica alinhado com o valor (a direita) e
   texto curto (sexo, modalidade, categoria, camisa, situacao) sem quebrar no
   meio, nem o e-mail curto - quem cede largura e a segunda linha do nome */
.ar-rel-previa th.num { text-align: right; }
.ar-rel-previa td.curto { white-space: nowrap; }
.ar-rel-previa .mail { white-space: nowrap; }

/* tabelas: o CPF (coluna c-doc) nao quebra no traco, e a seta de ordenar do
   titulo desenha no espaco interno da direita em vez de alargar a coluna -
   titulo curto (peito, camisa, valor) deixava 16px sobrando em cada coluna,
   o que faltava para o nome caber numa linha em 1366 */
.ar-tb td.c-doc { white-space: nowrap; }
.ar-tb thead th .ar-tb-ord { margin-right: -16px; }

/* questionario e cupons */
/* aviso do minimo de R$ 5,00 do Asaas (aba Cupons do evento) */
.ar-aviso-minimo { color: var(--ds-primary) !important; font-weight: 600; line-height: 17px; }
/* detalhe da inscricao (Movimento > Inscricoes > Detalhes) */
.ar-det-inscricao { background: transparent; }
.ar-det-secao { background: #fff; border: 1px solid var(--ds-border, #e4e4e7); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.ar-det-secao h3 { margin: 0 0 10px 0; font-size: 15px; font-weight: 700; color: var(--ds-ink); }
.ar-det-linha { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #f0f1f3; font-size: 14px; }
.ar-det-linha span { color: #6b7280; }
.ar-det-linha b { text-align: right; color: var(--ds-ink); }
.ar-det-nota { color: #6b7280; font-size: 13px; padding-top: 6px; }
/* perguntas e respostas (uQuestionario.HtmlRespostasGestor) */
.ar-resp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ar-resp-item { border: 1px solid #e4e4e7; border-radius: 10px; padding: 10px 12px; background: #fff; }
.ar-resp-pergunta { font-size: 12px; line-height: 16px; color: #6b7280; }
.ar-resp-valor { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ds-ink); margin-top: 2px; overflow-wrap: anywhere; }
/* o detalhe da inscricao na fonte da casa: dentro do frame valia o Tahoma do Ext */
.ar-det-secao, .ar-det-secao h3, .ar-det-linha, .ar-det-linha span, .ar-det-linha b, .ar-det-nota,
.ar-resp-lista, .ar-resp-item, .ar-resp-pergunta, .ar-resp-valor { font-family: var(--ds-font); }
/* aba Cupons do evento, para caber em 1366x768: a tabela de cupons sem a barra
   de cima (o rodape ja conta os cupons) e "quem usou" densa, como as listas da
   retirada de kit (classes no proprio div .ar-tb, vindas do uTabelaDS.config.inc) */
.ar-tb-sembarra .ar-tb-barra { display: none; }
/* sem a barra sumia junto o recado de valor recusado (arTbAviso): enquanto ele dura, a barra volta */
.ar-tb-sembarra .ar-tb-barra:has(.ar-tb-aviso:not([hidden])) { display: flex; }
.ar-tb.ar-tb-compacta thead th { padding: 9px 12px; }
.ar-tb.ar-tb-compacta tbody td { padding: 8px 12px; }
.ar-tb-compacta .ar-av { width: 24px; height: 24px; }
.ar-tb-compacta .ar-tb-pessoa { gap: 8px; }
.ar-tb-compacta .ar-tb-rodape { min-height: 44px; padding: 5px 12px; }

/* pendencias finais */
/* treinos (Calendario de treinos): hora que nao e hora fica com borda e fundo
   de erro - o fundo separa o erro da borda vermelha do foco - e o icone de
   copiar dos botoes Duplicar e Copiar semana (mesmo padrao dos ar-ic-*) */
.ar-campo-erro .x-form-text-wrap-default, .ar-campo-erro .x-form-trigger-wrap-default {
  border-color: var(--ds-danger) !important; background: var(--ds-danger-bg) !important;
}
.ar-ic-copiar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 012-2h9'/%3E%3C/svg%3E"); }

/* tutorial guiado */
/* ============================================================================
   TUTORIAL GUIADO (adson-tema.js, bloco "tutorial guiado")

   Tela escurecida com um recorte em volta do ponto que importa (o SVG
   .ar-tour-veu, com o recorte de cantos redondos desenhado pelo script), o
   anel vermelho (.ar-tour-luz), quatro blocos transparentes que seguram o
   clique fora do recorte e o cartao do passo com a seta apontando. Fica acima
   das janelas do Ext (19000+) e abaixo das caixas de confirmacao
   (jquery-confirm), que a pessoa precisa conseguir responder.
   ========================================================================== */
.ar-tour-raiz { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 90000; font-family: var(--ds-font); }
.ar-tour-raiz.pausa > * { visibility: hidden !important; pointer-events: none !important; }
/* com o tutorial aberto, lista de combo, calendario e menu do Ext (que o Ext abre
   em 19000, no <body>) sobem acima do veu e do cartao, para a pessoa escolher com
   o mouse; o !important vence o z-index que o Ext escreve no elemento */
html.ar-tour-ativo body > .x-layer.x-boundlist, html.ar-tour-ativo body > .x-layer.x-menu,
html.ar-tour-ativo body > .x-layer.x-datepicker, html.ar-tour-ativo body > .x-layer.x-monthpicker,
html.ar-tour-ativo body > .x-layer.x-picker { z-index: 90005 !important; }
.ar-tour-bloco { position: fixed; left: 0; top: 0; width: 0; height: 0; background: transparent; }
.ar-tour-veu { position: fixed; left: 0; top: 0; pointer-events: none; transition: opacity .22s ease; }
.ar-tour-veu path { fill: rgba(11, 12, 15, .6); }
.ar-tour-raiz.entrando .ar-tour-veu, .ar-tour-raiz.saindo .ar-tour-veu { opacity: 0; }
.ar-tour-luz { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 10px; pointer-events: none; }
.ar-tour-luz::after {
  content: ''; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px;
  border: 2px solid var(--ds-primary); border-radius: 13px; animation: arTourPulso 1.6s ease-out infinite;
}
.ar-tour-luz.centro::after { opacity: 0; animation: none; }
.ar-tour-raiz.saindo .ar-tour-luz { opacity: 0; }
@keyframes arTourPulso {
  0% { box-shadow: 0 0 0 0 rgba(200, 22, 29, .45); }
  100% { box-shadow: 0 0 0 12px rgba(200, 22, 29, 0); }
}

.ar-tour-card {
  position: fixed; left: 50%; top: 50%; width: 372px; max-width: calc(100vw - 24px); box-sizing: border-box;
  border-radius: 14px; background: var(--ds-surface); color: var(--ds-text-2);
  box-shadow: var(--ds-shadow-3), 0 0 0 1px rgba(16, 24, 40, .06);
  opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, left .24s cubic-bezier(.2, .7, .2, 1), top .24s cubic-bezier(.2, .7, .2, 1);
}
.ar-tour-card.on { opacity: 1; transform: none; }
.ar-tour-card.saindo, .ar-tour-raiz.saindo .ar-tour-card { opacity: 0; transform: scale(.97); }
.ar-tour-card.pula { transition: opacity .2s ease, transform .2s ease; }
.ar-tour-card.sacode { animation: arTourSacode .32s ease; }
@keyframes arTourSacode { 25% { margin-left: -6px; } 50% { margin-left: 6px; } 75% { margin-left: -3px; } }
.ar-tour-corpo { position: relative; padding: 20px 20px 16px; border-radius: 14px; background: var(--ds-surface); overflow: hidden; }
.ar-tour-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ds-border-soft); }
.ar-tour-prog i { display: block; height: 100%; background: var(--ds-primary); transition: width .3s ease; }
.ar-tour-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ar-tour-selo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 11px/1.4 var(--ds-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-primary);
}
.ar-tour-passo { flex: 0 0 auto; font: 600 13px/1 var(--ds-font); color: var(--ds-muted); }
.ar-tour-card h3 { margin: 0 0 6px; font: 800 19px/1.25 var(--ds-font); letter-spacing: -.01em; color: var(--ds-text); }
.ar-tour-card p { margin: 0; font: 400 15px/1.55 var(--ds-font); color: var(--ds-text-2); }
.ar-tour-card p b { color: var(--ds-text); font-weight: 700; }
.ar-tour-nota {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  font: 500 13px/1.45 var(--ds-font); color: var(--ds-warn); background: var(--ds-warn-bg);
}
.ar-tour-acoes { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.ar-tour-dir { display: flex; gap: 8px; margin-left: auto; }
.ar-tour-card button, .ar-tour-oferta button {
  height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font: 700 14px/1 var(--ds-font); white-space: nowrap;
}
.ar-tour-prim { background: var(--ds-primary); color: #FFFFFF; }
.ar-tour-prim:hover { background: var(--ds-primary-hover); }
.ar-tour-sec { background: var(--ds-surface); border-color: var(--ds-field) !important; color: var(--ds-text); }
.ar-tour-sec:hover { background: var(--ds-hover); }
.ar-tour-sec:disabled { opacity: .4; cursor: default; background: var(--ds-surface); }
.ar-tour-card .ar-tour-pular {
  padding: 0 2px; background: transparent; color: var(--ds-muted); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.ar-tour-card .ar-tour-pular:hover { color: var(--ds-text); }
.ar-tour-card button:focus-visible, .ar-tour-oferta button:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-tour-seta {
  position: absolute; width: 14px; height: 14px; background: var(--ds-surface); transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .06);
}
.ar-tour-seta.bottom { top: -7px; margin-left: -7px; }
.ar-tour-seta.top { bottom: -7px; margin-left: -7px; }
.ar-tour-seta.right { left: -7px; margin-top: -7px; }
.ar-tour-seta.left { right: -7px; margin-top: -7px; }
.ar-tour-seta.nenhuma { display: none; }
.ar-tour-gira {
  display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; box-sizing: border-box;
  border: 2px solid var(--ds-border); border-top-color: var(--ds-primary); border-radius: 50%;
  animation: arTourGira .8s linear infinite;
}
@keyframes arTourGira { to { transform: rotate(360deg); } }

/* convite do primeiro acesso: canto de cima, embaixo do chip da conta */
.ar-tour-oferta {
  position: fixed; top: 68px; right: 16px; z-index: 90001; width: 380px; max-width: calc(100vw - 32px);
  box-sizing: border-box; padding: 18px 18px 16px; border-radius: 14px; background: var(--ds-surface);
  box-shadow: var(--ds-shadow-3), 0 0 0 1px rgba(16, 24, 40, .06); font-family: var(--ds-font);
  opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease;
}
.ar-tour-oferta.on { opacity: 1; transform: none; }
.ar-tour-oferta-topo { display: flex; gap: 14px; align-items: flex-start; }
.ar-tour-oferta-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: var(--ds-ink);
  display: flex; align-items: center; justify-content: center;
}
.ar-tour-oferta-ico svg { width: 24px; height: 24px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linejoin: round; }
.ar-tour-oferta-ico svg path { fill: var(--ds-primary); stroke: var(--ds-primary); }
.ar-tour-oferta h3 { margin: 1px 0 4px; font: 800 17px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-tour-oferta p { margin: 0; font: 400 14px/1.5 var(--ds-font); color: var(--ds-text-2); }
.ar-tour-oferta-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* manual: botao "Comecar tutorial" no alto de cada assunto (uAjuda.ComTutorial) e o
   "Fazer o tour completo" do cabecalho (btnTour, icone ar-ic-tour) */
.ar-ajuda-tour {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface);
}
.ar-ajuda-tour button {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--ds-primary); color: #FFFFFF; font: 700 14px/1 var(--ds-font); cursor: pointer; white-space: nowrap;
}
.ar-ajuda-tour button:hover { background: var(--ds-primary-hover); }
.ar-ajuda-tour button:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-ajuda-tour button::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ar-ajuda-tour span { flex: 1 1 220px; font: 400 14px/1.45 var(--ds-font); color: var(--ds-muted); }
.ar-ic-tour { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l5.5 3.5-5.5 3.5z'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .ar-tour-veu, .ar-tour-card, .ar-tour-oferta, .ar-tour-prog i { transition: none !important; }
  .ar-tour-luz::after, .ar-tour-card.sacode, .ar-tour-gira { animation: none !important; }
}
@media print {
  .ar-tour-raiz, .ar-tour-oferta, .ar-ajuda-tour { display: none !important; }
}

/* pendencias finais - treino */
/* lista do TUniCheckComboBox (Alunos do treino individual, primeiro uso no
   sistema): o uniGUI poe um <input type=checkbox> cru em cada item. Aqui ele
   fica igual as caixas do tema (18 px, canto 5, preta com o tique branco
   quando marcada) e o item marcado nao vira a faixa preta da lista simples -
   a caixa ja diz quem esta marcado; o fundo fica o da linha selecionada das
   tabelas. O clique vai para o item: quem marca e desmarca e o Ext
   (beforeselect/beforedeselect acertam o checked). */
.x-boundlist-item > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; pointer-events: none;
  width: 18px; height: 18px; margin: 0 10px 0 0; padding: 0; box-sizing: border-box;
  border: 1.5px solid #9CA3AF; border-radius: 5px; vertical-align: -4px;
  background: #FFFFFF no-repeat center / 12px 12px;
}
.x-boundlist-item-over > input[type="checkbox"] { border-color: var(--ds-text-2); }
.x-boundlist-item > input[type="checkbox"]:checked {
  background-color: var(--ds-ink); border-color: var(--ds-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5'/%3E%3C/svg%3E");
}
/* nome longo quebra ao lado da caixa, nao embaixo dela */
.x-boundlist-item:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; }
.x-boundlist-item:has(> input[type="checkbox"]) > input[type="checkbox"] { flex: none; margin-top: 1px; }
.x-boundlist-selected:has(> input[type="checkbox"]) { background: var(--ds-sel) !important; color: var(--ds-text) !important; }
.x-boundlist-selected.x-boundlist-item-over:has(> input[type="checkbox"]) { background: #FBE9E9 !important; }

/* onda 1 - movimento */
/* ============================================================================
   MOVIMENTO (onda 1 do plano So Treino, 29/09/2026) - padroes medidos no video
   quadro a quadro. Quem poe e tira as classes .ar-mv-* e o MOVIMENTO do
   adson-tema.js (bloco "onda 1 - movimento"). Regras:
   - so transform e opacity (excecoes: largura do cursor da aba, stroke da
     rosca e a altura da sanfona do menu, que e do proprio Ext)
   - fill "backwards": terminada a animacao nao sobra transform (o Ext e a
     tabela medem com getBoundingClientRect)
   - painel do Ext so translate; escala so dentro de HTML e em janela flutuante
   - movimento reduzido: entrada vira fade curto, lacos param, o anel do
     carregando continua girando
   - as tres regras antigas que travavam a opacidade (.x-mask e .jconfirm-bg
     com !important, e o reduzido geral) ficam onde estao: este bloco contorna
     cada uma sem reescrever nada acima
   ========================================================================== */
:root {
  --mv-passo: 65ms;
  --mv-std: cubic-bezier(.4, 0, .2, 1);
  --mv-sai: cubic-bezier(.25, .8, .25, 1);
  --mv-forte: cubic-bezier(.25, .8, .5, 1);
  --mv-cubic: cubic-bezier(.33, 1, .68, 1);
  --mv-quart: cubic-bezier(.25, 1, .5, 1);
  --mv-in: cubic-bezier(.4, 0, 1, 1);
}
@keyframes arMvLinha     { from { opacity: 0; transform: translateY(22px) scale(.96); } }
@keyframes arMvSobe      { from { opacity: 0; transform: translateY(24px); } }
@keyframes arMvSobeCurto { from { opacity: 0; transform: translateY(7px); } }
@keyframes arMvHero      { from { opacity: 0; transform: translateY(28px); } }
@keyframes arMvFade      { from { opacity: 0; } }
@keyframes arMvVeu       { from { filter: opacity(0); } }
@keyframes arMvLado      { from { opacity: 0; transform: translateX(var(--mv-dx, 48px)); } }
@keyframes arMvJanela    { from { opacity: 0; transform: scale(var(--mv-de, .85)); } }
@keyframes arMvDica      { from { opacity: 0; transform: translateY(-6px); } }
@keyframes arMvCresce    { from { transform: scaleY(0); } }
@keyframes arMvEnche     { from { transform: translateX(-100%); } }
@keyframes arMvVarre     { from { stroke-dashoffset: 100; } }
@keyframes arMvOnda      { from { transform: scale(0); opacity: .24; } to { transform: scale(1); opacity: 0; } }
@keyframes arMvBrilho      { 0% { transform: translateX(-160%) skewX(-20deg); } 20%, 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes arMvBrilhoCurto { 0% { transform: translateX(-160%) skewX(-20deg); } 14%, 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes arMvPing      { 0% { transform: scale(1); opacity: .6; } 33%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes arMvEsq       { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* entradas (M02 cascata de blocos, M03 lista escalonada, M04 heroi, M12 aba) */
.ar-mv-linha     { animation: arMvLinha .45s var(--mv-sai) backwards;  animation-delay: calc(var(--i, 0) * var(--mv-passo)); }
/* --mv-desde (negativo): a tabela redesenhou no meio da entrada e as linhas novas seguem de onde ela estava */
.ar-mv-linha-tb  { animation: arMvSobe .45s var(--mv-sai) backwards;   animation-delay: calc(var(--i, 0) * var(--mv-passo) + var(--mv-desde, 0ms)); }
.ar-mv-bloco     { animation: arMvSobe .55s var(--mv-std) backwards;  animation-delay: calc(var(--i, 0) * 90ms); }
.ar-mv-hero      { animation: arMvHero .55s var(--mv-sai) backwards; }
.ar-mv-hero-item { animation: arMvSobeCurto .32s var(--mv-sai) backwards; animation-delay: calc(.36s + var(--i, 0) * .16s); }
.ar-mv-fade      { animation: arMvFade .12s linear backwards; }
.ar-mv-aba       { animation: arMvLado .42s var(--mv-std) backwards; }
.ar-mv-janela    { animation: arMvJanela .25s var(--mv-sai) backwards; }
.ar-mv-janela.x-message-box { --mv-de: .5; }

/* flutuantes do Ext: cada show refaz a animacao (o Ext esconde por display).
   O veu esmaece por filter porque o opacity:1 !important do .x-mask (acima)
   venceria uma animacao de opacidade; carregando so aparece depois de 150ms,
   resposta rapida nao pisca o veu */
.x-mask { animation: arMvVeu .25s linear backwards; }
.x-mask:has(.x-mask-msg), .x-mask:has(+ .x-mask-msg) { animation-delay: .15s; }
.x-mask + .x-mask-msg { animation: arMvFade .2s linear .15s backwards; }
.x-css-shadow { display: none !important; }        /* a sombra ja esta no box-shadow da janela */
.x-tip { animation: arMvDica .16s var(--mv-sai) backwards; }
.x-menu.x-layer, .x-boundlist { animation: arMvFade .2s linear backwards; }

/* jquery-confirm do Falcon (TUniFSConfirm): sem o quique de 400ms; veu e caixa
   em 250ms. O jconfirm poe duracao e curva em style= na caixa: so !important vence.
   O veu da regra antiga fica opaco com !important; escondido (jconfirm-bg-h,
   antes de abrir e ao fechar) volta a 0, e a transicao faz o esmaecer */
.jconfirm .jconfirm-bg { transition: opacity .25s linear !important; }
.jconfirm.jconfirm-modern .jconfirm-bg.jconfirm-bg-h { opacity: 0 !important; }
.jconfirm .jconfirm-box { transition-duration: .25s !important; transition-timing-function: var(--mv-sai) !important; }
/* a caixa cresce no lugar, no centro, como no So Treino: o jconfirm (animateFromElement,
   que o Falcon nao desliga) a fazia voar 400ms do ultimo botao/aba/link apertado,
   as vezes de outra tela. Nenhum TUniFSConfirm e Draggable (o arrastar usa esse transform) */
.jconfirm .jconfirm-box-container { transform: none !important; transition: none !important; }
/* fechar (o jconfirm poe jconfirm-bg-h e a classe de saida juntos e remove tudo
   160ms depois): caixa e veu saem em 150ms, antes da remocao - sem o veu cortar
   no meio do esmaecer */
.jconfirm .jconfirm-bg.jconfirm-bg-h { transition-duration: .15s !important; }
.jconfirm .jconfirm-bg.jconfirm-bg-h ~ .jconfirm-scrollpane .jconfirm-box {
  transition-duration: .15s !important; transition-timing-function: var(--mv-in) !important;
}

/* menu lateral (M11): fundo entra rapido (.1s) e sai devagar (.22s, rastro);
   a faixa vermelha do ativo salta; o fundo do ativo assenta em .35s */
.ar-sidebar .x-treelist-row { transition: background-color .22s ease, box-shadow 0s; }
.ar-sidebar .x-treelist-item-over > .x-treelist-row { transition-duration: .1s, 0s; }
.ar-sidebar .x-treelist-item-selected > .x-treelist-row { transition-duration: .35s, 0s; }
.ar-sidebar .x-treelist-item-text { transition: color .12s ease; }
/* seta da sanfona (M10) desenhada por borda (independe do glifo do tema), na
   ponta direita da linha como no So Treino: v fechado, ^ aberto, gira 180 graus
   em 250ms junto com a sanfona. Na esquerda (ExpanderFirst) ela encostava no
   icone; sem o glifo a caixa ficava com altura 0 - volta aos 38px da linha */
.ar-sidebar .x-treelist-item-expander { height: 38px; left: auto !important; right: 4px !important; }
.ar-sidebar .x-treelist-item-expander::before { content: none !important; }
.ar-sidebar .x-treelist-item-expander::after {
  content: '' !important; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -5px 0 0 -4px;
  border: solid #7C8596; border-width: 0 2px 2px 0; background: none !important;
  transform: rotate(45deg); transition: transform .25s var(--mv-std), border-color .12s ease;
}
.ar-sidebar .x-treelist-item-expanded > .x-treelist-row .x-treelist-item-expander::after { transform: translateY(3px) rotate(225deg); border-color: #FFFFFF; }
.ar-sidebar .x-treelist-item-over > .x-treelist-row .x-treelist-item-expander::after { border-color: #FFFFFF; }

/* abas do Ext (M12): pilula preta que desliza ate a aba nova (o JS liga
   .ar-com-cursor e cria o span no fim do .x-box-target); rotulo troca de cor
   quando a pilula chega */
.x-tab-bar.ar-com-cursor .x-box-target > .ar-aba-cursor {
  position: absolute; left: 0; z-index: 0; border-radius: var(--ds-radius-sm); background: var(--ds-ink);
  box-shadow: 0 1px 3px rgba(17, 19, 24, .25); pointer-events: none;
  transition: transform .22s var(--mv-forte), width .22s var(--mv-forte);
}
.x-tab-bar.ar-com-cursor .x-tab-default { z-index: 1; background: transparent !important; }
.x-tab-bar.ar-com-cursor .x-tab-default.x-tab-active { border-color: transparent !important; box-shadow: none !important; }
.x-tab-bar.ar-com-cursor .x-tab-default.x-tab-over:not(.x-tab-active) { background: var(--ds-hover) !important; }
.x-tab-bar.ar-com-cursor .x-tab-default .x-tab-inner-default { transition: color .08s ease; }
.x-tab-bar.ar-com-cursor .x-tab-default.x-tab-active .x-tab-inner-default { transition: color .08s ease .14s; }

/* onda (M14, ripple): o JS cria o span dentro do alvo, no ponto do toque */
.ar-onda-caixa { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ar-onda { position: absolute; border-radius: 50%; background: currentColor; transform: scale(0); animation: arMvOnda .45s var(--mv-sai) forwards; }
.ar-aba, .ar-cards-novo, .ar-tb-pag, .ar-tr-acoes span, .ar-marcador { position: relative; }

/* estados (M13, M18): chips, pilulas e abas do painel 120ms; linha e pagina da tabela 100ms */
.ar-aba, .ar-marcador, .ar-tr-acoes span { transition-duration: .12s; }
.ar-tb tbody tr.ar-tl > td { transition: background-color .1s ease; }
.ar-tb-pag { transition: background-color .1s ease, color .1s ease, border-color .1s ease; }

/* graficos (M08): barras sobem juntas da base; rotulos no fim. --mv-atraso: o JS
   poe no bloco que entra em cascata, para o grafico crescer quando o bloco aparece */
.ar-graf-b, .ar-evo-graf rect { transform-box: fill-box; transform-origin: 50% 100%; animation: arMvCresce .7s var(--mv-quart) var(--mv-atraso, 0s) backwards; }
.ar-graf-v, .ar-evo-graf text { animation: arMvFade .2s linear calc(var(--mv-atraso, 0s) + .45s) backwards; }
/* rosca (onda 2): mascara com pathLength=100 girada -90deg, varrendo a partir das 12h */
.ar-rosca-varre { fill: none; stroke: #FFFFFF; stroke-dasharray: 100 100; animation: arMvVarre .8s var(--mv-cubic) var(--mv-atraso, 0s) backwards; }
/* barra de progresso / lotacao (M07): <div class="ar-prog"><i style="width:90.7%"></i></div>
   - o numero ja nasce final, a barra enche em 570ms */
.ar-prog { height: 10px; border-radius: 999px; background: var(--ds-surface-low); overflow: hidden; }
.ar-prog > i { display: block; height: 100%; border-radius: inherit; background: var(--ds-primary); animation: arMvEnche .57s var(--mv-cubic) var(--mv-atraso, 0s) backwards; }
/* --mv-pausa: o JS segura o crescimento do grafico que nasceu fora da vista */
.ar-graf-b, .ar-graf-v, .ar-evo-graf rect, .ar-evo-graf text, .ar-rosca-varre, .ar-prog > i { animation-play-state: var(--mv-pausa, running); }
/* redesenho ao vivo (Financeiro a cada 30 s): aparece sem crescer */
.ar-sem-entrada .ar-graf-b, .ar-sem-entrada .ar-graf-v, .ar-sem-entrada .ar-evo-graf rect, .ar-sem-entrada .ar-evo-graf text,
.ar-sem-entrada .ar-prog > i, .ar-sem-entrada .ar-rosca-varre { animation: none; }

/* lacos de atencao (M23/M24): uma peca por tela, no maximo */
.ar-brilho { position: relative; overflow: hidden; }
.ar-brilho::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
  transform: translateX(-160%) skewX(-20deg); animation: arMvBrilho 3.2s var(--mv-std) infinite;
}
.ar-brilho.curto::after { animation-name: arMvBrilhoCurto; }   /* selo NOVO: ~450ms no mesmo relogio de 3.2s */
.ar-brilho.cta::after { animation-duration: 2.9s; }             /* botao de acao: ~580ms a cada 2.9s */
.ar-ping { position: relative; }
.ar-ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; animation: arMvPing 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
/* esqueleto com onda (M05, so onde a espera e longa) */
.ar-esq { position: relative; overflow: hidden; background: #EEF0F3; border-radius: 6px; }
.ar-esq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: arMvEsq 1.5s linear infinite; }
/* aba do navegador escondida: laco nenhum gasta CPU */
.ar-mv-oculto .ar-brilho::after, .ar-mv-oculto .ar-ping::after, .ar-mv-oculto .ar-esq::after,
.ar-mv-oculto .ar-hero-halter, .ar-mv-oculto .ar-hero-marca-dagua { animation-play-state: paused !important; }

/* carregando (M05): arco que cresce e encolhe girando, 1.4 s (Material) */
@property --mv-arco { syntax: '<angle>'; inherits: false; initial-value: 20deg; }
@keyframes arMvArco { 0% { --mv-arco: 20deg; transform: rotate(0deg); } 50% { --mv-arco: 270deg; transform: rotate(250deg); } 100% { --mv-arco: 20deg; transform: rotate(720deg); } }
.x-mask-msg-text::before {
  border: 0 !important; background: conic-gradient(var(--ds-primary) var(--mv-arco), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: arMvArco 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* aviso rapido (M30, iziToast do Falcon: topCenter entra fadeInDown e sai fadeOut) -
   nao existe no So Treino; mesma linguagem das entradas */
.iziToast.fadeIn, .iziToast.fadeInUp, .iziToast.fadeInDown, .iziToast.fadeInLeft, .iziToast.fadeInRight {
  animation-duration: .25s !important; animation-timing-function: var(--mv-sai) !important;
}
.iziToast.bounceInLeft, .iziToast.bounceInRight, .iziToast.bounceInUp, .iziToast.bounceInDown, .iziToast.flipInX {
  animation-name: iziT-fadeInDown !important; animation-duration: .25s !important; animation-timing-function: var(--mv-sai) !important;
}
.iziToast.fadeOut, .iziToast.fadeOutUp, .iziToast.fadeOutDown, .iziToast.fadeOutLeft, .iziToast.fadeOutRight {
  animation-duration: .18s !important; animation-timing-function: var(--mv-in) !important;
}
/* titulo e texto do aviso (animateInside do Falcon) deslizavam por 1 s depois da caixa */
.iziToast .slideIn, .iziToast .revealIn { animation-duration: .3s !important; }

/* desligado neste navegador (localStorage arSemMov=1, para suporte) */
.ar-sem-mov .x-mask, .ar-sem-mov .x-mask-msg, .ar-sem-mov .x-tip, .ar-sem-mov .x-menu, .ar-sem-mov .x-boundlist,
.ar-sem-mov .ar-graf-b, .ar-sem-mov .ar-graf-v, .ar-sem-mov .ar-evo-graf rect, .ar-sem-mov .ar-evo-graf text,
.ar-sem-mov .ar-prog > i, .ar-sem-mov .ar-rosca-varre { animation: none !important; }
.ar-sem-mov .ar-brilho::after, .ar-sem-mov .ar-ping::after, .ar-sem-mov .ar-esq::after { display: none !important; }

/* movimento reduzido: a regra geral la do comeco ja tira transicao e animacao
   de todo elemento (* nao pega ::before/::after, entao o anel do carregando
   continua girando; grafico e rotulo, .ar-evo-graf text inclusive, ficam
   parados por ela). Aqui a entrada volta como fade curto (a especificidade
   maior vence o * com !important), sem atraso - so o --mv-desde da tabela
   que redesenhou no meio do fade - e os lacos em pseudo-elemento param */
@media (prefers-reduced-motion: reduce) {
  .ar-mv-linha, .ar-mv-linha-tb, .ar-mv-bloco, .ar-mv-hero, .ar-mv-hero-item, .ar-mv-aba, .ar-mv-janela, .ar-mv-fade {
    animation-name: arMvFade !important; animation-duration: .12s !important; animation-delay: var(--mv-desde, 0s) !important;
    animation-timing-function: linear !important; animation-fill-mode: backwards !important; animation-iteration-count: 1 !important;
  }
  .ar-sidebar .x-treelist-item-expander::after { transition: none !important; }
  .ar-brilho::after, .ar-ping::after, .ar-esq::after, .ar-onda-caixa { display: none !important; }
}

/* onda 1 - impacto */
/* ============================================================================
   IMPACTO (onda 1, 30/09/2026) - a camada forte que o Adson pediu por cima do
   MOVIMENTO: "quando eu passo o mouse por cima dar aquela ampliada, e quando
   eu abro uma tela as coisas irem se montando"; depois "rapido demais" (ritmo
   lento e visivel: peca de 450 a 650ms, escada de 65 a 120ms).
   - hover (so mouse): cartao, KPI, bloco, botao, chip, pagina, linha da
     tabela, item do menu e foto sobem e ampliam. O JS (bloco "onda 1 -
     impacto" do adson-tema.js) mede a folga ate a borda que corta e acerta
     --im-ox/--im-oy (origem), --im-esc e --im-sobe: o cartao encostado na
     borda cresce para dentro, nada fica cortado. A peca levantada continua
     cobrindo o lugar onde estava: cartao e KPI ganham uma ponte invisivel
     embaixo (do tamanho da subida); o resto sobe so o que cresce. Senao o
     ponteiro parado junto da borda de baixo saia da peca, ela descia, ele
     entrava de novo - e a peca tremia
   - montagem: o JS poe .ar-im-* com --im-d (atraso) em cada peca da tela que
     abriu: titulo e subtitulo entram da esquerda ja no primeiro quadro,
     botoes do cabecalho saltam da direita para a esquerda (a acao principal
     primeiro), filtros e campos sobem linha a linha, cartoes e blocos sobem,
     o fio do grupo se desenha e os numeros contam. As entradas do MOVIMENTO
     comecam depois do cabecalho (o JS adia pela Web Animations API) e andam
     na mesma curva daqui (--im-entra): uma linguagem so
   - hover usa translate/scale (propriedades separadas); entrada usa
     transform: um soma com o outro, nada salta no fim da entrada
   - so transform e opacity; fill backwards; reduzido = fade curto;
     .ar-sem-mov desliga. Duracoes so aqui (--im-t-*): o JS le daqui
   ========================================================================== */
:root {
  --im-entra: cubic-bezier(.25, 1, .5, 1);       /* entrada: sai firme e assenta devagar (a mesma do app) */
  --im-mola: cubic-bezier(.34, 1.56, .64, 1);    /* salto: passa um pouco do tamanho e volta */
  --im-suave: cubic-bezier(.2, .8, .2, 1);       /* hover */
  --im-t-hover: .22s;
  --im-t-titulo: .6s;
  --im-t-entra: .6s;
  --im-t-bloco: .65s;
  --im-t-pop: .52s;
  --im-t-campo: .5s;
  --im-t-fade: .4s;
  --im-t-lado: .48s;
  --im-t-fio: .8s;
  --im-sombra-cartao: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 18px -10px rgba(16, 24, 40, .24), 0 24px 40px -20px rgba(16, 24, 40, .32);
  --im-sombra-botao: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 16px -8px rgba(16, 24, 40, .32);
  --im-sombra-vermelha: 0 10px 20px -8px rgba(200, 22, 29, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  --im-sombra-preta: 0 10px 20px -8px rgba(17, 19, 24, .55);
  --im-sombra-chip: 0 6px 14px -8px rgba(16, 24, 40, .38);
}
@keyframes arImEsq     { from { opacity: 0; transform: translateX(calc(-1 * var(--im-dx, 32px))); } }
@keyframes arImPop     { from { opacity: 0; transform: scale(var(--im-de, .8)); } }
@keyframes arImSobe    { from { opacity: 0; transform: translateY(var(--im-dy, 28px)); } }
@keyframes arImCampo   { from { opacity: 0; transform: translateY(var(--im-dy, 18px)); } }
@keyframes arImDesce   { from { opacity: 0; transform: translateY(-12px); } }
@keyframes arImFade    { from { opacity: 0; } }
@keyframes arImFio     { from { transform: scaleX(0); } }

/* montagem: cada peca com o proprio atraso (--im-d, posto pelo JS) */
.ar-im-titulo { --im-dx: 22px; animation: arImEsq var(--im-t-titulo) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-sub    { --im-dx: 16px; animation: arImEsq var(--im-t-titulo) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-pop    { animation: arImPop var(--im-t-pop) var(--im-mola) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-sobe   { animation: arImSobe var(--im-t-entra) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-campo  { animation: arImCampo var(--im-t-campo) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-desce  { animation: arImDesce var(--im-t-campo) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-fade   { animation: arImFade var(--im-t-fade) linear backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-lado   { --im-dx: 18px; animation: arImEsq var(--im-t-lado) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
/* cabecalho de grupo da lista: o nome entra, o fio se desenha, o contador salta */
.ar-im-grupo > span { --im-dx: 18px; animation: arImEsq var(--im-t-lado) var(--im-entra) backwards; animation-delay: var(--im-d, 0ms); }
.ar-im-grupo > i    { transform-origin: 0 50%; animation: arImFio var(--im-t-fio) var(--im-entra) backwards; animation-delay: calc(var(--im-d, 0ms) + 100ms); }
.ar-im-grupo > em   { --im-de: .5; animation: arImPop var(--im-t-pop) var(--im-mola) backwards; animation-delay: calc(var(--im-d, 0ms) + 300ms); }
/* cartao da tabela sobe menos: as linhas dele ainda sobem 24px, 180ms depois */
.ar-tb-cartao.ar-im-sobe { --im-dy: 18px; }
/* as entradas do MOVIMENTO na mesma curva daqui (duracao e passo continuam os
   dele; o bloco, como a subida daqui, um pouco mais longo) */
.ar-mv-linha, .ar-mv-linha-tb, .ar-mv-hero, .ar-mv-hero-item { animation-timing-function: var(--im-entra); }
.ar-mv-bloco { animation-duration: var(--im-t-bloco); animation-timing-function: var(--im-entra); }

/* antes do primeiro quadro: o que vai entrar fica invisivel ate a montagem
   comecar (o JS monta o plano antes da primeira pintura; rede de 900ms) - sem
   piscar a tela pronta. Titulo e subtitulo nao: ja entram no show. Sem
   transicao: o opacity .15s do botao fazia ele aparecer esmaecendo. As
   entradas do MOVIMENTO tambem (a primeira da lista nao tem atraso e ia
   aparecer antes de o JS somar o atraso do cabecalho) */
.ar-im-prep .x-btn, .ar-im-prep .x-field,
.ar-im-prep .x-component.x-abs-layout-item:not(.ar-titulo):not(.ar-sub), .ar-im-prep .x-tab-bar, .ar-im-prep .ar-card, .ar-im-prep .ar-cartao,
.ar-im-prep .ar-cards-busca, .ar-im-prep .ar-cards-grupo, .ar-im-prep .ar-cards-vazio,
.ar-im-prep .ar-tb-barra, .ar-im-prep .ar-tb-cartao, .ar-im-prep .ar-tb-vazio,
.ar-im-prep .ar-aba, .ar-im-prep .ar-dash > .ar-bloco-tit, .ar-im-prep .ar-dash > .ar-tr-bloco,
.ar-im-prep .ar-mv-linha, .ar-im-prep .ar-mv-linha-tb, .ar-im-prep .ar-mv-bloco, .ar-im-prep .ar-mv-fade,
.ar-im-prep .ar-mv-hero, .ar-im-prep .ar-mv-hero-item, .ar-im-prep .ar-graf,
.ar-im-prep .x-autocontainer-innerCt > :not([class*="x-"]),
.ar-im-prep-menu .x-treelist-row, .ar-im-prep-menu .ar-titulo, .ar-im-prep-menu img, .ar-topo.ar-im-prep-menu .x-btn,
.ar-im-prep-el { opacity: 0 !important; transition: none !important; }
/* e parado: o translate da entrada nao cria barra de rolagem no primeiro quadro */
.ar-im-prep .ar-mv-linha, .ar-im-prep .ar-mv-linha-tb, .ar-im-prep .ar-mv-bloco, .ar-im-prep .ar-mv-hero,
.ar-im-prep .ar-mv-hero-item, .ar-im-prep-el .ar-mv-linha, .ar-im-prep-el .ar-mv-linha-tb, .ar-im-prep-el .ar-mv-bloco { transform: none !important; }
/* rolagem parada enquanto as pecas sobem, eixo por eixo: so no eixo em que
   a caixa nao rolava (vence o overflow-y: auto !important dos paineis do
   .ar-corpo); quem tinha barra de lado continua com ela */
.ar-im-semrolo-y.ar-im-semrolo-y.ar-im-semrolo-y { overflow-y: hidden !important; }
.ar-im-semrolo-x.ar-im-semrolo-x.ar-im-semrolo-x { overflow-x: hidden !important; }

/* ------------------------------------------------------------------ hover (so mouse) */
@media (hover: hover) and (pointer: fine) {
  .ar-cardev, .ar-kpi, .ar-bloco, .ar-evo-num, .ar-cards-novo, .ar-aba, .ar-marcador, .ar-tr-acoes span,
  .ar-tb-pag, .ar-tvp-centro, .x-btn { transform-origin: var(--im-ox, 50%) var(--im-oy, 50%); }

  /* cartoes (listas, eventos, Inicio): sobem e ampliam, sombra em camadas sem
     vazar para os lados (o espalhamento negativo segura a sombra embaixo) */
  .ar-cardev {
    --im-h-esc: 1.025; --im-h-sobe: 5px; --im-ponte: 1;
    transition: translate var(--im-t-hover) var(--im-suave), scale var(--im-t-hover) var(--im-suave),
                box-shadow var(--im-t-hover) var(--im-suave), border-color .15s ease;
  }
  .ar-cardev:hover {
    transform: none; translate: 0 calc(-1 * var(--im-sobe, 0px)); scale: var(--im-esc, 1.025);
    box-shadow: var(--im-sombra-cartao); border-color: #D3D8E0;
  }
  .ar-cardev.sel:hover { box-shadow: 0 0 0 2px rgba(200, 22, 29, .16), var(--im-sombra-cartao); border-color: var(--ds-primary); }
  .ar-cardev:active { transform: none; translate: 0 -1px; scale: calc(var(--im-esc, 1.025) - .03); transition-duration: .08s; }
  .ar-cardev-btn { transition: background-color .15s ease, scale var(--im-t-hover) var(--im-mola); }
  .ar-cardev:hover .ar-cardev-btn { scale: 1.06; }
  /* ponte: a area do hover desce junto o que a peca sobe (transparente, so para o ponteiro) */
  .ar-cardev:hover::before, .ar-kpi:hover::before {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--im-sobe, 0px);
  }

  /* KPIs e blocos do painel (o filho direto do .ar-dash nunca mexe: o uHome mede por ele) */
  .ar-kpi, .ar-evo-num {
    --im-h-esc: 1.03; --im-h-sobe: 4px;
    transition: translate var(--im-t-hover) var(--im-suave), scale var(--im-t-hover) var(--im-suave),
                box-shadow var(--im-t-hover) var(--im-suave), border-color .15s ease, background-color .15s ease, color .15s ease;
  }
  .ar-kpi { --im-ponte: 1; }
  .ar-bloco {
    --im-h-esc: 1.008; --im-h-sobe: 3px;
    transition: translate var(--im-t-hover) var(--im-suave), scale var(--im-t-hover) var(--im-suave),
                box-shadow var(--im-t-hover) var(--im-suave), border-color .15s ease;
  }
  .ar-kpi:hover, .ar-evo-num:hover, .ar-bloco:hover {
    translate: 0 calc(-1 * var(--im-sobe, 0px)); scale: var(--im-esc, 1.02);
    box-shadow: var(--im-sombra-cartao); border-color: #D3D8E0;
  }
  .ar-kpi-ok:hover { box-shadow: inset 0 3px 0 var(--ds-success), var(--im-sombra-cartao); }
  .ar-kpi-wait:hover { box-shadow: inset 0 3px 0 #D97706, var(--im-sombra-cartao); }
  .ar-dash > .ar-kpi:hover, .ar-dash > .ar-bloco:hover { translate: none; scale: none; }

  /* botoes do Ext: ampliam 3,5% e ganham sombra da propria cor (sobem so o que
     crescem: o botao corta o que passa dele, nao ha ponte); apertar = .97 */
  .x-btn:not(.x-item-disabled) {
    --im-h-esc: 1.035; --im-h-sobe: 2px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease,
                box-shadow var(--im-t-hover) var(--im-suave), translate var(--im-t-hover) var(--im-suave), scale var(--im-t-hover) var(--im-suave);
  }
  .x-btn:not(.x-item-disabled):hover { translate: 0 calc(-1 * var(--im-sobe, 0px)); scale: var(--im-esc, 1.035); }
  .x-btn:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: var(--im-sombra-botao) !important; }
  .x-btn.ar-btn-primario:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: var(--im-sombra-vermelha) !important; }
  .x-btn.ar-btn-escuro:not(.x-item-disabled):hover:not(:focus-visible),
  .x-btn.ar-btn-preto:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: var(--im-sombra-preta) !important; }
  .x-btn.ar-btn-zap-ico { --im-h-esc: 1.08; }
  .x-btn.ar-btn-usuario { --im-h-esc: 1.02; --im-h-sobe: 1px; }
  .x-btn.x-btn-pressed:not(.x-item-disabled) { transform: none; }
  .x-btn:not(.x-item-disabled):active { translate: 0 0; scale: .97; transition-duration: .08s; }
  /* calendario, lista de meses e envio de arquivo: sem ampliar */
  .x-datepicker .x-btn:hover, .x-monthpicker .x-btn:hover, .x-form-file-btn:hover,
  .x-datepicker .x-btn:active, .x-monthpicker .x-btn:active, .x-form-file-btn:active { translate: none; scale: none; }
  .x-datepicker .x-btn:not(.x-item-disabled):hover:not(:focus-visible),
  .x-monthpicker .x-btn:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: none !important; }

  /* chips, abas do painel, marcadores, atalhos, paginas, "+ Novo" */
  .ar-aba, .ar-marcador, .ar-tr-acoes span, .ar-tb-pag, .ar-tvp-centro, .ar-cards-novo {
    --im-h-esc: 1.05; --im-h-sobe: 2px;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease,
                box-shadow var(--im-t-hover) var(--im-suave), translate var(--im-t-hover) var(--im-suave), scale var(--im-t-hover) var(--im-suave);
  }
  .ar-cards-novo { --im-h-esc: 1.04; }
  .ar-aba:not(.sel):hover, .ar-marcador:hover, .ar-tr-acoes span:hover,
  .ar-tb-pag:hover:not(:disabled):not(.on), .ar-tvp-centro:hover:not(:disabled) {
    translate: 0 calc(-1 * var(--im-sobe, 0px)); scale: var(--im-esc, 1.05); box-shadow: var(--im-sombra-chip);
  }
  .ar-cards-novo:hover { translate: 0 calc(-1 * var(--im-sobe, 0px)); scale: var(--im-esc, 1.04); box-shadow: var(--im-sombra-vermelha); }
  .ar-aba:active, .ar-marcador:active, .ar-tr-acoes span:active, .ar-tb-pag:active:not(:disabled), .ar-cards-novo:active {
    transform: none; translate: 0 0; scale: .96; transition-duration: .08s;
  }
  /* folga para o hover junto da borda que corta: lista que comeca colada no
     topo da caixa (Eventos: 2px, o cartao da primeira fileira nao subia) e a
     fileira de abas do Inicio (colada no topo do painel) */
  .ar-cards-area > .ar-cards:first-child { margin-top: 6px; }
  .ar-dash > .ar-abas:first-child { padding-top: 5px; }

  /* menu lateral: icone e texto andam 4px para a direita (o fundo ja acende) */
  .ar-sidebar .x-treelist-item-text, .ar-sidebar .x-treelist-item-icon {
    transition: color .12s ease, translate var(--im-t-hover) var(--im-suave);
  }
  .ar-sidebar .x-treelist-row:hover .x-treelist-item-text, .ar-sidebar .x-treelist-row:hover .x-treelist-item-icon { translate: 4px 0; }

  /* linha da tabela: acende, ganha a faixa escura na esquerda e a sombra
     embaixo; nao sobe (a linha levantada saia de baixo do ponteiro e tremia) */
  .ar-tb tr.ar-tl { transition: box-shadow .18s var(--im-suave); }
  .ar-tb tr.ar-tl:hover { box-shadow: 0 10px 18px -12px rgba(16, 24, 40, .42); }
  .ar-tb tr.ar-tl:hover > td { background: #F5F6F8; }
  .ar-tb tr.ar-tl.sel:hover > td { background: #FBEBEB; }
  .ar-tb tr.ar-tl:hover > td:first-child { box-shadow: inset 3px 0 0 var(--ds-ink); }
  .ar-tb tr.ar-tl.sel:hover > td:first-child { box-shadow: inset 3px 0 0 var(--ds-primary); }
  .ar-tb tr.ar-tl:hover .ar-tb-abrir { color: var(--ds-text); }
  .ar-tb-abrir { transition: background-color .12s ease, color .12s ease, scale .18s var(--im-mola); }
  .ar-tb-abrir:hover { scale: 1.12; }

  /* fotos (evolucao do aluno): a imagem amplia dentro da moldura, que corta */
  .ar-evo-foto img, .ar-evo-item-foto img { transition: scale .45s var(--im-suave); }
  .ar-evo-item:hover .ar-evo-item-foto img, .ar-evo-foto:hover img { scale: 1.08; }
}

/* desligado (arSemMov=1) e movimento reduzido: sem ampliar nem levantar */
.ar-sem-mov .ar-cardev, .ar-sem-mov .ar-kpi, .ar-sem-mov .ar-bloco, .ar-sem-mov .ar-evo-num, .ar-sem-mov .ar-cards-novo,
.ar-sem-mov .ar-aba, .ar-sem-mov .ar-marcador, .ar-sem-mov .ar-tr-acoes span, .ar-sem-mov .ar-tb-pag, .ar-sem-mov .ar-tvp-centro,
.ar-sem-mov .x-btn, .ar-sem-mov .ar-tb tr.ar-tl, .ar-sem-mov .ar-cardev-btn, .ar-sem-mov .ar-tb-abrir,
.ar-sem-mov .ar-sidebar .x-treelist-item-text, .ar-sem-mov .ar-sidebar .x-treelist-item-icon,
.ar-sem-mov .ar-evo-foto img, .ar-sem-mov .ar-evo-item-foto img { translate: none !important; scale: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ar-im-titulo, .ar-im-sub, .ar-im-pop, .ar-im-sobe, .ar-im-campo, .ar-im-desce, .ar-im-fade, .ar-im-lado,
  .ar-im-grupo > span, .ar-im-grupo > i, .ar-im-grupo > em {
    animation-name: arMvFade !important; animation-duration: .12s !important; animation-delay: 0s !important;
    animation-timing-function: linear !important; animation-fill-mode: backwards !important; animation-iteration-count: 1 !important;
  }
  .ar-cardev, .ar-kpi, .ar-bloco, .ar-evo-num, .ar-cards-novo, .ar-aba, .ar-marcador, .ar-tr-acoes span, .ar-tb-pag, .ar-tvp-centro,
  .x-btn, .ar-tb tr.ar-tl, .ar-cardev-btn, .ar-tb-abrir, .ar-sidebar .x-treelist-item-text, .ar-sidebar .x-treelist-item-icon,
  .ar-evo-foto img, .ar-evo-item-foto img { translate: none !important; scale: none !important; }
}

/* blog: capa (previa a direita + botao do explorador) e editor sem HTML - uCadBlog */
.ar-capa-caixa { background: var(--ds-surface-low) !important; border: 1px dashed var(--ds-field) !important; border-radius: var(--ds-radius-sm) !important; overflow: hidden; }
.ar-capa-img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.ar-capa-escolher .x-btn-inner { display: inline-flex !important; align-items: center; gap: 8px; }
.ar-capa-escolher .x-btn-inner::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain; }
.ar-editor-post .x-html-editor-wrap { border-color: var(--ds-field) !important; border-radius: var(--ds-radius-sm); overflow: hidden; }

/* onda 2F - cadastros */
/* ============================================================================
   CADASTROS (onda 2F do plano So Treino, 01/10/2026)
   - estado vazio de toda lista em cartoes (uCartoes.HtmlVazio / HtmlNada):
     icone num circulo, titulo grande, o que e a tela e o que fazer, e a acao
     principal. A acao e um .ar-cards-novo (a mesma onda e o mesmo hover do
     "+ Novo") com .ar-brilho.cta - o unico laco da tela vazia. As classes
     .ar-cards-vazio / .ar-cards-nada ficam: a entrada (onda 1 - impacto) e o
     tutorial as procuram
   - icone pelo data-ic (o nome da lista no singular, sem acento)
   - Usuarios (htmlLista .ar-lista-pessoas): cartao de pessoa compacto - o
     avatar com as iniciais vem no lugar do selo, bolinha verde = ativo,
     desativado fica cinza - e o chip "8 colaboradores"
   - Planos (htmlLista .ar-lista-planos.ar-filtro-sit): pilulas Todos |
     Ativos | Inativos (o adson-tema.js desenha), valor mensal em pilula e o
     selo com bolinha "Ativo"
   ========================================================================== */
.ar-cards-vazio.ar-vz, .ar-cards-nada.ar-vz {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 46px 32px 42px; text-align: center; color: var(--ds-text-2);
  background: var(--ds-surface); border: 1px dashed #CDD3DC; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5l1.5-3h5'/%3E%3Cpath d='M5.6 5h12.8L21 13v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5z'/%3E%3C/svg%3E");
}
.ar-cards-nada.ar-vz[hidden] { display: none; }
.ar-vz-ic {
  position: relative; flex: none; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(150deg, #2B303A 0%, var(--ds-ink) 62%, #050608 100%);
  box-shadow: 0 14px 28px -14px rgba(17, 19, 24, .65), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ar-vz-ic::before {
  content: ''; width: 34px; height: 34px; background-color: currentColor;
  -webkit-mask: var(--vz-ic) no-repeat center / contain; mask: var(--vz-ic) no-repeat center / contain;
}
.ar-vz-nada .ar-vz-ic { color: var(--ds-muted); background: #F1F3F6; box-shadow: inset 0 0 0 1px var(--ds-border); }
.ar-vz-tit { max-width: 640px; font: 800 22px/1.25 var(--ds-font); color: var(--ds-text); letter-spacing: -.015em; overflow-wrap: anywhere; }
.ar-vz-txt { max-width: 600px; font: 500 16px/1.6 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ar-vz-txt b { font-weight: 700; color: var(--ds-text); }
.ar-cards-novo.ar-vz-acao {
  margin-top: 10px; padding: 12px 22px; border-radius: 12px; font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 20px -10px rgba(200, 22, 29, .6);
}
.ar-cards-novo.ar-vz-acao:hover { box-shadow: var(--im-sombra-vermelha, 0 10px 20px -8px rgba(200, 22, 29, .55)); }
.ar-vz-limpar {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px;
  font: 600 14px var(--ds-font); color: var(--ds-text); background: var(--ds-surface); border: 1px solid var(--ds-field);
  cursor: pointer; user-select: none; transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.ar-vz-limpar::before {
  content: ''; width: 14px; height: 14px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ar-vz-limpar:hover { background: var(--ds-surface-low); border-color: var(--ds-field-hover); }
.ar-vz-limpar:active { transform: translateY(1px); }
/* icones das listas (data-ic = nome no singular; sem par = a bandeja vazia de cima) */
.ar-vz[data-ic="plano"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5v6.7c0 .5.2 1 .6 1.4l7.8 7.8a2 2 0 002.8 0l6.3-6.3a2 2 0 000-2.8l-7.8-7.8A2 2 0 0011.3 3H4.5A1.5 1.5 0 003 4.5z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.6'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="colaborador"], .ar-vz[data-ic="usuario"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0113 0'/%3E%3Cpath d='M16 4.7a3.5 3.5 0 010 6.6M18.2 14.3A6.5 6.5 0 0121.5 20'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="modalidade"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="post"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="slide"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="playlist"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h12M4 11h12M4 16h6'/%3E%3Cpath d='M15 14v6l5-3z'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="pessoa"], .ar-vz[data-ic="aluno"], .ar-vz[data-ic="atleta"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16.2a3.4 3.4 0 016.4 0M14.5 10h3.5M14.5 13.5h3.5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="treino"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="busca"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M9 9l4 4M13 9l-4 4'/%3E%3C/svg%3E"); }

/* chip de contagem (So Treino "8 colaboradores", "10 planos") */
.ar-lista-pessoas .ar-cards-total, .ar-lista-planos .ar-cards-total {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; box-sizing: border-box; padding: 0 13px 0 11px;
  border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface);
  font: 700 13px var(--ds-font); color: var(--ds-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ar-lista-pessoas .ar-cards-total::before, .ar-lista-planos .ar-cards-total::before {
  content: ''; width: 16px; height: 16px; flex: none; background-color: var(--ds-muted);
  -webkit-mask: var(--vz-chip) no-repeat center / contain; mask: var(--vz-chip) no-repeat center / contain;
}
.ar-lista-pessoas .ar-cards-total { --vz-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0113 0'/%3E%3Cpath d='M16 4.7a3.5 3.5 0 010 6.6M18.2 14.3A6.5 6.5 0 0121.5 20'/%3E%3C/svg%3E"); }
.ar-lista-planos .ar-cards-total { --vz-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5v6.7c0 .5.2 1 .6 1.4l7.8 7.8a2 2 0 002.8 0l6.3-6.3a2 2 0 000-2.8l-7.8-7.8A2 2 0 0011.3 3H4.5A1.5 1.5 0 003 4.5z'/%3E%3Ccircle cx='7.8' cy='7.8' r='1.6'/%3E%3C/svg%3E"); }

/* Usuarios: cartao de pessoa compacto. O topo some (display: contents) e as
   pecas viram uma grade: avatar | nome | ABRIR, e as linhas embaixo do nome */
.ar-lista-pessoas .ar-cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ar-lista-pessoas .ar-cardev {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "av nome btn" "av linhas linhas";
  align-items: center; column-gap: 14px; row-gap: 6px; padding: 14px 16px 14px 14px;
}
.ar-lista-pessoas .ar-cardev-topo { display: contents; }
.ar-lista-pessoas .ar-cardev-esq { grid-area: av; align-self: start; display: block; }
.ar-lista-pessoas .ar-cardev-btn { grid-area: btn; align-self: start; padding: 6px 12px; }
.ar-lista-pessoas .ar-cardev-nome { grid-area: nome; font-size: 16px; line-height: 1.3; }
.ar-lista-pessoas .ar-cardev-linhas { grid-area: linhas; margin: 0; gap: 3px 12px; }
.ar-lista-pessoas .ar-cardev-linhas dt.larga { padding-top: 3px; }
.ar-lista-pessoas .ar-cardev-linhas dd.larga { margin-top: -2px; }
.ar-lista-pessoas .ar-selo.ar-av {
  position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  font: 700 16px/1 var(--ds-font); letter-spacing: .02em; color: #FFFFFF;
  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 14px -6px rgba(16, 24, 40, .45);
}
.ar-lista-pessoas .ar-selo.ar-av.ar-pes-ativo::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
  background: #16A34A; box-shadow: 0 0 0 2.5px #FFFFFF;
}
.ar-lista-pessoas .ar-selo.ar-av.ar-pes-off { background: #A3A9B4; box-shadow: 0 0 0 3px #FFFFFF; }
.ar-lista-pessoas .ar-cardev:has(.ar-pes-off) { background: #FBFBFC; }
.ar-lista-pessoas .ar-cardev:has(.ar-pes-off) .ar-cardev-nome { color: var(--ds-muted); }

/* Planos: selo com bolinha ("Ativo"), valor mensal em pilula e as pilulas
   Todos | Ativos | Inativos ao lado da busca (M13: cor em 180ms) */
.ar-selo.ar-sit-ativo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ar-lista-planos .ar-cardev-linhas dd[title^="R$"] {
  justify-self: start; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
  background: var(--ds-info-bg); color: var(--ds-info); font: 800 15px/1.4 var(--ds-font);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ar-filtro-sit .ar-cards-busca { flex-wrap: wrap; row-gap: 10px; }
.ar-filtro-sit .ar-cards-busca input { min-width: 220px; }
.ar-pilulas { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ar-pilulas > .ar-aba.ar-pilula {
  display: inline-flex; align-items: center; height: 40px; box-sizing: border-box; padding: 0 18px; border-radius: 999px;
  font: 600 14px var(--ds-font); color: #4B5361; background: var(--ds-surface); border: 1px solid var(--ds-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); cursor: pointer; user-select: none; white-space: nowrap; outline: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease,
              translate var(--im-t-hover, .22s) var(--im-suave, ease), scale var(--im-t-hover, .22s) var(--im-suave, ease);
}
.ar-pilulas > .ar-aba.ar-pilula:hover { border-color: var(--ds-field-hover); color: var(--ds-text); }
.ar-pilulas > .ar-aba.ar-pilula:not(.sel):hover { box-shadow: var(--im-sombra-chip, 0 6px 14px -8px rgba(16, 24, 40, .38)); }
.ar-pilulas > .ar-aba.ar-pilula.sel {
  background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; box-shadow: 0 4px 10px -4px rgba(17, 19, 24, .5);
}
.ar-pilulas > .ar-aba.ar-pilula:focus-visible { box-shadow: var(--ds-ring); }

/* onda 2A - inicio */
/* ============================================================================
   INICIO "HOJE" (onda 2A do plano So Treino, 01/10/2026) - uHome.pas
   O alto do Inicio virou o dia de hoje: heroi escuro (.ar-hero-dia) com a
   data, o bom dia, a frase do dia e tres numeros de vidro (.ar-hero-item);
   os atalhos (.ar-hj-acoes, os chips .ar-tr-acoes da onda 1); "Treinos de
   hoje" com AGORA / PROXIMA / passou (classes que o arHojeEstados do
   adson-tema.js poe e tira a cada 30 s) e, ao lado, minha agenda, vencendo
   hoje (o WhatsApp abre a cobranca COM pergunta da tela de Mensalidades),
   aniversariantes (hoje / mes, no navegador) e a proxima prova. As tres abas
   de antes ficam embaixo, sob o titulo "Panorama" (.ar-hj-pan).
   - movimento: so os ganchos da onda 1 - heroi M04, chips e cartoes em
     cascata (.ar-tr-acoes / .ar-bloco dentro do .ar-dash), barras M07
     (.ar-prog), selo AGORA com .ar-ping (um laco por tela)
   - o uHome mede a altura do quadro pelos filhos diretos do .ar-dash
     (offsetTop + offsetHeight): o .ar-dash vira o offsetParent deles
   - duas colunas; tres quando o quadro passa de 1300px; uma abaixo de 760px
     (container query no .ar-hj)
   - texto nunca corta: nome comprido quebra a linha (nada de reticencias)
   ========================================================================== */
.ar-dash { position: relative; }

/* icones (mascara na cor do texto, como os .ar-ic-* dos botoes) */
.ar-hj-ic {
  display: inline-block; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--hj-ic) no-repeat center / contain; mask: var(--hj-ic) no-repeat center / contain;
}
.ar-hj-ic.ic-relogio { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-agenda { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-conta { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-bolo { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-prova { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h12l-2.5 4L17 12H5'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-grafico { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5M13 17V8M18 17v-8'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-alunos { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 12 0v1M16 3.5a4 4 0 0 1 0 9M22 21v-1a6 6 0 0 0-4-5.6'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-treino { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9.5v5M20.5 9.5v5M6.5 12h11'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-aluno-mais { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 12 0v1M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-treino-mais { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-aviso { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h3l6 4V5L7 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E"); }

/* heroi do dia (M04: o MOVIMENTO poe .ar-mv-hero nele e .ar-mv-hero-item nos numeros) */
.ar-hero-dia {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: 22px 24px 24px; border-radius: 16px; color: #FFFFFF;
  background: linear-gradient(118deg, #111318 0%, #1A1D25 55%, #33090D 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 16px 32px -18px rgba(17, 19, 24, .6);
}
/* brilho vermelho do estudio e riscas finas, por baixo do texto (no ::before:
   o fundo do proprio heroi comeca no preto, que e a cor que o critico mede) */
.ar-hero-dia::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 130% at 100% 0%, rgba(200, 22, 29, .5) 0%, rgba(200, 22, 29, 0) 62%),
    radial-gradient(38% 90% at 0% 100%, rgba(200, 22, 29, .16) 0%, rgba(200, 22, 29, 0) 70%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 15px);
}
/* o fio vermelho da marca, na base */
.ar-hero-dia::after {
  content: ''; position: absolute; left: 24px; bottom: 0; width: 132px; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--ds-primary), rgba(200, 22, 29, 0)); pointer-events: none;
}
.ar-hd-txt { flex: 1 1 320px; min-width: 0; }
.ar-hd-data { font: 700 12px/1.4 var(--ds-font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ar-hd-oi { margin-top: 6px; font: 800 27px/1.15 var(--ds-font); letter-spacing: -.02em; color: #FFFFFF; }
.ar-hd-frase { margin-top: 6px; font: 400 15px/1.5 var(--ds-font); color: rgba(255, 255, 255, .86); overflow-wrap: anywhere; }
.ar-hd-frase b { font-weight: 700; color: #FFFFFF; }
.ar-hd-itens { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-hero-item {
  position: relative; flex: 1 1 auto; min-width: 140px; box-sizing: border-box; padding: 12px 16px 11px;
  border-radius: 12px; cursor: pointer; user-select: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ar-hero-item:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .7); }
.ar-hero-item > b { display: block; font: 800 28px/1.1 var(--ds-font); letter-spacing: -.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ar-hero-item > span { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 600 13px/1.3 var(--ds-font); color: rgba(255, 255, 255, .84); white-space: nowrap; }
.ar-hero-item .ar-hj-ic { width: 15px; height: 15px; }

/* atalhos do dia: os chips da onda 1 (hover que amplia, onda do toque,
   cascata) com o icone colorido; no hover o chip fica preto e o icone branco */
.ar-tr-acoes.ar-hj-acoes { justify-content: flex-end; margin: 14px 0 0; }
.ar-tr-acoes.ar-hj-acoes > span { display: inline-flex; align-items: center; gap: 8px; }
.ar-hj-acoes > span > .ar-hj-ic { width: 16px; height: 16px; color: var(--hj-cor, currentColor); transition: color .12s ease; }
.ar-hj-acoes > span:hover > .ar-hj-ic { color: #FFFFFF; }
.ar-hj-acoes > .c-aluno { --hj-cor: #1D4ED8; }
.ar-hj-acoes > .c-treino { --hj-cor: #15803D; }
.ar-hj-acoes > .c-mensal { --hj-cor: #B45309; }
.ar-hj-acoes > .c-aviso { --hj-cor: #7C3AED; }
.ar-hj-acoes > .c-evento { --hj-cor: var(--ds-primary); }
/* a onda do toque (spans que o MOVIMENTO cria dentro do chip) pegava o
   desenho de ".ar-tr-acoes span" - fundo, borda, padding, position relative -
   e o chip crescia no meio do toque: volta a ser so a onda */
.ar-tr-acoes span.ar-onda-caixa {
  position: absolute; inset: 0; padding: 0; margin: 0; border: 0; border-radius: inherit;
  background: none; box-shadow: none; translate: none; scale: none;
}
.ar-tr-acoes span.ar-onda {
  position: absolute; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: currentColor; box-shadow: none; translate: none; scale: none;
}

/* grade: 1 = treinos de hoje | 2 = minha agenda + vencendo | 3 = aniversariantes + proxima prova */
.ar-hj { container: arhj / inline-size; padding: 0 0 12px; }
.ar-hj-grade { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; }
.ar-hj-c1 { flex: 1.1 1 0; min-width: 0; }
.ar-hj-lado { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ar-hj-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* a proxima prova vem nos dois lugares e so um aparece: embaixo dos treinos
   em duas colunas (ficam da mesma altura) e na terceira coluna na tela larga */
.ar-hj-pv3 { display: none; }
@container arhj (min-width: 1300px) {
  .ar-hj-lado { flex: 2 1 0; flex-direction: row; align-items: flex-start; }
  .ar-hj-lado > .ar-hj-col { flex: 1 1 0; }
  .ar-hj-pv2 { display: none; }
  .ar-hj-pv3 { display: block; }
}
@container arhj (max-width: 760px) {
  .ar-hj-grade, .ar-hj-lado { flex-direction: column; align-items: stretch; }
  .ar-hj-c1, .ar-hj-lado { flex: none; }
  .ar-tr-acoes.ar-hj-acoes { justify-content: flex-start; }
  .ar-hd-itens { flex: 1 1 100%; }
}

/* cartoes do dia: cabecalho de 15px com icone colorido, contador cinza e link */
.ar-bloco.ar-hj-card { padding: 16px 18px 18px; overflow: visible; }
.ar-hj-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 26px; margin-bottom: 12px; }
.ar-hj-cab > .ar-hj-ic { color: var(--hj-cor, var(--ds-ink)); }
.ar-hj-cab > b { font: 700 15px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-hj-cab > em {
  font: 700 12px/1 var(--ds-font); font-style: normal; color: #4B5361; background: #F1F2F5;
  border-radius: 999px; padding: 4px 8px; font-variant-numeric: tabular-nums;
}
.ar-hj-cab > a {
  margin-left: auto; font: 600 13px/1.3 var(--ds-font); color: var(--ds-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; transition: color .12s ease;
}
.ar-hj-cab > a:hover { color: var(--ds-primary); }
.ar-hj-treinos { --hj-cor: #1D4ED8; }
.ar-hj-agenda { --hj-cor: #4338CA; }
.ar-hj-venc { --hj-cor: #B45309; }
.ar-hj-aniv { --hj-cor: #BE185D; }
.ar-hj-prova { --hj-cor: var(--ds-primary); }
.ar-hj-trs, .ar-hj-lista { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent; }
.ar-hj-trs::-webkit-scrollbar, .ar-hj-lista::-webkit-scrollbar { width: 6px; }
.ar-hj-trs::-webkit-scrollbar-thumb, .ar-hj-lista::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-hj-lista { max-height: 236px; }

/* treinos de hoje: linha com inicio/fim, nome, professor e lotacao (72x3) */
.ar-hj-trs { max-height: 310px; margin: 0 -6px; padding: 0 6px; }
.ar-hj-tr {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 11px 14px; cursor: pointer;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 10px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ar-hj-tr:last-child { margin-bottom: 0; }
.ar-hj-tr:hover { border-color: #D3D8E0; box-shadow: 0 6px 14px -10px rgba(16, 24, 40, .35); }
.ar-hj-tr .hr { flex: 0 0 48px; }
.ar-hj-tr .hr b { display: block; font: 700 15px/1.25 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-hj-tr .hr span { display: block; font: 500 13px/1.3 var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-hj-tr .tx { flex: 1 1 auto; min-width: 0; }
.ar-hj-tr .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 14px/1.35 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-hj-tr .sb { margin-top: 2px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-hj-tr .sb i { font-style: normal; }
.ar-hj-tr .sb i::before {
  content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 7px 0 8px; border-radius: 50%;
  background: currentColor; vertical-align: middle; opacity: .7;
}
.ar-hj-tr .cham.ok { color: var(--ds-success); font-weight: 600; }
.ar-hj-tr.agora .cham.falta, .ar-hj-tr.passou .cham.falta { color: var(--ds-warn); font-weight: 700; }
.ar-hj-tr .oc { flex: 0 0 72px; text-align: right; }
.ar-hj-tr .oc .n { font: 500 13px/1.3 var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-hj-tr .oc .n b { font: 700 14px var(--ds-font); color: var(--ds-text); }
.ar-hj-tr .oc .n.cheio b { color: var(--ds-danger); }
.ar-hj-tr .oc .livre { display: block; margin-top: 3px; font: 500 12px/1.3 var(--ds-font); color: var(--ds-muted); }
.ar-prog.ar-hj-ocup { width: 72px; height: 3px; margin: 6px 0 0 auto; background: #E5E7EB; }
.ar-prog.ar-hj-ocup > i { background: var(--ds-info); }
.ar-prog.ar-hj-ocup.cheio > i { background: var(--ds-danger); }
/* estados (arHojeEstados): AGORA verde, PROXIMA anil, o que passou esmaece -
   menos a chamada que falta, que e justamente o que ainda tem de ser feito */
.ar-hj-tr.agora { background: #F0FDF4; border-color: #BBF7D0; }
.ar-hj-tr.proxima { background: #EEF2FF; border-color: #C7D2FE; }
.ar-hj-tr.passou .hr, .ar-hj-tr.passou .nm, .ar-hj-tr.passou .oc, .ar-hj-tr.passou .sb > :not(.falta) { opacity: .5; }
.ar-hj-est {
  display: none; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px;
  font: 800 11px/1.1 var(--ds-font); font-style: normal; letter-spacing: .04em; color: #FFFFFF;
}
.ar-hj-est > span, .ar-hj-est > i { display: none; }
.ar-hj-est > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ar-hj-tr.agora .ar-hj-est { display: inline-flex; background: var(--ds-success); }
.ar-hj-tr.agora .ar-hj-est > .a, .ar-hj-tr.proxima .ar-hj-est > .p { display: inline; }
.ar-hj-tr.agora .ar-hj-est > i { display: inline-block; }
.ar-hj-tr.proxima .ar-hj-est { display: inline-flex; background: #4338CA; }

/* minha agenda */
.ar-hj-ag { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ds-border-soft); cursor: pointer; }
.ar-hj-ag:last-child { border-bottom: 0; }
.ar-hj-ag > b { flex: 0 0 48px; font: 700 15px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-hj-ag > div { min-width: 0; }
.ar-hj-ag > div > span { display: block; font: 600 14px/1.35 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; transition: color .12s ease; }
.ar-hj-ag > div > small { display: block; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-hj-ag:hover > div > span { color: var(--ds-primary); }

/* pessoas (vencendo hoje, aniversariantes): foto ou iniciais, nome e o resto */
.ar-hj-pes { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ds-border-soft); }
.ar-hj-pes:last-child { border-bottom: 0; }
.ar-hj-av {
  position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; background: #E9ECF1;
}
.ar-hj-av::before { content: attr(data-ini); font: 700 13px var(--ds-font); letter-spacing: .02em; color: #374151; }
.ar-hj-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-hj-pes > .tx { flex: 1 1 auto; min-width: 0; }
.ar-hj-pes > .tx > span { display: block; font: 600 14px/1.35 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-hj-pes > .tx > small { display: block; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-hj-pes > .tx > small b { font-weight: 700; color: #BE185D; }
.ar-hj-pes.hoje > .tx > span { color: #BE185D; }
.ar-hj-zap {
  --hj-zap: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E");
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, scale .18s var(--im-mola, ease);
}
.ar-hj-zap::before {
  content: ''; width: 20px; height: 20px; background-color: #1FAF54;
  -webkit-mask: var(--hj-zap) no-repeat center / contain; mask: var(--hj-zap) no-repeat center / contain;
}
.ar-hj-zap:hover { background: #E7F8EE; scale: 1.08; }
.ar-hj-mais { padding: 8px 0 0; font: 500 13px var(--ds-font); color: var(--ds-muted); }
/* aniversariantes: hoje ou o mes (arHojeAniv troca a classe .mes) */
.ar-hj-aniv.mes .so-hoje, .ar-hj-aniv:not(.mes) .so-mes { display: none !important; }

/* proxima prova */
.ar-hj-pv { cursor: pointer; }
.ar-hj-pv .nm { font: 700 16px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; transition: color .12s ease; }
.ar-hj-pv:hover .nm { color: var(--ds-primary); }
.ar-hj-pv .dt { margin-top: 3px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-hj-pv .dt b { font-weight: 700; color: var(--ds-text); }
.ar-hj-pv .ar-prog { margin-top: 14px; }
.ar-hj-pv .qt { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-hj-pv .qt b { font-weight: 700; color: var(--ds-text); }
.ar-hj-pv .sb { margin-top: 2px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }

/* vazio dos cartoes do dia: o que e e o que vai aparecer ali */
.ar-hj-vazio { padding: 6px 0 2px; font: 400 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-hj-vazio b { display: block; margin-bottom: 2px; font: 600 14px/1.4 var(--ds-font); color: var(--ds-text-2); }

/* "Panorama": titulo das tres abas de numeros, embaixo do dia de hoje */
.ar-dash > .ar-bloco-tit.ar-hj-pan {
  justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 6px 0 14px; padding: 18px 0 0; border-top: 1px solid var(--ds-border);
  font: 800 18px/1.3 var(--ds-font); letter-spacing: -.01em; text-transform: none; color: var(--ds-text);
}
.ar-dash > .ar-bloco-tit.ar-hj-pan::before { display: none; }
.ar-hj-pan > .ar-hj-ic { width: 20px; height: 20px; color: var(--ds-primary); }
.ar-hj-pan > span { font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }

/* onda 2A - navegacao */
/* ============================================================================
   NAVEGACAO (onda 2A do plano So Treino, 01/10/2026) - quem poe as marcas e o
   bloco "onda 2A - navegacao" do adson-tema.js.
   - menu por assunto: cabecalho de secao [data-ar-secao] (item do Main.dfm sem
     clique nem icone): 11,5px, 700, .12em, fio fino em cima, 28px. Cinza
     #7C8596 e nao o #6B7280 do So Treino: no menu preto o #6B7280 da 4,1:1
     (abaixo do minimo); este da 5,3:1
   - selo NOVO (.ar-selo-novo) discreto: pilula de vermelho translucido, letra
     pequena, sem brilho nem reflexo (pedido do dono em 23/10/2026)
   - "Buscar aluno..." no topo (.ar-busca-topo): pilula clara; no foco fica
     branca com o anel vermelho e sombra (M17: 150-200ms)
   - sino (.ar-btn-sino) com o selo de nao vistas (atributo data-n: classe
     posta de fora o Ext apagaria) que pulsa e o sino balanca quando chega
     coisa nova (data-pulso)
   - painel do sino (.ar-notif-painel): cartao branco de 340px, cantos de 12px,
     seta para o sino; abre com fade e leve deslize/escala em 180ms, fecha em
     120ms; esqueleto enquanto carrega; itens em cascata curta; hover
   - tela Ver todas: o cartao que chegou depois da ultima olhada ganha a faixa
     e o ponto vermelhos (.ar-notif-nova no selo)
   ========================================================================== */

/* ---------------------------------------------------------------- menu: secoes */
.ar-sidebar .x-treelist-item[data-ar-secao] { pointer-events: none; }
.ar-sidebar .x-treelist-item[data-ar-secao] > .x-treelist-row {
  margin: 10px 8px 0 !important; padding-top: 2px; border-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .10) !important; background: transparent !important; box-shadow: none !important;
}
.ar-sidebar .x-treelist-item[data-ar-secao] .x-treelist-item-icon,
.ar-sidebar .x-treelist-item[data-ar-secao] .x-treelist-item-expander { display: none !important; }
.ar-sidebar .x-treelist-item[data-ar-secao] .x-treelist-item-text {
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .12em !important;
  color: #7C8596 !important; line-height: 26px !important; padding-left: 0 !important; text-transform: uppercase;
}

/* ---------------------------------------------------------------- menu: selo NOVO */
.ar-selo-novo {
  display: inline-block; vertical-align: middle; margin: -2px 0 0 8px; padding: 0 6px; border-radius: 999px;
  font: 700 10px/16px var(--ds-font); letter-spacing: .08em; text-transform: uppercase; color: #F0A3A0;
  background: rgba(224, 49, 43, .14); border: 1px solid rgba(224, 49, 43, .30);
  box-shadow: none;
}

/* ---------------------------------------------------------------- busca de aluno no topo */
.ar-busca-topo .x-form-trigger-wrap-default {
  border-radius: 999px !important; background: var(--ds-surface-low) !important; border-color: var(--ds-border) !important;
  box-shadow: none !important;
  transition: background-color .18s var(--mv-sai, ease), border-color .18s var(--mv-sai, ease), box-shadow .18s var(--mv-sai, ease);
}
.ar-busca-topo .x-form-trigger-wrap-default:hover { background: #F1F2F5 !important; border-color: var(--ds-field) !important; }
.ar-busca-topo.x-field-focus .x-form-trigger-wrap-default, .ar-busca-topo .x-form-trigger-wrap-default:focus-within {
  background: #FFFFFF !important; border-color: var(--ds-primary) !important;
  box-shadow: var(--ds-ring), 0 8px 18px -12px rgba(16, 24, 40, .35) !important;
}
.ar-busca-topo .x-form-text-wrap-default input, .ar-busca-topo input.x-form-text-default {
  padding-left: 40px !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 15px center / 16px 16px !important;
}

/* ---------------------------------------------------------------- sino */
@keyframes arNotifPulso   { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(.9); } 78% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes arNotifAnel    { 0% { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 2px rgba(224, 49, 43, .55); } 100% { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 12px rgba(224, 49, 43, 0); } }
@keyframes arNotifBalanca { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.ar-btn-sino.x-btn {
  background: #FFFFFF !important; border: 1px solid var(--ds-border) !important; border-radius: 999px !important;
  box-shadow: var(--ds-shadow) !important; min-width: 40px !important; padding: 0 !important; overflow: visible !important;
}
.ar-btn-sino.x-btn .x-btn-wrap, .ar-btn-sino.x-btn .x-btn-button { background: transparent !important; }
.ar-btn-sino.x-btn:hover, .ar-btn-sino.x-btn[data-aberto] { background: var(--ds-hover) !important; }
.ar-btn-sino.x-btn[data-aberto] { border-color: var(--ds-field) !important; }
.ar-btn-sino .x-btn-inner { display: none !important; }
.ar-btn-sino .x-btn-button { position: relative; display: flex !important; align-items: center; justify-content: center; }
.ar-btn-sino .x-btn-button::before { display: none !important; }
.ar-btn-sino .x-btn-button::after {
  content: ''; width: 20px; height: 20px; display: block; background-color: #4B5361; transform-origin: 50% 12%;
  transition: background-color .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 003.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 003.4 0'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ar-btn-sino.x-btn:hover .x-btn-button::after, .ar-btn-sino.x-btn[data-aberto] .x-btn-button::after { background-color: var(--ds-text); }
/* selo de nao vistas: o texto vem do atributo (99+ no maximo) */
.ar-btn-sino.x-btn::after {
  content: attr(data-n); position: absolute; top: -6px; right: -7px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: #E0312B; color: #FFFFFF; font: 700 11.5px/20px var(--ds-font); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #FFFFFF; pointer-events: none;
  transform: scale(0); opacity: 0; transition: transform .22s var(--im-mola, ease), opacity .15s ease;
}
.ar-btn-sino.x-btn[data-n]:not([data-n="0"])::after { transform: scale(1); opacity: 1; }
.ar-btn-sino.x-btn[data-pulso]::after { animation: arNotifPulso .7s var(--mv-std, ease) both, arNotifAnel .9s ease-out both; }
.ar-btn-sino.x-btn[data-pulso] .x-btn-button::after { animation: arNotifBalanca .8s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .x-btn.ar-btn-sino { --im-h-esc: 1.08; } }

/* ---------------------------------------------------------------- painel do sino */
@keyframes arNotifAbre  { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes arNotifFecha { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.ar-notif-painel {
  position: fixed; z-index: 90010; box-sizing: border-box; width: 340px;   /* acima do convite do tour (90001) */
  background: #FFFFFF; border: 1px solid var(--ds-border); border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(16, 24, 40, .30), 0 4px 12px rgba(16, 24, 40, .08);
  font-family: var(--ds-font); color: var(--ds-text-2); text-align: left;
  transform-origin: calc(100% - var(--ar-seta, 24px)) -8px;
  animation: arNotifAbre .18s var(--mv-sai, ease-out) both;
}
.ar-notif-painel.ar-fechando { animation: arNotifFecha .12s var(--mv-in, ease-in) forwards; pointer-events: none; }
.ar-notif-painel::before {
  content: ''; position: absolute; top: -7px; right: calc(var(--ar-seta, 24px) - 6px); width: 12px; height: 12px;
  background: #FFFFFF; border: solid var(--ds-border); border-width: 1px 0 0 1px; border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.ar-notif-cab { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--ds-border-soft); }
.ar-notif-cab b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-notif-qt {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: #E0312B; color: #FFFFFF; font: 700 11.5px/20px var(--ds-font); text-align: center; font-variant-numeric: tabular-nums;
}
.ar-notif-qt[hidden] { display: none; }
.ar-notif-todas { margin-left: auto; font: 600 13px var(--ds-font); color: var(--ds-primary); text-decoration: none; cursor: pointer; }
.ar-notif-todas:hover { text-decoration: underline; }
.ar-notif-lista {
  max-height: min(380px, calc(100vh - 190px)); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-notif-lista::-webkit-scrollbar { width: 6px; }
.ar-notif-lista::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-notif-item {
  position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 18px;
  border-bottom: 1px solid var(--ds-border-soft); cursor: pointer; outline: none;
  transition: background-color .12s ease;
}
.ar-notif-item:last-child { border-bottom: 0; }
.ar-notif-item:hover, .ar-notif-item:focus-visible { background: #F5F6F8; }
.ar-notif-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(200, 22, 29, .25); }
.ar-notif-item.ar-nova { background: #FFF6F6; }
.ar-notif-item.ar-nova:hover { background: #FDEDED; }
.ar-notif-item.ar-nova::before { content: ''; position: absolute; left: 6px; top: 25px; width: 6px; height: 6px; border-radius: 50%; background: #E0312B; }
.ar-notif-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  transition: transform .18s var(--im-mola, ease);
}
.ar-notif-item:hover .ar-notif-ico { transform: scale(1.08); }
.ar-notif-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ar-notif-ico.k-presenca    { background: #DCFCE7; color: #15803D; }
.ar-notif-ico.k-confirmou   { background: #DBEAFE; color: #1D4ED8; }
.ar-notif-ico.k-inscricao   { background: #FDE8E8; color: #C8161D; }
.ar-notif-ico.k-conta       { background: #EDE9FE; color: #6D28D9; }
.ar-notif-ico.k-lgpd        { background: #FEF3C7; color: #B45309; }
.ar-notif-ico.k-mensalidade { background: #D1FAE5; color: #047857; }
.ar-notif-ico.k-avaliacao   { background: #FEF9C3; color: #A16207; }
.ar-notif-ico.k-postagem    { background: #E0F2FE; color: #0369A1; }
.ar-notif-txt { flex: 1; min-width: 0; font: 400 13.5px/1.4 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ar-notif-txt b { font-weight: 700; color: var(--ds-text); }
.ar-notif-txt small { display: block; margin-top: 3px; font: 500 13px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-notif-rodape {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px;
  border-top: 1px solid var(--ds-border-soft); border-radius: 0 0 11px 11px;
  font: 600 13px var(--ds-font); color: var(--ds-primary); text-decoration: none; cursor: pointer;
  transition: background-color .12s ease;
}
.ar-notif-rodape:hover { background: var(--ds-surface-low); }
.ar-notif-rodape i { width: 6px; height: 6px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .15s ease; }
.ar-notif-rodape:hover i { transform: translateX(2px) rotate(45deg); }
/* carregando: esqueleto (o brilho e o .ar-esq da onda 1) */
.ar-notif-esq { cursor: default; }
.ar-notif-esq:hover { background: transparent; }
.ar-notif-esq .ar-notif-ico { border-radius: 10px; }
.ar-esq-l1, .ar-esq-l2 { display: block; height: 11px; border-radius: 6px; }
.ar-esq-l1 { width: 92%; margin-top: 4px; }
.ar-esq-l2 { width: 56%; margin-top: 9px; }
/* vazio e erro */
.ar-notif-vazio { padding: 26px 22px; text-align: center; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-notif-vazio-ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  background: var(--ds-surface-low); color: var(--ds-muted); box-shadow: inset 0 0 0 1px var(--ds-border);
}
.ar-notif-vazio-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-notif-erro { color: var(--ds-danger); }
/* os itens chegam em cascata curta (M03 no tamanho do painel) */
.ar-notif-lista.ar-entra .ar-notif-item { animation: arMvSobeCurto .22s var(--mv-sai, ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }

/* ---------------------------------------------------------------- tela Ver todas (uNotificacoes) */
.ar-cardev:has(.ar-notif-nova) { border-color: #F2C4C2; box-shadow: inset 3px 0 0 #E0312B, var(--ds-shadow); }
.ar-selo.ar-notif-nova::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #E0312B; }
.ar-vz[data-ic="notificacao"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 003.4 0'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- desligado e movimento reduzido */
.ar-sem-mov .ar-notif-painel, .ar-sem-mov .ar-notif-lista .ar-notif-item,
.ar-sem-mov .ar-btn-sino.x-btn::after, .ar-sem-mov .ar-btn-sino .x-btn-button::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ar-notif-painel { animation: arMvFade .12s linear both; }
  .ar-notif-painel.ar-fechando { animation: none; }
  .ar-notif-lista.ar-entra .ar-notif-item { animation: none; }
  .ar-btn-sino.x-btn[data-pulso]::after, .ar-btn-sino.x-btn[data-pulso] .x-btn-button::after { animation: none !important; }
}
/* alunos sem CPF */
/* ============================================================================
   ALUNOS SEM CPF (script 28, 01/10/2026) - 105 dos 139 alunos importados do
   So Treino vieram sem CPF e todos sem sexo. A dica embaixo do CPF na ficha
   de Alunos (uCadAtleta, lblCpfDica: some quando o CPF ja esta gravado) e o
   destaque do que falta no cartao (TCartoes.Linha com AClasse = ar-falta:
   "Sem CPF", "Sem celular", Sexo "A informar").
   ========================================================================== */
.ar-dica-cpf, .ar-dica-cpf .x-innerhtml {
  font-size: 12.5px !important; line-height: 16px !important; font-weight: 600 !important;
  color: var(--ds-warn) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-cardev-linhas dd.ar-falta {
  justify-self: start; color: var(--ds-warn); background: var(--ds-warn-bg); font-weight: 700;
  border-radius: 999px; padding: 0 9px; line-height: 20px;
}

/* alunos: cartoes | tabela */
/* ============================================================================
   CARTOES | TABELA (pedido de 01/10/2026 em Alunos: "as vezes quero ver em
   tabela ou em cards") - uCartoes com ComTabela: a troca .ar-vista ao lado da
   busca e a tabela .ar-vt-tabela feita dos mesmos cartoes. Quem troca e o
   bloco de mesmo nome do adson-tema.js (classe .ar-vista-tabela na
   .ar-cards-area). Na tabela a area vira coluna: a busca fica parada em cima
   e a tabela rola dentro do proprio cartao, com o cabecalho preso; na tela
   estreita ela rola tambem de lado (a coluna do nome fica parada).
   ========================================================================== */
.ar-vista {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface-low);
}
.ar-vista-bt {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ds-muted);
  font: 600 13px var(--ds-font); white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.ar-vista-bt svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ar-vista-bt:hover { color: var(--ds-text); }
.ar-vista-bt[aria-pressed="true"] {
  background: var(--ds-surface); color: var(--ds-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .10);
}
.ar-vista-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }

/* as duas vistas: os cartoes de sempre ou a tabela */
.ar-vt-rolo { display: none; }
.ar-vt.ar-vista-tabela { display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }
.ar-vt.ar-vista-tabela > .ar-cards-busca { flex: none; }
.ar-vt.ar-vista-tabela > .ar-cards, .ar-vt.ar-vista-tabela > .ar-cards-grupo { display: none !important; }
.ar-vt.ar-vista-tabela > .ar-vt-rolo {
  display: block; flex: 0 1 auto; min-height: 0; overflow: auto;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
}
.ar-vt.ar-vista-tabela > .ar-vt-rolo[hidden] { display: none; }
.ar-vt.ar-vista-tabela > .ar-cards-nada { flex: none; }
.ar-vt-rolo::-webkit-scrollbar { width: 8px; height: 8px; }
.ar-vt-rolo::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }

.ar-vt-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 500 14px var(--ds-font); color: var(--ds-text-2);
}
.ar-vt-tabela thead th {
  position: sticky; top: 0; z-index: 2; padding: 0; text-align: left; white-space: nowrap;
  background: var(--ds-surface-low); border-bottom: 1px solid var(--ds-border);
}
.ar-vt-ord {
  display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px;
  border: 0; background: transparent; text-align: left; cursor: pointer; white-space: nowrap;
  font: 600 12px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted);
}
.ar-vt-ord::after {
  content: ''; flex: none; width: 0; height: 0; opacity: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: opacity .15s ease, transform .15s ease;
}
.ar-vt-ord:hover { color: var(--ds-text-2); }
.ar-vt-ord:hover::after { opacity: .45; }
.ar-vt-tabela th[aria-sort="ascending"] .ar-vt-ord, .ar-vt-tabela th[aria-sort="descending"] .ar-vt-ord { color: var(--ds-text); }
.ar-vt-tabela th[aria-sort="ascending"] .ar-vt-ord::after { opacity: 1; transform: rotate(180deg); }
.ar-vt-tabela th[aria-sort="descending"] .ar-vt-ord::after { opacity: 1; }
.ar-vt-ord:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: -2px; border-radius: 6px; }
.ar-vt-tabela thead th.ar-vt-acao { width: 1%; }
.ar-vt-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ar-vt-tabela tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--ds-border-soft); white-space: nowrap; vertical-align: middle;
  background: var(--ds-surface); transition: background-color .12s ease;
}
/* texto comprido corta com reticencias; o title da celula mostra inteiro */
.ar-vt-c { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-vt-nome .ar-vt-c { max-width: 300px; }
.ar-vt-tabela td.ar-vt-nome { font-weight: 700; color: var(--ds-text); }
.ar-vt-tabela td.ar-vt-nome small { font-weight: 600; color: var(--ds-muted); }
.ar-vt-tabela td.ar-vt-vazio { color: var(--ds-faint); }
/* a coluna do nome fica parada quando a tabela rola de lado */
.ar-vt-tabela th.ar-vt-nome, .ar-vt-tabela td.ar-vt-nome { position: sticky; left: 0; }
.ar-vt-tabela td.ar-vt-nome { z-index: 1; box-shadow: 1px 0 0 var(--ds-border-soft); }
.ar-vt-tabela thead th.ar-vt-nome { z-index: 3; }
.ar-vt-linha { cursor: pointer; }
.ar-vt-linha:hover td { background: var(--ds-hover); }
.ar-vt-linha.sel td { background: var(--ds-sel); }
.ar-vt-linha.sel td:first-child { box-shadow: inset 3px 0 0 var(--ds-primary), 1px 0 0 var(--ds-border-soft); }
.ar-vt-linha[hidden], .ar-vt-gr[hidden] { display: none; }
.ar-vt-grupo th {
  position: static; padding: 9px 12px; text-align: left; white-space: nowrap;
  background: var(--ds-surface-low); border-bottom: 1px solid var(--ds-border);
  font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text);
}
.ar-vt-grupo em {
  margin-left: 8px; padding: 1px 8px; border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface);
  font: 600 12px var(--ds-font); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ds-muted);
}
.ar-vt-tabela td.ar-vt-acao { width: 1%; padding: 6px 12px 6px 4px; text-align: right; }
.ar-vt-abrir {
  margin: 0; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--ds-ink); color: #FFFFFF;
  font: 600 12px var(--ds-font); cursor: pointer; transition: background-color .15s ease;
}
.ar-vt-linha:hover .ar-vt-abrir { background: var(--ds-primary); }
.ar-vt-abrir:focus-visible { outline: none; background: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-vt-tabela .ar-selo { white-space: nowrap; }
/* o que falta e o vencimento, nas duas vistas */
.ar-vt-tabela td.ar-falta { color: var(--ds-warn); font-weight: 700; }
.ar-vt-tabela td.ar-venc-atraso, .ar-cardev-linhas dd.ar-venc-atraso { color: var(--ds-danger); font-weight: 700; }
.ar-vt-tabela td.ar-venc-perto, .ar-cardev-linhas dd.ar-venc-perto { color: var(--ds-warn); font-weight: 700; }
/* tela de notebook (1366): menos folga e o texto comprido corta antes */
@media (max-width: 1500px) {
  .ar-vt-tabela { font-size: 13px; }
  .ar-vt-tabela tbody td { padding: 9px 9px; }
  .ar-vt-ord { padding: 10px 9px; }
  .ar-vt-c { max-width: 170px; }
  .ar-vt-nome .ar-vt-c { max-width: 210px; }
  .ar-vt-abrir { padding: 5px 10px; }
}

/* sotreino despesas */
/* ============================================================================
   DESPESAS E CONTAS A PAGAR (onda 3, modulo 3.1 do plano So Treino, 19/10/2026)
   Gestor\Movimento\uDespesas.pas e o cartao "Despesas de hoje" do Inicio (uHome).
   - periodo: as pilulas da onda 2F (.ar-pilulas > .ar-aba.ar-pilula) num quadro
     proprio (.ar-dp-periodo). Trocar de periodo e clicar numa .ar-aba sem .sel:
     a janela de entrada reabre e a lista e os totais entram com os ganchos da
     onda 1 (.ar-cards-area, .ar-kpis) - nada de animacao propria aqui
   - totais: cinco cartoes tingidos (.ar-dp-kpis dentro do .ar-kpis): vencidas
     (vermelho), hoje (ambar), 7 dias (azul), a pagar no periodo (neutro) e pago
     no periodo (verde); sem conta o cartao apaga (.zero)
   - lista (.ar-lista-despesas): chip de contagem, valor em pilula, fio colorido
     a esquerda pela situacao (selo .dp-st-*), cancelada riscada
   - conta aberta: quadro da situacao (.ar-dp-sit) e a faixa verde do pagamento
     (.ar-dp-pagar, TUniPanel)
   - Inicio: icone ic-despesa, chip "Lancar despesa" (.c-despesa) e o cartao
     .ar-hj-desp (linhas .ar-hj-pes com o valor a direita, aviso das vencidas,
     total do dia)
   ========================================================================== */
.ar-dp-periodo {
  display: flex; align-items: center; height: 100%; box-sizing: border-box; padding: 1px 2px 0;
  overflow: hidden; font-family: var(--ds-font);
}
.ar-dp-periodo .ar-pilulas { gap: 6px; flex-wrap: nowrap; }
.ar-dp-periodo .ar-pilulas > .ar-aba.ar-pilula { height: 38px; padding: 0 16px; }

/* totais tingidos */
.ar-kpis.ar-dp-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ar-dp-kpis .ar-kpi {
  padding: 12px 16px 11px; border-color: transparent; overflow: hidden;
  box-shadow: inset 4px 0 0 var(--dp-cor, var(--ds-border)), var(--ds-shadow);
}
.ar-dp-kpis .ar-kpi-t { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-dp-kpis .ar-kpi-v { margin-top: 4px; font-size: 23px; color: var(--dp-cor-v, var(--ds-text)); white-space: nowrap; }
.ar-dp-kpis .ar-kpi-s { margin-top: 7px; padding-top: 7px; border-top-color: rgba(17, 19, 24, .07); }
.ar-dp-kpis .dp-venc { background: #FEF2F2; --dp-cor: #DC2626; --dp-cor-v: var(--ds-danger); }
.ar-dp-kpis .dp-hoje { background: #FFFBEB; --dp-cor: #F59E0B; --dp-cor-v: var(--ds-warn); }
.ar-dp-kpis .dp-semana { background: #EFF6FF; --dp-cor: #3B82F6; --dp-cor-v: var(--ds-info); }
.ar-dp-kpis .dp-periodo { background: var(--ds-surface); --dp-cor: var(--ds-ink); --dp-cor-v: var(--ds-text); }
.ar-dp-kpis .dp-pago { background: #F0FDF4; --dp-cor: #16A34A; --dp-cor-v: var(--ds-success); }
.ar-dp-kpis .ar-kpi.zero { --dp-cor: var(--ds-border); --dp-cor-v: #9AA1AD; background: var(--ds-surface); }
.ar-dp-kpis .ar-kpi.zero .ar-kpi-s { color: #8A919E; }
@media (max-width: 1500px) {
  .ar-dp-kpis .ar-kpi { padding: 11px 13px 10px; }
  .ar-dp-kpis .ar-kpi-t { font-size: 11px; letter-spacing: .04em; }
  .ar-dp-kpis .ar-kpi-v { font-size: 20px; }
}

/* lista: chip de contagem como o de Planos e Usuarios */
.ar-lista-despesas .ar-cards-total, .ar-lista-dtipos .ar-cards-total {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; box-sizing: border-box; padding: 0 13px 0 11px;
  border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface);
  font: 700 13px var(--ds-font); color: var(--ds-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ar-lista-despesas .ar-cards-total::before, .ar-lista-dtipos .ar-cards-total::before {
  content: ''; width: 16px; height: 16px; flex: none; background-color: var(--ds-muted);
  -webkit-mask: var(--dp-chip) no-repeat center / contain; mask: var(--dp-chip) no-repeat center / contain;
}
.ar-lista-despesas .ar-cards-total { --dp-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.ar-lista-dtipos .ar-cards-total { --dp-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 2.2a2 2 0 0 0-1.6 0L2.6 6.1a1 1 0 0 0 0 1.8l8.6 3.9a2 2 0 0 0 1.6 0l8.6-3.9a1 1 0 0 0 0-1.8z'/%3E%3Cpath d='M2 12.6l9.2 4.2a2 2 0 0 0 1.6 0l9.2-4.2'/%3E%3Cpath d='M2 17.6l9.2 4.2a2 2 0 0 0 1.6 0l9.2-4.2'/%3E%3C/svg%3E"); }
/* valor em pilula (cartao) e alinhado como numero (tabela) */
.ar-lista-despesas .ar-cardev-linhas dd.ar-dp-valor {
  justify-self: start; display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px;
  background: #F1F2F5; color: var(--ds-text); font: 800 15px/1.4 var(--ds-font);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ar-lista-despesas .ar-cardev:has(.dp-st-venc) .ar-cardev-linhas dd.ar-dp-valor { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ar-lista-despesas .ar-cardev:has(.dp-st-paga) .ar-cardev-linhas dd.ar-dp-valor { background: var(--ds-success-bg); color: var(--ds-success); }
.ar-lista-despesas .ar-vt-tabela td.ar-dp-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* fio a esquerda pela situacao (o hover do cartao mexe na sombra: o fio fica no ::before) */
.ar-lista-despesas .ar-cardev:has(.dp-st-venc)::before, .ar-lista-despesas .ar-cardev:has(.dp-st-hoje)::before,
.ar-lista-despesas .ar-cardev:has(.dp-st-semana)::before, .ar-lista-despesas .ar-cardev:has(.dp-st-paga)::before {
  content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--dp-fio, var(--ds-border)); pointer-events: none;
}
.ar-lista-despesas .ar-cardev:has(.dp-st-venc) { --dp-fio: #DC2626; }
.ar-lista-despesas .ar-cardev:has(.dp-st-hoje) { --dp-fio: #F59E0B; }
.ar-lista-despesas .ar-cardev:has(.dp-st-semana) { --dp-fio: #3B82F6; }
.ar-lista-despesas .ar-cardev:has(.dp-st-paga) { --dp-fio: #16A34A; }
.ar-lista-despesas .ar-cardev:has(.dp-st-cancelada) { background: #FBFBFC; }
.ar-lista-despesas .ar-cardev:has(.dp-st-cancelada) .ar-cardev-nome { color: var(--ds-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ar-lista-despesas .ar-cardev:has(.dp-st-cancelada) .ar-cardev-linhas dd { color: var(--ds-muted); }
.ar-lista-despesas .ar-vt-linha:has(.dp-st-cancelada) .ar-vt-nome .ar-vt-c { color: var(--ds-muted); text-decoration: line-through; }
/* icones do estado vazio (data-ic = VazioIcone) */
.ar-vz[data-ic="despesa"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/%3E%3Cpath d='M3 6v12a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="tipo"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 2.2a2 2 0 0 0-1.6 0L2.6 6.1a1 1 0 0 0 0 1.8l8.6 3.9a2 2 0 0 0 1.6 0l8.6-3.9a1 1 0 0 0 0-1.8z'/%3E%3Cpath d='M2 12.6l9.2 4.2a2 2 0 0 0 1.6 0l9.2-4.2'/%3E%3Cpath d='M2 17.6l9.2 4.2a2 2 0 0 0 1.6 0l9.2-4.2'/%3E%3C/svg%3E"); }

/* conta aberta: a situacao ao lado do valor e a faixa do pagamento */
.ar-dp-sit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; height: 100%; box-sizing: border-box;
  padding: 2px 0 0; overflow: hidden; font-family: var(--ds-font);
}
.ar-dp-sit small { display: block; max-width: 100%; font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-dp-sit small b { font-weight: 700; color: var(--ds-text); }
.x-panel.ar-dp-pagar { border: 1px solid #BBF7D0 !important; border-radius: 12px !important; overflow: hidden; }
.ar-dp-pagar, .ar-dp-pagar > .x-panel-bodyWrap, .ar-dp-pagar > .x-panel-bodyWrap > .x-panel-body { background: #F0FDF4 !important; }

/* Inicio: chip, icone e o cartao "Despesas de hoje" */
.ar-hj-ic.ic-despesa { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/%3E%3Cpath d='M3 6v12a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E"); }
.ar-hj-acoes > .c-despesa { --hj-cor: #B91C1C; }
.ar-hj-desp { --hj-cor: #B91C1C; }
.ar-hj-pes.ar-hj-dp { cursor: pointer; }
.ar-hj-pes.ar-hj-dp > .tx > span { transition: color .12s ease; }
.ar-hj-pes.ar-hj-dp:hover > .tx > span { color: var(--ds-primary); }
.ar-hj-av.ar-hj-dp-av { background: #FEE2E2; }
.ar-hj-av.ar-hj-dp-av::before { color: #B91C1C; }
.ar-hj-dp-vl { flex: none; font: 700 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-hj-dp-venc {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; padding: 9px 12px;
  border-radius: 10px; background: var(--ds-danger-bg); color: var(--ds-danger);
  font: 600 13px/1.35 var(--ds-font); cursor: pointer; user-select: none; transition: background-color .15s ease;
}
.ar-hj-dp-venc > b { font-weight: 800; }
.ar-hj-dp-venc > span { margin-left: auto; font-weight: 700; white-space: nowrap; }
.ar-hj-dp-venc:hover { background: #FECACA; }
.ar-hj-dp-tot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--ds-border-soft); font: 500 13px var(--ds-font); color: var(--ds-muted);
}
.ar-hj-dp-tot > b { font: 800 15px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }

/* sotreino mural */
/* ============================================================================
   MURAL DO APP (Cadastros/uMural, plano So Treino 3.5, 19/10/2026)
   - icone da lista vazia (data-ic="mural": megafone)
   - caixa LEITURAS NO APP na coluna da foto: o numero grande, a barra .ar-prog
     da onda 1 (enche ao aparecer) e a linha de apoio
   ========================================================================== */
.ar-vz[data-ic="mural"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 11-5.8-1.6'/%3E%3C/svg%3E"); }
.ar-mural-leit {
  box-sizing: border-box; height: 100%; padding: 12px 14px; overflow: hidden;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-low);
  font-family: var(--ds-font);
}
.ar-mural-leit-tit { font: 700 11px var(--ds-font); letter-spacing: .08em; color: var(--ds-muted); }
.ar-mural-leit-num { margin: 6px 0 8px; font-size: 14px; color: var(--ds-text-2); }
.ar-mural-leit-num b { margin-right: 2px; font-size: 26px; line-height: 1; font-weight: 800; color: var(--ds-text); }
.ar-mural-leit .ar-prog { height: 8px; }
.ar-mural-leit-pe { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--ds-muted); }
.ar-mural-leit.vazio .ar-mural-leit-pe { margin-top: 6px; }
/* Inicio: chip "Publicar no mural" (.c-mural, uHome) com o icone de foto do mural */
.ar-hj-ic.ic-mural { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E"); }
.ar-hj-acoes > .c-mural { --hj-cor: #0E7490; }
/* sotreino captacao */
/* ============================================================================
   CAPTACAO DE CLIENTES (onda 3 do plano So Treino, item 3.3) - Gestor\uCaptacao
   - htmlLink (.ar-capt-frame): o cartao LINK DE CAPTACAO - icone, titulo com
     os chips "Link visitado N vezes" / "N clientes pelo link", o endereco
     (sem o https://, cabe inteiro em 1366), a dica e COPIAR LINK (vermelho),
     ABRIR e Recriar. .ar-kpis > .ar-bloco: entra com a onda 1 (M02)
   - htmlLista (.ar-lista-pessoas.ar-lista-leads): o cartao de pessoa de
     Usuarios com o avatar na cor da situacao (.ar-lead-av0..4 = novo,
     contatado, experimental agendada, convertido, descartado), a situacao em
     pilula (dd.ar-lead-stN no cartao, td.ar-lead-stN na tabela), a aula
     experimental (hoje forte, passada em ambar), o aluno ligado em verde
   - pilulas de situacao com contagem (.ar-lead-pils, o adson-tema.js
     desenha): ficam numa linha propria embaixo da busca
   - icone do estado vazio (data-ic="cliente") e do item do sino (k-lead)
   ========================================================================== */
.ar-capt-topo { display: block; }
.ar-capt-link {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; overflow: hidden; box-sizing: border-box;
  box-shadow: inset 4px 0 0 var(--ds-primary), var(--ds-shadow);
  --capt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a5 5 0 007.07 0l3-3a5 5 0 00-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 10a5 5 0 00-7.07 0l-3 3a5 5 0 007.07 7.07l1.5-1.5'/%3E%3C/svg%3E");
}
.ar-capt-ic {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(150deg, #E5484D 0%, var(--ds-primary) 55%, #8F0F14 100%);
  box-shadow: 0 10px 20px -10px rgba(200, 22, 29, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ar-capt-ic::before {
  content: ''; width: 26px; height: 26px; background-color: currentColor;
  -webkit-mask: var(--capt-ic) no-repeat center / contain; mask: var(--capt-ic) no-repeat center / contain;
}
.ar-capt-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-capt-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ar-capt-tit > span { font: 800 12px var(--ds-font); letter-spacing: .08em; color: var(--ds-text); white-space: nowrap; }
.ar-capt-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 600 12.5px var(--ds-font); font-style: normal; white-space: nowrap; color: #4B5361; background: #F1F2F5;
}
.ar-capt-chip b { font-weight: 800; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-capt-chip-ok { color: var(--ds-success); background: var(--ds-success-bg); }
.ar-capt-chip-ok b { color: var(--ds-success); }
.ar-capt-url {
  min-width: 0; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface-low); color: var(--ds-text); font: 600 13.5px/20px Consolas, 'Cascadia Mono', ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; cursor: text;
}
.ar-capt-url.ar-capt-sem { font-family: var(--ds-font); font-weight: 600; color: var(--ds-muted); user-select: auto; cursor: default; }
.ar-capt-dica { font: 500 13px/18px var(--ds-font); color: var(--ds-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-capt-dica b { font-weight: 700; color: var(--ds-text-2); }
.ar-capt-acoes { flex: none; display: flex; align-items: center; gap: 8px; }
.ar-capt-bt {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; box-sizing: border-box; margin: 0; padding: 0 16px;
  border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface); color: var(--ds-text);
  font: 700 13px var(--ds-font); letter-spacing: .02em; white-space: nowrap; cursor: pointer; outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ar-capt-bt::before {
  content: ''; width: 15px; height: 15px; flex: none; background-color: currentColor;
  -webkit-mask: var(--capt-bt) no-repeat center / contain; mask: var(--capt-bt) no-repeat center / contain;
}
.ar-capt-bt:hover { border-color: var(--ds-field-hover); background: var(--ds-surface-low); }
.ar-capt-bt:active { transform: translateY(1px); }
.ar-capt-bt:focus-visible { box-shadow: var(--ds-ring); }
.ar-capt-bt-pri { color: #FFFFFF; background: var(--ds-primary); border-color: var(--ds-primary); box-shadow: 0 8px 16px -10px rgba(200, 22, 29, .75); }
.ar-capt-bt-pri:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ar-capt-bt.ar-capt-ok, .ar-capt-bt.ar-capt-ok:hover { color: #FFFFFF; background: var(--ds-success); border-color: var(--ds-success); box-shadow: none; }
.ar-capt-bt-leve { color: var(--ds-muted); }
.ar-capt-bt-leve:hover { color: var(--ds-text); }
.ar-capt-copiar { --capt-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V6a2 2 0 012-2h9'/%3E%3C/svg%3E"); }
.ar-capt-bt.ar-capt-ok { --capt-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ar-capt-abrir { --capt-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5'/%3E%3C/svg%3E"); }
.ar-capt-recriar { --capt-bt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 10-2.3 5.7M20 5v6h-6'/%3E%3C/svg%3E"); }
/* notebook (1366): botoes mais justos, para o endereco caber */
@media (max-width: 1500px) {
  .ar-capt-link { gap: 14px; padding: 14px 16px; }
  .ar-capt-ic { width: 46px; height: 46px; border-radius: 12px; }
  .ar-capt-ic::before { width: 23px; height: 23px; }
  .ar-capt-bt { padding: 0 12px; }
}

/* lista: avatar na cor da situacao (o cartao de pessoa e o de Usuarios, .ar-lista-pessoas) */
.ar-lista-leads .ar-selo.ar-av { background: #6B7280; }
.ar-lista-leads .ar-selo.ar-av.ar-lead-av0 { background: linear-gradient(150deg, #3B82F6 0%, #1D4ED8 100%); }
.ar-lista-leads .ar-selo.ar-av.ar-lead-av1 { background: linear-gradient(150deg, #F59E0B 0%, #B45309 100%); }
.ar-lista-leads .ar-selo.ar-av.ar-lead-av2 { background: linear-gradient(150deg, #8B5CF6 0%, #6D28D9 100%); }
.ar-lista-leads .ar-selo.ar-av.ar-lead-av3 { background: linear-gradient(150deg, #22C55E 0%, #15803D 100%); }
.ar-lista-leads .ar-selo.ar-av.ar-lead-av4 { background: #A3A9B4; box-shadow: 0 0 0 3px #FFFFFF; }
/* novo, ainda sem contato: o ponto vermelho no avatar */
.ar-lista-leads .ar-cardev .ar-selo.ar-av.ar-lead-av0::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ds-primary); box-shadow: 0 0 0 2.5px #FFFFFF;
}
.ar-lista-leads .ar-cardev:has(.ar-lead-av4) { background: #FBFBFC; }
.ar-lista-leads .ar-cardev:has(.ar-lead-av4) .ar-cardev-nome { color: var(--ds-muted); }
/* situacao em pilula: no cartao o dd, na tabela o texto da celula */
.ar-cardev-linhas dd.ar-lead-st, .ar-vt-tabela td.ar-lead-st .ar-vt-c {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box;
  padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-cardev-linhas dd.ar-lead-st::before, .ar-vt-tabela td.ar-lead-st .ar-vt-c::before {
  content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor;
}
.ar-cardev-linhas dd.ar-lead-st0, .ar-vt-tabela td.ar-lead-st0 .ar-vt-c { color: var(--ds-info); background: var(--ds-info-bg); }
.ar-cardev-linhas dd.ar-lead-st1, .ar-vt-tabela td.ar-lead-st1 .ar-vt-c { color: var(--ds-warn); background: var(--ds-warn-bg); }
.ar-cardev-linhas dd.ar-lead-st2, .ar-vt-tabela td.ar-lead-st2 .ar-vt-c { color: #6D28D9; background: #EDE9FE; }
.ar-cardev-linhas dd.ar-lead-st3, .ar-vt-tabela td.ar-lead-st3 .ar-vt-c { color: var(--ds-success); background: var(--ds-success-bg); }
.ar-cardev-linhas dd.ar-lead-st4, .ar-vt-tabela td.ar-lead-st4 .ar-vt-c { color: #4B5361; background: #F1F2F5; }
.ar-cardev-linhas dd.ar-lead-exp, .ar-vt-tabela td.ar-lead-exp { font-weight: 600; }
.ar-cardev-linhas dd.ar-lead-exp-hoje, .ar-vt-tabela td.ar-lead-exp-hoje { color: var(--ds-primary); font-weight: 800; }
.ar-cardev-linhas dd.ar-lead-exp-passou, .ar-vt-tabela td.ar-lead-exp-passou { color: var(--ds-warn); font-weight: 700; }
.ar-cardev-linhas dd.ar-lead-aluno, .ar-vt-tabela td.ar-lead-aluno { color: var(--ds-success); font-weight: 700; }
.ar-cardev-linhas dd.ar-lead-parecido { color: var(--ds-info); font-weight: 600; }
/* tabela: o avatar pequeno, sem o ponto */
.ar-lista-leads .ar-vt-tabela .ar-selo.ar-av {
  width: 30px; height: 30px; font-size: 12px; box-shadow: none;
}
.ar-lista-leads .ar-vt-tabela th.ar-vt-selo, .ar-lista-leads .ar-vt-tabela td.ar-vt-selo { width: 1%; }

/* pilulas de situacao com a contagem (linha propria embaixo da busca) */
.ar-filtro-lead .ar-cards-busca { flex-wrap: wrap; row-gap: 10px; }
.ar-filtro-lead .ar-cards-busca input { min-width: 240px; }
.ar-lead-pils { order: 9; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ar-lead-pils > .ar-aba.ar-lead-pilula {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 8px 0 12px;
  border-radius: 999px; font: 600 13px var(--ds-font); color: #4B5361; background: var(--ds-surface);
  border: 1px solid var(--ds-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); white-space: nowrap; outline: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ar-lead-pils > .ar-aba.ar-lead-pilula::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--pil-cor, #9CA3AF); }
.ar-lead-pils > .ar-lead-pilula[data-st=""]::before { display: none; }
.ar-lead-pils > .ar-lead-pilula[data-st="0"] { --pil-cor: #2563EB; }
.ar-lead-pils > .ar-lead-pilula[data-st="1"] { --pil-cor: #D97706; }
.ar-lead-pils > .ar-lead-pilula[data-st="2"] { --pil-cor: #7C3AED; }
.ar-lead-pils > .ar-lead-pilula[data-st="3"] { --pil-cor: #16A34A; }
.ar-lead-pils > .ar-lead-pilula[data-st="4"] { --pil-cor: #9CA3AF; }
.ar-lead-pils > .ar-aba.ar-lead-pilula em {
  min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 7px; border-radius: 999px; text-align: center;
  font: 700 12px/22px var(--ds-font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ds-text-2); background: #F1F2F5;
}
.ar-lead-pils > .ar-aba.ar-lead-pilula:hover { border-color: var(--ds-field-hover); color: var(--ds-text); }
.ar-lead-pils > .ar-aba.ar-lead-pilula:not(.sel):hover { box-shadow: var(--im-sombra-chip, 0 6px 14px -8px rgba(16, 24, 40, .38)); }
.ar-lead-pils > .ar-aba.ar-lead-pilula.sel { color: #FFFFFF; background: var(--ds-ink); border-color: var(--ds-ink); box-shadow: 0 4px 10px -4px rgba(17, 19, 24, .5); }
.ar-lead-pils > .ar-aba.ar-lead-pilula.sel em { color: #FFFFFF; background: rgba(255, 255, 255, .18); }
.ar-lead-pils > .ar-aba.ar-lead-pilula.vazia:not(.sel) { color: var(--ds-faint); }
.ar-lead-pils > .ar-aba.ar-lead-pilula:focus-visible { box-shadow: var(--ds-ring); }

/* painel de edicao: a linha de origem/LGPD em duas linhas no maximo */
.ar-capt-info, .ar-capt-info .x-innerhtml { line-height: 17px !important; white-space: normal !important; }

/* estado vazio (data-ic = cliente) e o sino */
.ar-vz[data-ic="cliente"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0113 0'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
.ar-notif-ico.k-lead { background: #FFE4E6; color: #BE123C; }
@media (prefers-reduced-motion: reduce) {
  .ar-capt-bt, .ar-lead-pils > .ar-aba.ar-lead-pilula { transition: none; }
}
/* sotreino fichas */
/* ============================================================================
   FICHAS DE TREINO (plano So Treino 3.6 e 3.7): Exercicios (Movimento\uExercicios),
   Fichas de treino (Movimento\uFichas), Treinos solicitados (Movimento\uPedidosTreino) e as
   fichas no perfil do aluno (uFichaTreino.FichasDoAlunoHtml). As listas sao do uCartoes e as
   entradas sao as da onda 1 (.ar-cards-area, .ar-kpis, .ar-aba-painel): aqui so o desenho.
   ========================================================================== */
/* estado vazio: os icones das tres listas novas */
.ar-vz[data-ic="exercicio"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4.5' r='2'/%3E%3Cpath d='M6 21l3.5-6.5 3 2.5V22M9.5 14.5L11 9l4 2 2.5 3.5M11 9L7 10.5 5.5 13.5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="ficha"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.8h6V4M8.5 9.5h7M8.5 13h7M8.5 16.5h4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="pedido"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.5-8h11L20 13v6H4z'/%3E%3Cpath d='M4 13h4.5l1.5 2.5h4l1.5-2.5H20'/%3E%3C/svg%3E"); }

/* ---- Exercicios: selo Com video, miniatura do YouTube no cartao, pilulas dos grupos ---- */
.ar-ex-com-video::before {
  content: ""; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent currentColor; margin-right: 1px;
}
.ar-cardev-linhas dd.ar-ex-video { overflow: hidden; align-self: start; }
.ar-cardev-linhas dt:has(+ dd.ar-ex-video) { align-self: start; padding-top: 6px; }
.ar-ex-mini {
  position: relative; display: block; width: 132px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #111318; box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.ar-ex-mini img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .15s ease, transform .2s ease; }
.ar-ex-mini i {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(200, 22, 29, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.ar-ex-mini i::after {
  content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #FFFFFF;
}
.ar-cardev:hover .ar-ex-mini img { opacity: 1; transform: scale(1.04); }
.ar-ex-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--ds-info-bg); color: var(--ds-info); font: 700 12px/1.6 var(--ds-font);
}
.ar-ex-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.ar-ex-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ds-border);
  border-radius: 999px; background: var(--ds-surface); color: #4B5361; font: 600 13px var(--ds-font);
  cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ar-ex-chip em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--ds-faint); }
.ar-ex-chip:hover { border-color: var(--ds-field-hover); color: var(--ds-text); }
.ar-ex-chip.sel { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-ex-chip.sel em { color: rgba(255, 255, 255, .7); }
.ar-ex-chip:focus-visible, .ar-ex-sw:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-ex-sw {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 5px 12px 5px 6px;
  border-radius: 999px; font: 600 13px var(--ds-font); color: var(--ds-text-2); cursor: pointer; user-select: none;
}
.ar-ex-sw i {
  position: relative; width: 34px; height: 20px; border-radius: 999px; background: #D0D5DD; flex: none;
  transition: background-color .2s ease;
}
.ar-ex-sw i::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .25); transition: transform .2s cubic-bezier(.25, .8, .25, 1);
}
.ar-ex-sw[aria-checked="true"] i { background: var(--ds-primary); }
.ar-ex-sw[aria-checked="true"] i::after { transform: translateX(14px); }
.ar-ex-sw em { font-style: normal; color: var(--ds-faint); font-weight: 600; }

/* previa do video na edicao do exercicio */
/* o htmlPrevia tem 300 px de altura fixa (DFM): em tela larga o video 16:9 passava disso e o corpo do
   quadro (-bodyWrap / -body, overflow hidden) cortava o video pela metade (23/10/2026). Tudo visivel,
   e o video vai ate 800 px de largura */
.ar-ex-previa-host, .ar-ex-previa-host [id$="-bodyWrap"], .ar-ex-previa-host [id$="-body"],
.ar-ex-previa-host .x-autocontainer-innerCt { overflow: visible !important; }
.ar-ex-previa {
  position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #111318;
  box-shadow: var(--ds-shadow-2); font-family: var(--ds-font);
}
.ar-ex-previa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ar-ex-previa.vazia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 22px;
  box-sizing: border-box; background: var(--ds-surface-low); border: 1px dashed #D0D5DD; box-shadow: none; text-align: center;
}
.ar-ex-previa.vazia b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-ex-previa.vazia span { font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); }
.ar-ex-previa.vazia.aviso { background: var(--ds-warn-bg); border-color: #F5C26B; }
.ar-ex-previa-ic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ds-primary-soft); color: var(--ds-primary);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.ar-ex-previa-ic::after {
  content: ""; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}
.ar-ex-previa-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 13px var(--ds-font);
  color: var(--ds-info); text-decoration: none;
}
.ar-ex-previa-link:hover { text-decoration: underline; }
.ar-ex-previa.vazia .ar-ex-previa-link { margin-top: 4px; }

/* ---- KPIs de Fichas e de Treinos solicitados (compactos: a lista precisa da altura) ---- */
.ar-fi-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-fi-kpis .ar-kpi { padding: 12px 16px 10px; }
.ar-fi-kpis .ar-kpi-v { font-size: 26px; margin-top: 4px; }
.ar-fi-kpis .ar-kpi-s { margin-top: 6px; padding-top: 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-fi-kpis-erro {
  padding: 14px 16px; border: 1px dashed #D0D5DD; border-radius: var(--ds-radius); background: var(--ds-surface);
  font: 500 14px var(--ds-font); color: var(--ds-muted);
}

/* ---- Fichas: editor (abas das divisoes + exercicios) ---- */
.ar-fi-host, .ar-fi-host > .x-panel-bodyWrap, .ar-fi-host .x-panel-body { height: 100%; }
.ar-fi-ed { display: flex; flex-direction: column; height: 100%; min-height: 0; box-sizing: border-box; font-family: var(--ds-font); }
.ar-fi-abas { flex: none; flex-wrap: wrap; margin-bottom: 10px; }
.ar-fi-abas .ar-aba em {
  margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #F1F2F5; color: #4B5361;
  font: 700 11.5px/18px var(--ds-font); font-style: normal; display: inline-block;
}
.ar-fi-abas .ar-aba.sel em { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.ar-fi-abas .ar-aba-mais { margin-left: 0; width: 36px; height: 36px; }
.ar-fi-lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow); padding: 4px 14px 12px;
}
.ar-fi-lista::-webkit-scrollbar { width: 8px; }
.ar-fi-lista::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-fi-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 10px;
  border-bottom: 1px solid var(--ds-border-soft); margin-bottom: 4px;
}
.ar-fi-cab-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.ar-fi-cab-t b { font: 800 18px var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-fi-cab-t span { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-fi-cab-acao {
  flex: none; font: 600 13px var(--ds-font); color: var(--ds-danger); cursor: pointer; padding: 6px 10px; border-radius: 8px;
  transition: background-color .15s ease;
}
.ar-fi-cab-acao:hover { background: var(--ds-danger-bg); }
.ar-fi-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 12px 6px; border-bottom: 1px solid var(--ds-border-soft); border-radius: 10px; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.ar-fi-item:last-child { border-bottom: 0; }
.ar-fi-item:hover { background: var(--ds-hover); }
.ar-fi-item.sel { background: var(--ds-sel); box-shadow: inset 3px 0 0 var(--ds-primary); }
.ar-fi-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ds-ink); color: #FFFFFF; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--ds-font);
  font-variant-numeric: tabular-nums;
}
.ar-fi-nome { font: 700 15px/1.35 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-fi-grupo {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #F1F2F5; color: #4B5361;
  font: 600 11.5px/1.6 var(--ds-font); vertical-align: 1px;
}
.ar-fi-video {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: var(--ds-primary-soft); color: var(--ds-primary); font: 700 11.5px/1.6 var(--ds-font);
  text-decoration: none; vertical-align: 1px;
}
.ar-fi-video svg { width: 11px; height: 11px; fill: currentColor; }
.ar-fi-video:hover { background: var(--ds-primary); color: #FFFFFF; }
.ar-fi-dados { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-fi-dados b { color: var(--ds-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-fi-obs {
  margin-top: 6px; padding: 5px 10px; border-radius: 8px; background: var(--ds-warn-bg); color: #7C4A03;
  font: 500 12.5px/1.4 var(--ds-font); overflow-wrap: anywhere;
}
.ar-fi-acoes { display: flex; gap: 4px; }
.ar-fi-bt {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-surface);
  color: var(--ds-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ar-fi-bt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ar-fi-bt:hover:not(:disabled) { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-fi-bt.perigo:hover:not(:disabled) { background: var(--ds-danger); border-color: var(--ds-danger); }
.ar-fi-bt:disabled { opacity: .35; cursor: default; }
.ar-fi-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-fi-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 6px 8px; padding: 26px 22px;
  border: 1px dashed #D0D5DD; border-radius: var(--ds-radius); background: var(--ds-surface-low); text-align: center;
}
.ar-fi-vazio b { font: 700 16px var(--ds-font); color: var(--ds-text); }
.ar-fi-vazio span { max-width: 460px; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-fi-vazio-ic {
  width: 46px; height: 46px; border-radius: 50%; background: var(--ds-primary-soft); margin-bottom: 4px;
  -webkit-mask: none; position: relative;
}
.ar-fi-vazio-ic::after {
  content: ""; position: absolute; inset: 11px; background: var(--ds-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- fichas no perfil do aluno (FichasDoAlunoHtml) ---- */
.ar-fi-perfil { display: flex; flex-direction: column; gap: 14px; font-family: var(--ds-font); }
.ar-fi-p-ficha {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
  padding: 14px 18px;
}
.ar-fi-p-ficha.encerrada { background: var(--ds-surface-low); box-shadow: none; }
.ar-fi-p-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-fi-p-topo b { font: 700 17px var(--ds-font); color: var(--ds-text); }
.ar-fi-p-info { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-fi-p-info b { color: var(--ds-text-2); font-weight: 600; }
.ar-fi-p-divs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.ar-fi-p-div { border: 1px solid var(--ds-border-soft); border-radius: 10px; padding: 10px 12px; background: var(--ds-surface-low); }
.ar-fi-p-div-t { font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); margin-bottom: 6px; }
.ar-fi-p-div ol { margin: 0; padding-left: 20px; }
.ar-fi-p-div li { margin: 4px 0; font: 500 13px/1.4 var(--ds-font); color: var(--ds-text-2); }
.ar-fi-p-div li b { color: var(--ds-text); font-weight: 600; }
.ar-fi-p-div li span { display: block; color: var(--ds-muted); font-size: 12.5px; }
.ar-fi-p-div li em { display: block; font-style: normal; color: #7C4A03; font-size: 12px; }
.ar-fi-p-vazio {
  padding: 18px; border: 1px dashed #D0D5DD; border-radius: var(--ds-radius); background: var(--ds-surface);
  font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted);
}

/* ---- Treinos solicitados ---- */
.ar-cardev-linhas dd.ar-pd-saude, .ar-vt-tabela td.ar-pd-saude { color: #7C4A03; }
.ar-cardev-linhas dd.ar-pd-saude { padding: 4px 8px; border-radius: 6px; background: var(--ds-warn-bg); }
.ar-pd-det { font-family: var(--ds-font); }
.ar-pd-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ar-pd-topo b { font: 800 22px var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-pd-topo small { flex-basis: 100%; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-pd-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ar-pd-bloco { border: 1px solid var(--ds-border); border-radius: 10px; padding: 12px 14px; background: var(--ds-surface-low); min-width: 0; }
.ar-pd-bloco.saude { background: #FFFBEB; border-color: #FDE68A; }
.ar-pd-rot { display: flex; align-items: center; gap: 8px; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-pd-rot em {
  font-style: normal; letter-spacing: 0; text-transform: none; padding: 1px 8px; border-radius: 999px;
  background: var(--ds-warn-bg); color: var(--ds-warn); font: 700 11px/1.6 var(--ds-font);
}
.ar-pd-bloco p { margin: 6px 0 0; font: 500 14px/1.5 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; max-height: 92px; overflow-y: auto; }
.ar-pd-bloco p.ar-pd-nada { color: var(--ds-muted); font-style: italic; }
.ar-pd-ficha {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--ds-success-bg); color: #14532D;
  font: 500 13.5px var(--ds-font);
}
.ar-pd-ficha.sem { background: var(--ds-info-bg); color: #1E3A8A; }
.ar-pd-resolvido { margin-top: 10px; font: 500 13px var(--ds-font); color: var(--ds-muted); }

/* sino: icone do pedido de treino (o adson-tema.js troca o icone do tipo pedidotreino) */
.ar-notif-ico.k-pedidotreino { background: #FEF3C7; color: #B45309; }

@media (max-width: 1500px) {
  .ar-fi-kpis .ar-kpi-s { font-size: 12px; }
  .ar-fi-item { gap: 10px; padding: 10px 4px; }
  .ar-fi-dados { gap: 4px 12px; }
  .ar-ex-mini { width: 112px; }
}
.ar-sem-mov .ar-ex-mini img, .ar-sem-mov .ar-ex-sw i, .ar-sem-mov .ar-ex-sw i::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ar-ex-mini img, .ar-ex-sw i::after { transition: none; }
}

/* sotreino avaliacao */
/* ============================================================================
   AVALIACAO FISICA E ANAMNESE (onda 3 do plano So Treino, itens 3.8 e 3.9;
   script 33) - Gestor\uAvaliacaoFisica.pas (HTML da ficha, das respostas e
   das abas do perfil), Movimento/uCadAvaliacaoFisica e Movimento\uAnamnese.
   - ficha do aluno (.ar-af): cabecalho com avatar, os numeros da ultima
     avaliacao (.ar-kpis, a cascata da onda 1) com a diferenca para a anterior
     (verde quando melhora, vermelho quando piora, cinza quando neutro), os
     graficos de linha, a tabela das circunferencias e o historico;
   - grafico (.ar-af-graf): svg sem viewBox (pontos e textos em % e px) com a
     linha num svg interno esticado; a linha e revelada pela mascara
     .ar-rosca-varre (onda 1) e pontos e numeros esmaecem como .ar-graf-v -
     nenhuma animacao nova;
   - edicao: o quadro do IMC ao lado do aluno (.ar-af-resumo), atualizado
     pelo bloco de mesmo nome do adson-tema.js enquanto digita;
   - anamnese (.ar-an): situacao, pontos de atencao do PAR-Q em vermelho,
     perguntas e respostas; o rascunho das perguntas (.ar-an-rasc) com subir,
     descer, editar e remover.
   ========================================================================== */
.ar-af-area .ar-af, .ar-an-area .ar-an, .ar-an-rasc-area .ar-an-rasc {
  height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  padding: 2px 6px 18px 2px; scrollbar-gutter: stable;
}
.ar-af-area .ar-af::-webkit-scrollbar, .ar-an-area .ar-an::-webkit-scrollbar, .ar-an-rasc-area .ar-an-rasc::-webkit-scrollbar { width: 8px; }
.ar-af-area .ar-af::-webkit-scrollbar-thumb, .ar-an-area .ar-an::-webkit-scrollbar-thumb,
.ar-an-rasc-area .ar-an-rasc::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-af, .ar-an, .ar-an-rasc { font-family: var(--ds-font); color: var(--ds-text-2); }

/* cabecalho do aluno */
.ar-af-topo {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 16px 18px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
}
.ar-af-av {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, #2B303A 0%, var(--ds-ink) 62%, #050608 100%); color: #FFFFFF;
  font: 800 20px/1 var(--ds-font); letter-spacing: .02em; box-shadow: 0 0 0 3px #FFFFFF, 0 8px 18px -8px rgba(16, 24, 40, .5);
}
.ar-af-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-af-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-af-id b { font: 800 21px/1.25 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ar-af-id span { font: 500 14px/1.45 var(--ds-font); color: var(--ds-muted); }
.ar-af-id span.obj, .ar-af-id .obj { display: block; margin-top: 2px; font-weight: 600; color: var(--ds-text-2); }
.ar-af-topo > .ar-selo { flex: none; align-self: flex-start; }

/* numeros da ultima avaliacao */
.ar-af-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.ar-af-kpi .ar-kpi-v { font-size: 28px; }
.ar-af-kpi .ar-kpi-v small { font: 700 14px var(--ds-font); color: var(--ds-muted); letter-spacing: 0; }
.ar-af-kpi.vazio .ar-kpi-v { color: var(--ds-faint); }
.ar-af-kpi .ar-kpi-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 1.4; }
.ar-af-dif { display: inline-flex; align-items: center; gap: 3px; font: 700 13px var(--ds-font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-af-dif.bom { color: var(--ds-success); }
.ar-af-dif.ruim { color: var(--ds-danger); }
.ar-af-dif.neutro { color: var(--ds-text-2); }
.ar-af-dif.igual { color: var(--ds-muted); font-weight: 600; }
.ar-af-desde { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-af-sem { font: 500 13px var(--ds-font); color: var(--ds-faint); }
.ar-af-chip {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font: 700 12px/1.5 var(--ds-font); background: #F1F2F5; color: #4B5361;
}
.ar-af-chip.bom { background: var(--ds-success-bg); color: var(--ds-success); }
.ar-af-chip.meio { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ar-af-chip.ruim { background: var(--ds-danger-bg); color: var(--ds-danger); }

/* blocos */
.ar-af-bloco { margin-bottom: 14px; overflow-x: visible; }
.ar-af-vazio-linha { padding: 6px 0 4px; font: 500 14px/1.55 var(--ds-font); color: var(--ds-muted); }
.ar-af-vazio {
  padding: 34px 28px; text-align: center; font: 500 15px/1.6 var(--ds-font); color: var(--ds-text-2);
  background: var(--ds-surface); border: 1px dashed #CDD3DC; border-radius: 16px;
}
.ar-af-vazio b { display: block; margin-bottom: 6px; font: 800 19px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-af-vazio b + b, .ar-af-vazio b:not(:first-child) { display: inline; font: 700 15px var(--ds-font); margin: 0; }

/* graficos de linha */
.ar-af-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ar-af-graf-c { min-width: 0; padding: 12px 14px 6px; border: 1px solid var(--ds-border-soft); border-radius: 10px; background: #FCFCFD; }
.ar-af-graf-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.ar-af-graf-t b { font: 700 14px var(--ds-font); color: var(--ds-text); }
.ar-af-graf-t span { font: 600 12px var(--ds-font); color: var(--ds-muted); }
.ar-af-graf-t .ar-af-dif { margin-left: auto; }
svg.ar-graf.ar-af-graf { height: 150px; overflow: visible; }
.ar-af-graf .ar-af-area { fill: rgba(200, 22, 29, .08); stroke: none; }
.ar-af-graf .ar-af-linha { fill: none; stroke: var(--ds-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ar-af-graf circle.ar-graf-v.ar-af-ponto { fill: #FFFFFF; stroke: var(--ds-primary); stroke-width: 2; }
.ar-af-graf circle.ar-graf-v.ar-af-ponto.ult { fill: var(--ds-primary); }
.ar-af-graf text.ar-graf-v.ar-af-val { font: 700 12px var(--ds-font); fill: var(--ds-text-2); }
.ar-af-graf text.ar-graf-v.ar-af-val.ult { fill: var(--ds-text); font-size: 13px; }
.ar-af-graf .ar-af-eixo { font: 500 12px var(--ds-font); fill: var(--ds-muted); }

/* circunferencias */
.ar-af-tab-rolo { overflow-x: auto; }
.ar-af-tab { min-width: 620px; }
.ar-af-tab th small { display: block; font: 500 12px var(--ds-font); letter-spacing: 0; text-transform: none; color: var(--ds-faint); }
.ar-af-tab tbody th { font: 600 14px var(--ds-font); color: var(--ds-text); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ds-border-soft); white-space: nowrap; }
.ar-af-tab td.num { font-variant-numeric: tabular-nums; }
.ar-af-tab td b { font-weight: 800; color: var(--ds-text); }
.ar-af-mini-c { width: 120px; }
.ar-af-mini { display: block; width: 110px; height: 26px; }
.ar-af-mini polyline { fill: none; stroke: var(--ds-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* historico */
.ar-af-hist { display: flex; flex-direction: column; }
.ar-af-hist-l {
  display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--ds-border-soft); border-radius: 8px;
  transition: background-color .12s ease;
}
.ar-af-hist-l:last-child { border-bottom: 0; }
.ar-af-hist-l[onclick] { cursor: pointer; }
.ar-af-hist-l[onclick]:hover { background: var(--ds-hover); }
.ar-af-hist-l .dt { flex: 0 0 56px; text-align: center; }
.ar-af-hist-l .dt b { display: block; font: 800 19px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-af-hist-l .dt span { display: block; font: 500 12px var(--ds-font); color: var(--ds-muted); }
.ar-af-hist-l .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-af-hist-l .tx > b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-af-hist-l .tx > b em {
  margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 700 11px/1.6 var(--ds-font); font-style: normal;
  letter-spacing: .04em; text-transform: uppercase; background: var(--ds-primary-soft); color: var(--ds-primary); vertical-align: 2px;
}
.ar-af-hist-l .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-af-hist-l .chips i {
  font: 600 13px var(--ds-font); font-style: normal; color: var(--ds-text-2); background: var(--ds-surface-low);
  border: 1px solid var(--ds-border-soft); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums;
}
.ar-af-hist-l .por { font: 500 13px var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-af-hist-l .obs { font: 400 13px/1.45 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ar-af-abrir {
  flex: none; font: 600 13px var(--ds-font); color: #FFFFFF; background: var(--ds-ink); border-radius: 8px; padding: 7px 14px;
  transition: background-color .15s ease;
}
.ar-af-hist-l:hover .ar-af-abrir { background: var(--ds-primary); }

/* aba do perfil */
.ar-af-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 14px; font: 500 14px var(--ds-font); color: var(--ds-muted); }
.ar-af-dica { margin-top: 4px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-af-dica b { color: var(--ds-text-2); }

/* edicao: IMC e avaliacao anterior ao lado do aluno */
.ar-af-resumo-c { display: flex; align-items: stretch; gap: 10px; height: 100%; font-family: var(--ds-font); }
.ar-af-imc, .ar-af-ant {
  min-width: 0; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ds-border-soft);
  background: var(--ds-surface-low);
}
.ar-af-imc { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 8px; row-gap: 2px; }
.ar-af-imc .t { grid-column: 1 / -1; font: 700 11px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-muted); }
.ar-af-imc b { font: 800 22px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-af-imc .ar-af-chip { align-self: center; justify-self: start; }
.ar-af-imc .m { grid-column: 1 / -1; font: 500 12px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-af-imc .m:empty { display: none; }
.ar-af-ant { flex: 1; font: 500 13px/1.45 var(--ds-font); color: var(--ds-text-2); overflow: hidden; }
.ar-af-ant .t { display: block; font: 700 11px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-muted); }
.ar-af-ant b { color: var(--ds-text); }

/* anamnese: situacao, pontos de atencao e respostas */
.ar-an-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; padding: 14px 16px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
}
.ar-an-status b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-an-status span { font: 500 14px var(--ds-font); color: var(--ds-muted); }
.ar-an-status em { font-style: normal; color: var(--ds-warn); font-weight: 600; }
.ar-an-alerta {
  margin-bottom: 14px; padding: 14px 16px 12px 18px; border-radius: var(--ds-radius); background: #FEF2F2;
  border: 1px solid #FBD5D5; box-shadow: inset 4px 0 0 var(--ds-danger);
}
.ar-an-alerta > b { display: block; font: 800 14px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-danger); }
.ar-an-alerta ul { margin: 8px 0 6px; padding-left: 20px; }
.ar-an-alerta li { font: 600 14px/1.5 var(--ds-font); color: #7F1D1D; }
.ar-an-alerta p { margin: 0; font: 500 13px/1.5 var(--ds-font); color: #991B1B; }
.ar-an-lista {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
  padding: 4px 16px;
}
.ar-an-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--ds-border-soft); }
.ar-an-item:last-child { border-bottom: 0; }
.ar-an-item .n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-surface-low);
  font: 700 12px var(--ds-font); color: var(--ds-muted);
}
.ar-an-item .p { font: 500 14px/1.45 var(--ds-font); color: var(--ds-text); }
.ar-an-item .r { font: 600 14px/1.45 var(--ds-font); color: var(--ds-text); text-align: right; max-width: 420px; overflow-wrap: anywhere; }
.ar-an-item .r .vazia { font-weight: 500; color: var(--ds-faint); }
.ar-an-item .sn { display: inline-block; padding: 2px 12px; border-radius: 999px; font: 700 13px var(--ds-font); }
.ar-an-item .sn.nao { background: #F1F2F5; color: #4B5361; }
.ar-an-item .sn.sim { background: var(--ds-surface-low); color: var(--ds-text); }
.ar-an-item.alerta { background: linear-gradient(90deg, #FEF2F2, rgba(254, 242, 242, 0)); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ar-an-item.alerta .n { background: var(--ds-danger); color: #FFFFFF; }
.ar-an-item.alerta .sn.sim { background: var(--ds-danger); color: #FFFFFF; }
.ar-an-lgpd { margin-top: 12px; font: 500 13px var(--ds-font); color: var(--ds-muted); }

/* anamnese: numeros da aba de respostas */
.ar-an-kpis .ar-kpi-v { font-size: 28px; }
.ar-an-kpi-alerta { box-shadow: inset 0 3px 0 var(--ds-danger), var(--ds-shadow); }
.ar-an-kpi-alerta .ar-kpi-v { color: var(--ds-danger); }

/* anamnese: o rascunho das perguntas */
.ar-an-rasc-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 12px; font: 500 14px var(--ds-font); color: var(--ds-muted); }
.ar-an-rasc-topo em { font-style: normal; font-weight: 600; color: var(--ds-warn); }
.ar-an-rasc-qt { margin-left: auto; font: 700 13px var(--ds-font); color: var(--ds-text-2); }
.ar-an-perg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-an-perg li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-an-perg li.sel { border-color: var(--ds-primary); box-shadow: 0 0 0 2px rgba(200, 22, 29, .14); }
.ar-an-perg li.alerta { box-shadow: inset 3px 0 0 var(--ds-danger), 0 1px 2px rgba(16, 24, 40, .04); }
.ar-an-perg li.alerta.sel { box-shadow: inset 3px 0 0 var(--ds-danger), 0 0 0 2px rgba(200, 22, 29, .14); }
.ar-an-perg .n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-ink); color: #FFFFFF;
  font: 700 13px var(--ds-font);
}
.ar-an-perg .tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-an-perg .tx b { font: 600 14px/1.45 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-an-perg .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-an-perg .meta i {
  font: 600 12px/1.6 var(--ds-font); font-style: normal; padding: 0 9px; border-radius: 999px; background: var(--ds-surface-low);
  border: 1px solid var(--ds-border-soft); color: var(--ds-text-2);
}
.ar-an-perg .meta i.tp { background: var(--ds-info-bg); border-color: transparent; color: var(--ds-info); }
.ar-an-perg .meta i.al { background: var(--ds-danger-bg); border-color: transparent; color: var(--ds-danger); }
.ar-an-perg .op, .ar-an-perg .aj { font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-an-perg .ac { display: flex; align-items: center; gap: 6px; }
.ar-an-perg .ac button {
  height: 32px; min-width: 32px; padding: 0 10px; margin: 0; border-radius: 8px; border: 1px solid var(--ds-field);
  background: var(--ds-surface); color: var(--ds-text); font: 600 13px var(--ds-font); cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ar-an-perg .ac button:hover:not(:disabled) { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-an-perg .ac button.rm:hover:not(:disabled) { background: var(--ds-danger); border-color: var(--ds-danger); }
.ar-an-perg .ac button:disabled { opacity: .35; cursor: default; }
.ar-an-perg .ac button:focus-visible { outline: none; box-shadow: var(--ds-ring); }
@media (max-width: 1500px) {
  .ar-af-kpi .ar-kpi-v { font-size: 25px; }
  .ar-af-grade { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ar-an-perg .ac button { padding: 0 8px; }
}

/* sotreino produtos */
/* ============================================================================
   PRODUTOS E VENDA AVULSA (plano So Treino, onda 3, modulo 3.12; 19/10/2026)
   Gestor/Movimento/uProdutos.pas (FINANCEIRO > Produtos) e uVendas.pas
   (FINANCEIRO > Vendas). O Pascal manda HTML com classes; o desenho e daqui e
   o comportamento e do bloco de mesmo nome do adson-tema.js. Movimento: so os
   ganchos da onda 1 (.ar-cards-area, .ar-kpis, .ar-bloco, .ar-prog,
   .ar-rosca-varre) - nenhuma animacao propria.
   - Produtos: KPIs dentro da area que rola (Estoque baixo e Sem estoque
     filtram com um clique), cartao com a foto no alto e o preco em pilula,
     edicao com a caixa da foto, o saldo grande e o historico de movimentos
   - Vendas: periodo em pilulas, KPIs + rosca das formas + duas listas com
     barra, cartoes por dia; a venda nova (grade de produtos, carrinho com
     - e +, formas em pilulas, totais e troco) e o RECIBO em tres papeis
     (A4, bobina 80 mm, bobina 58 mm), impresso num quadro escondido
   ========================================================================== */

/* ---------------------------------------------------------------- KPIs das duas telas */
.ar-pd-painel, .ar-vd-painel { margin: 2px 0 18px; }
.ar-kpis.ar-pd-kpis, .ar-kpis.ar-vd-kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.ar-pd-kpis .ar-kpi, .ar-vd-kpis .ar-kpi { padding: 14px 16px 12px; }
.ar-pd-kpis .ar-kpi-v, .ar-vd-kpis .ar-kpi-v { font-size: 27px; }
.ar-pd-kpis .ar-kpi-s, .ar-vd-kpis .ar-kpi-s { margin-top: 8px; padding-top: 8px; }
.ar-kpi.ar-pd-kpi-erro { box-shadow: inset 0 3px 0 var(--ds-danger), var(--ds-shadow); }
.ar-kpi.ar-pd-kpi-erro .ar-kpi-v { color: var(--ds-danger); }
/* "Estoque baixo" e "Sem estoque": clicaveis (poem o texto do selo na busca) */
.ar-pd-kpis .ar-kpi[role="button"] { cursor: pointer; user-select: none; }
.ar-pd-kpis .ar-kpi[role="button"]:hover { border-color: var(--ds-field-hover); transform: translateY(-1px); }
.ar-pd-kpis .ar-kpi[role="button"]:active { transform: translateY(0); }
.ar-pd-kpis .ar-kpi[role="button"]:focus-visible { outline: none; box-shadow: var(--ds-ring), var(--ds-shadow); }
.ar-pd-kpis .ar-kpi[role="button"]::after {
  content: 'filtrar'; display: block; position: absolute; top: 12px; right: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--ds-surface-low); border: 1px solid var(--ds-border); font: 700 11px/1.5 var(--ds-font); color: var(--ds-text-2);
}
.ar-pd-kpis .ar-kpi.ar-pd-filtrando::after { content: 'filtrando'; background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-pd-kpis .ar-kpi.ar-pd-filtrando { border-color: var(--ds-ink); box-shadow: 0 0 0 2px rgba(17, 19, 24, .14), var(--ds-shadow); }
/* na tabela os numeros ficam parados em cima; os blocos das vendas saem */
.ar-vt.ar-vista-tabela > .ar-pd-painel, .ar-vt.ar-vista-tabela > .ar-vd-painel { flex: none; }
.ar-vt.ar-vista-tabela > .ar-vd-painel > .ar-vd-blocos { display: none; }

/* chip de contagem (como "10 planos") e icone do estado vazio */
.ar-lista-produtos .ar-cards-total, .ar-lista-vendas .ar-cards-total {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; box-sizing: border-box; padding: 0 13px 0 11px;
  border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface);
  font: 700 13px var(--ds-font); color: var(--ds-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ar-lista-produtos .ar-cards-total::before, .ar-lista-vendas .ar-cards-total::before {
  content: ''; width: 16px; height: 16px; flex: none; background-color: var(--ds-muted);
  -webkit-mask: var(--vz-chip) no-repeat center / contain; mask: var(--vz-chip) no-repeat center / contain;
}
.ar-lista-produtos .ar-cards-total, .ar-vz[data-ic="produto"] {
  --vz-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}
.ar-vz[data-ic="produto"] { --vz-ic: var(--vz-chip); }
.ar-lista-vendas .ar-cards-total, .ar-vz[data-ic="venda"] {
  --vz-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E");
}
.ar-vz[data-ic="venda"] { --vz-ic: var(--vz-chip); }

/* ---------------------------------------------------------------- produtos: cartao com foto */
.ar-lista-produtos .ar-cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ar-lista-produtos .ar-cardev { padding: 12px 14px 14px; }
.ar-pd-foto, .ar-vd-prod-foto, .ar-pd-fotobox-img {
  position: relative; display: block; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #F1F3F6 58%, #E6E9EE 100%);
}
.ar-pd-foto { height: 140px; margin: 0 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ds-border-soft); }
.ar-pd-foto > b, .ar-vd-prod-foto > b, .ar-pd-fotobox-img > b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 34px/1 var(--ds-font); letter-spacing: .04em; color: #B3BAC5;
}
.ar-pd-foto > img, .ar-vd-prod-foto > img, .ar-pd-fotobox-img > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FFFFFF;
}
.ar-pd-foto > img { transition: transform .25s var(--mv-sai, ease); }
.ar-lista-produtos .ar-cardev:hover .ar-pd-foto > img { transform: scale(1.04); }
/* sem estoque: faixa na foto; inativo: foto apagada */
.ar-lista-produtos .ar-cardev:has(.ar-cardev-topo .ar-selo-erro) .ar-pd-foto::after {
  content: 'Sem estoque'; position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--ds-danger); color: #FFFFFF; font: 700 12px var(--ds-font);
}
.ar-lista-produtos .ar-cardev:has(.ar-sit-inativo) .ar-pd-foto { filter: grayscale(1); opacity: .65; }
.ar-lista-produtos .ar-cardev-linhas dd.ar-pd-preco {
  justify-self: start; display: inline-flex; align-items: center; padding: 2px 11px; border-radius: 999px;
  background: var(--ds-info-bg); color: var(--ds-info); font: 800 15px/1.45 var(--ds-font);
  font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; box-sizing: border-box; overflow: hidden;
}
.ar-vt-tabela td.ar-pd-preco { font-weight: 700; color: var(--ds-text); }

/* ---------------------------------------------------------------- produtos: edicao */
.ar-pd-fotobox {
  position: relative; box-sizing: border-box; height: 178px; border-radius: var(--ds-radius-sm); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px;
  text-align: center; font-family: var(--ds-font); background: #FFFFFF; border: 1px solid var(--ds-border);
}
.ar-pd-fotobox.vazio { background: var(--ds-surface-low); border: 1px dashed var(--ds-field); }
.ar-pd-fotobox-img { position: absolute; inset: 0; }
.ar-pd-fotobox-img > b { font-size: 42px; }
.ar-pd-fotobox-nova {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--ds-ink); color: #FFFFFF; font: 700 12px var(--ds-font);
}
.ar-pd-fotobox.vazio b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-pd-fotobox.vazio small { max-width: 224px; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); }
.ar-pd-fotobox-ic, .ar-vd-car-ic {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #E9ECF1; color: var(--ds-muted);
}
.ar-pd-fotobox-ic::before, .ar-vd-car-ic::before {
  content: ''; width: 21px; height: 21px; background-color: currentColor;
  -webkit-mask: var(--pd-ic) no-repeat center / contain; mask: var(--pd-ic) no-repeat center / contain;
}
.ar-pd-fotobox-ic { --pd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E"); }
.ar-vd-car-ic { --pd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }

/* o saldo: numero grande, selo e o minimo */
.ar-pd-saldo {
  display: flex; align-items: center; gap: 16px; box-sizing: border-box; min-height: 64px; max-height: 84px; overflow: hidden;
  padding: 10px 16px; border-radius: 12px; background: var(--ds-surface-low); border: 1px solid var(--ds-border);
  font-family: var(--ds-font);
}
.ar-pd-saldo.novo { background: var(--ds-info-bg); border-color: #BFDBFE; }
.ar-pd-saldo-num {
  flex: none; min-width: 52px; text-align: center; font: 800 38px/1 var(--ds-font); color: var(--ds-text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ar-pd-saldo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ar-pd-saldo-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-pd-saldo-txt small { font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }

/* painel de entrada / ajuste (TUniPanel dentro do cartao) */
.ar-pd-mov { background: var(--ds-surface-low) !important; border: 1px solid var(--ds-border) !important; border-radius: 12px !important; }

/* historico de movimentos */
.ar-pd-movs {
  height: 100%; box-sizing: border-box; overflow-y: auto; border: 1px solid var(--ds-border); border-radius: 12px;
  background: var(--ds-surface); font-family: var(--ds-font); scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-pd-movs-cab {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 10px; padding: 11px 16px;
  background: var(--ds-surface-low); border-bottom: 1px solid var(--ds-border);
}
.ar-pd-movs-cab b { font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-pd-movs-cab span { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-pd-mov-linha {
  display: grid; grid-template-columns: 92px 108px 60px 88px minmax(0, 1fr) minmax(0, 140px); align-items: center; gap: 12px;
  padding: 9px 16px; border-bottom: 1px solid var(--ds-border-soft); font: 500 14px var(--ds-font); color: var(--ds-text-2);
  transition: background-color .1s ease;
}
.ar-pd-mov-linha:last-child { border-bottom: 0; }
.ar-pd-mov-linha:hover { background: var(--ds-hover); }
.ar-pd-mov-data { font-weight: 600; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-pd-mov-data small { display: block; font: 500 12px var(--ds-font); color: var(--ds-muted); }
.ar-pd-mov-qt { font: 800 16px var(--ds-font); text-align: right; font-variant-numeric: tabular-nums; }
.ar-pd-mov-qt.mais { color: var(--ds-success); }
.ar-pd-mov-qt.menos { color: var(--ds-danger); }
.ar-pd-mov-saldo { color: var(--ds-muted); white-space: nowrap; }
.ar-pd-mov-saldo b { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-pd-mov-obs, .ar-pd-mov-quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pd-mov-quem { text-align: right; color: var(--ds-muted); }
.ar-selo.ar-pd-mov-venda { background: #E7E9EE; color: var(--ds-ink); }
.ar-pd-movs-vazio { padding: 22px 18px; font: 500 14px/1.55 var(--ds-font); color: var(--ds-muted); }

/* ---------------------------------------------------------------- vendas: periodo e lista */
.ar-vd-periodos, .ar-rc-formatos { display: flex; align-items: center; gap: 6px; font-family: var(--ds-font); }
.ar-vd-periodos { height: 44px; }
.ar-vd-periodos > .ar-aba.ar-vd-per, .ar-rc-formatos > .ar-aba.ar-rc-fmt {
  display: inline-flex; align-items: center; height: 38px; box-sizing: border-box; padding: 0 16px;
  border-radius: 999px; white-space: nowrap; outline: none;
}
.ar-vd-periodos > .ar-aba:focus-visible, .ar-rc-formatos > .ar-aba:focus-visible { box-shadow: var(--ds-ring); }
.ar-lista-vendas .ar-cardev-linhas dd.ar-vd-total { font: 800 16px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-vt-tabela td.ar-vd-total { font-weight: 800; color: var(--ds-text); }
.ar-lista-vendas .ar-cardev-linhas dd.ar-vd-total-canc, .ar-vt-tabela td.ar-vd-total-canc { color: var(--ds-faint); text-decoration: line-through; }
.ar-lista-vendas .ar-cardev:has(.ar-cardev-topo .ar-selo-erro) { background: #FBFBFC; }
.ar-lista-vendas .ar-cardev:has(.ar-cardev-topo .ar-selo-erro) .ar-cardev-nome { color: var(--ds-muted); }

/* tres blocos: rosca das formas, itens mais vendidos, vendas por colaborador */
.ar-kpis.ar-vd-blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
.ar-vd-bloco { min-height: 196px; padding: 14px 16px; overflow: hidden; }
.ar-vd-bloco > .ar-bloco-tit { margin-bottom: 10px; }
.ar-vd-bloco-vazio { padding: 28px 8px; text-align: center; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-vd-bloco:has(.ar-vd-rosca-caixa) {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-items: center;
}
.ar-vd-bloco:has(.ar-vd-rosca-caixa) > .ar-bloco-tit { grid-column: 1 / -1; align-self: start; }
.ar-vd-rosca-caixa { position: relative; width: 132px; height: 132px; }
.ar-vd-rosca { display: block; width: 132px; height: 132px; overflow: visible; }
.ar-vd-rosca-base { fill: none; stroke: var(--ds-surface-low); stroke-width: 16; }
.ar-vd-seg { fill: none; stroke-width: 16; }
.ar-vd-rosca-meio {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; font-family: var(--ds-font);
}
.ar-vd-rosca-meio b { font: 800 26px/1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-vd-rosca-meio span { margin-top: 3px; font: 600 12px var(--ds-font); color: var(--ds-muted); }
.ar-vd-legendas { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ar-vd-leg {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 36px; align-items: center; gap: 8px;
  font: 500 13px var(--ds-font); color: var(--ds-text-2);
}
.ar-vd-leg i { width: 10px; height: 10px; border-radius: 3px; }
.ar-vd-leg b { font-weight: 700; color: var(--ds-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-vd-leg em { font-style: normal; text-align: right; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
/* as cores das formas (rosca, legenda e pilula da venda nova) */
.ar-vd-seg.f-dinheiro { stroke: #15803D; }
.ar-vd-seg.f-pix { stroke: #0D9488; }
.ar-vd-seg.f-debito { stroke: #1D4ED8; }
.ar-vd-seg.f-credito { stroke: #7C3AED; }
.ar-vd-leg.f-dinheiro i, .ar-vd-forma.f-dinheiro i { background: #15803D; }
.ar-vd-leg.f-pix i, .ar-vd-forma.f-pix i { background: #0D9488; }
.ar-vd-leg.f-debito i, .ar-vd-forma.f-debito i { background: #1D4ED8; }
.ar-vd-leg.f-credito i, .ar-vd-forma.f-credito i { background: #7C3AED; }

/* listas com barra (itens mais vendidos, por colaborador) */
.ar-vd-rank {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n nome v" "n barra barra";
  align-items: center; column-gap: 10px; row-gap: 5px; padding: 6px 0; font-family: var(--ds-font);
}
.ar-vd-rank + .ar-vd-rank { border-top: 1px solid var(--ds-border-soft); }
.ar-vd-rank-n, .ar-vd-rank-ini {
  grid-area: n; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px var(--ds-font); background: var(--ds-surface-low); color: var(--ds-text-2);
}
.ar-vd-rank-ini { font-size: 10px; background: #E7E9EE; }
.ar-bloco-tit + .ar-vd-rank .ar-vd-rank-n { background: var(--ds-ink); color: #FFFFFF; }
.ar-vd-rank-nome { grid-area: nome; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px var(--ds-font); color: var(--ds-text); }
.ar-vd-rank-v { grid-area: v; white-space: nowrap; font: 500 13px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-vd-rank-v b { color: var(--ds-text); font-weight: 700; }
.ar-vd-rank > .ar-prog { grid-area: barra; height: 6px; }
.ar-vd-rank > .ar-prog > i { background: var(--ds-ink); }
.ar-bloco-tit + .ar-vd-rank > .ar-prog > i { background: var(--ds-primary); }

/* ---------------------------------------------------------------- vendas: venda nova */
.ar-vd-cat { height: 100%; display: flex; flex-direction: column; min-height: 0; font-family: var(--ds-font); }
.ar-vd-cat-busca { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.ar-vd-cat-busca input {
  flex: 1; min-width: 0; height: 40px; box-sizing: border-box; border: 1px solid var(--ds-field); border-radius: 10px;
  background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") no-repeat 12px center / 17px 17px;
  padding: 0 12px 0 38px; font: 500 14px var(--ds-font); color: var(--ds-text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-vd-cat-busca input::placeholder { color: #8A919E; font-weight: 400; }
.ar-vd-cat-busca input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-vd-cat-total { flex: none; font: 600 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-vd-cat-grade {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; align-content: start; padding: 2px 4px 10px 2px; scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-vd-prod {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 8px 8px 10px;
  text-align: left; cursor: pointer; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface);
  box-shadow: var(--ds-shadow); font-family: var(--ds-font); color: var(--ds-text);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.ar-vd-prod:hover { transform: translateY(-2px); border-color: var(--ds-field-hover); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 24px -12px rgba(16, 24, 40, .26); }
.ar-vd-prod:active { transform: translateY(0) scale(.97); }
.ar-vd-prod:focus-visible { outline: none; box-shadow: var(--ds-ring), var(--ds-shadow); }
.ar-vd-prod[hidden] { display: none; }
.ar-vd-prod.esgotado { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
.ar-vd-prod-foto { height: 84px; border-radius: 8px; }
.ar-vd-prod-foto > b { font-size: 24px; }
.ar-vd-prod-nome {
  min-height: 36px; font: 700 14px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-vd-prod-cat {
  font: 600 11px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-vd-prod-pe { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 6px; margin-top: auto; }
.ar-vd-prod-preco { font: 800 15px var(--ds-font); color: var(--ds-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-vd-prod .ar-selo { padding: 2px 8px; font-size: 11px; }
.ar-vd-cat-nada {
  flex: none; padding: 22px; text-align: center; border: 1px dashed #CDD3DC; border-radius: 12px;
  font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted);
}
.ar-vd-cat-nada[hidden] { display: none; }
.ar-vd-cat > .ar-cards-vazio { margin: auto 0; }

/* carrinho */
.ar-vd-car {
  height: 100%; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column;
  border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface); font-family: var(--ds-font);
  scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-vd-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 26px; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--ds-border-soft);
}
.ar-vd-item:last-child { border-bottom: 0; }
.ar-vd-item-nome { min-width: 0; overflow-wrap: anywhere; font: 700 14px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-vd-item-nome small { display: block; margin-top: 2px; font: 500 12px var(--ds-font); color: var(--ds-muted); }
.ar-vd-qtd { display: inline-flex; align-items: center; border: 1px solid var(--ds-field); border-radius: 10px; overflow: hidden; background: var(--ds-surface); }
.ar-vd-qtd button {
  width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: 700 17px/1 var(--ds-font); color: var(--ds-text); transition: background-color .12s ease;
}
.ar-vd-qtd button:hover:not(:disabled) { background: var(--ds-surface-low); }
.ar-vd-qtd button:disabled { color: var(--ds-faint); cursor: not-allowed; }
.ar-vd-qtd b { min-width: 28px; text-align: center; font: 800 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-vd-item-total { text-align: right; white-space: nowrap; font: 800 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-vd-tirar {
  width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 400 20px/1 var(--ds-font); color: var(--ds-muted); transition: background-color .12s ease, color .12s ease;
}
.ar-vd-tirar:hover { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ar-vd-car.vazio {
  align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center;
  border-style: dashed; background: var(--ds-surface-low);
}
.ar-vd-car.vazio b { font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-vd-car.vazio small { max-width: 300px; font: 500 13px/1.5 var(--ds-font); color: var(--ds-muted); }

/* formas de pagamento (pilulas) */
.ar-vd-formas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-family: var(--ds-font); }
.ar-vd-formas > .ar-aba.ar-vd-forma {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; box-sizing: border-box;
  padding: 0 6px; border-radius: 10px; font-size: 13px; white-space: nowrap; outline: none;
}
.ar-vd-formas > .ar-aba.ar-vd-forma:focus-visible { box-shadow: var(--ds-ring); }
.ar-vd-forma i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ar-vd-forma.sel i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }

/* totais e troco */
.ar-vd-tot { display: flex; flex-direction: column; gap: 4px; max-height: 100%; overflow-y: auto; font-family: var(--ds-font); }
.ar-vd-tot > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 14px var(--ds-font); color: var(--ds-text-2); }
.ar-vd-tot > div b { font-weight: 700; color: var(--ds-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-vd-tot > .desc b { color: var(--ds-success); }
.ar-vd-tot > .total { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--ds-border); }
.ar-vd-tot > .total span { font: 800 13px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-vd-tot > .total b { font: 800 26px/1.1 var(--ds-font); letter-spacing: -.02em; }
.ar-vd-tot > .troco b { color: var(--ds-info); font-weight: 800; }
.ar-vd-tot > .aviso { display: block; font: 600 13px/1.4 var(--ds-font); color: var(--ds-warn); }
.x-btn.ar-vd-concluir .x-btn-inner { font-size: 16px !important; font-weight: 800 !important; }
.ar-vd-dica, .ar-vd-dica .x-innerhtml { font-size: 12px !important; line-height: 16px !important; }

/* ---------------------------------------------------------------- vendas: recibo */
.ar-rc-area { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; font-family: var(--ds-font); }
.ar-rc-barra { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin: 2px 0 14px; }
.ar-rc-acoes { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ar-rc-bt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--ds-ink); background: var(--ds-ink); color: #FFFFFF; cursor: pointer;
  font: 700 14px var(--ds-font); white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.ar-rc-bt::before {
  content: ''; width: 16px; height: 16px; flex: none; background-color: currentColor;
  -webkit-mask: var(--ic) no-repeat center / contain; mask: var(--ic) no-repeat center / contain;
}
.ar-rc-bt:hover { background: var(--ds-ink-2); border-color: var(--ds-ink-2); }
.ar-rc-bt:active { transform: translateY(1px); }
.ar-rc-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-rc-bt.ar-rc-bt-nova { background: var(--ds-primary); border-color: var(--ds-primary); }
.ar-rc-bt.ar-rc-bt-nova:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ar-rc-mesa {
  flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start;
  padding: 24px; border-radius: var(--ds-radius); background: #E6E9EE; box-shadow: inset 0 1px 3px rgba(16, 24, 40, .08);
}
.ar-recibo {
  flex: none; box-sizing: border-box; background: #FFFFFF; color: #111111; font: 500 13px/1.45 var(--ds-font);
  box-shadow: 0 12px 30px -14px rgba(16, 24, 40, .4), 0 1px 3px rgba(16, 24, 40, .12);
  transition: width .25s var(--mv-std, ease), padding .25s var(--mv-std, ease);
}
.ar-recibo.ar-rc-a4 { width: 680px; min-height: 620px; padding: 44px 48px; font-size: 14px; }
.ar-recibo.ar-rc-80 { width: 302px; padding: 18px 16px; font-size: 12.5px; }
.ar-recibo.ar-rc-58 { width: 220px; padding: 14px 10px; font-size: 11.5px; }
.ar-rc-cab { text-align: center; padding-bottom: 10px; border-bottom: 1px dashed #9CA3AF; }
.ar-rc-cab b { display: block; font: 800 1.25em/1.2 var(--ds-font); letter-spacing: .03em; text-transform: uppercase; }
.ar-rc-cab span { display: block; margin-top: 3px; font-size: .92em; color: #4B5563; }
.ar-rc-tit { margin: 12px 0 2px; text-align: center; font: 800 1.35em var(--ds-font); letter-spacing: .3em; text-transform: uppercase; }
.ar-rc-num { text-align: center; color: #4B5563; font-variant-numeric: tabular-nums; }
.ar-rc-cancelada {
  margin: 10px 0 2px; padding: 8px 10px; border: 2px solid var(--ds-danger); border-radius: 8px;
  color: var(--ds-danger); text-align: center; transform: rotate(-2deg);
}
.ar-rc-cancelada b { display: block; font: 800 1.1em var(--ds-font); letter-spacing: .12em; text-transform: uppercase; }
.ar-rc-cancelada span, .ar-rc-cancelada small { display: block; font-size: .9em; overflow-wrap: anywhere; }
.ar-rc-dados { margin: 10px 0; padding: 8px 0; border-top: 1px dashed #9CA3AF; border-bottom: 1px dashed #9CA3AF; }
.ar-rc-dados > div, .ar-rc-tot > div { display: flex; justify-content: space-between; gap: 10px; }
.ar-rc-dados span, .ar-rc-tot span { color: #4B5563; }
.ar-rc-dados b, .ar-rc-tot b { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ar-rc-itens { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.ar-rc-itens th {
  padding: 4px 3px; text-align: left; border-bottom: 1px solid #111111;
  font: 700 .82em var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: #4B5563;
}
.ar-rc-itens td { padding: 5px 3px; border-bottom: 1px dotted #D1D5DB; vertical-align: top; overflow-wrap: anywhere; }
.ar-rc-itens .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-rc-itens .qt { width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.ar-recibo.ar-rc-58 .ar-rc-itens th:nth-child(3), .ar-recibo.ar-rc-58 .ar-rc-itens td:nth-child(3) { display: none; }
.ar-rc-tot { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed #9CA3AF; }
.ar-rc-tot > .total { margin: 4px 0; padding: 6px 0; border-top: 1px solid #111111; border-bottom: 1px solid #111111; }
.ar-rc-tot > .total span, .ar-rc-tot > .total b { color: #111111; font: 800 1.3em var(--ds-font); }
.ar-rc-obs { margin-top: 10px; font-size: .95em; overflow-wrap: anywhere; }
.ar-rc-obs span { display: block; font: 700 .8em var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: #4B5563; }
.ar-rc-pe { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #9CA3AF; text-align: center; font-weight: 700; }
.ar-rc-pe small { display: block; margin-top: 4px; font: 500 .85em var(--ds-font); color: #6B7280; }
/* impressao: so o recibo, num quadro escondido (arReciboImprimir); paginas com nome */
.ar-rc-quadro { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; }
@page arRcA4 { size: A4; margin: 14mm; }
@page arRcBobina { margin: 2mm; }
body.ar-rc-impressao { margin: 0; padding: 0; background: #FFFFFF !important; overflow: visible; }
.ar-rc-impressao .ar-recibo { box-shadow: none; margin: 0 auto; transition: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ar-rc-impressao.ar-rc-fa4 .ar-recibo { page: arRcA4; width: auto; min-height: 0; padding: 0; }
.ar-rc-impressao.ar-rc-f80 .ar-recibo { page: arRcBobina; width: 72mm; padding: 0; }
.ar-rc-impressao.ar-rc-f58 .ar-recibo { page: arRcBobina; width: 48mm; padding: 0; }
.ar-rc-impressao .ar-rc-cancelada { transform: none; }

/* atalho do Inicio: Venda avulsa */
.ar-hj-acoes > .c-venda { --hj-cor: #0F766E; }
.ar-hj-ic.ic-venda { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- notebook (1366) */
@media (max-width: 1500px) {
  .ar-lista-produtos .ar-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .ar-pd-foto { height: 120px; }
  .ar-kpis.ar-pd-kpis, .ar-kpis.ar-vd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .ar-pd-kpis .ar-kpi-v, .ar-vd-kpis .ar-kpi-v { font-size: 24px; }
  .ar-vd-bloco:has(.ar-vd-rosca-caixa) { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .ar-vd-rosca-caixa, .ar-vd-rosca { width: 112px; height: 112px; }
  .ar-vd-cat-grade { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
  .ar-vd-prod-foto { height: 70px; }
  .ar-pd-mov-linha { grid-template-columns: 88px 100px 54px 80px minmax(0, 1fr) minmax(0, 110px); gap: 10px; }
}
@media (max-width: 1180px) {
  .ar-kpis.ar-vd-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* desligado (arSemMov=1): sem levantar no hover */
.ar-sem-mov .ar-vd-prod, .ar-sem-mov .ar-pd-foto > img, .ar-sem-mov .ar-recibo, .ar-sem-mov .ar-pd-kpis .ar-kpi[role="button"] { transition: none !important; }
.ar-sem-mov .ar-vd-prod:hover, .ar-sem-mov .ar-lista-produtos .ar-cardev:hover .ar-pd-foto > img,
.ar-sem-mov .ar-pd-kpis .ar-kpi[role="button"]:hover { transform: none; }

/* sotreino 2d-analises */
/* ============================================================================
   ANALISES (onda 2D do plano So Treino, 19/10/2026) - Gestor\Analises:
   Indicadores (abas Geral | Financeiro | Provas), Central de retencao, Resumo
   semanal e Aniversariantes. O Delphi (uAnalises.pas) manda so classe e dado.
   - movimento: so os ganchos da onda 1 - .ar-dash (KPIs e blocos em cascata),
     .ar-aba-painel + data-mv-dir (aba que desliza), data-mv-abre (cartoes da
     retencao), .ar-graf-b (barras e linhas sobem), .ar-rosca-varre (rosca
     varre das 12h), .ar-prog (barra enche), .ar-graf-v (pontos e numeros no
     fim). Nenhum keyframe aqui
   - dica dos graficos: .ar-gd, posta pelo arGrafDica do adson-tema.js (bloco
     "sotreino 2d-analises"); a dica dos KPIs (i) e so CSS (M22: desce 8px)
   - cores das series pela variavel --an-c: c0..c7 na ordem fixa (paleta
     validada: azul, laranja, aqua, amarelo, magenta, verde, violeta,
     vermelho), g1 = nao informado, g2 = outros, g-f/g-m/g-n = sexo, s-ink =
     serie unica (a maior em vermelho), s-ent/s-sai = entradas e saidas,
     l-atu/l-ant = semana atual e passada. Toda serie tem legenda com o nome
   - 1366 (quadro ~1080px): 5 KPIs por linha e 2 colunas de blocos; abaixo de
     760px, 2 e 1 (container query no .ar-ix)
   ========================================================================== */
.ar-ix { container: arix / inline-size; font-family: var(--ds-font); }
.ar-dash.ar-ix, .ar-ix-rolo { padding: 2px 2px 24px; }
.ar-ix-rolo {
  height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; position: relative;
  background: var(--ds-bg); color: var(--ds-text-2);
  scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-ix-rolo::-webkit-scrollbar { width: 8px; }
.ar-ix-rolo::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }

/* cores das series */
.ar-ix .c0, .ar-ix-lista .c0, .ar-gd .c0 { --an-c: #2A78D6; }
.ar-ix .c1, .ar-ix-lista .c1, .ar-gd .c1 { --an-c: #EB6834; }
.ar-ix .c2, .ar-ix-lista .c2, .ar-gd .c2 { --an-c: #1BAF7A; }
.ar-ix .c3, .ar-ix-lista .c3, .ar-gd .c3 { --an-c: #EDA100; }
.ar-ix .c4, .ar-ix-lista .c4, .ar-gd .c4 { --an-c: #E87BA4; }
.ar-ix .c5, .ar-ix-lista .c5, .ar-gd .c5 { --an-c: #008300; }
.ar-ix .c6, .ar-ix-lista .c6, .ar-gd .c6 { --an-c: #6250D6; }
.ar-ix .c7, .ar-ix-lista .c7, .ar-gd .c7 { --an-c: #E34948; }
.ar-ix .g1, .ar-gd .g1 { --an-c: #A3AAB6; }
.ar-ix .g2, .ar-gd .g2 { --an-c: #8B93A1; }
.ar-ix .g-f, .ar-gd .g-f { --an-c: #D55181; }
.ar-ix .g-m, .ar-gd .g-m { --an-c: #2A78D6; }
.ar-ix .g-n, .ar-gd .g-n { --an-c: #A3AAB6; }
.ar-ix .s-ink, .ar-gd .s-ink { --an-c: #111318; }
.ar-ix .s-ent, .ar-gd .s-ent { --an-c: #2A78D6; }
.ar-ix .s-sai, .ar-gd .s-sai { --an-c: #EB6834; }
.ar-ix .l-atu, .ar-gd .l-atu { --an-c: #C8161D; }
.ar-ix .l-ant, .ar-gd .l-ant { --an-c: #8B93A1; }

/* icones novos (mascara na cor do texto, como os .ar-hj-ic do Inicio) */
.ar-hj-ic.ic-ix-alvo { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ix-trofeu { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4zM17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ix-alerta { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ix-pausa { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ix-info { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- abas e cabecalhos */
.ar-ix-abas { margin: 2px 0 16px; }
.ar-ix-quando { margin-left: auto; font: 500 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-ix-painel { min-width: 0; }

/* ---------------------------------------------------------------- KPIs */
.ar-ix-kpis { display: grid; gap: 14px; }
.ar-ix-kpis.c1 { grid-template-columns: minmax(0, 1fr); }
.ar-ix-kpis.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-ix-kpis.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-ix-kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-ix-kpis.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ar-ix-kpi {
  padding: 15px 16px 13px; min-width: 0;
  background-image: linear-gradient(var(--an-k, transparent), var(--an-k, transparent));
  background-repeat: no-repeat; background-size: 28px 3px; background-position: 16px 0;
}
.ar-ix-kpi:hover, .ar-ix-kpi:focus-within { z-index: 5; }
.ar-ix-kpi.k-azul { --an-k: #2A78D6; }
.ar-ix-kpi.k-verde { --an-k: #15803D; }
.ar-ix-kpi.k-vermelho { --an-k: #C8161D; }
.ar-ix-kpi.k-anil { --an-k: #4338CA; }
.ar-ix-kpi.k-ambar { --an-k: #D97706; }
.ar-ix-kpi .ar-kpi-t { display: block; line-height: 1.3; min-height: 2.6em; overflow-wrap: anywhere; }
.ar-ix-kpi .ar-kpi-v { font-size: 28px; overflow-wrap: anywhere; }
.ar-ix-kpi.din .ar-kpi-v { font-size: 24px; }
.ar-ix-kpi.pos .ar-kpi-v { color: var(--ds-success); }
.ar-ix-kpi.neg .ar-kpi-v { color: var(--ds-danger); }
.ar-kpi-s.ar-ix-kpi-s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 9px; padding-top: 9px; }
.ar-ix-d { font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-ix-d b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-ix-d.bom b { color: var(--ds-success); }
.ar-ix-d.ruim b { color: var(--ds-danger); }
.ar-ix-d.igual b { color: var(--ds-muted); }
.ar-ix-rod { font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ix-d + .ar-ix-rod { flex-basis: 100%; }
/* dica do KPI (i): desce 8px e esmaece em 160ms; sai subindo (M22) */
.ar-ix-dica {
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; box-sizing: border-box; cursor: help;
  border: 1.5px solid #B9BFCA; color: #6B7280; font: 700 10.5px/1 var(--ds-font); letter-spacing: 0; text-transform: none;
  font-style: normal; outline: none; transition: border-color .12s ease, color .12s ease;
}
.ar-ix-dica:hover, .ar-ix-dica:focus-visible { border-color: var(--ds-ink); color: var(--ds-ink); }
.ar-ix-dica::after {
  content: attr(data-dica); position: absolute; left: -10px; top: calc(100% + 10px); z-index: 30; width: 240px;
  box-sizing: border-box; padding: 9px 12px; border-radius: 8px; pointer-events: none; white-space: normal;
  background: #16181D; color: #FFFFFF; box-shadow: 0 10px 24px -8px rgba(16, 24, 40, .45);
  font: 500 13px/1.45 var(--ds-font); letter-spacing: 0; text-transform: none; text-align: left;
  opacity: 0; transform: translateY(-8px); transition: opacity .15s var(--mv-sai, ease), transform .15s var(--mv-sai, ease);
}
.ar-ix-dica:hover::after, .ar-ix-dica:focus-visible::after { opacity: 1; transform: none; }
.ar-ix-kpis.c5 > :nth-child(5n) .ar-ix-dica::after, .ar-ix-kpis.c4 > :nth-child(4n) .ar-ix-dica::after,
.ar-ix-kpis.c3 > :nth-child(3n) .ar-ix-dica::after { left: auto; right: -10px; }

/* ---------------------------------------------------------------- blocos */
.ar-ix-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.ar-ix-grade:has(> .ar-ix-l3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-ix-grade > .larga { grid-column: 1 / -1; }
.ar-bloco.ar-ix-bloco { padding: 16px 18px 18px; overflow: visible; min-width: 0; }
.ar-ix-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 26px; margin-bottom: 4px; }
.ar-ix-cab > .ar-hj-ic { color: var(--ds-ink); }
.ar-ix-cab > b { font: 700 15px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-ix-cab > em {
  font: 700 12px/1 var(--ds-font); font-style: normal; color: #4B5361; background: #F1F2F5;
  border-radius: 999px; padding: 4px 8px; font-variant-numeric: tabular-nums;
}
.ar-ix-cab > a {
  margin-left: auto; font: 600 13px/1.3 var(--ds-font); color: var(--ds-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; transition: color .12s ease;
}
.ar-ix-cab > a:hover { color: var(--ds-primary); }
.ar-ix-cab > .ic-alunos, .ar-ix-cab > .ic-ix-info { color: #2A78D6; }
.ar-ix-cab > .ic-conta { color: #B45309; }
.ar-ix-cab > .ic-agenda { color: #4338CA; }
.ar-ix-cab > .ic-relogio { color: #0E7490; }
.ar-ix-cab > .ic-treino, .ar-ix-cab > .ic-aluno-mais { color: #15803D; }
.ar-ix-cab > .ic-ix-trofeu { color: #B7791F; }
.ar-ix-cab > .ic-ix-alerta { color: var(--ds-danger); }
.ar-ix-cab > .ic-bolo { color: #BE185D; }
.ar-ix-cab > .ic-ix-alvo { color: #6250D6; }
.ar-ix-cab > .ic-grafico, .ar-ix-cab > .ic-prova { color: var(--ds-primary); }
.ar-ix-sub { margin: 0 0 12px; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ix-cab + .ar-ix-graf, .ar-ix-cab + .ar-ix-rosca, .ar-ix-cab + div { margin-top: 10px; }
.ar-ix-vazio { padding: 8px 0 4px; font: 400 14px/1.55 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ix-vazio b { display: block; margin-bottom: 2px; font: 600 15px/1.4 var(--ds-font); color: var(--ds-text-2); }
.ar-ix-tab { overflow-x: auto; }

/* ---------------------------------------------------------------- graficos */
.ar-ix-graf { position: relative; }
.ar-graf.ar-ix-svg.h190 { height: 190px; }
.ar-graf.ar-ix-svg.h210 { height: 210px; }
.ar-ix-svg .ar-graf-b { fill: var(--an-c, var(--ds-ink)); }
.ar-ix-svg .ar-graf-b.max { fill: var(--ds-primary); }
.ar-ix-svg .ar-graf-b, .ar-ix-svg .ar-graf-v, .ar-ix-eixo-t { pointer-events: none; }
.ar-ix-eixo-t { font: 500 13px var(--ds-font); fill: var(--ds-muted); font-variant-numeric: tabular-nums; }
/* coluna inteira e o alvo da dica (mais facil que a barra fina): o fundo marca onde esta */
.ar-ix-alvo { fill: transparent; cursor: default; transition: fill .1s ease; }
.ar-ix-alvo:hover, .ar-ix-alvo.ativo { fill: rgba(17, 19, 24, .045); }
.ar-ix-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.ar-ix-leg span { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--ds-font); color: var(--ds-text-2); }
.ar-ix-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--an-c); }
.ar-ix-leg i.l-ant { height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--an-c) 0 4px, transparent 4px 6px); }
.ar-ix-leg i.l-atu { height: 3px; border-radius: 2px; }

/* rosca: as fatias saem 8px no hover (o JS empurra pelo data-ga); legenda ligada */
.ar-ix-rosca { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.ar-ix-rosca-c { position: relative; flex: none; width: 172px; height: 172px; }
.ar-graf.ar-ix-rosca-svg { width: 172px; height: 172px; overflow: visible; }
.ar-ix-rosca-fundo { fill: none; stroke: #F1F2F5; stroke-width: 18; }
.ar-ix-fatia { fill: none; stroke: var(--an-c); stroke-width: 18; cursor: pointer; transition: transform .1s ease-out, opacity .15s ease; }
.ar-ix-rosca:has(.ar-ix-fatia.ativo) .ar-ix-fatia:not(.ativo) { opacity: .55; }
.ar-ix-rosca-meio {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.ar-ix-rosca-meio b { font: 800 24px/1.1 var(--ds-font); color: var(--ds-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-ix-rosca-meio.din b { font-size: 16px; letter-spacing: -.01em; }
.ar-ix-rosca-meio span { margin-top: 3px; font: 500 13px/1.3 var(--ds-font); color: var(--ds-muted); max-width: 110px; }
.ar-ix-rosca-leg { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-ix-rosca-leg li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 42px; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 8px; font: 500 14px/1.3 var(--ds-font); color: var(--ds-text-2); cursor: default;
  transition: background-color .12s ease;
}
.ar-ix-rosca-leg li:hover, .ar-ix-rosca-leg li.ativo { background: var(--ds-hover); }
.ar-ix-rosca-leg li i { width: 10px; height: 10px; border-radius: 50%; background: var(--an-c); }
.ar-ix-rosca-leg li span { min-width: 0; overflow-wrap: anywhere; }
.ar-ix-rosca-leg li b { font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-ix-rosca-leg li em { font: 500 13px var(--ds-font); font-style: normal; color: var(--ds-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* barras deitadas, ocupacao e provas */
.ar-ix-hb { display: flex; flex-direction: column; gap: 2px; }
.ar-ix-hb-l {
  display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 6px; margin: 0 -6px; border-radius: 8px; transition: background-color .12s ease;
}
.ar-ix-hb-l:hover, .ar-ix-oc:hover, .ar-ix-top:hover { background: var(--ds-hover); }
.ar-ix-hb-l .r { font: 600 14px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-ix-hb-l .r small { display: block; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-ix-hb-l b, .ar-ix-oc b { font: 700 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; text-align: right; min-width: 36px; }
.ar-ix-hb .ar-prog, .ar-ix-oc .ar-prog { height: 8px; }
.ar-ix-hb .ar-prog > i { background: var(--ds-ink); }
.ar-ix-hb-l:hover .ar-prog > i { background: var(--ds-primary); }
.ar-ix-ocs { display: flex; flex-direction: column; gap: 2px; }
.ar-ix-oc {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(70px, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 6px; margin: 0 -6px; border-radius: 8px; transition: background-color .12s ease;
}
.ar-ix-oc[onclick] { cursor: pointer; }
.ar-ix-oc .r { min-width: 0; }
.ar-ix-oc .r span { display: block; font: 600 14px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-ix-oc .r small { display: block; margin-top: 1px; font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ix-oc .ar-prog > i { background: var(--ds-info); }
.ar-ix-oc.alta .ar-prog > i { background: #D97706; }
.ar-ix-oc.cheia .ar-prog > i { background: var(--ds-danger); }
.ar-ix-oc.livre .ar-prog > i { background: #8B93A1; }

/* TOP 10 */
.ar-ix-tops { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.ar-ix-top { display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 8px; cursor: pointer; transition: background-color .12s ease; }
.ar-ix-top .pos {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 800 13px var(--ds-font); color: #4B5361; background: #F1F2F5;
}
.ar-ix-top .pos.ouro { background: #F6CF55; color: #5B4300; }
.ar-ix-top .pos.prata { background: #D9DDE3; color: #374151; }
.ar-ix-top .pos.bronze { background: #E7B28A; color: #5A2E0E; }
.ar-ix-top .tx { flex: 1 1 auto; min-width: 0; }
.ar-ix-top .tx span { display: block; font: 600 14px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-ix-top .tx small { display: block; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-ix-top .tx .ar-prog { height: 4px; margin-top: 5px; }
.ar-ix-top .tx .ar-prog > i { background: var(--ds-ink); }
.ar-ix-top > b { flex: none; min-width: 32px; text-align: right; font: 800 17px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }

/* pessoas nos blocos (em risco, aniversariantes, listas da semana) */
.ar-hj-lista.ar-ix-lista-c { max-height: 312px; margin: 0 -6px; padding: 0 6px; }
.ar-hj-pes.ar-ix-pes-l { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; transition: background-color .12s ease; }
.ar-hj-pes.ar-ix-pes-l:hover { background: var(--ds-hover); }
.ar-hj-pes > .tx > small em.atraso { font-style: normal; font-weight: 700; color: var(--ds-danger); }
.ar-ix-dias {
  flex: none; font: 700 12px/1 var(--ds-font); color: var(--ds-warn); background: var(--ds-warn-bg);
  border-radius: 999px; padding: 5px 9px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ar-ix-dias.ruim { color: var(--ds-danger); background: var(--ds-danger-bg); }
.ar-ix-hoje {
  display: inline-block; font: 800 11px/1 var(--ds-font); letter-spacing: .06em; color: #FFFFFF; background: #BE185D;
  border-radius: 6px; padding: 4px 7px; vertical-align: 1px;
}
.ar-hj-pes.hoje > .tx > span { color: #BE185D; }
.ar-hj-zap.ar-ix-semzap { cursor: not-allowed; }
.ar-hj-zap.ar-ix-semzap::before { background-color: #C2C7D0; }
.ar-hj-zap.ar-ix-semzap:hover { background: none; scale: none; }

/* clientes captados */
.ar-ix-sts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ar-ix-st { background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft); border-radius: 10px; padding: 10px 8px; text-align: center; min-width: 0; }
.ar-ix-st b { display: block; font: 800 22px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-ix-st span { display: block; margin-top: 3px; font: 600 12px/1.25 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ix-st.s3 b { color: var(--ds-success); }
.ar-ix-st.s4 b { color: var(--ds-muted); }
.ar-ix-conv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 8px; font: 600 14px var(--ds-font); color: var(--ds-text-2); }
.ar-ix-conv b { font: 800 20px var(--ds-font); color: var(--ds-success); }
.ar-ix-conv + .ar-prog > i { background: var(--ds-success); }
.ar-ix-conv-sub { margin-top: 8px; font: 500 13px var(--ds-font); color: var(--ds-muted); }

/* progresso da previsao (M07: trilho de 14px, o numero ja nasce final) */
.ar-ix-prev-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 12px; }
.ar-ix-prev-n b { font: 800 34px/1 var(--ds-font); color: var(--ds-text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-ix-prev-n span { font: 600 15px var(--ds-font); color: var(--ds-text-2); }
.ar-prog.ar-ix-prog-g { height: 14px; }
.ar-prog.ar-ix-prog-g > i { background: var(--ds-success); }
.ar-ix-prev-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-ix-prev-sub b { color: var(--ds-text); font-weight: 700; }

/* linha da semana: o traco e os pontos nao esticam (vector-effect) */
.ar-graf.ar-ix-linhas { height: 200px; }
.ar-ix-linhas .ar-graf-b.ar-ix-l { fill: none; stroke: var(--an-c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.ar-ix-linhas .ar-graf-b.ar-ix-l.l-ant { stroke-width: 2; stroke-dasharray: 6 5; }
.ar-ix-linhas .ar-graf-b.ar-ix-area { fill: rgba(200, 22, 29, .09); stroke: none; pointer-events: none; }
.ar-ix-pt { fill: none; stroke: var(--an-c); stroke-width: 8; stroke-linecap: round; pointer-events: none; }
.ar-ix-pt.l-ant { stroke-width: 6; }
.ar-ix-pt.hoje { stroke-width: 12; }
.ar-ix-eixo7 { display: flex; margin-top: 4px; }
.ar-ix-eixo7 span { flex: 1 1 0; text-align: center; font: 600 13px/1.25 var(--ds-font); color: var(--ds-text-2); }
.ar-ix-eixo7 small { display: block; font: 500 13px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-ix-eixo7 span.hoje, .ar-ix-eixo7 span.hoje small { color: var(--ds-primary); }

/* navegacao da semana e fichas (chips: troca de cor em 120ms, sem deslizar - M13) */
.ar-ix-semana { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 16px; }
.ar-ix-semana > b { font: 800 17px/1.3 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; margin: 0 4px; }
.ar-ix-chip {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--ds-field); border-radius: 999px; background: var(--ds-surface); color: var(--ds-text-2);
  font: 600 14px var(--ds-font); cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ar-ix-chip:hover { border-color: var(--ds-field-hover); color: var(--ds-text); }
.ar-ix-chip.sel { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-ix-chip.seta { width: 34px; padding: 0; font-size: 20px; line-height: 1; }
.ar-ix-chip.off { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------- central de retencao */
.ar-ix-lista { container: arixl / inline-size; }
.ar-ix-ret-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 2px 0 16px; }
.ar-kpi.ar-ix-ret { padding: 16px 56px 14px 18px; cursor: pointer; user-select: none; min-width: 0; outline: none; }
.ar-kpi.ar-ix-ret.r1 { --an-k: #D97706; }
.ar-kpi.ar-ix-ret.r2 { --an-k: #4338CA; }
.ar-kpi.ar-ix-ret.r3 { --an-k: #B91C1C; }
.ar-kpi.ar-ix-ret.r4 { --an-k: #0E7490; }
.ar-ix-ret-ic {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--an-k, var(--ds-ink)); background: color-mix(in srgb, var(--an-k, #111318) 12%, #FFFFFF);
}
.ar-ix-ret-ic .ar-hj-ic { width: 19px; height: 19px; }
.ar-ix-ret .ar-kpi-v { font-size: 30px; }
.ar-ix-ret-s { margin-top: 6px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-kpi.ar-ix-ret.sel, .ar-kpi.ar-ix-ret.sel:hover {
  border-color: var(--an-k); background-color: color-mix(in srgb, var(--an-k, #111318) 6%, #FFFFFF);
  box-shadow: 0 0 0 1px var(--an-k), 0 10px 22px -16px var(--an-k);
}
.ar-kpi.ar-ix-ret.sel .ar-kpi-v { color: var(--an-k); }
.ar-kpi.ar-ix-ret:focus-visible { box-shadow: var(--ds-ring); }
.ar-ix-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 0 0 10px; }
.ar-ix-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; transition: opacity .15s ease; }
.ar-ix-filtro.apagado { opacity: .5; }
.ar-ix-filtro > .rot { margin-right: 4px; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-ix-dias-in { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font: 500 14px var(--ds-font); color: var(--ds-muted); }
.ar-ix-dias-in input {
  width: 66px; height: 34px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--ds-field); border-radius: 10px;
  background: var(--ds-surface); color: var(--ds-text); font: 600 14px var(--ds-font); text-align: center; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-ix-dias-in input:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-ix-explica {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
  background: #F8FAFC; border: 1px solid var(--ds-border-soft); font: 500 14px/1.5 var(--ds-font); color: var(--ds-text-2);
}
.ar-ix-explica > .ar-hj-ic { width: 17px; height: 17px; margin-top: 2px; color: var(--ds-info); }
.ar-ix-explica b { color: var(--ds-text); }
/* cartoes de pessoa: foto no nome, acoes (WhatsApp + ABRIR) no topo */
.ar-ix-cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.ar-ix-pes-nome { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.ar-ix-pes-nome > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ar-ix-acoes { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ar-vt-tabela td.ar-vt-acao .ar-ix-acoes { justify-content: flex-end; }
.ar-ix-selo-anil { background: #EEF2FF; color: #4338CA; }
.ar-ix-selo-rosa { background: #FCE7F3; color: #BE185D; }
.ar-ix-selo-hoje { background: #BE185D; color: #FFFFFF; }
.ar-cardev-linhas dd.ar-ix-dd-hoje { color: #BE185D; font-weight: 700; }
.ar-cardev-linhas dd.ar-venc-atraso { color: var(--ds-danger); font-weight: 700; }
.ar-cardev-linhas dd.ar-venc-perto { color: var(--ds-warn); font-weight: 700; }
/* esqueleto (M05, so aqui): o desenho final em cinza com a onda */
.ar-ix-esq .ar-esq { display: block; }
.ar-ix-esq .ar-ix-ret { cursor: default; pointer-events: none; }
.ar-ix-esq .e-ic { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; }
.ar-ix-esq .e-t { width: 55%; height: 12px; }
.ar-ix-esq .e-v { width: 30%; height: 28px; margin-top: 10px; }
.ar-ix-esq .e-s { width: 75%; height: 12px; margin-top: 12px; }
.ar-ix-esq .e-f { width: 280px; max-width: 45%; height: 34px; border-radius: 999px; }
.ar-ix-esq-l { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ar-ix-esq-i { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); }
.ar-ix-esq-i > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.ar-ix-esq .e-av { flex: 0 0 38px; height: 38px; border-radius: 50%; }
.ar-ix-esq .e-n { width: 180px; max-width: 60%; height: 14px; }
.ar-ix-esq .e-x { width: 280px; max-width: 80%; height: 12px; }
.ar-ix-esq .e-p { flex: 0 0 74px; height: 24px; border-radius: 999px; }
.ar-ix-esq .e-z { flex: 0 0 34px; height: 34px; border-radius: 50%; }
.ar-ix-carregando { padding: 14px; text-align: center; font: 500 14px var(--ds-font); color: var(--ds-muted); }

/* ---------------------------------------------------------------- aniversariantes */
.ar-ix-aniv-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 14px; }
.ar-ix-aniv-cab > .ar-hj-ic { width: 22px; height: 22px; color: #BE185D; }
.ar-ix-aniv-cab > b { font: 800 19px/1.3 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-ix-aniv-cab > em {
  font: 700 12px/1 var(--ds-font); font-style: normal; color: #4B5361; background: #F1F2F5;
  border-radius: 999px; padding: 5px 9px; font-variant-numeric: tabular-nums;
}
.ar-ix-mes-c { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ar-ix-mes-c > span { font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-ix-mes {
  height: 38px; box-sizing: border-box; min-width: 150px; padding: 0 36px 0 12px; border: 1px solid var(--ds-field); border-radius: 10px;
  background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6673' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px 15px;
  font: 600 14px var(--ds-font); color: var(--ds-text); cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-ix-mes:hover { border-color: var(--ds-field-hover); }
.ar-ix-mes:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }

/* ---------------------------------------------------------------- dica dos graficos (arGrafDica) */
.ar-gd {
  position: fixed; left: 0; top: 0; z-index: 9000; max-width: 280px; box-sizing: border-box; padding: 8px 11px 9px;
  border-radius: 8px; background: rgba(17, 19, 24, .92); color: #FFFFFF; pointer-events: none;
  box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .5); font: 500 13px/1.45 var(--ds-font);
  opacity: 0; transition: transform .4s cubic-bezier(.23, 1, .32, 1), opacity .12s linear;
}
.ar-gd.on { opacity: 1; }
.ar-gd.pula { transition: opacity .12s linear; }
.ar-gd .t { display: block; margin-bottom: 3px; font: 700 13px var(--ds-font); color: #FFFFFF; }
.ar-gd .l { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ar-gd .l i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--an-c, #FFFFFF); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
.ar-gd .l span { color: rgba(255, 255, 255, .78); }
.ar-gd .l b { margin-left: auto; padding-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-gd .l em { font-style: normal; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- telas menores */
@container arix (max-width: 1000px) {
  .ar-ix-kpis.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-ix-kpis.c5 > :nth-child(5n) .ar-ix-dica::after { left: -10px; right: auto; }
  .ar-ix-kpis.c5 > :nth-child(3n) .ar-ix-dica::after { left: auto; right: -10px; }
  .ar-ix-grade:has(> .ar-ix-l3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container arix (max-width: 760px) {
  .ar-ix-kpis.c3, .ar-ix-kpis.c4, .ar-ix-kpis.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-ix-grade, .ar-ix-grade:has(> .ar-ix-l3) { grid-template-columns: minmax(0, 1fr); }
  .ar-ix-sts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container arixl (max-width: 900px) {
  .ar-ix-ret-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1500px) {
  .ar-ix-kpi .ar-kpi-v { font-size: 26px; }
  .ar-ix-kpi.din .ar-kpi-v { font-size: 22px; }
}
/* sotreino 2b-alunos */
/* ============================================================================
   ALUNOS: CARTAO DE PESSOA E PERFIL DO ALUNO (onda 2B do plano So Treino,
   19/10/2026) - Gestor/uCartoes.pas (CartaoPessoa), Cadastros/uCadAtleta e
   Cadastros/uPerfilAluno.

   - .ar-cardev-pessoa: cartao compacto da lista de Alunos (avatar de 44 px com
     a foto ou as iniciais ar-av-0..5, nome, linha do vencimento cinza /
     laranja / vermelha, pilula e ABRIR). O topo do cartao vira grade
     (display: contents), como o cartao de pessoa dos Usuarios.
   - .ar-pf: o perfil inteiro rola dentro do frame. Faixa escura com a foto por
     cima, Informacoes / Ocultar (tres colunas), barra de acoes, os quatro
     numeros (.ar-kpis - a cascata da onda 1), a fileira de abas que gruda no
     alto ao rolar (o cursor preto desliza: adson-tema.js arPerfilAba) e o
     conteudo da aba (.ar-aba-painel data-mv-dir - a entrada lateral da onda 1).
   - Icones (--pf-ic) por mascara, na cor do texto.
   ========================================================================== */

/* ---- lista: chip de contagem e cartao de pessoa */
.ar-lista-alunos .ar-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ar-lista-alunos .ar-cards-total {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; box-sizing: border-box; padding: 0 13px 0 11px;
  border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface); white-space: nowrap;
  font: 700 13px var(--ds-font); color: var(--ds-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ar-lista-alunos .ar-cards-total::before {
  content: ''; width: 16px; height: 16px; flex: none; background-color: var(--ds-muted);
  -webkit-mask: var(--pf-chip) no-repeat center / contain; mask: var(--pf-chip) no-repeat center / contain;
  --pf-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0113 0'/%3E%3Cpath d='M16 4.7a3.5 3.5 0 010 6.6M18.2 14.3A6.5 6.5 0 0121.5 20'/%3E%3C/svg%3E");
}
.ar-cardev-pessoa {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: "av nome btn" "av sub pil" "lin lin lin";
  align-items: center; column-gap: 14px; row-gap: 3px; padding: 14px 16px;
}
.ar-cardev-pessoa .ar-cardev-topo { display: contents; }
.ar-cardev-pessoa .ar-cardev-esq { grid-area: av; align-self: start; display: block; }
.ar-cardev-pessoa .ar-cardev-btn { grid-area: btn; justify-self: end; align-self: start; padding: 6px 12px; }
.ar-cardev-pessoa .ar-cardev-nome { grid-area: nome; font-size: 16px; line-height: 1.3; }
.ar-cardev-pessoa .ar-pes-sub {
  grid-area: sub; min-width: 0; font: 600 13px/1.35 var(--ds-font); color: var(--ds-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-cardev-pessoa .ar-pes-sub.ar-venc-perto { color: var(--ds-warn); }
.ar-cardev-pessoa .ar-pes-sub.ar-venc-atraso { color: var(--ds-danger); }
.ar-cardev-pessoa .ar-pes-pil { grid-area: pil; justify-self: end; }
.ar-cardev-pessoa .ar-cardev-linhas {
  grid-area: lin; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ds-border-soft); gap: 3px 12px;
}
.ar-cardev-pessoa:has(.ar-sit-inativo) .ar-pes-av { filter: saturate(.35); }

/* ---- avatar: as iniciais por baixo, a foto por cima (some se nao carregar) */
.ar-pes-av, .ar-vt-av, .ar-pf-foto, .ar-pf-rank-av, .ar-pf-obs-av { position: relative; overflow: hidden; }
.ar-pes-av img, .ar-vt-av img, .ar-pf-foto img, .ar-pf-rank-av img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.ar-pes-av { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px -6px rgba(16, 24, 40, .45); }
.ar-vt-av { width: 26px; height: 26px; margin-right: 9px; font-size: 11px; vertical-align: middle; }

/* ---- perfil: a pagina rola dentro do frame */
.ar-pf {
  position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  padding: 2px 6px 28px 2px; font-family: var(--ds-font); color: var(--ds-text-2); scrollbar-gutter: stable;
}
.ar-pf::-webkit-scrollbar { width: 8px; }
.ar-pf::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-pf-envios {
  position: absolute !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}

/* ---- cabecalho: faixa, foto por cima, nome e pilula */
.ar-pf-cab {
  position: relative; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px;
  box-shadow: var(--ds-shadow); overflow: hidden;
}
.ar-pf-faixa {
  height: 96px;
  background: radial-gradient(120% 160% at 100% 0%, rgba(200, 22, 29, .6) 0%, rgba(200, 22, 29, 0) 56%),
              linear-gradient(118deg, #20242D 0%, var(--ds-ink) 58%, #050608 100%);
}
.ar-pf-id { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 18px; margin-top: -46px; padding: 0 22px 16px; }
.ar-pf-foto-box { position: relative; flex: none; }
.ar-pf-foto {
  width: 104px; height: 104px; font-size: 34px; letter-spacing: .02em;
  box-shadow: 0 0 0 4px #FFFFFF, 0 14px 26px -12px rgba(16, 24, 40, .55);
}
.ar-pf-camera {
  position: absolute; right: 0; bottom: 4px; width: 34px; height: 34px; padding: 0; border: 3px solid #FFFFFF;
  border-radius: 50%; background: var(--ds-primary); color: #FFFFFF; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 14px -6px rgba(200, 22, 29, .7); transition: background-color .12s ease, scale .15s ease;
}
.ar-pf-camera::before {
  content: ''; width: 15px; height: 15px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.5h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.5h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ar-pf-camera:hover { background: var(--ds-primary-hover); scale: 1.08; }
.ar-pf-camera:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pf-quem { flex: 1 1 320px; min-width: 0; padding-bottom: 4px; }
.ar-pf-nome-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ar-pf-nome { margin: 0; font: 800 26px/1.15 var(--ds-font); color: var(--ds-text); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ar-pf-nome-linha .ar-selo { font-size: 13px; padding: 4px 12px; }
.ar-pf-resumo { display: flex; flex-wrap: wrap; row-gap: 4px; margin-top: 6px; font: 600 14px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-pf-resumo > span + span::before { content: '\00B7'; margin: 0 9px; color: var(--ds-faint); font-weight: 800; }
.ar-pf-venc.ar-venc-perto { color: var(--ds-warn); }
.ar-pf-venc.ar-venc-atraso { color: var(--ds-danger); }
.ar-pf-info-bt {
  margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 9px; height: 38px;
  padding: 0 14px; border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface);
  font: 600 14px var(--ds-font); color: var(--ds-text); cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.ar-pf-info-bt::after {
  content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.ar-pf-info-bt[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.ar-pf-info-bt:hover { background: var(--ds-surface-low); border-color: var(--ds-field-hover); }
.ar-pf-info-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }

/* ---- Informacoes: CONTATO / DADOS PESSOAIS / OUTROS */
.ar-pf-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 22px 16px;
  border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface-low);
}
.ar-pf-info[hidden] { display: none; }
.ar-pf-col { min-width: 0; padding: 14px 18px 16px; }
.ar-pf-col + .ar-pf-col { border-left: 1px solid var(--ds-border); }
.ar-pf-col h3 {
  position: relative; margin: 0 0 12px; padding-left: 16px; font: 700 12px/16px var(--ds-font); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ds-text);
}
.ar-pf-col h3::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--ds-primary);
}
.ar-pf-col dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; margin: 0; align-items: baseline; }
.ar-pf-col dt { font: 600 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-pf-col dd { margin: 0; min-width: 0; font: 600 14px/1.4 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-pf-col dd.ar-pf-nada { color: var(--ds-faint); font-weight: 500; }
.ar-pf-col dd.ar-falta {
  justify-self: start; padding: 0 9px; border-radius: 999px; background: var(--ds-warn-bg); color: var(--ds-warn);
  font-weight: 700; line-height: 21px;
}

/* ---- barra de acoes */
.ar-pf-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--ds-border-soft); }
.ar-pf-acao {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--ds-field);
  border-radius: 10px; background: var(--ds-surface); font: 600 14px var(--ds-font); color: var(--ds-text); cursor: pointer;
  white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease, translate .18s ease,
  box-shadow .18s ease;
}
.ar-pf-acao i, .ar-pf-bt i {
  width: 17px; height: 17px; flex: none; background-color: currentColor;
  -webkit-mask: var(--pf-ic) no-repeat center / contain; mask: var(--pf-ic) no-repeat center / contain;
}
.ar-pf-acao:hover:not(:disabled) {
  border-color: var(--ds-ink); background: var(--ds-ink); color: #FFFFFF; translate: 0 -1px;
  box-shadow: 0 6px 14px -8px rgba(17, 19, 24, .55);
}
.ar-pf-acao:active:not(:disabled) { translate: 0 0; box-shadow: none; }
.ar-pf-acao:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pf-acao:disabled { opacity: .45; cursor: default; }
.ar-pf-acao-perigo { color: var(--ds-danger); border-color: #F1C4C4; }
.ar-pf-acao-perigo:hover:not(:disabled) { background: var(--ds-danger); border-color: var(--ds-danger); }
.ar-pf [data-ic="lapis"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19 9.2 14.8 5 4 15.8V20z'/%3E%3Cpath d='M13.5 6.3l4.2 4.2'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="matricula"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="baixa"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="zap"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.4-4.2A8.3 8.3 0 1112 20.3a8.3 8.3 0 01-4.1-1.1z'/%3E%3Cpath d='M9.2 8.6c.2 2.6 3.2 5.8 6 6.2l.9-1.6-2.2-1.1-.9.8c-1-.5-1.9-1.4-2.4-2.4l.8-.9-1.1-2.2z'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="foto"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.5h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="evolucao"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5h16'/%3E%3Cpath d='M5 15l4.2-4.2 3.2 3.2L19 7.4'/%3E%3Cpath d='M14.6 7.2H19v4.4'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="senha"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.2'/%3E%3Cpath d='M11 12l8.5-8.5M16.5 6.5l2.2 2.2M14 9l2 2'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="lgpd"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.2c0 4.6-3.1 8.4-7.5 9.8-4.4-1.4-7.5-5.2-7.5-9.8V6z'/%3E%3Cpath d='M9 12.2l2.1 2.1 4-4.3'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="enviar"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4.5M7.5 9L12 4.5 16.5 9'/%3E%3Cpath d='M4 15.5V18a2 2 0 002 2h12a2 2 0 002-2v-2.5'/%3E%3C/svg%3E"); }

/* ---- os quatro numeros */
.ar-pf-kpis { margin-top: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ar-pf-kpis .ar-kpi { padding: 14px 16px; }
.ar-pf-kpis .ar-kpi-v { font-size: 26px; }
.ar-pf-kpis .ar-kpi-s { margin-top: 8px; padding-top: 8px; }

/* ---- fileira de abas: gruda no alto ao rolar; o cursor preto desliza */
.ar-pf-abas {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; padding: 7px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 18px -14px rgba(16, 24, 40, .35);
}
.ar-pf-aba {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0;
  padding: 0 13px; border: 0; border-radius: 10px; background: transparent; font: 600 14px var(--ds-font); color: #4B5361;
  cursor: pointer; white-space: nowrap; transition: color .08s ease, background-color .12s ease;
}
.ar-pf-aba:hover:not(.sel) { background: var(--ds-hover); color: var(--ds-text); }
.ar-pf-aba.sel { color: #FFFFFF; transition: color .08s ease .14s; }
.ar-pf-aba:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pf-aba em {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: #EEF0F3; color: #4B5361; font: 700 12px var(--ds-font); font-style: normal;
  transition: background-color .12s ease .1s, color .12s ease .1s;
}
.ar-pf-aba.sel em { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.ar-pf-cursor {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 36px; border-radius: 10px; background: var(--ds-ink);
  box-shadow: 0 1px 3px rgba(17, 19, 24, .25); pointer-events: none;
  transition: transform .22s var(--mv-forte, cubic-bezier(.2, .8, .2, 1)), width .22s var(--mv-forte, cubic-bezier(.2, .8, .2, 1));
}
.ar-pf-abas:not(.ar-pf-cursor-ok) .ar-pf-cursor { opacity: 0; }
.ar-pf-abas:not(.ar-pf-cursor-ok) .ar-pf-aba.sel { background: var(--ds-ink); }

/* ---- conteudo da aba */
.ar-pf-conteudo { margin-top: 14px; min-height: 240px; }
.ar-pf-conteudo[aria-busy="true"] { opacity: .6; transition: opacity .2s ease .25s; }
.ar-pf-painel {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px; box-shadow: var(--ds-shadow);
  padding: 18px 20px 20px;
}
.ar-pf-sec { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.ar-pf-sec:first-child { margin-top: 0; }
.ar-pf-sec span { font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); white-space: nowrap; }
.ar-pf-sec em {
  padding: 1px 8px; border: 1px solid var(--ds-border); border-radius: 999px; font: 600 12px var(--ds-font);
  font-style: normal; color: var(--ds-muted);
}
.ar-pf-sec i { flex: 1; height: 1px; background: var(--ds-border); }
.ar-pf-sec-dir { font: 600 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-pf-lista { display: flex; flex-direction: column; border: 1px solid var(--ds-border); border-radius: 12px; overflow: hidden; }
.ar-pf-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--ds-surface); transition: background-color .12s ease; }
.ar-pf-item + .ar-pf-item, .ar-pf-rank-sep + .ar-pf-item, .ar-pf-item + .ar-pf-rank-sep { border-top: 1px solid var(--ds-border-soft); }
.ar-pf-item:hover { background: var(--ds-hover); }
.ar-pf-item-alto { align-items: flex-start; }
.ar-pf-item-txt { flex: 1 1 auto; min-width: 0; }
.ar-pf-item-txt b { display: block; font: 700 15px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-pf-item-txt small { display: block; margin-top: 2px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-pf-item-val {
  flex: none; min-width: 92px; text-align: right; font: 800 15px/1.25 var(--ds-font); color: var(--ds-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ar-pf-item-val small { display: block; font: 500 12px var(--ds-font); color: var(--ds-muted); }
.ar-pf-item > .ar-selo, .ar-pf-item > .ar-sel { flex: none; }
.ar-pf-item-bts { display: flex; gap: 6px; flex: none; }
.ar-pf-item-destaque { background: linear-gradient(90deg, var(--ds-sel), var(--ds-surface) 65%); box-shadow: inset 3px 0 0 var(--ds-primary); }
.ar-pf-item-futuro .ar-pf-data { background: var(--ds-info-bg); border-color: transparent; }
.ar-pf-item-futuro .ar-pf-data b, .ar-pf-item-futuro .ar-pf-data small { color: var(--ds-info); }
.ar-pf-data {
  flex: none; width: 54px; display: grid; justify-items: center; padding: 6px 0 5px; box-sizing: border-box; line-height: 1;
  border-radius: 10px; background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft);
}
.ar-pf-data b { font: 800 18px var(--ds-font); color: var(--ds-text); }
.ar-pf-data small { margin-top: 3px; font: 700 11px var(--ds-font); text-transform: uppercase; letter-spacing: .04em; color: var(--ds-muted); }
.ar-pf-data i { margin-top: 3px; font: 600 12px var(--ds-font); font-style: normal; color: var(--ds-faint); }
.ar-pf-data-vazia { color: var(--ds-faint); padding: 14px 0; }
.ar-pf-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(150deg, #2B303A 0%, var(--ds-ink) 70%);
}
.ar-pf-ic::before {
  content: ''; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: var(--pf-ic) no-repeat center / contain; mask: var(--pf-ic) no-repeat center / contain;
}
.ar-pf-mini {
  flex: none; height: 32px; margin: 0; padding: 0 12px; border: 1px solid var(--ds-field); border-radius: 8px;
  background: var(--ds-surface); font: 600 13px var(--ds-font); color: var(--ds-text); cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ar-pf-mini:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-pf-mini:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pf-mini-perigo { color: var(--ds-danger); }
.ar-pf-mini-perigo:hover { background: var(--ds-danger); border-color: var(--ds-danger); }
.ar-pf-bt {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--ds-primary); color: #FFFFFF; font: 700 14px var(--ds-font); cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 16px -10px rgba(200, 22, 29, .7); transition: background-color .12s ease, translate .18s ease;
}
.ar-pf-bt:hover { background: var(--ds-primary-hover); translate: 0 -1px; }
.ar-pf-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pf-bt:disabled { opacity: .6; cursor: default; translate: none; }
.ar-pf-nota {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--ds-surface-low);
  font: 500 13px/1.55 var(--ds-font); color: var(--ds-text-2);
}
.ar-pf-nota b { color: var(--ds-text); }
.ar-pf-privado {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
  background: #EEF2FF; color: #3730A3; font: 500 13px/1.5 var(--ds-font);
}
.ar-pf-privado b { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; }
.ar-pf-privado b::before {
  content: ''; width: 13px; height: 13px; background-color: currentColor; transform: translateY(1px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- estado vazio dentro da aba */
.ar-pf-vazio.ar-vz {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 24px 32px; text-align: center;
  border: 1px dashed #CDD3DC; border-radius: 14px; background: var(--ds-surface);
}
.ar-pf-vazio .ar-vz-ic { width: 64px; height: 64px; margin-bottom: 4px; }
.ar-pf-vazio .ar-vz-ic::before { width: 28px; height: 28px; }
.ar-pf-vazio .ar-vz-tit { font-size: 19px; }
.ar-pf-vazio .ar-vz-txt { font-size: 15px; }
.ar-pf-vazio button.ar-cards-novo { border: 0; cursor: pointer; font-family: var(--ds-font); }
.ar-vz[data-ic="mensalidade"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="pagamento"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="presenca"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="prova"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4.5h11.5l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="diario"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h11a2 2 0 012 2v15H7a2 2 0 01-2-2V4.5a1 1 0 011-1z'/%3E%3Cpath d='M5 18.5a2 2 0 012-2h12'/%3E%3Cpath d='M9 8h6M9 11.5h4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="avaliacao"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="ranking"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 01-8 0z'/%3E%3Cpath d='M8 6H5a3 3 0 003 4M16 6h3a3 3 0 01-3 4'/%3E%3Cpath d='M12 13v4M8.5 20.5h7M9.5 17h5v3.5h-5z'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="obs"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v11l-5 5H5z'/%3E%3Cpath d='M14 20v-5h5'/%3E%3Cpath d='M8.5 9h7M8.5 12.5h4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="arquivo"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 00-2 2v13a2 2 0 002 2h10a2 2 0 002-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5'/%3E%3Cpath d='M9 13h6M9 16.5h4'/%3E%3C/svg%3E"); }

/* ---- presencas: resumo e barras por semana */
.ar-pf-resumo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ar-pf-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #F1F2F5;
  color: #4B5361; font: 600 13px var(--ds-font);
}
.ar-pf-chip b { font: 800 16px var(--ds-font); color: inherit; font-variant-numeric: tabular-nums; }
.ar-pf-chip.ok { background: var(--ds-success-bg); color: var(--ds-success); }
.ar-pf-chip.erro { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ar-pf-chip.azul { background: var(--ds-info-bg); color: var(--ds-info); }
.ar-pf-chip.escuro { background: var(--ds-ink); color: #FFFFFF; }
.ar-pf-graf-box { padding: 12px 14px 4px; border: 1px solid var(--ds-border); border-radius: 12px; }
.ar-pf-graf { display: block; width: 100%; height: auto; max-height: 190px; }
.ar-pf-graf .ar-graf-b { fill: #A7AFBD; }
.ar-pf-graf .ar-graf-b.atual { fill: var(--ds-primary); }
.ar-pf-graf .ar-graf-v { font: 700 12px var(--ds-font); fill: var(--ds-text); }
.ar-pf-graf-x { font: 600 11px var(--ds-font); fill: var(--ds-muted); }
.ar-pf-graf-base { stroke: var(--ds-border); stroke-width: 1; }

/* ---- provas */
.ar-pf-res { color: var(--ds-success); }
.ar-pf-res-fora { color: var(--ds-muted); }

/* ---- diario (privado) */
.ar-pf-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ar-pf-post {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; border: 1px solid var(--ds-border);
  border-radius: 12px; background: var(--ds-surface);
}
.ar-pf-post-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ar-pf-post-cab b { font: 700 14px var(--ds-font); color: var(--ds-text); }
.ar-pf-post-cab small { flex-basis: 100%; font: 500 13px var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-pf-post-tipo { padding: 2px 9px; border-radius: 999px; background: #F1F2F5; color: #4B5361; font: 700 12px var(--ds-font); }
.ar-pf-post-tipo.t1 { background: var(--ds-info-bg); color: var(--ds-info); }
.ar-pf-post-tipo.t2 { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ar-pf-post-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-pf-post-meta b { margin-right: 3px; font: 800 16px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-pf-post p { margin: 0; font: 500 14px/1.55 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ar-pf-post-foto { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; background: var(--ds-surface-low); }

/* ---- avaliacoes */
.ar-pf-notas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font: 600 13px var(--ds-font); color: var(--ds-text-2); }
.ar-pf-estrelas { margin-left: 4px; letter-spacing: 1px; white-space: nowrap; }
.ar-pf-estrelas i { font-style: normal; color: #D7DBE2; }
.ar-pf-estrelas i.on { color: #F59E0B; }
.ar-pf-item-txt q {
  display: block; margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--ds-border); border-radius: 0 8px 8px 0;
  background: var(--ds-surface-low); font: 500 14px/1.5 var(--ds-font); color: var(--ds-text-2); quotes: none;
}
.ar-pf-item-txt q::before, .ar-pf-item-txt q::after { content: none; }

/* ---- ranking */
.ar-pf-rank-topo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 4px; padding: 16px 20px;
  border-radius: 14px; color: #FFFFFF;
  background: radial-gradient(90% 160% at 100% 0%, rgba(200, 22, 29, .5) 0%, rgba(200, 22, 29, 0) 60%), linear-gradient(118deg, #20242D, var(--ds-ink));
}
.ar-pf-rank-pos b { display: block; font: 800 42px/1 var(--ds-font); letter-spacing: -.02em; }
.ar-pf-rank-pos small { font: 600 13px var(--ds-font); color: rgba(255, 255, 255, .72); }
.ar-pf-rank-num { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ar-pf-rank-num span { font: 500 13px var(--ds-font); color: rgba(255, 255, 255, .78); }
.ar-pf-rank-num b { display: block; font: 800 22px var(--ds-font); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ar-pf-rank-n { flex: none; width: 34px; text-align: center; font: 800 16px var(--ds-font); color: var(--ds-muted); }
.ar-pf-rank-av { width: 36px; height: 36px; font-size: 13px; }
.ar-pf-rank .ouro .ar-pf-rank-n { color: #B7791F; }
.ar-pf-rank .prata .ar-pf-rank-n { color: #7B8794; }
.ar-pf-rank .bronze .ar-pf-rank-n { color: #9A5B13; }
.ar-pf-item-eu { background: var(--ds-sel); box-shadow: inset 3px 0 0 var(--ds-primary); }
.ar-pf-item-eu .ar-pf-item-txt b { color: var(--ds-primary); }
.ar-pf-rank-sep { padding: 1px 0; text-align: center; background: var(--ds-surface-low); color: var(--ds-faint); font: 700 16px/1.2 var(--ds-font); }

/* ---- observacoes */
.ar-pf-obs-nova { margin-bottom: 12px; padding: 12px; border: 1px solid var(--ds-border); border-radius: 12px; background: var(--ds-surface-low); }
.ar-pf-obs-txt {
  display: block; width: 100%; min-height: 84px; box-sizing: border-box; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface); outline: none;
  font: 500 14px/1.5 var(--ds-font); color: var(--ds-text); transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-pf-obs-txt:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ar-pf-obs-txt.ar-pf-erro { border-color: var(--ds-danger); box-shadow: 0 0 0 3px rgba(185, 28, 28, .14); }
.ar-pf-obs-pe { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.ar-pf-obs-conta { font: 600 12px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-pf-obs-lista { display: flex; flex-direction: column; gap: 10px; }
.ar-pf-obs { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: 12px; }
.ar-pf-obs-av { width: 34px; height: 34px; font-size: 12px; }
.ar-pf-obs-corpo { flex: 1; min-width: 0; }
.ar-pf-obs-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ar-pf-obs-cab b { font: 700 14px var(--ds-font); color: var(--ds-text); }
.ar-pf-obs-cab small { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-pf-obs-cab .ar-pf-mini { margin-left: auto; height: 28px; }
.ar-pf-obs p { margin: 6px 0 0; font: 500 14px/1.55 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }

/* ---- arquivos e contratos */
.ar-pf-arq-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; }
.ar-pf-arq-barra span { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-pf-arq-ic {
  flex: none; width: 40px; height: 48px; box-sizing: border-box; padding-bottom: 7px; display: grid; place-items: end center;
  border-radius: 7px; background: #6B7280; color: #FFFFFF; font: 800 11px var(--ds-font); letter-spacing: .03em;
  clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
}
.ar-pf-arq-ic.t-pdf { background: #C8161D; }
.ar-pf-arq-ic.t-docx { background: #2F5DA8; }
.ar-pf-arq-ic.t-jpg, .ar-pf-arq-ic.t-png { background: #0F766E; }

/* ---- ficha do aluno: a dica embaixo do celular (como a do CPF, em cinza) */
.ar-dica-fone, .ar-dica-fone .x-innerhtml {
  font-size: 12.5px !important; line-height: 16px !important; font-weight: 600 !important;
  color: var(--ds-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- tela menor (notebook estreito, tablet) */
@media (max-width: 1180px) {
  .ar-pf-info { grid-template-columns: minmax(0, 1fr); }
  .ar-pf-col + .ar-pf-col { border-left: 0; border-top: 1px solid var(--ds-border); }
  .ar-pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ar-pf-id { margin-top: -40px; }
  .ar-pf-foto { width: 84px; height: 84px; font-size: 28px; }
  .ar-pf-nome { font-size: 22px; }
  .ar-pf-info-bt { margin-left: 0; }
  .ar-pf-item { flex-wrap: wrap; }
}
/* movimento reduzido ou desligado: o cursor pula, nada desliza */
@media (prefers-reduced-motion: reduce) {
  .ar-pf-cursor, .ar-pf-aba, .ar-pf-acao, .ar-pf-camera { transition-duration: .01s !important; }
}
.ar-sem-mov .ar-pf-cursor, .ar-sem-mov .ar-pf-aba, .ar-sem-mov .ar-pf-acao, .ar-sem-mov .ar-pf-camera,
.ar-sem-mov .ar-pf-bt, .ar-sem-mov .ar-pf-mini { transition: none !important; }

/* sotreino 2c-2e */
/* ============================================================================
   AGENDA, RANKING DE PRESENCAS E FINANCEIRO (ondas 2C e 2E do plano So Treino,
   19/10/2026) - uAgendaSemana, uRankingPresenca, uMovFinanceiro e o recibo.
   - movimento: so os ganchos da onda 1. Agenda: os sete dias sao .ar-kpis
     (cascata M02), cada lista de dia e a grade da semana sao .ar-cards-area
     com cartoes .ar-cardev (a lista que reaparece entra em cascata, M03), o
     painel do treino e .ar-aba-painel (desliza, M12), lotacao em .ar-prog
     (M07). Ranking: .ar-dash (blocos e KPIs em cascata), rosca com a
     mascara .ar-rosca-varre e barras .ar-graf-b (M08). Financeiro: .ar-kpis
     (blocos coloridos) e o ao vivo dentro de .ar-sem-entrada
   - paleta dos graficos e das modalidades: .ar-gp-* poe --gp (a mesma cor da
     modalidade na Agenda e no Ranking)
   - a dica dos graficos (.ar-gdica) segue o cursor deslizando (.4s, como o
     So Treino); janela do tema (.ar-dlg) para o texto do WhatsApp; RECIBO
     (.ar-frc-*) com A4 | Bobina 80mm | Bobina 58mm, cada um com o seu @page
   - texto nunca corta: nome comprido quebra a linha
   ========================================================================== */

/* ---------------------------------------------------------------- paleta */
.ar-gp-0 { --gp: #1D4ED8; }
.ar-gp-1 { --gp: #15803D; }
.ar-gp-2 { --gp: #C2410C; }
.ar-gp-3 { --gp: #7C3AED; }
.ar-gp-4 { --gp: #BE185D; }
.ar-gp-5 { --gp: #0E7490; }
.ar-gp-6 { --gp: #A16207; }
.ar-gp-7 { --gp: #4B5563; }
.ar-gp-pix { --gp: #0D9488; }
.ar-gp-cartao { --gp: #1D4ED8; }
.ar-gp-dinheiro { --gp: #B45309; }
.ar-gp-cortesia { --gp: #9CA3AF; }
.ar-gp-men { --gp: #111318; }
.ar-gp-ins { --gp: #C8161D; }
.ar-gp-ven { --gp: #0E7490; }

/* ---------------------------------------------------------------- legenda, rosca e barras */
.ar-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ar-leg li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  font: 500 13px/1.35 var(--ds-font); color: var(--ds-text-2); transition: opacity .15s ease;
}
.ar-leg li > i { width: 10px; height: 10px; border-radius: 3px; background: var(--gp, var(--ds-ink)); }
.ar-leg li > span { min-width: 0; overflow-wrap: anywhere; }
.ar-leg li > b { font: 700 13px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-leg li > em { min-width: 40px; text-align: right; font: 600 13px var(--ds-font); font-style: normal; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-leg li.apagada { opacity: .42; }
.ar-leg li.vazio { display: block; color: var(--ds-muted); }
.ar-leg.linha { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
.ar-leg.linha li { grid-template-columns: 10px auto auto; }

.ar-rosca { display: block; flex: none; width: 120px; height: 120px; overflow: visible; }
.ar-rosca-trilho { fill: none; stroke: #EEF0F3; stroke-width: 18; }
.ar-fat { fill: none; stroke: var(--gp, var(--ds-ink)); stroke-width: 18; transition: stroke-width .1s ease, opacity .15s ease; }
.ar-fat:hover { stroke-width: 24; }
.ar-fat.apagada { opacity: .25; }
.ar-rosca-v { font: 800 13.5px var(--ds-font); fill: var(--ds-text); text-anchor: middle; font-variant-numeric: tabular-nums; }
.ar-rosca-r { font: 700 10.5px var(--ds-font); fill: var(--ds-muted); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; }

.ar-gb { overflow: visible; }
.ar-gb .ar-gb-r { font: 500 13px var(--ds-font); fill: var(--ds-muted); }
.ar-gb g.ar-graf-b { fill: var(--ds-ink); }
.ar-gb rect[class*="ar-gp-"] { fill: var(--gp); }
.ar-gb .ar-graf-b { transition: opacity .12s ease; }
.ar-gb .ar-graf-b:hover { opacity: .8; }

/* dica dos graficos: caixa escura que segue o cursor (M09) */
.ar-gdica {
  position: fixed; left: 0; top: 0; z-index: 19600; max-width: 320px; pointer-events: none;
  padding: 7px 11px; border-radius: 8px; background: rgba(17, 19, 24, .92); color: #FFFFFF;
  font: 600 13px/1.4 var(--ds-font); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .12s ease, transform .4s cubic-bezier(.23, 1, .32, 1);
}
.ar-gdica.on { opacity: 1; }
.ar-gdica.seco { transition: none; }

/* ---------------------------------------------------------------- janela do tema (texto do WhatsApp) */
.ar-dlg-veu {
  position: fixed; inset: 0; z-index: 19500; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; background: rgba(11, 12, 15, .45); font-family: var(--ds-font);
  animation: arMvFade .25s linear backwards; transition: opacity .15s linear;
}
.ar-dlg-veu.saindo { opacity: 0; }
.ar-dlg-veu.saindo > .ar-dlg { transform: scale(.94); transition: transform .15s var(--mv-in, ease-in); }
.ar-dlg {
  width: min(580px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--ds-surface); border-radius: 14px; box-shadow: var(--ds-shadow-3); overflow: hidden;
}
.ar-dlg-cab { display: flex; align-items: center; gap: 12px; padding: 18px 20px 4px; }
.ar-dlg-cab h3 { flex: 1; margin: 0; font: 800 18px/1.3 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; }
.ar-dlg-x { position: relative; flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.ar-dlg-x::before, .ar-dlg-x::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: 16px; height: 2px; border-radius: 2px;
  background: var(--ds-muted); transform: rotate(45deg);
}
.ar-dlg-x::after { transform: rotate(-45deg); }
.ar-dlg-x:hover { background: var(--ds-surface-low); }
.ar-dlg-corpo { padding: 6px 20px 2px; overflow: auto; }
.ar-dlg-txt { margin: 0 0 12px; font: 400 14px/1.55 var(--ds-font); color: var(--ds-text-2); }
.ar-dlg-txt b { color: var(--ds-text); }
.ar-dlg-area {
  display: block; width: 100%; min-height: 230px; box-sizing: border-box; resize: vertical; padding: 12px 14px;
  border: 1px solid var(--ds-field); border-radius: 10px; background: var(--ds-surface-low); outline: none;
  font: 500 14px/1.55 var(--ds-font); color: var(--ds-text); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ar-dlg-area:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); background: var(--ds-surface); }
.ar-dlg-ok { margin-top: 8px; font: 600 13px var(--ds-font); color: var(--ds-success); }
.ar-dlg-ok[hidden] { display: none; }
.ar-dlg-pe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; }
.ar-dlg-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer; white-space: nowrap;
  font: 700 14px/1 var(--ds-font); transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ar-dlg-btn.sec { background: var(--ds-surface); border-color: var(--ds-field); color: var(--ds-text); }
.ar-dlg-btn.sec:hover { background: var(--ds-surface-low); border-color: var(--ds-field-hover); }
.ar-dlg-btn.pri { background: var(--ds-primary); color: #FFFFFF; }
.ar-dlg-btn.pri:hover { background: var(--ds-primary-hover); }
.ar-dlg-btn.zap { background: #1FAF54; color: #FFFFFF; }
.ar-dlg-btn.zap:hover { background: #178F45; }
.ar-dlg-btn.zap::before, .ar-ag-zapbtn::before {
  content: ''; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--ar-zap-ic) no-repeat center / contain; mask: var(--ar-zap-ic) no-repeat center / contain;
}
.ar-dlg-btn.zap, .ar-ag-zapbtn { --ar-zap-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8%2012.8%200%200%200-.57-.01c-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.872.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413Z'%2F%3E%3C%2Fsvg%3E"); }
.ar-dlg-btn:focus-visible, .ar-dlg-x:focus-visible { outline: none; box-shadow: var(--ds-ring); }

/* ---------------------------------------------------------------- agenda da semana */
.ar-ag {
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
  font-family: var(--ds-font); color: var(--ds-text-2); container: arag / inline-size;
}
.ar-ag-topo { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.ar-ag-nav { display: flex; align-items: center; gap: 8px; }
.ar-ag-seta {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: background-color .12s ease, border-color .12s ease;
}
.ar-ag-seta::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border: solid var(--ds-text); border-width: 0 2.2px 2.2px 0;
}
.ar-ag-seta.ant::before { transform: translate(-30%, -50%) rotate(135deg); }
.ar-ag-seta.prox::before { transform: translate(-75%, -50%) rotate(-45deg); }
.ar-ag-seta:hover { background: var(--ds-hover); border-color: var(--ds-field-hover); }
.ar-ag-seta:focus-visible, .ar-ag-periodo:focus-visible, .ar-ag-hoje:focus-visible, .ar-ag-zapbtn:focus-visible,
.ar-ag-dia:focus-visible, .ar-ag-card:focus-visible, .ar-ag-gi:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-ag-periodo {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 168px; height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: 10px;
  cursor: pointer; user-select: none; transition: background-color .12s ease;
}
.ar-ag-periodo:hover { background: var(--ds-surface); }
.ar-ag-periodo > b { font: 800 17px/1.15 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-ag-periodo > span { margin-top: 1px; font: 500 13px/1.2 var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-ag-data { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ar-ag-hoje {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 10px;
  border: 1px solid var(--ds-border); background: var(--ds-surface); font: 600 14px var(--ds-font); color: var(--ds-text);
  cursor: pointer; user-select: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ar-ag-hoje:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-ag-dir { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ar-ag-zapbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 10px;
  border: 1px solid #BFE9CF; background: #EFFAF3; color: #11733A; font: 700 14px var(--ds-font);
  cursor: pointer; user-select: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ar-ag-zapbtn:hover { background: #1FAF54; border-color: #1FAF54; color: #FFFFFF; }

/* chips de modalidade e legenda */
.ar-ag-filtros { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.ar-ag-mods, .ar-rk-mods { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ar-ag-mods > .ar-aba.ar-ag-mod, .ar-rk-mods > .ar-aba.ar-rk-mod {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; box-sizing: border-box; padding: 0 13px;
  border-radius: 999px; font: 600 13px var(--ds-font); white-space: nowrap;
}
.ar-ag-mod > i, .ar-rk-mod > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gp, var(--ds-muted)); }
.ar-ag-mod > em {
  font: 700 12px/1 var(--ds-font); font-style: normal; color: #4B5361; background: #F1F2F5;
  border-radius: 999px; padding: 3px 7px; font-variant-numeric: tabular-nums; transition: background-color .12s ease, color .12s ease;
}
.ar-ag-mod.sel > em { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.ar-ag-mod.sel > i, .ar-rk-mod.sel > i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.ar-ag-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-ag-legenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ar-ag-legenda > span > i { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; }
.ar-ag-legenda > .cheia > i { background: var(--ds-danger); }
.ar-ag-legenda > .indiv > i { background: #7C3AED; }

/* os sete dias (So Treino: o marcado cheio; a cor troca em 120 ms) */
.ar-kpis.ar-ag-dias { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ar-ag-dias > .ar-kpi.ar-ag-dia {
  padding: 9px 6px 9px; border-radius: 12px; text-align: center; cursor: pointer; user-select: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); outline: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease,
              translate var(--im-t-hover, .22s) var(--im-suave, ease), scale var(--im-t-hover, .22s) var(--im-suave, ease);
}
.ar-ag-dia:hover { border-color: var(--ds-field-hover); }
.ar-ag-dsem { display: block; font: 700 12px var(--ds-font); letter-spacing: .08em; color: var(--ds-muted); transition: color .12s ease; }
.ar-ag-dnum { display: block; margin-top: 1px; font: 800 23px/1.15 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; transition: color .12s ease; }
.ar-ag-dqt { display: block; margin-top: 2px; font: 500 13px var(--ds-font); color: var(--ds-muted); white-space: nowrap; transition: color .12s ease; }
.ar-ag-dia.vazio .ar-ag-dqt { color: var(--ds-faint); }
.ar-ag-dia.hoje .ar-ag-dsem { color: var(--ds-primary); }
.ar-ag-dias > .ar-ag-dia.hoje::after {
  content: ''; display: block; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-primary);
}
.ar-ag-dias > .ar-ag-dia.sel { background: var(--ds-ink); border-color: var(--ds-ink); box-shadow: 0 8px 18px -10px rgba(17, 19, 24, .7); }
.ar-ag-dia.sel .ar-ag-dsem, .ar-ag-dia.sel .ar-ag-dnum { color: #FFFFFF; }
.ar-ag-dia.sel .ar-ag-dqt { color: rgba(255, 255, 255, .78); }
.ar-ag-dias > .ar-ag-dia.sel.hoje::after { background: #FFFFFF; }

/* vista Dia: lista do dia + painel do treino */
.ar-ag-corpo { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; }
.ar-ag-listas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
.ar-ag .ar-cards-area.ar-ag-lista { height: 100%; max-height: 100%; margin: 0; padding: 2px 8px 12px 2px; }
.ar-ag .ar-ag-lista[hidden], .ar-ag .ar-ag-grade[hidden] { display: none !important; }
.ar-ag .ar-ag-lista.ar-hj-trs { max-height: 100%; margin: 0; }
.ar-ag[data-vista="semana"] .ar-ag-dias, .ar-ag[data-vista="semana"] .ar-ag-corpo { display: none; }

/* cartao do treino: o .ar-hj-tr do Inicio (hora, nome, professor, lotacao) maior, com a cor
   da modalidade na borda, a bolinha da lotacao e a seta */
.ar-ag .ar-ag-card.ar-cardev {
  display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 13px 14px 13px 18px;
  border-radius: 12px; overflow: hidden;
}
.ar-ag-card::before, .ar-ag-gi::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--gp, var(--ds-ink));
}
.ar-ag .ar-ag-card .hr { flex: 0 0 66px; }
.ar-ag .ar-ag-card .hr b { font-size: 17px; }
.ar-ag .ar-ag-card .nm { font-size: 15px; }
.ar-ag .ar-ag-card .oc { flex: 0 0 86px; }
.ar-ag .ar-ag-card .oc .n { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ar-ag .ar-ag-card .oc .n::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; }
.ar-ag .ar-ag-card.cheia .oc .n::before { background: var(--ds-danger); }
.ar-ag .ar-ag-card.indiv .oc .n::before { background: #7C3AED; }
.ar-ag .ar-ag-card.cheia .oc .livre { color: var(--ds-danger); font-weight: 700; }
.ar-ag .ar-ag-card .ar-prog.ar-hj-ocup { width: 86px; height: 4px; }
.ar-ag-modn { font-weight: 700; color: var(--gp, var(--ds-text-2)); }
.ar-ag-chev {
  flex: none; width: 8px; height: 8px; margin: 0 4px 0 0; border: solid #9AA2AE; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: border-color .12s ease, transform .15s ease;
}
.ar-ag-card:hover .ar-ag-chev { border-color: var(--ds-text); transform: translateX(2px) rotate(-45deg); }
.ar-ag .ar-ag-card.sel { border-color: var(--ds-ink); box-shadow: 0 0 0 2px rgba(17, 19, 24, .14), var(--ds-shadow); }
.ar-ag .ar-ag-card.sel .ar-ag-chev { border-color: var(--ds-ink); }
.ar-ag .ar-ag-vazio.ar-cards-vazio.ar-vz { padding: 34px 24px 30px; }
.ar-ag-nada {
  padding: 22px; border: 1px dashed #D0D5DD; border-radius: 12px; background: var(--ds-surface);
  text-align: center; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted);
}
.ar-ag-nada[hidden] { display: none; }
.ar-ag-nada b { color: var(--ds-text); }

/* painel do treino marcado */
.ar-ag-det {
  flex: 0 0 clamp(340px, 30%, 440px); min-height: 0; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
  scrollbar-width: thin; scrollbar-color: #C3CBD8 transparent;
}
.ar-ag-det-in { padding: 18px 18px 16px; }
.ar-ag-det-cab { padding-bottom: 14px; border-bottom: 1px solid var(--ds-border-soft); }
.ar-ag-det-mod { display: inline-flex; align-items: center; gap: 7px; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--gp, var(--ds-muted)); }
.ar-ag-det-mod > i { width: 8px; height: 8px; border-radius: 50%; background: var(--gp, var(--ds-muted)); }
.ar-ag-det-cab h3 { margin: 6px 0 4px; font: 800 19px/1.25 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ar-ag-det-qd { font: 600 14px/1.4 var(--ds-font); color: var(--ds-text-2); }
.ar-ag-det-pf { margin-top: 3px; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-ag-det-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ar-ag-det-nums > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 12px; border: 1px solid var(--ds-border-soft); border-radius: 10px; background: var(--ds-surface-low); }
.ar-ag-det-nums b { flex: none; font: 800 20px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-ag-det-nums span { min-width: 0; font: 700 11px/1.25 var(--ds-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ds-muted); }
.ar-ag-det-nums .ok b { color: var(--ds-success); }
.ar-ag-det-nums .falta b { color: var(--ds-warn); }
.ar-ag-det-nums .cheia b { color: var(--ds-danger); }
.ar-ag-det-lot { margin-top: 12px; }
.ar-ag-det-lot .ar-prog { height: 8px; }
.ar-ag-det-lot .ar-prog > i { background: var(--ds-info); }
.ar-ag-det-lot .ar-prog.cheio > i { background: var(--ds-danger); }
.ar-ag-det-lot > span { display: block; margin-top: 6px; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-ag-det-tit { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-ag-det-tit > em { font: 700 12px/1 var(--ds-font); font-style: normal; letter-spacing: 0; color: #4B5361; background: #F1F2F5; border-radius: 999px; padding: 3px 8px; }
.ar-ag-det-lista .ar-hj-pes { padding: 8px 0; }
.ar-ag-st { flex: none; padding: 4px 8px; border-radius: 999px; font: 700 11px/1.2 var(--ds-font); letter-spacing: .04em; text-transform: uppercase; }
.ar-ag-st.conf { background: var(--ds-info-bg); color: var(--ds-info); }
.ar-ag-st.pres { background: var(--ds-success-bg); color: var(--ds-success); }
.ar-ag-st.falta { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ar-ag-det-acoes.ar-tr-acoes { margin-top: 16px; }
.ar-ag .ar-tr-acoes span.ar-ag-zapbtn { height: auto; padding: 8px 14px; border-color: #BFE9CF; background: #EFFAF3; color: #11733A; font-size: 13px; }
.ar-ag .ar-tr-acoes span.ar-ag-zapbtn::before { width: 16px; height: 16px; }
.ar-ag .ar-tr-acoes span.ar-ag-zapbtn:hover { background: #1FAF54; border-color: #1FAF54; color: #FFFFFF; }
.ar-ag-det-vz { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 46px 24px; text-align: center; font: 400 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-ag-det-vz > .ar-hj-ic { width: 34px; height: 34px; margin-bottom: 4px; color: #C3CBD8; }
.ar-ag-det-vz > b { font: 700 15px var(--ds-font); color: var(--ds-text); }

/* vista Semana: os sete dias lado a lado */
.ar-ag .ar-cards-area.ar-ag-grade {
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 2px 6px 12px 2px;
}
.ar-ag-gcol {
  min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 7px 9px;
  border: 1px solid var(--ds-border-soft); border-radius: 12px; background: #FBFBFC;
}
.ar-ag-gcol.hoje { border-color: rgba(200, 22, 29, .32); background: #FFFAFA; }
.ar-ag-gcab { padding: 1px 0 7px; margin-bottom: 1px; border-bottom: 1px solid var(--ds-border-soft); text-align: center; }
.ar-ag-gcab > span { display: block; font: 700 12px var(--ds-font); letter-spacing: .08em; color: var(--ds-muted); }
.ar-ag-gcol.hoje .ar-ag-gcab > span { color: var(--ds-primary); }
.ar-ag-gcab > b { font: 800 15px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-ag .ar-ag-gi.ar-cardev {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1px 6px;
  padding: 8px 9px 8px 12px; border-radius: 9px; overflow: hidden;
}
.ar-ag-gi > b { font: 700 13px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-ag-gi > em { justify-self: end; font: 700 12px var(--ds-font); font-style: normal; color: #15803D; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-ag-gi.cheia > em { color: var(--ds-danger); }
.ar-ag-gi.indiv > em { color: #7C3AED; }
.ar-ag-gi > span { grid-column: 1 / -1; font: 600 13px/1.3 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere; }
.ar-ag-gi.passou > b, .ar-ag-gi.passou > span, .ar-ag-gi.passou > em { opacity: .55; }
.ar-ag-gvazio { padding: 10px 4px; text-align: center; font: 500 13px var(--ds-font); color: var(--ds-faint); }
.ar-ag-gvazio[hidden] { display: none; }

@container arag (max-width: 860px) {
  .ar-ag-corpo { flex-direction: column; }
  .ar-ag-listas { flex: 1 1 260px; }
  .ar-ag-det { flex: 0 0 auto; max-height: 300px; }
  .ar-ag .ar-cards-area.ar-ag-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ar-ag-dqt { font-size: 12px; }
}

/* ---------------------------------------------------------------- ranking de presencas */
.ar-rk-in { display: flex; flex-direction: column; gap: 14px; padding: 2px 6px 18px 2px; container: ark / inline-size; }
.ar-kpis.ar-rk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-rk-kpis > .ar-rk-k1 { box-shadow: inset 0 3px 0 var(--ds-success), var(--ds-shadow); }
.ar-rk-kpis > .ar-rk-k2 { box-shadow: inset 0 3px 0 var(--ds-info), var(--ds-shadow); }
.ar-rk-kpis > .ar-rk-k3 { box-shadow: inset 0 3px 0 #7C3AED, var(--ds-shadow); }
.ar-rk-kpis > .ar-rk-k4 { box-shadow: inset 0 3px 0 var(--ds-primary), var(--ds-shadow); }
.ar-rk-kd { margin-top: 8px; font: 800 25px/1.15 var(--ds-font); color: var(--ds-text); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ar-rk-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
.ar-rk-rosca { display: flex; align-items: center; gap: 20px; min-height: 170px; }
.ar-rk-rosca > .ar-rosca { width: 156px; height: 156px; }
.ar-rk-rosca > .ar-leg { flex: 1 1 auto; max-height: 190px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.ar-rk-bl-sem .ar-graf { height: 188px; }
.ar-rk-bl-rosca.ar-bloco, .ar-rk-bl-sem.ar-bloco, .ar-rk-bl-tab.ar-bloco { overflow: visible; }
.ar-rk-rolo { overflow-x: auto; }
.ar-rk-tab td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.ar-rk-tab th.pos, .ar-rk-tab td.pos { width: 54px; text-align: center; }
.ar-rk-tab tbody tr { transition: background-color .1s ease; }
.ar-rk-tab tbody tr:hover > td { background: var(--ds-hover); }
.ar-rk-tab tr.top1 > td { background: #FFFBEB; }
.ar-rk-tab tr.top2 > td { background: #F8FAFC; }
.ar-rk-tab tr.top3 > td { background: #FFF7ED; }
.ar-rk-tab tr[hidden] { display: none; }
.ar-rk-trofeu {
  display: inline-block; width: 26px; height: 26px; vertical-align: middle; background-color: var(--tr, #D4A017);
  -webkit-mask: var(--rk-trofeu) no-repeat center / contain; mask: var(--rk-trofeu) no-repeat center / contain;
  --rk-trofeu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z' fill='black'/%3E%3Cpath d='M17 5.5h2.2a2.3 2.3 0 0 1 0 4.6H16.6M7 5.5H4.8a2.3 2.3 0 0 0 0 4.6h2.6M12 14v4M8 20.5h8'/%3E%3C/svg%3E");
}
.ar-rk-trofeu.ouro { --tr: #D4A017; }
.ar-rk-trofeu.prata { --tr: #9CA3AF; }
.ar-rk-trofeu.bronze { --tr: #B87333; }
.ar-rk-pos { font: 700 14px var(--ds-font); color: var(--ds-muted); }
.ar-rk-al { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ar-rk-al > .ar-hj-av { flex: 0 0 32px; width: 32px; height: 32px; }
.ar-rk-al > b { font: 700 14px/1.35 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-rk-qt { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ar-rk-qt > b { min-width: 28px; text-align: right; font: 800 15px var(--ds-font); color: var(--ds-text); }
.ar-rk-barra { flex: none; width: 90px; height: 6px; border-radius: 999px; background: var(--ds-surface-low); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ds-border-soft); }
.ar-rk-barra > i { display: block; height: 100%; border-radius: inherit; background: var(--ds-ink); }
.ar-rk-tab tr.top1 .ar-rk-barra > i { background: #D4A017; }
.ar-rk-tab tr.top2 .ar-rk-barra > i { background: #9CA3AF; }
.ar-rk-tab tr.top3 .ar-rk-barra > i { background: #B87333; }
.ar-rk-modt { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--ds-font); color: var(--ds-text-2); white-space: nowrap; }
.ar-rk-modt > i { width: 8px; height: 8px; border-radius: 50%; background: var(--gp, var(--ds-muted)); }
.ar-rk-pe { padding-top: 12px; text-align: center; }
.ar-rk-pe[hidden] { display: none; }
.ar-rk-vermais {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; box-sizing: border-box; border-radius: 10px;
  border: 1px solid var(--ds-field); background: var(--ds-surface); font: 600 14px var(--ds-font); color: var(--ds-text);
  cursor: pointer; user-select: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ar-rk-vermais:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-rk .ar-rk-vazio.ar-cards-vazio.ar-vz { margin-top: 4px; }
@container ark (max-width: 940px) {
  .ar-rk-linha { grid-template-columns: minmax(0, 1fr); }
  .ar-kpis.ar-rk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- financeiro: pilulas e resumo */
.ar-per { height: 100%; display: flex; align-items: center; }
.ar-per > .ar-pilulas { flex-wrap: nowrap; }
/* blocos coloridos numa linha; embaixo a rosca das formas e o resumo do periodo */
.ar-kpis.ar-fin-res {
  height: 100%; box-sizing: border-box; display: grid; gap: 12px; padding: 0 2px 2px 0; align-items: stretch;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "blocos blocos" "formas resumo";
}
.ar-fin-tiles { grid-area: blocos; display: grid; gap: 10px; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ar-fin-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-fin-tiles.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ar-fin-tiles.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ar-kpis-fin .ar-kpi.ar-fin-tile {
  display: flex; flex-direction: column; min-width: 0; padding: 10px 13px 11px;
  background: var(--tt-bg, var(--ds-surface)); border-color: transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ar-kpis-fin .ar-fin-tile .rot { font: 700 11px var(--ds-font); letter-spacing: .07em; color: var(--tt-fg, var(--ds-muted)); }
.ar-kpis-fin .ar-fin-tile .val { margin-top: 3px; font: 800 21px/1.15 var(--ds-font); color: var(--tt-fg, var(--ds-text)); letter-spacing: -.01em; }
.ar-kpis-fin .ar-fin-tiles.n5 .ar-fin-tile .val, .ar-kpis-fin .ar-fin-tiles.n6 .ar-fin-tile .val { font-size: 18px; }
.ar-kpis-fin .ar-fin-tile .val.neg { color: #B91C1C; }
.ar-fin-tile > small { display: block; margin-top: 4px; font: 500 13px/1.3 var(--ds-font); color: var(--tt-fg, var(--ds-muted)); opacity: .82; }
.ar-fin-tile.t-saldo { --tt-bg: #EEF2FF; --tt-fg: #3730A3; }
.ar-fin-tile.t-receb { --tt-bg: #DCFCE7; --tt-fg: #166534; }
.ar-fin-tile.t-parc { --tt-bg: #F3E8FF; --tt-fg: #6B21A8; }
.ar-fin-tile.t-pend { --tt-bg: #FEF3C7; --tt-fg: #92400E; }
.ar-fin-tile.t-desp { --tt-bg: #FEE2E2; --tt-fg: #991B1B; }
.ar-fin-tile.t-venda { --tt-bg: #CFFAFE; --tt-fg: #155E75; }
.ar-fin-res > .ar-bloco { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 16px; overflow: hidden; }
.ar-fin-res > .ar-fin-bl-formas { grid-area: formas; }
.ar-fin-res > .ar-fin-bl-resumo { grid-area: resumo; }
.ar-fin-res .ar-bloco-tit { margin-bottom: 8px; }
.ar-fin-rosca { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-height: 0; }
.ar-fin-rosca > .ar-rosca { width: 124px; height: 124px; }
.ar-fin-leg { flex: 1 1 auto; min-width: 0; }
.ar-fin-nota { margin: 8px 0 0; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-fin-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 0 0 6px; }
.ar-fin-res > .ar-fin-bl-resumo { container: arfinres / inline-size; }
@container arfinres (min-width: 720px) { .ar-fin-st { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-fin-st > div { min-width: 0; }
.ar-fin-st dt { font: 700 11px var(--ds-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted); }
.ar-fin-st dd { margin: 1px 0 0; font: 700 14px/1.3 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-fin-res .ar-fin-bl-resumo .ar-graf { flex: none; height: 86px; margin-top: auto; }
.ar-fin-semdado {
  flex: none; height: 86px; margin-top: auto; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--ds-border);
  border-radius: 10px; font: 500 13px var(--ds-font); color: var(--ds-muted);
}
.ar-fin-bl-resumo .ar-leg.linha { margin-top: 6px; }

/* ---------------------------------------------------------------- recibo do financeiro (arRecibo) */
.ar-frc-veu {
  position: fixed; inset: 0; z-index: 19500; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; background: rgba(11, 12, 15, .5); font-family: var(--ds-font);
  animation: arMvFade .25s linear backwards; transition: opacity .15s linear;
}
.ar-frc-veu.saindo { opacity: 0; }
.ar-frc-janela {
  width: min(920px, 100%); height: min(880px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--ds-surface); border-radius: 14px; box-shadow: var(--ds-shadow-3); overflow: hidden;
}
.ar-frc-barra { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); }
.ar-frc-tit { font: 800 18px var(--ds-font); color: var(--ds-text); white-space: nowrap; }
.ar-frc-tit > span { margin-left: 4px; font: 600 14px var(--ds-font); color: var(--ds-muted); }
.ar-frc-esp { flex: 1 1 0; }
.ar-frc-mesa { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px; background: #E9ECF1; }
.ar-frc-papel {
  flex: none; box-sizing: border-box; background: #FFFFFF; color: #111111; font-family: var(--ds-font); line-height: 1.45;
  box-shadow: 0 10px 26px -12px rgba(16, 24, 40, .4); transition: width .2s var(--mv-std, ease);
}
.ar-frc-papel.f-a4 { width: 210mm; min-height: 148mm; padding: 16mm 16mm 12mm; font-size: 14px; }
.ar-frc-papel.f-80 { width: 80mm; padding: 5mm 4mm 6mm; font-size: 12px; }
.ar-frc-papel.f-58 { width: 58mm; padding: 4mm 2.5mm 5mm; font-size: 11px; }
.ar-frc-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 3px solid #111111; }
.ar-frc-emp { min-width: 0; }
.ar-frc-emp > b { display: block; font-size: 1.32em; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.ar-frc-emp > span { display: block; margin-top: 2px; font-size: .86em; color: #555555; overflow-wrap: anywhere; }
.ar-frc-doc { flex: none; text-align: right; }
.ar-frc-doc > b { display: block; font-size: 1.7em; font-weight: 800; letter-spacing: .14em; }
.ar-frc-doc > span { font-size: .92em; color: #555555; font-variant-numeric: tabular-nums; }
.ar-frc-valor { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 18px 0 6px; }
.ar-frc-valor > span { font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #555555; }
.ar-frc-valor > b { padding: 5px 14px; border: 2px solid #111111; border-radius: 8px; font-size: 1.6em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-frc-texto { margin: 14px 0; font-size: 1.06em; line-height: 1.75; overflow-wrap: anywhere; }
.ar-frc-itens { width: 100%; margin: 4px 0 12px; border-collapse: collapse; font-size: .92em; }
.ar-frc-itens th { padding: 4px 5px; border-bottom: 1px solid #999999; text-align: left; font-size: .8em; letter-spacing: .05em; text-transform: uppercase; color: #555555; }
.ar-frc-itens td { padding: 4px 5px; border-bottom: 1px solid #EEEEEE; overflow-wrap: anywhere; }
.ar-frc-itens .num { text-align: right; white-space: nowrap; }
.ar-frc-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 12px 0; }
.ar-frc-dados dt { font-size: .76em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #666666; }
.ar-frc-dados dd { margin: 1px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.ar-frc-obs { margin: 6px 0; font-size: .9em; color: #444444; }
.ar-frc-local { margin: 26px 0 44px; text-align: right; }
.ar-frc-ass { width: 60%; margin: 0 auto; text-align: center; }
.ar-frc-ass > i { display: block; margin-bottom: 6px; border-top: 1px solid #111111; }
.ar-frc-ass > span { font-weight: 700; }
.ar-frc-rodape { margin-top: 26px; padding-top: 8px; border-top: 1px dashed #BBBBBB; text-align: center; font-size: .78em; color: #777777; }
.ar-frc-papel.f-80 .ar-frc-cab, .ar-frc-papel.f-58 .ar-frc-cab { flex-direction: column; align-items: center; gap: 6px; text-align: center; border-bottom: 1px dashed #111111; padding-bottom: 8px; }
.ar-frc-papel.f-80 .ar-frc-doc, .ar-frc-papel.f-58 .ar-frc-doc { text-align: center; }
.ar-frc-papel.f-80 .ar-frc-doc > b, .ar-frc-papel.f-58 .ar-frc-doc > b { font-size: 1.4em; }
.ar-frc-papel.f-80 .ar-frc-valor, .ar-frc-papel.f-58 .ar-frc-valor { flex-direction: column; justify-content: center; gap: 3px; margin: 12px 0 4px; }
.ar-frc-papel.f-80 .ar-frc-valor > b, .ar-frc-papel.f-58 .ar-frc-valor > b { font-size: 1.45em; }
.ar-frc-papel.f-80 .ar-frc-texto, .ar-frc-papel.f-58 .ar-frc-texto { margin: 10px 0; font-size: 1em; line-height: 1.55; }
.ar-frc-papel.f-80 .ar-frc-dados, .ar-frc-papel.f-58 .ar-frc-dados { grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 8px 0; padding: 6px 0; border-top: 1px dashed #111111; border-bottom: 1px dashed #111111; }
.ar-frc-papel.f-80 .ar-frc-local, .ar-frc-papel.f-58 .ar-frc-local { margin: 12px 0 28px; text-align: center; }
.ar-frc-papel.f-80 .ar-frc-ass, .ar-frc-papel.f-58 .ar-frc-ass { width: 92%; }
.ar-frc-papel.f-80 .ar-frc-rodape, .ar-frc-papel.f-58 .ar-frc-rodape { margin-top: 14px; }
.ar-frc-papel.f-58 .ar-frc-itens th:nth-child(3), .ar-frc-papel.f-58 .ar-frc-itens td:nth-child(3) { display: none; }

@page arFrcA4 { size: A4 portrait; margin: 0; }
@page arFrc80 { size: 80mm 297mm; margin: 0; }
@page arFrc58 { size: 58mm 297mm; margin: 0; }
@media print {
  html.ar-frc-imprimindo, html.ar-frc-imprimindo body {
    width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #FFFFFF !important;
  }
  html.ar-frc-imprimindo body > *:not(.ar-frc-veu) { display: none !important; }
  html.ar-frc-imprimindo .ar-frc-veu { position: static !important; display: block !important; padding: 0 !important; background: none !important; animation: none !important; opacity: 1 !important; }
  html.ar-frc-imprimindo .ar-frc-janela {
    display: block !important; width: auto !important; height: auto !important; border-radius: 0 !important;
    box-shadow: none !important; overflow: visible !important; animation: none !important; transform: none !important;
  }
  html.ar-frc-imprimindo .ar-frc-barra { display: none !important; }
  html.ar-frc-imprimindo .ar-frc-mesa { display: block !important; padding: 0 !important; background: none !important; overflow: visible !important; }
  html.ar-frc-imprimindo .ar-frc-papel { margin: 0 !important; box-shadow: none !important; transition: none !important; }
  html.ar-frc-imprimindo .ar-frc-papel.f-a4 { page: arFrcA4; min-height: 0; }
  html.ar-frc-imprimindo .ar-frc-papel.f-80 { page: arFrc80; }
  html.ar-frc-imprimindo .ar-frc-papel.f-58 { page: arFrc58; }
}

/* desligado neste navegador (arSemMov) */
.ar-sem-mov .ar-dlg-veu, .ar-sem-mov .ar-frc-veu { animation: none !important; }

/* sotreino fix-ui */
/* Etapa de ajustes (19/10/2026): perfil do aluno e Inicio. So classes e icones; o movimento continua
   nos ganchos da onda 1 (.ar-aba-painel do perfil, .ar-dash do Inicio). */

/* perfil do aluno: icones do estado vazio das abas Avaliacao fisica (fita metrica) e Anamnese
   (prancheta com cruz) */
.ar-vz[data-ic="avalfis"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='10' rx='1.5'/%3E%3Cpath d='M7 7v4M11 7v2.5M15 7v4M19 7v2.5'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="anamnese"] { --vz-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.8h6V4M12 9.5v6M9 12.5h6'/%3E%3C/svg%3E"); }

/* Inicio: o cartao "Indicadores do estudio" no lugar do panorama de abas (saiu com a onda 2D) */
.ar-hj-ind { --hj-cor: #4338CA; }
.ar-hj-ind > .ar-hj-cab { margin-bottom: 6px; }
.ar-hj-ind-txt { font: 500 14px/1.45 var(--ds-font); color: var(--ds-muted); }

/* sotreino verif app-treino */
/* Verificacao de 23/10/2026 (copia local do banco). So classes; nenhum movimento novo. */

/* Avaliacao fisica, edicao: o quadro do IMC e da avaliacao anterior cabe nos 64 px do frame
   (antes cortava "Massa magra estimada" e a anterior ganhava barra de rolagem em 1366) */
.ar-af-resumo > .x-panel-bodyWrap > .x-panel-body { overflow: hidden !important; }
.ar-af-resumo .ar-af-resumo-c { height: 64px; }
.ar-af-resumo .ar-af-imc, .ar-af-resumo .ar-af-ant { padding: 5px 12px; }
.ar-af-resumo .ar-af-imc { row-gap: 0; }
.ar-af-resumo .ar-af-imc .t, .ar-af-resumo .ar-af-ant .t { font-size: 10.5px; line-height: 13px; }
.ar-af-resumo .ar-af-imc b { font-size: 20px; line-height: 22px; }
.ar-af-resumo .ar-af-imc .m { font-size: 11.5px; line-height: 14px; }
.ar-af-resumo .ar-af-ant {
  font-size: 12.5px; line-height: 17px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis;
}

/* Anamnese, respostas: os quatro numeros cabem nos 126 px do frame mesmo com o rodape do cartao
   em duas linhas (em 1366 "o aviso aparece no app ate responderem" quebrava, cortava o cartao e
   o frame ganhava barra de rolagem) */
.ar-an-resumo > .x-panel-bodyWrap > .x-panel-body { overflow: hidden !important; }
.ar-an-kpis .ar-kpi { padding: 12px 16px 10px; }
.ar-an-kpis .ar-kpi-v { margin-top: 4px; }
.ar-an-kpis .ar-kpi-s { margin-top: 7px; padding-top: 7px; line-height: 1.3; }

/* sotreino verif gestor-a */
/* Verificacao de 23/10/2026 (copia local do banco), parte A do Gestor. So classes; nenhum movimento novo.
   - menu: o item com o selo NOVO quebra a linha quando o selo nao cabe nos 260 px do menu (antes o
     selo de "Captacao de clientes" e "Ranking de presencas" saia cortado e o de "Despesas e contas a
     pagar" sumia). O item sem filhos usa tambem os 24 px que o Ext guarda para a seta. Linha de 19 px
     + 9,5 px em cima e embaixo = os mesmos 38 px do item de uma linha so; o icone continua alinhado
     com a primeira linha
   - Cartoes | Tabela: a coluna do ABRIR fica parada na direita quando a tabela rola de lado (em 1366
     ela ficava fora da vista, depois do E-mail), como a coluna do nome fica parada na esquerda
   - tabelas do sistema com 10 colunas ou mais (Financeiro): em tela de notebook a folga das celulas
     diminui, o titulo comprido e a data com hora podem quebrar e a referencia fica mais estreita - a
     coluna COLABORADOR e a ORIGEM aparecem sem rolar de lado */
.ar-sidebar .x-treelist-item-leaf:not([data-ar-secao]) > .x-treelist-row .x-treelist-item-text:has(> .ar-selo-novo) {
  margin-right: 0 !important; white-space: normal !important; line-height: 19px !important;
  padding-top: 9.5px !important; padding-bottom: 9.5px !important;
}
.ar-sidebar .x-treelist-item-text > .ar-selo-novo { margin-top: 0; }

.ar-vt-tabela th.ar-vt-acao, .ar-vt-tabela td.ar-vt-acao { position: sticky; right: 0; }
.ar-vt-tabela td.ar-vt-acao { z-index: 1; box-shadow: -1px 0 0 var(--ds-border-soft); }
.ar-vt-tabela thead th.ar-vt-acao { z-index: 3; }

@media (max-width: 1500px) {
  .ar-tb table:has(thead th:nth-child(10)) thead th,
  .ar-tb table:has(thead th:nth-child(10)) tbody td { padding-left: 8px; padding-right: 8px; }
  .ar-tb table:has(thead th:nth-child(10)) thead th { white-space: normal; line-height: 1.25; }
  .ar-tb table:has(thead th:nth-child(10)) td.c-data { white-space: normal; }
  .ar-tb table:has(thead th:nth-child(10)) td.c-memo div { min-width: 120px; }
  .ar-tb table:has(thead th:nth-child(10)) td.c-nome { min-width: 136px; }
}

/* simplificacao 23/10 - menos cor, movimento leve */
/* ============================================================================
   SIMPLIFICACAO (pedidos do dono em 23/10/2026): "o sistema esta exagerado em cor e volume de
   informacao... mantendo as animacoes de forma leve"; "nao gosto desse amarelo no sistema nem
   esse brilho"; "usa uma cor que combina mais para isso, um amarelo que combina mais".
   Este bloco vem por ultimo e vence o que vem antes (mesmo seletor, mesma importancia):
   - vermelho: so a acao principal da tela, o item ativo do menu, problema de verdade
     (vencido, erro, cheio) e a marca
   - atencao (vence em breve, pendente, falta a chamada, sem atividade): OURO SOBRIO, uma
     familia so (matiz ~45 graus): --ar-ouro no ponto, fio, icone e borda do selecionado;
     --ar-ouro-txt no texto e no numero (5,1:1 no branco, 4,6:1 no selo); --ar-ouro-bg so em
     selo pequeno. Nada de laranja, ambar ou creme; nenhuma superficie grande tingida
   - verde: so o pontinho de ok/ativo
   - o resto neutro: superficie branca, fio cinza claro, texto escuro, apoio cinza; sem
     gradiente, brilho, listra, vidro ou sombra colorida; uma sombra sutil so
   - tarja informativa (o "i" azul): cinza claro com o icone cinza
   ========================================================================== */
:root {
  --ar-ouro: #C9A227;
  --ar-ouro-txt: #88690E;
  --ar-ouro-bg: #F7F1DF;
  --ar-neutro-bg: #F1F2F5;
  --ar-neutro-txt: #4B5361;
  --ar-ok: #16A34A;
  --ar-sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --ar-sombra-h: 0 1px 2px rgba(16, 24, 40, .07), 0 6px 14px -6px rgba(16, 24, 40, .20);
  /* contraste (meio-termo de 23/10): fundo da pagina mais escuro que o cartao, fio visivel, apoio escuro */
  --ds-bg: #ECEEF2;
  --ds-border: #DDE1E7;
  --ds-border-soft: #E8EBEF;
  --ds-muted: #4B5563;
  --ds-shadow: var(--ar-sombra);
  --ds-warn: var(--ar-ouro-txt);
  --ds-warn-bg: var(--ar-ouro-bg);
  --ds-info: #5F6673;
  --ds-info-bg: var(--ar-neutro-bg);
  --ds-sel: #F5F6F8;
  --ds-ring: 0 0 0 3px rgba(17, 19, 24, .10);
  --ds-primary-soft: rgba(17, 19, 24, .06);
  --im-sombra-cartao: var(--ar-sombra-h);
  --im-sombra-botao: var(--ar-sombra);
  --im-sombra-vermelha: var(--ar-sombra);
  --im-sombra-preta: var(--ar-sombra);
  --im-sombra-chip: none;
}
::selection { background: rgba(17, 19, 24, .14); }

/* ---------------------------------------------------------------- foco: escuro e calmo (sem anel vermelho) */
.x-field-focus .x-form-text-wrap-default, .x-field-focus .x-form-trigger-wrap-default,
.x-form-text-wrap-default:focus-within, .x-form-trigger-wrap-default:focus-within,
.x-form-textarea:focus-visible { border-color: var(--ds-ink) !important; }
.ar-tb-busca input:focus, .ar-cards-busca input:focus, .ar-tb .ar-tb-inp:focus, .ar-ix-dias-in input:focus { border-color: var(--ds-ink); }
.ar-busca-topo.x-field-focus .x-form-trigger-wrap-default, .ar-busca-topo .x-form-trigger-wrap-default:focus-within {
  border-color: var(--ds-ink) !important; box-shadow: var(--ds-ring) !important;
}
.x-form-clear-trigger:hover::after { color: var(--ds-text); }
.x-datepicker-today .x-datepicker-date { box-shadow: inset 0 0 0 1.5px var(--ds-ink); }
.ar-credito-txt a:hover { color: #FFFFFF; }

/* ---------------------------------------------------------------- botoes: sem sombra colorida */
.x-btn.ar-btn-primario { box-shadow: none !important; }
.x-btn.ar-btn-escuro, .x-btn.ar-btn-preto { box-shadow: none !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2):not(.x-item-disabled) { box-shadow: none !important; }
.ar-cards-novo { box-shadow: none; }
.ar-cards-novo.ar-vz-acao, .ar-cards-novo.ar-vz-acao:hover { box-shadow: none; }
.ar-capt-bt-pri { box-shadow: none; }
.ar-pf-bt { box-shadow: none; }
.ar-pf-camera { background: var(--ds-ink); box-shadow: none; }
.ar-pf-camera:hover { background: var(--ds-ink-2); scale: none; }

/* ---------------------------------------------------------------- selecionado: marca calma, sem halo */
.ar-cardev.sel { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); }
.ar-tb tr.ar-tl.sel td { background: var(--ds-sel); }
.ar-tb tr.ar-tl.sel td:first-child { box-shadow: inset 3px 0 0 var(--ds-ink); }
.ar-vt-linha.sel td:first-child { box-shadow: inset 3px 0 0 var(--ds-ink), 1px 0 0 var(--ds-border-soft); }
.ar-an-perg li.sel { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); }
.ar-an-perg li.alerta.sel { box-shadow: inset 3px 0 0 var(--ds-danger), inset 0 0 0 1px var(--ds-ink); }
.ar-tvp-tela:focus-visible { box-shadow: var(--ds-ring), var(--ds-shadow-2); }
.ar-notif-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(17, 19, 24, .22); }
.ar-pf-obs-txt.ar-pf-erro { box-shadow: none; }
.ar-pf-item-eu { background: var(--ds-sel); box-shadow: inset 3px 0 0 var(--ds-ink); }
.ar-pf-item-eu .ar-pf-item-txt b { color: var(--ds-text); }
.ar-pf-item-destaque { background: var(--ds-surface); box-shadow: inset 3px 0 0 var(--ds-ink); }
.ar-cardev:has(.ar-notif-nova) { border-color: var(--ds-border); }
@media (hover: hover) and (pointer: fine) {
  .ar-cardev.sel:hover { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink), var(--ar-sombra-h); }
  .ar-tb tr.ar-tl.sel:hover > td { background: #F1F2F5; }
  .ar-tb tr.ar-tl.sel:hover > td:first-child { box-shadow: inset 3px 0 0 var(--ds-ink); }
}

/* ---------------------------------------------------------------- ponto de status: sem halo */
.ar-tv-status.on::before { background: var(--ar-ok); box-shadow: none; }
.ar-aovivo::before { background: var(--ar-ok); box-shadow: none; animation: none; }

/* ---------------------------------------------------------------- selos: neutro com ponto */
.ar-selo-ok, .ar-sel-ok, .ar-pill-ok { background: rgba(22, 163, 74, .10); color: #166534; }
.ar-selo-espera, .ar-sel-espera, .ar-pill-wait { background: rgba(201, 162, 39, .16); color: #7A5E0C; }
.ar-selo-erro, .ar-sel-erro, .ar-pill-erro { background: rgba(200, 22, 29, .09); color: var(--ds-danger); }
.ar-sel-azul { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-selo-ok::before, .ar-selo-espera::before, .ar-selo-erro::before,
.ar-pill-ok::before, .ar-pill-wait::before, .ar-pill-erro::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; vertical-align: 1px;
}
.ar-pill-ok::before, .ar-pill-wait::before, .ar-pill-erro::before { margin-right: 6px; }
.ar-selo-ok::before, .ar-pill-ok::before { background: var(--ar-ok); }
.ar-selo-espera::before, .ar-pill-wait::before { background: var(--ar-ouro); }
.ar-selo-erro::before, .ar-pill-erro::before { background: var(--ds-danger); }
.ar-sel-ok i { background: var(--ar-ok); }
.ar-sel-espera i { background: var(--ar-ouro); }
.ar-sel-erro i { background: var(--ds-danger); }
.ar-sel-azul i { background: #9CA3AF; }
.ar-selo.ar-sit-ativo::before { background: var(--ar-ok); }
.ar-af-chip.bom { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-ag-st.conf { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-ag-st.pres { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-ix-selo-anil, .ar-ix-selo-rosa { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-ix-selo-hoje { background: var(--ds-ink); color: #FFFFFF; }
.ar-pf-privado { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
/* Captacao: situacao do cliente - texto neutro, a cor fica no ponto */
.ar-cardev-linhas dd.ar-lead-st0, .ar-vt-tabela td.ar-lead-st0 .ar-vt-c,
.ar-cardev-linhas dd.ar-lead-st2, .ar-vt-tabela td.ar-lead-st2 .ar-vt-c,
.ar-cardev-linhas dd.ar-lead-st3, .ar-vt-tabela td.ar-lead-st3 .ar-vt-c { color: var(--ds-text-2); background: var(--ar-neutro-bg); }
.ar-cardev-linhas dd.ar-lead-st1, .ar-vt-tabela td.ar-lead-st1 .ar-vt-c { color: var(--ar-ouro-txt); background: var(--ar-ouro-bg); }
.ar-cardev-linhas dd.ar-lead-st0::before, .ar-vt-tabela td.ar-lead-st0 .ar-vt-c::before { background: var(--ds-ink); }
.ar-cardev-linhas dd.ar-lead-st1::before, .ar-vt-tabela td.ar-lead-st1 .ar-vt-c::before { background: var(--ar-ouro); }
.ar-cardev-linhas dd.ar-lead-st2::before, .ar-vt-tabela td.ar-lead-st2 .ar-vt-c::before { background: #9CA3AF; }
.ar-cardev-linhas dd.ar-lead-st3::before, .ar-vt-tabela td.ar-lead-st3 .ar-vt-c::before { background: var(--ar-ok); }
.ar-cardev-linhas dd.ar-lead-aluno, .ar-vt-tabela td.ar-lead-aluno { color: var(--ds-text); }
.ar-cardev-linhas dd.ar-lead-exp-hoje, .ar-vt-tabela td.ar-lead-exp-hoje { color: var(--ds-text); }
.ar-lead-pils > .ar-lead-pilula[data-st="0"] { --pil-cor: var(--ds-ink); }
.ar-lead-pils > .ar-lead-pilula[data-st="1"] { --pil-cor: var(--ar-ouro); }
.ar-lead-pils > .ar-lead-pilula[data-st="2"] { --pil-cor: #9CA3AF; }
.ar-lead-pils > .ar-lead-pilula[data-st="3"] { --pil-cor: var(--ar-ok); }
.ar-lead-pils > .ar-aba.ar-lead-pilula.sel, .ar-pilulas > .ar-aba.ar-pilula.sel { box-shadow: none; }

/* ---------------------------------------------------------------- atencao: ouro sobrio (antes laranja/ambar/creme) */
.ar-kpi-wait { box-shadow: inset 0 3px 0 var(--ar-ouro), var(--ar-sombra); }
.ar-kpi-wait .ar-kpi-v { color: var(--ar-ouro-txt); }
.ar-kpi-ok { box-shadow: var(--ar-sombra); }
.ar-kpi-ok .ar-kpi-v { color: var(--ds-text); }
.ar-kpis-fin .verde .val { color: var(--ds-text); }
.ar-kpis-fin .amarelo .val { color: var(--ar-ouro-txt); }
.ar-kit-ficha.alerta .ar-kit-peito { background: var(--ds-ink); box-shadow: inset 0 0 0 3px var(--ar-ouro); }
.ar-kit-aviso, .ar-tvp-aviso, .ar-tour-nota {
  background: var(--ds-surface-low); color: var(--ar-ouro-txt); box-shadow: inset 3px 0 0 var(--ar-ouro);
}
.ar-kit-ficha.bloqueado .ar-kit-aviso { background: var(--ds-surface-low); color: var(--ds-danger); box-shadow: inset 3px 0 0 var(--ds-danger); }
.ar-aval-est i.on, .ar-pf-estrelas i.on { color: var(--ar-ouro); }
.ar-tb tr.ar-tl-nova td { background: #F7F8FA; }
.ar-ex-previa.vazia.aviso { background: var(--ds-surface-low); border-color: var(--ar-ouro); }
.ar-fi-obs { background: var(--ds-surface-low); color: var(--ar-ouro-txt); box-shadow: inset 3px 0 0 var(--ar-ouro); }
.ar-fi-p-div li em { color: var(--ar-ouro-txt); }
.ar-cardev-linhas dd.ar-pd-saude, .ar-vt-tabela td.ar-pd-saude { color: var(--ar-ouro-txt); }
.ar-pd-bloco.saude { background: var(--ds-surface); border-color: var(--ds-border); box-shadow: inset 3px 0 0 var(--ar-ouro); }
.ar-pd-ficha { color: var(--ds-text-2); }
.ar-pd-ficha.sem { color: var(--ds-text-2); }
.ar-pd-saldo.novo { border-color: var(--ds-border); }
.ar-ix-oc.alta .ar-prog > i { background: var(--ar-ouro); }
.ar-ix-kpi.k-ambar { --an-k: var(--ar-ouro); }
.ar-ix-kpi.k-azul, .ar-ix-kpi.k-verde, .ar-ix-kpi.k-anil { --an-k: var(--ds-ink); }
.ar-ix-kpi.pos .ar-kpi-v { color: var(--ds-text); }
/* Central de retencao: o cartao marcado fica branco, com a borda e o numero na cor do estado (sem halo) */
.ar-kpi.ar-ix-ret.r1 { --an-k: var(--ar-ouro); }
.ar-kpi.ar-ix-ret.r2, .ar-kpi.ar-ix-ret.r4 { --an-k: var(--ds-ink); }
.ar-kpi.ar-ix-ret.r3 { --an-k: var(--ds-danger); }
.ar-ix-ret-ic { color: var(--ds-text-2); background: var(--ar-neutro-bg); }
.ar-kpi.ar-ix-ret.r1 .ar-ix-ret-ic { color: var(--ar-ouro-txt); background: var(--ar-ouro-bg); }
.ar-kpi.ar-ix-ret.r3 .ar-ix-ret-ic { color: var(--ds-danger); background: #FDF2F2; }
.ar-kpi.ar-ix-ret.sel, .ar-kpi.ar-ix-ret.sel:hover {
  border-color: var(--an-k); background-color: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--an-k);
}
.ar-kpi.ar-ix-ret.sel .ar-kpi-v { color: var(--ds-text); }
.ar-kpi.ar-ix-ret.r1.sel .ar-kpi-v { color: var(--ar-ouro-txt); }
.ar-kpi.ar-ix-ret.r3.sel .ar-kpi-v { color: var(--ds-danger); }
/* tarja informativa: cinza, sem azul */
.ar-ix-explica { background: var(--ds-surface); border-color: var(--ds-border); }
.ar-ix-explica > .ar-hj-ic { color: #6B7280; }
/* Despesas: totais em branco, a situacao no fio da esquerda e no numero */
.ar-dp-kpis .dp-venc, .ar-dp-kpis .dp-hoje, .ar-dp-kpis .dp-semana, .ar-dp-kpis .dp-pago { background: var(--ds-surface); }
.ar-dp-kpis .dp-venc { --dp-cor: var(--ds-danger); }
.ar-dp-kpis .dp-hoje { --dp-cor: var(--ar-ouro); --dp-cor-v: var(--ar-ouro-txt); }
.ar-dp-kpis .dp-semana { --dp-cor: var(--ds-ink); --dp-cor-v: var(--ds-text); }
.ar-dp-kpis .dp-pago { --dp-cor: #C3C8D0; --dp-cor-v: var(--ds-text); }
.ar-dp-kpis .ar-kpi { border-color: var(--ds-border); }
.ar-lista-despesas .ar-cardev:has(.dp-st-venc) { --dp-fio: var(--ds-danger); }
.ar-lista-despesas .ar-cardev:has(.dp-st-hoje) { --dp-fio: var(--ar-ouro); }
.ar-lista-despesas .ar-cardev:has(.dp-st-semana) { --dp-fio: var(--ds-ink); }
.ar-lista-despesas .ar-cardev:has(.dp-st-paga) { --dp-fio: #C3C8D0; }
.ar-lista-despesas .ar-cardev:has(.dp-st-paga) .ar-cardev-linhas dd.ar-dp-valor { background: var(--ar-neutro-bg); color: var(--ds-text); }
.x-panel.ar-dp-pagar { border: 1px solid var(--ds-border) !important; }
.ar-dp-pagar, .ar-dp-pagar > .x-panel-bodyWrap, .ar-dp-pagar > .x-panel-bodyWrap > .x-panel-body { background: var(--ds-surface) !important; }
/* Financeiro: blocos brancos; o pendente leva o fio e o numero em ouro */
.ar-fin-tile.t-saldo, .ar-fin-tile.t-receb, .ar-fin-tile.t-parc, .ar-fin-tile.t-pend, .ar-fin-tile.t-desp, .ar-fin-tile.t-venda {
  --tt-bg: var(--ds-surface); --tt-fg: var(--ds-text);
}
.ar-kpis-fin .ar-kpi.ar-fin-tile { border-color: var(--ds-border); box-shadow: var(--ar-sombra); }
.ar-kpis-fin .ar-fin-tile .rot { color: var(--ds-muted); }
.ar-fin-tile > small { color: var(--ds-muted); opacity: 1; }
.ar-kpis-fin .ar-kpi.ar-fin-tile.t-pend { box-shadow: inset 3px 0 0 var(--ar-ouro), var(--ar-sombra); }
.ar-kpis-fin .ar-fin-tile.t-pend .val { color: var(--ar-ouro-txt); }
/* Ranking: o primeiro em ouro, o resto neutro (o bronze era laranja) */
.ar-ix-top .pos.ouro { background: var(--ar-ouro); color: #111318; }
.ar-ix-top .pos.bronze { background: #E5E7EB; color: #374151; }
.ar-pf-rank .ouro .ar-pf-rank-n { color: var(--ar-ouro-txt); }
.ar-pf-rank .bronze .ar-pf-rank-n { color: #4B5563; }
.ar-rk-tab tr.top1 > td, .ar-rk-tab tr.top2 > td, .ar-rk-tab tr.top3 > td { background: var(--ds-surface); }
.ar-rk-tab tr.top1 > td:first-child { box-shadow: inset 3px 0 0 var(--ar-ouro); }
.ar-rk-trofeu { background-color: var(--tr, var(--ar-ouro)); }
.ar-rk-trofeu.ouro { --tr: var(--ar-ouro); }
.ar-rk-trofeu.bronze { --tr: #B4BBC7; }
.ar-rk-tab tr.top1 .ar-rk-barra > i { background: var(--ar-ouro); }
.ar-rk-tab tr.top3 .ar-rk-barra > i { background: #B4BBC7; }
.ar-rk-kpis > .ar-rk-k1, .ar-rk-kpis > .ar-rk-k2, .ar-rk-kpis > .ar-rk-k3, .ar-rk-kpis > .ar-rk-k4 { box-shadow: var(--ar-sombra); }
.ar-pf-rank-topo { background: var(--ds-ink); }
/* Mensalidades: o numero do "EM ABERTO" vem com cor em linha do Pascal (uMensalidades.Cartao) */
.ar-kpi-v[style*="#d97706" i], .ar-kpi-v[style*="#f59e0b" i], .ar-kpi-v[style*="#b45309" i] { color: var(--ar-ouro-txt) !important; }
.ar-kpi-v[style*="#16a34a" i], .ar-kpi-v[style*="#15803d" i] { color: var(--ds-text) !important; }
/* Avisos: a previa do WhatsApp vinha num fundo bege em linha (uAvisos) */
[style*="background:#e6ddd3" i] { background: var(--ar-neutro-bg) !important; }
/* Contratos (bloco que veio depois deste): a legenda "anterior" do placar estava em ambar */
html .ar-ct-placar-leg .ant { color: var(--ar-ouro-txt); }
html .ar-prog.ar-ct-barra > i { background: var(--ds-success); }
html .ar-ct-placar-num b { color: var(--ds-text); }
html .ar-ct-lembrar { background: var(--ds-surface); border-color: var(--ds-border); box-shadow: inset 3px 0 0 var(--ar-ok); }
html .ar-ct-lembrar span { color: var(--ds-text-2); }
html .ar-ct-lembrar .ar-pf-bt { background: var(--ds-ink); box-shadow: none; }
html .ar-ct-lembrar .ar-pf-bt:hover { background: var(--ds-ink-2); }
html .ar-ct-ic { background: var(--ds-ink); }

/* ---------------------------------------------------------------- icones: uma cor so */
.ar-hj-acoes > span { --hj-cor: var(--ds-primary) !important; }
.ar-hj-treinos, .ar-hj-agenda, .ar-hj-venc, .ar-hj-aniv, .ar-hj-prova, .ar-hj-ind { --hj-cor: var(--ds-primary); }
.ar-hj-pan > .ar-hj-ic { color: var(--ds-primary); }
.ar-ix-cab > .ar-hj-ic, .ar-ix-cab > .ic-alunos, .ar-ix-cab > .ic-ix-info, .ar-ix-cab > .ic-conta, .ar-ix-cab > .ic-agenda,
.ar-ix-cab > .ic-relogio, .ar-ix-cab > .ic-treino, .ar-ix-cab > .ic-aluno-mais, .ar-ix-cab > .ic-ix-trofeu, .ar-ix-cab > .ic-bolo,
.ar-ix-cab > .ic-ix-alvo, .ar-ix-cab > .ic-grafico, .ar-ix-cab > .ic-prova { color: var(--ds-primary); }
.ar-ix-cab > .ic-ix-alerta { color: var(--ds-danger); }
.ar-ix-aniv-cab > .ar-hj-ic { color: var(--ds-primary); }
.ar-notif-ico[class*="k-"] { background: var(--ar-neutro-bg); color: var(--ar-neutro-txt); }
.ar-pf-arq-ic.t-docx, .ar-pf-arq-ic.t-jpg, .ar-pf-arq-ic.t-png { background: #6B7280; }
.ar-evo-item.treino .ar-evo-item-dt b { color: var(--ds-text); }
.ar-hj-zap::before { background-color: #4B5361; }
.ar-hj-zap:hover { background: var(--ar-neutro-bg); scale: none; }
.ar-ag .ar-tr-acoes span.ar-ag-zapbtn, .ar-ag-zapbtn { border-color: var(--ds-field); background: var(--ds-surface); color: var(--ds-text); }
.ar-ag .ar-tr-acoes span.ar-ag-zapbtn:hover, .ar-ag-zapbtn:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-ag-legenda > .indiv > i, .ar-ag .ar-ag-card.indiv .oc .n::before { background: #9CA3AF; }
.ar-ag-gi.indiv > em { color: var(--ds-text-2); }
.ar-ag-gi > em { color: var(--ds-text-2); }
.ar-hj-pes > .tx > small b, .ar-hj-pes.hoje > .tx > span, .ar-cardev-linhas dd.ar-ix-dd-hoje { color: var(--ds-text); }
.ar-ix-hoje { background: var(--ds-ink); }

/* ---------------------------------------------------------------- iniciais: um estilo neutro para todos */
.ar-av, .ar-av-0, .ar-av-1, .ar-av-2, .ar-av-3, .ar-av-4, .ar-av-5 { background: #E9ECF1; color: #374151; }
.ar-lista-pessoas .ar-selo.ar-av { color: #374151; box-shadow: 0 0 0 3px #FFFFFF; }
.ar-lista-leads .ar-selo.ar-av, .ar-lista-leads .ar-selo.ar-av.ar-lead-av0, .ar-lista-leads .ar-selo.ar-av.ar-lead-av1,
.ar-lista-leads .ar-selo.ar-av.ar-lead-av2, .ar-lista-leads .ar-selo.ar-av.ar-lead-av3 { background: #E9ECF1; color: #374151; }
.ar-lista-pessoas .ar-selo.ar-av.ar-pes-off, .ar-lista-leads .ar-selo.ar-av.ar-lead-av4 { background: #F1F2F5; color: #9AA1AD; }
.ar-af-av { background: #E9ECF1; color: #374151; box-shadow: 0 0 0 3px #FFFFFF; }

/* ---------------------------------------------------------------- sem gradiente, sem vidro, sem listra */
.ar-vz-ic { background: var(--ds-ink); box-shadow: none; }
.ar-pf-ic { background: var(--ds-ink); }
.ar-capt-ic { background: var(--ar-neutro-bg); color: var(--ds-ink); box-shadow: none; }
.ar-capt-link { box-shadow: inset 4px 0 0 var(--ds-ink), var(--ar-sombra); }
.ar-pd-foto, .ar-vd-prod-foto, .ar-pd-fotobox-img { background: #F1F3F6; }
.ar-an-item.alerta { background: none; box-shadow: inset 3px 0 0 var(--ds-danger); }
.ar-an-alerta { background: var(--ds-surface); border-color: var(--ds-border); }
.ar-pf-faixa { background: #16181D; }
/* Inicio: faixa escura e lisa (sem gradiente, listra, brilho ou vidro) com o fio vermelho da marca na
   esquerda; os tres numeros em quadros de um escuro um pouco mais claro, numero branco */
.ar-hero-dia { background: #16181D; color: #FFFFFF; border: 0; box-shadow: var(--ar-sombra); }
.ar-hero-dia::before { display: none; }
.ar-hero-dia::after { left: 0; top: 0; bottom: 0; width: 4px; height: auto; border-radius: 0; background: var(--ds-primary); }
.ar-hd-data { color: rgba(255, 255, 255, .72); }
.ar-hd-oi { color: #FFFFFF; }
.ar-hd-frase { color: rgba(255, 255, 255, .86); }
.ar-hd-frase b { color: #FFFFFF; }
.ar-hero-item { background: #23262E; border: 1px solid #30343D; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ar-hero-item:hover { background: #2A2E37; border-color: #3C414C; box-shadow: none; }
.ar-hero-item > b { color: #FFFFFF; }
.ar-hero-item > span { color: rgba(255, 255, 255, .80); }
/* Treinos de hoje: AGORA e PROXIMA sem fundo colorido - fica a etiqueta pequena */
.ar-hj-tr.agora, .ar-hj-tr.proxima { border-color: var(--ds-border); }
.ar-hj-tr.agora { background: rgba(200, 22, 29, .035); box-shadow: inset 3px 0 0 var(--ds-primary); }
.ar-hj-tr.proxima { background: var(--ds-surface); box-shadow: inset 3px 0 0 var(--ar-ouro); }
.ar-hj-tr.agora .ar-hj-est { background: var(--ds-primary); color: #FFFFFF; }
.ar-hj-tr.agora .ar-hj-est > i { background: #FFFFFF; }
.ar-hj-tr.proxima .ar-hj-est { background: rgba(201, 162, 39, .16); color: #7A5E0C; }
.ar-hj-tr .cham.ok { color: var(--ds-muted); }

/* ---------------------------------------------------------------- titulos de secao e graficos sem vermelho decorativo */
.ar-secao { padding-left: 0; }
.ar-secao::before { display: none; }
.ar-bloco-tit, .ar-dash .ar-bloco-tit { padding-left: 0; }
.ar-bloco-tit::before, .ar-dash .ar-bloco-tit::before { display: none; }
.ar-graf-b { fill: #B4BBC7; }
.ar-graf-b.max { fill: var(--ds-ink); }
.ar-prog > i { background: var(--ds-ink); }
.ar-prog.ar-hj-ocup > i, .ar-ag-det-lot .ar-prog > i { background: #6B7280; }
.ar-aval-ficha .obs q { border-left-color: var(--ds-ink); }
.ar-cardev:hover .ar-cardev-btn, .ar-vt-linha:hover .ar-vt-abrir { background: var(--ds-ink-2); }
.ar-vt-abrir:focus-visible { background: var(--ds-ink-2); }
.ar-tb-abrir:hover { color: var(--ds-text); }
.ar-hj-cab > a:hover, .ar-ix-cab > a:hover, .ar-hj-ag:hover > div > span, .ar-hj-pv:hover .nm { color: var(--ds-text); text-decoration: underline; }
.ar-tb-limpar, .ar-notif-todas, .ar-notif-rodape { color: var(--ds-text); }
/* series dos graficos: tinta e cinzas (o ouro so como quinta serie, o vermelho da marca na oitava) */
.ar-ix .c0, .ar-ix-lista .c0, .ar-gd .c0 { --an-c: #111318; }
.ar-ix .c1, .ar-ix-lista .c1, .ar-gd .c1 { --an-c: #9CA3AF; }
.ar-ix .c2, .ar-ix-lista .c2, .ar-gd .c2 { --an-c: #4B5563; }
.ar-ix .c3, .ar-ix-lista .c3, .ar-gd .c3 { --an-c: #D1D5DB; }
.ar-ix .c4, .ar-ix-lista .c4, .ar-gd .c4 { --an-c: #C9A227; }
.ar-ix .c5, .ar-ix-lista .c5, .ar-gd .c5 { --an-c: #6B7280; }
.ar-ix .c6, .ar-ix-lista .c6, .ar-gd .c6 { --an-c: #2B2F38; }
.ar-ix .c7, .ar-ix-lista .c7, .ar-gd .c7 { --an-c: #C8161D; }
.ar-ix .g-f, .ar-gd .g-f { --an-c: #9CA3AF; }
.ar-ix .g-m, .ar-gd .g-m { --an-c: #111318; }
.ar-ix .g-n, .ar-gd .g-n { --an-c: #D1D5DB; }
.ar-ix .s-ent, .ar-gd .s-ent { --an-c: #111318; }
.ar-ix .s-sai, .ar-gd .s-sai { --an-c: #C8161D; }
.ar-ix .l-atu, .ar-gd .l-atu { --an-c: #111318; }
.ar-ix .l-ant, .ar-gd .l-ant { --an-c: #A3AAB6; }
.ar-ix-svg .ar-graf-b.max, .ar-pf-graf .ar-graf-b.atual { fill: var(--ds-ink); }
.ar-ix-linhas .ar-graf-b.ar-ix-area { fill: rgba(17, 19, 24, .06); }
.ar-gp-0 { --gp: #111318; }
.ar-gp-1 { --gp: #9CA3AF; }
.ar-gp-2 { --gp: #4B5563; }
.ar-gp-3 { --gp: #D1D5DB; }
.ar-gp-4 { --gp: #C9A227; }
.ar-gp-5 { --gp: #6B7280; }
.ar-gp-6 { --gp: #2B2F38; }
.ar-gp-pix { --gp: #6B7280; }
.ar-gp-cartao { --gp: #A3AAB6; }
.ar-gp-dinheiro { --gp: #111318; }
.ar-gp-cortesia { --gp: #D1D5DB; }
.ar-gp-ins { --gp: #9CA3AF; }
.ar-gp-ven { --gp: #D1D5DB; }
.ar-vd-seg.f-dinheiro { stroke: #111318; }
.ar-vd-seg.f-pix { stroke: #6B7280; }
.ar-vd-seg.f-debito { stroke: #A3AAB6; }
.ar-vd-seg.f-credito { stroke: #D1D5DB; }
.ar-vd-leg.f-dinheiro i, .ar-vd-forma.f-dinheiro i { background: #111318; }
.ar-vd-leg.f-pix i, .ar-vd-forma.f-pix i { background: #6B7280; }
.ar-vd-leg.f-debito i, .ar-vd-forma.f-debito i { background: #A3AAB6; }
.ar-vd-leg.f-credito i, .ar-vd-forma.f-credito i { background: #D1D5DB; }

/* ---------------------------------------------------------------- verde so no ponto de ok/ativo */
.ar-tr-linha span.ok, .ar-af-dif.bom, .ar-pd-mov-qt.mais, .ar-vd-tot > .desc b, .ar-ix-d.bom b, .ar-ix-st.s3 b,
.ar-ix-conv b, .ar-pf-res, .ar-dlg-ok, .ar-ag-det-nums .ok b, .ar-capt-chip-ok b { color: var(--ds-text); }
.ar-capt-chip-ok, .ar-pf-chip.ok, .ar-pf-chip.azul { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-ix-conv + .ar-prog > i, .ar-prog.ar-ix-prog-g > i { background: var(--ds-ink); }
.ar-lgpd-feito { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text-2); box-shadow: inset 3px 0 0 var(--ar-ok); }
.ar-pd-ficha, .ar-pd-ficha.sem { background: var(--ar-neutro-bg); color: var(--ds-text-2); }
.ar-dlg-area:focus { border-color: var(--ds-ink); }
@media (hover: hover) and (pointer: fine) {
  .ar-kpi-ok:hover { box-shadow: var(--ar-sombra-h); }
  .ar-kpi-wait:hover { box-shadow: inset 0 3px 0 var(--ar-ouro), var(--ar-sombra-h); }
}

/* ---------------------------------------------------------------- caixas de mensagem (TypeColor orange/green/blue do Falcon) */
.jconfirm.jconfirm-modern .jconfirm-type-green .jconfirm-icon-c,
.jconfirm.jconfirm-modern .jconfirm-type-blue .jconfirm-icon-c,
.jconfirm.jconfirm-modern .jconfirm-type-purple .jconfirm-icon-c,
.jconfirm.jconfirm-modern .jconfirm-type-dark .jconfirm-icon-c { background: var(--ar-neutro-bg); color: var(--ds-text) !important; }
.jconfirm .jconfirm-box.jconfirm-type-animated { animation: none !important; }
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-green,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-success,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-orange,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-warning,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-yellow,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-purple { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; color: #FFFFFF !important; }
.ar-capt-bt.ar-capt-ok, .ar-capt-bt.ar-capt-ok:hover { background: var(--ds-ink); border-color: var(--ds-ink); }

/* ---------------------------------------------------------------- menu lateral: sanduiche, trilho e gaveta
   Classes no html postas pelo adson-tema.js (arMenuModo / arMenuAlternar), a partir do modo que o
   Main.pas decide pela largura: ar-menu-trilho (tela larga recolhida, 68px), ar-menu-gaveta
   (abaixo de 1100px: o menu passa por cima do conteudo) + ar-menu-aberto (gaveta aberta).
   O ultimo item ("Sair") fica sempre alcancavel: o fim da lista tem folga acima do rodape. */
.ar-btn-hamburguer.x-btn { border-radius: 10px !important; min-width: 40px !important; }
.ar-btn-hamburguer .x-btn-button::after {
  content: ''; width: 20px; height: 20px; background-color: var(--ds-text); font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h16'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h16'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ar-sidebar .x-treelist-item-text { transition: color .12s ease, opacity .12s ease; }
/* a faixa azul-clara do tema do Ext no item ativo (row::before, 6px) brigava com o fio vermelho: sai */
.ar-sidebar .x-treelist-row::before { display: none !important; }

/* trilho: so os icones, centrados nos 68px; o nome vai na dica (data-qtip) */
html.ar-menu-trilho .ar-sidebar .x-treelist-row { padding: 0 !important; margin: 1px 8px; }
html.ar-menu-trilho .ar-sidebar .x-treelist-item-wrap { margin-left: 0 !important; }
html.ar-menu-trilho .ar-sidebar .x-treelist-item-icon { left: 16px !important; }
html.ar-menu-trilho .ar-sidebar .x-treelist-item-text { opacity: 0; pointer-events: none; }
html.ar-menu-trilho .ar-sidebar .x-treelist-item-expander { display: none !important; }
html.ar-menu-trilho .ar-sidebar .x-treelist-item[data-ar-secao] > .x-treelist-row {
  height: 0; min-height: 0; margin: 9px 14px 8px !important; padding: 0 !important; overflow: hidden;
}
html.ar-menu-trilho .ar-sidebar .x-treelist-container .x-treelist-item-icon { font-size: 13px !important; }
html.ar-menu-trilho .ar-sidebar .x-treelist-container .x-treelist-row { background: rgba(255, 255, 255, .035); }
html.ar-menu-trilho .ar-sidebar .x-abs-layout-item:has(> img) {
  left: 12px !important; top: 20px !important; width: 44px !important; height: 39px !important;
}
html.ar-menu-trilho .ar-sidebar .x-abs-layout-item > img { width: 44px !important; height: 39px !important; }
@media (hover: hover) and (pointer: fine) {
  html.ar-menu-trilho .ar-sidebar .x-treelist-row:hover .x-treelist-item-icon { translate: none; }
}
/* recolher e abrir: largura e posicao andam juntas, 180ms (so na troca; arrastar a janela nao anima) */
html.ar-menu-anima .ar-sidebar, html.ar-menu-anima .ar-sidebar ~ .ar-corpo {
  transition: width .18s cubic-bezier(.2, .8, .2, 1), left .18s cubic-bezier(.2, .8, .2, 1);
}

/* gaveta (tablet e celular): por cima do conteudo, com o veu escuro atras; comeca fechada */
html.ar-menu-gaveta .ar-sidebar {
  z-index: 40 !important; visibility: hidden; transform: translateX(-100%);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .2s;
}
html.ar-menu-gaveta.ar-menu-aberto .ar-sidebar {
  visibility: visible; transform: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
html.ar-menu-gaveta .ar-sidebar ~ .ar-corpo { z-index: 0; }
html.ar-menu-gaveta .ar-sidebar { top: 0 !important; height: 100% !important; }
.ar-menu-veu { display: none; }
html.ar-menu-gaveta .ar-menu-veu {
  display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 39;
  background: rgba(11, 12, 15, .45); opacity: 0; visibility: hidden; cursor: pointer;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
html.ar-menu-gaveta.ar-menu-aberto .ar-menu-veu { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
html.ar-menu-gaveta .ar-sidebar .x-treelist-row { margin-top: 2px; margin-bottom: 2px; }
html.ar-menu-gaveta .ar-sidebar .x-treelist-item-text, html.ar-menu-gaveta .ar-sidebar .x-treelist-item-icon,
html.ar-menu-gaveta .ar-sidebar .x-treelist-item-expander { line-height: 42px !important; }
html.ar-menu-gaveta .ar-sidebar .x-treelist-item-expander { height: 42px; }
html.ar-menu-gaveta .ar-sidebar .x-treelist-item[data-ar-secao] .x-treelist-item-text { line-height: 26px !important; }

/* ---------------------------------------------------------------- barra do topo no celular */
@media (max-width: 699px) {
  .ar-btn-usuario.x-btn { padding: 0 !important; max-width: 44px !important; }
  .ar-btn-usuario .x-btn-inner { justify-content: center; gap: 0; }
  .ar-btn-usuario .ar-us-txt { display: none !important; }
  .ar-topo .ar-titulo, .ar-topo .ar-titulo .x-innerhtml { font-size: 15px !important; }
  .ar-topo .ar-titulo { max-width: calc(100vw - 184px) !important; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .ar-topo .ar-titulo { max-width: calc(100vw - 566px) !important; }
}

/* ---------------------------------------------------------------- celular e tablet estreito: conteudo
   O conteudo das telas vem posicionado por Left/Top do DFM (desktop); aqui so o que e generico:
   nada de rolagem lateral na pagina, campo com 16px (o iPhone nao amplia ao focar), janela e caixa
   de mensagem dentro da tela, lista em cartoes numa coluna e tabela rolando de lado dentro da
   propria caixa. */
@media (max-width: 759px) {
  .x-form-text-wrap-default input, .x-form-trigger-wrap-default input, .x-form-text-default,
  textarea.x-form-text-default, .x-form-textarea, .ar-cards-busca input, .ar-tb-busca input,
  .ar-tb .ar-tb-inp[type=text], .ar-tb .ar-tb-inp[type=date], .ar-ix-dias-in input, .ar-dlg-area { font-size: 16px !important; }
  .x-window.x-layer:not(.ar-login-janela) { max-width: calc(100vw - 24px) !important; }
  /* janela flutuante (minha senha, upload, inscricao manual): centrada, e o que vai dentro acompanha a largura */
  .x-window.x-layer:not(.ar-login-janela) { left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-box-inner,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-box-target,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body > .x-panel,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-body,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-bodyWrap > .x-panel-body {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-title { width: calc(100% - 44px) !important; }
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-tool { left: auto !important; right: 4px !important; }
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt,
  .x-window.x-layer:not(.ar-login-janela) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt { width: 100% !important; }
  .jconfirm .jconfirm-box { max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
  .iziToast { max-width: calc(100vw - 24px) !important; }
  .ar-notif-painel { max-width: calc(100vw - 24px); }
  .ar-cards, .ar-cards.compacto, .ar-lista-pessoas .ar-cards, .ar-ix-cards, .ar-lista-produtos .ar-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ar-lista .ar-cards-area { margin: 0 12px; }
  .ar-cards-busca { flex-wrap: wrap; row-gap: 10px; }
  .ar-cards-busca input { min-width: 0 !important; flex: 1 1 100%; }
  .ar-tb-barra { flex-wrap: wrap; }
  .ar-tb-busca { flex: 1 1 100%; }
  .ar-tb-rolo, .ar-vt-rolo, .ar-rk-rolo, .ar-ix-tab { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ar-dash-kpis, .ar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ar-dash-linha, .ar-ix-grade, .ar-ix-grade:has(> .ar-ix-l3), .ar-pd-grade { grid-template-columns: minmax(0, 1fr) !important; }
  .ar-ix-kpis.c3, .ar-ix-kpis.c4, .ar-ix-kpis.c5, .ar-ix-ret-kpis, .ar-fin-tiles, .ar-fin-tiles.n5, .ar-fin-tiles.n6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ar-hero-dia { padding: 16px; }
  .ar-hd-oi { font-size: 22px; }
  .ar-hero-item { min-width: 0; flex: 1 1 calc(50% - 10px); }
  .ar-hero-item > span { white-space: normal; }
  .ar-kpi.ar-ix-ret { padding: 12px 12px 12px 14px; }
  .ar-ix-ret-ic { width: 30px; height: 30px; top: 10px; right: 10px; }
  .ar-ix-ret .ar-kpi-t { padding-right: 32px; }
  .ar-kpi, .ar-kpi-s, .ar-ix-ret-s, .ar-dash-kpis > *, .ar-kpi-v { overflow-wrap: break-word; }
  .ar-kpi-v { font-size: 24px; }
  /* telas no celular (adson-tema.js, "telas no celular"): cabecalho sem o titulo (a barra do topo
     ja diz onde se esta), botoes e filtros quebrando em linhas; painel de edicao em uma coluna */
  .ar-fluxo-cab { display: flex !important; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; padding: 10px 12px; box-sizing: border-box; overflow-y: auto !important; }
  .ar-fluxo-cab > .x-abs-layout-item { position: relative !important; left: auto !important; top: auto !important; max-width: 100%; }
  .ar-fluxo-cab > .ar-titulo, .ar-fluxo-cab > .ar-sub { display: none !important; }
  .x-panel-body:has(> .ar-fluxo-cab), .x-panel-body:has(> .x-autocontainer-outerCt > .ar-fluxo-cab) { overflow-y: auto !important; overflow-x: hidden !important; }
  .ar-fluxo-cab.ar-fluxo-tira { flex-wrap: nowrap; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ar-fluxo-cab.ar-fluxo-tira > .x-abs-layout-item { flex: 0 0 auto; }
  .ar-fluxo-cab { padding: 6px 12px; gap: 6px 8px; }
  .ar-fluxo { display: flex !important; flex-wrap: wrap; align-items: flex-end; align-content: flex-start; gap: 6px 10px; height: auto !important; padding: 12px 14px 18px; box-sizing: border-box; }
  .ar-fluxo > .x-abs-layout-item { position: relative !important; left: auto !important; top: auto !important; max-width: 100%; }
  .ar-fluxo > .x-field, .ar-fluxo > .x-component:not(:has(> img)), .ar-fluxo > .x-panel, .ar-fluxo > .x-container { width: 100% !important; }
  .ar-fluxo > .x-component.ar-rotulo { margin-top: 6px; }
  .ar-fluxo > .x-btn { flex: 0 0 auto; }
  /* o painel que contem o fluxo fica do tamanho que o servidor deu e rola por dentro (nunca cobre o vizinho) */
  .x-panel-body:has(> .ar-fluxo), .x-panel-body:has(> .x-autocontainer-outerCt > .ar-fluxo) { overflow-y: auto !important; overflow-x: hidden !important; }
  .ar-fluxo-auto > .x-panel-bodyWrap > .x-panel-body:has(> .x-autocontainer-outerCt > .ar-fluxo) { overflow-y: visible !important; }
  .ar-fluxo-auto, .ar-fluxo-auto > .x-panel-bodyWrap, .ar-fluxo-auto > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo-auto .x-autocontainer-outerCt { height: auto !important; }
  .x-tab-bar .x-box-scroller, .x-tab-bar-default .x-box-scroller { background-color: transparent !important; border: 0 !important; filter: grayscale(1); opacity: .7; }
  .ar-tr-acoes.ar-hj-acoes { justify-content: flex-start; }
  .ar-tr-acoes > span, .ar-aba, .ar-cardev-btn, .ar-vt-abrir, .ar-tb-pag, .ar-vista-bt { min-height: 40px; box-sizing: border-box; }
  .ar-kpis.ar-fin-res { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "blocos" "formas" "resumo"; grid-template-rows: auto; height: auto; }
  .ar-cardev-btn { display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------- celular, segunda passada (24/10/2026)
   Pedido do dono: "adapte o layout para telas pequenas; menus, imagens, fontes e botoes bons no toque;
   nada vaze para fora da tela". Medido em 390px nas 41 telas (C:\BuildTemp\AdsonRamon\verif-mobile-gestor):
   - painel que virou item da coluna (ar-fluxo) encolhia, mas o corpo dele ficava na largura do
     computador: o conteudo saia cortado e o fluxo de dentro nunca era acionado;
   - cabecalho sem o titulo guardava a altura do computador (faixa vazia no topo);
   - pilulas de periodo, abas e rotulos longos passavam da borda;
   - alvos de toque de 17 a 34px (seta da caixa, paginas, abrir, chips, "Ver agenda"). */
@media (max-width: 759px) {
  /* painel que virou item da coluna: o corpo acompanha a largura da tela (a grade do Ext fica fora:
     ela calcula as colunas pela largura que tem) */
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-header,
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-bodyWrap,
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-body { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt,
  .ar-fluxo > .x-panel:not(.x-grid) > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt { width: 100% !important; }
  /* a coluna e o cabecalho ficam da largura de quem os contem (o Ext deixava a largura que calculou
     para as posicoes do computador - 388px dentro de um corpo de 332) */
  .ar-fluxo, .ar-fluxo-cab { width: 100% !important; max-width: 100%; }
  /* cabecalho que coube sem a faixa de rolar (adson-tema.js): fica da altura do que mostra */
  .x-panel.ar-cab-encolhe, .x-panel.ar-cab-encolhe > .x-panel-bodyWrap, .x-panel.ar-cab-encolhe > .x-panel-bodyWrap > .x-panel-body,
  .x-panel.ar-cab-encolhe > .x-panel-body, .x-panel.ar-cab-encolhe .x-autocontainer-outerCt,
  .x-panel.ar-cab-encolhe .ar-fluxo-cab { height: auto !important; }
  /* rotulo e texto de apoio na coluna: quebram linha em vez de passar da borda */
  .ar-fluxo > label.x-component, .ar-fluxo-cab > label.x-component { height: auto !important; white-space: normal !important; }
  .ar-fluxo > label.x-component .x-innerhtml, .ar-fluxo-cab > label.x-component .x-innerhtml { white-space: normal !important; overflow-wrap: anywhere; }

  /* pilulas de periodo e barras de abas: faixa que rola de lado dentro da propria caixa (o frame tem
     altura fixa: quebrar linha cortaria a de baixo) */
  .ar-pilulas, .ar-vd-periodos, .ar-abas:not(.ar-ix-abas) {
    max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ar-vd-periodos { white-space: nowrap; }
  .ar-pilulas::-webkit-scrollbar, .ar-vd-periodos::-webkit-scrollbar, .ar-abas::-webkit-scrollbar { display: none; }
  .ar-pilulas > *, .ar-abas > * { flex: none; }
  /* indicadores: as abas numa linha e o "Atualizado as" embaixo (antes passava da borda) */
  .ar-ix-abas { flex-wrap: wrap; row-gap: 8px; }
  .ar-ix-quando { flex-basis: 100%; margin-left: 0; }
  .ar-capt-acoes { flex-wrap: wrap; }
  .ar-capt-link { flex-wrap: wrap; }
  .ar-capt-link .ar-capt-url { flex: 1 1 100%; }
  /* escolha de mes dos aniversariantes: 16px, senao o iPhone amplia a tela ao tocar */
  select.ar-ix-mes { font-size: 16px; }

  /* toque: 40px no minimo */
  .x-form-trigger-default, .x-form-arrow-trigger, .x-form-arrow-trigger-default,
  .x-form-date-trigger, .x-form-date-trigger-default { width: 40px !important; }
  .ar-tb-pag { min-width: 40px; height: 40px; }
  .ar-tb-pags { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .ar-tb-abrir, .ar-hj-zap { width: 40px; height: 40px; }
  .ar-ix-chip, .ar-capt-bt { height: 40px; }
  .ar-ix-chip.seta { width: 40px; }
  .ar-marcador { padding: 9px 14px; }
  .ar-hj-dp-venc { min-height: 40px; box-sizing: border-box; }
  /* "Ver agenda", "Ver eventos"...: a area de toque cresce sem mexer no desenho do bloco */
  .ar-hj-cab > a, .ar-ix-cab > a { padding: 12px 0 12px 12px; margin-top: -12px; margin-bottom: -12px; }
}

/* ---------------------------------------------------------------- movimento leve
   Entrada curta (120-200 ms) e pequena (6-8 px), sem mola nem ampliar; nada em laco infinito
   (fora o carregando e o esqueleto); o hover levanta 2px no maximo. As duracoes do IMPACTO
   (--im-t-*) sao lidas pelo adson-tema.js daqui. */
:root {
  --mv-passo: 22ms;
  --im-mola: cubic-bezier(.2, .8, .2, 1);
  --im-t-hover: .15s; --im-t-titulo: .18s; --im-t-entra: .18s; --im-t-bloco: .2s; --im-t-pop: .16s;
  --im-t-campo: .16s; --im-t-fade: .15s; --im-t-lado: .16s; --im-t-fio: .2s;
}
@keyframes arMvLinha     { from { opacity: 0; transform: translateY(6px); } }
@keyframes arMvSobe      { from { opacity: 0; transform: translateY(6px); } }
@keyframes arMvSobeCurto { from { opacity: 0; transform: translateY(4px); } }
@keyframes arMvHero      { from { opacity: 0; transform: translateY(6px); } }
@keyframes arMvLado      { from { opacity: 0; transform: translateX(clamp(-8px, var(--mv-dx, 8px), 8px)); } }
@keyframes arMvJanela    { from { opacity: 0; transform: scale(.98); } }
@keyframes arImEsq       { from { opacity: 0; transform: translateX(-6px); } }
@keyframes arImPop       { from { opacity: 0; transform: scale(.97); } }
@keyframes arImSobe      { from { opacity: 0; transform: translateY(6px); } }
@keyframes arImCampo     { from { opacity: 0; transform: translateY(4px); } }
@keyframes arImDesce     { from { opacity: 0; transform: translateY(-4px); } }
.ar-mv-linha, .ar-mv-linha-tb { animation-duration: .18s; }
.ar-mv-bloco { animation-duration: .2s; animation-delay: calc(var(--i, 0) * 30ms); }
.ar-mv-hero { animation-duration: .2s; }
.ar-mv-hero-item { animation-duration: .16s; animation-delay: calc(.06s + var(--i, 0) * .04s); }
.ar-mv-aba { animation-duration: .18s; }
.ar-mv-janela { animation-duration: .16s; }
.x-mask { animation-duration: .15s; }
.x-tip { animation-duration: .12s; }
.x-menu.x-layer, .x-boundlist { animation-duration: .12s; }
.ar-graf-b, .ar-evo-graf rect { animation-duration: .35s; }
.ar-graf-v, .ar-evo-graf text { animation-delay: calc(var(--mv-atraso, 0s) + .2s); }
.ar-rosca-varre { animation-duration: .4s; }
.ar-prog > i { animation-duration: .3s; }
.ar-onda { animation-duration: .3s; }
.ar-notif-painel { animation-duration: .15s; }
.ar-notif-lista.ar-entra .ar-notif-item { animation-duration: .15s; animation-delay: calc(var(--i, 0) * 20ms); }
.ar-pd-foto > img { transition: none; }
/* sem laco infinito: brilho, ping, faixa do login, pulso do "ao vivo" e do tutorial (2 vezes so) */
.ar-brilho::after, .ar-ping::after { display: none !important; animation: none !important; }
.ar-hero-halter, .ar-hero-marca-dagua { animation: none !important; }
.ar-tour-luz::after { animation-iteration-count: 2; }
/* sino: o selo aparece sem pulo e o sino nao balanca */
.ar-btn-sino.x-btn::after { transition: transform .15s ease, opacity .15s ease; }
.ar-btn-sino.x-btn[data-pulso]::after { animation: arMvFade .15s linear both; }
.ar-btn-sino.x-btn[data-pulso] .x-btn-button::after { animation: none; }
.ar-notif-item:hover .ar-notif-ico { transform: none; }
/* hover: no maximo 2px e sem ampliar */
@media (hover: hover) and (pointer: fine) {
  .ar-cardev:hover { translate: 0 -2px; scale: none; }
  .ar-cardev:active { translate: none; scale: none; }
  .ar-cardev:hover .ar-cardev-btn { scale: none; }
  .ar-cardev:hover::before, .ar-kpi:hover::before { height: 2px; }
  .ar-kpi:hover, .ar-evo-num:hover { translate: 0 -2px; scale: none; }
  .ar-bloco:hover { translate: none; scale: none; }
  .ar-kpi:hover, .ar-evo-num:hover, .ar-bloco:hover, .ar-cardev:hover { box-shadow: var(--ar-sombra-h); }
  .ar-kpi-wait:hover { box-shadow: inset 0 3px 0 var(--ar-ouro), var(--ar-sombra-h); }
  .ar-kpi-ok:hover { box-shadow: var(--ar-sombra-h); }
  .ar-cardev.sel:hover { box-shadow: inset 0 0 0 1px var(--ds-ink), var(--ar-sombra-h); }
  .x-btn:not(.x-item-disabled):hover { translate: none; scale: none; }
  .x-btn:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: var(--ar-sombra) !important; }
  .x-btn.ar-btn-primario:not(.x-item-disabled):hover:not(:focus-visible),
  .x-btn.ar-btn-escuro:not(.x-item-disabled):hover:not(:focus-visible),
  .x-btn.ar-btn-preto:not(.x-item-disabled):hover:not(:focus-visible) { box-shadow: none !important; }
  .x-btn:not(.x-item-disabled):active { translate: 0 1px; scale: none; }
  .ar-aba:not(.sel):hover, .ar-marcador:hover, .ar-tr-acoes span:hover,
  .ar-tb-pag:hover:not(:disabled):not(.on), .ar-tvp-centro:hover:not(:disabled) { translate: none; scale: none; box-shadow: none; }
  .ar-cards-novo:hover { translate: none; scale: none; box-shadow: none; }
  .ar-aba:active, .ar-marcador:active, .ar-tr-acoes span:active, .ar-tb-pag:active:not(:disabled), .ar-cards-novo:active { scale: none; translate: 0 1px; }
  .ar-sidebar .x-treelist-row:hover .x-treelist-item-text, .ar-sidebar .x-treelist-row:hover .x-treelist-item-icon { translate: none; }
  .ar-tb tr.ar-tl:hover { box-shadow: none; }
  .ar-tb-abrir:hover { scale: none; }
  .ar-evo-item:hover .ar-evo-item-foto img, .ar-evo-foto:hover img { scale: none; }
  .ar-pilulas > .ar-aba.ar-pilula:not(.sel):hover, .ar-lead-pils > .ar-aba.ar-lead-pilula:not(.sel):hover { box-shadow: none; }
  .ar-lista-produtos .ar-cardev:hover .ar-pd-foto > img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ar-menu-gaveta .ar-sidebar, html.ar-menu-gaveta .ar-menu-veu,
  html.ar-menu-anima .ar-sidebar, html.ar-menu-anima .ar-sidebar ~ .ar-corpo { transition: none !important; }
}

/* sotreino restante contratos */
/* Contratos digitais (23/10/2026, script 39): Gestao > Contratos (Gestor/Cadastros/uContratos.pas) e a
   secao "Contratos digitais" da aba Arquivos/Contratos do perfil do aluno. So classes; a entrada e a
   da onda 1 (.ar-kpis, .ar-cards-area, .ar-aba-painel).
   - lista: o icone do estado vazio (data-ic="contrato") e os quatro numeros (.ar-ct-kpis) nos 126 px
   - aceites: o placar (aceitaram x pendentes, com a barra), o "Lembrar os pendentes no WhatsApp"
     (leva a lista para Avisos: montar, conferir, enviar) e o aviso de contrato encerrado, dentro da
     area que rola, antes dos cartoes de pessoa
   - versoes e perfil: o texto de cada versao num <details> com uma caixa de leitura que rola
   - edicao: o memo do texto com letra de leitura */
.ar-vz[data-ic="contrato"], .ar-ct-ic { --ct-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 00-2 2v13a2 2 0 002 2h10a2 2 0 002-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5'/%3E%3Cpath d='M8.5 12.5h7'/%3E%3Cpath d='M8.5 17c1-1.6 1.8-1.6 2.4 0s1.4 1.6 2.4 0 1.6-1.2 2.2.4'/%3E%3C/svg%3E"); }
.ar-vz[data-ic="contrato"] { --vz-ic: var(--ct-ic); }

/* os quatro numeros: cabem nos 126 px do frame (rodape do cartao numa linha so) */
.ar-ct-resumo > .x-panel-bodyWrap > .x-panel-body { overflow: hidden !important; }
.ar-kpis.ar-ct-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ar-ct-kpis .ar-kpi { padding: 12px 16px 10px; }
.ar-ct-kpis .ar-kpi-v { margin-top: 4px; }
.ar-ct-kpis .ar-kpi-s { margin-top: 7px; padding-top: 7px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* cartoes da lista: o selo "N pendentes" / "Sem alunos" leva a bolinha na cor dele (a .ar-sit-ativo,
   que as pilulas Todos | Ativos | Inativos procuram, pinta de verde) */
.ar-lista-contratos .ar-selo.ar-selo-espera.ar-sit-ativo::before,
.ar-lista-contratos .ar-selo.ar-selo-neutro.ar-sit-ativo::before { background: currentColor; }

/* aceites: placar, lembrete e aviso de encerrado */
.ar-ct-topo { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 16px; font-family: var(--ds-font); }
.ar-ct-placar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; padding: 16px 20px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
}
.ar-ct-placar-num { grid-row: span 2; display: flex; align-items: baseline; gap: 10px; }
.ar-ct-placar-num b { font: 800 40px/1 var(--ds-font); color: var(--ds-success); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-ct-placar-num span { max-width: 320px; font: 600 14px/1.35 var(--ds-font); color: var(--ds-text-2); }
.ar-prog.ar-ct-barra { height: 12px; background: var(--ds-warn-bg); }
.ar-prog.ar-ct-barra > i { background: linear-gradient(90deg, #22C55E, var(--ds-success)); }
.ar-ct-placar-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 13px var(--ds-font); color: var(--ds-muted); }
.ar-ct-placar-leg span { display: inline-flex; align-items: center; gap: 7px; }
.ar-ct-placar-leg span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ar-ct-placar-leg .ok { color: var(--ds-success); }
.ar-ct-placar-leg .pend { color: var(--ds-warn); }
.ar-ct-placar-leg .ant { color: #92400E; }
.ar-ct-lembrar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px;
  border-radius: var(--ds-radius); background: #F0FDF4; border: 1px solid #BBF7D0;
}
.ar-ct-lembrar span { flex: 1 1 320px; font: 500 13.5px/1.5 var(--ds-font); color: #14532D; }
.ar-ct-lembrar .ar-pf-bt { background: #15803D; box-shadow: 0 8px 16px -10px rgba(21, 128, 61, .7); }
.ar-ct-lembrar .ar-pf-bt:hover { background: #166534; }
.ar-ct-lembrar [data-ic="zap"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.4-4.2A8.3 8.3 0 1112 20.3a8.3 8.3 0 01-4.1-1.1z'/%3E%3Cpath d='M9.2 8.6c.2 2.6 3.2 5.8 6 6.2l.9-1.6-2.2-1.1-.9.8c-1-.5-1.9-1.4-2.4-2.4l.8-.9-1.1-2.2z'/%3E%3C/svg%3E"); }
.ar-ct-encerrado { padding: 12px 16px; border-radius: var(--ds-radius); background: #F1F2F5; color: #4B5361; font: 500 14px/1.5 var(--ds-font); }
.ar-ct-encerrado b { display: block; font-weight: 800; color: var(--ds-text); }
.ar-ct-dica { font: 500 13px var(--ds-font); color: var(--ds-muted); }

/* versoes: a lista rola dentro do frame */
.ar-ct-area .ar-ct-versoes {
  height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  padding: 2px 6px 18px 2px; scrollbar-gutter: stable; font-family: var(--ds-font);
}
.ar-ct-area .ar-ct-versoes::-webkit-scrollbar { width: 8px; }
.ar-ct-area .ar-ct-versoes::-webkit-scrollbar-thumb { background: #C3CBD8; border-radius: 999px; }
.ar-ct-ver-intro { margin: -2px 0 14px; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-ct-ver {
  margin-bottom: 12px; padding: 14px 18px; background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
}
.ar-ct-ver.atual { box-shadow: inset 3px 0 0 var(--ds-success), var(--ds-shadow); }
.ar-ct-ver-cab { display: flex; align-items: center; gap: 14px; }
.ar-ct-ver-n {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft); font: 800 16px var(--ds-font); color: var(--ds-text);
}
.ar-ct-ver.atual .ar-ct-ver-n { background: var(--ds-success-bg); border-color: transparent; color: var(--ds-success); }
.ar-ct-ver-txt { min-width: 0; }
.ar-ct-ver-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 15px var(--ds-font); color: var(--ds-text); }
.ar-ct-ver-txt small { display: block; margin-top: 3px; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }

/* o texto do contrato (versoes e perfil do aluno): abre e fecha no <details> */
.ar-ct-det { margin-top: 10px; }
.ar-ct-det > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none;
  font: 700 13px var(--ds-font); color: var(--ds-primary);
}
.ar-ct-det > summary::-webkit-details-marker { display: none; }
.ar-ct-det > summary::before {
  content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.ar-ct-det[open] > summary::before { transform: rotate(45deg); }
.ar-ct-det > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.ar-ct-det > summary:focus-visible { outline: none; box-shadow: var(--ds-ring); border-radius: 6px; }
.ar-ct-texto {
  margin-top: 10px; max-height: 360px; overflow-y: auto; padding: 14px 16px; border-radius: 10px;
  background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft);
  font: 400 14px/1.6 var(--ds-font); color: var(--ds-text-2); overflow-wrap: anywhere;
}

/* perfil do aluno: os contratos em cima dos arquivos */
.ar-ct-pf { margin-bottom: 22px; }
.ar-ct-pf .ar-pf-item > .ar-selo { white-space: nowrap; }
.ar-ct-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(150deg, #2B303A 0%, var(--ds-ink) 70%);
}
.ar-ct-ic::before {
  content: ''; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: var(--ct-ic) no-repeat center / contain; mask: var(--ct-ic) no-repeat center / contain;
}
.ar-ct-prova { display: block; margin-top: 3px; font: 600 12.5px/1.4 var(--ds-font) !important; color: var(--ds-text-2) !important; }
.ar-ct-item .ar-ct-det { margin-top: 6px; }

/* edicao: o texto com letra de leitura e a linha da versao em destaque */
.ar-ct-memo textarea { font: 400 14px/1.6 var(--ds-font) !important; color: var(--ds-text) !important; }
.ar-ct-versao, .ar-ct-versao .x-innerhtml { font-weight: 600 !important; color: var(--ds-text-2) !important; }

/* movimento reduzido: a seta do texto vira sem girar (a barra e a .ar-prog da onda 1) */
@media (prefers-reduced-motion: reduce) { .ar-ct-det > summary::before { transition: none; } }

/* sotreino restante responsavel */
/* ============================================================================
   RESPONSAVEL E QUEM PAGA AS COBRANCAS (script 40, 23/10/2026)
   - ficha do aluno (uCadAtleta): as duas linhas embaixo do bloco (.ar-dica-resp:
     em nome de quem saem as cobrancas; .ar-dica-resp-app: o que o responsavel
     ligado ve no app) e o "O responsavel paga as cobrancas" em destaque
     (.ar-chk-resp);
   - perfil do aluno (uPerfilAluno, Informacoes): o responsavel e os dependentes
     clicaveis (.ar-pf-pessoa) e o "Quem paga" do responsavel (.ar-pf-paga).
   So cor e tipografia; o movimento e o das camadas da onda 1.
   ========================================================================== */
.ar-dica-resp, .ar-dica-resp .x-innerhtml {
  font-size: 12.5px !important; line-height: 16px !important; font-weight: 600 !important;
  color: var(--ds-text-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-dica-resp-app, .ar-dica-resp-app .x-innerhtml { color: var(--ds-muted) !important; font-weight: 500 !important; }

.ar-chk-resp .x-form-cb-label { font-weight: 700 !important; color: var(--ds-text) !important; }
.ar-chk-resp.x-form-cb-checked .x-form-cb-label,
.ar-chk-resp .x-form-cb-checked .x-form-cb-label { color: var(--ds-primary) !important; }

.ar-pf-col dd a.ar-pf-pessoa {
  color: var(--ds-primary); font-weight: 700; text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.ar-pf-col dd a.ar-pf-pessoa:hover, .ar-pf-col dd a.ar-pf-pessoa:focus-visible { border-bottom-color: currentColor; outline: none; }
.ar-pf-col dd.ar-pf-paga {
  justify-self: start; padding: 0 9px; border-radius: 999px; line-height: 21px;
  background: var(--ds-warn-bg); color: var(--ds-warn); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .ar-pf-col dd a.ar-pf-pessoa { transition: none; } }

/* sotreino restante push */
/* ============================================================================
   NOTIFICACOES PUSH (23/10/2026, script 36): Comunicacao > Notificacoes push
   (Gestor/Movimento/uPush.pas) e o "Notificar no celular" do Mural.
   No estilo de 23/10 (contraste claro, pouca cor): cartao branco com fio visivel,
   numero e titulo fortes, texto escuro; vermelho so no botao principal (Enviar
   agora); atencao (ninguem recebe, falhas) em ouro sobrio.
   - alcance: "N alunos recebem esta notificacao" no alto do cartao de edicao
   - previa: o celular (moldura preta, tela grafite lisa, sem brilho nem degrade)
     com a notificacao clara; o texto troca a cada tecla (arPushPrevia, adson-tema.js)
   - contador de cada campo no rotulo (conta como o banco: emoji vale varios)
   - historico: cartoes do uCartoes; "Falharam" maior que zero em ouro sobrio
   - icone do estado vazio: o sino (data-ic="notificacao", ja existente)
   Sem animacao propria: a entrada e a das camadas da onda 1 (.ar-cartao, cartoes).
   ========================================================================== */
.ar-push-alc-ic, .ar-push-n-cab { --push-sino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 003.4 0'/%3E%3C/svg%3E"); }

/* alcance: quem recebe */
.ar-push-alc {
  display: flex; align-items: center; gap: 14px; height: 60px; box-sizing: border-box; padding: 0 16px 0 18px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font);
}
.ar-push-alc.zero { border-left: 3px solid var(--ar-ouro); padding-left: 16px; }
.ar-push-alc-ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft); color: var(--ds-text-2);
}
.ar-push-alc-ic::before {
  content: ''; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--push-sino) no-repeat center / contain; mask: var(--push-sino) no-repeat center / contain;
}
.ar-push-alc.zero .ar-push-alc-ic { color: var(--ar-ouro-txt); }
.ar-push-alc-txt { min-width: 0; font: 500 14px/1.3 var(--ds-font); color: var(--ds-text-2); }
.ar-push-alc-txt b { font-size: 15px; font-weight: 800; color: var(--ds-text); }
.ar-push-alc-txt small {
  display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* contador no rotulo de cada campo */
.ar-push-rot { overflow: visible !important; }
.ar-push-rot .ar-push-cont {
  float: right; font: 600 12px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums;
}
.ar-push-rot .ar-push-cont.cheio { color: var(--ds-danger); font-weight: 800; }

/* previa: o celular */
.ar-push-previa .x-component-body, .ar-push-previa > div { overflow: visible; }
.ar-push-cel {
  width: min(100%, 290px); aspect-ratio: 9 / 16; max-height: 460px; margin: 0 auto; box-sizing: border-box;
  padding: 9px; border-radius: 38px; background: #111318; border: 1px solid #000000;
}
.ar-push-cel-tela {
  position: relative; height: 100%; box-sizing: border-box; padding: 40px 12px 16px; border-radius: 30px;
  background: #2B2F38; overflow: hidden; text-align: center; color: #FFFFFF; font-family: var(--ds-font);
}
.ar-push-cel-tela::before {
  content: ''; position: absolute; top: 10px; left: 50%; width: 78px; height: 20px; margin-left: -39px;
  border-radius: 12px; background: #111318;
}
.ar-push-cel-hora { font: 300 52px/1 var(--ds-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-push-cel-data { margin-top: 6px; font: 500 13px var(--ds-font); color: rgba(255, 255, 255, .78); }
.ar-push-cel-data::first-letter { text-transform: uppercase; }
.ar-push-n {
  margin-top: 26px; padding: 11px 12px 12px; border-radius: 16px; text-align: left;
  background: #F4F5F7; color: var(--ds-text);
}
.ar-push-n-cab { display: flex; align-items: center; gap: 7px; font: 700 11px var(--ds-font); letter-spacing: .06em; color: #4B5563; }
.ar-push-n-cab img { flex: none; width: 20px; height: 20px; border-radius: 5px; object-fit: cover; background: #111318; }
.ar-push-n-cab span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-push-n-cab em { flex: none; font-style: normal; font-weight: 500; letter-spacing: 0; color: #6B7280; }
.ar-push-n-tit {
  margin-top: 7px; font: 700 14.5px/1.3 var(--ds-font); color: #111318; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-push-n-txt {
  margin-top: 2px; font: 400 13.5px/1.4 var(--ds-font); color: #374151; overflow-wrap: anywhere; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-push-n-tit:empty::before, .ar-push-n-txt:empty::before { content: '\2014'; color: #9CA3AF; }
.ar-push-n-tit.vazio, .ar-push-n-txt.vazio { color: #9CA3AF; font-weight: 500; }
.ar-push-cel-leg {
  max-width: 300px; margin: 12px auto 0; font: 500 12.5px/1.45 var(--ds-font); color: var(--ds-muted); text-align: center;
}

/* historico: falhas em ouro sobrio (o selo "Com falhas" ja e o ar-selo-espera) */
.ar-cardev-linhas dd.ar-push-falha, .ar-vt-tabela td.ar-push-falha, .ar-vt-tabela td.ar-push-falha .ar-vt-c {
  color: var(--ar-ouro-txt); font-weight: 700;
}

/* tela estreita: o celular encolhe com a coluna */
@media (max-width: 1100px) {
  .ar-push-cel { width: min(100%, 250px); border-radius: 32px; }
  .ar-push-cel-tela { border-radius: 25px; padding-top: 34px; }
  .ar-push-cel-hora { font-size: 44px; }
}
/* celular (abaixo de 760px o cartao vira coluna - ar-fluxo do bloco "simplificacao 23/10"): os campos
   primeiro, a previa (menor) depois da dica e os botoes Enviar agora / Limpar no fim; a faixa de
   alcance e a previa crescem com o que mostram (sem rolagem por dentro nem legenda cortada) */
@media (max-width: 759px) {
  .ar-fluxo > .ar-push-previa { order: 900 !important; margin-top: 10px; }
  .ar-fluxo > .ar-push-acao { order: 950 !important; margin-top: 6px; }
  .ar-fluxo > .ar-push-previa, .ar-fluxo > .ar-push-previa > .x-panel-bodyWrap,
  .ar-fluxo > .ar-push-previa > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-push-alcance, .ar-fluxo > .ar-push-alcance > .x-panel-bodyWrap,
  .ar-fluxo > .ar-push-alcance > .x-panel-bodyWrap > .x-panel-body { height: auto !important; overflow: visible !important; }
  .ar-push-cel { width: min(100%, 220px); max-height: none; border-radius: 30px; }
  .ar-push-cel-tela { border-radius: 23px; padding-top: 30px; }
  .ar-push-cel-hora { font-size: 40px; }
  .ar-push-n { margin-top: 18px; }
  .ar-push-alc { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  .ar-push-alc-txt small { white-space: normal; }
}

/* sotreino restante presenca */
/* ============================================================================
   CHECK-IN POR QR CODE (script 38 - Gestor/Movimento/uCheckinQR.pas). O palco do QR: cartao
   branco com fio visivel na pagina cinza, numero forte e texto escuro; o vermelho so no botao
   principal (Tela cheia) e o aviso em ouro sobrio (simplificacao de 23/10). A contagem dos 30 s numa
   barra escura, a tela cheia (:fullscreen - so o palco, com o nome do estudio), a folha do QR do
   dia (@media print, a mesma tecnica do recibo) e o icone do botao Tela cheia. Movimento: so a
   troca do QR (opacidade, 150 ms) e a barra; com movimento reduzido, nada.
   ========================================================================== */
.ar-ic-tela-cheia { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }

.ar-qrc { height: 100%; overflow: auto; box-sizing: border-box; }
.ar-qrc-palco {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-height: 100%; box-sizing: border-box; padding: 4px 8px 16px;
}
.ar-qrc-marca { display: none; text-align: center; }
.ar-qrc-marca b { display: block; font-family: var(--ds-marca); font-size: 44px; line-height: 1; letter-spacing: .04em; color: var(--ds-text); }
.ar-qrc-marca span { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; letter-spacing: .22em; color: var(--ds-muted); }
.ar-qrc-cartao {
  position: relative; width: 100%; max-width: 440px; box-sizing: border-box; padding: 20px 22px 16px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 16px;
  box-shadow: var(--ds-shadow); text-align: center; overflow: hidden;
}
/* o QR encolhe com a altura da janela: em 1366x768 o cartao e a turma cabem sem rolar */
.ar-qrc-qr {
  width: 100%; max-width: min(280px, calc(100vh - 480px)); min-width: 200px; margin: 0 auto; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 8px;
  background: #FFFFFF; border: 1px solid var(--ds-border-soft); border-radius: 12px;
}
.ar-qrc-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity .15s ease; }
.ar-qrc-img.troca { opacity: .15; }
.ar-qrc-instr { margin: 14px 6px 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ds-text); }
.ar-qrc-cod { margin-top: 12px; }
.ar-qrc-cod span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted); }
.ar-qrc-cod b {
  display: block; margin-top: 4px; font-family: var(--ds-marca); font-size: 48px; line-height: 1;
  letter-spacing: .12em; color: var(--ds-text); font-variant-numeric: tabular-nums;
}
.ar-qrc-tempo { margin-top: 12px; }
.ar-qrc-trilho { display: block; height: 4px; border-radius: 99px; background: var(--ds-border-soft); overflow: hidden; }
.ar-qrc-trilho i { display: block; height: 100%; border-radius: 99px; background: var(--ds-ink); transform-origin: left center; transition: transform .25s linear; }
.ar-qrc-seg { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--ds-muted); }
.ar-qrc-turma {
  width: 100%; max-width: 440px; box-sizing: border-box; padding: 12px 16px; text-align: center;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px;
}
.ar-qrc-turma span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted); }
.ar-qrc-turma b { display: block; margin-top: 3px; font-size: 15px; line-height: 1.35; color: var(--ds-text); }
.ar-qrc-aviso {
  width: 100%; max-width: 440px; box-sizing: border-box; padding: 10px 14px; border-radius: 10px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 3px solid var(--ar-ouro, #C9A227);
  color: var(--ds-text-2); font-size: 13px; line-height: 1.4;
}
.ar-qrc-sair { display: none; }
.ar-qrc-vazio {
  max-width: 520px; margin: 24px auto; padding: 22px 24px; text-align: center;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 14px;
}
.ar-qrc-vazio b { display: block; font-size: 17px; color: var(--ds-text); }
.ar-qrc-vazio span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ds-muted); }

/* tela cheia: so o palco, centrado, com o nome do estudio e tudo maior */
/* as pecas nao encolhem (o cartao cortava o codigo); centrado pelas margens automaticas, que somem
   quando nao cabe - a tela rola em vez de cortar o alto. O QR acompanha a altura da tela (TV 1080: 430px) */
.ar-qrc-palco > * { flex-shrink: 0; }
.ar-qrc-palco:fullscreen { justify-content: flex-start; gap: 16px; padding: 20px 32px; background: var(--ds-bg); overflow: auto; }
.ar-qrc-palco:fullscreen .ar-qrc-marca { display: block; margin-top: auto; }
.ar-qrc-palco:fullscreen > :last-child { margin-bottom: auto; }
.ar-qrc-palco:fullscreen .ar-qrc-cartao { max-width: min(580px, 92vw); padding: 28px 34px 22px; }
.ar-qrc-palco:fullscreen .ar-qrc-qr { max-width: min(430px, calc(100vh - 520px)); min-width: 220px; }
.ar-qrc-palco:fullscreen .ar-qrc-instr { font-size: 22px; }
.ar-qrc-palco:fullscreen .ar-qrc-cod b { font-size: 76px; }
.ar-qrc-palco:fullscreen .ar-qrc-turma { max-width: min(580px, 92vw); }
.ar-qrc-palco:fullscreen .ar-qrc-turma b { font-size: 18px; }
.ar-qrc-palco:fullscreen .ar-qrc-sair {
  display: block; position: absolute; top: 16px; right: 16px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface);
  color: var(--ds-text-2); font: 600 13px var(--ds-font);
}
.ar-qrc-palco:fullscreen .ar-qrc-sair:hover { border-color: var(--ds-ink); color: var(--ds-text); }

/* folha do QR do dia (Imprimir QR do dia): o resto da pagina some na impressao, como no recibo */
.ar-qrc-folha { display: none; }
@media print {
  html.ar-qrc-imprimindo, html.ar-qrc-imprimindo body {
    width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #FFFFFF !important;
  }
  html.ar-qrc-imprimindo body > *:not(.ar-qrc-folha) { display: none !important; }
  html.ar-qrc-imprimindo .ar-qrc-folha { display: block !important; position: static !important; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; }
  .ar-qrc-folha-marca { margin-top: 12mm; font-size: 26pt; font-weight: 800; letter-spacing: .04em; }
  .ar-qrc-folha-tit { margin-top: 4mm; font-size: 14pt; font-weight: 800; letter-spacing: .2em; }
  .ar-qrc-folha-dia { margin-top: 2mm; font-size: 18pt; }
  .ar-qrc-folha img { display: block; width: 110mm; height: 110mm; margin: 10mm auto 6mm; image-rendering: pixelated; }
  .ar-qrc-folha p { margin: 0 18mm 3mm; font-size: 14pt; line-height: 1.35; }
  .ar-qrc-folha .ar-qrc-folha-nota { font-size: 11pt; color: #444444; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-qrc-img, .ar-qrc-trilho i { transition: none; }
}

/* celular: rotulo longo de caixa de marcar quebra AO LADO da caixa (Configuracoes > Aulas e app; antes a caixa
   ficava sozinha numa linha e o rotulo descia embaixo dela) - verificacao 27/10 */
@media (max-width: 759px) {
  .x-form-cb-wrap-inner { display: flex; align-items: flex-start; }
  .x-form-cb-wrap-inner > .x-form-cb-label { flex: 1 1 0; min-width: 0; white-space: normal; }
  .x-form-cb-wrap-inner > :not(.x-form-cb-label) { flex: none; }
}

/* sotreino restante extras */
/* ============================================================================
   FEEDBACK DO ESTUDIO, AGENDA DA AVALIACAO, TREINOS A VENCER E APP DO ATLETA (26/10/2026,
   script 41). No estilo de 23/10: cartao branco com fio visivel, titulo e numero fortes, pouca cor;
   as estrelas em ouro sobrio (--ar-ouro), a nota baixa (1 ou 2) so no texto, em vermelho; nada de
   brilho, degrade ou sombra colorida. Sem animacao propria: a entrada e a das camadas da onda 1.
   - Gestao > Feedbacks (Gestor/Movimento/uFeedbacks.pas): numeros, cartoes, o feedback aberto e o
     icone do estado vazio (data-ic="feedback"); o cartao "Feedbacks novos" do Inicio
   - Avaliacao fisica (uCadAvaliacaoFisica): o botao Agendar avaliacao (.ar-ic-agenda), o quadro do
     agendamento e a faixa da avaliacao agendada no alto da ficha do aluno
   - perfil do aluno: os icones das acoes Lancar venda e Ag. avaliacao
   - Fichas de treino: o "Lembrar no WhatsApp" do numero Treinos a vencer
   - Comunicacao > App do atleta (Gestor/uAppAtleta.pas): link, QR, numeros de acesso, como instalar,
     o celular com a tela inicial do app (so desenho) e o cartaz que o Imprimir leva ao papel
   ========================================================================== */
.ar-vz[data-ic="feedback"], .ar-hj-ic.ic-feedback {
  --fb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10.5H9.5L5 20v-4H4z'/%3E%3Cpath d='M12 7.8l1.1 2.2 2.4.4-1.7 1.7.4 2.4-2.2-1.1-2.2 1.1.4-2.4-1.7-1.7 2.4-.4z'/%3E%3C/svg%3E");
}
.ar-vz[data-ic="feedback"] { --vz-ic: var(--fb-ic); }
.ar-hj-ic.ic-feedback { --hj-ic: var(--fb-ic); }
.ar-ic-agenda { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M12 13v4.5M9.8 15.2h4.4'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="lancarvenda"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l1 12.5h-15z'/%3E%3Cpath d='M9 7.5a3 3 0 016 0'/%3E%3Cpath d='M12 11.5v5M9.5 14h5'/%3E%3C/svg%3E"); }
.ar-pf [data-ic="agavaliacao"] { --pf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M12 13.2v2.6l1.8 1.1'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- Feedbacks: numeros */
.ar-fb-kpis .ar-kpi-v small.ar-fb-kpi-est { margin-left: 2px; font-size: 20px; color: var(--ar-ouro); vertical-align: 2px; }
.ar-fb-kpis .ar-fb-baixa-txt { color: var(--ds-danger); font-weight: 700; }

/* ---------------------------------------------------------------- Feedbacks: cartoes e tabela */
.ar-lista-feedbacks .ar-pes-sub.ar-fb-sub { color: var(--ds-muted); font-weight: 600; }
.ar-lista-feedbacks .ar-pes-sub.ar-fb-baixa { color: var(--ds-danger); }
.ar-lista-feedbacks .ar-cardev-linhas dd.ar-fb-estrelas,
.ar-lista-feedbacks .ar-vt-tabela td.ar-fb-estrelas { color: var(--ar-ouro); letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.ar-lista-feedbacks .ar-cardev-linhas dd.larga { color: var(--ds-text); }

/* ---------------------------------------------------------------- Feedbacks: o feedback aberto */
.ar-fb-host > .x-component-body, .ar-fb-host .x-html-frame-body { overflow: visible; }
/* width 0 + min-width 100%: o texto que nao quebra (historico) nunca alarga o cartao no celular */
.ar-fb-det { width: 0; min-width: 100%; box-sizing: border-box; font-family: var(--ds-font); color: var(--ds-text); }
.ar-fb-topo { display: flex; align-items: center; gap: 14px; }
.ar-fb-av { position: relative; overflow: hidden; width: 52px; height: 52px; font-size: 17px; }
.ar-fb-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ar-fb-quem { min-width: 0; }
.ar-fb-quem b { display: block; font: 800 19px/1.25 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-fb-quem small { display: block; margin-top: 3px; font: 500 13.5px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-fb-nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 18px 0 14px; }
.ar-fb-est { display: inline-flex; gap: 2px; font-size: 26px; line-height: 1; }
.ar-fb-est i, .ar-fb-mini { font-style: normal; }
.ar-fb-est i { color: #D9DCE2; }
.ar-fb-est i.on { color: var(--ar-ouro); }
.ar-fb-nota > b { font: 800 26px/1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-fb-nota > small { font: 600 13px var(--ds-font); color: var(--ds-muted); }
.ar-fb-nota > em {
  font: 700 12px/1 var(--ds-font); font-style: normal; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ar-neutro-txt); background: var(--ar-neutro-bg); border-radius: 999px; padding: 5px 10px;
}
.ar-fb-det.baixa .ar-fb-nota > em { color: var(--ds-danger); background: var(--ds-danger-bg); }
.ar-fb-coment {
  margin: 0; padding: 14px 16px; border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-ink);
  border-radius: var(--ds-radius-sm); background: var(--ds-surface);
  font: 500 15.5px/1.55 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere;
}
.ar-fb-coment.sem { border-left-color: var(--ds-border); font-size: 14px; color: var(--ds-muted); }
.ar-fb-hist { margin-top: 20px; }
.ar-fb-hist-tit { margin-bottom: 8px; font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-fb-hist ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ar-fb-hist li {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; box-sizing: border-box;
  border-top: 1px solid var(--ds-border-soft); cursor: pointer; font: 500 14px/1.35 var(--ds-font); background: var(--ds-surface);
}
.ar-fb-hist li:first-child { border-top: 0; }
.ar-fb-hist li:hover { background: var(--ds-sel); }
.ar-fb-h-dt { flex: none; width: 82px; font-weight: 700; color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
.ar-fb-mini { flex: none; color: var(--ar-ouro); letter-spacing: 1px; white-space: nowrap; }
.ar-fb-h-txt { flex: 1 1 auto; min-width: 0; color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-fb-hist li.baixa .ar-fb-h-txt { color: var(--ds-danger); }
.ar-fb-hist li > .ar-selo { flex: none; }

/* ---------------------------------------------------------------- Inicio: Feedbacks novos */
/* o icone do cabecalho na cor dos outros cartoes do Inicio (simplificacao 23/10) */
.ar-hj-feedback { --hj-cor: var(--ds-primary); }
.ar-hj-fb { cursor: pointer; }
.ar-hj-fb > .tx > small b.ar-fb-mini { font-weight: 400; color: var(--ar-ouro); }
.ar-hj-fb.baixa > .tx > span { color: var(--ds-text); }
.ar-hj-fb.baixa > .tx > small { color: var(--ds-danger); }
.ar-hj-fb:hover > .tx > span { text-decoration: underline; text-underline-offset: 2px; }
.ar-hj-fb-media {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: -2px 0 8px; padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-border-soft); cursor: pointer;
}
.ar-hj-fb-media > b { font: 800 24px/1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-hj-fb-media > .ar-fb-mini { font-size: 15px; }
.ar-hj-fb-media > small { flex-basis: 100%; font: 500 13px var(--ds-font); color: var(--ds-muted); }

/* ---------------------------------------------------------------- Avaliacao fisica: agenda */
.ar-agav-host > .x-component-body { overflow: visible; }
.ar-agav-info { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ds-font); }
.ar-agav-info > .ar-selo { flex: none; margin-top: 2px; }
.ar-agav-info b { display: block; font: 800 17px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-agav-info small { display: block; margin-top: 3px; font: 500 13.5px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-agav-faixa {
  --agav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M12 13.2v2.6l1.8 1.1'/%3E%3C/svg%3E");
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-left: 3px solid var(--ar-ouro);
  border-radius: var(--ds-radius-sm); font-family: var(--ds-font);
}
.ar-agav-faixa.atrasada { border-left-color: var(--ds-danger); }
.ar-agav-faixa > i {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ds-surface-low); border: 1px solid var(--ds-border-soft); color: var(--ar-ouro-txt);
}
.ar-agav-faixa.atrasada > i { color: var(--ds-danger); }
.ar-agav-faixa > i::before {
  content: ''; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--agav-ic) no-repeat center / contain; mask: var(--agav-ic) no-repeat center / contain;
}
.ar-agav-faixa > span { flex: 1 1 auto; min-width: 0; }
.ar-agav-faixa > span b { display: block; font: 700 15px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-agav-faixa > span small { display: block; margin-top: 2px; font: 500 13px/1.4 var(--ds-font); color: var(--ds-muted); overflow-wrap: anywhere; }
.ar-agav-faixa > a {
  flex: none; padding: 8px 12px; border: 1px solid var(--ds-field, var(--ds-border)); border-radius: 10px; cursor: pointer;
  font: 600 13px var(--ds-font); color: var(--ds-text); text-decoration: none; white-space: nowrap; background: var(--ds-surface);
}
.ar-agav-faixa > a:hover { border-color: var(--ds-ink); }

/* ---------------------------------------------------------------- Fichas: lembrete dos treinos a vencer */
.ar-fi-kpis .ar-kpi-s a.ar-fi-lembrar {
  font-weight: 700; color: var(--ds-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ar-fi-kpis .ar-kpi-s a.ar-fi-lembrar:hover { color: var(--ds-ink); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- App do atleta */
.ar-app-host > .x-component-body { overflow-x: hidden; }
.ar-app { font-family: var(--ds-font); color: var(--ds-text); padding-bottom: 8px; }
.ar-app-grade { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ar-app-col { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ar-app-lado { flex: 0 1 330px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ar-bloco.ar-app-bloco { overflow: visible; padding: 18px 20px; }
.ar-app-tit { margin-bottom: 12px; font: 700 12px var(--ds-font); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-text); }
.ar-app-falta { font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); border-left: 3px solid var(--ar-ouro); padding: 4px 0 4px 12px; }
.ar-app-falta b { display: block; color: var(--ds-text); font-weight: 700; }
.ar-app-url {
  padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface-low);
  font: 700 16px/1.3 var(--ds-font); color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-app-bts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ar-app-bt {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--ds-field, var(--ds-border)); border-radius: 10px; background: var(--ds-surface); cursor: pointer;
  font: 600 14px var(--ds-font); color: var(--ds-text); text-decoration: none; white-space: nowrap;
}
.ar-app-bt:hover { border-color: var(--ds-ink); }
.ar-app-bt.pri { background: var(--ds-primary); border-color: var(--ds-primary); color: #FFFFFF; }
.ar-app-bt.pri:hover { filter: brightness(.94); }
.ar-app-bt.ok { background: var(--ds-ink); border-color: var(--ds-ink); color: #FFFFFF; }
.ar-app-nota { margin: 12px 0 0; font: 500 13.5px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-app-nota b { color: var(--ds-text); }
.ar-app-qr-corpo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ar-app-qr-img { flex: none; box-sizing: content-box; width: 168px; height: 168px; padding: 8px; border: 1px solid var(--ds-border); border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.ar-app-qr-img img { display: block; width: 168px; height: 168px; image-rendering: pixelated; }
.ar-app-qr-img.ar-app-qr-sem { display: grid; place-items: center; text-align: center; font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-app-qr-txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ar-app-qr-txt b { font: 700 16px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-app-qr-txt span { font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-app-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ar-app-num { padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); min-width: 0; }
.ar-app-num b { display: block; font: 800 26px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-app-num span { display: block; margin-top: 4px; font: 700 13.5px/1.3 var(--ds-font); color: var(--ds-text); }
.ar-app-num small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-muted); }
.ar-app-num.falta { box-shadow: inset 0 3px 0 var(--ar-ouro); }
.ar-app-num.falta b { color: var(--ar-ouro-txt); }
.ar-prog.ar-app-barra { height: 6px; margin: 14px 0 10px; background: #E5E7EB; }
.ar-prog.ar-app-barra > i { background: var(--ds-ink); }
.ar-app-acesso-pe { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.ar-app-acesso-pe > span { flex: 1 1 260px; font: 500 13.5px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-app-acesso-pe > span b { color: var(--ds-text); }
.ar-app-sos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ar-app-so { padding: 14px 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); min-width: 0; }
.ar-app-so-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ar-app-so-cab > i {
  flex: none; width: 22px; height: 22px; background-color: var(--ds-text);
  -webkit-mask: var(--so-ic) no-repeat center / contain; mask: var(--so-ic) no-repeat center / contain;
}
.ar-app-so[data-so="android"] { --so-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5a7 7 0 0114 0V18H5z'/%3E%3Cpath d='M7.5 4.5l1.6 2.4M16.5 4.5l-1.6 2.4'/%3E%3Ccircle cx='9.3' cy='13' r='.6' fill='black'/%3E%3Ccircle cx='14.7' cy='13' r='.6' fill='black'/%3E%3C/svg%3E"); }
.ar-app-so[data-so="iphone"] { --so-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
.ar-app-so-cab b { font: 800 16px var(--ds-font); color: var(--ds-text); }
.ar-app-so-cab small { font: 500 13px var(--ds-font); color: var(--ds-muted); }
.ar-app-so ol { margin: 0; padding-left: 20px; }
.ar-app-so li { margin: 6px 0 0; font: 500 14px/1.45 var(--ds-font); color: var(--ds-text-2); }
.ar-app-so li b { color: var(--ds-text); }
.ar-app-rec ul { list-style: none; margin: 0; padding: 0; }
.ar-app-rec li {
  position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--ds-border-soft);
  font: 500 14px/1.4 var(--ds-font); color: var(--ds-text-2);
}
.ar-app-rec li:first-child { border-top: 0; }
.ar-app-rec li::before { content: ''; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-text-2); }

/* o celular com a tela inicial do app: so desenho (os dados sao de exemplo) */
.ar-app-vitrine { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ar-app-fone {
  width: min(100%, 272px); box-sizing: border-box; padding: 9px; border-radius: 40px; background: #111318; border: 1px solid #000000;
}
.ar-app-fone-tela {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 18.5; border-radius: 32px; overflow: hidden;
  background: #F4F3F0; font-family: var(--ds-font);
}
.ar-app-m-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; background: #141414; color: #FFFFFF; }
.ar-app-m-status b { font: 700 11px var(--ds-font); }
.ar-app-m-status span { display: inline-flex; gap: 3px; }
.ar-app-m-status i { width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; }
.ar-app-m-topo { display: flex; align-items: center; gap: 9px; padding: 6px 14px 12px; background: #141414; }
.ar-app-m-topo img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; }
.ar-app-m-topo b { display: block; font: 800 12.5px/1.1 var(--ds-font); letter-spacing: .03em; color: #FFFFFF; }
.ar-app-m-topo small { display: block; margin-top: 2px; font: 600 7.5px var(--ds-font); letter-spacing: .12em; color: #B9B9BD; }
.ar-app-m-corpo { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; overflow: hidden; }
.ar-app-m-conta, .ar-app-m-card { background: #FFFFFF; border: 1px solid #E6E3DD; border-radius: 12px; }
.ar-app-m-conta { display: flex; align-items: center; gap: 8px; padding: 7px 9px; }
.ar-app-m-foto { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #141414; color: #FFFFFF; font: 700 11px var(--ds-font); }
.ar-app-m-conta b { display: block; font: 700 11.5px/1.2 var(--ds-font); color: #141414; }
.ar-app-m-conta em { display: block; font: 700 7.5px var(--ds-font); font-style: normal; letter-spacing: .12em; color: #71717A; }
.ar-app-m-card { padding: 7px 9px 8px; }
.ar-app-m-cab { margin-bottom: 5px; font: 700 7.5px var(--ds-font); letter-spacing: .12em; text-transform: uppercase; color: #71717A; }
.ar-app-m-treino { display: flex; align-items: center; gap: 8px; }
.ar-app-m-treino .h { flex: none; font: 800 13px var(--ds-font); color: #141414; }
.ar-app-m-treino b { display: block; font: 700 11px/1.2 var(--ds-font); color: #141414; }
.ar-app-m-treino small { display: block; font: 500 8.5px/1.3 var(--ds-font); color: #52525B; }
.ar-app-m-bt { margin-top: 7px; padding: 6px 0; border-radius: 8px; background: #E0312B; color: #FFFFFF; text-align: center; font: 800 9px var(--ds-font); letter-spacing: .08em; }
.ar-app-m-semana { display: flex; justify-content: space-between; }
.ar-app-m-semana i { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font: 700 8px var(--ds-font); font-style: normal; color: #71717A; background: #F1F0EC; }
.ar-app-m-semana i.on { background: #141414; color: #FFFFFF; }
.ar-app-m-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ar-app-m-grade span {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 10px;
  background: #FFFFFF; border: 1px solid #E6E3DD; font: 600 7.5px/1.15 var(--ds-font); color: #141414; text-align: center;
}
.ar-app-m-grade span b { font-size: 13px; line-height: 1; }
.ar-app-vitrine-leg { font: 600 13px var(--ds-font); color: var(--ds-muted); text-align: center; }

/* o cartaz do Imprimir: escondido na tela; na impressao so ele aparece (como o QR do dia) */
.ar-app-cartaz { display: none; }
@media print {
  html.ar-app-imprimindo, html.ar-app-imprimindo body {
    width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #FFFFFF !important;
  }
  html.ar-app-imprimindo body > *:not(.ar-app-folha) { display: none !important; }
  html.ar-app-imprimindo .ar-app-folha { display: block !important; position: static !important; text-align: center; color: #000000; font-family: Arial, Helvetica, sans-serif; }
  .ar-app-folha .ar-app-cartaz-logo { display: block; width: 32mm; height: auto; margin: 14mm auto 0; }
  .ar-app-folha .ar-app-cartaz-nome { margin-top: 3mm; font-size: 16pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .ar-app-folha .ar-app-cartaz-tit { margin-top: 8mm; font-size: 30pt; font-weight: 800; }
  .ar-app-folha .ar-app-cartaz-sub { margin: 3mm 20mm 0; font-size: 14pt; color: #333333; }
  .ar-app-folha .ar-app-cartaz-qr { display: block; width: 100mm; height: 100mm; margin: 10mm auto 4mm; image-rendering: pixelated; }
  .ar-app-folha .ar-app-cartaz-url { font-size: 13pt; font-weight: 700; }
  .ar-app-folha .ar-app-cartaz-passos { display: flex; justify-content: center; gap: 8mm; margin: 10mm 14mm 0; }
  .ar-app-folha .ar-app-cartaz-passos span { flex: 1 1 0; font-size: 12pt; line-height: 1.35; }
  .ar-app-folha .ar-app-cartaz-passos b {
    display: block; width: 10mm; height: 10mm; margin: 0 auto 2mm; border: 1.5pt solid #000000; border-radius: 50%;
    font-size: 14pt; line-height: 10mm;
  }
}

/* tela estreita: uma coluna; os numeros e o passo a passo empilham */
@media (max-width: 759px) {
  /* os quatro numeros de Feedbacks, Fichas e Treinos solicitados (quadro de 104px): uma faixa que rola de
     lado - em duas linhas a de baixo ficava cortada */
  .ar-kpis.ar-fi-kpis {
    grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(184px, 58%);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .ar-kpis.ar-fi-kpis::-webkit-scrollbar { display: none; }
  .ar-fi-kpis-host > .x-panel-bodyWrap > .x-panel-body { overflow: hidden !important; }
  .ar-kpis.ar-fi-kpis .ar-kpi { padding: 10px 14px 8px; }
  .ar-kpis.ar-fi-kpis .ar-kpi-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ar-kpis.ar-fi-kpis .ar-kpi-v { font-size: 22px; margin-top: 2px; }
  .ar-kpis.ar-fi-kpis .ar-kpi-s { margin-top: 4px; padding-top: 4px; }
  .ar-app-col, .ar-app-lado { flex: 1 1 100%; }
  .ar-bloco.ar-app-bloco { padding: 16px; }
  .ar-app-nums { grid-template-columns: minmax(0, 1fr); }
  .ar-app-num { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .ar-app-num b { grid-row: span 2; }
  .ar-app-sos { grid-template-columns: minmax(0, 1fr); }
  .ar-app-url { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
  .ar-app-qr-corpo { justify-content: center; }
  .ar-fb-topo { align-items: flex-start; }
  .ar-fb-h-dt { width: auto; }
  .ar-agav-faixa { flex-wrap: wrap; }
  /* o quadro do agendamento (64px no computador) cresce com o texto quando o cartao vira coluna */
  .ar-fluxo > .ar-agav-host, .ar-fluxo > .ar-agav-host > .x-panel-bodyWrap,
  .ar-fluxo > .ar-agav-host > .x-panel-bodyWrap > .x-panel-body { height: auto !important; overflow: visible !important; }
  .ar-agav-faixa > a { margin-left: 46px; }
}

/* corridas pcd */
/* Inscricao PCD (pacote pcd, 27/10/2026): a secao "Inscricao PCD" do detalhe da inscricao (so o
   administrador), com o fio em ouro de atencao, os botoes Ver laudo / Aprovar PCD / Recusar PCD e o
   visor do laudo (adson-tema.js arPcdLaudo: o arquivo num blob da memoria, por cima da tela). */
.ar-pcd-secao .ar-det-secao { box-shadow: inset 3px 0 0 var(--ar-ouro); }
.ar-pcd-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.ar-pcd-bt {
  height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--ds-field, #d4d4d8);
  background: #fff; color: var(--ds-ink); font: 700 14px var(--ds-font); cursor: pointer;
}
.ar-pcd-bt:hover { background: var(--ds-surface-low, #f4f4f5); }
.ar-pcd-bt:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ar-pcd-bt-ok { background: var(--ds-ink); border-color: var(--ds-ink); color: #fff; }
.ar-pcd-bt-ok:hover { background: #000; }
.ar-pcd-bt-perigo { color: var(--ds-danger); border-color: var(--ds-danger); }
.ar-pcd-visor {
  position: fixed; inset: 0; z-index: 100000; background: rgba(17, 17, 17, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ar-pcd-visor-caixa {
  background: #fff; border-radius: 12px; width: min(960px, 100%); height: min(92vh, 1100px);
  display: flex; flex-direction: column; overflow: hidden; font-family: var(--ds-font);
}
.ar-pcd-visor-topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ds-border, #e4e4e7); }
.ar-pcd-visor-topo > div { flex: 1 1 auto; min-width: 0; }
.ar-pcd-visor-topo b { display: block; font-size: 16px; font-weight: 800; color: var(--ds-ink); }
.ar-pcd-visor-topo small { display: block; font-size: 13px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pcd-visor-bt {
  flex: 0 0 auto; height: 38px; padding: 0 14px; border: 1px solid var(--ds-field, #d4d4d8); border-radius: 8px;
  background: #fff; color: var(--ds-ink); font: 600 14px/36px var(--ds-font); text-decoration: none; cursor: pointer;
}
.ar-pcd-visor-bt:hover { background: var(--ds-surface-low, #f4f4f5); }
.ar-pcd-visor-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; background: #f4f4f5; }
.ar-pcd-visor-corpo iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ar-pcd-visor-corpo img { display: block; max-width: calc(100% - 32px); height: auto; margin: 16px auto; background: #fff; box-shadow: 0 0 0 1px var(--ds-border, #e4e4e7); }
.ar-pcd-visor-pe { padding: 8px 16px; font-size: 12px; color: #6b7280; border-top: 1px solid var(--ds-border, #e4e4e7); font-family: var(--ds-font); }
@media (max-width: 759px) {
  .ar-pcd-visor { padding: 0; }
  .ar-pcd-visor-caixa { width: 100%; height: 100%; border-radius: 0; }
  .ar-pcd-visor-topo { flex-wrap: wrap; }
  .ar-pcd-visor-topo > div { flex: 1 1 100%; }
  .ar-pcd-visor-bt { flex: 1 1 0; text-align: center; }
  .ar-pcd-bt { flex: 1 1 auto; }
}
/* corridas analise */
/* ============================================================================
   ANALISE DA PROVA (pedido do dono em 27/10/2026) - Gestor\Analises\uAnaliseProva.pas,
   menu CORRIDAS. A tela usa as pecas do bloco "sotreino 2d-analises" (.ar-ix: KPIs,
   blocos, rosca, barras deitadas, a dica dos graficos pelo arGrafDica) com as cores do
   "simplificacao 23/10". Aqui so o que e dela (.ar-ap-*):
   - o seletor da prova no alto e a linha com a data, o local e a situacao
   - barra empilhada (.ar-ap-pilha: confirmados + aguardando, masculino + feminino),
     cor pela --an-c das classes c0..c7 / g-m g-f g-n
   - area das inscricoes por dia com o fio tracejado em ouro na virada de cada lote
   - tabelas compactas (formas, camisas, cupons), os numeros do kit e do check-in
   - ouro so para atencao (aguardando, lote), vermelho so para problema (falta camisa)
   - celular: o seletor ocupa a linha, a barra desce para baixo do nome
   ========================================================================== */
.ar-ap-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 2px 0 8px; }
.ar-ap-escolha { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 600px; min-width: 0; }
.ar-ap-escolha > span { flex: none; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-ix-mes.ar-ap-sel { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 560px; height: 42px; font-size: 15px; font-weight: 700; text-overflow: ellipsis; }
.ar-ap-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 16px; font: 500 14px/1.45 var(--ds-font); color: var(--ds-text-2); }
.ar-ap-info b { color: var(--ds-text); font-weight: 700; }

/* barra empilhada */
.ar-ap-pilha { display: flex; height: 10px; min-width: 0; border-radius: 999px; background: #ECEEF2; overflow: hidden; }
.ar-ap-pilha > i { display: block; flex: none; height: 100%; background: var(--an-c, var(--ds-ink)); }
.ar-ap-pilha > i + i { box-shadow: inset 2px 0 0 #FFFFFF; }

/* linhas: nome (com o detalhe), barra e o numero */
.ar-ap-linhas { display: flex; flex-direction: column; gap: 2px; }
.ar-ap-linha {
  display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 6px; margin: 0 -6px; border-radius: 8px; transition: background-color .12s ease;
}
.ar-ap-linha:hover { background: var(--ds-hover); }
.ar-ap-linha > .r { min-width: 0; font: 600 14px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-ap-linha > .r small { display: block; margin-top: 2px; font: 500 13px/1.35 var(--ds-font); color: var(--ds-muted); }
.ar-ap-linha > b { min-width: 44px; text-align: right; white-space: nowrap; font: 700 14px var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }

/* inscricoes por dia: o nome do lote em cima, o fio tracejado na virada */
.ar-ap-dias { position: relative; }
.ar-ap-lotes { position: relative; height: 26px; }
.ar-ap-lote-r {
  position: absolute; top: 2px; transform: translateX(6px); white-space: nowrap;
  font: 700 12px/1 var(--ds-font); color: var(--ar-ouro-txt, #88690E); background: var(--ar-ouro-bg, #F7F1DF);
  border-radius: 999px; padding: 5px 9px;
}
.ar-ap-lote-r.ini { transform: none; }
.ar-ap-lote-r.dir { transform: translateX(calc(-100% - 6px)); }
.ar-graf.ar-ix-linhas.ar-ap-area { height: 180px; }
.ar-ap-dias { padding-left: 34px; }
.ar-ap-dias .ar-ix-graf { position: relative; }
.ar-ap-escala { position: absolute; left: -34px; top: 0; width: 28px; height: 180px; pointer-events: none; }
.ar-ap-escala span { position: absolute; right: 0; transform: translateY(-50%); font: 500 12px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ar-ap-grade { stroke: #E5E7EB; stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.ar-ap-lote-l { stroke: var(--ar-ouro, #C9A227); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.ar-ap-eixo { position: relative; height: 22px; margin-top: 4px; }
.ar-ap-eixo span {
  position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap;
  font: 500 13px var(--ds-font); color: var(--ds-muted); font-variant-numeric: tabular-nums;
}
.ar-ap-eixo span.ini { transform: none; }
.ar-ap-eixo span.fim { transform: translateX(-100%); }

/* tabelas compactas */
.ar-tab.ar-ap-tab { margin-top: 14px; }
.ar-tab.ar-ap-tab th, .ar-tab.ar-ap-tab td { padding: 8px 8px; vertical-align: top; }
.ar-tab.ar-ap-tab td.num { white-space: nowrap; }
.ar-tab.ar-ap-tab th .ct { display: none; }
.ar-tab.ar-ap-tab td small { display: block; margin-top: 2px; font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-muted); }
.ar-tab.ar-ap-tab td b { color: var(--ds-text); }
.ar-tab.ar-ap-tab tr.tot td { font-weight: 800; color: var(--ds-text); border-top: 1px solid var(--ds-border); }
.ar-tab.ar-ap-tab tr.estorno td { color: var(--ds-muted); }
.ar-tab.ar-ap-tab td.ar-ap-falta { color: var(--ds-danger); font-weight: 700; }
.ar-ap-ponto { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--an-c, var(--ds-ink)); vertical-align: 1px; }
.ar-ap-nota { margin-top: 10px; font: 500 13px/1.45 var(--ds-font); color: var(--ds-muted); }
.ar-ap-nota b { color: var(--ds-text); font-weight: 700; }
.ar-ap-sec { margin: 18px 0 8px; font: 700 12px var(--ds-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.ar-ap .ar-ix-sub b { color: var(--ds-text); }

/* estados */
.ar-ap-ufs { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-ap-ufs span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--ar-neutro-bg, #F1F2F5); font: 500 13px var(--ds-font); color: var(--ds-text-2); font-variant-numeric: tabular-nums;
}
.ar-ap-ufs b { font-weight: 800; color: var(--ds-text); }

/* kit e check-in */
.ar-ap-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.ar-ap-num { min-width: 0; padding: 12px 14px; border: 1px solid var(--ds-border-soft); border-radius: 10px; background: var(--ds-surface-low); }
.ar-ap-num b { display: block; font: 800 28px/1.1 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ar-ap-num span { display: block; margin-top: 3px; font: 600 13px/1.3 var(--ds-font); color: var(--ds-muted); }
.ar-ap-barra { height: 10px; margin-top: 12px; border-radius: 999px; background: #ECEEF2; overflow: hidden; }
.ar-ap-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--ds-ink); }

/* icones dos blocos (mascara na cor do texto, como os .ar-hj-ic do Inicio) */
.ar-hj-ic.ic-ap-cortesia { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M12 8c-1.5-3-5-4-5.5-2S9 8 12 8zM12 8c1.5-3 5-4 5.5-2S15 8 12 8z'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ap-camisa { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3l-5 3 2 4 2-1v12h10V9l2 1 2-4-5-3a4 4 0 0 1-8 0z'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ap-cupom { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 0 2-2h14a2 2 0 0 0 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 0-2 2H5a2 2 0 0 0-2-2v-2a2 2 0 0 0 0-4z'/%3E%3Cpath d='M9.5 14.5l5-5M9.5 9.5h.01M14.5 14.5h.01'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ap-mapa { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ar-hj-ic.ic-ap-kit { --hj-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8M7.5 5.5l9 5'/%3E%3C/svg%3E"); }

/* prova sem inscricao */
.ar-cards-vazio.ar-ap-vazio { margin-top: 4px; }

/* celular e quadro estreito (container do .ar-ix) */
@container arix (max-width: 760px) {
  .ar-ap-escolha { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .ar-ap-eixo span.some { display: none; }
  .ar-tab.ar-ap-tab th .lg { display: none; }
  .ar-tab.ar-ap-tab th .ct { display: inline; }
  .ar-ap .ar-ix-hb-l { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .ar-ap .ar-ix-hb-l > .r { grid-column: 1; grid-row: 1; }
  .ar-ap .ar-ix-hb-l > b { grid-column: 2; grid-row: 1; align-self: start; }
  .ar-ap .ar-ix-hb-l > .ar-prog { grid-column: 1 / -1; grid-row: 2; }
  .ar-ix-mes.ar-ap-sel { max-width: none; font-size: 14px; }
  .ar-ap-topo .ar-ix-quando { margin-left: 0; }
  .ar-ap-info { gap: 4px 12px; font-size: 13.5px; }
  .ar-ap-linha { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .ar-ap-linha > .r { grid-column: 1; grid-row: 1; }
  .ar-ap-linha > b { grid-column: 2; grid-row: 1; align-self: start; }
  .ar-ap-linha > .ar-ap-pilha { grid-column: 1 / -1; grid-row: 2; }
  .ar-tab.ar-ap-tab th, .ar-tab.ar-ap-tab td { padding: 7px 5px; font-size: 13.5px; }
  .ar-tab.ar-ap-tab th { letter-spacing: .02em; }
  /* a dica (i) dos numeros: na coluna da direita abre para a esquerda (nao corta na borda) */
  .ar-ap .ar-ix-kpis > :nth-child(2n+1) .ar-ix-dica::after { left: -10px; right: auto; }
  .ar-ap .ar-ix-kpis > :nth-child(2n) .ar-ix-dica::after { left: auto; right: -10px; }
  .ar-ap .ar-ix-dica::after { width: 220px; }
  .ar-ap-num b { font-size: 24px; }
}

/* corridas cupons */
/* ============================================================================
   Corridas > Cupons (Gestor/Cadastros/uCuponsGerais.pas, script 43): cupons que valem em qualquer
   prova. A lista e os cartoes sao os de sempre (uCartoes, pilulas ar-filtro-sit) e o uso do cupom
   usa as classes do detalhe da inscricao (ar-det-*). So o celular precisa de regra: o quadro "Uso do
   cupom" (TUniHTMLFrame com a altura fixa do DFM) cresce com o texto no lugar de rolar por dentro.
   ========================================================================== */
@media (max-width: 759px) {
  .ar-fluxo > .x-panel.ar-cg-uso,
  .ar-fluxo > .x-panel.ar-cg-uso > .x-panel-bodyWrap,
  .ar-fluxo > .x-panel.ar-cg-uso > .x-panel-bodyWrap > .x-panel-body { height: auto !important; overflow: visible !important; }
}
/* corridas final */
/* Inscricoes > Detalhes no celular (Gestor/Movimento/uMovInscricoes, lblDetResumo): o resumo
   "atleta - modalidade - inscricao 000215" quebrava em tres linhas e a ultima saia do topo de 56px.
   No celular: letra um pouco menor, ate 3 linhas centradas no topo (o numero tambem esta no cartao). */
@media (max-width: 759px) {
  .ar-det-resumo {
    top: 0 !important; height: 56px !important; overflow: hidden !important;
    display: flex !important; align-items: center;
  }
  .ar-det-resumo, .ar-det-resumo.ar-sub .x-innerhtml {
    font-size: 12.5px !important; line-height: 16px !important;
  }
  .ar-det-resumo.ar-sub .x-innerhtml {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
}
/* analise cortesias 28/10 */
/* ============================================================================
   ANALISE DA PROVA - quem recebeu cortesia (pedido do dono em 28/10/2026) -
   Gestor\Analises\uAnaliseProva.pas + arApcLista do adson-tema.js.
   - [data-apc] dentro do .ar-ap: o que abre a lista (fatia, legenda e linha
     "Cortesia" da Forma de pagamento, o numero CORTESIAS, as origens e as
     modalidades do bloco Cortesias): mao, o fundo leve do hover e o fio do foco
   - .ar-apc-ver: a dica "clique para ver quem recebeu" (cinza, linha propria)
   - .ar-apc: a janela do tema (.ar-dlg) mais larga com a lista em linhas: nome
     forte, a modalidade e a origem embaixo; valor, data e situacao a direita.
     Janela estreita (celular): uma coluna, o valor desce para baixo do nome
   ========================================================================== */
.ar-ap [data-apc] { cursor: pointer; }
.ar-ap [data-apc]:focus { outline: none; }
.ar-ap [data-apc]:focus-visible { outline: 2px solid rgba(17, 19, 24, .35); outline-offset: -2px; }
.ar-ap .ar-ix-rosca-leg li[data-apc] { cursor: pointer; }
.ar-ap .ar-ix-kpi[data-apc] { transition: border-color .15s ease, background-color .15s ease; }
.ar-ap .ar-ix-kpi[data-apc]:hover { border-color: var(--ds-field-hover); background-color: var(--ds-hover); }
.ar-ap tr[data-apc] > td { transition: background-color .12s ease; }
.ar-ap tr[data-apc]:hover > td { background: var(--ds-hover); }
.ar-apc-ver { display: block; margin-top: 3px; font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-muted); }
.ar-ap [data-apc]:hover .ar-apc-ver, .ar-ap .ar-ix-bloco:hover .ar-ix-sub .ar-apc-ver { color: var(--ds-text-2); }
/* quadro estreito: a coluna da tabela de formas e apertada - a dica fica no numero e no bloco Cortesias */
@container arix (max-width: 760px) {
  .ar-ap .ar-tab .ar-apc-ver { display: none; }
}

.ar-dlg.ar-apc { width: min(720px, 100%); }
.ar-apc .ar-dlg-corpo { padding-top: 2px; }
.ar-apc.carregando .ar-dlg-corpo { opacity: .55; pointer-events: none; transition: opacity .15s linear; }
.ar-apc-topo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.ar-apc-prova { font: 600 13px/1.4 var(--ds-font); color: var(--ds-muted); }
.ar-apc-resumo { font: 500 15px/1.4 var(--ds-font); color: var(--ds-text-2); }
.ar-apc-resumo b { font-weight: 800; color: var(--ds-text); }
.ar-apc-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ar-apc-chip {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: var(--ar-neutro-bg, #F1F2F5); font: 700 13px/1.3 var(--ds-font); color: var(--ds-text);
}
.ar-apc-todas {
  border: 0; background: none; padding: 4px 2px; cursor: pointer; font: 700 13.5px var(--ds-font); color: var(--ds-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.ar-apc-todas:hover { color: var(--ds-primary); }
.ar-apc-todas:focus-visible { outline: 2px solid rgba(17, 19, 24, .35); outline-offset: 2px; border-radius: 4px; }
.ar-apc-busca { position: sticky; top: -2px; z-index: 1; padding: 2px 0 10px; background: var(--ds-surface); }
.ar-apc-busca input {
  display: block; width: 100%; height: 42px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--ds-field);
  border-radius: 10px; background: var(--ds-surface); outline: none; font: 500 15px var(--ds-font); color: var(--ds-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-apc-busca input:focus { border-color: var(--ds-ink); box-shadow: var(--ds-ring); }
.ar-apc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-apc-it {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 16px;
  padding: 12px 14px; border: 1px solid var(--ds-border-soft); border-radius: 10px; background: var(--ds-surface);
}
.ar-apc-it[hidden], .ar-apc-nada[hidden] { display: none; }
.ar-apc-quem { min-width: 0; }
.ar-apc-nome { display: block; font: 700 15px/1.3 var(--ds-font); color: var(--ds-text); overflow-wrap: anywhere; }
.ar-apc-det {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px;
  font: 500 13.5px/1.35 var(--ds-font); color: var(--ds-text-2);
}
.ar-apc-mod { min-width: 0; overflow-wrap: anywhere; }
.ar-apc-orig {
  display: inline-flex; padding: 2px 9px; border-radius: 999px; background: var(--ar-neutro-bg, #F1F2F5);
  font: 600 12.5px/1.4 var(--ds-font); color: var(--ds-text-2);
}
.ar-apc-cod {
  display: inline-flex; padding: 1px 8px; border: 1px dashed var(--ds-field); border-radius: 6px;
  font: 700 12.5px/1.4 var(--ds-font); letter-spacing: .04em; color: var(--ds-text); overflow-wrap: anywhere;
}
.ar-apc-num { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ar-apc-v { font: 800 15px/1.3 var(--ds-font); color: var(--ds-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-apc-dt, .ar-apc-sit { font: 500 12.5px/1.35 var(--ds-font); color: var(--ds-muted); white-space: nowrap; }
.ar-apc-vazio, .ar-apc-nada { padding: 14px 2px 6px; font: 500 14px/1.5 var(--ds-font); color: var(--ds-muted); }
.ar-apc-vazio b { display: block; margin-bottom: 4px; font: 700 15px/1.4 var(--ds-font); color: var(--ds-text); }
.ar-apc-nota { margin: 12px 0 0; font: 500 12.5px/1.45 var(--ds-font); color: var(--ds-muted); }
@media (max-width: 560px) {
  .ar-dlg-veu.ar-apc-veu { padding: 10px; }
  .ar-apc .ar-dlg-cab { padding: 14px 14px 2px; }
  .ar-apc .ar-dlg-corpo { padding: 4px 14px 2px; }
  .ar-apc .ar-dlg-pe { padding: 12px 14px 14px; }
  .ar-apc .ar-dlg-pe .ar-dlg-btn { flex: 1 1 auto; justify-content: center; }
  .ar-apc-it { grid-template-columns: minmax(0, 1fr); padding: 11px 12px; }
  .ar-apc-num { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: left; }
  .ar-apc-busca input { font-size: 16px; }
}

/* upload 28/10 */
/* ============================================================================
   JANELA DE ENVIO DE ARQUIVO (TUniFileUpload: capa do evento, foto e video da TV, imagem do
   aviso, arquivo do chip). Pedido do dono em 28/10/2026 - "essa caixa de por foto ta horrivel
   mude aqui e em todo o sistema" - junto com a folha do app (app-mobile.css, bloco "upload
   28/10"). Refina o bloco "janela de envio de arquivo" la de cima com o desenho sobrio do app:
   cartao branco com sombra neutra, nome do arquivo num campo com contorno e a dica "Nenhum
   arquivo", ESCOLHER ARQUIVO neutro, CANCELAR contornado e ENVIAR preto (o vermelho
   sai: enviar o arquivo nao e a acao principal da tela).
   No PC a janela passa de 300 para 420px; o Ext centraliza pelos 300 do uniGUI, entao a margem
   de -60px devolve o centro. No celular vale a regra de baixo de 760px (centrada, 100vw - 24px).
   Corpo = 18 + 40 + 16 + 40 + 18 = 132; janela = corpo + 57 (barra e bordas do Ext).
   ========================================================================== */
.x-window.x-layer:has(.x-form-file-btn) {
  height: 189px !important; border-color: #E3E6EB !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 20px 48px -16px rgba(16, 24, 40, .30) !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-window-body,
.x-window.x-layer:has(.x-form-file-btn) .x-window-body > .x-panel,
.x-window.x-layer:has(.x-form-file-btn) .x-window-body .x-abs-layout-ct { height: 132px !important; }
@media (min-width: 760px) {
  .x-window.x-layer:has(.x-form-file-btn) { width: 420px !important; margin-left: -60px !important; }
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-header,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-header .x-box-inner,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-header .x-box-target,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-bodyWrap > .x-window-body,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-bodyWrap > .x-window-body > .x-panel,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-bodyWrap > .x-panel-body,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt,
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-bodyWrap > .x-window-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  .x-window.x-layer:has(.x-form-file-btn) > .x-window-header .x-title { width: calc(100% - 32px) !important; }
}
/* nome do arquivo escolhido (memo so leitura do uniGUI): campo branco com contorno */
.x-window.x-layer:has(.x-form-file-btn) .x-abs-layout-ct .x-field:has(textarea) {
  left: 18px !important; top: 18px !important; width: calc(100% - 188px) !important; height: 40px !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-item-body,
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-trigger-wrap {
  position: relative; height: 40px !important; box-sizing: border-box;
  background: #FFFFFF !important; border: 1px solid #D9DCE2 !important; border-radius: 10px !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-item-body { border: 0 !important; background: transparent !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) .x-form-text-wrap {
  height: 38px !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea) textarea {
  height: 38px !important; padding: 8px 12px !important; line-height: 22px !important; background: transparent !important;
  color: #111827 !important; font-family: var(--ds-font) !important; font-size: 13.5px !important; font-weight: 600 !important;
  text-overflow: ellipsis;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(textarea.x-form-empty-field) .x-form-trigger-wrap::before {
  content: "Nenhum arquivo"; position: absolute; left: 12px; right: 8px; top: 50%; transform: translateY(-50%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  color: #8A909B; font-family: var(--ds-font); font-size: 13.5px; font-weight: 400;
}
/* ESCOLHER ARQUIVO: neutro, contornado */
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) {
  left: auto !important; right: 18px !important; top: 18px !important; width: 140px !important; height: 40px !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) .x-form-item-body,
.x-window.x-layer:has(.x-form-file-btn) .x-field:has(.x-form-file-btn) .x-form-trigger-wrap { width: 140px !important; height: 40px !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-trigger-cmp,
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn { width: 140px !important; height: 40px !important; box-sizing: border-box; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn.x-btn {
  background: #F6F7F9 !important; border: 1px solid #D9DCE2 !important; border-radius: 10px !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn.x-btn.x-btn-over { background: #EEF0F3 !important; }
.x-window.x-layer:has(.x-form-file-btn) .x-form-file-btn .x-btn-inner::after {
  content: "Escolher arquivo"; font-family: var(--ds-font); font-size: 13.5px; font-weight: 600; color: #111827;
}
/* CANCELAR (contorno claro) e ENVIAR (preto), alinhados a direita */
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item {
  top: 74px !important; width: 120px !important; height: 40px !important; border-radius: 10px !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(1) {
  right: 148px !important; background: #FFFFFF !important; border: 1px solid #D9DCE2 !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(1).x-btn-over { background: #F6F7F9 !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(1) .x-btn-inner { color: #111827 !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2) { right: 18px !important; }
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2):not(.x-item-disabled) {
  background: var(--ds-ink, #111318) !important; border: 1px solid var(--ds-ink, #111318) !important; box-shadow: none !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2).x-btn-over:not(.x-item-disabled) {
  background: var(--ds-ink-2, #262A33) !important; border-color: var(--ds-ink-2, #262A33) !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item .x-btn-inner {
  font-family: var(--ds-font) !important; font-size: 14px !important; font-weight: 600 !important;
}
.x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item.x-item-disabled { opacity: .5 !important; }
@media (max-width: 759px) {
  /* celular: a janela ocupa a largura (a regra de baixo de 760px ja centra e estica o miolo) e os
     dois botoes dividem a linha */
  .x-window.x-layer:has(.x-form-file-btn) { width: min(420px, calc(100vw - 32px)) !important; }
  .x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item { width: calc(50% - 23px) !important; }
  .x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(1) { left: 18px !important; right: auto !important; }
  .x-window.x-layer:has(.x-form-file-btn) a.x-btn.x-abs-layout-item:nth-of-type(2) { left: auto !important; right: 18px !important; }
}

/* celular 28/10 */
/* ============================================================================
   CELULAR, terceira passada (28/10/2026). Pedido do dono: "verifica pra tudo ficar usavel" (o refazer
   para celular fica para depois). Medido com o navegador de celular de verdade (Scripts\Dev\auditar-celular.js: 390x844, toque, user agent Android - fotos em C:\BuildTemp\AdsonRamon\audit-celular).
   ========================================================================== */
@media (max-width: 759px) {
  /* abas dentro da coluna (TUniPageControl: no navegador e um painel com a classe "-default", sem
     x-panel - a regra "painel que virou item da coluna" nao pegava e ele ficava com a largura do
     computador: sobra vazia a direita em toda edicao com abas, ex. Eventos 31px x 56px) */
  .ar-fluxo > .-default,
  .ar-fluxo > .-default > .-bodyWrap,
  .ar-fluxo > .-default > .-bodyWrap > .-body,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap > .x-tab-bar,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-tabpanel-child,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-tabpanel-child > .x-panel-bodyWrap,
  .ar-fluxo > .-default > .-bodyWrap > .-body > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-tabpanel-child > .x-panel-bodyWrap > .x-panel-body {
    width: 100% !important; max-width: 100%; box-sizing: border-box;
  }
  /* fileira de abas: arrasta com o dedo (as setinhas de 16px nas pontas saem; a aba escolhida o Ext
     ja traz para a vista) - a aba cortada na borda mostra que ha mais */
  .x-tab-bar .x-box-scroller { display: none !important; }
  .x-tab-bar .x-box-inner {
    width: 100% !important; left: 0 !important; margin: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .x-tab-bar .x-box-inner::-webkit-scrollbar { display: none; }
  /* tabela baixa (uTabelaDS) que escondia linhas: cresce com elas e a tela e que rola (adson-tema.js,
     "telas no celular": a classe ar-tb-cresce so entra quando ha linha escondida) */
  .x-panel.ar-tb-cresce, .x-panel.ar-tb-cresce > .x-panel-bodyWrap, .x-panel.ar-tb-cresce > .x-panel-bodyWrap > .x-panel-body,
  .x-panel.ar-tb-cresce > .x-panel-body, .x-panel.ar-tb-cresce .x-autocontainer-outerCt,
  .x-panel.ar-tb-cresce .x-autocontainer-innerCt { height: auto !important; }
  .x-panel.ar-tb-cresce .ar-tb { height: auto; container-type: normal; }
  .x-panel.ar-tb-cresce .ar-tb-cartao, .x-panel.ar-tb-cresce .ar-tb-rolo { flex: none; }
  .x-panel.ar-tb-cresce .ar-tb-rolo { overflow-y: visible; }
  /* a coluna (ar-fluxo) mora numa caixa display:table do Ext (x-autocontainer-outerCt): um campo ou
     botao com a largura do computador esticava a tabela e a coluna inteira passava da borda (LGPD:
     388px dentro de um painel de 354 - "Atender" e "Baixar os dados" cortados). Com largura fixa a
     tabela fica da largura de quem a contem e o max-width:100% dos itens passa a valer */
  .x-autocontainer-outerCt:has(> .ar-fluxo), .x-autocontainer-outerCt:has(> .ar-fluxo-cab) { table-layout: fixed; }
  .ar-fluxo > .x-btn { max-width: 100%; }
  .ar-fluxo > .x-btn .x-btn-inner { white-space: normal; }
  /* rosca e legenda: uma embaixo da outra (lado a lado, a legenda ficava numa coluna estreita e os
     nomes quebravam uma letra por linha - "P/I/X" no Financeiro) */
  .ar-fin-rosca, .ar-rk-rosca { flex-direction: column; align-items: stretch; }
  .ar-fin-rosca > .ar-rosca, .ar-rk-rosca > .ar-rosca { align-self: center; }
  .ar-leg li > span { overflow-wrap: break-word; }
  .ar-rk-rosca > .ar-leg { max-height: none; }
  /* "+R$ 79,00 vs mes ant." quebra linha em vez de passar da borda do cartao */
  .ar-ix-d { white-space: normal; }
  /* datas do eixo dos graficos de barras (1 a cada 3 dias): menores, sem encavalar */
  .ar-ix-eixo-t { font-size: 10px !important; }
  /* rodape da tabela: "Mostrando..." numa linha e as paginas na outra, sem quebrar os botoes */
  .ar-tb-rodape { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .ar-tb-rodape > :first-child { flex: 1 1 100%; }
  .ar-tb-pags { flex-wrap: nowrap !important; gap: 6px !important; margin-left: auto; }
  /* cabecalho encolhido que nao mostra nada (so tinha titulo e subtitulo, que saem no celular - Inicio):
     sai, senao deixava 30px de vao entre a barra do topo e o conteudo */
  .x-panel.ar-cab-encolhe:not(:has(.ar-fluxo-cab > .x-abs-layout-item:not(.ar-titulo):not(.ar-sub):not([style*="display: none"]):not(.x-hidden-display):not(.x-hidden-offsets))) { display: none !important; }
  /* campo data + hora (TUniDateTimePicker: dois campos lado a lado em posicao absoluta, 144 + 100px,
     cortava "20/09/202" e "00:0"): a dupla ocupa a linha, 60% a data e 40% a hora */
  .ar-fluxo > .x-form-fieldcontainer .x-box-layout-ct:has(> .x-box-inner > .x-box-target > .x-form-field-date),
  .ar-fluxo > .x-form-fieldcontainer .x-box-inner:has(> .x-box-target > .x-form-field-date),
  .ar-fluxo > .x-form-fieldcontainer .x-box-target:has(> .x-form-field-date) { width: 100% !important; }
  .ar-fluxo > .x-form-fieldcontainer .x-box-target:has(> .x-form-field-date) { display: flex !important; gap: 6px; }
  .ar-fluxo > .x-form-fieldcontainer .x-box-target:has(> .x-form-field-date) > .x-box-item { position: relative !important; left: auto !important; top: auto !important; margin: 0 !important; }
  .ar-fluxo > .x-form-fieldcontainer .x-box-target > .x-form-field-date.x-box-item { flex: 1 1 60%; width: auto !important; min-width: 0; }
  .ar-fluxo > .x-form-fieldcontainer .x-box-target > .x-form-field-date.x-box-item ~ .x-box-item { flex: 1 1 40%; width: auto !important; min-width: 0; }
  /* subtitulo dos cartoes de indicadores ("pedidos aos alunos ..."): quebra linha em vez de cortar */
  .ar-kpi-s { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  /* texto de exemplo das buscas (campo em 16px para o iPhone nao ampliar): letra menor para caber */
  input.x-form-field::placeholder, .ar-tb-busca input::placeholder, .ar-cards-busca input::placeholder { font-size: 14px; }
  /* tabela de altura fixa dentro de painel que cresce (ar-fluxo-auto): a regra ".ar-fluxo-auto
     .x-autocontainer-outerCt" (simplificacao 23/10) e de descendente e chegava ao conteiner da tabela -
     a .ar-tb (height 100%, container-type: size) ficava com 0px, a caixa de fora rolava no lugar da
     tabela e o "por pagina" media a si mesmo (Financeiro). O conteiner dela volta a 100% */
  .ar-fluxo-auto .x-panel:not(.ar-fluxo-auto):not(.ar-tb-cresce):has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-tb) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt { height: 100% !important; }
  /* perfil do aluno (uPerfilAluno): as 10 acoes (uma por linha, 439px) e as 14 abas (7 linhas, 292px)
     empurravam o conteudo da aba para a 3a tela. Viram faixas de uma linha que rolam de lado com o dedo,
     como as .ar-abas; nada some */
  .ar-pf-acoes, .ar-pf-abas {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ar-pf-acoes::-webkit-scrollbar, .ar-pf-abas::-webkit-scrollbar { display: none; }
  .ar-pf-acoes { gap: 6px; padding: 12px 16px 14px; }
  .ar-pf-acao, .ar-pf-aba { flex: none; height: 40px; }
  .ar-pf-abas { margin-top: 12px; }
  /* a ponta direita da faixa esmaece: mostra que ha mais para arrastar */
  .ar-pf-acoes::after, .ar-pf-abas::after {
    content: ''; position: sticky; right: 0; z-index: 2; flex: none; width: 28px; margin-left: -4px;
    background: linear-gradient(to left, var(--ds-surface) 25%, transparent); pointer-events: none;
  }
  /* camera: a foto encolhe para 84px e o botao de 34px cobria a ponta das iniciais - menor e na borda */
  .ar-pf-camera { width: 30px; height: 30px; right: -6px; bottom: -2px; border-width: 2px; }
  .ar-pf-camera::before { width: 14px; height: 14px; }
  /* tela torta: o perfil guardava 6px + a calha da barra a direita, mas no celular quem rola e o painel
     de fora; e a coluna de fora ja tem a margem */
  .ar-pf { padding: 2px 2px 24px; scrollbar-gutter: auto; }
  .ar-fluxo:has(> .ar-pf-host) { padding-left: 0; padding-right: 0; }
  /* cabecalho do perfil mais baixo (os numeros mantem a letra grande - preferencia do dono) */
  .ar-pf-faixa { height: 60px; }
  .ar-pf-quem { order: 2; flex-basis: 100%; }
  .ar-pf-info-bt { order: 1; align-self: flex-end; margin: 0 0 2px auto; }
  .ar-pf-kpis { gap: 8px; margin-top: 10px; }
  .ar-pf-kpis .ar-kpi { padding: 10px 12px; }
  /* Alunos: os dois filtros do cabecalho (Todos / Peso) dividem a 1a linha e CSV + Novo aluno a 2a -
     duas linhas presas (94px) em vez de tres (138px) */
  .x-panel:has(~ .ar-lista-alunos) .ar-fluxo-cab:not(.ar-fluxo-tira) > .x-field { flex: none; width: calc(50% - 4px) !important; }
  .x-panel:has(~ .ar-lista-alunos) .ar-fluxo-cab:not(.ar-fluxo-tira) > .x-field input { padding-right: 0 !important; }
  /* Anamnese > Perguntas: o texto da pergunta dividia a linha com as quatro acoes (210px) e ficava
     numa coluna de 18px, uma silaba por linha - as acoes descem para uma linha propria */
  .ar-an-perg li { grid-template-columns: 28px minmax(0, 1fr); gap: 8px 10px; padding: 12px; align-items: start; }
  .ar-an-perg .ac { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
  .ar-an-perg .ac button { height: 40px; min-width: 40px; }
  /* Anamnese: com a aba em coluna (adson-tema.js, crescer), a lista de perguntas e as respostas do aluno
     crescem com o conteudo e a aba rola - antes rolavam numa janela de 342px dentro da aba que ja rola */
  .ar-fluxo > .ar-an-rasc-area, .ar-fluxo > .ar-an-rasc-area > .x-panel-bodyWrap,
  .ar-fluxo > .ar-an-rasc-area > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-an-area, .ar-fluxo > .ar-an-area > .x-panel-bodyWrap,
  .ar-fluxo > .ar-an-area > .x-panel-bodyWrap > .x-panel-body { height: auto !important; }
  .ar-fluxo > .ar-an-rasc-area .ar-an-rasc, .ar-fluxo > .ar-an-area .ar-an { height: auto; max-height: none; overflow: visible; }
  /* cartao do aluno (Anamnese e Avaliacao fisica): o selo dividia a linha com o nome, que ficava numa
     coluna de 97px - o selo desce para baixo do nome */
  .ar-af-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
  .ar-af-topo > .ar-selo { grid-column: 2; justify-self: start; }
}
@media (max-width: 759px) and (pointer: coarse) {
  /* celular (toque): a barra de rolagem fica por cima do conteudo, sem ocupar lugar - a do tema (8px,
     com o espaco reservado em .ar-cards-area) entortava as listas: 20px a esquerda x 32px a direita */
  *::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent !important; }
  .ar-cards-area { scrollbar-gutter: auto; padding-right: 2px; }
}
@media (max-width: 699px) {
  /* titulo da barra do topo ("Analises > Central de retencao"): ate duas linhas, centrado na barra, em
     vez de cortar com reticencias nos ~200px que sobram entre o menu e os botoes */
  .ar-topo .ar-titulo { height: auto !important; top: 50% !important; transform: translateY(-50%); }
  .ar-topo .ar-titulo, .ar-topo .ar-titulo .x-innerhtml { white-space: normal !important; font-size: 14px !important; line-height: 17px !important; }
  .ar-topo .ar-titulo .x-innerhtml { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
}

/* celular 30/10 - grupo 4 */
/* ============================================================================
   CELULAR, grupo 4 (30/10/2026): Financeiro, Despesas, Produtos, Vendas, Mural, Notificacoes push, Avisos,
   Blog do site, Painel de TV, App do atleta, Relatorios, Usuarios, Configuracoes e LGPD. Medido com o navegador
   de celular de verdade (390x844, toque); fotos antes/depois em C:/BuildTemp/AdsonRamon/trab-cel30-g4.
   ========================================================================== */
@media (max-width: 759px) {
  /* Vendas e Despesas: a lista em cartoes rolava numa caixa por dentro - Vendas 1421px numa caixa de 426, com
     o bloco de cima (Nova venda, periodos, datas, Filtrar) parado em quase metade da tela; Despesas 684 em 479
     com a pagina rolando junto (rolagem dupla). A lista cresce com os cartoes e so a pagina rola */
  .ar-fluxo > .x-panel:is(.ar-lista-vendas, .ar-lista-despesas),
  .ar-fluxo > .x-panel:is(.ar-lista-vendas, .ar-lista-despesas) :is(.x-panel-bodyWrap, .x-panel-body, .x-autocontainer-outerCt) {
    height: auto !important; overflow: visible !important;
  }
  .ar-fluxo > .x-panel:is(.ar-lista-vendas, .ar-lista-despesas) .ar-cards-area { height: auto; max-height: none; overflow-y: visible; }
  /* Vendas: os rotulos "De" e "ate" ficam ao lado da data no computador (11px mais baixos) e a coluna os punha
     depois do Filtrar, soltos. Todos com a mesma ordem = a ordem do DFM: periodos, De, data, ate, data, Filtrar */
  .ar-vd-filtro .ar-fluxo > .x-abs-layout-item { order: 0 !important; }
  /* Vendas: os tres blocos (formas, itens mais vendidos, por colaborador) um por linha - em duas colunas de
     165px o titulo "ITENS MAIS VENDIDOS" quebrava em 3 linhas */
  .ar-kpis.ar-vd-blocos { grid-template-columns: minmax(0, 1fr) !important; }
  /* tabela vazia (uTabelaDS) mais alta que o aviso "Nada por aqui ainda" (classe do adson-tema.js, tabelaVaziaG4):
     fica do tamanho do aviso enquanto ele estiver a vista. Com a altura do computador sobravam ~300px brancos
     (Avisos: 505px para um aviso de 265; quem nao rolava nao achava "2 - MENSAGEM" nem o Enviar). Chegou linha,
     o aviso some, o :has deixa de valer e a tabela volta a medida dela */
  .x-panel.ar-tb-vazia-g4:has(.ar-tb-vazio:not([hidden])),
  .x-panel.ar-tb-vazia-g4:has(.ar-tb-vazio:not([hidden])) :is(.x-panel-bodyWrap, .x-panel-body, .x-autocontainer-outerCt, .x-autocontainer-innerCt) {
    height: auto !important;
  }
  .x-panel.ar-tb-vazia-g4:has(.ar-tb-vazio:not([hidden])) .ar-tb { height: auto; container-type: normal; }
  .x-panel.ar-tb-vazia-g4:has(.ar-tb-vazio:not([hidden])) :is(.ar-tb-cartao, .ar-tb-rolo) { flex: none; overflow: visible; }
  /* LGPD: "Mostrar" e a caixa de 220px cortavam "So os pedidos abert..."; a caixa ocupa o resto da linha */
  .ar-fluxo-cab:not(.ar-fluxo-tira):has(> .ar-rotulo):has(> .x-btn.ar-ic-atualizar) > .x-field { flex: 1 1 200px; width: auto !important; min-width: 0; }
  /* LGPD: a ficha do pedido (HTML) vem antes da resposta e fica do tamanho do que mostra - com os 377px do
     computador havia um vao de ~230px antes de Baixar / Recusar / Atender, e a ficha vinha depois da resposta */
  .ar-fluxo:has(> .x-field textarea):has(> .x-btn.ar-ic-baixar) > .x-panel:has(.ar-evo-vazio, .ar-evo-ficha) { order: -1 !important; }
  .ar-fluxo:has(> .x-field textarea):has(> .x-btn.ar-ic-baixar) > .x-panel:has(.ar-evo-vazio, .ar-evo-ficha),
  .ar-fluxo:has(> .x-field textarea):has(> .x-btn.ar-ic-baixar) > .x-panel:has(.ar-evo-vazio, .ar-evo-ficha) :is(.x-panel-bodyWrap, .x-panel-body, .x-autocontainer-outerCt) {
    height: auto !important;
  }
  /* Relatorios: Gerar, Imprimir e CSV depois dos filtros. No computador ficam a direita, ancorados; na tela
     estreita o Gerar caia em left 11px, "colava" no rotulo Relatorio e aparecia entre ele e o filtro Evento */
  .ar-fluxo:has(> .ar-rel-area) > .x-panel .ar-fluxo > .x-btn { order: 90 !important; }
  /* Painel de TV: "Voltar a lista" so na aba que esta com o cartao aberto (Slides ou Playlists). Nas outras
     abas ele aparecia sem ter lista para voltar (e cancelava a edicao escondida da outra aba) */
  .ar-fluxo:has(> .ar-cab-encolhe .ar-tv-status):not(:has(> .-default .x-tabpanel-child:not(.x-hidden-offsets) .x-panel.ar-transp[style*="display: none"])) > .ar-cab-encolhe .x-btn.ar-ic-voltar { display: none !important; }
  /* Painel de TV: as listas de slides e de playlists (HTML) e os cartoes de edicao (slide, playlist, Ajustes)
     ficavam 22px mais estreitos que a aba - tortos, 19-21px de margem a esquerda e 41-43px a direita */
  .ar-fluxo:has(> .ar-cab-encolhe .ar-tv-status) .x-uni-tabsheet > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:is(.ar-transp, .ar-card),
  .ar-fluxo:has(> .ar-cab-encolhe .ar-tv-status) .x-uni-tabsheet > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:is(.ar-transp, .ar-card) > .x-panel-bodyWrap,
  .ar-fluxo:has(> .ar-cab-encolhe .ar-tv-status) .x-uni-tabsheet > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:is(.ar-transp, .ar-card) > .x-panel-bodyWrap > .x-panel-body {
    width: 100% !important;
  }
  /* Blog do site: dentro da caixa da capa a imagem e os textos "Nenhuma imagem escolhida" guardavam os 216 a
     238px do computador, encostados a esquerda numa caixa de 324 (o texto centrado ficava torto) */
  .ar-fluxo > .ar-capa-caixa .x-autocontainer-innerCt:not(.ar-fluxo) > .x-abs-layout-item { left: 0 !important; width: 100% !important; box-sizing: border-box; }
  .ar-fluxo > .ar-capa-caixa .x-autocontainer-innerCt:not(.ar-fluxo) > .x-abs-layout-item:not(.ar-capa-img) { padding-left: 12px; padding-right: 12px; }
  /* App do atleta: o celular de exemplo tinha a proporcao de um aparelho (9 x 18,5) e sobravam ~150px vazios
     embaixo da grade de atalhos - quase uma tela so para ele. Fica da altura do que mostra */
  .ar-app-fone-tela { aspect-ratio: auto; }
  .ar-app-m-corpo { padding-bottom: 22px; }
  /* Configuracoes > WhatsApp: a caixa do QR sem QR (so o "Clique em Conectar...") guardava os 255px do QR -
     um vao entre o Token e a Instancia. Com o QR na tela ela volta ao tamanho dele */
  .ar-fluxo > .x-panel:has(.ar-qr-vazio),
  .ar-fluxo > .x-panel:has(.ar-qr-vazio) :is(.x-panel-bodyWrap, .x-panel-body, .x-autocontainer-outerCt) { height: auto !important; }
}

/* celular 30/10 - grupo 3 */
/* ============================================================================
   CELULAR, quarta passada (30/10/2026), grupo 3: Corridas (Eventos, Inscricoes, Retirada de kit,
   Check-in e resultados, Cronometragem, Analise da prova). Medido no navegador de celular de verdade
   (Scripts\Dev\gu-celular.js, 390x844); fotos antes/depois em C:\BuildTemp\AdsonRamon\trab-cel30-g3.
   So o celular: tudo dentro do @media; no PC (1366x768) nada muda.
   ========================================================================== */
@media (max-width: 759px) {
  /* Eventos, edicao (a tela e o TUniPageControl das abas que tem o "Conferir no mapa", .ar-ic-mapa - so o
     uCadEvento tem): Voltar / Excluir evento / Desfazer / Salvar em duas fileiras (94px) + as abas ficavam
     presos em cima, 210px dos 844 da tela. Os quatro numa fileira so (50px): Voltar e Excluir viram icone
     (o texto continua no botao para o leitor de tela; o Excluir ainda pergunta antes) e Desfazer e Salvar
     dividem o resto. A pasta de abas cresce sozinha para o que sobra (encaixarPe do adson-tema.js) */
  .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab { flex-wrap: nowrap; }
  .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-voltar, .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-excluir { flex: none; width: 44px !important; }
  .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-voltar .x-btn-inner, .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-excluir .x-btn-inner { font-size: 0 !important; gap: 0; }
  .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-voltar .x-btn-inner::before, .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-excluir .x-btn-inner::before { width: 18px; height: 18px; }
  .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-fechar, .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-salvar { flex: 1 1 0; width: auto !important; min-width: 0; }
  /* celular estreito (360px): o x do Desfazer sai para o texto caber */
  @media (max-width: 379px) { .ar-fluxo:has(> .-default .ar-ic-mapa) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn.ar-ic-fechar .x-btn-inner::before { display: none; } }
  /* Eventos, abas: o painel de botoes que virou coluna dentro da coluna da aba somava as duas margens
     (Novo/Excluir em 48px, a tabela em 34px; Regulamento: a Versao em 48 e o texto em 34; Pagina: tres
     margens). A coluna de dentro fica sem margem dos lados - tudo alinha na margem da aba */
  .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo .ar-fluxo { padding-left: 0; padding-right: 0; }
  /* Eventos, Pagina e Regulamento: a caixa de texto vinha com a altura do computador (o "Texto de
     apresentacao" vazio ocupava 473px e empurrava a Imagem de capa para a 2a tela). No celular a caixa
     cresce com o texto, de 160px ate meia tela, e dai rola por dentro; navegador sem field-sizing fica
     com 40% da tela (o min-height leva !important porque o Ext poe "min-height: 10px !important") */
  .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea), .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea) .x-form-item-body, .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea) .x-form-trigger-wrap,
  .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea) .x-form-text-wrap { height: auto !important; }
  .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea) textarea { height: 40vh !important; min-height: 160px !important; max-height: 50vh; box-sizing: border-box; }
  @supports (field-sizing: content) {
    .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-fluxo > .x-form-text-heighted:has(textarea) textarea { height: auto !important; field-sizing: content; }
  }
  /* Eventos, Lotes e precos: o titulo "VALOR DA INSCRICAO (R$)" numa linha so alargava a coluna e a
     tabela passava 36px da caixa - o preco aparecia cortado ("R$ 89,9"). O titulo do valor quebra linha */
  .ar-fluxo > .-default:has(.ar-ic-mapa) .ar-tb thead th.c-din { white-space: normal; }
  /* titulo da tabela (uTabelaDS) quebra linha em vez de passar da borda (regra geral - aba Cupons do
     evento: "Quem usou GRUPODOTREINAO - 121 pagas - 0 aguardando ..." saia da tela) */
  .ar-tb-titulo { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  /* Inscricoes > Detalhes: o quadro (.ar-det-inscricao) ficava com a largura do servidor (332px num espaco
     de 354) e o conteudo era mais largo que ele (o codigo da transacao sem espaco forcava 374px): valores,
     "Aprovar PCD" e "Recusar PCD" cortados na direita e o quadro rolando de lado. Fica da largura da coluna
     e o valor longo quebra */
  .ar-det-inscricao, .ar-det-inscricao > .x-panel-bodyWrap, .ar-det-inscricao > .x-panel-bodyWrap > .x-panel-body { width: 100% !important; }
  .ar-det-inscricao .x-autocontainer-outerCt { table-layout: fixed; }
  .ar-det-linha b { min-width: 0; overflow-wrap: anywhere; }
  /* ... e com o detalhe aberto a faixa "Inscricao manual / Atualizado as" (da lista) sai: o detalhe sobe
     82px (o servidor esconde o pnlDetalhe com display: none quando volta para a lista) e o quadro vai ate
     o pe do painel (o encaixarPe estica o painel, mas o quadro, solto na posicao, ficava com os 601px do
     servidor e sobrava uma faixa vazia embaixo) */
  .ar-det-inscricao { bottom: 0; height: auto !important; }
  .ar-det-inscricao > .x-panel-bodyWrap, .ar-det-inscricao > .x-panel-bodyWrap > .x-panel-body { height: 100% !important; }
  .ar-fluxo:has(> .x-panel:not([style*="display: none"]) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-det-inscricao) > .ar-cab-encolhe { display: none !important; }
  /* Retirada de kit: com a busca vazia a ficha ja diz "Bipe o QR do comprovante..." - a lista dos achados
     (vazia) repetia o aviso numa segunda caixa dentro do cartao, 178px que empurravam "Nome de quem
     retirou". A lista so aparece quando a busca acha alguem */
  .ar-kit-card .ar-fluxo > .x-panel:has(.ar-tb-vazio:not([hidden])) { display: none !important; }
  /* ... e a ficha do atleta achado: o PEITO (132px) ao lado dos dados deixava 155px para eles - nome cortado
     ("Adriel Mar..."), "Corrida / 5 / KM" uma palavra por linha e o aviso em 9 linhas. O PEITO vira uma
     faixa em cima, os dados ocupam a largura, o nome inteiro (e com ele que o balcao confere) e cada
     rotulo comeca numa linha */
  .ar-kit-ficha { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .ar-kit-peito { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 8px 16px; font-size: 40px; line-height: 44px; }
  .ar-kit-dados { flex: 1 1 100%; }
  .ar-kit-dados .nome { white-space: normal; overflow-wrap: anywhere; }
  .ar-kit-dados .linha span:not(:first-child) { margin-left: 0; }
  .ar-kit-dados .linha span:not(:first-child)::before { content: "\A"; white-space: pre; }
  /* Cronometragem: cada botao embaixo do seu texto (a coluna juntava os tres textos e depois os tres
     botoes) e os tres da mesma largura (300, 300 e 310px) */
  .ar-fluxo:has(> .x-btn.ar-ic-baixar ~ .x-btn.ar-ic-baixar ~ .x-btn.ar-btn-primario.ar-ic-subir) > * { order: 0 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-baixar ~ .x-btn.ar-ic-baixar ~ .x-btn.ar-btn-primario.ar-ic-subir) > .x-btn { width: 100% !important; margin-bottom: 8px; }
  /* Check-in e resultados: o CHECK-IN caia entre o Tempo bruto e o Tempo liquido (o servidor move o botao
     depois de abrir). Na ordem da tela: atleta, tempos, situacao e os dois botoes juntos no fim */
  .ar-fluxo:has(> .x-field.ar-masc-tempo) > * { order: 0 !important; }
  /* Analise da prova (.ar-ap): o painel cresce com o conteudo e a pagina inteira rola (adson-tema.js,
     ajustarCorridasG3) - a barra Imprimir / Exportar CSV / Atualizar sobe junto em vez de ficar presa */
  .ar-fluxo > .x-panel.ar-fluxo-auto .ar-dash.ar-ap { height: auto; max-height: none; overflow: visible; }
  /* ... e a barra numa fileira so (eram duas, com 72px vazios a direita da 1a): os tres botoes dividem a
     largura, com o icone um pouco mais perto do texto; em tela de 360px o Atualizar desce sozinho */
  .ar-fluxo:has(> .x-panel .ar-dash.ar-ap) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn { flex: 1 1 auto; width: auto !important; }
  .ar-fluxo:has(> .x-panel .ar-dash.ar-ap) > .ar-cab-encolhe .ar-fluxo-cab > .x-btn .x-btn-inner { gap: 5px; padding: 0 2px; }
  /* o (i) do numero ficava sozinho na 2a linha ("VAGAS RESTANTES" / "(i)"): o titulo vira duas colunas,
     texto e (i) no alto a direita; a dica ganha alvo de 40px para o dedo (era 16px) */
  .ar-ap .ar-ix-kpi .ar-kpi-t { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: start; column-gap: 6px; overflow-wrap: normal; }
  .ar-ap .ar-ix-kpi .ar-ix-dica { margin: 0; vertical-align: 0; }
  .ar-ap .ar-ix-kpi .ar-ix-dica::before { content: ""; position: absolute; inset: -12px; }
  /* "R$" numa linha e o valor na outra (Arrecadado): o valor em dinheiro fica numa linha so, um pouco menor */
  .ar-ap .ar-ix-kpi.din .ar-kpi-v { white-space: nowrap; font-size: clamp(16px, 5vw, 19px); letter-spacing: -.02em; }
  /* rosca encostada a esquerda com a metade da direita vazia (a legenda desce para baixo dela): centrada */
  .ar-ap .ar-ix-rosca { justify-content: center; }
  /* linhas da legenda (a "Cortesia" abre quem recebeu): alvo de 40px para o dedo (eram 30px) */
  .ar-ap .ar-ix-rosca-leg li { min-height: 40px; box-sizing: border-box; }
}
@media (max-width: 699px) {
}
/* celular 30/10 - grupo 2 */
/* ============================================================================
   CELULAR, grupo 2 (30/10/2026): Evolucao do aluno, Captacao de clientes, Agenda, Ranking de presencas,
   Check-in por QR Code, Calendario de treinos, Exercicios e Anamnese. Medido com o navegador de celular de
   verdade (Scripts\Dev\gu-celular.js: 390x844, toque). A classe ar-cresce-g2 vem do adson-tema.js
   ("telas no celular", telasG2).
   ========================================================================== */
@media (max-width: 759px) {
  /* painel que cresce com o conteudo (ar-cresce-g2): o que vai dentro deixa de rolar numa caixa baixa e quem
     rola e a tela - Agenda (a lista do dia rolava em 260px e o treino em 300, dentro do painel de 650 que
     tambem rolava), Ranking, Captacao, Calendario de treinos, Check-in por QR, Evolucao do aluno */
  .x-panel.ar-cresce-g2 > .x-panel-bodyWrap > .x-panel-body { overflow-y: visible !important; }
  .ar-cresce-g2 .ar-cards-area, .ar-cresce-g2 .ar-dash, .ar-cresce-g2 .ar-qrc, .ar-cresce-g2 .ar-ag-det {
    height: auto !important; max-height: none !important; overflow-y: visible !important;
  }
  .ar-cresce-g2 .ar-ag { height: auto; }
  .ar-cresce-g2 .ar-ag-corpo, .ar-cresce-g2 .ar-ag-listas, .ar-cresce-g2 .ar-ag-det { flex: none; }
  .ar-cresce-g2 .ar-qrc-palco { min-height: 0; }
  /* Agenda: o cartao do treino dividia a linha em hora (66px), texto e lotacao (86px) - o nome e o endereco
     ficavam numa coluna de 104px, uma palavra por linha (9 linhas). A lotacao desce para baixo do texto */
  .ar-ag .ar-ag-card.ar-cardev { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
  .ar-ag .ar-ag-card .hr { grid-column: 1; grid-row: 1 / span 2; }
  .ar-ag .ar-ag-card .tx { grid-column: 2; grid-row: 1; }
  .ar-ag .ar-ag-card .oc { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; }
  .ar-ag .ar-ag-card .oc .n { justify-content: flex-start; }
  .ar-ag .ar-ag-card .oc .livre { margin-top: 0; }
  .ar-ag .ar-ag-card .ar-ag-chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  /* Agenda, vista Semana: 4 colunas de 80px partiam a hora e o nome no meio ("06:0/0", "Teina/o") e cortavam
     "Clube de Corrida" - 2 colunas */
  .ar-ag .ar-cards-area.ar-ag-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Captacao, cartao LINK DE CAPTACAO: o endereco e a dica cortados em "..." ("Clientes via link" ficava fora
     do cartao) e a fileira COPIAR LINK / ABRIR / Recriar 14px mais larga que o cartao (Recriar na borda). O
     endereco quebra e aparece inteiro, a dica quebra, COPIAR LINK ocupa a 1a linha e ABRIR + Recriar a 2a */
  .ar-capt-url { white-space: normal; overflow-wrap: anywhere; word-break: break-all; text-overflow: clip; }
  .ar-capt-dica { white-space: normal; overflow: visible; text-overflow: clip; }
  .ar-capt-acoes { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .ar-capt-acoes > .ar-capt-bt { flex: 1 1 0; min-width: 0; justify-content: center; }
  .ar-capt-acoes > .ar-capt-copiar { flex-basis: 100%; }
  /* Exercicios, edicao: o quadro da previa do video tem 300px fixos (DFM) e o video 16:9 no celular tem 182 -
     sobrava um vao de ~120px entre a previa e Equipamento */
  .ar-fluxo > .ar-ex-previa-host, .ar-fluxo > .ar-ex-previa-host > .x-panel-bodyWrap,
  .ar-fluxo > .ar-ex-previa-host > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-ex-previa-host .x-autocontainer-outerCt { height: auto !important; }
  /* Anamnese > Perguntas: Descartar e Publicar sao ancorados a direita no computador; no celular a posicao
     deles ficava negativa e a coluna saia Descartar, Adicionar, Publicar, Limpar. Fica Adicionar pergunta,
     Limpar campos, Descartar alteracoes, Publicar versao e a dica embaixo */
  .ar-an-editor .ar-fluxo > .x-btn.ar-ic-mais { order: 900 !important; }
  .ar-an-editor .ar-fluxo > .x-btn.ar-ic-fechar { order: 901 !important; }
  .ar-an-editor .ar-fluxo > .x-btn.ar-ic-atualizar { order: 902 !important; }
  .ar-an-editor .ar-fluxo > .x-btn.ar-ic-enviar { order: 903 !important; }
  .ar-an-editor .ar-fluxo > .ar-apoio { order: 910 !important; }
}

/* celular 30/10 - grupo 1 */
/* ============================================================================
   CELULAR, quarta passada (30/10/2026), grupo 1 - medido no navegador de celular (390x844, toque):
   Inicio, Indicadores, Central de retencao, Resumo semanal, Alunos, Mensalidades, Planos, Contratos,
   Aniversariantes, Avaliacoes dos alunos e Feedbacks. Fotos em C:\BuildTemp\AdsonRamon\trab-cel30-g1\fotos.
   ========================================================================== */
@media (max-width: 759px) {
  /* botoes do cabecalho que coube (ar-cab-encolhe) 10px mais para dentro que os cartoes (30px x 20px): o
     cabecalho ja esta na coluna da tela, que tem a margem - fica so 2px, como a busca e os cartoes. So nas telas
     deste grupo (Indicadores, Resumo semanal, Central de retencao, Alunos e perfil, Planos, Contratos, Avaliacoes
     dos alunos, Feedbacks): nas que ainda tem o conteudo com margem dupla (Financeiro, Avisos) os botoes ficariam
     a esquerda do conteudo */
  .x-panel.ar-cab-encolhe:has(~ .x-panel :is(.ar-ix-abas, .ar-ix-semana, .ar-ix-ret-kpis, .ar-aval-ficha, .ar-pf-host), ~ :is(.ar-lista-alunos, .ar-lista-planos, .ar-lista-contratos, .ar-lista-feedbacks)) .ar-fluxo-cab:not(.ar-fluxo-tira) { padding-left: 2px; padding-right: 2px; }
  /* ... nas Avaliacoes dos alunos, com os 20px a mais, o rotulo "Mostrar" subia para a linha do "Periodo" e a
     caixa dele ficava sozinha embaixo: cada caixa ocupa o resto da linha do seu rotulo */
  .x-panel.ar-cab-encolhe:has(~ .ar-corpo .ar-aval-ficha) .ar-fluxo-cab:not(.ar-fluxo-tira) > .x-field { flex: 1 1 calc(100% - 80px); }
  /* Inicio (uHome; .ar-dash > .ar-hj so existe la): os quadros do dia (htmlHoje e htmlDash, .ar-dash) vinham com a margem de 24px e a largura que
     o servidor calculou (332px) dentro de um corpo de 354px: o conteudo comecava em 42px e o lado direito dos
     cartoes saia cortado. Ocupam o corpo inteiro e passam a ter a altura do proprio conteudo, um embaixo do outro
     - a altura que o uHome mede no navegador (PedirAlturaDash) sai antes de a tela virar coluna e, com a largura
     nova, ficava curta (o fim do quadro passava por baixo do seguinte) */
  /* (se o adson-tema.js tambem fizer esse corpo virar coluna - ar-fluxo, quando a largura do servidor passa 2px da
     caixa -, nada de margem a mais: o corpo e que cresce e a tela rola, uma rolagem so) */
  .ar-fluxo > .ar-corpo:has(.ar-dash > .ar-hj) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt { display: flex !important; flex-direction: column; flex-wrap: nowrap !important; gap: 0 !important; padding: 0 !important; height: auto !important; }
  .ar-fluxo > .ar-corpo:has(.ar-dash > .ar-hj) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-dash) {
    position: relative !important; left: 0 !important; top: auto !important; width: 100% !important; height: auto !important; flex: none;
  }
  .ar-fluxo > .ar-corpo:has(.ar-dash > .ar-hj) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-dash) > .x-panel-bodyWrap,
  .ar-fluxo > .ar-corpo:has(.ar-dash > .ar-hj) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-dash) > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-corpo:has(.ar-dash > .ar-hj) > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-dash) .x-autocontainer-outerCt { width: 100% !important; height: auto !important; box-sizing: border-box; }
  /* Avaliacoes dos alunos: a ficha (htmlFicha, .ar-aval-ficha) tinha a largura do servidor (332px) num corpo de
     354px - a caixa "Escolha uma linha..." ficava 22px mais estreita que a lista. Ocupa o corpo inteiro */
  .ar-fluxo > .ar-corpo > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-aval-ficha) { left: 0 !important; width: 100% !important; }
  .ar-fluxo > .ar-corpo > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-aval-ficha) > .x-panel-bodyWrap,
  .ar-fluxo > .ar-corpo > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-aval-ficha) > .x-panel-bodyWrap > .x-panel-body { width: 100% !important; box-sizing: border-box; }
  /* dica (i) dos indicadores: 16px era alvo pequeno para o dedo - o desenho fica com 20px e a area de toque com
     42px (::before transparente); a caixa da dica passa a ser posicionada pelo adson-tema.js (dicaG1) dentro da
     faixa dos cartoes - no cartao da direita ela saia pela borda da tela, cortada */
  .ar-ix-dica { width: 20px; height: 20px; font-size: 12px; vertical-align: -4px; }
  .ar-ix-dica::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }
  .ar-ix-dica::after { left: var(--ar-dica-x, -10px) !important; right: auto !important; width: var(--ar-dica-w, 240px); }
  /* rosca dos Indicadores (.ar-ix-abas so existe la): no centro da linha (encostada a esquerda, metade do
     cartao vazia) e um pouco maior - o valor do meio ("R$ 11.375,73", 103px) passava por cima do anel de 100px */
  .ar-transp:has(.ar-ix-abas) .ar-ix-rosca { justify-content: center; }
  .ar-transp:has(.ar-ix-abas) .ar-ix-rosca-c, .ar-transp:has(.ar-ix-abas) .ar-graf.ar-ix-rosca-svg { width: 200px; height: 200px; }
  /* perfil do aluno: 35px de vao entre a barra do topo e o cartao (o padding da coluna de dentro somava ao da
     coluna da tela) e a coluna da tela passava 12px da altura, rolando junto com o perfil (rolagem dupla) */
  .ar-fluxo:has(> .ar-pf-host) { padding-top: 0; padding-bottom: 0; row-gap: 0; }
  /* botao da camera (30px): area de toque de 44px sem mudar o desenho */
  .ar-pf-camera::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
  /* Feedbacks: os quatro numeros em 2 x 2 (em faixa, o 2o cartao saia cortado no meio do texto e os outros dois
     ficavam fora da tela); o quadro cresce com eles e a lista ocupa o resto (encaixarPe) */
  .ar-fluxo > .ar-fi-kpis-host:has(.ar-fb-kpis), .ar-fluxo > .ar-fi-kpis-host:has(.ar-fb-kpis) > .x-panel-bodyWrap,
  .ar-fluxo > .ar-fi-kpis-host:has(.ar-fb-kpis) > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-fi-kpis-host:has(.ar-fb-kpis) .x-autocontainer-outerCt { height: auto !important; }
  .ar-kpis.ar-fi-kpis.ar-fb-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto; overflow: visible; padding-bottom: 0; }
  .ar-kpis.ar-fi-kpis.ar-fb-kpis .ar-kpi-t, .ar-kpis.ar-fi-kpis.ar-fb-kpis .ar-kpi-s { white-space: normal; overflow: visible; text-overflow: clip; }
  /* Mensalidades: a folha da aba e os paineis transparentes de dentro repetiam a margem da coluna (14px + 14px):
     filtros e botoes em 47px, com as abas em 20px. Ficam alinhados com as abas */
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .x-tabpanel-child > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .ar-fluxo,
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .x-tabpanel-child .ar-fluxo > .ar-transp > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .ar-fluxo { padding-left: 0; padding-right: 0; }
  /* ... e as acoes da mensalidade (Baixa manual, Cobrar no WhatsApp, Isentar, Cancelar) ficam presas no pe da tela
     enquanto a lista rola: com 10 linhas de 120px elas ficavam ate 1.200px abaixo da linha escolhida. Uma faixa
     que rola de lado (o botao cortado na ponta mostra que ha mais); o texto de apoio fica embaixo, em letra menor */
  /* a folha da aba que cresceu com o conteudo (ar-fluxo-auto) tinha overflow hidden e virava a caixa de
     referencia do sticky sem rolar; clip corta igual e deixa o sticky valer na caixa que rola de verdade */
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .x-tabpanel-child.ar-fluxo-auto,
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .x-tabpanel-child.ar-fluxo-auto > .x-panel-bodyWrap,
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .x-tabpanel-child.ar-fluxo-auto > .x-panel-bodyWrap > .x-panel-body { overflow: clip !important; }
  .ar-fluxo > .ar-transp:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) {
    position: sticky !important; bottom: 0 !important; z-index: 3; background: var(--ds-bg) !important;
    box-shadow: 0 -1px 0 var(--ds-border), 0 -12px 16px -14px rgba(16, 24, 40, .35);
  }
  .ar-fluxo > .ar-transp > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .ar-fluxo:has(> .ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: auto auto; align-items: center;
    gap: 4px 8px; padding-top: 10px; padding-bottom: 8px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ar-fluxo:has(> .ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) > .x-btn { grid-row: 1; margin: 0 !important; }
  .ar-fluxo:has(> .ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) > .ar-apoio {
    grid-row: 2; grid-column: 1 / span 4; position: sticky !important; left: 14px !important; width: auto !important;
    max-width: calc(100vw - 64px); font-size: 12.5px !important; line-height: 1.35 !important;
  }
  .ar-fluxo:has(> .ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) > .ar-apoio .x-innerhtml { font-size: 12.5px !important; line-height: 1.35 !important; }
  /* busca dos Contratos: o texto de exemplo ("Procure pelo nome do contrato ou do plano", 287px) passava da
     caixa (o campo de busca guarda lugar para o X de limpar) - letra 13px; e, se ainda nao couber, reticencias */
  .ar-lista-contratos .ar-cards-busca input::placeholder { font-size: 13px; }
  .ar-cards-busca input, .ar-tb-busca input { text-overflow: ellipsis; }
  /* Observacao do plano e da matricula (campo de uma linha): o texto longo era cortado seco na borda ("01/1C") -
     com reticencias fica claro que continua (tocando, o campo mostra e rola o texto inteiro) */
  .ar-fluxo > .ar-lista-planos ~ .ar-card input.x-form-text,
  .-default:has(.ar-btn-primario.ar-ic-dinheiro ~ .ar-btn-contorno.ar-ic-zap) .ar-card input.x-form-text { text-overflow: ellipsis; }
}

/* celular 03/11 - gestao */
/* ============================================================================
   CELULAR (03/11/2026) - Gestao, Aulas e treinos, Financeiro. Medido no navegador de celular de verdade (390x844
   e 360x740, toque); fotos antes/depois em C:/BuildTemp/AdsonRamon/trab-cel03-c/fotos. As pecas .ar-mat-volta-ges
   e .ar-vd-barra-ges nascem no adson-tema.js (matriculaGes, vendaGes) com o atributo hidden: so este bloco as mostra.
   ========================================================================== */
@media (max-width: 759px) {
  /* Mensalidades > Matriculas: o cartao de edicao fica embaixo da lista (com 10 linhas, 1.250px abaixo da linha
     tocada). O toque na linha (ou em Nova matricula) leva ao cartao (adson-tema.js) e o botao "Voltar a lista", no
     alto do cartao, fica preso no alto da aba enquanto o cartao rola. O cartao e os corpos dele cortam com clip
     (hidden virava a caixa de referencia do sticky, sem rolar) */
  .x-tabpanel-child .ar-fluxo > .ar-card:has(.ar-mat-volta-ges),
  .x-tabpanel-child .ar-fluxo > .ar-card:has(.ar-mat-volta-ges) > .x-panel-bodyWrap,
  .x-tabpanel-child .ar-fluxo > .ar-card:has(.ar-mat-volta-ges) > .x-panel-bodyWrap > .x-panel-body { overflow: clip !important; }
  .ar-fluxo > .ar-mat-volta-ges {
    display: flex !important; align-items: center; gap: 8px; order: -1 !important; position: sticky; top: 0; z-index: 3;
    flex: 0 0 calc(100% + 28px); max-width: none; box-sizing: border-box; min-height: 46px; margin: -12px -14px 2px; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--ds-border); border-radius: 0; background: var(--ds-surface); cursor: pointer;
    font: 700 15px var(--ds-font); color: var(--ds-text); text-align: left; -webkit-tap-highlight-color: transparent;
  }
  .ar-mat-volta-ges > span { font-size: 18px; line-height: 1; }
  .ar-mat-volta-ges:active { background: var(--ds-surface-low); }
  /* Vendas > Nova venda: o catalogo (Cliente e Produtos) vem antes do carrinho - o carrinho com o Concluir vinha
     primeiro e o produto tocado ia para uma lista fora da vista. A barra "Carrinho" (adson-tema.js, vendaGes) fica
     entre os dois, presa no pe enquanto o carrinho esta mais abaixo: quantidade e total mudam a cada toque e o toque
     nela leva ao carrinho (desconto, forma de pagamento, Concluir venda). A venda corta com clip pelo mesmo motivo */
  .ar-vd-venda .ar-fluxo > .ar-vd-catalogo { order: -2 !important; }
  .ar-vd-venda:has(.ar-vd-barra-ges), .ar-vd-venda:has(.ar-vd-barra-ges) > .x-panel-bodyWrap,
  .ar-vd-venda:has(.ar-vd-barra-ges) > .x-panel-bodyWrap > .x-panel-body { overflow: clip !important; }
  .ar-fluxo > .ar-vd-barra-ges {
    display: flex !important; align-items: center; gap: 12px; order: -1 !important; position: sticky; bottom: 8px; z-index: 3;
    flex: 1 1 100%; box-sizing: border-box; min-height: 58px; margin: 0; padding: 8px 8px 8px 12px; border: 0; border-radius: 14px;
    background: var(--ds-ink); color: #FFFFFF; cursor: pointer; text-align: left; font-family: var(--ds-font);
    box-shadow: 0 10px 24px -8px rgba(16, 24, 40, .45); -webkit-tap-highlight-color: transparent;
  }
  .ar-vd-barra-ic { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .12); }
  .ar-vd-barra-ic::before {
    content: ''; position: absolute; inset: 10px; background: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 7h12l1 13H5L6 7z%27/%3E%3Cpath d=%27M9 7a3 3 0 0 1 6 0%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 7h12l1 13H5L6 7z%27/%3E%3Cpath d=%27M9 7a3 3 0 0 1 6 0%27/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ar-vd-barra-n {
    position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
    background: #FFFFFF; color: var(--ds-ink); box-shadow: 0 0 0 2px var(--ds-ink); font: 800 12px/20px var(--ds-font); text-align: center;
  }
  .ar-vd-barra-ges.vazia .ar-vd-barra-n { display: none; }
  .ar-vd-barra-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
  .ar-vd-barra-txt b { font: 700 15px var(--ds-font); }
  .ar-vd-barra-txt small { font: 500 12.5px var(--ds-font); color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ar-vd-barra-tot { flex: none; font: 800 17px var(--ds-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ar-vd-barra-ver {
    flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px;
    background: #FFFFFF; color: var(--ds-ink); font: 700 14px var(--ds-font);
  }
  .ar-vd-barra-ges:active { background: var(--ds-ink-2); }
  @keyframes arPulsoGes { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
  .ar-vd-barra-ges.ar-pulso-ges .ar-vd-barra-n { animation: arPulsoGes .45s ease-out; }
  .ar-sem-mov .ar-vd-barra-ges .ar-vd-barra-n { animation: none !important; }
  /* Nova venda: a caixa dos itens guardava a altura do computador (307px) - ~130px vazios embaixo do "Nenhum item
     ainda"; fica do tamanho do que mostra. O texto de apoio dizia "ao lado" (no celular o catalogo fica acima) */
  .ar-fluxo > .ar-vd-car-host, .ar-fluxo > .ar-vd-car-host > .x-panel-bodyWrap, .ar-fluxo > .ar-vd-car-host > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-vd-car-host .x-autocontainer-outerCt { height: auto !important; }
  .ar-vd-car-host .ar-vd-car { height: auto; overflow: visible; }
  .ar-vd-car-host .ar-vd-car.vazio small { display: none; }
  .ar-vd-car-host .ar-vd-car.vazio::after {
    content: 'Toque nos produtos acima para colocar na venda. Cada toque soma uma unidade.';
    max-width: 300px; font: 500 13px/1.5 var(--ds-font); color: var(--ds-muted);
  }
  /* ... e cada item em duas linhas: nome e o X em cima, quantidade e total embaixo. Em uma linha o nome ficava com
     40px ("Agua / miner / al") e os botoes de 26 a 30px eram pequenos para o dedo */
  .ar-vd-car-host .ar-vd-item { grid-template-columns: auto minmax(0, 1fr) 40px; grid-template-areas: "nome nome tirar" "qtd total total"; gap: 6px 10px; padding: 10px 8px 12px 12px; }
  .ar-vd-car-host .ar-vd-item-nome { grid-area: nome; align-self: center; }
  .ar-vd-car-host .ar-vd-qtd { grid-area: qtd; }
  .ar-vd-car-host .ar-vd-qtd button { width: 40px; height: 40px; }
  .ar-vd-car-host .ar-vd-item-total { grid-area: total; padding-right: 6px; font-size: 15px; }
  .ar-vd-car-host .ar-vd-tirar { grid-area: tirar; width: 40px; height: 40px; align-self: start; }
  /* ... e o catalogo em duas colunas tambem nos celulares de 360px (abaixo de 280px de grade virava uma coluna so: 10
     produtos davam 1.870px de rolagem ate o carrinho) */
  .ar-vd-cat-host .ar-vd-cat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ... e as quatro formas de pagamento em 2 x 2: em uma linha cada pilula tinha 62 a 69px e "Dinheiro" passava
     da borda (a bolinha saia cortada); o quadro cresce com elas. Os totais tambem ficam do tamanho do que mostram
     (sobravam ~30px antes do Concluir; com desconto, troco ou aviso o quadro cresce junto) */
  .ar-vd-caixa .ar-vd-formas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ar-vd-caixa .ar-fluxo > .x-panel:has(.ar-vd-formas, .ar-vd-tot), .ar-vd-caixa .ar-fluxo > .x-panel:has(.ar-vd-formas, .ar-vd-tot) > .x-panel-bodyWrap,
  .ar-vd-caixa .ar-fluxo > .x-panel:has(.ar-vd-formas, .ar-vd-tot) > .x-panel-bodyWrap > .x-panel-body,
  .ar-vd-caixa .ar-fluxo > .x-panel:has(.ar-vd-formas, .ar-vd-tot) .x-autocontainer-outerCt { height: auto !important; }
  .ar-vd-caixa .ar-fluxo > .x-panel:has(.ar-vd-tot) { margin: 6px 0 10px; }
  /* Exercicios: o cartao tinha uma linha so para o ABRIR (o lado esquerdo vem vazio - exercicio nao tem selo):
     o ABRIR vai para o lado do nome e o cartao fica 40px mais baixo. Com algo no lado esquerdo fica como era */
  .ar-lista-exerc .ar-cardev:has(> .ar-cardev-topo > .ar-cardev-esq:empty) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .ar-lista-exerc .ar-cardev:has(> .ar-cardev-topo > .ar-cardev-esq:empty) > * { grid-column: 1 / -1; }
  .ar-lista-exerc .ar-cardev:has(> .ar-cardev-topo > .ar-cardev-esq:empty) > .ar-cardev-nome { grid-column: 1; grid-row: 1; }
  .ar-lista-exerc .ar-cardev:has(> .ar-cardev-topo > .ar-cardev-esq:empty) > .ar-cardev-topo { grid-column: 2; grid-row: 1; margin: 0; }
  .ar-lista-exerc .ar-cardev-topo > .ar-cardev-esq:empty { display: none; }
  /* Evolucao do aluno, ficha aberta: os cinco numeros (quilometros, registros, presencas, provas, melhor ritmo) um
     por linha - 483px. Em duas colunas, o quinto ocupando a linha inteira: 3 linhas */
  .ar-evo-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ar-evo-nums > .ar-evo-num:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Fichas de treino e Treinos solicitados: os quatro numeros em 2 x 2, como os Feedbacks (grupo 1, 30/10) - na
     faixa que rola de lado so 1 cartao e meio ficava a vista e o titulo saia cortado ("AGUARDANDO RESPO...");
     o quadro cresce com eles e a lista ocupa o resto (encaixarPe) */
  .ar-fluxo > .ar-fi-kpis-host, .ar-fluxo > .ar-fi-kpis-host > .x-panel-bodyWrap, .ar-fluxo > .ar-fi-kpis-host > .x-panel-bodyWrap > .x-panel-body,
  .ar-fluxo > .ar-fi-kpis-host .x-autocontainer-outerCt { height: auto !important; }
  .ar-kpis.ar-fi-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-columns: auto; overflow: visible; padding-bottom: 0; }
  .ar-kpis.ar-fi-kpis .ar-kpi-t, .ar-kpis.ar-fi-kpis .ar-kpi-s { white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .ar-vd-barra-ges.ar-pulso-ges .ar-vd-barra-n { animation: none; }
}

/* celular 03/11 - corridas */
/* ============================================================================
   CELULAR (03/11/2026), Corridas: Inscricoes, Check-in e resultados, Retirada de kit. Medido no navegador de
   celular de verdade (Scripts\Dev\gu-celular.js, 390x844 e 360x740); fotos antes/depois em
   C:\BuildTemp\AdsonRamon\trab-cel03-b. So o celular: tudo dentro do @media; no PC (1366x768) nada muda.
   O toque na linha (Check-in, Retirada de kit) e a sombra da faixa de acoes vem do adson-tema.js (funcoes ...Cor).
   ========================================================================== */
@media (max-width: 759px) {
  /* Inscricoes (a unica tela com Detalhes + Baixa manual + Reenviar comprovante): Inscricao manual, os 4 filtros e
     as 7 acoes vinham antes da lista - a 1a linha comecava em 880px (fora da 1a tela) e as acoes ficavam 950px acima
     da 8a linha. Agora a 1a linha comeca em 500px: barra de cima numa fileira, filtros com o rotulo ao lado e as
     acoes presas no pe (94px com os totais; 111px em tela de 360) */
  /* 1) "Atualizado as" ao lado do Inscricao manual (eram duas fileiras), quebrando em duas linhas se precisar */
  .ar-fluxo:has(> .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .ar-cab-encolhe .ar-fluxo-cab > .ar-aovivo { width: auto !important; flex: 1 1 0; min-width: 0; align-self: center; text-align: right; }
  /* 2) Situacao, Modalidade e Kit numa linha so cada, rotulo a esquerda do campo (44px por filtro em vez de 72).
     O Evento (o 1o rotulo) continua com a largura toda: o nome dele e longo e cortava ao lado do rotulo (360px)
     ou em dois por linha. Cada rotulo vem logo antes do seu campo no DFM (rotulo + campo) */
  .ar-fluxo:has(> .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .ar-fluxo:has(> .ar-rotulo ~ .x-field.ar-campo) > .ar-rotulo:not(:first-child) { width: 92px !important; flex: none; margin-top: 0 !important; align-self: center; }
  .ar-fluxo:has(> .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-panel > .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .ar-fluxo:has(> .ar-rotulo ~ .x-field.ar-campo) > .ar-rotulo:not(:first-child) + .x-field.ar-campo { width: calc(100% - 102px) !important; flex: none; min-width: 0; }
  /* 3) as acoes descem para depois da lista e ficam presas no pe da tela enquanto ela rola (como as da
     Mensalidade): tocar na linha e a acao ja esta a vista. Uma faixa que rola de lado - o botao cortado na ponta e
     a sombra (ar-mais-cor, adson-tema.js) mostram que ha mais; a sombra some no fim. As da linha primeiro
     (Detalhes, Baixa manual, Reenviar), depois as da lista (Gerar peitos, CSV) e as perigosas por ultimo
     (Estornar, Cancelar inscricao - o servidor ainda pergunta antes). Os totais ficam embaixo, em letra menor. No
     fim da lista a faixa volta ao lugar dela e nao cobre a paginacao. Os totais acompanham a faixa (sticky left), na
     largura da vista menos as margens - mais largos, ficavam cortados na esquerda com a faixa no fim */
  .ar-fluxo > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) {
    order: 50 !important; position: sticky !important; bottom: 0 !important; z-index: 3; background: var(--ds-bg) !important;
    box-shadow: 0 -1px 0 var(--ds-border), 0 -12px 16px -14px rgba(16, 24, 40, .35);
  }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: auto auto; align-items: center;
    gap: 4px 8px; padding-top: 10px; padding-bottom: 8px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn { grid-row: 1; margin: 0 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-ic-olho { order: 1 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-ic-dinheiro { order: 2 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-ic-enviar { order: 3 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn:not([class*="ar-ic-"]):not(.ar-btn-perigo) { order: 4 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-ic-baixar { order: 5 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-btn-perigo { order: 6 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .x-btn.ar-btn-perigo.ar-ic-fechar { order: 7 !important; }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .ar-apoio {
    order: 9 !important; grid-row: 2; grid-column: 1 / span 8; position: sticky !important; left: 14px !important; width: auto !important;
    max-width: calc(100vw - 64px); font-size: 12.5px !important; line-height: 1.35 !important;
  }
  .ar-fluxo:has(> .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar) > .ar-apoio .x-innerhtml { font-size: 12.5px !important; line-height: 1.35 !important; }
  .ar-fluxo > .x-panel:has(> .x-panel-bodyWrap > .x-panel-body > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-btn.ar-ic-olho ~ .x-btn.ar-ic-dinheiro ~ .x-btn.ar-ic-enviar).ar-mais-cor::after {
    content: ""; position: absolute; top: 0; right: 0; width: 44px; height: 58px; z-index: 2; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--ds-bg) 85%);
  }
  /* Retirada de kit com varios achados: a ordem era ficha, lista e so depois "Confirmar retirada" (a lista de 10
     no meio, ~730px). Com 2 ou mais na lista ela vem primeiro e a ficha fica colada no cartao do Confirmar; tocar
     num atleta leva a tela ate a ficha (adson-tema.js) e o Confirmar ja aparece embaixo dela. Com 1 achado (o QR
     do comprovante) nada muda: a ficha continua em cima */
  .ar-kit-card .ar-fluxo > .x-panel:has(tbody tr.ar-tl ~ tr.ar-tl) { order: -1 !important; margin-bottom: 6px; }
}

/* celular 03/11 - janelas */
/* ============================================================================
   CELULAR, janelas e caixas por cima das telas (03/11/2026). Medido com o navegador de celular de verdade
   (390x844 e 360x740, toque); fotos antes/depois em C:/BuildTemp/AdsonRamon/trab-cel03-a. So o celular:
   tudo dentro do @media; no PC (1366x768) nada muda.
   ========================================================================== */
@media (max-width: 759px) {
  /* janela flutuante que virou coluna (adson-tema.js, janelaJan: Inscricao manual, Minha senha): o titulo
     grande de dentro repete o da barra da janela; os botoes do pe dividem a linha (ou um por linha quando
     nao cabem), todos da largura da janela */
  .x-window.x-layer .ar-fluxo-jan > .ar-titulo { display: none !important; }
  .x-window.x-layer .ar-fluxo-jan > .x-btn { flex: 1 1 auto; }
  /* a faixa do alto da Inscricao manual ("Evento: ...") guardava o recuo de 20px do computador */
  .x-window.x-layer .ar-fluxo-jan > .x-panel.ar-transp .x-abs-layout-item { left: 0 !important; }
  /* Inscricao manual: CPF e Buscar na mesma linha, como no computador (o CPF de 100% jogava o Buscar sozinho
     para a linha de baixo, longe do campo) */
  .x-window.x-layer .ar-fluxo-jan > .x-field.ar-masc-cpf:has(+ .x-btn.ar-ic-buscar) { width: calc(100% - 112px) !important; }
  .x-window.x-layer .ar-fluxo-jan > .x-field.ar-masc-cpf + .x-btn.ar-ic-buscar { flex: 0 0 102px; }
  /* X de fechar da janela flutuante: alvo de 15x15 (a regra de 26px do tema nao pega - no Ext 7 a classe
     x-tool-close fica no proprio x-tool-img). A area de toque cresce para 39px por um ::before (fora da conta
     do Ext: mudar o tamanho do x-tool fazia o Ext refazer a barra, mais alta e com o X fora do centro; so o
     do X - o de maximizar fica com 0px, escondido pelo tema, e nao pode ganhar area) e o quadrado cinza
     aparece com 29px pela sombra */
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-tool:has(> .x-tool-close)::before { content: ""; position: absolute; inset: -12px; }
  .x-window.x-layer:not(.ar-login-janela) > .x-window-header .x-tool-img.x-tool-close { border-radius: 8px; box-shadow: 0 0 0 7px var(--ds-surface-low); }
  /* caixas de pergunta (jquery-confirm): os botoes enchem a linha e quebram com folga de 8px - com 3 botoes
     ("Cancelar e estornar R$ / So cancelar / Voltar") as duas linhas ficavam coladas (0px entre elas) e
     desalinhadas, convite a tocar no botao errado; 44px de altura no toque. Menos recheio e icone menor:
     sobra largura para o texto, que antes quebrava em 314px */
  .jconfirm.jconfirm-modern .jconfirm-box { padding: 20px 18px 16px !important; }
  .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-title-c .jconfirm-icon-c { width: 44px; height: 44px; margin: 0 0 8px !important; font-size: 20px !important; }
  .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-content { padding: 0 2px 4px !important; }
  .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons { display: flex !important; flex-wrap: wrap; gap: 8px; float: none !important; }
  .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn { flex: 1 1 auto; margin: 0 !important; min-height: 44px; white-space: normal; }
  /* caixa que pede texto (Recusar PCD, Cancelar a venda): campo de 14px (o iPhone aumenta a pagina ao tocar
     em campo com menos de 16px) e 34px de altura */
  .jconfirm .jconfirm-box .fs-form-control { font-size: 16px !important; min-height: 44px; box-sizing: border-box; }
  /* calendario do Ext: dias de 32px, setas de 30 e "Hoje" de 45x24 - pequenos para o dedo. Mais largo, dias de
     38px; em 360px fica 312 (o Ext encosta o calendario na borda da tela pelo tamanho que o CSS da) */
  .x-datepicker, .x-datepicker.x-layer { width: min(312px, calc(100vw - 48px)) !important; }
  .x-datepicker-inner td, .x-datepicker-inner th { width: auto !important; }
  .x-datepicker-date { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 15px !important; }
  .x-datepicker-prev, .x-datepicker-next { width: 40px !important; height: 40px !important; flex-basis: 40px; }
  .x-datepicker-footer .x-btn, .x-monthpicker-buttons .x-btn {
    display: inline-flex !important; align-items: center; justify-content: center; min-width: 96px; min-height: 36px; box-sizing: border-box;
  }
  /* seletor de mes/ano (toque no nome do mes): meses e anos de 33x16 apertados num canto, setas de 15px e
     OK/Cancelar de 24px de altura. Meses e anos dividem a largura (duas colunas cada, na ordem do Ext: Jan Jul /
     Fev Ago...), itens de 36px */
  .x-monthpicker .x-monthpicker-months, .x-monthpicker .x-monthpicker-years { width: 50% !important; box-sizing: border-box; padding: 0 4px; }
  .x-monthpicker .x-monthpicker-item { width: 50% !important; height: 42px; margin: 0 !important; }
  .x-monthpicker .x-monthpicker-item-inner { height: 36px !important; line-height: 36px !important; margin: 3px !important; font-size: 15px !important; }
  .x-monthpicker .x-monthpicker-yearnav, .x-monthpicker .x-monthpicker-yearnav-button-ct { height: 42px !important; }
  .x-monthpicker .x-monthpicker-yearnav-button { width: 36px !important; height: 36px !important; margin-top: 3px !important; }
  /* janela do tema (.ar-dlg: Quem recebeu cortesia, texto do WhatsApp...): a altura maxima era 100vh - 32px,
     e no celular o 100vh conta a tela sem a barra do navegador - com a barra a vista a caixa passava do veu
     e o X e o Fechar ficavam embaixo dela. Do tamanho do veu (fixo, a area que se ve) */
  .ar-dlg-veu > .ar-dlg { max-height: 100%; }
  /* painel do sino: o "Ver todas" do alto era um alvo de 60x16 */
  .ar-notif-painel .ar-notif-todas { display: inline-block; padding: 12px 8px; margin: -12px -8px -12px auto; }
}
/* teclado aberto que encolhe a pagina (pouca altura): o icone das caixas de pergunta sai, para o campo e os
   botoes caberem (Recusar PCD em 360px: o campo ficava escondido debaixo do texto) */
@media (max-width: 759px) and (max-height: 560px) {
  .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-title-c .jconfirm-icon-c { display: none !important; }
}

/* celular 03/11 - geral */
@media (max-width: 759px) {
  /* arrasto de lado numa parte que nao rola de lado nao vira o "voltar" do navegador (saia do Gestor no meio do
     trabalho - visto na barra de acoes das Inscricoes e nos botoes do topo); as faixas que rolam de lado continuam */
  html, body { overscroll-behavior: none; }
}