/* [responsivo 2026-09] Ajustes de layout para telas pequenas do painel Robos365.
   Regra: só breakpoints, espaçamento, empilhamento, alvos de toque e rolagem. Nunca cores, fontes, logo ou tema.
   Arquivo GERADO por tools/local-server/responsive/build-css.sh a partir de css/responsive/<escopo>.css (fonte de verdade). */

/* ===== escopo: base (css/responsive/base.css) ===== */
/* [responsivo 2026-09] Escopo: base. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* Regras GLOBAIS do shell do painel (cabeçalho, menus, título, cartões, tabelas, modais).
   Mantidas com especificidade baixa de propósito: cada página tem o próprio arquivo em
   css/responsive/<escopo>.css e deve poder sobrescrever estas regras sem recorrer a !important. */

/* Botão de fechar do drawer móvel (marcação em index.php). Fica oculto por padrão em QUALQUER
   largura — inclusive no desktop, onde o drawer não existe — e só aparece com o menu aberto.
   [fix 2026-09] */
#nav .mobile-menu-close-container {
  display: none;
}

/* =========================================================================
   ≤ 1199.98px — botão de fechar do menu lateral móvel
   ========================================================================= */
@media (max-width: 1199.98px) {

  #nav.mobile-side-ready .mobile-menu-close-container,
  #nav.mobile-side-in .mobile-menu-close-container,
  #nav.mobile-side-out .mobile-menu-close-container {
    display: flex;
    justify-content: flex-end;
    /* .nav-content centraliza os filhos no drawer; sem o stretch o botão ficaria no meio. */
    align-self: stretch;
    width: 100%;
    padding: 0 0.25rem;
  }

  /* Mesmo alvo de toque do botão do hambúrguer. */
  #nav .mobile-menu-close-container .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* =========================================================================
   ≤ 991.98px — cabeçalho, menu hambúrguer e drawer lateral
   ========================================================================= */
@media (max-width: 991.98px) {

  /* Botão do hambúrguer: tinha 36 px de largura (alvo pequeno demais no toque). */
  #nav .mobile-buttons-container .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Logomarcas do topo: a imagem continua do mesmo tamanho, só o link vira um alvo de 44 px. */
  #nav .nav-content > .logo > a,
  #nav #strategy-header .logo > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Itens de submenu clonados no drawer mediam 37 px de altura. */
  #nav .menu-container ul#menu ul li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Espaço para a seta de submenu não encostar no rótulo do item em 360 px. */
  #nav .menu-container ul#menu > li > a {
    padding-right: 1.75rem;
  }

  /* Rolagem por toque no drawer e nas áreas com OverlayScrollbars. */
  #nav .menu-container,
  .os-viewport {
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================================
   ≤ 767.98px — alvos de toque de formulários e botões
   ========================================================================= */
@media (max-width: 767.98px) {

  /* Botões: mínimo de 40 px de altura, com o rótulo centralizado verticalmente.
     column-gap reposiciona o espaço entre ícone e texto que o flex container absorve. */
  .btn:not(.btn-close):not(.btn-icon-only) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  /* Botões sem a classe .btn-icon não têm espaçamento próprio entre ícone e rótulo. */
  .btn:not(.btn-close):not(.btn-icon):not(.dropdown-toggle) {
    column-gap: 0.35rem;
  }

  /* Botões só de ícone continuam quadrados, mas com 40 px de lado. */
  .btn-icon.btn-icon-only {
    min-width: 40px;
    min-height: 40px;
  }

  /* Campos de formulário: 44 px de altura (o tema usa --input-height: 2.25rem = 36 px). */
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* O tema fixa a altura do select2 com !important (var(--input-height)); a caixa e a seta precisam mudar juntas. */
  .select2-container--bootstrap4 .select2-selection--single {
    min-height: 44px !important;
  }

  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    min-height: 44px;
    padding-top: 0.5rem; /* centraliza o texto nos 8 px a mais de altura */
  }

  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
  }

  textarea.form-control {
    min-height: 88px;
  }

  /* Abas roláveis na horizontal em vez de quebrar em várias linhas. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs > .nav-item,
  .nav-tabs > li {
    flex: 0 0 auto;
  }

  .nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
  }

  /* Tabelas largas: rolagem horizontal contida no próprio bloco. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive > .table {
    margin-bottom: 0;
  }
}

/* =========================================================================
   ≤ 575.98px — densidade de conteúdo em celulares
   ========================================================================= */
@media (max-width: 575.98px) {

  /* O tema reserva 1.75rem+ de padding interno nos cartões; em 360 px isso consome
     um quinto da largura útil. Reduzido só no celular. */
  .card > .card-body,
  .card > .card-header,
  .card > .card-footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Título da página: quebra palavras longas em vez de estourar a largura. */
  .page-title-container {
    margin-bottom: 0.75rem;
  }

  .page-title-container #title,
  .page-title-container h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Modais: sem largura maior que a tela e com respiro menor nas bordas.
     As variantes .modal-fullscreen* do Bootstrap ficam de fora — elas já ocupam 100%. */
  .modal-dialog:not([class*="modal-fullscreen"]) {
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-header,
  .modal-footer {
    padding: 0.75rem 1rem;
  }

  .modal-footer {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Toasts/notificações do bootstrap-notify não podem ultrapassar a viewport. */
  .toast,
  .toast-container,
  [data-notify="container"] {
    max-width: calc(100vw - 1.5rem);
  }

  /* Rodapé: conteúdo centralizado e sem estourar quando o texto quebra. */
  footer .footer-content .container > .row > [class*="col-"] {
    text-align: center;
  }
}

/* =========================================================================
   ≤ 767.98px — piso de legibilidade da tipografia auxiliar
   -------------------------------------------------------------------------
   O template define .text-small = 0.7em, .text-extra-small = 0.65em e
   .badge = 0.7em sobre um corpo de 14px, o que resulta em 9–10px no celular
   (abaixo do mínimo legível). As regras abaixo só estabelecem um PISO em px:
   max() preserva o tamanho relativo quando o elemento herda uma fonte maior,
   e nenhuma família, peso ou cor é alterada — a identidade visual fica intacta.
   Aprovado pelo dono em 17/09/2026. [fix 2026-09]
   ========================================================================= */
@media (max-width: 767.98px) {

  /* 0.7em de 14px = 9.8px → piso de 12px. */
  .text-small {
    font-size: max(0.75rem, 0.7em) !important;
  }

  /* 0.65em de 14px = 9.1px → piso de 12px; a entrelinha de 1em ficava apertada. */
  .text-extra-small {
    font-size: max(0.75rem, 0.65em) !important;
    line-height: 1.25 !important;
  }

  /* Selos de status/vencimento: piso de 11px, com quebra permitida para não
     estourar a coluna quando o texto cresce (ex.: "Vencimento: 00/00/0000"). */
  .badge {
    font-size: max(0.6875rem, 0.7em);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* <code> herda o 0.875em do Bootstrap; dentro de .text-small chegava a ~8.6px. */
  code {
    font-size: max(0.75rem, 0.875em);
  }
}

/* ===== escopo: login (css/responsive/login.css) ===== */
/* [responsivo 2026-09] Escopo: login. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* Páginas servidas por dashboard/login.php (/login.html, /register.html, /forgot.html,
   /login-sessao.html, /verification-success.html, /verification-fail.html).
   Âncora de escopo: .full-page-content-right-border só existe nessas telas. */

/* =========================================================================
   ≤ 1199.98px — botão "Mostrar/Ocultar" senha
   ========================================================================= */
@media (max-width: 1199.98px) {

  /* O botão ocupa ~60 px a partir da borda direita do campo, mas .pe-7 reserva só 48 px:
     o texto/placeholder da senha passava por baixo do rótulo "Mostrar". */
  .full-page-content-right-border .form-group.position-relative .form-control.pe-7 {
    padding-right: 4.75rem !important;
  }

  /* O botão ficava 30 px de altura e 2 px abaixo da base do campo (t-3 = top: 1rem).
     Passa a ocupar a altura inteira do campo: alvo de 44x44 e alinhado ao centro. */
  .full-page-content-right-border .form-group.position-relative .js-toggle-pass {
    top: 0 !important;
    bottom: 0;
    height: auto;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================================
   ≤ 991.98px — alvos de toque dos links do cartão
   ========================================================================= */
@media (max-width: 991.98px) {

  /* "Esqueceu a senha?", "Cadastre-se", "Voltar para o Login" e as logomarcas do rodapé
     mediam entre 13 px e 20 px de altura. */
  .full-page-content-right-border .text-end > a,
  .full-page-content-right-border p.h6 > a,
  .full-page-content-right-border p.mb-4 > a,
  .full-page-content-right-border .d-block.d-lg-none > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.25rem;
    min-height: 44px;
  }

  /* Compensa a altura extra do link "Esqueceu a senha?" para não afastar o Turnstile. */
  .full-page-content-right-border form .mb-3.text-end {
    margin-bottom: 0 !important;
  }
}

/* =========================================================================
   ≤ 575.98px — cartão centralizado sem estourar em 360 px
   ========================================================================= */
@media (max-width: 575.98px) {

  /* O widget do Turnstile tem 300 px fixos; com px-4 + px-5 (144 px de padding somado)
     o conteúdo mínimo do cartão era 404 px e a página rolava na horizontal em 360 px.
     O padding foi reduzido no HTML (px-2 px-sm-4 / px-3 px-sm-5); aqui fica a contenção. */
  .full-page-content-right-border .cf-turnstile {
    max-width: 100%;
    overflow-x: auto;
  }

  /* O Turnstile é um bloco de 300 px: centraliza dentro do cartão em vez de encostar à esquerda. */
  .full-page-content-right-border .cf-turnstile > iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Blocos de alerta e textos legais com respiro menor em telas estreitas. */
  .full-page-content-right-border .alert {
    padding: 0.75rem 1rem;
  }
}

/* ===== escopo: licenses (css/responsive/licenses.css) ===== */
/* [responsivo 2026-09] Escopo: licenses. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* Origem do markup: dashboard/global-licenses.php (aceite dos termos, lista de licenças
   e detalhe com as abas) e dashboard/global-renew.php (que inclui global-hire.php).
   Os seletores usam os ids das abas (#bets, #upgrade, #configs) e combinações de classes
   que só existem em global-licenses.php, para não vazar para as outras páginas do painel.

   Complementa css/responsive/base.css — não repetir o que já está lá:
   .btn ≥ 40 px, .form-control/.form-select/select2 com 44 px, .nav-tabs roláveis,
   .table-responsive com rolagem contida, modais e padding de cartão no celular.

   As etapas de pagamento da renovação (#pm, #pay-card, #card-confirm, #pix-confirm,
   #coupon-box, #qrcode) vêm de global-hire.php e já são tratadas em
   css/responsive/cliente.css — aqui não há nenhuma regra para elas. */

/* ==========================================================================
   1. Aceite dos Termos de Uso (bloco que antecede a licença configurada)
   O tema aplica "white-space: nowrap" em .btn-xl. Como o .d-grid é um grid de
   uma coluna implícita, a trilha é dimensionada pelo max-content do botão
   ("Li e aceito as atualizações dos Termos de Uso do Serviço" = 359 px) e
   estoura a viewport de 360 px (scrollWidth medido: 398 px). Deixar o rótulo
   quebrar resolve a rolagem lateral sem mexer em cor, fonte ou texto.
   ========================================================================== */
@media (max-width: 767.98px) {
  .d-grid > button[name="terms"] {
    white-space: normal;
  }

  /* Zera o tamanho mínimo automático dos itens do grid para a trilha poder
     encolher até a largura disponível. */
  .d-grid > button[name="terms"],
  .d-grid > a.align-items-center.text-center {
    min-width: 0;
  }

  /* "Não aceito os Termos de Uso" é um link de 21 px de altura dentro do
     .d-grid do formulário de aceite — abaixo do alvo mínimo de toque.
     O par de classes align-items-center + text-center num <a> só existe aqui. */
  .d-grid > a.align-items-center.text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   2. Detalhe da licença — aba "Configurações do Robô" (#configs)
   Os campos Casa de Apostas / Usuário / Senha / Stake usam
   "col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-3": meia largura em
   QUALQUER viewport. Em 360 px sobram 148 px por campo, o valor do usuário é
   cortado e o rótulo "Stake (conforme gestão casa)" quebra em duas linhas,
   desalinhando o par de inputs (medido: label de 21 px em ≥ 576 px, 2 linhas em 360 px).
   ========================================================================== */
@media (max-width: 575.98px) {
  #configs form.row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  /* O select2 de Estado/Cidade calcula a largura uma única vez, na inicialização
     (medido: 280 px dentro de uma coluna com 272 px de área de conteúdo), e não
     reage a rotação de tela. O !important é necessário porque o select2 escreve
     "width" no atributo style do próprio container. */
  #configs .select2-container {
    width: 100% !important;
  }
}

/* ==========================================================================
   3. Detalhe da licença — aba "Upgrade de Plano" (#upgrade)
   O grid é "row row-cols-2 row-cols-lg-2": duas colunas em TODAS as larguras.
   Quando há um único plano, o PHP injeta um <div class="col"></div> vazio como
   espaçador (global-licenses.php, linha 1561), empurrando o cartão para a metade
   direita. Medido: coluna de 183 px em 390 px e nome do plano em 2 linhas até
   575 px; a partir de 768 px o nome volta para uma linha.
   ========================================================================== */
@media (max-width: 767.98px) {
  #upgrade .row.row-cols-2 > * {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Espaçador vazio usado quando existe apenas um plano disponível. */
  #upgrade .row.row-cols-2 > .col:empty {
    display: none;
  }
}

/* ==========================================================================
   4. Detalhe da licença — aba "Apostas Processadas" (#bets)
   Obs.: a tabela de 10 colunas que existe neste arquivo (linhas 1173-1216)
   está dentro de um bloco comentado do PHP e não é renderizada; o histórico
   aparece como um cartão por aposta. Por isso não há regra de empilhamento
   com data-label aqui.
   ========================================================================== */
@media (max-width: 575.98px) {
  /* Resumo "APOSTAS FEITAS / NÃO FEITAS": o bloco interno é "col-4 col-lg-3",
     ou seja, 1/3 da largura mesmo em 360 px — o rótulo ocupa duas linhas e
     sobram 2/3 do cartão vazios (medido: 103 px de 350 px em 390 px; a partir
     de 576 px o rótulo já cabe em uma linha). É o único bloco renderizado:
     os demais estão comentados no PHP. */
  #bets .card.sh-10 > .card-body > .row.g-0 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Filtro de período: as duas datas ocupam a linha inteira e o botão de busca
     (só ícone) sobra sozinho numa terceira linha, encostado à esquerda. */
  #bets form.row > .col-auto {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #bets form.row > .col-auto > .btn {
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  /* Cartão de cada aposta: "row g-0 > col-lg-6 | col-lg-2 | col-lg-2 | col-lg-1 |
     col-lg-1". Abaixo de lg todos os blocos empilham, mas só os três primeiros
     trazem "mb-3 mb-lg-0" no HTML: Cashout e "Pegou?" ficam colados um no outro.
     Regra derivada do markup (linhas 1049-1157); não foi possível conferir no
     navegador porque o histórico de apostas vem da API BM, indisponível no
     ambiente local. */
  #bets .card .row.g-0 > .col-lg-1 {
    margin-bottom: 1rem;
  }

  #bets .card .row.g-0 > .col-lg-1:last-child {
    margin-bottom: 0;
  }
}

/* ===== escopo: cliente (css/responsive/cliente.css) ===== */
/* [responsivo 2026-09] Escopo: cliente. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* ---------------------------------------------------------------------------
   /home.html — escolha do robô (dashboard/home.php)
   Os dois blocos "Padrão" / "Alta Liquidez" ficavam em col-6 fixo e viravam
   duas colunas de ~115 px em 360 px. Agora empilham abaixo de 576 px; aqui só
   removemos a borda divisória vertical (que só faz sentido lado a lado) e
   apertamos o padding interno do card, que é inline (3rem/2rem) no PHP.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .rb-home-planos > .col-12.border-end {
    border-right: 0 !important;
    margin-bottom: 1.5rem;
  }

  .card.bg-tennis365 > .card-body,
  .card.bg-tipster > .card-body {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

}

/* Alvo de toque: os links de acesso usam btn-sm (30 px de altura) em toda a
   faixa de menu recolhido. */
@media (max-width: 991.98px) {
  .card.bg-tennis365 .btn,
  .card.bg-tipster .btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   /<servico>/home.html — cartão de chamada da turma (dashboard/global-home.php)
   --------------------------------------------------------------------------- */
/* Com rótulos longos ("Adquirir Nova Licença Antecipadamente") as colunas
   col-sm-auto dos botões comiam a largura do texto, que ficava com uma palavra
   por linha em 768 e 1024 px. Abaixo de 1200 px texto e botões ocupam a linha
   inteira; o desktop (>= 1200) continua com botões à direita. */
@media (max-width: 1199.98px) {
  .rb-service-cta .row.g-2 > .col-12.col-sm-auto {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .rb-service-cta .row.g-2 > .col-12.col-sm-auto .btn {
    width: 100%;
    min-height: 44px;
  }

  .rb-service-cta .row.g-2 > .col .pe-3 {
    padding-right: 0 !important;
    margin-bottom: 1rem !important;
  }
}

/* ---------------------------------------------------------------------------
   /<servico>/archives.html — material de apoio (dashboard/global-archives.php)
   A linha tinha altura fixa (sh-21 = 10.5rem; sh-lg-10 = 5rem). Com descrição
   longa o texto e o botão "Baixar PDF" vazavam para fora do card em 360 px
   (48 px de estouro) e em 1024 px (25 px). Altura passa a ser automática até
   1199.98 px; o desktop (>= 1200) fica exatamente como estava.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .rb-archive-row {
    height: auto !important;
    min-height: 5rem;
  }

  .rb-archive-row > .col > .card-body {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

@media (max-width: 767.98px) {
  .rb-archive-row {
    min-height: 0;
  }

  .rb-archive-row .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   /profile.html — perfil (dashboard/profile.php)
   Alvos de toque nos formulários das abas e imagens que não escalavam.
   --------------------------------------------------------------------------- */
/* Até 991.98 px o painel usa o layout de menu recolhido (hambúrguer), ou seja,
   é a faixa operada por toque — é nela que valem os alvos de 40 px. */
@media (max-width: 991.98px) {
  #profileTab .form-control,
  #profileTab .form-select,
  #addressTab .form-control,
  #addressTab .form-select,
  #verificationTab .form-control,
  #verificationTab .form-select,
  #telegramTab .form-control {
    min-height: 40px;
  }

  #profileTab .btn,
  #addressTab .btn,
  #verificationTab .btn,
  #telegramTab .btn,
  #logsTab .btn {
    min-height: 40px;
  }

  /* Menu lateral de abas: linhas de 1 item viram alvos de toque cheios. */
  .nav.flex-column .nav-link,
  .nav .nav-link[data-bs-toggle="tab"] {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  #telegramTab img,
  #verificationTab img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 767.98px) {
  /* Logs: data do registro alinhada à esquerda quando a coluna empilha. */
  #logsTab .row.g-0 > .col-md-3 > .d-flex {
    justify-content: flex-start !important;
  }

  #logsTab .row.g-0 > .col-md-3 {
    padding-left: 1.75rem;
  }
}

/* ---------------------------------------------------------------------------
   /<servico>/hire.html — contratação (dashboard/global-hire.php)
   Campos de cartão, cupom, formas de pagamento e QR Code do Pix.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #pay-card .form-control,
  #pay-card .form-select,
  #coupon-box .form-control {
    min-height: 40px;
  }

  #pay-card .btn,
  #pay-card .pay,
  #pix-confirm .btn,
  #card-confirm .pay {
    min-height: 44px;
  }

  /* O link "Realizar Pagamento" não tem a classe .btn no HTML; garantimos
     apenas área de toque, sem mexer em cor, fonte ou borda. */
  #card-confirm a.pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
  }

  #qrcode {
    max-width: 100%;
    height: auto;
  }

  /* Cartões de forma de pagamento: altura fixa sh-20 (10rem) fica folgada
     demais no celular; reduzimos só o espaçamento interno. */
  #pm .card > div {
    padding: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  #pm > [class*="col-"] {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* Textarea do "copia e cola" do Pix nunca deve gerar rolagem lateral. */
  #pix-confirm textarea.copy,
  #question textarea.copy {
    word-break: break-all;
  }
}

/* ---------------------------------------------------------------------------
   /<servico>/billing.html — financeiro do cliente (dashboard/global-billing.php)
   A lista de faturas tem 9 colunas (fatura, data, plano, tipo, forma, valor,
   status, pagamento, NF-e). No desktop é uma tabela normal; abaixo de 768 px
   cada linha vira um bloco rotulado, mesmo padrão .table-stack já usado em
   /admin/clientes.html (css/responsive/admin1.css), aqui com seletor próprio
   desta página. Só layout: nenhuma cor, fonte ou tema.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .rb-billing .table-responsive.is-stacked {
    overflow-x: visible;
  }

  .rb-billing .table-responsive table.table-stack {
    min-width: 0;
    width: 100%;
    margin-bottom: 0;
  }

  /* Cabeçalho fica só para leitores de tela: o rótulo passa a ser o data-label. */
  .rb-billing table.table-stack thead,
  .rb-billing table.table-stack thead th {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .rb-billing table.table-stack,
  .rb-billing table.table-stack tbody,
  .rb-billing table.table-stack tr,
  .rb-billing table.table-stack td {
    display: block;
    width: 100%;
  }

  .rb-billing table.table-stack tr {
    border: 1px solid var(--separator);
    border-radius: .5rem;
    margin-bottom: .75rem;
    padding: .25rem .75rem;
  }

  .rb-billing table.table-stack tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 36px;
    padding: .35rem 0;
    border: 0;
    border-bottom: 1px solid var(--separator-light);
    text-align: right;
  }

  .rb-billing table.table-stack tr > td:last-child {
    border-bottom: 0;
  }

  .rb-billing table.table-stack tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    text-align: left;
    font-size: .75rem;
    opacity: .65; /* herda a cor do template (sem cor fixa) */
  }

  .rb-billing table.table-stack tr > td:empty {
    display: none;
  }

  /* Plano ocupa a linha inteira: nome + robô/turma + link da licença não cabem
     no lado direito de uma linha de 360 px. */
  .rb-billing table.table-stack tr > td[data-label="Plano"] {
    display: block;
    text-align: left;
  }

  .rb-billing table.table-stack tr > td[data-label="Plano"]::before {
    display: block;
    margin-bottom: .2rem;
  }

}

/* Links de apoio da tabela ("Concluir pagamento", "Ver licença") nascem com 13 px
   de altura; em toda a faixa operada por toque viram alvos de 40 px. O desktop
   (>= 1200 px) fica exatamente como está. */
@media (max-width: 1199.98px) {
  .rb-billing table.table-stack tr > td a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* O resumo (Total pago / Faturas pagas / Pendentes) já empilha via col-6/col-12;
   aqui só evitamos que o valor em negrito estoure a coluna em 360 px. */
@media (max-width: 575.98px) {
  .rb-billing-resumo .card-body {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .rb-billing-resumo .fs-5 {
    word-break: break-word;
  }
}

/* ===== escopo: admin1 (css/responsive/admin1.css) ===== */
/* [responsivo 2026-09] Escopo: admin1. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* =========================================================================
   0) ATÉ 1199.98px — alvos de toque da tabela de licenças (≥1200 intocado)
   A tabela só aparece a partir de 768 px; em 768–1199 (tablet retrato e
   paisagem) os links de WhatsApp/Telegram mediam 14×20 px.
   ========================================================================= */
@media (max-width: 1199.98px) {
    .admin-lic .d-none.d-md-block table td a[title="WhatsApp"],
    .admin-lic .d-none.d-md-block table td a[title="Telegram"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        vertical-align: middle;
    }
    /* Controle de expandir linha do DataTables (o "#" da 1ª coluna é um link) */
    .admin-lic table.data-table td.dtr-control > a,
    .admin-fin table.data-table td.dtr-control > a {
        display: inline-flex;
        align-items: center;
        min-width: 40px;
        min-height: 40px;
    }

    /* --- Alvos de toque: mínimo 40 px de altura nos controles das 3 páginas ---
       Os 11 modais de /admin/clientes.html ficam fora do wrapper .admin-clientes,
       por isso a classe .admin-clientes-modal foi adicionada a cada um. */
    .admin-clientes .btn,
    .admin-clientes-modal .btn,
    .admin-lic-modal .btn,
    .admin-lic .btn,
    .admin-fin .btn {
        min-height: 40px;
    }
    .admin-clientes .btn-sm,
    .admin-clientes-modal .btn-sm,
    .admin-lic-modal .btn-sm,
    .admin-lic .btn-sm,
    .admin-fin .btn-sm {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Link "Ver detalhes" dentro dos logs continua inline (não é botão de barra) */
    .admin-clientes .btn-link.btn-toggle-details {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .admin-clientes .form-control,
    .admin-clientes .form-select,
    .admin-clientes-modal .form-control,
    .admin-clientes-modal .form-select,
    .admin-lic .form-control,
    .admin-lic .form-select,
    .admin-fin .form-control,
    .admin-fin .form-select {
        min-height: 40px;
    }
    .admin-clientes .form-control-sm,
    .admin-clientes .form-select-sm,
    .admin-clientes-modal .form-control-sm,
    .admin-clientes-modal .form-select-sm,
    .admin-lic .form-control-sm,
    .admin-lic .form-select-sm,
    .admin-fin .form-control-sm,
    .admin-fin .form-select-sm {
        min-height: 40px;
    }
    /* Interruptor "fatura avulsa": a linha inteira vira alvo de toque */
    .admin-clientes-modal .form-check.form-switch {
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-left: 0;
    }
    .admin-clientes-modal .form-check.form-switch > .form-check-input {
        margin-left: 0;
        margin-top: 0;
        flex: 0 0 auto;
    }
    .admin-clientes-modal .form-check.form-switch > .form-check-label {
        margin-bottom: 0;
    }
    /* Botão × do cabeçalho do modal */
    .admin-clientes-modal .btn-close,
    .admin-lic-modal .btn-close {
        min-width: 40px;
        min-height: 40px;
    }
    .admin-fin .input-group-sm > .form-select-sm,
    .admin-fin .input-group-sm > .input-group-text {
        min-height: 40px;
    }

    /* Abas/pílulas das 3 páginas com altura de toque */
    .admin-clientes .nav-tabs .nav-link,
    .admin-lic .nav-tabs .nav-link,
    .admin-lic .nav-pills .nav-link,
    .admin-fin .nav-tabs .nav-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Menu "•••" de cada linha: alvo de toque real */
    .admin-clientes .cell-actions > summary {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* [open] eleva a especificidade acima do <style> inline de admin-clientes.php (display:block), que vem depois na cascata. */
    .admin-clientes .cell-actions[open] .actions-menu a {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Rodapés de modal: botões com espaço e sem aperto */
    .admin-clientes-modal .modal-footer,
    .admin-lic-modal .modal-footer {
        gap: .5rem;
    }
}

/* =========================================================================
   0b) 992–1199.98px — a tabela de 720 px cabia só até 1199 px de janela
   Em 1024 px o wrapper tinha 676 px com overflow:visible: 44 px da coluna
   "Ações" ficavam cortados e sem barra de rolagem. O menu "•••" é
   position:fixed, então continua escapando do contêiner com overflow.
   ========================================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .admin-clientes .tab-content .table-responsive {
        overflow-x: auto;
    }
}

/* =========================================================================
   1) TABLET E ABAIXO (≤ 991.98px) — empilhamento e rolagem contida
   ========================================================================= */
@media (max-width: 991.98px) {

    /* --- /admin/clientes.html: painel de detalhe não pode herdar altura fixa --- */
    .admin-clientes > .row.g-0 {
        min-height: 0;
    }

    /* Abas do detalhe do cliente: rolagem horizontal contida, sem clipar */
    .admin-clientes #clienteTabs .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-clientes #clienteTabs .nav-tabs .nav-item {
        flex: 0 0 auto;
    }
}

/* =========================================================================
   2) CELULAR / TABLET RETRATO (≤ 767.98px)
   ========================================================================= */
@media (max-width: 767.98px) {

    /* -------------------------------------------------------------------
       /admin/clientes.html — tabelas densas viram lista empilhada.
       Decisão: as 3 tabelas das abas (Faturas, Licenças, Logs) têm 9/9/5
       colunas e min-width 720px; em 360 px as colunas Status e Ações ficam
       fora da tela (o menu "•••" era inalcançável sem rolagem horizontal
       dentro de um overlay que já rola na vertical). Como são tabelas de
       consulta + ação pontual (não de comparação lado a lado), empilhar com
       data-label é melhor do que manter table-responsive com colunas ocultas.
       ------------------------------------------------------------------- */
    .admin-clientes .table-responsive.is-stacked {
        overflow-x: visible;
    }
    .admin-clientes .table-responsive table.table-stack {
        min-width: 0;
        width: 100%;
        margin-bottom: 0;
    }
    .admin-clientes table.table-stack thead,
    .admin-clientes table.table-stack thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .admin-clientes table.table-stack,
    .admin-clientes table.table-stack tbody,
    .admin-clientes table.table-stack tr,
    .admin-clientes table.table-stack td {
        display: block;
        width: 100%;
    }
    .admin-clientes table.table-stack tr {
        border: 1px solid var(--separator);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
    }
    .admin-clientes table.table-stack tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        min-height: 36px;
        padding: .35rem 0;
        border: 0;
        border-bottom: 1px solid var(--separator-light);
        text-align: right;
    }
    .admin-clientes table.table-stack tr > td:last-child {
        border-bottom: 0;
    }
    .admin-clientes table.table-stack tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        text-align: left;
        font-size: .75rem;
        opacity: .65; /* herda a cor do template (sem cor fixa) */
    }
    .admin-clientes table.table-stack tr > td:empty {
        display: none;
    }
    /* Célula de ações ocupa a linha inteira e alinha o "•••" à direita */
    .admin-clientes table.table-stack tr > td[data-label="Ações"] {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .admin-clientes table.table-stack tr > td .actions-menu {
        text-align: left;
    }
    /* Logs: o bloco "Ver detalhes" precisa da largura toda */
    .admin-clientes table.table-stack tr > td[data-label="Detalhes"] {
        display: block;
        text-align: left;
    }
    .admin-clientes table.table-stack tr > td[data-label="Detalhes"]::before {
        display: block;
        margin-bottom: .2rem;
    }
    .admin-clientes table.table-stack .log-details-content {
        max-height: 240px;
    }

    /* Filtros de log: cada campo em linha própria, sem aperto em 360 px */
    .admin-clientes .log-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-clientes .log-filters > div {
        width: 100%;
    }
    .admin-clientes .log-filters select,
    .admin-clientes .log-filters input,
    .admin-clientes .log-filters .btn {
        width: 100%;
        min-width: 0;
    }

    /* Cabeçalho "Faturas (n) + Nova Fatura": permite quebrar em 360 px */
    .admin-clientes .tab-pane > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Overlay de detalhe: respiro inferior para a última linha da tabela */
    .admin-clientes .detail-panel.active .tab-content {
        padding-bottom: 3rem;
    }

    /* -------------------------------------------------------------------
       /admin/licenses.html — cartões de licença (a tabela já é d-none aqui)
       ------------------------------------------------------------------- */
    /* Barra de ações do cartão: mantida em uma linha; os dois botões de
       contato encolhem (flex-shrink) em vez de empurrar o botão de cancelar
       para uma linha só dele. */
    .admin-lic .lic-card .d-flex.gap-2.pt-2 {
        flex-wrap: nowrap;
    }
    .admin-lic .lic-card .btn-cancelar-lic {
        min-width: 44px;
        flex: 0 0 auto;
    }

    /* -------------------------------------------------------------------
       /admin/finances.html — cabeçalho e filtro de período
       ------------------------------------------------------------------- */
    .admin-fin > .d-flex.justify-content-between.flex-wrap {
        align-items: flex-start;
    }
    .admin-fin #formPeriodo {
        width: 100%;
    }
    .admin-fin #formPeriodo .input-group {
        width: 100%;
    }
    .admin-fin #formPeriodo select {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }
}

/* =========================================================================
   3) CELULAR ESTREITO (≤ 575.98px)
   ========================================================================= */
@media (max-width: 575.98px) {

    /* Cartões de fatura/licença: pares de colunas viram uma coluna só
       (em 360 px "Mensal - TESTE" e a data de pagamento quebravam no meio) */
    .admin-fin .fat-card .row.g-2 > .col-6,
    .admin-lic .lic-card .row.g-2 > .col-6 {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Valor da fatura desce para baixo do bloco de dados em vez de espremê-lo */
    .admin-fin .fat-card .card-body > .d-flex.justify-content-between {
        flex-wrap: wrap;
    }
    .admin-fin .fat-card .card-body > .d-flex.justify-content-between > .text-end {
        margin-left: 0 !important;
        width: 100%;
        text-align: left !important;
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--separator-light);
    }

    /* Resumo PIX / Cartão / Total: empilha em vez de quebrar os valores.
       A classe .align-items-center entra no seletor porque o utilitário do
       Bootstrap vence por ordem; sem ela os três valores ficavam centralizados. */
    .admin-fin .d-md-none > .card.mt-3 > .card-body > .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        /* !important necessário: neste build o utilitário .align-items-center
           do Bootstrap é declarado com !important e venceria o seletor. */
        align-items: flex-start !important;
        gap: .25rem;
    }

    /* Cartões de estatística: 2 por linha continuam, mas sem texto colado */
    .admin-fin .stat-card .card-body,
    .admin-lic .stat-card .card-body {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    /* Listagem de clientes: a lista pode usar a altura toda da tela */
    .admin-clientes #clientesListBody {
        max-height: none;
    }

    /* Filtros da lista de clientes: cada botão com largura mínima confortável */
    .admin-clientes .card-header .d-flex.gap-1.flex-wrap .filter-btn {
        flex: 1 1 calc(50% - .25rem);
    }

    /* Ações do cartão de licença: WhatsApp/Telegram dividem o espaço que
       sobra ao lado do botão de cancelar (44 px), tudo na mesma linha em
       360 px; se um rótulo crescer, o flex-wrap do bloco acima quebra. */
    .admin-lic .lic-card .d-flex.gap-2.pt-2 > .flex-fill {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ===== escopo: admin2 (css/responsive/admin2.css) ===== */
/* [responsivo 2026-09] Escopo: admin2. Só breakpoints, espaçamento, empilhamento e alvos de toque. Sem cores, fontes ou tema. */

/* ------------------------------------------------------------------
   Comum a todas as páginas do escopo (turmas, cupons, grátis, repro,
   telegram, telegramcfg, tips, configs). O gancho é a classe
   `admin2-page`, aplicada no container de cada página.
   ------------------------------------------------------------------ */

/* Grupos de botões: quebram linha em vez de estourar a coluna. */
@media (max-width: 1199.98px) {
    .admin2-page .admin2-btn-group {
        flex-wrap: wrap;
    }
}

/* Alvos de toque de no mínimo 40 px em celular e tablet (retrato e paisagem).
   O corte em 1199.98 px preserva o desktop (>= 1200 px) intocado. */
@media (max-width: 1199.98px) {

    .admin2-page .btn,
    .admin2-page .form-select,
    .admin2-page .form-control:not(textarea):not([contenteditable]) {
        min-height: 40px;
    }

    .admin2-page .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin2-page .btn-icon-only {
        min-width: 40px;
    }

    /* Caixas de seleção e switches ficam manipuláveis com o dedo. */
    .admin2-page .form-check-input:not([type="checkbox"][role="switch"]) {
        width: 24px;
        height: 24px;
    }

    .admin2-page .form-switch .form-check-input {
        width: 48px;
        height: 28px;
    }

    /* Rolagem horizontal sempre contida pelo wrapper, nunca pela página. */
    .admin2-page .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* Tabelas marcadas com `admin2-stack` viram lista empilhada no celular:
   cada célula ocupa uma linha e recebe o rótulo da coluna via data-label. */
@media (max-width: 767.98px) {

    .admin2-page .admin2-stack,
    .admin2-page .admin2-stack > tbody,
    .admin2-page .admin2-stack > tbody > tr,
    .admin2-page .admin2-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .admin2-page .admin2-stack > thead {
        display: none;
    }

    .admin2-page .admin2-stack > tbody > tr {
        padding: 0.5rem 0;
    }

    .admin2-page .admin2-stack > tbody > tr > td {
        padding-left: 0;
        padding-right: 0;
        border-bottom-width: 0;
        text-align: left;
    }

    .admin2-page .admin2-stack > tbody > tr > td:last-child {
        border-bottom-width: var(--bs-border-width, 1px);
    }

    .admin2-page .admin2-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label) ": ";
        opacity: 0.65;
    }

    /* A célula de ações não precisa de rótulo: os botões já se explicam. */
    .admin2-page .admin2-stack > tbody > tr > td.admin2-acoes::before {
        content: none;
    }

    .admin2-page .admin2-stack > tbody > tr > td.admin2-acoes {
        white-space: normal;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* ------------------------------------------------------------------
   /admin/turmas.html
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* Barra de filtros/ações: empilha e ocupa a largura toda. */
    .admin2-turmas .admin2-toolbar > div,
    .admin2-turmas .admin2-toolbar-actions {
        width: 100%;
    }

    .admin2-turmas .admin2-toolbar-actions .form-select {
        /* o template aplica width:auto inline no filtro de robô */
        width: 100% !important;
        flex: 1 0 100%;
    }

    .admin2-turmas .admin2-toolbar-actions > .btn,
    .admin2-turmas .admin2-toolbar-actions > a.btn {
        flex: 1 1 auto;
    }

    /* Ações da turma/plano alinhadas à esquerda quando empilhadas. */
    .admin2-turmas .row > [class*="col-"].text-end {
        text-align: left !important;
    }
}

/* ------------------------------------------------------------------
   Páginas com DataTables do template Acorn:
   /admin/gratis.html, /admin/repro.html, /admin/telegram.html,
   /admin/tips.html
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* Barra de busca/exportação/paginação: alinha à esquerda e quebra linha
       em vez de empurrar os controles para fora da viewport. */
    .admin2-gratis .card-body > .row > [class*="col-"].text-end,
    .admin2-repro .card-body > .row > [class*="col-"].text-end,
    .admin2-telegram .card-body > .row > [class*="col-"].text-end,
    .admin2-tips .card-body > .row > [class*="col-"].text-end {
        text-align: left !important;
    }

    .admin2-gratis .search-input-container,
    .admin2-repro .search-input-container,
    .admin2-telegram .search-input-container,
    .admin2-tips .search-input-container {
        width: 100%;
    }

    /* Menus suspensos dos controles não podem estourar a largura da tela. */
    .admin2-page .datatable-export .dropdown-menu,
    .admin2-page .datatable-length .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* Linha filha do DataTables Responsive (colunas recolhidas). */
    .admin2-page table.dtr-inline .dtr-details {
        display: block;
        width: 100%;
    }

    .admin2-page table.dtr-inline .dtr-details > li {
        display: block;
        padding: 0.25rem 0;
    }
}

@media (max-width: 1199.98px) {

    /* Links dentro das células (nº da linha, telefone do cliente): ganham
       área de toque de ~40 px sem alterar a altura da linha nem o texto. */
    .admin2-gratis td a:not(.btn):only-child,
    .admin2-repro td a:not(.btn):only-child,
    .admin2-telegram td a:not(.btn):only-child,
    .admin2-tips td a:not(.btn):only-child {
        position: relative;
    }

    /* Só links sozinhos na célula e que não são botões: evita áreas de toque sobrepostas entre ações vizinhas. */
    .admin2-gratis td a:not(.btn):only-child::after,
    .admin2-repro td a:not(.btn):only-child::after,
    .admin2-telegram td a:not(.btn):only-child::after,
    .admin2-tips td a:not(.btn):only-child::after {
        content: "";
        position: absolute;
        top: -10px;
        right: -8px;
        bottom: -10px;
        left: -8px;
    }
}

/* ------------------------------------------------------------------
   /admin/telegramcfg.html — cartões de comando/bloqueio
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {

    /* Descrição e comandos ganham a largura toda; selo e chave descem
       para a linha de baixo em vez de espremer o texto. */
    .admin2-telegramcfg .card-body .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .admin2-telegramcfg .card-body .d-flex.justify-content-between > div:first-child {
        flex: 1 0 100%;
    }
}

@media (max-width: 575.98px) {

    /* "Reprocessar todas" ocupa a linha inteira, com alvo de toque cheio. */
    .admin2-repro .btn-danger {
        width: 100%;
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}

/* ------------------------------------------------------------------
   /admin/configs.html — caixas de seleção com rótulo colado
   ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {

    .admin2-configs .form-check-input {
        vertical-align: middle;
    }

    /* O rótulo passa a ser alvo de toque (o `for` agora aponta para o id
       correto), garantindo linha de 40 px sem inchar a caixa de seleção. */
    .admin2-configs .form-check-input + .form-check-label {
        display: inline-block;
        margin-left: 0.5rem;
        min-height: 40px;
        line-height: 40px;
        cursor: pointer;
    }
}